/* ============================================================
   BB Art Blend
   Two skins over one engine.
   .mode-toy — warm paper, chunky, tactile. The default.
   .mode-lab — the instrument it actually is. Unlocked in settings.
   ============================================================ */

:root{
  /* paper / toy */
  --paper:    #f4efe4;
  --sand:     #e9e1d2;
  --sand-2:   #dcd1bd;
  --ink:      #2a2320;
  --ink-2:    #5c5147;
  --ink-3:    #8d8173;
  --edge:     #cabda5;
  --flame:    #ff4d3d;
  --amber:    #ffb02e;

  /* lab */
  --lab:      #100e0c;
  --lab-2:    #17140f;
  --lab-3:    #1f1a15;
  --lab-4:    #2a231c;
  --line:     #342b22;
  --line-hi:  #4a3c2e;
  --cream:    #f4ece0;
  --cream-2:  #b8ab9b;
  --cream-3:  #7c7064;
  --lab-flame:#ff5b2e;
  --lab-amber:#f2b53c;
  --teal:     #46b9a4;

  --toy: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --mono: "Azeret Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --serif: "Instrument Serif", "Hoefler Text", Georgia, serif;

  --r: 3px;
  --ease: cubic-bezier(.2,.7,.2,1);
  --bounce: cubic-bezier(.34,1.56,.64,1);
  --dur: .34s;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; overflow:hidden;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
body.mode-toy{
  font-family:var(--toy); color:var(--ink); font-size:14px;
  background:
    radial-gradient(120% 100% at 50% -20%, #f2ebdc 0%, transparent 62%),
    radial-gradient(90% 70% at 85% 110%, #e3d8c2 0%, transparent 60%),
    var(--sand);
}
body.mode-lab{
  font-family:var(--mono); color:var(--cream); font-weight:300; font-size:13px; letter-spacing:.01em;
  background:
    radial-gradient(120% 90% at 50% -10%, #1b1610 0%, transparent 60%),
    radial-gradient(80% 60% at 100% 100%, #191309 0%, transparent 55%),
    var(--lab);
}

.grain{
  position:fixed; inset:-50%; z-index:9000; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainshift 7s steps(6) infinite; mix-blend-mode:multiply;
}
.mode-lab .grain{ mix-blend-mode:overlay; opacity:.05; }
@keyframes grainshift{
  0%{transform:translate(0,0)} 16%{transform:translate(-3%,2%)} 33%{transform:translate(2%,-3%)}
  50%{transform:translate(-2%,-2%)} 66%{transform:translate(3%,1%)} 83%{transform:translate(-1%,3%)} 100%{transform:translate(0,0)}
}

/* ---- the shared plate ------------------------------------------------ */
.plate{
  position:relative; aspect-ratio:1/1;
  width:min(100%, calc(100vh - 250px)); height:auto; max-height:100%;
  background:var(--paper); touch-action:none;
}
#gl{ display:block; width:100%; height:100%; cursor:none; border-radius:inherit; }
.plate-edge,.plate-scan{ display:none; }

.mode-toy .plate{
  border-radius:20px;
  box-shadow:
     0 0 0 1px rgba(90,72,44,.13),
     0 2px 0 0 rgba(255,255,255,.7) inset,
     0 30px 60px -26px rgba(70,54,30,.55),
     0 8px 20px -12px rgba(70,54,30,.4);
  animation:plateIn 1s var(--ease) both;
}
@keyframes plateIn{ from{ opacity:0; transform:translateY(14px) scale(.985) } to{ opacity:1; transform:none } }

.mode-lab .plate{
  border-radius:0;
  box-shadow:0 0 0 1px var(--line), 0 42px 90px -30px rgba(0,0,0,.95), 0 0 120px -40px rgba(255,91,46,.22);
}
.mode-lab .plate-edge,.mode-lab .plate-scan{ display:block; }
.plate-edge{ position:absolute; inset:0; pointer-events:none; }
.tick{ position:absolute; width:13px; height:13px; border:1px solid var(--lab-flame); opacity:.55; }
.tick.tl{ top:-1px; left:-1px; border-right:0; border-bottom:0; }
.tick.tr{ top:-1px; right:-1px; border-left:0; border-bottom:0; }
.tick.bl{ bottom:-1px; left:-1px; border-right:0; border-top:0; }
.tick.br{ bottom:-1px; right:-1px; border-left:0; border-top:0; }
.plate-scan{
  position:absolute; inset:0; pointer-events:none; opacity:.12; mix-blend-mode:soft-light;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,.5) 0 1px, transparent 1px 3px);
}

/* =====================================================================
   TOY
   ===================================================================== */
.toy{
  position:relative; z-index:1;
  height:100vh; height:100dvh;
  display:grid; grid-template-rows:auto minmax(0,1fr) auto auto;
  padding:18px 22px 14px;
}
.mode-lab .toy{ display:none; }

.toy-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding-bottom:12px; }
.toy-mark{ font-family:var(--serif); font-size:29px; line-height:1; letter-spacing:-.01em; }
.toy-mark span{ color:var(--flame); }
.toy-mark em{ font-style:italic; }
.toy-acts{ display:flex; gap:7px; }

.pill{
  display:inline-flex; align-items:center; gap:7px;
  font:inherit; font-size:12.5px; font-weight:500;
  padding:8px 14px; border-radius:999px; cursor:pointer;
  color:var(--ink-2); background:rgba(255,255,255,.62); border:1px solid rgba(90,72,44,.14);
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset, 0 2px 5px -2px rgba(70,54,30,.28);
  transition:transform .16s var(--bounce), background .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease);
}
.pill svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.pill:hover{ background:#fff; color:var(--ink); transform:translateY(-1.5px); box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 6px 14px -6px rgba(70,54,30,.45); }
.pill:active{ transform:translateY(0) scale(.97); }
.pill.icon{ padding:8px; }
.pill.icon svg{ width:17px; height:17px; }
.pill[aria-expanded="true"]{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

.toy-stage{ display:flex; align-items:center; justify-content:center; min-height:0; padding:2px 0 10px; }
.mode-toy .plate{ width:min(100%, calc(100vh - 250px)); }

/* ---- the bar --------------------------------------------------------- */
.toy-bar{
  display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap;
  margin:0 auto; padding:9px 14px; border-radius:999px;
  background:rgba(255,255,255,.66);
  backdrop-filter:blur(16px) saturate(1.35); -webkit-backdrop-filter:blur(16px) saturate(1.35);
  border:1px solid rgba(90,72,44,.13);
  box-shadow:0 1px 0 rgba(255,255,255,.85) inset, 0 12px 30px -16px rgba(70,54,30,.55);
  animation:barIn .8s .2s var(--bounce) both;
}
@keyframes barIn{ from{ opacity:0; transform:translateY(16px) } to{ opacity:1; transform:none } }
.bar-sep{ width:1px; height:26px; background:rgba(90,72,44,.16); }
.grp-tools,.grp-colors,.grp-sizes{ display:flex; align-items:center; gap:6px; }

.tool-btn{
  position:relative; width:42px; height:42px; display:grid; place-items:center;
  border-radius:14px; border:1px solid transparent; background:transparent; cursor:pointer; color:var(--ink-2);
  transition:transform .18s var(--bounce), background .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease);
}
.tool-btn svg{ width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.tool-btn:hover{ background:rgba(255,255,255,.9); transform:translateY(-2px); color:var(--ink); }
.tool-btn[aria-pressed="true"]{
  background:var(--ink); color:var(--paper); transform:translateY(-2px);
  box-shadow:0 8px 16px -8px rgba(42,35,32,.8);
}
.tool-btn[data-hint]::after{
  content:""; position:absolute; inset:-6px; border-radius:19px;
  border:2px solid var(--flame); opacity:0; pointer-events:none;
  animation:hintRing 2s var(--ease) infinite;
}
@keyframes hintRing{
  0%{ transform:scale(.82); opacity:0 }
  30%{ opacity:.9 }
  100%{ transform:scale(1.3); opacity:0 }
}
.toy-foot.nudge{ color:var(--ink); opacity:1; }
.toy-foot.nudge::before{
  content:""; display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--flame); margin-right:9px; vertical-align:middle;
  animation:bob 1.6s infinite var(--ease);
}
.tool-btn .tip{
  position:absolute; bottom:calc(100% + 9px); left:50%; transform:translate(-50%,4px);
  white-space:nowrap; font-size:11px; font-weight:500; padding:5px 9px; border-radius:8px;
  background:var(--ink); color:var(--paper); opacity:0; pointer-events:none;
  transition:opacity .18s var(--ease), transform .18s var(--ease);
}
.tool-btn:hover .tip{ opacity:1; transform:translate(-50%,0); }

.dot{
  width:27px; height:27px; border-radius:50%; border:2px solid rgba(255,255,255,.75); cursor:pointer; padding:0;
  box-shadow:0 2px 5px -2px rgba(70,54,30,.55);
  transition:transform .18s var(--bounce), box-shadow .18s var(--ease);
}
.dot:hover{ transform:scale(1.18) translateY(-2px); }
.dot.rainbow{
  background:conic-gradient(from 0deg,#ff4d3d,#ff7a1f,#ffb02e,#ffd94a,#9bde3f,#2ec4a6,#35b8e0,#3d6fe8,#8a5cf5,#ff5fa2,#ff4d3d);
  position:relative;
}
.dot.rainbow[aria-pressed="true"]{ animation:spin 5.5s linear infinite; }
@keyframes spin{ to{ transform:scale(1.24) translateY(-2px) rotate(360deg) } }
.dot .tip{
  position:absolute; bottom:calc(100% + 11px); left:50%; transform:translate(-50%,4px);
  white-space:nowrap; font-size:11px; font-weight:500; padding:5px 9px; border-radius:8px;
  background:var(--ink); color:var(--paper); opacity:0; pointer-events:none;
  transition:opacity .18s var(--ease), transform .18s var(--ease);
}
.dot:hover .tip{ opacity:1; transform:translate(-50%,0); }
.dot[aria-pressed="true"]{
  transform:scale(1.24) translateY(-2px);
  box-shadow:0 0 0 2px var(--ink), 0 5px 12px -4px rgba(70,54,30,.7);
}

.size-btn{
  width:36px; height:36px; border-radius:12px; border:1px solid transparent; background:transparent;
  cursor:pointer; display:grid; place-items:center;
  transition:background .18s var(--ease), transform .18s var(--bounce);
}
.size-btn i{ display:block; border-radius:50%; background:var(--ink-2); transition:background .18s var(--ease); }
.size-btn:hover{ background:rgba(255,255,255,.9); transform:translateY(-2px); }
.size-btn[aria-pressed="true"]{ background:var(--ink); }
.size-btn[aria-pressed="true"] i{ background:var(--paper); }

.toy-foot{
  margin:9px 0 0; text-align:center; font-size:11.5px; color:var(--ink-3); letter-spacing:.02em;
  transition:opacity .6s var(--ease);
}
.toy-foot.dim{ opacity:.35; }

/* ---- popover --------------------------------------------------------- */
.pop{
  position:fixed; top:66px; right:22px; z-index:6000; width:262px; padding:8px;
  background:rgba(255,255,255,.94); backdrop-filter:blur(16px);
  border:1px solid rgba(90,72,44,.15); border-radius:16px;
  box-shadow:0 24px 50px -22px rgba(70,54,30,.62);
  animation:popIn .22s var(--bounce) both;
}
.pop[hidden]{ display:none; }
@keyframes popIn{ from{ opacity:0; transform:translateY(-8px) scale(.97) } to{ opacity:1; transform:none } }
.pop-item{
  display:block; width:100%; text-align:left; font:inherit; cursor:pointer;
  background:transparent; border:0; border-radius:11px; padding:9px 11px;
  transition:background .16s var(--ease);
}
.pop-item:hover{ background:var(--sand); }
.pop-item b{ display:block; font-size:13.5px; font-weight:600; color:var(--ink); }
.pop-item i{ display:block; font-style:normal; font-size:11.5px; color:var(--ink-3); margin-top:1px; }
.pop hr{ border:0; border-top:1px solid rgba(90,72,44,.14); margin:7px 6px; }
.pop-sw{ display:flex; align-items:center; gap:10px; padding:7px 11px; cursor:pointer; font-size:13.5px; font-weight:600; }
.pop-sw input{ position:absolute; opacity:0; pointer-events:none; }
.pop-sw span{
  width:34px; height:19px; border-radius:99px; background:var(--sand-2); position:relative; flex:0 0 auto;
  transition:background .2s var(--ease);
}
.pop-sw span::after{
  content:""; position:absolute; top:2px; left:2px; width:15px; height:15px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .22s var(--bounce);
}
.pop-sw input:checked + span{ background:var(--flame); }
.pop-sw input:checked + span::after{ transform:translateX(15px); }
.pop-note{ margin:2px 11px 6px; font-size:11px; color:var(--ink-3); line-height:1.5; }

/* ---- opening / camera / reveal --------------------------------------- */
.opening,.cam{
  position:fixed; inset:0; z-index:7000; display:grid; place-items:center; padding:24px;
  background:rgba(233,225,210,.72); backdrop-filter:blur(9px) saturate(1.2);
  animation:fade .35s var(--ease) both;
}
/* The whole point of this card is that you can see what is behind it, so it
   sits below the plate instead of on top of it and brings no scrim at all. */
.reveal{
  position:fixed; left:0; right:0; bottom:0; z-index:7000;
  display:flex; justify-content:center; pointer-events:none;
  padding:0 20px 104px;      /* clear the tool bar rather than hide it */
}
.reveal .reveal-card{ pointer-events:auto; animation:revealIn .6s .1s var(--bounce) both;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 30px 70px -24px rgba(70,54,30,.75); }
/* the bar keeps its own keyframe, which ends on opacity:1 and outranks any
   plain rule here — so the card moves out of the way instead */
body.reveal-up .toy-foot{ opacity:0; }
@keyframes revealIn{ from{ opacity:0; transform:translateY(40px) scale(.96) } to{ opacity:1; transform:none } }
.opening[hidden],.cam[hidden],.reveal[hidden]{ display:none; }
@keyframes fade{ from{opacity:0} to{opacity:1} }
.opening.out{ animation:fadeOut .4s var(--ease) both; pointer-events:none; }
@keyframes fadeOut{ to{ opacity:0; transform:scale(1.02) } }

.opening-card,.cam-card,.reveal-card{
  position:relative; max-width:460px; width:100%; text-align:center;
  background:var(--paper); border-radius:26px; padding:38px 34px 26px;
  border:1px solid rgba(90,72,44,.13);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 40px 80px -34px rgba(70,54,30,.7);
  animation:cardIn .5s var(--bounce) both;
}
@keyframes cardIn{ from{ opacity:0; transform:translateY(18px) scale(.96) } to{ opacity:1; transform:none } }
.opening-blobs{ display:flex; justify-content:center; gap:9px; margin-bottom:20px; }
.opening-blobs i{ width:17px; height:17px; border-radius:50%; animation:bob 2.6s infinite var(--ease); }
.opening-blobs i:nth-child(1){ background:#ff4d3d; }
.opening-blobs i:nth-child(2){ background:#ffb02e; animation-delay:.18s; }
.opening-blobs i:nth-child(3){ background:#35b8e0; animation-delay:.36s; }
.opening-blobs i:nth-child(4){ background:#8a5cf5; animation-delay:.54s; }
@keyframes bob{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-7px) } }

.opening-card h1,.reveal-card h2{
  margin:0 0 10px; font-family:var(--serif); font-weight:400; letter-spacing:-.015em; color:var(--ink);
}
.opening-card h1{ font-size:42px; line-height:1; }
.reveal-card h2{ font-size:34px; line-height:1; }
.opening-card p,.reveal-card p{ margin:0 0 22px; font-size:14px; line-height:1.6; color:var(--ink-2); }
.reveal-card{ max-width:540px; padding:22px 28px 20px; }
.reveal-card p{ margin-bottom:14px; font-size:13px; }
.reveal-ask{ font-family:var(--serif); font-size:26px !important; color:var(--ink) !important;
  font-style:italic; margin-bottom:18px !important; }
.reveal-kicker{ font-size:11px !important; letter-spacing:.28em; text-transform:uppercase; color:var(--ink-3) !important; margin:0 0 6px !important; }
.opening-fine{ margin:16px 0 0 !important; font-size:11px !important; color:var(--ink-3) !important; }
.opening-btns,.reveal-btns,.cam-btns{ display:flex; flex-direction:column; gap:8px; }
.opening-picks{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.pick{
  font:inherit; cursor:pointer; text-align:center; padding:18px 12px 15px; border-radius:18px;
  background:#fff; color:var(--ink); border:1px solid rgba(90,72,44,.16);
  box-shadow:0 2px 6px -3px rgba(70,54,30,.4);
  transition:transform .18s var(--bounce), box-shadow .18s var(--ease), background .18s var(--ease);
}
.pick svg{ width:30px; height:30px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; margin-bottom:9px; }
.pick b{ display:block; font-size:14.5px; font-weight:600; }
.pick i{ display:block; font-style:normal; font-size:11px; color:var(--ink-3); margin-top:3px; line-height:1.35; }
.pick:hover{ transform:translateY(-3px); box-shadow:0 14px 26px -12px rgba(70,54,30,.6); }
.pick:active{ transform:translateY(-1px) scale(.985); }
.pick.primary{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.pick.primary i{ color:rgba(244,239,228,.6); }
.pick.primary:hover{ background:#3a3029; }
.opening-skip{
  display:block; margin:16px auto 0; font:inherit; font-size:12.5px; font-weight:500;
  background:transparent; border:0; color:var(--ink-3); cursor:pointer;
  border-bottom:1px solid rgba(90,72,44,.28); padding:2px 1px;
  transition:color .18s var(--ease), border-color .18s var(--ease);
}
.opening-skip:hover{ color:var(--ink); border-color:var(--ink); }
.reveal-btns,.cam-btns{ flex-direction:row; justify-content:center; }

.big{
  font:inherit; font-size:14.5px; font-weight:600; padding:13px 20px; border-radius:14px; cursor:pointer;
  background:#fff; color:var(--ink); border:1px solid rgba(90,72,44,.16);
  box-shadow:0 2px 6px -3px rgba(70,54,30,.4);
  transition:transform .16s var(--bounce), background .18s var(--ease), box-shadow .18s var(--ease);
}
.big:hover{ transform:translateY(-2px); box-shadow:0 10px 20px -10px rgba(70,54,30,.55); }
.big:active{ transform:translateY(0) scale(.98); }
.big.primary{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.big.primary:hover{ background:#3a3029; }

#cam-video{
  width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:18px; background:var(--sand-2);
  transform:scaleX(-1); margin-bottom:16px; display:block;
}

/* ---- cursor ---------------------------------------------------------- */
.cursor{
  position:fixed; top:0; left:0; z-index:8000; pointer-events:none;
  transform:translate(-50%,-50%); opacity:0; transition:opacity .18s var(--ease);
  mix-blend-mode:difference;
}
.cursor.on{ opacity:1; }
.cursor span{
  display:block; border:1.5px solid rgba(255,255,255,.9); border-radius:50%;
  width:40px; height:40px; transform:translate(-50%,-50%); position:absolute; top:0; left:0;
}
.cursor::after{
  content:""; position:absolute; width:3px; height:3px; border-radius:50%;
  background:rgba(255,255,255,.95); transform:translate(-50%,-50%);
}

/* =====================================================================
   LAB
   ===================================================================== */
.app{
  position:relative; z-index:1;
  height:100vh; height:100dvh;
  display:grid;
  grid-template-columns:70px minmax(0,1fr) 332px;
  grid-template-rows:auto minmax(0,1fr) 30px;
  grid-template-areas:"mast mast panel" "rail stage panel" "tele tele tele";
}
.app[hidden]{ display:none; }
.adv-slot{ display:contents; }

.masthead{
  grid-area:mast; display:flex; align-items:flex-end; gap:30px;
  padding:20px 26px 14px; border-bottom:1px solid var(--line);
  animation:rise .7s var(--ease) both;
}
.mark{ position:relative; flex:0 0 auto; line-height:.86; padding-right:4px; }
.mark-bb{ font-family:var(--serif); font-size:46px; letter-spacing:-.02em; color:var(--lab-flame); display:inline-block; text-shadow:0 0 34px rgba(255,91,46,.35); }
.mark-rest{ font-family:var(--serif); font-style:italic; font-size:46px; letter-spacing:-.01em; color:var(--cream); display:inline-block; margin-left:6px; }
.mark-rule{ display:block; height:1px; margin-top:9px; background:linear-gradient(90deg,var(--lab-flame),var(--lab-amber) 40%,transparent); }
.tagline{ margin:0 0 3px; max-width:56ch; font-size:11.5px; line-height:1.6; color:var(--cream-2); }
.mast-actions{ margin-left:auto; display:flex; gap:8px; align-self:flex-end; padding-bottom:2px; }

.ghost-btn{
  font:inherit; font-size:10.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--cream-2); background:transparent; border:1px solid var(--line);
  padding:7px 12px; border-radius:var(--r); cursor:pointer;
  transition:color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.ghost-btn:hover{ color:var(--lab); background:var(--lab-amber); border-color:var(--lab-amber); }
.only-narrow{ display:none; }

.rail{
  grid-area:rail; border-right:1px solid var(--line);
  display:flex; flex-direction:column; align-items:center; gap:4px; padding:16px 0;
  animation:rise .7s .06s var(--ease) both;
}
.tool{
  position:relative; width:44px; height:44px; display:grid; place-items:center;
  border:1px solid transparent; border-radius:var(--r); background:transparent; color:var(--cream-3); cursor:pointer;
  transition:color .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.tool svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.35; stroke-linecap:round; stroke-linejoin:round; }
.tool:hover{ color:var(--cream); background:var(--lab-2); }
.tool[aria-pressed="true"]{ color:var(--lab); background:var(--lab-flame); border-color:var(--lab-flame); box-shadow:0 0 24px -4px rgba(255,91,46,.6); }
.tool[aria-pressed="true"]::after{ content:""; position:absolute; left:-14px; top:50%; transform:translateY(-50%); width:5px; height:5px; border-radius:50%; background:var(--lab-flame); }
.tool .tip{
  position:absolute; left:calc(100% + 12px); top:50%; transform:translate(-6px,-50%);
  white-space:nowrap; font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  background:var(--lab-3); color:var(--cream); border:1px solid var(--line-hi);
  padding:5px 9px; border-radius:var(--r); opacity:0; pointer-events:none;
  transition:opacity .2s var(--ease), transform .2s var(--ease); z-index:60;
}
.tool .tip b{ color:var(--cream-3); font-weight:400; margin-left:7px; }
.tool:hover .tip{ opacity:1; transform:translate(0,-50%); }
.rail-sep{ width:22px; height:1px; background:var(--line); margin:9px 0; }

.stage{
  grid-area:stage; position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:22px 26px 74px; min-height:0;
}
.mode-lab .plate{ width:min(100%, calc(100vh - 250px)); }
.plate-caption{
  display:flex; justify-content:space-between; width:min(100%, calc(100vh - 250px)); max-width:100%;
  margin-top:10px; font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--cream-3);
}
.cap-r{ color:var(--lab-amber); }

.dock{
  position:absolute; left:50%; bottom:14px; transform:translateX(-50%);
  display:flex; align-items:center; gap:16px; padding:9px 14px; z-index:40;
  background:rgba(23,20,15,.86);
  backdrop-filter:blur(14px) saturate(1.3); -webkit-backdrop-filter:blur(14px) saturate(1.3);
  border:1px solid var(--line); border-radius:var(--r);
  box-shadow:0 20px 50px -20px rgba(0,0,0,.9);
  animation:riseX .7s .22s var(--ease) both;
}
@keyframes riseX{ from{ opacity:0; transform:translate(-50%,10px) } to{ opacity:1; transform:translate(-50%,0) } }
.swatch{
  width:30px; height:30px; border-radius:var(--r); border:1px solid var(--line-hi);
  cursor:pointer; padding:0; background:#fff; position:relative; flex:0 0 auto;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.swatch:hover{ transform:translateY(-1px); }
.dock-picker{
  position:absolute; bottom:calc(100% + 10px); left:6px; padding:10px;
  background:var(--lab-2); border:1px solid var(--line-hi); border-radius:var(--r);
  box-shadow:0 24px 60px -24px #000; display:none; z-index:50;
}
.dock-picker.open{ display:block; }
#sv,#hue{ display:block; border-radius:2px; cursor:crosshair; }
#hue{ margin-top:7px; }
.picker-palette{ display:grid; grid-template-columns:repeat(10,1fr); gap:3px; margin-top:9px; width:150px; }
.picker-palette button{ aspect-ratio:1/1; border:0; border-radius:1px; cursor:pointer; padding:0; transition:transform .15s var(--ease); }
.picker-palette button:hover{ transform:scale(1.28); }
.dock-slider{ display:flex; align-items:center; gap:8px; }
.dock-slider>span{ font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--cream-3); }
.dock-slider output{ font-size:10px; color:var(--cream-2); width:24px; text-align:right; font-variant-numeric:tabular-nums; }
.dock-tool{ font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--lab-flame); border-left:1px solid var(--line); padding-left:14px; min-width:74px; }

input[type=range]{ -webkit-appearance:none; appearance:none; background:transparent; height:16px; cursor:pointer; }
.dock-slider input[type=range]{ width:82px; }
input[type=range]::-webkit-slider-runnable-track{ height:1px; background:var(--line-hi); }
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:11px; height:11px; margin-top:-5px; border-radius:50%;
  background:var(--cream); border:0; box-shadow:0 0 0 3px rgba(244,236,224,.09);
  transition:background .2s var(--ease), transform .12s var(--ease);
}
input[type=range]:hover::-webkit-slider-thumb{ background:var(--lab-amber); }
input[type=range]:active::-webkit-slider-thumb{ background:var(--lab-flame); transform:scale(1.2); }
input[type=range]::-moz-range-track{ height:1px; background:var(--line-hi); }
input[type=range]::-moz-range-thumb{ width:11px; height:11px; border:0; border-radius:50%; background:var(--cream); }

.panel{
  grid-area:panel; border-left:1px solid var(--line);
  background:linear-gradient(180deg, rgba(23,20,15,.5), rgba(16,14,12,.5));
  min-height:0; animation:rise .7s .12s var(--ease) both;
}
.panel-scroll{ height:100%; overflow-y:auto; overscroll-behavior:contain; padding:4px 0 30px; }
.panel-scroll::-webkit-scrollbar{ width:8px; }
.panel-scroll::-webkit-scrollbar-thumb{ background:var(--lab-4); border-radius:99px; border:2px solid transparent; background-clip:padding-box; }
.grp{ padding:18px 20px; border-bottom:1px solid var(--line); }
.grp h2{ margin:0 0 14px; font-size:10px; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--cream); display:flex; align-items:baseline; gap:9px; }
.grp-note{ font-size:9px; letter-spacing:.1em; color:var(--cream-3); text-transform:none; font-weight:300; }
.ctl{ margin-bottom:13px; display:grid; grid-template-columns:1fr 34px; align-items:center; gap:2px 8px; }
.ctl label{ grid-column:1/-1; font-size:10.5px; color:var(--cream-2); display:flex; align-items:baseline; gap:8px; }
.ctl label em{ font-style:normal; font-size:9px; color:var(--cream-3); letter-spacing:0; }
.ctl input[type=range]{ width:100%; }
.ctl output{ font-size:10px; color:var(--lab-amber); text-align:right; font-variant-numeric:tabular-nums; }
.toggle{ display:flex; align-items:center; gap:9px; font-size:10.5px; color:var(--cream-2); cursor:pointer; margin-top:4px; }
.toggle input{ position:absolute; opacity:0; pointer-events:none; }
.toggle span{ width:26px; height:14px; border-radius:99px; background:var(--lab-4); border:1px solid var(--line-hi); position:relative; transition:background .2s var(--ease), border-color .2s var(--ease); }
.toggle span::after{ content:""; position:absolute; top:1px; left:1px; width:10px; height:10px; border-radius:50%; background:var(--cream-3); transition:transform .2s var(--ease), background .2s var(--ease); }
.toggle input:checked + span{ background:rgba(255,91,46,.25); border-color:var(--lab-flame); }
.toggle input:checked + span::after{ transform:translateX(12px); background:var(--lab-flame); }
.target-row{ display:flex; gap:14px; margin-bottom:13px; }
.thumb{ width:82px; height:82px; flex:0 0 auto; border:1px solid var(--line-hi); background:#0a0806; }
.thumb canvas{ width:100%; height:100%; display:block; }
.target-meta{ flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; gap:6px; }
.kv{ display:flex; justify-content:space-between; gap:8px; font-size:10px; }
.kv span{ color:var(--cream-3); letter-spacing:.1em; text-transform:uppercase; font-size:9px; }
.kv b{ font-weight:400; color:var(--cream); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chips{ display:flex; flex-wrap:wrap; gap:5px; margin-bottom:11px; }
.chip{ font:inherit; font-size:10px; padding:5px 10px; border-radius:99px; cursor:pointer; background:transparent; color:var(--cream-2); border:1px solid var(--line); transition:all .2s var(--ease); }
.chip:hover{ border-color:var(--line-hi); color:var(--cream); }
.chip[aria-pressed="true"]{ background:var(--cream); color:var(--lab); border-color:var(--cream); }
.btn-row{ display:flex; gap:6px; }
.btn-row.wrap{ flex-wrap:wrap; }
.btn{
  flex:1 1 auto; font:inherit; font-size:10px; letter-spacing:.06em; padding:8px 10px; border-radius:var(--r);
  cursor:pointer; white-space:nowrap; background:var(--lab-3); color:var(--cream-2); border:1px solid var(--line);
  transition:all .18s var(--ease);
}
.btn:hover{ background:var(--lab-4); color:var(--cream); border-color:var(--line-hi); transform:translateY(-1px); }
.btn.rec[data-on="1"]{ background:var(--lab-flame); color:var(--lab); border-color:var(--lab-flame); animation:blink 1.1s infinite; }
@keyframes blink{ 50%{ opacity:.62 } }

.telemetry{
  grid-area:tele; border-top:1px solid var(--line); display:flex; align-items:center; gap:26px; padding:0 26px;
  font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--cream-3);
  background:rgba(10,8,6,.6); animation:rise .7s .18s var(--ease) both; overflow:hidden;
}
.telemetry .t{ display:flex; align-items:center; gap:8px; white-space:nowrap; }
.telemetry .t.push{ margin-left:auto; }
.telemetry b{ font-weight:400; color:var(--cream); font-variant-numeric:tabular-nums; letter-spacing:.04em; }
.telemetry .wide{ min-width:190px; }
.meter{ display:block; width:92px; height:3px; background:var(--lab-4); position:relative; overflow:hidden; }
.meter span{ position:absolute; inset:0 auto 0 0; width:0%; background:linear-gradient(90deg,var(--lab-flame),var(--lab-amber)); transition:width .3s var(--ease); }

.modal{ position:fixed; inset:0; z-index:9500; display:grid; place-items:center; padding:24px; background:rgba(8,6,5,.82); backdrop-filter:blur(6px); animation:fade .3s var(--ease) both; }
.modal[hidden]{ display:none; }
.modal-card{
  position:relative; max-width:660px; max-height:84vh; overflow-y:auto;
  background:var(--lab-2); border:1px solid var(--line-hi); border-radius:var(--r);
  padding:34px 38px 30px; box-shadow:0 40px 100px -30px #000; font-family:var(--mono);
}
.modal-card h3{ margin:0 0 16px; font-family:var(--serif); font-size:30px; font-weight:400; color:var(--cream); }
.modal-card p{ font-size:11.5px; line-height:1.75; color:var(--cream-2); margin:0 0 14px; }
.modal-card ol{ margin:0 0 16px; padding-left:18px; }
.modal-card li{ font-size:11.5px; line-height:1.75; color:var(--cream-2); margin-bottom:11px; }
.modal-card b{ color:var(--cream); font-weight:500; }
.modal-card em{ color:var(--lab-amber); font-style:normal; }
.modal-foot{ border-top:1px solid var(--line); padding-top:14px; color:var(--cream-3) !important; }
.modal-x{
  position:absolute; top:12px; right:14px; width:28px; height:28px; font-size:19px; line-height:1;
  background:transparent; border:1px solid var(--line); color:var(--cream-3); border-radius:var(--r); cursor:pointer;
  transition:all .2s var(--ease);
}
.modal-x:hover{ color:var(--lab); background:var(--lab-flame); border-color:var(--lab-flame); }

@keyframes rise{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }
.drop-on .plate{ outline:3px dashed var(--flame); outline-offset:6px; }

/* ---- responsive ------------------------------------------------------ */
@media (max-width:1180px){
  .app{ grid-template-columns:70px minmax(0,1fr); grid-template-areas:"mast mast" "rail stage" "tele tele"; }
  .only-narrow{ display:inline-block; }
  .panel{
    position:fixed; top:0; right:0; bottom:0; width:min(332px,92vw); z-index:7000;
    background:var(--lab); transform:translateX(100%); transition:transform var(--dur) var(--ease);
    box-shadow:-30px 0 70px -30px #000; animation:none;
  }
  .panel.open{ transform:none; }
  .tagline{ display:none; }
}
@media (max-width:760px){
  .app{ grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr) 56px 30px;
        grid-template-areas:"mast" "stage" "rail" "tele"; }
  .rail{ flex-direction:row; border-right:0; border-top:1px solid var(--line); padding:6px; justify-content:center; overflow-x:auto; }
  .stage{ padding:12px; gap:10px; justify-content:center; }
  .dock{ position:static; transform:none; animation:rise .7s .22s var(--ease) both; width:100%; justify-content:center; flex-wrap:wrap; }
  .tool .tip{ display:none; }
  .mark-bb,.mark-rest{ font-size:32px; }
  .dock-slider:nth-of-type(3){ display:none; }
  .dock-tool{ display:none; }
  .telemetry{ gap:14px; padding:0 12px; }
  .telemetry .wide,.telemetry .t.push{ display:none; }

  .toy{ padding:12px 12px 10px; }
  .toy-mark{ font-size:23px; }
  .pill span{ display:none; }
  .pill{ padding:9px; }
  .toy-bar{ gap:8px; padding:8px 10px; border-radius:22px; }
  .bar-sep{ display:none; }
  .grp-sizes{ order:3; }
  .grp-colors{ order:2; flex-wrap:wrap; justify-content:center; max-width:100%; }
  .dot{ width:24px; height:24px; }
  .tool-btn{ width:38px; height:38px; }
  .opening-card h1{ font-size:32px; }
  .opening-picks{ grid-template-columns:1fr; }
  .pick{ padding:14px 12px 12px; }
  .pick svg{ width:24px; height:24px; margin-bottom:6px; }
  .reveal-card h2{ font-size:34px; }
  .reveal-btns{ flex-direction:column; }
  .cam-btns{ flex-direction:column; }
  .reveal{ padding-bottom:118px; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  .grain{ display:none; }
}