@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,200;9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&family=JetBrains+Mono:wght@200;300;400;500;700&display=swap');
:root{--bg:rgb(128,128,128);--chrome:#0a0a0c;--s1:#0c0c10;--s2:#111118;--a:#00ffcc;--as:rgba(0,255,204,.06);--ag:rgba(0,255,204,.25);--a2:rgba(0,255,204,.12);--b:rgba(255,255,255,.06);--b2:rgba(255,255,255,.10);--t1:rgba(255,255,255,.92);--t2:rgba(255,255,255,.45);--t3:rgba(255,255,255,.18);--e:#ff453a;--f:'DM Sans',-apple-system,system-ui,sans-serif;--m:'JetBrains Mono','SF Mono',monospace;--ez:cubic-bezier(.22,.68,0,1.04);--ez-out:cubic-bezier(0,.55,.45,1);--ez-spring:cubic-bezier(.34,1.56,.64,1);--fade:420ms;--settle:550ms}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:200%}
html,body{height:100%;overflow:hidden}
body{background:var(--chrome);font-family:var(--f);color:var(--t1);-webkit-font-smoothing:antialiased;display:flex;align-items:center;justify-content:center}
#scr-test{background:var(--bg)}

/* ─── Crossfade screen system ─── */
.screen{position:fixed;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;visibility:hidden;transform:translateY(8px) scale(.995);transition:opacity var(--fade) var(--ez-out),visibility 0s var(--fade),transform var(--settle) var(--ez);pointer-events:none;will-change:opacity,transform}
.screen.active{opacity:1;visibility:visible;transform:translateY(0) scale(1);pointer-events:auto;transition:opacity var(--fade) var(--ez-out) 60ms,visibility 0s 0s,transform var(--settle) var(--ez) 60ms}
.mirrored{transform:scaleX(-1)}

/* ─── Settle / reveal keyframes ─── */
@keyframes settleUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes popIn{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes glowPulse{0%,100%{text-shadow:0 0 80px rgba(0,255,204,.15)}50%{text-shadow:0 0 120px rgba(0,255,204,.3),0 0 60px rgba(0,255,204,.1)}}
@keyframes fadeOnly{from{opacity:0}to{opacity:1}}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.25);opacity:1}}
@keyframes settleOut{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-20px)}}
@keyframes slideUp{from{opacity:0;transform:translateY(60px)}to{opacity:1;transform:translateY(0)}}

/* ═══ Landing Pages ═══ */
.landing-stack{display:flex;flex-direction:column;align-items:center;text-align:center;padding:clamp(24px,6vh,80px) 30px 40px;gap:clamp(14px,3vh,28px);max-width:600px;width:100%;position:relative;z-index:1}

/* Welcome screen */
#scr-welcome,#scr-role,#scr-pair-remote,#scr-pair-display{background:linear-gradient(170deg,#0c0c10 0%,#080810 50%,#0a0a12 100%);z-index:100;overflow-y:auto}
#scr-welcome::before,#scr-role::before,#scr-pair-remote::before,#scr-pair-display::before,#scr-cal::before{content:'';position:absolute;top:-40%;left:-20%;width:140%;height:100%;background:radial-gradient(ellipse at 50% 0%,rgba(0,255,204,.04) 0%,transparent 60%);pointer-events:none}

