:root{--bg:#05080b;--panel:#0a1117;--panel2:#0e1820;--line:#233542;--ink:#edf7f8;--muted:#79909b;--cyan:#4ee8d1;--blue:#42aaff;--amber:#ffbd4a;--red:#ff5d68;--shadow:0 38px 100px rgba(0,0,0,.55)}
*{box-sizing:border-box}html{min-height:100%;background:var(--bg)}body{min-height:100vh;margin:0;overflow-x:hidden;background:radial-gradient(circle at 50% 15%,rgba(36,91,112,.23),transparent 34%),linear-gradient(180deg,#070d12,var(--bg));color:var(--ink);font:16px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}button,input{font:inherit}.noise{pointer-events:none;position:fixed;inset:0;opacity:.18;background-image:linear-gradient(rgba(78,232,209,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(78,232,209,.035) 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(to bottom,#000,transparent 82%)}.shell{position:relative;z-index:1;width:min(1120px,92vw);min-height:100vh;margin:auto;display:flex;flex-direction:column}.top{height:88px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(78,232,209,.15)}.brand{display:flex;align-items:center;gap:.75rem}.mark{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--cyan);border-radius:10px;background:rgba(78,232,209,.08);color:var(--cyan);font-weight:950;letter-spacing:-.08em;box-shadow:inset 0 0 18px rgba(78,232,209,.08)}.brand b{display:block;font-size:.78rem;letter-spacing:.15em}.brand small{display:block;margin-top:.25rem;color:var(--muted);font-size:.58rem;letter-spacing:.13em;text-transform:uppercase}.seal{display:flex;align-items:center;gap:.55rem;color:var(--muted);font-size:.62rem;font-weight:850;letter-spacing:.12em;text-transform:uppercase}.seal:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 6px rgba(78,232,209,.08),0 0 18px var(--cyan);animation:blink 1.8s ease-in-out infinite}@keyframes blink{50%{opacity:.3;box-shadow:0 0 0 2px rgba(78,232,209,.04)}}
.gate{flex:1;display:grid;grid-template-columns:1.03fr .97fr;gap:clamp(2rem,8vw,8rem);align-items:center;padding:clamp(4rem,8vw,7rem) 0 3rem}.copy .overline{display:flex;align-items:center;gap:.65rem;color:var(--cyan);font-size:.67rem;font-weight:900;letter-spacing:.18em;text-transform:uppercase}.copy .overline:before{content:"";width:36px;height:1px;background:currentColor}.copy h1{margin:1rem 0 1.25rem;font-size:clamp(3.7rem,8vw,7.4rem);line-height:.82;letter-spacing:-.075em;font-weight:850}.copy h1 span{display:block;color:transparent;-webkit-text-stroke:1px var(--cyan)}.lead{max-width:620px;margin:0;color:#9bb0b8;font-size:clamp(1rem,1.55vw,1.18rem)}.protocol{display:grid;grid-template-columns:repeat(3,1fr);gap:.55rem;margin-top:2rem}.protocol div{padding:.8rem;border:1px solid var(--line);background:rgba(10,17,23,.55)}.protocol small{display:block;color:var(--muted);font-size:.55rem;font-weight:850;letter-spacing:.12em;text-transform:uppercase}.protocol b{display:block;margin-top:.25rem;color:#c8d7dc;font-size:.76rem}
.reader-wrap{position:relative;display:grid;place-items:center;min-height:520px}.reader-glow{position:absolute;width:420px;height:420px;border:1px solid rgba(78,232,209,.12);border-radius:50%;box-shadow:0 0 0 45px rgba(78,232,209,.025),0 0 0 90px rgba(78,232,209,.015);animation:turn 18s linear infinite}@keyframes turn{to{transform:rotate(360deg)}}.reader{position:relative;z-index:2;width:min(400px,100%);padding:1.1rem;border:1px solid #2b4452;border-radius:26px;background:linear-gradient(145deg,#101b23,#071017);box-shadow:var(--shadow),inset 0 1px rgba(255,255,255,.04)}.reader-head{display:flex;justify-content:space-between;gap:1rem;padding:.2rem .2rem 1rem;border-bottom:1px solid var(--line);font-size:.59rem;font-weight:850;letter-spacing:.14em;text-transform:uppercase}.reader-head span:first-child{color:var(--cyan)}.reader-head span:last-child{color:var(--muted)}.key-stage{position:relative;min-height:270px;display:grid;place-items:center}.rings{position:absolute;width:190px;height:190px;border:1px solid rgba(78,232,209,.26);border-radius:50%;animation:pulse 2.1s ease-out infinite}.rings:before,.rings:after{content:"";position:absolute;inset:22px;border:1px solid rgba(78,232,209,.22);border-radius:50%}.rings:after{inset:47px;background:rgba(78,232,209,.035)}@keyframes pulse{0%,100%{transform:scale(.9);opacity:.4}50%{transform:scale(1.07);opacity:1}}.dongle{position:relative;z-index:2;width:85px;height:145px;border:2px solid #426170;border-radius:18px;background:linear-gradient(155deg,#172833,#071017);box-shadow:0 20px 42px rgba(0,0,0,.65),inset 0 0 25px rgba(66,170,255,.06)}.dongle:before{content:"";position:absolute;width:43px;height:31px;left:19px;top:-26px;border:2px solid #526b76;border-bottom:0;border-radius:6px 6px 0 0;background:repeating-linear-gradient(90deg,#8fa0a8 0 7px,#263842 7px 12px)}.dongle:after{content:"";position:absolute;left:50%;top:48%;width:19px;height:19px;transform:translate(-50%,-50%);border:2px solid var(--cyan);border-radius:50%;box-shadow:0 0 18px rgba(78,232,209,.8)}.key-line{position:absolute;width:2px;height:56px;top:54%;left:50%;background:linear-gradient(var(--cyan),transparent);transform:translateX(-50%)}.reader-status{text-align:center}.reader-status b{display:block;color:var(--cyan);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase}.reader-status p{min-height:42px;margin:.5rem auto 1rem;max-width:310px;color:var(--muted);font-size:.75rem}.read-key{width:100%;min-height:48px;border:1px solid rgba(78,232,209,.48);border-radius:11px;background:rgba(78,232,209,.07);color:var(--cyan);font-weight:900;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}.read-key:hover,.read-key:focus-visible{outline:none;background:rgba(78,232,209,.13);border-color:var(--cyan)}.read-key:disabled{opacity:.55;cursor:wait}
.recovery{padding:2rem 0 3rem;border-top:1px solid rgba(78,232,209,.15)}.recovery-head{display:flex;align-items:end;justify-content:space-between;gap:2rem}.recovery h2{margin:0;font-size:clamp(1.45rem,3vw,2.2rem);letter-spacing:-.035em}.recovery h2 span{color:var(--amber)}.recovery p{max-width:560px;margin:.4rem 0 0;color:var(--muted);font-size:.75rem}.local-only{color:var(--cyan);font-size:.58rem;font-weight:900;letter-spacing:.13em;text-transform:uppercase}.phrase{display:grid;grid-template-columns:repeat(6,1fr);gap:.65rem;margin-top:1.2rem}.word{position:relative}.word span{position:absolute;left:.75rem;top:.62rem;color:#526773;font-size:.53rem;font-weight:900;letter-spacing:.1em}.word input{width:100%;height:68px;padding:1.15rem .75rem .3rem;border:1px solid var(--line);border-radius:11px;background:var(--panel);color:var(--ink);font-size:.9rem;outline:none}.word input:focus{border-color:var(--amber);box-shadow:0 0 0 3px rgba(255,189,74,.08)}.phrase-actions{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1rem}.phrase-note{color:#667b86;font-size:.64rem}.verify{min-height:43px;padding:0 1rem;border:1px solid rgba(255,189,74,.55);border-radius:9px;background:rgba(255,189,74,.08);color:var(--amber);font-size:.66rem;font-weight:900;letter-spacing:.11em;text-transform:uppercase;cursor:pointer}.verify:hover,.verify:focus-visible{outline:none;background:rgba(255,189,74,.14)}.verify:disabled{opacity:.55;cursor:wait}.feedback{display:none;margin-top:1rem;padding:.8rem 1rem;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:#9db0b8;font-size:.72rem}.feedback.show{display:block}.feedback.error{border-color:rgba(255,93,104,.45);color:#ff939b}.feedback.ok{border-color:rgba(78,232,209,.42);color:var(--cyan)}.foot{display:flex;justify-content:space-between;gap:1rem;padding:1rem 0 1.4rem;border-top:1px solid rgba(78,232,209,.08);color:#50636c;font-size:.57rem;letter-spacing:.1em;text-transform:uppercase}
@media(max-width:900px){.gate{grid-template-columns:1fr;padding-top:4rem}.reader-wrap{min-height:470px}.reader{max-width:430px}.phrase{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.top{height:72px}.brand small,.seal span{display:none}.gate{gap:2rem;padding:3.5rem 0 2.5rem}.copy h1{font-size:3.65rem}.protocol{grid-template-columns:1fr}.reader-wrap{min-height:420px}.reader-glow{width:270px;height:270px}.reader{padding:.9rem}.key-stage{min-height:240px}.recovery-head,.phrase-actions{align-items:flex-start;flex-direction:column}.phrase{grid-template-columns:repeat(2,1fr)}.verify{width:100%}.foot{flex-direction:column}}
@media(prefers-reduced-motion:reduce){.seal:before,.rings,.reader-glow{animation:none}}
.idle-timer{color:var(--amber);font-variant-numeric:tabular-nums}.idle-timer b{color:#ffe2a6}.timeout-warning{position:fixed;z-index:20;left:50%;bottom:18px;transform:translateX(-50%) translateY(20px);padding:.65rem .85rem;border:1px solid rgba(255,189,74,.55);border-radius:9px;background:rgba(8,15,20,.96);color:var(--amber);font-size:.66rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;opacity:0;pointer-events:none;transition:.18s}.timeout-warning.show{opacity:1;transform:translateX(-50%) translateY(0)}