/* ═══════════════ NOVA BREW — synthesis deck styling ═══════════════ */

:root{
  --void:#03060c; --deep:#060c16; --steel:#0b1524;
  --panel:rgba(9,20,34,.64); --panel-2:rgba(12,26,44,.78);
  --line:rgba(94,178,214,.20); --line-2:rgba(94,178,214,.38);
  --cyan:#4ff0ff; --cyan-d:#1c8fa8; --amber:#ffb257; --mag:#ff4d9d;
  --ok:#5cffb1; --warn:#ffb257; --bad:#ff4d6d;
  --ink:#e2f4ff; --dim:#9dc0d6; --faint:#65869c;
  --mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --disp:'Chakra Petch', system-ui, -apple-system, sans-serif;
  --hud-h:60px;
  --glow-c:0 0 22px rgba(79,240,255,.32);
  --r:3px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:96px}
body{
  margin:0; background:var(--void); color:var(--ink);
  font-family:var(--disp); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3{margin:0; font-weight:600; letter-spacing:.02em}
p{margin:0}
button,input{font:inherit; color:inherit}
a{color:inherit; text-decoration:none}
kbd{font-family:var(--mono); font-size:11px; background:rgba(79,240,255,.12); border:1px solid var(--line-2);
    border-radius:3px; padding:1px 5px; color:var(--cyan)}
::selection{background:rgba(79,240,255,.28)}

/* ── scrollbar ── */
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:#050a12}
::-webkit-scrollbar-thumb{background:linear-gradient(#1d5a70,#0d2c3a); border:2px solid #050a12; border-radius:9px}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(#2c8ba8,#134050)}

/* ═══════════════ BACKGROUND LAYERS ═══════════════ */
.bg-layer{position:fixed; inset:0; pointer-events:none; z-index:0}
.bg-stars{z-index:0; width:100%; height:100%}
.bg-grid{
  background-image:
    linear-gradient(rgba(79,240,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79,240,255,.045) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 110% 80% at 50% 40%, #000 20%, transparent 78%);
  transform:perspective(600px) rotateX(0deg);
}
.bg-beam{
  background:
    radial-gradient(60% 44% at 50% -8%, rgba(79,240,255,.10), transparent 70%),
    radial-gradient(50% 40% at 88% 24%, rgba(255,178,87,.07), transparent 70%),
    radial-gradient(60% 50% at 10% 78%, rgba(255,77,157,.05), transparent 70%);
}
.scanlines{
  background:repeating-linear-gradient(to bottom, rgba(255,255,255,.028) 0 1px, transparent 1px 3px);
  opacity:.55; mix-blend-mode:overlay;
}
.vignette{box-shadow:inset 0 0 260px 60px rgba(0,0,0,.85)}
.cursor-glow{
  position:fixed; width:520px; height:520px; margin:-260px 0 0 -260px; border-radius:50%;
  background:radial-gradient(circle, rgba(79,240,255,.055), transparent 62%);
  pointer-events:none; z-index:1; transition:opacity .3s; will-change:transform;
}
@media (pointer:coarse){.cursor-glow{display:none}}

/* ═══════════════ HUD ═══════════════ */
.hud{
  position:fixed; top:0; left:0; right:0; height:var(--hud-h); z-index:60;
  display:flex; align-items:center; gap:18px; padding:0 18px;
  background:linear-gradient(180deg, rgba(4,9,16,.94), rgba(4,9,16,.72));
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--line);
}
.hud::after{content:''; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:linear-gradient(90deg, transparent, var(--cyan), transparent); opacity:.55}
.hud-brand{display:flex; align-items:center; gap:11px; flex:0 0 auto}
.mark{width:34px; height:34px; overflow:visible}
.mark .m-ring{fill:none; stroke:var(--cyan); stroke-width:1; opacity:.45;
  transform-origin:center; animation:spin 22s linear infinite}
.mark .m-ring2{fill:none; stroke:var(--amber); stroke-width:.8; opacity:.5; stroke-dasharray:4 6;
  transform-origin:center; animation:spin 14s linear infinite reverse}
.mark .m-cup{fill:rgba(79,240,255,.16); stroke:var(--cyan); stroke-width:1.3}
.mark .m-handle{fill:none; stroke:var(--amber); stroke-width:1.3}
.mark .m-tick{stroke:var(--cyan); stroke-width:1; opacity:.6}
@keyframes spin{to{transform:rotate(360deg)}}
.brand-text b{display:block; font-size:15px; letter-spacing:.22em; line-height:1}
.brand-text i{display:block; font-family:var(--mono); font-style:normal; font-size:8.5px;
  letter-spacing:.2em; color:var(--faint); margin-top:3px}
.ver{color:var(--cyan-d)}

.hud-metrics{display:flex; gap:6px; margin-left:auto; flex-wrap:nowrap; overflow:hidden}
.metric{
  position:relative; min-width:88px; padding:5px 10px 7px; border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(12,26,44,.7), rgba(6,14,24,.5)); border-radius:var(--r);
}
.metric label{display:block; font-family:var(--mono); font-size:7.5px; letter-spacing:.18em; color:var(--faint)}
.metric b{display:flex; align-items:baseline; gap:2px; font-family:var(--mono); font-size:16px; font-weight:700;
  color:var(--cyan); line-height:1.15}
.metric b i{font-style:normal; font-size:9px; color:var(--dim)}
.metric .bar{display:block; height:2px; background:rgba(79,240,255,.13); margin-top:4px; overflow:hidden}
.metric .bar u{display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--cyan),var(--amber));
  transition:width .45s cubic-bezier(.2,.8,.2,1)}
.metric-price b{color:var(--amber)}
.metric.flash{animation:mflash .5s}
@keyframes mflash{0%{box-shadow:0 0 0 0 rgba(79,240,255,.5)}100%{box-shadow:0 0 0 8px rgba(79,240,255,0)}}

.hud-actions{display:flex; gap:6px; flex:0 0 auto}
.hbtn{
  --mx:50%; --my:50%;
  position:relative; overflow:hidden; cursor:pointer;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.16em;
  padding:8px 12px; border:1px solid var(--line-2); border-radius:var(--r);
  background:rgba(10,24,40,.6); color:var(--dim); transition:.2s;
}
.hbtn::before{content:''; position:absolute; inset:0; opacity:0; transition:opacity .25s;
  background:radial-gradient(120px circle at var(--mx) var(--my), rgba(79,240,255,.20), transparent 70%)}