/* Moiré Gabor background */
.moire-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.moire-layer{position:absolute;inset:-50%;width:200%;height:200%;will-change:transform}
.moire-layer:first-child{background:repeating-linear-gradient(42deg,transparent,transparent 6px,rgba(255,255,255,.07) 6px,rgba(255,255,255,.07) 7px);animation:moireDrift1 28s linear infinite}
.moire-layer:nth-child(2){background:repeating-linear-gradient(-38deg,transparent,transparent 8px,rgba(0,255,204,.05) 8px,rgba(0,255,204,.05) 9px);animation:moireDrift2 34s linear infinite}
.moire-vignette{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,transparent 30%,rgba(10,10,12,.85) 70%,rgba(10,10,12,1) 100%);z-index:1}
@keyframes moireDrift1{from{transform:translate(0,0) rotate(0deg)}to{transform:translate(-3%,2%) rotate(4deg)}}
@keyframes moireDrift2{from{transform:translate(0,0) rotate(0deg)}to{transform:translate(2%,-3%) rotate(-5deg)}}
.landing-logo{width:clamp(80px,10vw,130px);height:clamp(50px,6vw,80px);object-fit:cover;object-position:center 30%;filter:invert(1);margin-bottom:calc(-1 * clamp(6px,1.5vh,14px));opacity:0;animation:settleUp var(--settle) var(--ez) .05s forwards}
.landing-brand{font-family:var(--m);font-size:clamp(.55rem,1.2vw,.85rem);letter-spacing:4px;text-transform:uppercase;color:var(--t3);opacity:0;animation:settleUp var(--settle) var(--ez) .1s forwards}
.landing-title{font-size:clamp(2rem,6vw,4.2rem);font-weight:200;line-height:1.15;letter-spacing:-.02em;opacity:0;animation:settleUp var(--settle) var(--ez) .2s forwards}
.landing-desc{font-size:clamp(.65rem,1.2vw,.9rem);color:var(--t2);max-width:440px;line-height:1.65;font-weight:300;opacity:0;animation:settleUp var(--settle) var(--ez) .35s forwards}
.landing-begin{padding:clamp(12px,2.5vw,18px) clamp(36px,8vw,56px);border-radius:100px;border:none;background:var(--a);color:#0a0a0c;font-family:var(--f);font-size:clamp(.8rem,1.5vw,1.05rem);font-weight:500;cursor:pointer;box-shadow:0 4px 24px var(--ag);transition:transform .15s var(--ez-spring),box-shadow .2s;-webkit-tap-highlight-color:transparent;touch-action:manipulation;opacity:0;animation:settleUp var(--settle) var(--ez) .5s forwards}
.landing-begin:active{transform:scale(.94) translateY(2px);box-shadow:0 1px 8px var(--ag)}
.landing-back{margin-top:auto;padding:10px 28px;border-radius:100px;border:1px solid var(--b);background:var(--chrome);color:var(--t3);font-family:var(--f);font-size:.7rem;cursor:pointer;letter-spacing:.5px;transition:border-color .3s,color .3s,background .3s,transform .15s var(--ez-spring);-webkit-tap-highlight-color:transparent;touch-action:manipulation;opacity:0;animation:fadeOnly var(--settle) var(--ez) .3s forwards}
.landing-back:hover{border-color:var(--a);color:var(--a);background:var(--as)}
.landing-back:active{transform:scale(.96)}

/* Role selection */
.role-header{display:flex;flex-direction:column;align-items:center;gap:16px}
.role-illustration{display:flex;align-items:center;gap:clamp(16px,4vw,28px);opacity:0;animation:settleUp var(--settle) var(--ez) .1s forwards}
.dev-icon{display:flex;flex-direction:column;align-items:center;gap:6px}
.dev-phone .dev-body{width:28px;height:48px;border:2px solid var(--t3);border-radius:6px;position:relative}
.dev-phone .dev-body::after{content:'';position:absolute;bottom:4px;left:50%;transform:translateX(-50%);width:10px;height:2px;border-radius:1px;background:var(--t3)}
.dev-monitor .dev-body{width:56px;height:40px;border:2px solid var(--t3);border-radius:4px;position:relative}
.dev-monitor .dev-body::after{content:'';position:absolute;bottom:-10px;left:50%;transform:translateX(-50%);width:20px;height:8px;border-bottom:2px solid var(--t3);border-left:2px solid var(--t3);border-right:2px solid var(--t3);border-radius:0 0 3px 3px}
.dev-label{font-family:var(--m);font-size:.4rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--t3)}
.signal-dots{display:flex;gap:6px;align-items:center}
.signal-dots span{width:4px;height:4px;border-radius:50%;background:var(--a);opacity:.4;animation:pulse 1.8s ease-in-out infinite}
.signal-dots span:nth-child(2){animation-delay:.3s}
.signal-dots span:nth-child(3){animation-delay:.6s}
@keyframes pulse{0%,100%{opacity:.4;transform:scale(1)}50%{opacity:1;transform:scale(1.3)}}
.role-prompt{font-size:clamp(1.2rem,3.5vw,2.2rem);font-weight:200;opacity:0;animation:settleUp var(--settle) var(--ez) .2s forwards}
.role-cards{display:flex;gap:clamp(12px,3vw,24px);width:100%;opacity:0;animation:settleUp var(--settle) var(--ez) .3s forwards}
.role-card{flex:1;padding:clamp(18px,4vw,30px) clamp(12px,2vw,20px);border-radius:20px;border:2px solid var(--b2);background:var(--chrome);cursor:pointer;text-align:center;transition:all .25s var(--ez),transform .15s var(--ez-spring);-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.role-card:hover{border-color:var(--a);background:var(--as)}
.role-card:active{transform:scale(.96)}
.role-card.disabled{opacity:.3;pointer-events:none}
.role-card-title{font-size:clamp(.9rem,2.5vw,1.4rem);font-weight:500;margin-bottom:4px}
.role-card-desc{font-size:clamp(.55rem,1.1vw,.78rem);color:var(--t2);line-height:1.5}
.role-card-disabled{display:none;font-size:clamp(.5rem,1vw,.65rem);color:var(--e);margin-top:8px;font-family:var(--m);letter-spacing:.5px}
.role-card.disabled .role-card-disabled{display:block}
.role-card-rec{font-family:var(--m);font-size:clamp(.42rem,.85vw,.58rem);color:var(--a);opacity:.7;margin-top:8px;letter-spacing:.5px}
.role-hint{font-size:clamp(.6rem,1.1vw,.8rem);color:var(--t2);font-weight:300;line-height:1.5;max-width:360px;text-align:center}

/* Pairing screens */
.pair-context{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;opacity:0;animation:settleUp var(--settle) var(--ez) .1s forwards}
.pair-context-title{font-size:clamp(1.2rem,3.5vw,2.2rem);font-weight:200;color:var(--t1)}
.pair-context-desc{font-size:clamp(.6rem,1.1vw,.85rem);color:var(--t2);max-width:420px;line-height:1.5;font-weight:300}
#scr-pair-display,#scr-pair-remote{justify-content:flex-start}
#scr-pair-display .landing-stack{padding-top:clamp(20px,4vh,48px);gap:clamp(10px,2vh,20px);max-width:960px}
#scr-pair-remote .landing-stack{padding-top:clamp(20px,4vh,48px);gap:clamp(10px,2vh,20px)}
.pair-columns{display:flex;flex-direction:column;align-items:center;width:100%;gap:0}
.pair-code-entry{margin-top:clamp(8px,2vh,20px)}
.pair-section{width:100%;display:flex;flex-direction:column;align-items:center;gap:12px}
.pair-secondary{opacity:1}
.pair-label{font-family:var(--m);font-size:clamp(.6rem,1.2vw,.85rem);letter-spacing:3px;text-transform:uppercase;color:var(--t3)}
.pair-label-sm{font-size:clamp(.7rem,1.2vw,.9rem);color:var(--t2);font-weight:300}
.pair-code{font-family:var(--m);font-size:clamp(2rem,7vw,3.8rem);font-weight:700;color:var(--a);letter-spacing:clamp(6px,1.5vw,14px);text-shadow:0 0 60px rgba(0,255,204,.2);animation:popIn .5s var(--ez-spring) forwards;white-space:nowrap}
.pair-instruction{font-size:clamp(.62rem,1.1vw,.85rem);color:var(--t2);max-width:360px;line-height:1.5}
.pair-url{color:var(--a);font-family:var(--m);font-size:.9em;white-space:nowrap}
.pair-status{font-family:var(--m);font-size:clamp(.5rem,.9vw,.7rem);color:var(--t3);letter-spacing:1px;display:flex;align-items:center;gap:6px}
.pair-status .sd{display:inline-block;width:6px;height:6px;border-radius:50%;vertical-align:middle}
.pair-status .sd-wait{background:rgba(255,255,255,.4);animation:breathe 1.8s ease-in-out infinite}
.pair-status .sd-ok{background:var(--a);box-shadow:0 0 8px var(--ag)}
.pair-status .sd-er{background:var(--e)}
.pair-divider{width:80%;max-width:300px;display:flex;align-items:center;gap:16px;color:var(--t2);font-size:.65rem;text-transform:uppercase;letter-spacing:2px}
.pair-divider::before,.pair-divider::after{content:'';flex:1;height:1px;background:var(--b)}
.pair-input-row{display:flex;gap:12px;align-items:center}
.pair-input{padding:clamp(10px,2vw,16px) clamp(14px,3vw,24px);border-radius:14px;border:2px solid var(--b2);background:var(--chrome);color:var(--t1);font-family:var(--m);font-size:clamp(.9rem,2.5vw,1.4rem);letter-spacing:4px;text-transform:uppercase;text-align:center;width:clamp(100px,28vw,170px);outline:0;transition:border-color .3s var(--ez),box-shadow .3s var(--ez)}
.pair-input:focus{border-color:var(--a);box-shadow:0 0 20px rgba(0,255,204,.08)}
.pair-input-lg{font-size:clamp(1.3rem,4vw,2.2rem);padding:clamp(12px,2.5vw,20px);width:clamp(140px,35vw,220px);letter-spacing:8px}
.code-boxes{display:flex;gap:clamp(8px,1.5vw,14px);justify-content:center}
.code-box{width:clamp(48px,10vw,72px);height:clamp(56px,12vw,84px);border-radius:16px;border:2px solid var(--b2);background:var(--chrome);color:var(--t1);font-family:var(--m);font-size:clamp(1.6rem,4vw,2.6rem);font-weight:700;text-align:center;text-transform:uppercase;outline:0;caret-color:var(--a);transition:border-color .3s var(--ez),box-shadow .3s var(--ez),background .3s var(--ez)}
.code-box:focus{border-color:var(--a);box-shadow:0 0 24px rgba(0,255,204,.12);background:var(--chrome)}
.code-box.filled{border-color:rgba(255,255,255,.2);color:var(--a)}
.code-box.err{border-color:var(--e);box-shadow:0 0 12px rgba(255,69,58,.15)}
.pair-connect-btn{padding:clamp(10px,2vw,16px) clamp(20px,4vw,32px);border-radius:100px;border:none;background:#fff;color:#0a0a0c;font-family:var(--f);font-size:clamp(.7rem,1.3vw,.95rem);font-weight:500;cursor:pointer;white-space:nowrap;transition:transform .15s var(--ez-spring),background .2s,box-shadow .2s;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.pair-connect-btn:active{transform:scale(.94);background:var(--a);box-shadow:0 0 16px var(--ag)}
.pair-gen-btn{padding:12px 32px;border-radius:100px;border:1px solid var(--b2);background:var(--chrome);color:var(--t1);font-family:var(--f);font-size:clamp(.75rem,1.3vw,.95rem);cursor:pointer;transition:border-color .3s,color .3s,background .3s,transform .15s var(--ez-spring);-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.pair-gen-btn:hover{border-color:var(--a);color:var(--a);background:var(--as)}
.pair-gen-btn:active{transform:scale(.96)}
#display-qrcode{background:#fff;padding:10px;border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.4)}
#display-code-area{gap:10px}
.qr-skip{background:var(--chrome);color:var(--t3);border:1px solid var(--b);padding:10px 28px;border-radius:100px;cursor:pointer;font-family:var(--f);font-size:.7rem;letter-spacing:.5px;transition:border-color .3s var(--ez),color .3s var(--ez),background .3s var(--ez),transform .15s var(--ez-spring);-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.qr-skip:hover{border-color:var(--a);color:var(--a);background:var(--as)}
.qr-skip:active{transform:scale(.96)}

/* Mobile: stack role cards */
@media(max-width:600px){
  .role-cards{flex-direction:column}
  .pair-code{font-size:clamp(1.8rem,10vw,3rem);letter-spacing:clamp(6px,1.5vw,10px)}
  .pair-input-lg{font-size:clamp(1.1rem,6vw,1.8rem);letter-spacing:6px}
  .landing-title{font-size:clamp(1.6rem,8vw,3rem)}
}
@media(min-width:768px){
  .pair-columns{flex-direction:row;align-items:stretch;gap:0}
  .pair-columns .pair-section{flex:1;min-width:0}
  .pair-columns .pair-code-entry{margin-top:0}
  .pair-columns .pair-divider{width:auto;max-width:none;flex-direction:column;padding:0 clamp(16px,3vw,32px);margin:0}
  .pair-columns .pair-divider::before,.pair-columns .pair-divider::after{width:1px;height:100%;flex:1}
  .pair-columns .pair-code{font-size:clamp(1.8rem,4vw,3rem);letter-spacing:clamp(4px,1vw,10px)}
  .pair-columns .code-box{width:clamp(44px,7vw,64px);height:clamp(52px,9vw,76px);font-size:clamp(1.4rem,3vw,2.2rem)}
  .pair-columns .pair-instruction{max-width:320px}
}
@media(min-width:1024px){
  #scr-welcome .landing-stack{max-width:900px}
  #scr-welcome .landing-title{font-size:clamp(3rem,5vw,5rem)}
  #scr-welcome .landing-desc{max-width:600px}
}

/* ═══ Calibration — full screen ═══ */
#scr-cal{background:linear-gradient(170deg,#0c0c10 0%,#080810 50%,#0a0a12 100%);z-index:50}
.cal-box{padding:clamp(1.2rem,3vw,2.5rem) clamp(2rem,5vw,5rem);text-align:center;width:100%;height:100%;display:flex;flex-direction:column;background:transparent;border:none;border-radius:0;box-shadow:none;backdrop-filter:none;position:relative;z-index:1;overflow:hidden}

/* Calibration step crossfade */
.cal-step{position:absolute;inset:0;top:40px;bottom:0;display:flex;flex-direction:column;padding:inherit;text-align:center;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .35s var(--ez-out),visibility 0s .35s,transform .45s var(--ez);pointer-events:none}
.cal-step.active{position:relative;inset:auto;opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;transition:opacity .35s var(--ez-out) 50ms,visibility 0s 0s,transform .45s var(--ez) 50ms;flex:1;min-height:0}
.dots{display:flex;gap:8px;justify-content:center;margin-bottom:clamp(8px,1.5vh,16px);flex-shrink:0}
.dot{width:28px;height:3px;border-radius:2px;background:rgba(255,255,255,.08);transition:width .4s var(--ez-spring),background .4s var(--ez),opacity .4s}.dot.done{background:var(--a);opacity:.4}.dot.cur{background:var(--a);width:36px;box-shadow:0 0 8px var(--ag)}
button{border:none;border-radius:100px;font-family:var(--f);font-weight:400;cursor:pointer;letter-spacing:.3px;-webkit-tap-highlight-color:transparent;transition:all .2s var(--ez)}
.cal-fn{padding:clamp(8px,1.5vh,16px) 0;display:flex;justify-content:center;gap:12px;flex-shrink:0}

/* Near-screen steps (card, mirror) — full screen */
.sn-n{font-family:var(--m);font-size:clamp(.7rem,1.2vw,1rem);letter-spacing:3px;text-transform:uppercase;color:var(--t3);margin-bottom:6px;flex-shrink:0}
.h2-n{font-weight:200;font-size:clamp(1.8rem,4vw,3rem);margin:0 0 6px;flex-shrink:0}
.sd-n{font-size:clamp(1rem,2vw,1.4rem);color:var(--t2);line-height:1.5;max-width:600px;margin:0 auto;flex-shrink:0}
/* Card sandbox — centred */
#card-sandbox{width:100%;flex:1;min-height:140px;background:rgba(255,255,255,.02);border-radius:20px;overflow:hidden;display:flex;align-items:center;justify-content:center;border:1px solid var(--b);margin:clamp(8px,1.5vh,16px) 0;position:relative;transition:border-color .3s}
#card-shape{background:linear-gradient(135deg,#f0f0f0 0%,#e8e8e8 50%,#ddd 100%);border-radius:10px;border:1px solid rgba(0,0,0,.12);box-shadow:0 6px 20px rgba(0,0,0,.3);transition:width .08s var(--ez),height .08s var(--ez)}
input[type=range]{-webkit-appearance:none;width:min(100%,500px);height:4px;background:rgba(255,255,255,.08);border-radius:2px;outline:0;margin:10px 0 4px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:var(--a);cursor:pointer;box-shadow:0 0 12px var(--ag);border:2px solid rgba(0,0,0,.15);transition:transform .2s var(--ez-spring),box-shadow .2s}
input[type=range]:active::-webkit-slider-thumb{transform:scale(1.2);box-shadow:0 0 20px var(--ag)}
.sl{display:flex;justify-content:space-between;width:min(100%,500px);margin:0 auto;font-family:var(--m);font-size:.55rem;color:var(--t2);text-transform:uppercase}.sl .v{color:var(--t1)}
.mirror-choice{display:flex;gap:clamp(14px,3vw,28px);justify-content:center}
.mirror-btn{padding:clamp(16px,3vw,28px) clamp(32px,5vw,56px);border-radius:20px;font-size:clamp(1.2rem,2.5vw,2rem);font-weight:500;cursor:pointer;border:2px solid var(--b2);background:var(--chrome);color:var(--t1);transition:all .25s var(--ez),transform .15s var(--ez-spring)}
.mirror-btn:hover{border-color:var(--a);background:var(--as);color:var(--a);box-shadow:0 0 30px rgba(0,255,204,.08)}
.mirror-btn:active{transform:scale(.96);border-color:var(--a);background:var(--as);color:var(--a)}
.bp-n{background:#fff;color:var(--chrome);padding:clamp(12px,2vw,18px) clamp(32px,5vw,48px);font-size:clamp(.95rem,1.8vw,1.3rem);font-weight:500;transition:all .25s var(--ez),transform .15s var(--ez-spring);box-shadow:0 2px 16px rgba(255,255,255,.08)}.bp-n:hover{background:var(--a);box-shadow:0 4px 30px var(--ag)}.bp-n:active{transform:scale(.96)}
.bb-n{background:var(--chrome);color:var(--t2);border:1px solid var(--b);padding:clamp(10px,1.5vw,16px) clamp(24px,4vw,40px);font-size:clamp(.85rem,1.5vw,1.1rem);transition:all .25s var(--ez),transform .15s var(--ez-spring)}.bb-n:hover{border-color:var(--b2)}.bb-n:active{transform:scale(.96)}

/* Far-distance steps (luminance, distance, confirm) */
.sn-l{font-family:var(--m);font-size:clamp(1.2rem,3vw,2.2rem);letter-spacing:3px;text-transform:uppercase;color:var(--t3);margin-bottom:6px;flex-shrink:0}
.h2-l{font-weight:200;font-size:clamp(3.6rem,10vw,7rem);margin:0 0 8px;letter-spacing:-.02em;flex-shrink:0}
.sd-l{font-size:clamp(1.6rem,4.2vw,3rem);color:var(--t2);line-height:1.35;max-width:min(94vw,36ch);margin:0 auto;font-weight:300;flex-shrink:0;text-align:left;text-wrap:balance}
.dist-input{padding:clamp(16px,4vw,30px) clamp(20px,5vw,40px);border-radius:20px;border:2px solid var(--b2);background:var(--chrome);color:var(--t1);font-family:var(--m);font-size:clamp(2.5rem,7vw,5rem);outline:0;width:clamp(140px,30vw,280px);text-align:center;transition:border-color .3s var(--ez),box-shadow .3s var(--ez)}.dist-input:focus{border-color:var(--a);box-shadow:0 0 30px rgba(0,255,204,.08)}
.dist-select{padding:clamp(16px,4vw,30px);border-radius:20px;border:2px solid var(--b2);background:var(--chrome);color:var(--t1);font-family:var(--m);font-size:clamp(1.6rem,4.5vw,3.2rem);outline:0;cursor:pointer;transition:border-color .3s var(--ez)}.dist-select option{background:#1a1a22;color:#fff}
.bp-l{background:#fff;color:var(--chrome);padding:clamp(14px,3vw,24px) clamp(32px,6vw,56px);font-size:clamp(1.3rem,3vw,2.2rem);font-weight:500;transition:all .25s var(--ez),transform .15s var(--ez-spring);box-shadow:0 2px 16px rgba(255,255,255,.08)}.bp-l:hover{background:var(--a);box-shadow:0 4px 30px var(--ag)}.bp-l:active{transform:scale(.96)}
.bb-l{background:var(--chrome);color:var(--t2);border:1px solid var(--b);padding:clamp(12px,2.5vw,20px) clamp(24px,5vw,44px);font-size:clamp(1.1rem,2.5vw,1.8rem);transition:all .25s var(--ez),transform .15s var(--ez-spring)}.bb-l:hover{border-color:var(--b2)}.bb-l:active{transform:scale(.96)}
.bs-l{background:var(--a);color:var(--chrome);padding:clamp(16px,3.5vw,28px) clamp(40px,8vw,72px);font-size:clamp(1.5rem,3.5vw,2.6rem);font-weight:600;letter-spacing:.5px;box-shadow:0 4px 40px var(--ag);transition:all .25s var(--ez),transform .15s var(--ez-spring)}.bs-l:hover{box-shadow:0 8px 60px var(--ag),0 0 0 1px rgba(0,255,204,.15)}.bs-l:active{transform:scale(.97)}
.cal-em-l{color:var(--e);font-family:var(--m);font-size:clamp(1rem,2.2vw,1.6rem);min-height:1em;margin-top:8px;transition:opacity .3s}
.cal-summary{text-align:left;margin:0 auto;line-height:clamp(2.4,4vw,3.2)}
.cal-summary .l{font-size:clamp(1.8rem,4vw,3.2rem);color:var(--t2);margin-right:clamp(12px,2vw,24px);font-weight:300}
.cal-summary .v{font-family:var(--m);font-size:clamp(1.8rem,4vw,3.2rem);font-weight:500;color:var(--a);transition:color .3s}
.phone-hint-l{padding:clamp(16px,2vw,28px);border-radius:16px;background:var(--as);border:1px solid rgba(0,255,204,.08);font-family:var(--m);font-size:clamp(1rem,2vw,1.5rem);color:var(--t2);letter-spacing:2px;text-align:center;text-transform:uppercase;line-height:1.4;max-width:min(90vw,640px);margin-left:auto;margin-right:auto}
.phone-hint-far{font-size:clamp(2rem,5vw,3.6rem);letter-spacing:3px;padding:clamp(20px,3vw,40px)}
.phone-connected .sd-n,.phone-connected .sd-l{display:none}
.phone-connected .cal-fn{display:none}
.phone-connected .mirror-wrap{display:none}
.phone-connected .dist-wrap{display:none}
.phone-connected .dist-hint{display:none}
.phone-connected .phone-hint-far{display:block}
.phone-connected .cal-summary{display:none}
.cal-phone-review{display:none}
.phone-connected .cal-phone-review{display:block;margin-top:clamp(16px,3vw,32px)}
.ppd-warn{margin-top:14px;padding:12px 18px;border-radius:12px;background:rgba(255,179,0,.1);border:1px solid rgba(255,179,0,.25);color:#ffb300;font-family:var(--m);font-size:clamp(1rem,2vw,1.4rem);text-align:center;line-height:1.5}

/* ═══ Test ═══ */
.display-frame{position:relative;display:flex;flex-direction:column;align-items:center;gap:18px;opacity:0;animation:settleUp var(--settle) var(--ez) .1s forwards}
canvas#stimCanvas{width:560px;height:560px;background:var(--bg);border-radius:12px;box-shadow:0 0 0 1px rgba(0,0,0,.06),0 20px 60px rgba(0,0,0,.1);transition:box-shadow .4s}
.hud{display:flex;align-items:center;gap:14px;opacity:.3;transition:opacity .5s var(--ez)}.hud:hover{opacity:.5}
.hud-mode{font-family:var(--m);font-size:.55rem;letter-spacing:2px;text-transform:uppercase;color:var(--t2)}
.progress-track{width:120px;height:2px;background:rgba(255,255,255,.05);border-radius:1px;overflow:hidden}
.progress-fill{height:100%;width:0%;background:var(--a);border-radius:1px;transition:width .5s var(--ez);box-shadow:0 0 8px var(--ag)}
.hud-progress{font-family:var(--m);font-size:.55rem;color:var(--t3);transition:color .3s}
.mirror-flip{transform:scaleX(-1)!important}

/* ═══ Tutorial — clean vertical stack, massive fonts for 10ft+ ═══ */
.tut-overlay{position:fixed;inset:0;background:rgba(8,8,12,.97);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:200;text-align:center;padding:clamp(16px,3vw,40px);gap:clamp(10px,2vh,24px);opacity:0;animation:fadeIn .5s var(--ez-out) forwards}
.tut-overlay.hiding{animation:fadeOut .35s var(--ez-out) forwards}
@keyframes fadeOut{from{opacity:1}to{opacity:0}}
.tut-step-label{font-family:var(--m);font-size:clamp(1.2rem,3vw,2.2rem);letter-spacing:4px;text-transform:uppercase;color:var(--t3)}
.tut-orient-name{font-size:clamp(3rem,8vw,6rem);font-weight:200;color:var(--t1);line-height:1.1;transition:opacity .3s var(--ez);opacity:0;animation:settleUp .45s var(--ez) .1s forwards}
.tut-plate-area{display:flex;align-items:center;justify-content:center;gap:clamp(24px,5vw,60px)}
.tut-gabor{border-radius:16px;border:2px solid rgba(255,255,255,.08);box-shadow:0 12px 40px rgba(0,0,0,.4);display:block;width:clamp(200px,35vw,400px);height:clamp(200px,35vw,400px);transition:border-color .4s}
.tut-arrow-col{display:flex;flex-direction:column;align-items:center;gap:clamp(6px,1vh,14px)}
.tut-arrow-box{font-size:clamp(5rem,12vw,10rem);display:flex;align-items:center;justify-content:center;color:var(--e);font-weight:600;line-height:1}
.tut-footer{display:flex;flex-direction:column;align-items:center;gap:clamp(6px,1vh,12px)}
.tut-dots{display:flex;gap:10px;justify-content:center}
.tut-dot{width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.08);transition:background .4s var(--ez),box-shadow .4s var(--ez),transform .35s var(--ez-spring)}.tut-dot.active{background:var(--a);box-shadow:0 0 10px var(--ag);transform:scale(1.2)}
.tut-hint{font-family:var(--m);font-size:clamp(1rem,2.5vw,1.8rem);color:var(--t3);letter-spacing:1px}

/* ═══ Pre-test questionnaire overlay (display) ═══ */
.pretest-overlay{position:fixed;inset:0;background:rgba(8,8,12,.97);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:200;text-align:center;padding:clamp(16px,3vw,40px);gap:clamp(20px,4vh,40px);opacity:0;animation:fadeIn .5s var(--ez-out) forwards}
.pretest-overlay.hiding{animation:fadeOut .35s var(--ez-out) forwards}
.pretest-label{font-family:var(--m);font-size:clamp(2rem,5vw,4rem);letter-spacing:4px;text-transform:uppercase;color:var(--t3)}
.pretest-group{display:flex;flex-direction:column;align-items:center;gap:clamp(8px,1.5vh,16px)}
.pretest-q{font-size:clamp(2rem,5vw,3.6rem);font-weight:200;color:var(--t2)}
.pretest-opts{display:flex;gap:clamp(12px,2vw,24px)}
.pretest-btn{padding:clamp(16px,3vw,28px) clamp(28px,5vw,56px);border-radius:20px;font-size:clamp(1.4rem,3vw,2.4rem);font-weight:500;cursor:pointer;border:2px solid var(--b2);background:var(--chrome);color:var(--t1);transition:all .25s var(--ez),transform .15s var(--ez-spring)}
.pretest-btn:hover{border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.04)}
.pretest-btn:active{transform:scale(.96)}
.pretest-btn.selected{border-color:var(--a);background:var(--as);color:var(--a);box-shadow:0 0 24px rgba(0,255,204,.12)}
.pretest-go{padding:clamp(16px,3.5vw,28px) clamp(40px,8vw,72px);border-radius:100px;background:var(--a);color:var(--chrome);font-size:clamp(1.5rem,3.5vw,2.6rem);font-weight:600;letter-spacing:.5px;box-shadow:0 4px 40px var(--ag);transition:all .25s var(--ez),transform .15s var(--ez-spring)}
.pretest-go:disabled{opacity:.25;pointer-events:none}
.pretest-go:hover{box-shadow:0 8px 60px var(--ag)}
.pretest-go:active{transform:scale(.97)}
.pretest-phone-prompt{font-family:var(--m);font-size:clamp(2rem,5vw,3.6rem);color:var(--t2);letter-spacing:3px;text-transform:uppercase;text-align:center;line-height:1.4;padding:clamp(20px,3vw,40px);max-width:min(90vw,640px)}

/* ═══ Results — Premium Full Screen with staggered reveals ═══ */
#scr-results{background:linear-gradient(170deg,var(--s1) 0%,#080810 100%);z-index:200;text-align:center;padding:clamp(20px,4vw,40px);overflow-y:auto;overflow-x:hidden}
#result-content{display:flex;flex-direction:column;align-items:center;max-width:1800px;margin:0 auto}
#scr-results.results-boost #result-content{font-size:200%}
.result-eyebrow{font-family:var(--m);font-size:clamp(.8rem,1.5vw,1.2rem);letter-spacing:6px;text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:8px;opacity:0;animation:settleUp .5s var(--ez) .15s forwards}
.auc-value{font-family:var(--m);font-size:clamp(5rem,14vw,11rem);font-weight:700;color:var(--a);line-height:.85;text-shadow:0 0 100px rgba(0,255,204,.2);opacity:0;animation:popIn .6s var(--ez-spring) .3s forwards,glowPulse 4s ease-in-out 1s infinite}
.rank-label{font-size:clamp(1.2rem,3vw,2.2rem);font-weight:200;text-transform:uppercase;letter-spacing:clamp(4px,1vw,12px);margin-top:10px;color:rgba(255,255,255,.55);opacity:0;animation:settleUp .5s var(--ez) .5s forwards}
.result-detail{font-family:var(--m);font-size:clamp(.7rem,1.2vw,1rem);color:rgba(255,255,255,.4);margin-top:8px;letter-spacing:.5px;opacity:0;animation:settleUp .5s var(--ez) .65s forwards}
#csf-plot{margin-top:20px;border-radius:10px;display:block;max-width:1440px;width:100%;height:auto;box-shadow:0 10px 40px rgba(0,0,0,.3);opacity:0;animation:settleUp .6s var(--ez) .8s forwards}
.restart-btn{padding:clamp(10px,2vw,16px) clamp(28px,4vw,44px);border-radius:100px;border:1px solid var(--b);background:transparent;color:var(--t3);font-family:var(--f);font-size:clamp(.75rem,1.2vw,1rem);cursor:pointer;letter-spacing:.5px;transition:all .3s var(--ez),transform .15s var(--ez-spring)}
.restart-btn:hover{border-color:var(--a);color:var(--a);box-shadow:0 0 20px var(--ag)}
.restart-btn:active{transform:scale(.96)}
#gear-btn{position:fixed;bottom:20px;right:20px;cursor:pointer;opacity:.08;font-size:20px;z-index:400;transition:opacity .4s var(--ez)}#gear-btn:hover{opacity:.3}

/* ═══ CSF Formula Card ═══ */
.csf-formula-card{width:100%;max-width:1440px;margin-top:20px;padding:clamp(16px,3vw,28px) clamp(20px,4vw,36px);border-radius:16px;border:1px solid var(--b2);background:rgba(255,255,255,.02);text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}
.csf-formula-heading{font-family:var(--m);font-size:clamp(.6rem,1.1vw,.85rem);letter-spacing:3px;text-transform:uppercase;color:var(--t3)}
.csf-formula-math{font-family:var(--m);font-size:clamp(.85rem,1.5vw,1.15rem);color:var(--a);line-height:1.6;letter-spacing:.3px;word-break:break-all}
.csf-formula-peak{font-family:var(--m);font-size:clamp(.7rem,1.2vw,.95rem);color:var(--t2);letter-spacing:.5px}
.csf-formula-copy{padding:clamp(8px,1.5vw,12px) clamp(20px,3vw,32px);border-radius:100px;border:1px solid var(--b);background:transparent;color:var(--t3);font-family:var(--f);font-size:clamp(.65rem,1vw,.85rem);cursor:pointer;letter-spacing:.5px;transition:all .3s var(--ez),transform .15s var(--ez-spring)}
.csf-formula-copy:hover{border-color:var(--a);color:var(--a);box-shadow:0 0 20px var(--ag)}
.csf-formula-copy:active{transform:scale(.96)}
.explorer-cta-divider{width:60px;height:1px;background:var(--b2);margin:6px 0}
.explorer-cta-heading{font-family:var(--f);font-size:clamp(1rem,2vw,1.4rem);font-weight:500;color:var(--t1);letter-spacing:-.01em}
.explorer-cta-body{font-size:clamp(.7rem,1.1vw,.88rem);color:var(--t2);line-height:1.65;max-width:560px;font-weight:300}
.explorer-cta-note{font-family:var(--m);font-size:clamp(.6rem,.9vw,.75rem);color:var(--a);opacity:.7;letter-spacing:.5px}
.csf-formula-explore{display:inline-block;padding:clamp(12px,2.2vw,16px) clamp(28px,5vw,48px);border-radius:100px;border:2px solid rgba(0,255,204,.35);background:rgba(0,255,204,.08);color:var(--a);font-family:var(--f);font-size:clamp(.78rem,1.2vw,.95rem);font-weight:600;text-decoration:none;letter-spacing:.5px;transition:all .3s var(--ez),transform .15s var(--ez-spring)}
.csf-formula-explore:hover{background:rgba(0,255,204,.16);border-color:var(--a);box-shadow:0 0 30px var(--ag)}
.csf-formula-explore:active{transform:scale(.96)}