:root { --ink:#172021; --paper:#f7f5ef; --muted:#667271; --line:#ced2c8; --accent:#1e6057; --accent-ink:#fff; }
* { box-sizing:border-box; }
body { min-width:320px; margin:0; color:var(--ink); background:var(--paper); font-family:Georgia, "Times New Roman", serif; }
.game-shell { width:min(760px, calc(100% - 40px)); margin:0 auto; padding:64px 0 40px; }
.game-header { padding-bottom:24px; border-bottom:1px solid var(--line); }
.eyebrow, .game-meta, .adjustments, .help { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; }
.eyebrow { margin:0 0 10px; color:var(--accent); font-size:.76rem; letter-spacing:.11em; text-transform:uppercase; }
h1 { margin:0; font-family:"Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif; font-size:clamp(3rem, 10vw, 5.4rem); font-weight:600; letter-spacing:-.035em; line-height:.9; }
.subtitle { max-width:none; margin:18px 0 0; color:var(--muted); font-family:"Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif; font-size:1.1rem; line-height:1.5; white-space:nowrap; }
.game { padding-top:26px; }
.game-meta { display:flex; justify-content:space-between; gap:16px; color:var(--muted); font-size:.78rem; }
.word-stage { display:grid; min-height:260px; place-items:center; border-bottom:1px solid var(--line); }
.pair { font-size:clamp(5rem, 18vw, 10rem); font-weight:500; line-height:.8; white-space:nowrap; user-select:none; }
.pair span { display:inline-block; }
.adjustments { display:grid; grid-template-columns:1fr auto 1fr; gap:12px; align-items:center; padding-top:24px; }
.adjustments output { min-width:100px; color:var(--muted); text-align:center; font-size:.84rem; }
button { cursor:pointer; border:1px solid var(--line); color:var(--ink); background:transparent; padding:14px 16px; font:500 .95rem/1 Georgia, "Times New Roman", serif; }
button:hover { background:#e9ebe3; }
button:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.submit { width:100%; margin-top:12px; border-color:var(--accent); color:var(--accent-ink); background:var(--accent); }
.submit:hover { background:#164a43; }
.feedback { min-height:1.5em; margin:18px 0 0; text-align:center; font-size:1.05rem; }
.feedback--good { color:var(--accent); }
.help { margin:28px 0 0; color:var(--muted); text-align:center; font-size:.76rem; line-height:1.5; }
@media (max-width:520px) { .game-shell { width:min(100% - 28px, 760px); padding-top:40px; } .adjustments { gap:8px; } button { padding:12px 8px; } }
@media (max-width:520px) { .subtitle { white-space:normal; } }