:root{--void: #0B0E14;--panel: rgba(18, 22, 32, .62);--panel-border: rgba(255, 122, 69, .18);--ink: #E8E6E1;--ink-muted: #7A8290;--ember: #FF7A45;--teal: #5EEAD4;--violet: #A78BFA}*{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%;background:var(--void);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;overflow:hidden;-webkit-font-smoothing:antialiased}#canvas-wrap{position:fixed;inset:0}canvas{display:block;width:100%;height:100%}#grain{position:fixed;inset:0;pointer-events:none;opacity:.05;z-index:5;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");mix-blend-mode:overlay}#vignette{position:fixed;inset:0;pointer-events:none;z-index:6;background:radial-gradient(ellipse at 50% 50%,#0000 40%,#00000059 90%,#0009)}.lockup{position:fixed;top:24px;left:26px;z-index:10;pointer-events:none}.lockup h1{font-family:Georgia,serif;font-size:20px;font-weight:500}.lockup p{font-size:12px;color:var(--ink-muted);margin-top:3px;max-width:260px;line-height:1.4}#readout{position:fixed;bottom:22px;left:22px;z-index:10;background:var(--panel);border:1px solid var(--panel-border);backdrop-filter:blur(14px);border-radius:10px;padding:12px 15px;font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:11px;line-height:1.85;color:var(--ink-muted);min-width:200px}#readout .row{display:flex;justify-content:space-between;gap:18px}#readout .row span:last-child{color:var(--ink)}#readout .hd{color:var(--ember);font-size:10px;margin-bottom:6px;letter-spacing:.06em}#gallery{position:fixed;top:96px;right:26px;z-index:10;display:flex;flex-direction:column;gap:6px}.snap{width:32px;height:32px;border-radius:6px;cursor:pointer;border:1px solid rgba(255,255,255,.12);transition:transform .15s,border-color .15s}.snap:hover{transform:scale(1.2);border-color:var(--ember)}#controls{position:fixed;bottom:22px;right:22px;z-index:10;display:flex;flex-direction:column;gap:8px;align-items:flex-end}.hint{font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:10.5px;color:var(--ink-muted);background:var(--panel);border:1px solid var(--panel-border);border-radius:8px;padding:7px 10px;backdrop-filter:blur(14px);white-space:nowrap}#controls button{font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:11.5px;padding:8px 14px;min-width:120px;text-align:center;background:var(--panel);border:1px solid var(--panel-border);color:var(--ink);border-radius:8px;cursor:pointer;backdrop-filter:blur(14px);transition:border-color .2s,color .2s,background .2s}#controls button:hover:not(:disabled){border-color:var(--ember);color:var(--ember);background:#ff7a4514}#controls button:disabled{opacity:.4;cursor:not-allowed}#err{position:fixed;top:22px;right:22px;z-index:20;font-family:ui-monospace,monospace;font-size:11.5px;color:#ff8a8a;background:#280a0a8c;border:1px solid rgba(255,100,100,.35);border-radius:10px;padding:10px 14px;max-width:320px;backdrop-filter:blur(10px);display:none}#gate{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:32px;text-align:center;background:radial-gradient(ellipse at 50% 35%,#171d2e,#0b0e14 65%),#0b0e14;transition:opacity .7s ease}#gate.hidden{opacity:0;pointer-events:none}.gate-mark{position:relative;width:92px;height:92px;margin-bottom:4px}.mark-ring{position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(255,122,69,.6);box-shadow:0 0 40px #ff7a4559,inset 0 0 30px #ff7a4533;animation:spin 14s linear infinite}.mark-ring:after{content:"";position:absolute;top:-3px;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:var(--ember);box-shadow:0 0 12px var(--ember)}.mark-core{position:absolute;inset:22px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#5eead4,#0b0e14 70%);box-shadow:0 0 30px #5eead466;animation:pulse 3.4s ease-in-out infinite}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{0%,to{transform:scale(1);opacity:.95}50%{transform:scale(1.06);opacity:1}}#gate h1{font-family:Georgia,serif;font-size:clamp(30px,4.4vw,44px);font-weight:500}#gate .tagline{font-size:15px;color:var(--ember);letter-spacing:.02em;margin-top:-6px}#gate .sub{max-width:460px;font-size:13.5px;line-height:1.65;color:var(--ink-muted);margin-top:4px}.btn-row{display:flex;gap:12px;margin-top:10px;flex-wrap:wrap;justify-content:center}button{font-family:inherit;font-size:13.5px;background:transparent;color:var(--ink);border:1px solid rgba(255,255,255,.2);border-radius:10px;padding:12px 22px;cursor:pointer;transition:border-color .2s,color .2s,background .2s,transform .15s;display:inline-flex;align-items:center;gap:8px}button:hover:not(:disabled){border-color:var(--ember);color:var(--ember);background:#ff7a450f}button:active:not(:disabled){transform:translateY(1px)}button:disabled{opacity:.35;cursor:not-allowed}button.primary{border-color:var(--ember);color:var(--ember);box-shadow:0 0 24px #ff7a452e}button.primary:hover:not(:disabled){background:#ff7a451f;box-shadow:0 0 32px #ff7a4559}button.primary .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ember);box-shadow:0 0 10px var(--ember);animation:blink 1.8s ease-in-out infinite}@keyframes blink{0%,to{opacity:1}50%{opacity:.35}}.loading{font-family:ui-monospace,monospace;font-size:11.5px;color:var(--ink-muted);letter-spacing:.05em}.footer{position:absolute;bottom:24px;font-family:ui-monospace,monospace;font-size:10.5px;color:var(--ink-muted);letter-spacing:.04em}@media(max-width:640px){#gate{gap:14px;padding:22px}.btn-row{flex-direction:column;width:100%;max-width:320px}button{justify-content:center;width:100%}.lockup{top:14px;left:14px}.lockup h1{font-size:16px}#readout{font-size:10px;min-width:160px;padding:9px 12px}#controls button{min-width:100px;font-size:10.5px;padding:6px 10px}}