:root { --t-accent:#dd9d68; --arch-ink:#eee9df; --arch-muted:#a9a59d; --arch-canyon:#161c21; --arch-line:#353d40; --arch-gold:#f2bd74; }
html[data-theme="light"] { --t-accent:#955423; --arch-ink:#242320; --arch-muted:#666762; --arch-canyon:#e9e6df; --arch-line:#bdbab2; --arch-gold:#a65e28; }
* { box-sizing:border-box; }
body { min-width:320px; max-width:1040px; margin:0 auto; padding:0 24px 72px; color:var(--t-ink); background:var(--t-bg); font-family:var(--cab-sans, Manrope, system-ui, sans-serif); }
button,input { font:inherit; }
button { cursor:pointer; }
.site-header { height:70px; display:flex; align-items:center; justify-content:space-between; gap:16px; border-bottom:1px solid var(--t-line); }
.wordmark { display:flex; align-items:center; gap:9px; color:var(--t-ink); text-decoration:none; font-weight:800; letter-spacing:-.03em; }
.wordmark b { color:var(--t-muted); font-family:var(--cab-mono, monospace); font-size:12px; text-transform:uppercase; letter-spacing:.12em; }
.arch-mark { display:inline-grid; place-items:center; width:30px; height:30px; border:2px solid var(--t-accent); border-bottom:0; border-radius:16px 16px 2px 2px; color:var(--t-accent); font-size:25px; line-height:1; transform:translateY(3px); }
.header-actions { display:flex; align-items:center; gap:10px; }
.quiet-button,.account-button { border:1px solid var(--t-line); background:transparent; color:var(--t-ink); border-radius:4px; padding:8px 12px; font-size:13px; font-weight:700; }
.quiet-button:hover,.account-button:hover { border-color:var(--t-accent); }
.game-shell { display:block; width:100%; max-width:none; margin:0; padding-top:30px; }
.topline { display:flex; justify-content:space-between; align-items:end; gap:16px; margin-bottom:28px; }
.eyebrow { color:var(--t-accent); font-family:var(--cab-mono, monospace); text-transform:uppercase; font-size:11px; letter-spacing:.16em; font-weight:700; margin:0 0 7px; }
h1,h2,p { margin-top:0; }
h1 { font-size:clamp(34px,5vw,55px); line-height:1; letter-spacing:-.07em; margin:0; }
.date { display:inline-block; margin-left:16px; color:var(--t-muted); font-family:var(--cab-mono, monospace); font-size:13px; font-weight:500; letter-spacing:.03em; vertical-align:middle; }
.score { text-align:right; white-space:nowrap; }
.score small { display:block; color:var(--t-muted); font-family:var(--cab-mono, monospace); text-transform:uppercase; font-size:10px; letter-spacing:.12em; }
.score strong { font-size:29px; letter-spacing:-.06em; font-variant-numeric:tabular-nums; }
.score span { font-size:13px; color:var(--t-muted); }
.score .streak { margin-top:3px; color:var(--t-accent); }
.mode-toggle { display:flex; gap:4px; margin-bottom:12px; }
.mode-toggle button { border:1px solid var(--t-line); border-radius:3px; padding:6px 13px; background:transparent; color:var(--t-muted); font-size:12px; font-weight:700; }
.mode-toggle button.active { border-color:var(--t-accent); color:var(--t-accent); }
.mode-toggle button:last-child { margin-left:auto; }
.mode-toggle button[hidden] { display:none; }
.archive[hidden],.round-track[hidden] { display:none; }
.round-track { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin-bottom:16px; }
.round-track button { background:var(--t-panel); color:var(--t-muted); border:1px solid var(--t-line); border-radius:4px; min-width:0; padding:9px 2px; font:700 12px var(--cab-mono, monospace); cursor:default; }
.round-track button.active { background:var(--t-accent); color:var(--t-bg); border-color:var(--t-accent); }
.round-track button.done { color:var(--t-accent); border-color:var(--t-accent); }
.round-track button:last-child { font-size:16px; }
.play-board { background:var(--t-panel); border:1px solid var(--t-line); border-radius:7px; padding:27px 30px 24px; }
.board-heading { display:flex; justify-content:space-between; align-items:start; gap:16px; }
.board-heading h2 { margin:0; font-size:clamp(22px,3vw,32px); letter-spacing:-.045em; }
.attempts { font:600 11px var(--cab-mono, monospace); text-transform:uppercase; letter-spacing:.08em; color:var(--t-muted); white-space:nowrap; }
.board-intro { color:var(--t-muted); margin:9px 0 15px; font-size:14px; }
.arch-scene { position:relative; min-height:250px; border-radius:4px; overflow:hidden; background:linear-gradient(170deg,var(--t-panel-deep) 0%,var(--arch-canyon) 100%); border:1px solid var(--arch-line); }
.arch-scene::before { content:""; position:absolute; z-index:0; left:-10%; bottom:-80px; width:120%; height:140px; background:var(--t-panel); border-top:1px solid var(--arch-line); transform:rotate(-3deg); }
.arch-scene svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.arch-scene .cable { stroke:var(--t-accent); stroke-width:2.5; fill:none; stroke-linecap:round; opacity:.77; stroke-dasharray:4 6; }
.arch-scene .cable.gold { stroke:var(--arch-gold); stroke-width:4; stroke-dasharray:none; filter:drop-shadow(0 0 7px var(--arch-gold)); }
.arch-scene .pylon { fill:var(--t-panel); stroke:var(--t-accent); stroke-width:2; }
.arch-scene .node { fill:var(--t-accent); }
.arch-scene .keystone { fill:var(--t-panel); stroke:var(--arch-gold); stroke-width:3; }
.arch-scene .anchor-label { fill:var(--arch-ink); font:700 16px var(--cab-sans, sans-serif); text-anchor:middle; paint-order:stroke; stroke:var(--arch-canyon); stroke-width:5px; }
.arch-scene .link-label { fill:var(--arch-gold); font:700 18px var(--cab-sans, sans-serif); text-anchor:middle; paint-order:stroke; stroke:var(--arch-canyon); stroke-width:5px; }
.latest { margin-top:15px; display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center; padding:12px 15px; background:var(--t-panel-deep); border:1px solid var(--t-line); border-radius:4px; }
.latest[hidden] { display:none; }
.latest strong { font-size:17px; }
.latest small { display:block; color:var(--t-muted); font:600 11px var(--cab-mono, monospace); text-transform:uppercase; }
.readings { grid-column:1/-1; display:flex; flex-wrap:wrap; gap:8px; }
.readings span { padding:4px 7px; border:1px solid var(--t-line); border-radius:3px; color:var(--t-muted); font:500 11px var(--cab-mono, monospace); }
.guess-form { margin-top:19px; }
.guess-form label { display:block; font-size:12px; font-weight:700; margin-bottom:7px; }
.input-row { display:flex; gap:8px; }
.input-row input { flex:1; min-width:0; border:1px solid var(--t-line-strong); border-radius:4px; background:var(--t-bg); color:var(--t-ink); padding:11px 13px; outline:none; }
.input-row input:focus { border-color:var(--t-accent); box-shadow:0 0 0 2px color-mix(in srgb,var(--t-accent) 25%,transparent); }
.input-row button { border:0; border-radius:4px; background:var(--t-accent); color:var(--t-bg); padding:10px 18px; font-size:13px; font-weight:800; white-space:nowrap; }
.input-row button:disabled { opacity:.55; cursor:wait; }
.message { margin:10px 0 0; min-height:18px; color:var(--t-muted); font-size:12px; }
.message.error { color:var(--t-danger); }
.history { margin-top:30px; }
.section-head { display:flex; align-items:end; justify-content:space-between; gap:12px; }
.section-head h2 { margin:0 0 13px; font-size:21px; letter-spacing:-.04em; }
.history ol { list-style:none; padding:0; margin:0; border-top:1px solid var(--t-line); }
.history li { display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid var(--t-line); padding:12px 4px; font-size:13px; }
.history li .round-num { color:var(--t-accent); font:700 12px var(--cab-mono, monospace); width:32px; }
.history li .round-words { flex:1; min-width:0; }
.history li .round-words small { display:block; color:var(--t-muted); margin-top:2px; }
.history li strong { font-variant-numeric:tabular-nums; }
.archive { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-top:30px; color:var(--t-muted); font-size:12px; }
.archive input { color:var(--t-ink); background:var(--t-panel); border:1px solid var(--t-line); padding:7px; border-radius:3px; }
.archive p { width:100%; margin:0; }
.help-dialog { max-width:min(480px,calc(100vw - 32px)); border:1px solid var(--t-line); border-radius:8px; padding:0; color:var(--t-ink); background:var(--t-panel); }
.help-dialog::backdrop { background:#0009; }
.help-card { padding:22px; }
.help-card .section-head h2 { margin:0; }
.help-card .section-head button { border:0; background:transparent; color:var(--t-ink); font-size:25px; }
.help-card ol { padding-left:23px; margin:18px 0; line-height:1.6; font-size:14px; }
.help-card li { margin-bottom:8px; }
.help-card p { color:var(--t-muted); font-size:13px; margin:0; }
@media(max-width:650px) { body { padding:0 15px 45px; } .site-header { height:60px; } .header-actions { gap:5px; } .header-actions button { font-size:11px; padding:7px 8px; } .game-shell { padding-top:21px; } .topline { margin-bottom:20px; } .topline h1 { display:none; } .date { display:block; margin:0; font-size:15px; } .score strong { font-size:23px; } .play-board { padding:19px 15px; } .arch-scene { min-height:270px; } .arch-scene .anchor-label { font-size:14px; } .input-row { flex-direction:column; } .input-row button { padding:11px; } }