:root{--paper: #faf7f2;--ink: #1c1917;--ink-soft: #78716c;--rule: #e7e5e4;--vermilion: #b4472f;--serif: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;--sans: -apple-system, "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;color-scheme:light dark}@media(prefers-color-scheme:dark){:root{--paper: #12100e;--ink: #e7e5e4;--ink-soft: #a8a29e;--rule: #2c2825}}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-tap-highlight-color:transparent}.screen{min-height:100svh;max-width:560px;margin:0 auto;padding:max(20px,env(safe-area-inset-top)) 20px max(20px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:18px}.gate{justify-content:center;text-align:center}.brand{font-family:var(--serif);font-size:clamp(2.4rem,11vw,3.4rem);letter-spacing:.16em;margin:0;font-weight:400}.tagline{color:var(--ink-soft);letter-spacing:.06em;margin:0 0 20px}.field{display:flex;flex-direction:column;gap:6px;text-align:left}.field span{font-size:.8rem;color:var(--ink-soft);letter-spacing:.04em}.field input{padding:13px 14px;font-size:1.05rem;background:transparent;color:var(--ink);border:1px solid var(--rule);border-radius:10px;font-family:var(--sans)}.field input:focus{outline:none;border-color:var(--ink-soft)}.btn{padding:14px;font-size:1rem;letter-spacing:.08em;background:var(--ink);color:var(--paper);border:0;border-radius:10px;font-family:var(--serif)}.btn:disabled{opacity:.35}.link{background:none;border:0;color:var(--ink-soft);font-size:.85rem;padding:6px}.err{color:var(--vermilion);font-size:.85rem}.bar{display:flex;justify-content:space-between;align-items:center}.progress{font-size:.78rem;color:var(--ink-soft);letter-spacing:.05em}.dot{margin:0 8px;opacity:.5}.teach{padding:10px 14px;border:1px solid var(--rule);border-radius:10px;font-size:.85rem;color:var(--ink-soft)}.teach strong{color:var(--ink);font-family:var(--serif)}.sentence{font-family:var(--serif);font-size:1.35rem;line-height:2.5;margin:8px 0}.sentence rt{font-size:.48em;color:var(--ink-soft)}.blank{ruby-align:center}.blank .boxes{display:inline-flex;gap:3px;padding:0 .1em}.blank .box{display:inline-block;width:1.15em;height:1.15em;border:1px dashed var(--vermilion);border-radius:3px;vertical-align:-.16em}.filled{color:var(--vermilion)}.filled rt{color:var(--vermilion);font-size:.48em}.blank rt{color:var(--vermilion);font-size:.42em;letter-spacing:-.02em;white-space:nowrap}.cells{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}.cell{display:flex;flex-direction:column;align-items:center;gap:6px}.paper{--cell: min(46vw, 220px);width:var(--cell);height:var(--cell);flex:0 0 auto;position:relative;border:1px solid var(--rule);border-radius:4px;background:linear-gradient(var(--rule),var(--rule)) center / 1px 100% no-repeat,linear-gradient(var(--rule),var(--rule)) center / 100% 1px no-repeat;touch-action:none}.paper svg{display:block;width:100%;height:100%}.cell-done .paper{border-color:var(--ink-soft)}.verdict{font-size:.8rem;font-family:var(--serif)}.clean{color:var(--ink)}.slip{color:var(--vermilion)}.hint{font-size:.78rem}.finish{text-align:center;display:flex;flex-direction:column;gap:10px}.reveal{font-family:var(--serif);font-size:1.1rem;margin:0}.cite{color:var(--ink-soft);font-size:.8rem;margin:0}.muted{color:var(--ink-soft);text-align:center}