/* NeuroSync demo — styled with seyarkai.com design tokens (see design.md) */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --cobalt:#0064e0;--cobalt-deep:#0143b5;--cobalt-soft:rgba(0,100,224,.12);
  --ink:#0a1317;--charcoal:#444950;--slate:#606770;--steel:#8a8d91;--stone:#bec3c9;
  --canvas:#fff;--surface:#f0f2f5;--hairline:rgba(0,0,0,.12);--hairline-soft:rgba(0,0,0,.07);
  --orange:#e07020;
  --r-md:6px;--r-lg:8px;--r-xl:16px;--r-xxl:24px;--r-full:100px;
  --max-w:1280px;--ease:cubic-bezier(.4,0,.2,1);
}
body{font-family:'Instrument Sans','Helvetica Neue',Arial,sans-serif;background:var(--surface);color:var(--ink);line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
h2{font-family:'Bricolage Grotesque','Instrument Sans',sans-serif;font-size:14px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;color:var(--charcoal);margin:20px 0 8px}
h2:first-child{margin-top:0}
h3{font-family:'Bricolage Grotesque','Instrument Sans',sans-serif;font-size:15px;font-weight:600}

/* Nav */
.nav{display:flex;align-items:center;gap:18px;background:var(--canvas);border-bottom:1px solid var(--hairline-soft);padding:12px 28px;position:sticky;top:0;z-index:10}
.brand{display:flex;align-items:center;gap:10px;font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:21px;letter-spacing:-.4px}
.brand-logo{border-radius:6px;display:block}
.nav-title{font-size:14px;color:var(--slate)}
.nav-title em{font-style:normal;color:var(--cobalt);font-weight:600}
.nav-links{margin-left:auto;display:flex;align-items:center;gap:18px;font-size:14px;color:var(--slate)}
.nav-links a:hover{color:var(--ink)}
.pill{background:var(--ink);color:#fff!important;padding:8px 18px;border-radius:var(--r-full);font-weight:500}
.pill:hover{background:var(--cobalt)}

/* Disclaimer strip */
.disclaimer{background:#070d19;color:rgba(255,255,255,.85);font-size:12.5px;text-align:center;padding:8px 24px;border-bottom:1px solid rgba(0,100,224,.35)}
.disclaimer strong{color:#5da9ff}

/* Layout */
.layout{display:grid;grid-template-columns:280px 1fr 320px;gap:16px;max-width:var(--max-w);margin:20px auto;padding:0 24px}
.panel{background:var(--canvas);border:1px solid var(--hairline-soft);border-radius:var(--r-xxl);padding:22px}

/* Controls */
.hint{font-size:12.5px;color:var(--steel);margin-bottom:10px}
.gesture-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:6px}
.btn{border:1px solid var(--hairline);background:var(--canvas);border-radius:var(--r-full);padding:9px 12px;font-family:inherit;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s var(--ease);text-align:center}
.btn:hover{border-color:var(--cobalt);color:var(--cobalt)}
.btn.active{background:var(--cobalt);border-color:var(--cobalt);color:#fff}
.btn.cobalt{background:var(--cobalt);border-color:var(--cobalt);color:#fff;width:100%}
.btn.cobalt:hover{background:var(--cobalt-deep)}
.btn.cobalt:disabled{background:var(--stone);border-color:var(--stone);cursor:default}
.btn.small{padding:7px 14px;font-size:12.5px}
.slider-row{display:block;font-size:13px;color:var(--charcoal);margin-bottom:12px}
.slider-row b{color:var(--ink)}
.slider-row input{width:100%;accent-color:var(--cobalt);margin-top:4px}
.source-row{display:flex;gap:8px;margin-bottom:8px}
.cal-status{font-size:12.5px;color:var(--cobalt);min-height:18px;margin-top:8px}

/* Scopes */
.scopes{display:flex;flex-direction:column;gap:14px}
.scope-block{background:#0a1317;border-radius:var(--r-xl);padding:14px 16px}
.scope-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:8px}
.scope-head h3{color:#fff}
.scope-sub{font-size:11.5px;color:var(--steel);font-weight:400;text-transform:none;letter-spacing:0}
.scope-block canvas{width:100%;display:block}

/* Output */
.readout{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 0 4px}
.confidence-ring{position:relative;width:130px;height:130px}
.confidence-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring-bg{fill:none;stroke:var(--surface);stroke-width:9}
.ring-fg{fill:none;stroke:var(--cobalt);stroke-width:9;stroke-linecap:round;stroke-dasharray:326.7;stroke-dashoffset:326.7;transition:stroke-dashoffset .2s var(--ease)}
.readout-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'Bricolage Grotesque',sans-serif;font-size:17px;font-weight:600;text-align:center;padding:0 14px}
.readout-conf{font-size:13px;color:var(--slate)}

/* Stage / cube */
.stage{background:var(--surface);border-radius:var(--r-xl);padding:18px;display:flex;flex-direction:column;align-items:center}
.cube-wrap{width:110px;height:110px;perspective:600px;margin:14px 0;transition:transform .3s var(--ease)}
.cube{width:100%;height:100%;position:relative;transform-style:preserve-3d;transform:rotateX(-20deg) rotateY(30deg);transition:transform .45s var(--ease)}
.face{position:absolute;width:110px;height:110px;background:var(--cobalt-soft);border:2px solid var(--cobalt);border-radius:10px;opacity:.92}
.f1{transform:translateZ(55px)}.f2{transform:rotateY(180deg) translateZ(55px)}
.f3{transform:rotateY(90deg) translateZ(55px)}.f4{transform:rotateY(-90deg) translateZ(55px)}
.f5{transform:rotateX(90deg) translateZ(55px)}.f6{transform:rotateX(-90deg) translateZ(55px)}
.cube-wrap.grabbed .face{background:rgba(224,112,32,.18);border-color:var(--orange)}
.stage-hint{text-align:center;margin:0}

/* Latency HUD */
.hud{display:flex;gap:10px}
.hud>div{flex:1;background:var(--surface);border-radius:var(--r-lg);padding:10px 6px;text-align:center}
.hud-num{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:20px;font-weight:600;color:var(--cobalt)}
.hud-cap{font-size:10.5px;color:var(--steel);letter-spacing:.5px;text-transform:uppercase}

.foot{max-width:var(--max-w);margin:8px auto 28px;padding:0 24px;font-size:12.5px;color:var(--steel)}
.foot a{color:var(--cobalt)}

@media (max-width: 1024px){
  .layout{grid-template-columns:1fr;max-width:680px}
}