@import "https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Rajdhani:wght@300;400;500;600;700&display=swap";:root{--clr-bg:#080808;--clr-surface:#111;--clr-surface2:#1a1a1a;--clr-border:#ff640033;--clr-border-hi:#ff640099;--clr-accent:#ff6400;--clr-accent2:#ff8c00;--clr-danger:#f22;--clr-success:#2d6;--clr-text:#f0f0f0;--clr-dim:#777;--clr-white:#fff;--font-mono:"Share Tech Mono", ui-monospace, Consolas, monospace;--font-display:"Rajdhani", "Segoe UI", sans-serif;--sp-xs:4px;--sp-sm:8px;--sp-md:16px;--sp-lg:24px;--sp-xl:32px;--sp-2xl:48px;--glow-accent:0 0 12px #ff640073, 0 0 32px #ff640026;--glow-sm:0 0 6px #ff640080;--glow-danger:0 0 12px #ff222273;--ease:cubic-bezier(.4, 0, .2, 1);--dur:.2s}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{background:var(--clr-bg);height:100%;color:var(--clr-text);font-family:var(--font-display);-webkit-font-smoothing:antialiased;font-size:16px;line-height:1.5;overflow:hidden}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--clr-surface)}::-webkit-scrollbar-thumb{background:var(--clr-accent);border-radius:3px}#app{width:100vw;height:100vh;position:relative;overflow:hidden}.screen{background:var(--clr-bg);opacity:0;width:100%;height:100%;transition:opacity .4s var(--ease);display:none;position:absolute;inset:0;overflow-y:auto}.screen.active{opacity:1;flex-direction:column;display:flex}.bg-grid{pointer-events:none;z-index:0;background-image:linear-gradient(#ff64000a 1px,#0000 1px),linear-gradient(90deg,#ff64000a 1px,#0000 1px);background-size:40px 40px;position:fixed;inset:0}.bg-grid:after{content:"";pointer-events:none;background:repeating-linear-gradient(0deg,#0000,#0000 2px,#0000001f 2px 4px);position:fixed;inset:0}.t-mono{font-family:var(--font-mono)}.t-accent{color:var(--clr-accent)}.t-dim{color:var(--clr-dim)}.t-danger{color:var(--clr-danger)}.t-white{color:var(--clr-white)}.panel{background:var(--clr-surface);border:1px solid var(--clr-border);border-radius:2px;position:relative}.panel:before{content:"";pointer-events:none;border-radius:inherit;background:linear-gradient(135deg,#ff64000a 0%,#0000 60%);position:absolute;inset:0}.topbar{padding:0 var(--sp-xl);border-bottom:1px solid var(--clr-border);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:10;background:#080808f2;flex-shrink:0;justify-content:space-between;align-items:center;height:60px;display:flex}.topbar-logo{align-items:center;gap:var(--sp-md);font-family:var(--font-mono);color:var(--clr-white);letter-spacing:2px;font-size:18px;display:flex}.topbar-logo-icon{border:2px solid var(--clr-accent);width:28px;height:28px;color:var(--clr-accent);box-shadow:var(--glow-sm);justify-content:center;align-items:center;font-size:14px;display:flex}.topbar-meta{font-family:var(--font-mono);color:var(--clr-dim);gap:var(--sp-xl);font-size:12px;display:flex}.topbar-meta span{color:var(--clr-accent)}.btn{align-items:center;gap:var(--sp-sm);font-family:var(--font-display);letter-spacing:2px;text-transform:uppercase;cursor:pointer;transition:all var(--dur) var(--ease);border:none;border-radius:1px;padding:14px 28px;font-size:15px;font-weight:600;display:inline-flex;position:relative;overflow:hidden}.btn:before{content:"";opacity:0;transition:opacity var(--dur) var(--ease);background:#ffffff0f;position:absolute;inset:0}.btn:hover:before{opacity:1}.btn-primary{background:var(--clr-accent);color:#000;box-shadow:var(--glow-accent)}.btn-primary:hover{background:var(--clr-accent2);transform:translateY(-1px);box-shadow:0 0 20px #ff6400b3,0 0 48px #ff640040}.btn-ghost{color:var(--clr-accent);border:1px solid var(--clr-border-hi);background:0 0}.btn-ghost:hover{box-shadow:var(--glow-sm);background:#ff640014}.btn-answer{background:var(--clr-surface2);color:var(--clr-text);border:1px solid var(--clr-border);font-family:var(--font-mono);letter-spacing:3px;text-transform:none;padding:16px 24px;font-size:16px}.btn-answer:hover{border-color:var(--clr-accent);color:var(--clr-accent);box-shadow:var(--glow-sm)}.btn-answer.correct{border-color:var(--clr-success);color:var(--clr-success);box-shadow:0 0 12px #2d66}.btn-answer.wrong{border-color:var(--clr-danger);color:var(--clr-danger);box-shadow:var(--glow-danger);animation:.3s shake}.input-field{background:var(--clr-surface2);border:1px solid var(--clr-border);width:100%;color:var(--clr-text);font-family:var(--font-mono);transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);border-radius:1px;outline:none;padding:14px 16px;font-size:14px}.input-field:focus{border-color:var(--clr-accent);box-shadow:0 0 0 1px #ff64004d}.input-field::placeholder{color:var(--clr-dim)}.otp-row{gap:var(--sp-sm);justify-content:center;display:flex}.otp-digit{background:var(--clr-surface2);border:1px solid var(--clr-border);width:56px;height:64px;color:var(--clr-white);font-family:var(--font-mono);text-align:center;caret-color:var(--clr-accent);transition:border-color var(--dur), box-shadow var(--dur);border-radius:1px;outline:none;font-size:28px}.otp-digit:focus{border-color:var(--clr-accent);box-shadow:var(--glow-sm)}.badge{font-family:var(--font-mono);letter-spacing:1.5px;text-transform:uppercase;border-radius:1px;align-items:center;gap:6px;padding:4px 10px;font-size:11px;display:inline-flex}.badge-accent{color:var(--clr-accent);background:#ff64001f;border:1px solid #ff64004d}.badge-dim{color:var(--clr-dim);background:#ffffff0d;border:1px solid #ffffff14}.progress-wrap{background:var(--clr-surface2);border-radius:3px;height:6px;overflow:hidden}.progress-fill{background:linear-gradient(90deg, var(--clr-accent), var(--clr-accent2));height:100%;transition:width .8s var(--ease);border-radius:3px;box-shadow:0 0 8px #ff640099}.divider{align-items:center;gap:var(--sp-md);color:var(--clr-dim);font-family:var(--font-mono);letter-spacing:1px;font-size:11px;display:flex}.divider:before,.divider:after{content:"";background:var(--clr-border);flex:1;height:1px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes spin-reverse{0%{transform:rotate(360deg)}to{transform:rotate(0)}}@keyframes pulse-glow{0%,to{opacity:1;box-shadow:var(--glow-accent)}50%{opacity:.7;box-shadow:none}}@keyframes scan{0%{opacity:0;transform:translateY(-100%)}10%{opacity:1}90%{opacity:1}to{opacity:0;transform:translateY(100%)}}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}@keyframes fadeUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-4px)}40%{transform:translate(4px)}60%{transform:translate(-3px)}80%{transform:translate(3px)}}@keyframes glitch{0%{clip-path:inset(0 0 98%);transform:translate(-2px)}25%{clip-path:inset(30% 0 50%);transform:translate(2px)}50%{clip-path:inset(60% 0 20%);transform:translate(-1px)}to{clip-path:inset(0);transform:translate(0)}}@keyframes countdownPulse{0%,to{color:var(--clr-accent)}50%{color:var(--clr-danger)}}@keyframes victory-glow{0%,to{text-shadow:0 0 20px #ff6400cc,0 0 60px #ff64004d}50%{text-shadow:0 0 40px #ff8c00,0 0 100px #ff640080}}.screen.entering{animation:fadeUp .4s var(--ease) forwards}.gate-feedback{font-family:var(--font-mono);text-align:center;min-height:16px;font-size:12px}.gate-feedback.success{color:var(--clr-success)}.gate-feedback.error{color:var(--clr-danger)}@media (width<=900px){.topbar{height:52px;padding:0 16px}.topbar-logo{font-size:14px}.topbar-meta{font-size:10px}.gate-center{gap:14px;padding:16px}.gate-title{font-size:36px}.gate-card{width:100%;max-width:420px}.l3-layout{grid-template-columns:1fr;padding:12px 14px}.l3-sidebar{display:none}.l3-title{font-size:36px}.l4-layout{grid-template-columns:1fr;padding:12px 14px}.l4-sidebar{display:none}.l4-title{font-size:36px}.l4-node-grid{grid-template-columns:repeat(2,140px);gap:14px}.l4-node-inner{width:130px;height:130px;font-size:44px}.l5-layout{grid-template-columns:1fr}.l5-sidebar{display:none}.l5-title{font-size:36px}.l5-main{padding:16px 18px}.l5-hex-value{font-size:56px}}.l1-layout{z-index:1;flex:1;grid-template-columns:1fr 400px;gap:24px;padding:24px 32px;display:grid;position:relative;overflow:hidden}.l1-terminal-wrap{flex-direction:column;gap:20px;min-width:0;display:flex}.l1-header{flex-direction:column;gap:12px;display:flex}.l1-title{font-family:var(--font-display);letter-spacing:-1px;color:var(--clr-white);text-shadow:0 0 40px #ff640033;font-size:52px;font-weight:700;line-height:1}.l1-terminal{flex-direction:column;flex:1;min-height:400px;display:flex;overflow:hidden}.l1-term-header{border-bottom:1px solid var(--clr-border);background:#0006;align-items:center;gap:12px;padding:10px 16px;display:flex}.l1-term-dots{gap:6px;display:flex}.l1-term-title{text-align:center;font-family:var(--font-mono);color:var(--clr-dim);flex:1;font-size:12px}.l1-lang-wrap select{appearance:auto;cursor:pointer;color:var(--clr-accent);min-width:100px;width:auto!important}.l1-code-area{flex:1;padding:20px 0;overflow-y:auto}.l1-line{font-family:var(--font-mono);align-items:baseline;gap:0;padding:2px 0 2px 16px;font-size:13px;line-height:1.8;display:flex}.l1-line:hover{background:#ff64000a}.l1-line-active{border-left:2px solid var(--clr-accent);background:#ff640012}.l1-line-blank{background:#ff64000d}.ln{color:var(--clr-dim);-webkit-user-select:none;user-select:none;flex-shrink:0;width:28px;font-size:11px}.kw{color:#e06c75}.var{color:#e5c07b}.fn{color:#61afef}.str{color:#98c379}.num{color:#d19a66}.op{color:var(--clr-text)}.cursor-blink{color:var(--clr-accent);letter-spacing:3px;vertical-align:middle;font-size:18px;font-weight:700;animation:1s step-end infinite blink;display:inline-block}.l1-input-area{border-top:1px solid var(--clr-border);background:#0000004d;flex-direction:column;gap:12px;padding:20px;display:flex}.l1-input-row{flex-direction:column;gap:10px;display:flex}.l1-input-group{font-family:var(--font-mono);align-items:center;gap:12px;display:flex}.l1-inline-input{text-align:center;letter-spacing:3px;flex-shrink:0;width:80px;padding:8px 12px;font-size:18px}.l1-execute-btn{align-self:flex-start}.l1-feedback{font-family:var(--font-mono);min-height:20px;font-size:13px}.l1-feedback.success{color:var(--clr-success)}.l1-feedback.error{color:var(--clr-danger)}.l1-briefing{flex-direction:column;align-self:start;gap:20px;height:fit-content;padding:28px;display:flex;position:sticky;top:0}.l1-brief-header{flex-direction:column;gap:10px;display:flex}.l1-brief-title{color:var(--clr-white);letter-spacing:1px;font-size:28px;font-weight:700;line-height:1.1}.l1-brief-body{color:var(--clr-dim);font-size:14px;line-height:1.7}.l1-hint-box{background:#0006;padding:16px}.l1-hint-tag{letter-spacing:2px;margin-bottom:10px;font-size:12px}.l1-hint-text{color:var(--clr-dim);font-size:13px;line-height:1.7}@media (width<=600px){html,body{overflow:auto}#app{height:auto;min-height:100dvh;overflow:auto}.screen{min-height:100dvh;position:relative;overflow:visible}.topbar{height:48px;padding:0 12px}.topbar-meta{display:none}.otp-row{gap:6px}.otp-digit{width:40px!important;height:48px!important;font-size:18px!important}.btn{padding:10px 16px;font-size:12px}.gate-center{gap:12px;padding:12px}.gate-title{font-size:28px}.gate-code{letter-spacing:6px;font-size:28px}.gate-card{max-width:100%}.gate-footer{flex-wrap:wrap;gap:12px;font-size:9px}.l1-layout{overflow-y:auto;grid-template-columns:1fr!important;padding:10px!important}.l1-briefing{display:none}.l2-layout{grid-template-columns:1fr!important;padding:10px!important}.l2-sidebar{display:none}.l3-grid{grid-template-columns:repeat(4,1fr);gap:6px;padding:12px}.l3-title{font-size:28px}.l4-node-grid{grid-template-columns:repeat(2,1fr);gap:10px}.l4-node-inner{width:100%;height:120px;font-size:40px}.l5-hex-value{letter-spacing:4px;font-size:44px}.l5-input-row{flex-direction:column}.l5-dec-input{width:100%!important}.l5-submit-btn{justify-content:center;width:100%}.vic-stats{grid-template-columns:1fr 1fr!important}}