*{box-sizing:border-box}
:root{--bg:#050608;--panel:#0b0d11;--text:#d5d7dc;--muted:#666a73;--red:#b51f31;--blue:#27769d}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:Inter,Arial,sans-serif}
body{background:
radial-gradient(circle at 20% 45%,rgba(120,18,30,.16),transparent 28%),
radial-gradient(circle at 80% 45%,rgba(21,76,103,.17),transparent 28%),
linear-gradient(145deg,#030406,#0a0b0f 48%,#030406)}
.grain{position:fixed;inset:0;pointer-events:none;opacity:.055;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E")}
main{width:min(1280px,94vw);margin:auto;min-height:100vh;padding:24px 0 18px}
header{height:48px;display:flex;align-items:center;border-bottom:1px solid #202329;color:#686c74;font:11px ui-monospace,monospace;letter-spacing:.16em}
.mark{font-size:16px;color:#aeb1b8;font-weight:900}.nav{margin:auto}.status{color:#68776f}.status:first-letter{color:#4d9c70}
.heading{text-align:center;padding:70px 10px 42px}
.kicker{font:11px ui-monospace,monospace;letter-spacing:.35em;color:#555a63}
h1{font:900 clamp(54px,9vw,105px)/.85 Arial,sans-serif;letter-spacing:-.075em;margin:13px 0 20px;color:#e6e7e9}
h1 i{font-style:normal;color:#555a62;font-weight:300}
.heading p{margin:0;color:#777c85;font:15px Georgia,serif;font-style:italic}
.interface{display:grid;grid-template-columns:1fr 410px 1fr;gap:22px;align-items:center}
.choice{border:0;background:none;padding:0;cursor:pointer;transition:.18s;filter:brightness(.86) saturate(.85) drop-shadow(0 20px 30px #000)}
.choice img{width:100%;display:block}
.choice:hover{transform:translateY(-7px);filter:brightness(1) saturate(1) drop-shadow(0 25px 35px #000)}
.choice:active{transform:translateY(4px)}
.oracle{position:relative;min-height:300px;background:rgba(9,11,15,.92);border:1px solid #292d34;padding:42px 35px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;box-shadow:inset 0 0 60px rgba(0,0,0,.7),0 18px 45px rgba(0,0,0,.5)}
.corner{position:absolute;width:22px;height:22px;border-color:#51565f}.c1{left:-1px;top:-1px;border-left:1px solid;border-top:1px solid}.c2{right:-1px;bottom:-1px;border-right:1px solid;border-bottom:1px solid}
.micro{font:10px ui-monospace,monospace;letter-spacing:.2em;color:#555b64;position:absolute;top:22px}.micro span{color:#8b333d}
#message{font:700 clamp(24px,2.6vw,35px)/1.2 Georgia,serif;color:#c9ccd1;min-height:90px;display:grid;place-items:center}
#message.flash{animation:flash .35s ease}
@keyframes flash{0%{opacity:.2;filter:blur(3px)}100%{opacity:1;filter:none}}
.line{width:70px;height:1px;background:#3a3d44;margin:14px 0}
.hint{font:10px ui-monospace,monospace;letter-spacing:.12em;color:#4f535b}
.actions{text-align:center;margin:28px 0}
.actions button{background:#0b0d11;border:1px solid #343840;color:#8d929b;padding:12px 22px;font:10px ui-monospace,monospace;letter-spacing:.16em;cursor:pointer}
.actions button:hover{border-color:#777d87;color:#d4d7dc}
footer{display:flex;justify-content:space-between;border-top:1px solid #1e2126;padding-top:16px;color:#464b53;font:9px ui-monospace,monospace;letter-spacing:.12em}
@media(max-width:900px){.interface{grid-template-columns:1fr 1fr}.oracle{grid-column:1/-1;grid-row:1;max-width:650px;width:100%;justify-self:center}.choice{max-width:520px;justify-self:center}.heading{padding-top:48px}}
@media(max-width:580px){main{width:92vw}.nav{display:none}.heading{padding:48px 0 25px}h1{font-size:58px}.interface{grid-template-columns:1fr;gap:0}.oracle{grid-row:auto;order:3;margin:8px 0 10px;min-height:220px}.choice{width:100%;max-width:440px}.actions{margin:18px 0}footer{flex-direction:column;gap:8px;text-align:center}}