@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;600;700;800&display=swap');

:root { color-scheme: dark; --ink: #f4f0e6; --muted: #a9b5ab; --bg: #12201d; --panel: #1b2d28; --line: #355049; --accent: #efc46b; --danger: #e98b78; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; color: var(--ink); background: radial-gradient(circle at 15% 10%, #29483d 0, transparent 32%), linear-gradient(135deg, #12201d, #0c1514 70%); font-family: Manrope, sans-serif; }
.shell { width: min(1080px, calc(100% - 40px)); min-height: calc(100vh - 70px); margin: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 8vw; align-items: center; }
.intro { animation: rise .7s ease both; }
.eyebrow, .step, .signal, .timer { font-family: 'DM Mono', monospace; letter-spacing: .08em; }
.eyebrow { color: var(--accent); font-size: 12px; }
h1 { max-width: 500px; margin: 18px 0; font-size: clamp(42px, 6vw, 78px); line-height: .98; letter-spacing: -.04em; }
.lede { max-width: 430px; color: var(--muted); font-size: 17px; line-height: 1.7; }
.signal { margin-top: 44px; color: var(--muted); font-size: 11px; text-transform: uppercase; }
.signal span { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: #87d4a2; box-shadow: 0 0 14px #87d4a2; }
.panel { padding: 34px; background: rgba(27,45,40,.94); border: 1px solid var(--line); border-radius: 8px; box-shadow: 18px 18px 0 rgba(0,0,0,.12); animation: rise .7s .1s ease both; }
.panel-heading { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 30px; }
.step { color: var(--accent); font-size: 12px; }
h2 { margin: 0 0 6px; font-size: 23px; }
.panel p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
label { display: block; margin: 19px 0 8px; font-size: 12px; color: var(--muted); }
input { width: 100%; padding: 14px 0; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--line); outline: 0; font: inherit; }
input:focus { border-color: var(--accent); }
.hint { margin: 18px 0 23px !important; font-size: 11px !important; }
button { cursor: pointer; font: 600 13px Manrope, sans-serif; }
.primary { width: 100%; padding: 15px 18px; border: 0; border-radius: 4px; color: #17231f; background: var(--accent); }
.primary:disabled { cursor: wait; opacity: .5; }
.text-button { margin-top: 18px; padding: 0; color: var(--muted); background: none; border: 0; text-decoration: underline; text-underline-offset: 4px; }
.danger { color: var(--danger); float: right; }
.timer { margin: 26px 0; color: var(--accent); font-size: 31px; }
.secret-button { width: 100%; padding: 15px; color: var(--ink); background: transparent; border: 1px solid var(--accent); border-radius: 4px; }
.secret-output { margin-top: 18px; padding: 17px; color: var(--accent); background: #101b18; border: 1px dashed var(--accent); font: 500 17px 'DM Mono', monospace; word-break: break-all; }
.utility-row { margin-top: 24px; min-height: 28px; }
.message { min-height: 20px; margin-top: 20px !important; color: var(--danger) !important; }
footer { padding: 0 20px 24px; text-align: center; color: #70847b; font-size: 11px; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (max-width: 760px) { .shell { grid-template-columns: 1fr; gap: 30px; padding: 56px 0 34px; } h1 { font-size: 48px; } .signal { margin-top: 25px; } .panel { padding: 26px; } }