:root{--ink:#e9ffff;--muted:#8fa3a2;--aqua:#76eee9;--yellow:#e7c568;--danger:#ff765f;--bg:#070909;--line:#263938}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:Manrope,Arial,sans-serif}.gate{min-height:100svh;display:grid;place-items:center;overflow:hidden;position:relative;background:radial-gradient(ellipse 90% 62% at 50% 52%,#132323 0%,#091010 44%,#050606 79%)}.noise{position:absolute;inset:0;opacity:.18;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E")}.panel{position:relative;text-align:center;width:min(610px,calc(100% - 48px));padding:52px 16px}.emblem{height:154px;width:124px;margin:0 auto 30px;position:relative;filter:drop-shadow(0 0 26px rgba(110,240,235,.16))}.shackle{position:absolute;left:30px;top:0;width:64px;height:80px;border:13px solid #899291;border-bottom:0;border-radius:40px 40px 0 0;background:linear-gradient(90deg,#656e6d,#c7d0cc 48%,#65706e)}.lock-body{position:absolute;left:11px;top:61px;width:102px;height:86px;border:1px solid #719694;border-radius:13px;background:linear-gradient(116deg,#1a3231,#507270 50%,#17302f);box-shadow:inset 0 1px 0 #a2c6c1,0 12px 29px #000}.lock-body:before{content:'';position:absolute;left:43px;top:25px;width:16px;height:27px;border-radius:10px 10px 5px 5px;background:#d3e1dc}.lock-body span{position:absolute;left:50px;top:47px;border-left:2px solid #1c2726;height:20px}.eyebrow{font:500 10px/1 'DM Mono',monospace;letter-spacing:.27em;color:var(--aqua);margin:0 0 15px}h1{font-size:clamp(32px,6vw,48px);font-weight:500;letter-spacing:-.055em;margin:0}.instruction{margin:12px 0 38px;color:var(--muted);font-size:14px}.code-shell{height:66px;max-width:510px;margin:0 auto 22px;position:relative;cursor:text}.code-shell input{opacity:0;position:absolute;inset:0;width:100%;height:100%;z-index:1;cursor:text}.slots{position:absolute;inset:0;display:grid;grid-template-columns:repeat(22,minmax(0,1fr));gap:6px;align-items:center}.slot{height:40px;border-bottom:1px solid #6b7775;position:relative;transition:border-color .18s,box-shadow .18s}.slot.filled:after{content:'';width:12px;height:12px;border-radius:50%;background:var(--yellow);position:absolute;left:50%;top:14px;transform:translateX(-50%);box-shadow:0 0 10px rgba(231,197,104,.4)}.slot.current{border-bottom-color:var(--yellow);box-shadow:0 1px 0 var(--yellow)}.ready .slot{border-bottom-color:#b0c1bd}.ready .slot.filled:after{background:var(--yellow)}button{border:1px solid var(--aqua);background:transparent;color:var(--ink);font:500 12px 'DM Mono',monospace;letter-spacing:.12em;text-transform:uppercase;padding:13px 21px;min-width:185px;cursor:pointer;transition:background .18s,color .18s,opacity .18s}button:hover:not(:disabled){background:var(--aqua);color:#071111}button:disabled{opacity:.3;cursor:not-allowed}.status{min-height:22px;margin:18px auto 0;color:var(--muted);font:12px/1.5 'DM Mono',monospace}.checking .slot.filled:after{background:var(--aqua);animation:pulse .7s ease-in-out infinite alternate}.error{animation:shake .35s linear}.error .slot{border-bottom-color:var(--danger)}.error .slot.filled:after{background:var(--danger)}.unlocked .shackle{animation:unlock .52s cubic-bezier(.2,.9,.3,1) forwards;transform-origin:36px 79px}.unlocked .lock-body{box-shadow:inset 0 1px 0 #b9fffa,0 0 50px rgba(110,240,235,.54)}.unlocked .slot.filled:after{background:var(--aqua)}.sr-only{position:absolute;width:1px;height:1px;clip:rect(0,0,0,0);overflow:hidden;white-space:nowrap}@keyframes pulse{to{box-shadow:0 0 18px var(--aqua);transform:translateX(-50%) scale(1.2)}}@keyframes shake{25%,75%{transform:translateX(-10px)}50%{transform:translateX(10px)}}@keyframes unlock{to{transform:translate(-24px,-20px) rotate(-33deg)}}@media(max-width:520px){.panel{width:calc(100% - 24px);padding-top:36px}.slots{gap:3px}.slot{height:34px}.slot.filled:after{width:9px;height:9px;top:14px}h1{font-size:34px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}