:root{--bg: #f4efe6;--surface: #fffaf2;--ink: #2a2520;--ink-soft: #6f655a;--line: #ddd2c2;--accent: #b5541c;--accent-ink: #fffaf2;--done: #b8ad9f;--miss: #a33a2a;--foul: #a33a2a;--shadow: rgba(42, 37, 32, .12);color-scheme:light}@media(prefers-color-scheme:dark){:root{--bg: #1c1a17;--surface: #26231f;--ink: #efe7da;--ink-soft: #a89c8c;--line: #3a352f;--accent: #e0864a;--accent-ink: #1c1a17;--done: #5d554b;--miss: #e07a68;--foul: #e07a68;--shadow: rgba(0, 0, 0, .4);color-scheme:dark}}*{box-sizing:border-box}html,body{margin:0;min-height:100%}body{background:var(--bg);color:var(--ink);font-family:Segoe UI,Meiryo,system-ui,sans-serif;font-weight:400;display:flex;flex-direction:column;min-height:100vh;-webkit-user-select:none;user-select:none}button{font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:6px 14px;cursor:pointer}button:hover{border-color:var(--ink-soft)}button.ghost{background:transparent;border-color:transparent}button.ghost:hover{border-color:var(--line)}button.icon{padding:4px;line-height:0}button svg{stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round}.bar{display:flex;align-items:center;justify-content:space-between;padding:12px 20px}.brand{margin:0;font-size:17px;font-weight:600;letter-spacing:.02em}.brand-ja{color:var(--ink-soft);font-weight:400;margin-left:6px}.bar-actions{display:flex;gap:4px;align-items:center}button.toggle{background:transparent;border-color:var(--line);color:var(--ink-soft);font-size:13px;padding:4px 10px;text-decoration:line-through}button.toggle[aria-pressed=true]{background:var(--surface);color:var(--ink);text-decoration:none}body[data-romaji=off] .guide,body[data-reading=off] .reading{display:none}@media(max-width:420px){.brand-ja{display:none}.bar{padding:12px 16px}}.stage{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px 16px;text-align:center}.signal{margin:0;min-height:1.2em;font-size:clamp(40px,9vw,96px);font-weight:600;letter-spacing:.04em;color:var(--ink-soft)}.stage[data-phase=draw] .signal,.stage[data-phase=typing] .signal{color:var(--accent)}.stage[data-phase=typing] .signal{visibility:hidden}.stage[data-phase=foul] .signal{color:var(--foul)}.target p{margin:0}.display{font-size:clamp(36px,8vw,80px);font-weight:600;max-width:90vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.reading{margin-top:8px!important;font-size:22px;color:var(--ink-soft)}.guide{margin-top:6px!important;font-family:Consolas,Cascadia Mono,monospace;font-size:26px;letter-spacing:.06em}.reading .done,.guide .done{color:var(--done)}.guide .todo{color:var(--ink)}.target.miss .guide .todo{animation:miss .16s ease-out}@keyframes miss{0%{color:var(--miss)}}.result .total{margin:0;font-size:clamp(48px,10vw,96px);font-weight:600;font-variant-numeric:tabular-nums;color:var(--accent)}.result .total small{font-size:.3em;margin-left:6px;color:var(--ink-soft);font-weight:400}.stats{display:flex;gap:28px;justify-content:center;margin:8px 0 0;flex-wrap:wrap}.stats div{display:flex;flex-direction:column;gap:2px}.stats dt{font-size:12px;color:var(--ink-soft)}.stats dd{margin:0;font-size:20px;font-variant-numeric:tabular-nums}.hint{margin:8px 0 0;color:var(--ink-soft);font-size:14px;min-height:1.4em}.notice{margin:0;font-size:13px;color:var(--ink-soft);border:1px solid var(--line);border-radius:6px;padding:6px 12px}.summary{display:flex;justify-content:center;gap:32px;flex-wrap:wrap;padding:14px 16px 20px;border-top:1px solid var(--line);font-variant-numeric:tabular-nums}.summary div{display:flex;flex-direction:column;align-items:center;gap:2px}.summary .label{font-size:12px;color:var(--ink-soft)}.sheet-backdrop{position:fixed;inset:0;background:var(--shadow);display:flex;align-items:center;justify-content:center;padding:16px}.sheet-backdrop[hidden]{display:none}.sheet{background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 32px var(--shadow);width:min(640px,100%);max-height:85vh;overflow:auto;padding:16px 20px 20px;-webkit-user-select:text;user-select:text}.sheet-head{display:flex;align-items:center;justify-content:space-between}.sheet-head h2{margin:0;font-size:17px;font-weight:600}.where{font-size:13px;color:var(--ink-soft)}.sheet-actions{display:flex;gap:8px}.message{font-size:13px;min-height:1.4em;color:var(--ink-soft)}.history{width:100%;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums;table-layout:fixed}.history th{text-align:left;font-weight:400;color:var(--ink-soft);border-bottom:1px solid var(--line);padding:4px 6px}.history td{padding:4px 6px;border-bottom:1px solid var(--line);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
