/* The live look inside the studio (live-demo.js), on the public pages.
   It reads the tokens every page already defines; the accent stays clay
   chrome, never a measured value. */

.ld { display: grid; gap: 12px; max-width: 980px; margin: 0 auto; }
.ld-stage { position: relative; overflow: hidden; isolation: isolate; aspect-ratio: 16 / 9; border-radius: var(--r-card, 10px); background: var(--bg-elev, #0C0C0E); box-shadow: var(--elev-2); }
.ld-stage.is-drop { box-shadow: var(--elev-2); outline: 2px solid var(--accent, #FF4D1F); }
.ld-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ld-song { position: absolute; left: 20px; right: 84px; bottom: 54px; z-index: 1; color: var(--ink, #F6F5F2); text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6); }
.ld-kicker { margin: 0 0 2px; font-size: 13px; opacity: 0.8; }
.ld-title { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ld-meta { margin: 4px 0 0; font-size: 13px; opacity: 0.85; }
.ld-play { position: absolute; right: 18px; bottom: 54px; z-index: 1; width: 52px; height: 52px; display: grid; place-items: center; padding: 0; cursor: pointer; border: 0; border-radius: 50%; color: var(--on-accent, #FFFFFF); background: var(--accent, #FF4D1F); }
.ld-play[hidden] { display: none; }
.ld-play svg { width: 22px; height: 22px; fill: currentColor; }
.ld-prompt { display: flex; align-items: center; gap: 4px; min-height: 52px; margin: -36px 18px 0; padding: 0 6px 0 16px; position: relative; z-index: 2; border-radius: var(--r-card, 10px); color: var(--ink, #F6F5F2); background: var(--surface-2, #121216); box-shadow: var(--elev-1); font-size: 15px; }
.ld-typed { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ld-caret { width: 2px; height: 18px; background: var(--accent, #FF4D1F); animation: ld-blink 1s steps(1) infinite; }
.ld-go { margin-left: auto; padding: 9px 14px; border-radius: var(--r-ctl, 6px); color: var(--on-accent, #FFFFFF); background: var(--accent, #FF4D1F); font-size: 13px; font-weight: 600; }
@keyframes ld-blink { 50% { opacity: 0; } }
.ld-looks { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; border-bottom: 1px solid var(--line, rgba(255, 255, 255, 0.14)); padding-bottom: 2px; }
.ld-look { min-height: 38px; padding: 0 6px; cursor: pointer; border: 0; border-bottom: 2px solid transparent; border-radius: 0; color: var(--ink-soft, #B4B0AA); background: transparent; font: inherit; font-size: 13px; font-weight: 500; transition: color 0.18s ease, border-color 0.18s ease; }
.ld-look:hover { color: var(--ink, #F6F5F2); }
.ld-look[aria-checked="true"] { color: var(--ink, #F6F5F2); font-weight: 600; border-bottom-color: var(--accent, #FF4D1F); }
.ld-look:focus-visible, .ld-open:focus-visible, .ld-play:focus-visible { outline: 2px solid var(--accent, #FF4D1F); outline-offset: 2px; }
.ld-acts { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.ld-drop, .ld-open { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border-radius: var(--r-ctl, 6px); font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer; }
.ld-drop { color: var(--on-accent, #FFFFFF); background: var(--accent, #FF4D1F); }
.ld-open { color: var(--ink, #F6F5F2); background: var(--surface-2, #121216); }
.ld-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ld-drop:focus-within { outline: 2px solid var(--ink, #F6F5F2); outline-offset: 2px; }
.ld-note { margin: 0; text-align: center; color: var(--muted, #7E7A75); font-size: 13px; }
@media (max-width: 699px) {
  .ld-stage { aspect-ratio: 4 / 5; }
  .ld-prompt { margin: -30px 10px 0; font-size: 13px; }
  .ld-look { min-height: 44px; }
  .ld-drop, .ld-open { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) { .ld-caret { animation: none; } }

/* The band that holds it on a page. */
.ld-band { padding: 72px 0; }
.ld-band-head { max-width: 680px; margin: 0 auto 24px; text-align: center; }
.ld-band-kicker { margin: 0 0 6px; color: var(--accent-text, #FF6B42); font-size: 13px; font-weight: 500; }
.ld-band-title { margin: 0; color: var(--ink, #F6F5F2); font-size: clamp(26px, 4vw, 40px); font-weight: 600; line-height: 1.12; letter-spacing: -0.015em; }
.ld-band-lede { margin: 10px 0 0; color: var(--ink-soft, #B4B0AA); font-size: 15px; line-height: 1.5; }
@media (max-width: 699px) { .ld-band { padding: 48px 0; } }

/* Compact, in the landing hero (decision 115): the clip leads, and the
   hero's own "Start a release" is the one primary action. The demo's file
   button, studio link and note step back (a song can still be dropped on
   the stage), and its typed "Create" reads as part of the picture. */
[data-live-demo-compact] .ld-acts,
[data-live-demo-compact] .ld-note { display: none; }
[data-live-demo-compact] .ld-go { background: transparent; color: var(--ink-soft, #B4B0AA); box-shadow: none; border: 1px solid var(--line, rgba(255, 255, 255, 0.14)); }

/* The tool reel in the landing hero (data-live-demo-reel): the studio's tools
   as tabs over one stage, walked in turn until the visitor takes one. */
* { scrollbar-width: none; }
::-webkit-scrollbar { display: none; width: 0; height: 0; }
.ld-tools { display: flex; gap: 16px; overflow-x: auto; padding: 0 4px; margin: 0; justify-content: center; border-bottom: 1px solid var(--line, rgba(255, 255, 255, 0.14)); }
@media (max-width: 699px) { .ld-tools { justify-content: flex-start; gap: 12px; } }
.ld-tool {
  flex: none; min-height: 38px; padding: 0 4px; cursor: pointer; border: 0;
  border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: var(--ink-soft, #B4B0AA); font: inherit; font-size: 13px; font-weight: 500;
  transition: color 0.2s, border-color 0.2s;
}
.ld-tool:hover { color: var(--ink, #F6F5F2); }
.ld-tool[aria-selected="true"] { color: var(--ink, #F6F5F2); font-weight: 600; border-bottom-color: var(--accent, #FF4D1F); background: transparent; }
.ld-tool:focus-visible { outline: 2px solid var(--accent, #FF4D1F); outline-offset: 2px; }
[data-live-demo-reel] .ld-song[hidden], [data-live-demo-reel] .ld-looks[hidden] { display: none; }
body:not(.signed-in) [data-live-demo-reel] .ld-stage { aspect-ratio: 4 / 3; }
.ld-samples { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; justify-content: center; padding: 2px 0 4px; }
.ld-samples-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: var(--track-label); color: var(--muted, #7E7A75); margin-right: 4px; }
.ld-sample {
  min-height: 30px; padding: 0 12px; cursor: pointer;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.14)); border-radius: var(--r-pill, 999px);
  background: rgba(255, 255, 255, 0.03); color: var(--ink-soft, #B4B0AA);
  font: inherit; font-size: 12px; font-weight: 500;
  transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.ld-sample:hover { color: var(--ink, #F6F5F2); border-color: rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.06); }
.ld-sample[aria-pressed="true"] { color: var(--ink, #F6F5F2); font-weight: 600; border-color: var(--accent, #FF4D1F); background: rgba(255, 77, 31, 0.14); }
.ld-sample:focus-visible { outline: 2px solid var(--accent, #FF4D1F); outline-offset: 2px; }
@media (max-width: 699px) {
  .ld-tools { gap: 10px; }
  .ld-tool { min-height: 44px; padding: 0 6px; font-size: 12px; }
  .ld-samples { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  .ld-sample { flex: none; min-height: 34px; }
  body:not(.signed-in) [data-live-demo-reel] .ld-stage { aspect-ratio: 4 / 3; }
  [data-live-demo-reel] .ld-looks { display: none; }
}