.hbtn:hover{color:var(--cyan); border-color:var(--cyan)}
.hbtn:hover::before{opacity:1}
.hbtn .hb-ico{margin-right:6px; color:var(--amber)}
.hbtn[aria-pressed="true"]{color:var(--void); background:var(--cyan); border-color:var(--cyan)}
.hbtn[aria-pressed="true"] .hb-ico{color:var(--void)}
.hbtn.ghost{padding:8px 11px}

.progress{position:fixed; top:var(--hud-h); left:0; right:0; height:2px; z-index:59; background:rgba(79,240,255,.08)}
.progress i{display:block; height:100%; width:100%; transform-origin:left; transform:scaleX(0);
  background:linear-gradient(90deg,var(--cyan),var(--amber),var(--mag))}

/* ═══════════════ STAGE RAIL ═══════════════ */
.rail{position:fixed; left:14px; top:50%; transform:translateY(-50%); z-index:50;
  display:flex; flex-direction:column; gap:2px}
.rail-node{display:flex; align-items:center; gap:9px; background:none; border:0; cursor:pointer;
  padding:5px 4px; color:var(--faint); font-family:var(--mono); font-size:8.5px; letter-spacing:.15em}
.rn-dot{width:8px; height:8px; border:1px solid var(--line-2); transform:rotate(45deg); transition:.25s; flex:0 0 auto}
.rn-label{opacity:0; transform:translateX(-6px); transition:.25s; white-space:nowrap;
  background:rgba(4,10,18,.94); border:1px solid var(--line); padding:4px 8px; border-radius:2px}
.rail-node:hover .rn-label{opacity:1; transform:none}
.rail-node.on .rn-dot{background:var(--cyan); border-color:var(--cyan); box-shadow:var(--glow-c)}
.rail-node.on{color:var(--cyan)}
@media (max-width:1180px){.rail{display:none}}

/* ═══════════════ SECTIONS ═══════════════ */
section{position:relative; z-index:2; padding:110px 0}
.sec-head{display:flex; gap:18px; align-items:flex-start; margin-bottom:26px}
.sec-head.center{justify-content:center; text-align:left; max-width:1200px; margin:0 auto 34px; padding:0 26px}
.sec-idx{font-family:var(--mono); font-size:11px; color:var(--amber); letter-spacing:.2em;
  border:1px solid rgba(255,178,87,.4); padding:4px 8px; border-radius:var(--r); flex:0 0 auto; margin-top:4px}
.sec-head h2{font-size:clamp(20px,2.4vw,29px); letter-spacing:.16em}
.sec-head p{color:var(--dim); font-size:13px; max-width:62ch; margin-top:5px}

[data-reveal]{opacity:0; transform:translateY(22px); filter:blur(4px);
  transition:opacity .7s var(--d,0ms), transform .7s var(--d,0ms), filter .7s var(--d,0ms);
  transition-timing-function:cubic-bezier(.16,.84,.24,1)}
[data-reveal].in{opacity:1; transform:none; filter:none}

/* ═══════════════ HERO ═══════════════ */
#hero{min-height:100vh; display:flex; flex-direction:column; justify-content:center;
  padding:calc(var(--hud-h) + 40px) 0 60px}
.hero-wrap{max-width:1400px; margin:0 auto; padding:0 clamp(20px,5vw,68px);
  display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center; width:100%}
.eyebrow{display:inline-flex; align-items:center; gap:9px; font-family:var(--mono); font-size:9.5px;
  letter-spacing:.24em; color:var(--dim); border:1px solid var(--line); padding:6px 12px; border-radius:99px;
  background:rgba(8,18,30,.6)}
.eyebrow .dot{width:6px; height:6px; border-radius:50%; background:var(--ok); box-shadow:0 0 10px var(--ok);
  animation:pulse 2s infinite}
@keyframes pulse{50%{opacity:.35}}
h1{margin:18px 0 20px; font-size:clamp(38px,6.6vw,86px); line-height:.94; letter-spacing:.02em; font-weight:700}
h1 span{display:block}
h1 .l2{color:var(--dim); font-weight:400}
h1 .l2 em{font-style:normal; color:var(--cyan); font-weight:700;
  text-shadow:0 0 30px rgba(79,240,255,.5)}
h1 .l3{background:linear-gradient(92deg, var(--amber), var(--cyan) 60%, var(--mag));
  -webkit-background-clip:text; background-clip:text; color:transparent}
.lede{color:#b3d0e0; font-size:15px; max-width:54ch; line-height:1.7}
.hero-cta{display:flex; gap:12px; margin:26px 0 30px; flex-wrap:wrap}

.btn{
  --mx:50%; --my:50%;
  position:relative; overflow:hidden; cursor:pointer; display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:11px; letter-spacing:.18em; padding:13px 22px;
  border:1px solid var(--line-2); border-radius:var(--r); background:rgba(10,24,40,.55);
  color:var(--ink); transition:.22s;
}
.btn::before{content:''; position:absolute; inset:0; opacity:0; transition:.25s;
  background:radial-gradient(160px circle at var(--mx) var(--my), rgba(79,240,255,.22), transparent 70%)}
.btn:hover::before{opacity:1}
.btn:hover{border-color:var(--cyan); transform:translateY(-1px)}
.btn.primary{background:linear-gradient(100deg, rgba(79,240,255,.16), rgba(255,178,87,.14));
  border-color:var(--cyan); color:#eafcff; box-shadow:0 0 0 1px rgba(79,240,255,.12), 0 10px 34px -14px var(--cyan)}
.btn.ghost{background:transparent; color:var(--dim)}
.btn.tiny{padding:8px 12px; font-size:9.5px; letter-spacing:.14em}
.btn .arrow{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2;
  animation:bob 1.8s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(3px)}}

.boot{border:1px solid var(--line); border-radius:var(--r); background:rgba(5,12,20,.6); overflow:hidden; max-width:440px}
.boot-head{font-family:var(--mono); font-size:8px; letter-spacing:.24em; color:var(--faint);
  padding:7px 12px; border-bottom:1px solid var(--line); background:rgba(79,240,255,.04)}
.boot-log{font-family:var(--mono); font-size:10.5px; line-height:1.85; padding:10px 12px;
  height:118px; overflow:hidden; color:var(--faint)}
.boot-line.ok{color:var(--dim)}
.boot-line.ok::after{content:' ✓'; color:var(--ok)}
.boot-log .boot-line:last-child{color:var(--cyan)}

.hero-stage{position:relative; height:min(72vh,640px); transform:translateY(var(--py,0))}
.hero-cup{width:100%; height:100%; display:block; touch-action:none}
.hero-halo{position:absolute; inset:8% 12%; border-radius:50%;
  background:radial-gradient(circle, rgba(79,240,255,.16), rgba(255,178,87,.07) 42%, transparent 68%);
  filter:blur(28px); animation:breathe 7s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.08); opacity:.7}}
