/* GIAD landing page.
   Values come from the design export "Landing + live editor": its stylesheet plus the
   inline styles of Main.dc.html, moved into classes with the same numbers.
   The live editor (#giad-editor.ed) ships its own stylesheet, css/editor.css, scoped to
   .ed. No class defined here is one the editor uses for something else; the shared
   design classes (.btn, .vchip, .knob, .track, .cap, .xtrack, .xcap) are overridden
   there, as in the design. */

:root{
  --bg:#141619;
  --panel:#1B1E22;
  --panel-2:#22262B;
  --well:#0F1114;
  --line:#2C3036;
  --line-2:#3A3F47;
  --line-3:#4A4F57;
  --ink:#F3E6CC;
  --ink-2:#A9A296;
  --ink-3:#8F897F;
  --ink-4:#5E5A54;
  --accent:#F0441E;
  --accent-hover:#FF5A33;
  --accent-ink:#FF6B3D;
  --ease:cubic-bezier(.2,.8,.2,1);
  /* 40px side gutter at desktop widths, 16px on phones */
  --gutter:clamp(16px,4vw,40px);
  /* 24px padding inside nav and windows, 16px on phones */
  --pad:min(24px,var(--gutter));
  color-scheme:dark;
}

/* ---------- base ---------- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg)}
a{color:var(--ink)}
a:hover{color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px}
[hidden]{display:none !important}
.giad{min-height:100vh;overflow-x:hidden;font-family:'Archivo',system-ui,sans-serif;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
.giad *{box-sizing:border-box}
/* The design shows Chrome's light-scheme placeholder grey; pinned so color-scheme:dark keeps it. */
.giad ::placeholder{color:#757575;opacity:1}

.mono{font-family:'JetBrains Mono',ui-monospace,monospace}
.display{font-family:'Archivo',sans-serif;font-weight:900;font-stretch:125%;font-variation-settings:'wdth' 125}
.script{font-family:'Yellowtail',cursive;font-weight:400}
.muted{color:var(--ink-2)}
.ink{color:var(--ink)}

.skip{position:absolute;left:16px;top:-80px;z-index:10;padding:14px 18px;border-radius:999px;background:var(--accent);color:var(--bg);font:600 15px/1 'Archivo',sans-serif;text-decoration:none}
.skip:focus{top:16px}
.skip:hover{color:var(--bg)}

.page{max-width:1280px;margin:0 auto;border-left:1px solid var(--line);border-right:1px solid var(--line)}

/* ---------- shared components (from the design stylesheet) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border-radius:999px;border:1px solid var(--line-2);background:transparent;color:var(--ink);font:600 15px/1 'Archivo',sans-serif;text-decoration:none;cursor:pointer;transition:background .25s,border-color .25s,transform .25s var(--ease)}
.btn:hover{border-color:var(--ink);color:var(--ink);transform:translateY(-1px)}
.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--bg)}
.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--bg)}
.btn[disabled]{opacity:.4;cursor:not-allowed;transform:none}

.win{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.win--flush{border-radius:0;border-left:0;border-right:0}
.winbar{display:flex;align-items:center;gap:12px;height:40px;padding:0 14px;border-bottom:1px solid var(--line)}
.win-dots{display:flex;gap:6px}
.dot{width:10px;height:10px;border-radius:50%;background:var(--line-2);display:inline-block}
.win-title{flex:1;text-align:center;font-size:12px;color:var(--ink-3)}
.winfoot{display:flex;flex-wrap:wrap;gap:16px;align-items:center;min-height:36px;padding:8px 16px;border-top:1px solid var(--line);font-size:12px;color:var(--ink-3)}
.winfoot-end{margin-left:auto}

.chip{min-height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--line-2);background:transparent;color:var(--ink-2);font:500 13px/1 'Archivo',sans-serif;cursor:pointer;transition:all .25s}
.chip:hover{color:var(--ink);border-color:var(--ink-3)}
.chip.on{background:var(--ink);border-color:var(--ink);color:var(--bg)}

.logline{display:flex;gap:10px;font-size:13px;line-height:1.9;transition:color .3s}
.logline.todo{color:var(--ink-4)}
.logline.active{color:var(--accent-ink)}
.logline.done{color:var(--ink-2)}
.logmark{width:12px}

.ebar{flex:1 1 0;min-width:2px;border-radius:2px 2px 0 0;background:var(--line-2);transform-origin:bottom;animation:grow .7s var(--ease) both}
.ebar.moment{background:var(--ink)}
.ebar.peak.moment{background:var(--accent)}

/* Hovering a list dims and blurs every row but the one under the pointer.
   The entry animation fills backwards only, so it doesn't pin opacity at 1 afterwards. */
.focus-list .focus-row{transition:opacity .35s,filter .35s}
.focus-list:hover .focus-row{opacity:.35;filter:blur(.6px)}
.focus-list:hover .focus-row:hover{opacity:1;filter:none}
.focus-row{animation:fadeUp .6s var(--ease) backwards}

.pick{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-height:56px;padding:10px 14px;border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--ink-2);font:500 14px/1.2 'Archivo',sans-serif;text-align:left;cursor:pointer;transition:all .25s}
.pick:hover{border-color:var(--ink-3);color:var(--ink)}
.pick.on{border-color:var(--accent);color:var(--ink);background:var(--panel-2)}

