:root { color-scheme: dark; --bg:#0d1019; --panel:#171c2b; --line:#30394f; --ink:#f4f1ea; --muted:#aeb7c7; --warm:#ff936b; --mint:#68d6b5; }
* { box-sizing: border-box; }
body { margin:0; min-height:100dvh; display:grid; place-items:center; padding:20px; background:radial-gradient(circle at 50% 0,#29385e,transparent 55%),var(--bg); color:var(--ink); font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.card { width:min(520px,100%); padding:30px; border:1px solid var(--line); border-radius:24px; background:linear-gradient(155deg,#1b2132,#121725); box-shadow:0 24px 70px rgba(0,0,0,.38); }
.back { color:var(--muted); text-decoration:none; font-size:13px; }
.mark { width:92px; height:92px; margin:34px 0 20px; display:grid; place-items:center; border-radius:24px; background:repeating-linear-gradient(110deg,#302346 0 14px,#202a43 14px 28px); color:#cbb8ff; font-size:30px; font-weight:900; letter-spacing:.1em; }
.eyebrow { color:var(--mint); font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
h1 { margin:8px 0 10px; font-size:42px; line-height:1.02; }
.lead,.status { color:var(--muted); }
.status { margin:24px 0 14px; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:#101522; }
.status.good { color:var(--mint); border-color:rgba(104,214,181,.45); }
.status.bad { color:#ffc1b2; border-color:rgba(255,147,107,.45); }
.stack { display:grid; gap:9px; margin-top:14px; }
label { color:var(--muted); font-size:13px; font-weight:700; }
input { width:100%; padding:12px 13px; border:1px solid var(--line); border-radius:11px; background:#0f1420; color:var(--ink); font:inherit; }
button { margin-top:5px; border:0; border-radius:11px; padding:12px 15px; color:#16100e; background:linear-gradient(180deg,#ffb07f,var(--warm)); font:inherit; font-weight:800; cursor:pointer; }
button.play { width:100%; margin-top:12px; }
button.link { color:var(--muted); background:transparent; font-weight:600; }
.hidden { display:none!important; }