.hero-tags .tag{position:absolute; font-family:var(--mono); font-size:9px; letter-spacing:.14em;
  color:var(--cyan); border:1px solid var(--line-2); background:rgba(6,16,28,.8); padding:4px 9px;
  border-radius:var(--r); white-space:nowrap}
.hero-tags .tag::before{content:''; position:absolute; width:26px; height:1px; background:var(--line-2)}
.tag.t1{top:16%; left:-2%} .tag.t1::before{right:-26px; top:50%}
.tag.t2{top:46%; right:0%} .tag.t2::before{left:-26px; top:50%}
.tag.t3{bottom:20%; left:4%} .tag.t3::before{right:-26px; top:50%}

.scroll-cue{position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  font-family:var(--mono); font-size:8.5px; letter-spacing:.28em; color:var(--faint);
  display:flex; align-items:center; gap:10px}
.scroll-cue span{width:1px; height:34px; background:linear-gradient(var(--cyan), transparent);
  animation:cue 2.2s ease-in-out infinite}
@keyframes cue{0%,100%{opacity:.25; transform:scaleY(.5)}50%{opacity:1; transform:scaleY(1)}}

/* ═══════════════ LAB GRID ═══════════════ */
.lab{position:relative; z-index:2; max-width:1560px; margin:0 auto;
  padding:0 clamp(16px,3vw,44px) 0 clamp(16px,4.6vw,86px);
  display:grid; grid-template-columns:minmax(0,1fr) 430px; gap:clamp(20px,3vw,46px); align-items:start}
.lab-flow{min-width:0}
.lab section{padding:76px 0}

/* ═══════════════ PANELS ═══════════════ */
.panel{
  /* no backdrop-filter: it makes Chromium ghost scrolled content under the sticky holo-stage */
  position:relative; border:1px solid var(--line); border-radius:var(--r);
  background:linear-gradient(160deg, rgba(11,24,40,.90), rgba(5,12,21,.88));
  margin-bottom:16px; overflow:hidden;
}
.panel::before{content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(79,240,255,.6), transparent)}
.panel-bar{display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:10px 14px; border-bottom:1px solid var(--line); background:rgba(79,240,255,.035)}
.panel-bar b{font-family:var(--mono); font-size:9.5px; letter-spacing:.22em; color:var(--ink)}
.pb-status{font-family:var(--mono); font-size:9px; letter-spacing:.14em; color:var(--amber)}
.panel.split{display:grid; grid-template-columns:1fr 1fr; gap:0}
.panel.split .pane{padding:0 0 14px}
.panel.split .pane + .pane{border-left:1px solid var(--line)}
.panel.split .panel-bar{border-bottom:1px solid var(--line)}
@media (max-width:820px){.panel.split{grid-template-columns:1fr}.panel.split .pane+.pane{border-left:0; border-top:1px solid var(--line)}}

/* ═══════════════ BEAN CARDS ═══════════════ */
.bean-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(184px,1fr)); gap:10px; margin-bottom:16px}
.bean{
  --mx:50%; --my:50%;
  position:relative; text-align:left; cursor:pointer; overflow:hidden;
  border:1px solid var(--line); border-radius:var(--r); padding:14px 13px 13px;
  background:linear-gradient(165deg, rgba(11,24,40,.75), rgba(5,12,21,.7)); transition:.22s;
}
.bean::before{content:''; position:absolute; inset:0; opacity:0; transition:.25s;
  background:radial-gradient(220px circle at var(--mx) var(--my), rgba(255,178,87,.14), transparent 65%)}
.bean:hover::before{opacity:1}
.bean:hover{transform:translateY(-2px); border-color:var(--line-2)}
.bean.on{border-color:var(--amber); background:linear-gradient(165deg, rgba(38,26,12,.86), rgba(9,16,24,.8));
  box-shadow:0 0 0 1px rgba(255,178,87,.22), 0 14px 40px -22px var(--amber)}
.bean.on::after{content:''; position:absolute; top:0; left:0; width:100%; height:2px; background:var(--amber)}
.b-top{display:flex; justify-content:space-between; align-items:center; font-family:var(--mono); font-size:8.5px;
  letter-spacing:.16em; color:var(--faint)}
.b-swatch{width:22px; height:22px; border-radius:50%; border:1px solid rgba(255,255,255,.2);
  box-shadow:inset 0 -6px 10px rgba(0,0,0,.5)}
.b-name{font-size:14.5px; letter-spacing:.1em; margin:9px 0 3px; font-weight:600}
.b-origin{font-family:var(--mono); font-size:9px; color:var(--dim); letter-spacing:.05em}
.b-notes{display:flex; flex-wrap:wrap; gap:4px; margin:10px 0 9px}
.b-notes span{font-family:var(--mono); font-size:8px; letter-spacing:.1em; color:var(--dim);
  border:1px solid var(--line); padding:2px 6px; border-radius:99px}
.b-metrics{display:flex; gap:10px; font-family:var(--mono); font-size:8.5px; color:var(--faint)}
.b-metrics b{color:var(--cyan); font-weight:500}
.b-spark{display:flex; gap:2px; align-items:flex-end; height:20px; margin-top:9px}
.b-spark i{flex:1; background:linear-gradient(var(--cyan), rgba(79,240,255,.15)); opacity:.7; border-radius:1px 1px 0 0}
.bean.on .b-spark i{background:linear-gradient(var(--amber), rgba(255,178,87,.15))}

.bean-detail{padding:14px 16px; display:grid; grid-template-columns:1fr auto; gap:16px; align-items:center}
.bd-blurb{color:var(--dim); font-size:13px; max-width:66ch}
.bd-blurb b{color:var(--ink); display:block; font-family:var(--mono); font-size:10px; letter-spacing:.2em; margin-bottom:5px}
.bd-stats{display:flex; gap:16px}
.bd-stat{text-align:right; font-family:var(--mono)}
.bd-stat b{display:block; font-size:19px; color:var(--cyan); font-weight:700}
.bd-stat i{font-style:normal; font-size:8px; letter-spacing:.16em; color:var(--faint)}
@media(max-width:700px){.bean-detail{grid-template-columns:1fr}.bd-stats{justify-content:flex-start}}