.barbtn{height:32px;border:0;border-radius:4px;background:transparent;color:var(--ink-3);font:500 12px/1 'JetBrains Mono',monospace;cursor:pointer;transition:background .2s,color .2s}
.barbtn:hover:not([disabled]){background:var(--line);color:var(--ink)}
.barbtn.sel{background:var(--accent);color:var(--bg)}
.barbtn[disabled]{cursor:default}

.cell{position:relative;height:30px;border-radius:3px;background:var(--panel-2);overflow:hidden;transition:box-shadow .3s}
.cell .fill{position:absolute;left:0;right:0;bottom:0;transition:height .9s var(--ease)}
.cell.A .fill{background:var(--ink)}
.cell.B .fill{background:var(--accent)}
.cell.sel{box-shadow:inset 0 0 0 2px var(--accent-ink)}
.cell.chg::after{content:'';position:absolute;top:4px;right:4px;width:5px;height:5px;border-radius:50%;background:var(--bg);box-shadow:0 0 0 1.5px var(--ink)}
.cell.busy .fill{animation:shimmer 1s ease-in-out infinite}

.vchip{min-height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--line-2);background:transparent;color:var(--ink-2);font:500 12px/1 'JetBrains Mono',monospace;cursor:pointer}
.vchip.on{border-color:var(--ink);color:var(--ink)}