/* ═══════════════ KNOBS ═══════════════ */
.knob-bank{display:grid; grid-template-columns:repeat(auto-fit,minmax(112px,1fr)); gap:4px; padding:16px 12px}
.knob{display:flex; flex-direction:column; align-items:center; gap:6px; padding:6px 2px}
.knob-dial{position:relative; cursor:ns-resize; outline:none; border-radius:50%; line-height:0}
.knob-dial:focus-visible{box-shadow:0 0 0 2px var(--cyan)}
.knob-dial.is-grabbing{cursor:grabbing}
.knob svg{display:block; filter:drop-shadow(0 4px 14px rgba(0,0,0,.6))}
.k-well{fill:rgba(6,14,24,.9); stroke:rgba(94,178,214,.14)}
.k-track{fill:none; stroke:rgba(94,178,214,.16); stroke-width:5; stroke-linecap:round}
.k-fill{fill:none; stroke-width:5; stroke-linecap:round;
  filter:drop-shadow(0 0 5px rgba(79,240,255,.55))}
.k-ticks line{stroke:rgba(126,166,194,.35); stroke-width:1}
.k-ticks line.maj{stroke:rgba(126,200,230,.75); stroke-width:1.4}
.k-cap{fill:url(#none); fill:rgba(13,28,46,.96); stroke:rgba(120,210,240,.28)}
.k-needle{stroke:var(--amber); stroke-width:2.4; stroke-linecap:round;
  filter:drop-shadow(0 0 4px rgba(255,178,87,.8))}
.k-hub{fill:#0a1a2c; stroke:rgba(255,178,87,.6)}
.knob-readout{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  gap:2px; pointer-events:none; font-family:var(--mono); transform:translateY(11px)}
.knob-readout b{font-size:13px; color:var(--ink); font-weight:700}
.knob-readout i{font-style:normal; font-size:8px; color:var(--dim)}
.knob-label{font-family:var(--mono); font-size:8.5px; letter-spacing:.16em; color:var(--dim); text-align:center}
.knob-hint{font-family:var(--mono); font-size:7.5px; color:var(--faint); text-align:center; letter-spacing:.1em}

/* ═══════════════ SLIDERS ═══════════════ */
.slider-bank{padding:16px 18px; display:grid; gap:20px}
.slider-head{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:9px}
.s-label{font-family:var(--mono); font-size:9.5px; letter-spacing:.18em; color:var(--dim)}
.s-val{font-family:var(--mono); display:flex; gap:2px; align-items:baseline}
.s-val b{font-size:14px; color:var(--cyan); font-weight:700}
.s-val i{font-style:normal; font-size:9px; color:var(--faint)}
.slider-rail{position:relative; height:26px; cursor:pointer; outline:none; touch-action:none}
.slider-rail:focus-visible .s-track{box-shadow:0 0 0 2px var(--cyan)}
.s-track{position:absolute; top:11px; left:0; right:0; height:4px; border-radius:2px;
  background:rgba(94,178,214,.14); border:1px solid rgba(94,178,214,.14)}
.s-fill{position:absolute; top:11px; left:0; height:4px; border-radius:2px;
  background:linear-gradient(90deg, var(--cyan-d), var(--cyan)); box-shadow:0 0 12px rgba(79,240,255,.45)}
.s-ticks{position:absolute; top:19px; left:0; right:0; display:flex; justify-content:space-between}
.s-ticks i{width:1px; height:5px; background:rgba(94,178,214,.3)}
.s-thumb{position:absolute; top:13px; width:0; height:0}
.s-thumb span{position:absolute; width:15px; height:15px; margin:-7.5px 0 0 -7.5px; border-radius:50%;
  background:linear-gradient(160deg,#eafcff,#5fc9e0); border:1px solid #0a1a2c;
  box-shadow:0 0 0 3px rgba(79,240,255,.16), 0 4px 12px rgba(0,0,0,.7); transition:box-shadow .2s}
.slider-rail:hover .s-thumb span{box-shadow:0 0 0 6px rgba(79,240,255,.16), 0 4px 12px rgba(0,0,0,.7)}
.slider-rail.is-grabbing .s-thumb span{box-shadow:0 0 0 8px rgba(79,240,255,.24)}

/* ═══════════════ XY PAD ═══════════════ */
.xypad{padding:14px 16px}
.xy-surface{position:relative; aspect-ratio:1.35/1; border:1px solid var(--line); border-radius:var(--r);
  background:radial-gradient(circle at 50% 50%, rgba(79,240,255,.05), rgba(4,10,18,.85));
  cursor:crosshair; overflow:hidden; outline:none; touch-action:none}
.xy-surface:focus-visible{border-color:var(--cyan)}
.xy-grid{position:absolute; inset:0;
  background-image:linear-gradient(rgba(94,178,214,.11) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(94,178,214,.11) 1px,transparent 1px);
  background-size:12.5% 16.66%}
.xy-corner{position:absolute; font-family:var(--mono); font-size:7.5px; letter-spacing:.14em; color:var(--faint)}
.xy-corner.tl{top:6px; left:8px} .xy-corner.tr{top:6px; right:8px; text-align:right}
.xy-corner.bl{bottom:6px; left:8px} .xy-corner.br{bottom:6px; right:8px; text-align:right}
.xy-cross-h{position:absolute; left:0; right:0; height:1px; background:rgba(79,240,255,.28)}
.xy-cross-v{position:absolute; top:0; bottom:0; width:1px; background:rgba(79,240,255,.28)}
.xy-node{position:absolute; width:0; height:0}
.xy-node span{position:absolute; width:17px; height:17px; margin:-8.5px 0 0 -8.5px; border-radius:50%;
  border:1.5px solid var(--cyan); background:rgba(79,240,255,.18); box-shadow:0 0 18px rgba(79,240,255,.6)}
.xy-node span::after{content:''; position:absolute; inset:5px; border-radius:50%; background:var(--cyan)}
.xy-axes{display:flex; justify-content:space-between; font-family:var(--mono); font-size:8px;
  letter-spacing:.14em; color:var(--faint); margin-top:7px}

/* ═══════════════ SEGMENTED ═══════════════ */
.segmented{padding:14px 16px}
.seg-label{font-family:var(--mono); font-size:8.5px; letter-spacing:.2em; color:var(--faint); margin-bottom:8px}
.seg-row{display:flex; flex-wrap:wrap; gap:5px}
.seg{cursor:pointer; border:1px solid var(--line); border-radius:var(--r); background:rgba(9,20,34,.6);
  padding:8px 11px; text-align:left; transition:.18s; flex:1 1 auto; min-width:76px}
.seg span{display:block; font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; color:var(--dim)}
.seg i{display:block; font-style:normal; font-family:var(--mono); font-size:7.5px; color:var(--faint); margin-top:2px}
.seg:hover{border-color:var(--line-2)}
.seg.on{border-color:var(--cyan); background:rgba(79,240,255,.12); box-shadow:0 0 18px -6px var(--cyan)}
.seg.on span{color:var(--cyan)}
.segmented.compact .seg{min-width:0; padding:7px 10px}

/* ═══════════════ STEPPERS ═══════════════ */
.stepper-bank{padding:8px 6px}
.stepper{display:grid; grid-template-columns:16px 1fr auto auto; gap:12px; align-items:center;
  padding:11px 12px; border-bottom:1px solid rgba(94,178,214,.1); transition:.2s}
.stepper:last-child{border-bottom:0}
.stepper.active{background:rgba(79,240,255,.05)}
.st-swatch{width:14px; height:14px; border-radius:50%; background:var(--sw);
  box-shadow:0 0 12px -2px var(--sw), inset 0 -4px 6px rgba(0,0,0,.4)}
.st-name{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; color:var(--dim)}
.stepper.active .st-name{color:var(--ink)}
.st-name i{display:block; font-style:normal; font-size:8px; color:var(--faint)}
.st-price{font-family:var(--mono); font-size:9.5px; color:var(--faint)}
.st-ctl{display:flex; align-items:center; gap:8px}
.st-b{cursor:pointer; width:26px; height:26px; border:1px solid var(--line-2); border-radius:var(--r);
  background:rgba(9,20,34,.7); color:var(--dim); font-size:14px; line-height:1; transition:.18s}
.st-b:hover{border-color:var(--cyan); color:var(--cyan); background:rgba(79,240,255,.1)}
.st-pips{display:flex; gap:3px; width:34px; justify-content:center}
.st-pips i{width:8px; height:8px; border:1px solid var(--line-2); transform:rotate(45deg)}
.st-pips i.on{background:var(--amber); border-color:var(--amber); box-shadow:0 0 10px var(--amber)}
.inject-foot{display:flex; justify-content:space-between; align-items:center; gap:16px; padding:12px 14px;
  border-top:1px solid var(--line); background:rgba(79,240,255,.03)}
.ij-note{font-family:var(--mono); font-size:9px; color:var(--faint); letter-spacing:.05em}

/* ═══════════════ TOGGLE ═══════════════ */
.toggle{display:inline-flex; align-items:center; gap:9px; cursor:pointer; background:none; border:0; padding:4px}
.tg-track{width:34px; height:18px; border-radius:99px; border:1px solid var(--line-2);
  background:rgba(9,20,34,.8); position:relative; transition:.22s}
.tg-dot{position:absolute; top:2px; left:2px; width:12px; height:12px; border-radius:50%;
  background:var(--faint); transition:.22s}
.toggle.on .tg-track{background:rgba(79,240,255,.2); border-color:var(--cyan)}
.toggle.on .tg-dot{left:18px; background:var(--cyan); box-shadow:0 0 10px var(--cyan)}
.tg-label{font-family:var(--mono); font-size:9px; letter-spacing:.14em; color:var(--dim)}

/* ═══════════════ EXTRACTION EXTRAS ═══════════════ */
.ext-lower{display:grid; grid-template-columns:1fr 260px; gap:0; border-top:1px solid var(--line)}
@media(max-width:820px){.ext-lower{grid-template-columns:1fr}}
.scope-wrap{padding:12px 14px}
.mini-head{font-family:var(--mono); font-size:8.5px; letter-spacing:.2em; color:var(--faint);
  display:flex; justify-content:space-between; margin-bottom:8px}
.mini-head i{font-style:normal; color:var(--cyan-d)}
.scope{width:100%; height:150px; display:block}
.scope.small{height:120px}
.gauge-bank{display:grid; grid-template-columns:repeat(3,1fr); border-left:1px solid var(--line)}
@media(max-width:820px){.gauge-bank{border-left:0; border-top:1px solid var(--line)}}
.gauge-cell{padding:10px 4px; border-right:1px solid rgba(94,178,214,.1)}
.gauge-cell:last-child{border-right:0}
.gauge-cell canvas{width:100%; height:96px; display:block}
.gauge-cell.sm canvas{height:74px}
.mini-gauges{display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line)}
.verdict{padding:11px 14px; border-top:1px solid var(--line); font-family:var(--mono); font-size:10px;
  letter-spacing:.06em; display:flex; align-items:center; gap:10px; color:var(--dim)}
.verdict .vd-chip{padding:3px 9px; border-radius:99px; font-size:9px; letter-spacing:.16em}
.vd-chip.good{background:rgba(92,255,177,.14); color:var(--ok); border:1px solid rgba(92,255,177,.4)}
.vd-chip.mid{background:rgba(255,178,87,.14); color:var(--amber); border:1px solid rgba(255,178,87,.4)}
.vd-chip.bad{background:rgba(255,77,109,.14); color:var(--bad); border:1px solid rgba(255,77,109,.4)}
.shot-mount{padding:14px 16px 4px}

.readout{list-style:none; margin:0; padding:6px 16px 0}
.readout li{display:flex; justify-content:space-between; gap:12px; font-family:var(--mono); font-size:10px;
  padding:6px 0; border-bottom:1px dashed rgba(94,178,214,.13); color:var(--faint); letter-spacing:.06em}
.readout li b{color:var(--cyan); font-weight:500}
.readout li:last-child{border-bottom:0}
.readout.dense li{font-size:9.5px; padding:5px 0}

/* ═══════════════ MILK ═══════════════ */
.milk-stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(96px,1fr)); border-top:1px solid var(--line)}
.ms{padding:11px 12px; border-right:1px solid rgba(94,178,214,.1); font-family:var(--mono)}
.ms:last-child{border-right:0}
.ms i{display:block; font-style:normal; font-size:7.5px; letter-spacing:.18em; color:var(--faint)}
.ms b{font-size:15px; color:var(--cyan); font-weight:700}
.foam-vis{padding:6px 18px 18px}
.fv-track{height:26px; display:flex; border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  background:rgba(4,10,18,.7)}
.fv-track i{display:block; height:100%; transition:width .5s cubic-bezier(.2,.8,.2,1)}
.fv-liquid{background:linear-gradient(90deg,#3b1d0d,#7a4322)}
.fv-foam{background:linear-gradient(90deg,#e8d3ba,#fff6e8)}
.fv-ice{background:linear-gradient(90deg,rgba(190,235,255,.5),rgba(220,248,255,.75))}
.fv-legend{display:flex; gap:16px; margin-top:8px; font-family:var(--mono); font-size:8.5px; color:var(--faint)}
.fv-legend span{display:flex; align-items:center; gap:6px}
.fv-legend u{width:9px; height:9px; text-decoration:none; border-radius:2px}

/* ═══════════════ VESSEL ═══════════════ */
.vessel-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:8px; padding:14px}
.vsl{cursor:pointer; border:1px solid var(--line); border-radius:var(--r); padding:14px 12px;
  background:rgba(9,20,34,.6); text-align:center; transition:.2s; position:relative; overflow:hidden}
.vsl:hover{border-color:var(--line-2); transform:translateY(-2px)}
.vsl.on{border-color:var(--cyan); background:rgba(79,240,255,.09); box-shadow:0 0 24px -10px var(--cyan)}
.vsl svg{display:block; margin:0 auto 8px; overflow:visible}
.vsl svg path,.vsl svg ellipse{fill:rgba(79,240,255,.07); stroke:var(--dim); stroke-width:1.2}
.vsl.on svg path,.vsl.on svg ellipse{stroke:var(--cyan); fill:rgba(79,240,255,.16)}
.vsl b{display:block; font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; color:var(--dim)}
.vsl.on b{color:var(--cyan)}
.vsl i{display:block; font-style:normal; font-family:var(--mono); font-size:8px; color:var(--faint); margin-top:3px}
.art-note{padding:0 16px; font-family:var(--mono); font-size:9px; color:var(--faint); letter-spacing:.05em}
.engrave{display:block; padding:16px 16px 4px; position:relative}
.engrave input{width:100%; background:transparent; border:0; outline:none; font-family:var(--mono);
  font-size:19px; letter-spacing:.24em; color:var(--amber); padding:6px 0; text-transform:uppercase}
.eng-underline{display:block; height:1px; background:linear-gradient(90deg,var(--amber),transparent)}
.sleeve-preview{margin:14px 16px 0; border:1px solid var(--line-2); border-radius:var(--r);
  padding:13px 15px; background:linear-gradient(100deg, rgba(30,20,10,.7), rgba(8,16,26,.7));
  display:flex; flex-direction:column; gap:2px; font-family:var(--mono)}
.sleeve-preview span{font-size:8px; letter-spacing:.32em; color:var(--faint)}
.sleeve-preview b{font-size:17px; letter-spacing:.2em; color:var(--amber)}
.sleeve-preview i{font-style:normal; font-size:8px; letter-spacing:.2em; color:var(--faint)}

/* ═══════════════ HOLO STAGE ═══════════════ */
.holo{position:sticky; top:calc(var(--hud-h) + 22px); height:calc(100vh - var(--hud-h) - 44px);
  min-height:560px; display:flex}
.holo-frame{display:flex; flex-direction:column; width:100%; border:1px solid var(--line-2); border-radius:var(--r);
  background:linear-gradient(165deg, rgba(8,18,32,.86), rgba(3,9,16,.9)); backdrop-filter:blur(10px);
  box-shadow:0 30px 90px -40px #000, inset 0 0 60px -30px rgba(79,240,255,.3); overflow:hidden}
.holo-bar{display:flex; justify-content:space-between; align-items:center; padding:9px 13px;
  border-bottom:1px solid var(--line); font-family:var(--mono); font-size:8.5px; letter-spacing:.2em;
  background:rgba(79,240,255,.05)}
.hb-left{display:flex; align-items:center; gap:7px; color:var(--ink)}
.hb-left .live{width:6px; height:6px; border-radius:50%; background:var(--ok);
  box-shadow:0 0 10px var(--ok); animation:pulse 1.6s infinite}
.hb-right{color:var(--amber)}
.holo-canvas-wrap{position:relative; flex:1 1 auto; min-height:0}
.cup-canvas{width:100%; height:100%; display:block; touch-action:none; cursor:grab}
.cup-canvas.grabbing{cursor:grabbing}
.holo-corner{position:absolute; width:16px; height:16px; border:1px solid rgba(79,240,255,.5)}
.holo-corner.tl{top:8px; left:8px; border-right:0; border-bottom:0}
.holo-corner.tr{top:8px; right:8px; border-left:0; border-bottom:0}
.holo-corner.bl{bottom:8px; left:8px; border-right:0; border-top:0}
.holo-corner.br{bottom:8px; right:8px; border-left:0; border-top:0}
.holo-hint{position:absolute; bottom:10px; left:50%; transform:translateX(-50%);
  font-family:var(--mono); font-size:8px; letter-spacing:.2em; color:var(--faint); pointer-events:none}
.holo-badges{position:absolute; top:12px; left:12px; display:flex; flex-direction:column; gap:5px;
  pointer-events:none}
.holo-badges span{font-family:var(--mono); font-size:8px; letter-spacing:.14em; padding:3px 7px;
  border:1px solid var(--line-2); background:rgba(5,12,21,.8); color:var(--dim); border-radius:2px}
.holo-badges span.warn{border-color:var(--bad); color:var(--bad)}
.holo-badges span.good{border-color:rgba(92,255,177,.5); color:var(--ok)}

.holo-tabs{display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line)}
.htab{cursor:pointer; background:none; border:0; border-right:1px solid var(--line); padding:9px 4px;
  font-family:var(--mono); font-size:8.5px; letter-spacing:.18em; color:var(--faint); transition:.2s}
.htab:last-child{border-right:0}
.htab:hover{color:var(--dim); background:rgba(79,240,255,.05)}
.htab.on{color:var(--cyan); background:rgba(79,240,255,.1); box-shadow:inset 0 -2px 0 var(--cyan)}
.holo-panes{border-top:1px solid var(--line); height:216px; overflow:hidden}
.hpane{display:none; height:100%}
.hpane.on{display:block}
.radar{width:100%; height:216px; display:block}
.hpane[data-pane="curve"] .scope{height:120px; padding:0}
.hpane[data-pane="data"]{overflow-y:auto}
.holo-foot{display:flex; gap:5px; padding:9px; border-top:1px solid var(--line); background:rgba(79,240,255,.03)}
.holo-foot .btn{flex:1; justify-content:center; padding:8px 4px}

@media (max-width:1080px){
  .lab{grid-template-columns:1fr; padding-left:clamp(16px,4vw,32px)}
  .holo{position:sticky; top:calc(var(--hud-h) + 6px); height:auto; min-height:0; order:-1;
    margin-bottom:10px; z-index:30}
  /* opaque on narrow layouts so scrolling panels don't ghost through the sticky stage */
  .holo-frame{background:linear-gradient(165deg,#08141f,#03080f); backdrop-filter:none;
    box-shadow:0 18px 50px -18px #000, inset 0 0 60px -30px rgba(79,240,255,.3)}
  .holo-canvas-wrap{height:min(30vh,230px)}
  .holo-panes{height:142px}
  .radar{height:142px}
  .holo-hint{display:none}
}

/* ═══════════════ MANIFEST ═══════════════ */
#manifest{max-width:1200px; margin:0 auto; padding:90px clamp(16px,4vw,26px) 60px}
.manifest-wrap{display:grid; grid-template-columns:1.05fr .95fr; gap:18px; align-items:start}
@media(max-width:880px){.manifest-wrap{grid-template-columns:1fr}}
.receipt{padding:20px 22px}
.rc-head{display:flex; justify-content:space-between; align-items:flex-start;
  border-bottom:1px dashed var(--line-2); padding-bottom:13px; margin-bottom:12px}
.rc-head b{font-family:var(--disp); font-size:16px; letter-spacing:.26em; display:block}
.rc-head i{font-style:normal; font-family:var(--mono); font-size:8px; letter-spacing:.2em; color:var(--faint)}
.rc-code{font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--amber);
  border:1px solid rgba(255,178,87,.4); padding:5px 9px; border-radius:var(--r)}
.rc-lines{list-style:none; margin:0; padding:0}
.rc-lines li{display:flex; justify-content:space-between; gap:14px; font-family:var(--mono); font-size:11px;
  padding:7px 0; color:var(--dim); border-bottom:1px dotted rgba(94,178,214,.14)}
.rc-lines li span:first-child{position:relative; flex:1;}
.rc-lines li em{font-style:normal; color:var(--faint); font-size:9px; display:block}
.rc-lines li b{color:var(--ink); font-weight:500; white-space:nowrap}
.rc-lines li.free b{color:var(--faint)}
.rc-total{display:flex; justify-content:space-between; align-items:baseline; margin-top:14px; padding-top:13px;
  border-top:1px dashed var(--line-2); font-family:var(--mono)}
.rc-total span{font-size:10px; letter-spacing:.26em; color:var(--dim)}
.rc-total b{font-size:30px; color:var(--amber); font-weight:700; text-shadow:0 0 26px rgba(255,178,87,.4)}
.rc-meta{display:grid; grid-template-columns:repeat(auto-fit,minmax(90px,1fr)); gap:10px; margin-top:14px;
  font-family:var(--mono)}
.rc-meta div i{display:block; font-style:normal; font-size:7.5px; letter-spacing:.18em; color:var(--faint)}
.rc-meta div b{font-size:13px; color:var(--cyan); font-weight:600}
.rc-barcode{display:flex; gap:2px; align-items:flex-end; height:34px; margin-top:16px; opacity:.6}
.rc-barcode i{background:var(--ink); width:2px; border-radius:1px}

.commit-body{padding:20px}
.commit-stats{display:grid; grid-template-columns:repeat(2,1fr); gap:9px; margin-bottom:20px}
.cs{border:1px solid var(--line); border-radius:var(--r); padding:11px 12px; background:rgba(6,14,24,.6);
  font-family:var(--mono)}
.cs i{display:block; font-style:normal; font-size:7.5px; letter-spacing:.18em; color:var(--faint)}
.cs b{font-size:17px; color:var(--ink); font-weight:700}
.cs.hl b{color:var(--ok)}
.cs.warn b{color:var(--bad)}
.launch{
  position:relative; width:100%; cursor:pointer; overflow:hidden;
  border:1px solid var(--cyan); border-radius:var(--r); padding:24px 20px;
  background:linear-gradient(110deg, rgba(79,240,255,.14), rgba(255,178,87,.10));
  display:flex; flex-direction:column; align-items:center; gap:5px; transition:.24s;
  --mx:50%; --my:50%;
}
.launch::before{content:''; position:absolute; inset:0; opacity:.35; transition:.3s;
  background:radial-gradient(240px circle at var(--mx) var(--my), rgba(255,255,255,.22), transparent 65%)}
.launch:hover{transform:translateY(-2px); box-shadow:0 22px 60px -26px var(--cyan)}
.launch:hover::before{opacity:.7}
.launch .lc-label{font-family:var(--mono); font-size:14px; letter-spacing:.3em; color:#eafcff; font-weight:700}
.launch .lc-sub{font-family:var(--mono); font-size:9px; letter-spacing:.2em; color:var(--dim)}
.launch .lc-ring{position:absolute; inset:-1px; border:1px solid rgba(79,240,255,.6); border-radius:var(--r);
  animation:ringpulse 2.6s ease-out infinite}
@keyframes ringpulse{0%{opacity:.8; transform:scale(1)}100%{opacity:0; transform:scale(1.045)}}
.commit-note{margin-top:14px; font-family:var(--mono); font-size:8.5px; letter-spacing:.14em;
  color:var(--faint); text-align:center}

/* ═══════════════ FOOTER ═══════════════ */
.foot{position:relative; z-index:2; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  max-width:1200px; margin:0 auto; padding:26px clamp(16px,4vw,26px) 44px;
  border-top:1px solid var(--line); font-family:var(--mono); font-size:9px; letter-spacing:.16em; color:var(--faint)}
.foot-links{display:flex; gap:9px}

/* ═══════════════ DRAWERS ═══════════════ */
.drawer{position:fixed; inset:0; z-index:90; background:rgba(2,5,10,.88);
  display:flex; justify-content:flex-end; animation:fadein .2s}
.drawer[hidden]{display:none}
@keyframes fadein{from{opacity:0}}
.drawer-inner{width:min(460px,100%); height:100%; overflow-y:auto; background:linear-gradient(180deg,#08131f,#040a12);
  border-left:1px solid var(--line-2); animation:slidein .3s cubic-bezier(.16,.84,.24,1)}
@keyframes slidein{from{transform:translateX(40px); opacity:.4}}
.drawer-head{display:flex; justify-content:space-between; align-items:center; padding:16px 18px;
  border-bottom:1px solid var(--line); font-family:var(--mono); font-size:10px; letter-spacing:.24em;
  position:sticky; top:0; background:#08131f; z-index:2}
.drawer-head.sub{color:var(--faint); font-size:9px; border-top:1px solid var(--line)}
.drawer-head .x{cursor:pointer; background:none; border:0; color:var(--dim); font-size:15px}
.drawer-head .x:hover{color:var(--bad)}
.preset-list{padding:12px}
.preset{width:100%; text-align:left; cursor:pointer; border:1px solid var(--line); border-radius:var(--r);
  background:rgba(9,20,34,.7); padding:14px 15px; margin-bottom:8px; transition:.2s; display:block}
.preset:hover{border-color:var(--cyan); background:rgba(79,240,255,.08); transform:translateX(3px)}
.preset b{display:block; font-family:var(--mono); font-size:11.5px; letter-spacing:.2em; color:var(--ink)}
.preset i{display:block; font-style:normal; font-size:11px; color:var(--dim); margin-top:5px}
.preset u{display:inline-block; text-decoration:none; font-family:var(--mono); font-size:8px; color:var(--amber);
  letter-spacing:.14em; margin-top:8px; border:1px solid rgba(255,178,87,.35); padding:2px 7px; border-radius:99px}
.code-row{display:flex; gap:6px; padding:12px}
.code-row input{flex:1; min-width:0; background:rgba(4,10,18,.8); border:1px solid var(--line); border-radius:var(--r);
  padding:9px 11px; font-family:var(--mono); font-size:10px; color:var(--cyan); outline:none}
.code-row input:focus{border-color:var(--cyan)}
.help-list{list-style:none; margin:0; padding:14px 18px}
.help-list li{padding:9px 0; border-bottom:1px dashed rgba(94,178,214,.14); font-size:13px; color:var(--dim)}

/* ═══════════════ BREW SEQUENCE ═══════════════ */
.brewing{position:fixed; inset:0; z-index:95; background:radial-gradient(circle at 50% 40%, #071522, #01040a 70%);
  display:flex; align-items:center; justify-content:center; animation:fadein .25s}
.brewing[hidden]{display:none}
.bw-inner{width:min(520px,92vw); text-align:center; position:relative}
.bw-cup{width:100%; height:290px; display:block}
.bw-title{font-family:var(--mono); font-size:13px; letter-spacing:.42em; color:var(--cyan); margin:6px 0 14px;
  min-height:20px}
.bw-bar{height:3px; background:rgba(79,240,255,.14); border-radius:2px; overflow:hidden}
.bw-bar i{display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--cyan),var(--amber));
  transition:width .3s linear; box-shadow:0 0 14px var(--cyan)}
.bw-steps{list-style:none; margin:18px 0 0; padding:0; display:flex; flex-direction:column; gap:5px;
  font-family:var(--mono); font-size:10px; color:var(--faint); letter-spacing:.1em; text-align:left}
.bw-steps li{display:grid; grid-template-columns:1fr 1fr 14px; gap:10px; opacity:.35; transition:.3s}
.bw-steps li span:nth-child(2){text-align:right; color:var(--faint)}
.bw-steps li::after{text-align:right}
.bw-steps li.on{opacity:1; color:var(--cyan)}
.bw-steps li.done{opacity:.8; color:var(--dim)}
.bw-steps li.done::after{content:'✓'; color:var(--ok)}
.bw-steps li::after{content:''}
.bw-steps li.on::after{content:'▸'}
.bw-done{position:fixed; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; padding:24px; text-align:center;
  background:radial-gradient(circle at 50% 42%, #08192a, #01040a 70%); animation:fadein .4s}
.bw-done[hidden]{display:none}
.bwd-check{width:66px; height:66px; border-radius:50%; border:2px solid var(--ok); color:var(--ok);
  display:flex; align-items:center; justify-content:center; font-size:30px; box-shadow:0 0 40px -6px var(--ok);
  animation:popin .5s cubic-bezier(.16,1.3,.4,1)}
@keyframes popin{from{transform:scale(.4); opacity:0}}
.bw-done b{font-family:var(--mono); letter-spacing:.34em; font-size:13px}
.bw-done p{color:var(--dim); font-size:13px; font-family:var(--mono)}

/* ═══════════════ TOASTS ═══════════════ */
.toast-stack{position:fixed; right:16px; bottom:16px; z-index:99; display:flex; flex-direction:column;
  gap:7px; align-items:flex-end; pointer-events:none}
.toast{font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; padding:10px 14px;
  border:1px solid var(--line-2); border-left:2px solid var(--cyan); background:rgba(6,16,28,.94);
  border-radius:var(--r); color:var(--dim); animation:toastin .3s cubic-bezier(.16,.84,.24,1);
  box-shadow:0 14px 40px -18px #000}
.toast.warn{border-left-color:var(--bad); color:var(--bad)}
.toast.ok{border-left-color:var(--ok); color:var(--ok)}
@keyframes toastin{from{transform:translateX(20px); opacity:0}}
.toast.out{animation:toastout .3s forwards}
@keyframes toastout{to{transform:translateX(20px); opacity:0}}

/* ═══════════════ RESPONSIVE ═══════════════ */
@media (max-width:1240px){ .hud-metrics .metric[data-k="kcal"]{display:none} }
@media (max-width:1100px){ .hud-metrics .metric[data-k="temp"]{display:none} }
@media (max-width:960px){ .hud-metrics .metric[data-k="caffeine"]{display:none} }
@media (max-width:830px){ .hud-metrics .metric[data-k="strength"]{display:none} }
@media (max-width:900px){
  .hero-wrap{grid-template-columns:1fr; gap:22px}
  .hero-stage{height:46vh; order:-1}
  .hero-tags{display:none}
}
@media (max-width:680px){
  .hud{gap:10px; padding:0 11px}
  .brand-text i{display:none}
  .hbtn span:not(.hb-ico){display:none}
  .hbtn{padding:8px 10px}
  section{padding:70px 0}
  .lab section{padding:52px 0}
  .knob-bank{grid-template-columns:repeat(2,1fr)}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important; transition-duration:.06s !important}
  html{scroll-behavior:auto}
  [data-reveal]{opacity:1; transform:none; filter:none}
}