.knob{position:relative;width:44px;height:44px;border-radius:50%;background:radial-gradient(circle at 50% 35%,#353A42,#24282E);border:1px solid var(--line-2);transition:border-color .3s}
.knob .ptr{position:absolute;inset:0;transition:transform .9s var(--ease)}
.knob .ptr::before{content:'';position:absolute;left:50%;top:5px;width:3px;height:13px;margin-left:-1.5px;border-radius:2px;background:var(--ink)}
.knob.hl{border-color:var(--accent);animation:ring 1.6s ease-out infinite}
.track{position:relative;width:6px;height:150px;margin:0 auto;border-radius:3px;background:var(--well)}
.cap{position:absolute;left:50%;width:38px;height:18px;margin-left:-19px;border-radius:4px;background:var(--line-2);border:1px solid var(--line-3);transition:bottom .9s var(--ease),border-color .3s}
.cap::after{content:'';position:absolute;left:6px;right:6px;top:8px;height:1.5px;background:var(--ink)}
.cap.hl{border-color:var(--accent);animation:ring 1.6s ease-out infinite}
.xtrack{position:relative;height:6px;border-radius:3px;background:var(--well)}
.xcap{position:absolute;top:50%;width:20px;height:36px;margin-top:-18px;margin-left:-10px;border-radius:4px;background:var(--line-2);border:1px solid var(--line-3);transition:left .9s var(--ease),border-color .3s}
.xcap::after{content:'';position:absolute;top:6px;bottom:6px;left:9px;width:1.5px;background:var(--ink)}
.xcap.hl{border-color:var(--accent);animation:ring 1.6s ease-out infinite}

.move-btn{display:flex;gap:12px;align-items:baseline;width:100%;min-height:40px;padding:8px 10px;border:0;border-radius:8px;background:transparent;color:var(--ink-3);font:500 14px/1.3 'Archivo',sans-serif;text-align:left;cursor:pointer;transition:background .25s,color .25s}
.move-btn:hover{background:var(--panel-2);color:var(--ink)}
.move-btn.done{color:var(--ink-2)}
.move-btn.on{background:var(--panel-2);color:var(--ink)}

.skeleton{height:44px;border-radius:8px;background:var(--panel-2);animation:shimmer 1.2s ease-in-out infinite}
.eq i{display:inline-block;width:3px;height:12px;margin-right:2px;border-radius:1px;background:var(--accent);transform-origin:bottom;animation:eq 1s ease-in-out infinite}
.eq i:nth-child(2){animation-delay:.15s}
.eq i:nth-child(3){animation-delay:.3s}
.eq i:nth-child(4){animation-delay:.45s}

.field-label{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}

/* ---------- motion ---------- */
/* clip (hidden as fallback) so .rise-scroll inside still follows the page's scroll timeline */
.mask{display:block;overflow:hidden;overflow:clip;padding-top:.04em}
.rise{display:inline-block;animation:rise 1.1s cubic-bezier(.16,.84,.24,1) both}
.fade-up{animation:fadeUp .8s var(--ease) both}
.spin{animation:spin 90s linear infinite;transform-origin:50% 50%}

@keyframes rise{from{transform:translateY(105%)}to{transform:translateY(0)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes eq{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
@keyframes shimmer{0%,100%{opacity:.45}50%{opacity:1}}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(240,68,30,.55)}100%{box-shadow:0 0 0 10px rgba(240,68,30,0)}}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- nav ---------- */
.nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding:16px var(--pad)}
.brand,.brand:hover{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand-word{font-size:22px;letter-spacing:.01em}
.nav-links{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.nav-link{padding:12px;font-size:15px;text-decoration:none;color:var(--ink-2)}
.nav-link--hi{color:var(--ink)}
.nav-cta{margin-left:8px}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;padding:88px var(--gutter) 72px;border-top:1px solid var(--line)}
/* 720px from 1000px up; on smaller screens it shrinks so it stays behind the title, not the copy */
.hero-deck{position:absolute;right:0;top:-20px;width:clamp(300px,72vw,720px);aspect-ratio:1;pointer-events:none;opacity:.5}
.hero-ring{position:absolute;inset:0;width:100%;height:100%;filter:blur(42px);opacity:.55}
.hero-deck .deck-mark{opacity:.45}
.hero-deck .deck-grooves{opacity:.55}
.hero-kicker{position:relative;margin:0 0 28px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.hero-title{position:relative;margin:0;padding-top:.26em;font-size:clamp(72px,19vw,248px);line-height:.9}
.hero-my{position:absolute;left:-.04em;top:-.02em;z-index:2;font-size:.42em;color:var(--accent);transform:rotate(-8deg);animation-delay:.55s}
.hero-letters{display:flex;align-items:flex-start;gap:.03em}
.hero-col{display:flex;flex-direction:column;align-items:center;gap:.1em}
.hero-word{font-size:13px;letter-spacing:.14em;color:var(--ink-3)}
.hero-dot{color:var(--accent)}
.hero-col:nth-child(1) .rise{animation-delay:.05s}
.hero-col:nth-child(2) .rise{animation-delay:.12s}
.hero-col:nth-child(3) .rise{animation-delay:.19s}
.hero-col:nth-child(4) .rise{animation-delay:.26s}
.hero-dot .rise{animation-delay:.33s}
.hero-col:nth-child(1) .hero-word{animation-delay:.9s}
.hero-col:nth-child(2) .hero-word{animation-delay:1s}
.hero-col:nth-child(3) .hero-word{animation-delay:1.1s}
.hero-col:nth-child(4) .hero-word{animation-delay:1.2s}
.hero-note{position:relative;margin:20px 0 0;font-size:13px;color:var(--ink-3);animation-delay:1.4s}
.hero-lede{position:relative;margin:40px 0 0;max-width:780px;font-size:clamp(20px,2.3vw,28px);line-height:1.32;letter-spacing:-.01em;animation-delay:.7s}
.hero-lede strong{font-weight:700}
.hero-cta{position:relative;display:flex;flex-wrap:wrap;gap:12px;margin-top:32px;animation-delay:.85s}

/* Turntable: the G never moves. Light sweeps the grooves like a record spinning under a lamp;
   the mask keeps it off the tonearm, crossbar, star and the G's opening. */
.deck-mark{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.deck-grooves{position:absolute;inset:0;overflow:hidden;-webkit-mask:url(../assets/giad-mark-mask.svg) center/contain no-repeat;mask:url(../assets/giad-mark-mask.svg) center/contain no-repeat}
.deck-sheen{position:absolute;inset:0;background:conic-gradient(from 0deg,rgba(255,248,236,0) 0deg,rgba(255,248,236,.9) 34deg,rgba(255,248,236,0) 70deg,rgba(255,248,236,0) 180deg,rgba(255,248,236,.55) 214deg,rgba(255,248,236,0) 250deg,rgba(255,248,236,0) 360deg);animation:spin 5s linear infinite}
.mark-sm{display:block;width:32px;height:32px}

/* ---------- marquee ---------- */
.marquee{overflow:hidden;border-top:1px solid var(--line);padding:22px 0}
.marquee-track{display:flex;align-items:center;gap:40px;width:max-content;min-height:52px;animation:marquee 38s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track svg{flex:none}
.shout{white-space:nowrap;font-size:44px;line-height:1}
.shout.script{color:var(--accent);font-size:52px}

/* ---------- section frame (00–04) ---------- */
.sec{border-top:1px solid var(--line)}
.sec-head{display:flex;flex-wrap:wrap}
.sec-label{flex:1 1 240px;padding:48px var(--gutter) 24px}
.sec-intro{flex:999 1 560px;padding:48px var(--gutter) 24px}
.sec-kicker{margin:0;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.sec-title{margin:12px 0 0;font-size:20px;font-weight:700}
.sec-copy{margin:0;max-width:820px;font-size:clamp(22px,2.4vw,30px);line-height:1.3;letter-spacing:-.01em}
.sec-copy strong{font-weight:700}
.sec-body{padding:16px var(--gutter) 64px}

/* Two panes in a window, a divider between them. The divider is the main pane's shadow,
   so it sits on the right of the side pane when they share a row and on top of the main
   pane once they stack; the window clips the half that would land on its own border. */
.split{display:flex;flex-wrap:wrap}
.split-side{flex:1 1 320px;display:flex;flex-direction:column;padding:var(--pad);border-right:1px solid transparent}
.split-main{flex:999 1 520px;min-width:0;padding:var(--pad);box-shadow:-1px 0 0 var(--line),0 -1px 0 var(--line)}

/* ---------- 00 live ---------- */
.live-body{padding:16px 0 64px}

/* ---------- 01 set builder ---------- */
.set-form{gap:18px}
.set-prompt{width:100%;resize:none;padding:14px 16px;border-radius:10px;border:1px solid var(--line-2);background:var(--bg);color:var(--ink);font:400 17px/1.45 'Archivo',sans-serif}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.set-build{align-self:flex-start}
.set-log{margin-top:4px}
.skel-stack{display:flex;flex-direction:column;gap:10px}
.skeleton--curve{height:120px}
.set-empty{display:flex;align-items:center;justify-content:center;min-height:360px;border:1px dashed var(--line-2);border-radius:10px;color:var(--ink-3);font-size:15px;text-align:center;padding:24px}
.set-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 24px}
.set-for{margin:0;font-size:15px;color:var(--ink-2)}
.set-meta{margin:0;font-size:12px;color:var(--ink-3)}
.curve{margin-top:18px;padding:16px 16px 0;border-radius:10px;background:var(--bg)}
.curve-bars{display:flex;align-items:flex-end;gap:3px;height:110px}
.curve-axis{display:flex;justify-content:space-between;padding:8px 0 10px;font-size:11px;color:var(--ink-3)}
.set-rows{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column}
.set-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;padding:12px 4px;border-bottom:1px solid var(--line)}
.set-time{width:44px;font-size:13px;color:var(--ink-3)}
.set-track{flex:1 1 200px;min-width:0}
.set-title{display:block;font-size:16px;font-weight:600}
.set-artist{font-size:14px;color:var(--ink-2)}
.set-bpm{font-size:13px;color:var(--ink-2)}
.set-move{padding:4px 10px;border-radius:999px;border:1px solid var(--line-2);font-size:12px;color:var(--ink)}
.set-energy{display:flex;align-items:center;gap:8px;width:96px}
.set-meter{flex:1;height:4px;border-radius:2px;background:var(--line);overflow:hidden}
.set-meter-fill{display:block;height:100%;background:var(--ink)}
.set-meter-fill.is-peak{background:var(--accent)}
.set-energy-val{font-size:12px;color:var(--ink-3)}

/* ---------- 02 transitions ---------- */
.decks{display:flex;flex-wrap:wrap;align-items:stretch;gap:16px;padding:var(--pad);border-bottom:1px solid var(--line)}
.deck-a{flex:1 1 220px;display:flex;flex-direction:column;gap:8px}
.deck-b{flex:999 1 420px;display:flex;flex-direction:column;gap:8px}
.deck-go{flex:1 1 160px;display:flex;flex-direction:column;justify-content:flex-end;gap:8px}
.deck-label{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.deck-dot{display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:50%;background:var(--ink)}
.deck-dot--b{background:var(--accent)}
.deck-now{display:flex;flex-direction:column;gap:4px;min-height:56px;padding:10px 14px;border-radius:10px;background:var(--panel-2)}
.deck-title{font-size:16px;font-weight:600}
.deck-meta{font-size:12px;color:var(--ink-2)}
.picks{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px}
.pick-title{font-size:15px;font-weight:600}
.pick-meta{font-size:12px}
.tx-note{margin:0;padding:12px var(--pad);border-bottom:1px solid var(--line);font-size:12px;color:var(--ink-2)}
.tx-scroll{overflow-x:auto}
/* Only the bar/lane board needs 760px (712 + padding) and scrolls inside on phones; the idle
   and generating placeholders fit the window, so their text isn't stranded off to the right. */
.tx-board{min-width:min-content;padding:20px var(--pad) 8px}
.tx-show{min-width:712px}
.tx-empty{display:flex;align-items:center;justify-content:center;min-height:300px;border:1px dashed var(--line-2);border-radius:10px;color:var(--ink-3);font-size:15px}
.tx-gen{display:flex;flex-direction:column;gap:8px;min-height:300px}
.tx-gen .skeleton{height:30px}
.tx-gen .skeleton:first-child{height:32px}
.tx-gen-msg{margin:6px 0 0;font-size:12px;color:var(--accent-ink)}
.tx-grid{display:grid;grid-template-columns:112px repeat(16,minmax(0,1fr));gap:4px}
.tx-ruler{align-items:center}
.tx-plan{margin-top:8px}
.tx-notes{margin-top:4px;min-height:30px}
.tx-label{font-size:11px;letter-spacing:.1em;color:var(--ink-3)}
.tx-label--mid{align-self:center}
.tx-block,.tx-noteblock{grid-row:1;padding:7px 8px;border-radius:6px;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tx-block{background:var(--panel-2);color:var(--ink-2)}
.tx-noteblock{background:var(--accent);color:var(--bg);font-weight:700}
.tx-hint{grid-column:2 / 18;grid-row:1;align-self:center;font-size:11px;color:var(--ink-4)}
.tx-lanes{display:flex;flex-direction:column;gap:4px;margin-top:12px}
.tx-lane{align-items:center}
.tx-lane--split{margin-top:14px}
/* "B · vocal + music" is wider than the 112px column: end it with an ellipsis, not under a cell */
.tx-lane-name{font-size:12px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tx-lane-deck{font-weight:700;color:var(--ink)}
.tx-lane-deck--b{color:var(--accent-ink)}
.tx-edit{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 16px;padding:16px var(--pad) 20px}
.tx-field{flex:999 1 380px;display:flex;flex-direction:column;gap:8px}
.tx-sel{font-size:12px;color:var(--ink-2)}
.tx-input{width:100%;min-height:44px;padding:0 14px;border-radius:10px;border:1px solid var(--line-2);background:var(--bg);color:var(--ink);font:400 16px/1 'Archivo',sans-serif}
.versions{flex:1 1 100%;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.versions-label{font-size:12px;color:var(--ink-3)}
.versions-note{font-size:12px;color:var(--ink-2)}

/* ---------- 03 console ---------- */
.learn-side{gap:16px}
.learn-main{flex-basis:480px}
.learn-step{margin:0;font-size:12px;color:var(--accent-ink)}
.learn-title{margin:0;font-size:32px;line-height:1.1;font-weight:800;letter-spacing:-.01em}
.learn-text{margin:10px 0 0;font-size:17px;line-height:1.45;color:var(--ink-2)}
.learn-ctrls{display:flex;flex-wrap:wrap;gap:8px}
.learn-moves{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:2px}
.move-bar{width:52px;font-size:12px}
.mixer{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding:20px;border-radius:14px;background:var(--bg);border:1px solid var(--line)}
.ch{display:flex;flex-direction:column;align-items:center;gap:14px;padding:16px 8px;border-radius:10px;background:var(--panel)}
.ch-name{font-size:12px;letter-spacing:.1em;color:var(--ink-2)}
.ch-dot{display:inline-block;width:8px;height:8px;margin-right:6px;border-radius:50%;background:var(--ink)}
.ch-dot--b{background:var(--accent)}
.ch-knobs{display:flex;flex-direction:column;gap:10px}
.knob-row{display:flex;align-items:center;gap:12px}
.knob-label{width:48px;text-align:right;font-size:11px;color:var(--ink-3)}
.knob-val{width:64px;font-size:12px;color:var(--ink-2)}
.ch-fader{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:6px}
.fader-val{font-size:12px;color:var(--ink-2)}
.knob-val.is-hl,.fader-val.is-hl{color:var(--accent-ink)}
.xfader{grid-column:1 / -1;display:flex;flex-direction:column;gap:14px;padding:18px 24px 10px}
.xfader-labels{display:flex;justify-content:space-between;font-size:11px;color:var(--ink-3)}

/* ---------- 04 checks ----------
   Cards draw the divider on their left and overlap the previous column by 1px, so
   whatever the column count, the first card of a row never doubles the page border. */
.grades{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));border-top:1px solid var(--line);overflow-x:clip}
.grade{margin-left:-1px;padding:32px var(--gutter) 40px;border-left:1px solid var(--line);border-bottom:1px solid var(--line)}
.grade-label{margin:0;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.grade-value{margin:14px 0 0;font-size:44px;line-height:1}
.grade-unit{font-size:20px;color:var(--ink-2)}
.grade-text{margin:14px 0 0;font-size:15px;line-height:1.5;color:var(--ink-2)}
.grade-text strong{color:var(--ink)}

/* ---------- 05 join ---------- */
/* clip, not hidden: a hidden box would become the scroll container of the reveals inside,
   so the title would never rise on page scroll. hidden stays as the fallback. */
.join{position:relative;overflow:hidden;overflow:clip;padding:112px var(--gutter) 104px}
.join-ring{position:absolute;left:-300px;bottom:-420px;width:760px;height:760px;pointer-events:none;opacity:.4}
.join-ring svg{position:absolute;inset:0;width:100%;height:100%;filter:blur(46px)}
.join-title{position:relative;margin:0;font-size:clamp(44px,8vw,116px);line-height:.94;letter-spacing:-.015em}
.join-accent{color:var(--accent)}
.join-copy{position:relative;margin:28px 0 0;max-width:620px;font-size:20px;line-height:1.45;color:var(--ink-2)}
.join-form{position:relative;display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;margin-top:32px;max-width:640px}
.join-field{flex:1 1 280px;display:flex;flex-direction:column;gap:8px}
.join-input{width:100%;min-height:48px;padding:0 16px;border-radius:999px;border:1px solid var(--line-2);background:var(--bg);color:var(--ink);font:400 16px/1 'Archivo',sans-serif}
.join-submit{min-height:48px}
.join-done{position:relative;margin:32px 0 0;font-size:20px}
.join-done:focus{outline:none}
.join-done-mark{font-size:34px;color:var(--accent)}

/* ---------- footer ---------- */
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;padding:28px var(--gutter);border-top:1px solid var(--line)}
.foot-brand{display:flex;align-items:center;gap:10px}
.foot-word{font-size:18px}
.foot-meta{font-size:12px;color:var(--ink-3)}
.foot-links{display:flex;flex-wrap:wrap;gap:4px}
.foot-link{padding:12px 10px;font-size:14px;color:var(--ink-2);text-decoration:none}

/* ---------- narrow screens ---------- */
/* Once a section head stacks, the copy follows the title without the second 48px top pad. */
@media (max-width:801px){
  .sec-intro{padding-top:0}
}
/* Two 180px knob columns no longer fit side by side: stack CH1 over CH2. */
@media (max-width:540px){
  .mixer{grid-template-columns:minmax(0,1fr)}
}

/* ---------- scroll reveals ---------- */
@supports (animation-timeline: view()){
  .reveal{animation:fadeUp linear both;animation-timeline:view();animation-range:entry 5% entry 45%}
  .rise-scroll{display:inline-block;animation:rise linear both;animation-timeline:view();animation-range:entry 10% entry 60%}
}

@media (prefers-reduced-motion: reduce){
  .giad *{animation:none !important;transition:none !important}
}

/* ---------- 00 Live: the wizard in front of the editor (js/wizard.js) ----------
   Without JS the editor shows as before. With JS (html.js) the window starts on the wizard and
   .live-win.is-live swaps to the editor once the mix "renders". */
.wiz{display:none;padding:28px var(--pad) 32px}
.live-win{scroll-margin-top:10px}
.live-win:has(.ed-mini) .wf-hint{display:none}
.js .live-win:not(.is-live) .wiz{display:block}
.js .live-win:not(.is-live) #giad-editor{display:none}
.wiz-foot{display:none}
.js .live-win:not(.is-live) .wiz-foot{display:inline}
.js .live-win:not(.is-live) .live-only{display:none}
.wiz-again{padding:0;border:0;background:none;color:var(--ink-2);font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.wiz-again:hover{color:var(--accent-ink)}

.wiz-decks{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:stretch;gap:14px}
.wiz-slot{position:relative;display:flex;flex-direction:column;gap:10px;min-height:108px;padding:14px 16px;border:1px dashed var(--line-2);border-radius:12px;overflow:hidden;transition:border-color .3s,background .3s}
.wiz-slot.is-filled{border-style:solid;border-color:var(--line-3);background:var(--panel-2);animation:wiz-land .7s var(--ease)}
.wiz-slot-k{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.wiz-key{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.wiz-slot-body{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--ink-4)}
.wiz-slot.is-filled .wiz-slot-body{color:var(--ink);animation:wiz-in .45s var(--ease) both}
.wiz-slot-art{display:block;height:30px;border-radius:6px;background:var(--well);overflow:hidden}
.wiz-slot-art canvas,.wiz-art canvas{display:block;width:100%;height:100%}
.wiz-slot-name{font-size:16px;font-weight:700}
.wiz-slot-meta{font-size:12px;color:var(--ink-2)}
.wiz-join{align-self:center;display:flex;color:var(--ink-4);transition:color .3s}
.wiz[data-stage="go"] .wiz-join,.wiz[data-stage="run"] .wiz-join{color:var(--accent-ink)}
.wiz[data-stage="run"] .wiz-join{animation:wiz-nudge 1s ease-in-out infinite}
.wiz[data-stage="run"] .wiz-slot.is-filled::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(243,230,204,.08) 50%,transparent 70%);background-size:220% 100%;animation:wiz-scan 1.6s linear infinite;pointer-events:none}

.wiz-step,.wiz-go,.wiz-run{margin-top:30px}
.wiz-kicker{margin:0;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.wiz-title{margin:8px 0 0;font-size:24px;line-height:1.2;font-weight:800;outline:none}
.wiz-sub{margin:6px 0 0;font-size:15px;color:var(--ink-2)}
.wiz-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:18px}
.wiz-card{position:relative;display:flex;flex-direction:column;gap:4px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:border-color .25s,transform .25s var(--ease),box-shadow .25s}
.wiz-card:hover:not([disabled]){border-color:var(--ink-3);transform:translateY(-3px);box-shadow:0 14px 30px rgba(0,0,0,.4)}
.wiz-card[disabled]{cursor:not-allowed;opacity:.42}
.wiz-card.is-picked{border-color:var(--accent)}
.wiz-art{display:block;height:44px;margin-bottom:6px;border-radius:8px;background:var(--well);overflow:hidden}
.wiz-card:not([disabled]) .wiz-art:not(.is-painted){background:linear-gradient(90deg,var(--well) 30%,var(--panel-2) 50%,var(--well) 70%);background-size:220% 100%;animation:wiz-scan 1.4s linear infinite}
.wiz-name{font-size:16px;font-weight:700}
.wiz-artist{font-size:13px;color:var(--ink-2)}
.wiz-row{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:auto;padding-top:8px}
.wiz-meta{font-size:11px;color:var(--ink-3)}
.wiz-tag{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4);white-space:nowrap}
.wiz-tag.is-ready{display:inline-flex;align-items:center;gap:6px;color:var(--accent-ink)}
.wiz-tag.is-ready::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;animation:wiz-pulse 1.6s ease-in-out infinite}

.wiz-go-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:18px}
.wiz-mix{min-height:52px;padding:0 32px;font-size:17px;animation:wiz-breathe 2.2s ease-in-out infinite}
.wiz-match{margin:0;font-size:12px;color:var(--ink-2)}

.wiz-run{min-height:236px}
.wiz-log{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;font-size:13px;line-height:1.55}
.wiz-line{display:grid;grid-template-columns:16px minmax(0,1fr);column-gap:8px;animation:wiz-in .4s var(--ease) both}
.wiz-dot{width:8px;height:8px;margin:6px 0 0 2px;border-radius:50%;background:var(--accent-ink)}
.wiz-line-t{color:var(--ink);font-weight:500}
.wiz-out{grid-column:2;display:flex;gap:8px;color:var(--ink-2)}
.wiz-elbow{flex:0 0 auto;width:10px;height:10px;margin-top:2px;border-left:1.5px solid var(--ink-4);border-bottom:1.5px solid var(--ink-4)}
.wiz-line.is-final{grid-template-columns:16px minmax(0,1fr);align-items:center}
.wiz-line.is-final .wiz-line-t{color:var(--accent-ink)}
.wiz-line.is-final svg{color:var(--accent-ink)}
.wiz-status{display:flex;align-items:center;gap:10px;margin:18px 0 0;font-size:14px}
.wiz-spin{display:inline-flex;color:var(--accent-ink);animation:wiz-spin 1.1s ease-in-out infinite}
.wiz-verb{background:linear-gradient(90deg,var(--ink-2) 0 38%,#FFF8EA 50%,var(--ink-2) 62% 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:wiz-shimmer 1.8s linear infinite}
.wiz-time{color:var(--ink-4)}

.wiz-enter{animation:wiz-in .5s var(--ease) both}
.wiz-enter .wiz-card{animation:wiz-in .5s var(--ease) both;animation-delay:calc(var(--i,0) * 70ms + 80ms)}
.wiz-leave{animation:wiz-out .22s ease both}
.wiz-ghost{position:fixed;margin:0;z-index:50;pointer-events:none;transform-origin:0 0;box-shadow:0 18px 40px rgba(0,0,0,.5)}
@keyframes wiz-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes wiz-out{to{opacity:0;transform:translateY(-8px)}}
@keyframes wiz-land{0%{box-shadow:0 0 0 0 rgba(240,68,30,.5)}100%{box-shadow:0 0 0 16px rgba(240,68,30,0)}}
@keyframes wiz-pulse{50%{opacity:.35}}
@keyframes wiz-breathe{0%,100%{box-shadow:0 0 0 0 rgba(240,68,30,.45)}50%{box-shadow:0 0 0 12px rgba(240,68,30,0)}}
@keyframes wiz-spin{0%{transform:rotate(0) scale(.7)}50%{transform:rotate(90deg) scale(1.08)}100%{transform:rotate(180deg) scale(.7)}}
@keyframes wiz-shimmer{from{background-position:100% 0}to{background-position:-150% 0}}
@keyframes wiz-scan{from{background-position:120% 0}to{background-position:-120% 0}}
@keyframes wiz-nudge{50%{transform:translateX(4px)}}

@media (max-width:801px){
  .wiz-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:540px){
  .wiz-decks{grid-template-columns:minmax(0,1fr)}
  .wiz-join{justify-self:center;transform:rotate(90deg)}
  .wiz[data-stage="run"] .wiz-join{animation:none}
  .wiz-cards{grid-template-columns:minmax(0,1fr)}
  .wiz-card[disabled] .wiz-art{display:none}
  .wiz-title{font-size:21px}
}