:root{--desk:#e9e6df;--paper:#fff;--ink:#26221c;--rule:#cdc7ba;--rule-strong:#8f887a;--faint:#877f70;--red:#c93a2e;--blue:#2b5cbf;--green:#2f8a4c;--serif:"Hiragino Mincho ProN", "Yu Mincho", "BIZ UDMincho", serif;color:var(--ink);background:var(--desk);-webkit-font-smoothing:antialiased;font-family:Hiragino Maru Gothic ProN,BIZ UDGothic,Yu Gothic,system-ui,sans-serif}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}html,body,#root{overscroll-behavior:none;height:100%;margin:0}button{cursor:pointer;color:inherit;background:0 0;border:none;font-family:inherit}button:focus-visible{outline:3px solid var(--blue);outline-offset:2px}.paper{background:var(--paper);border:1px solid var(--rule);border-radius:4px;box-shadow:0 1px 2px #26221c14,0 6px 18px #26221c12}.title-screen,.result-screen{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:16px;min-height:100svh;padding:24px;display:flex}.cover{width:min(94vw,560px);padding:28px 22px calc(28px + env(safe-area-inset-bottom));flex-direction:column;align-items:center;gap:16px;display:flex}.app-title{font-family:var(--serif);letter-spacing:clamp(6px,2.4vw,12px);text-indent:clamp(6px,2.4vw,12px);white-space:nowrap;color:var(--ink);border:1px solid var(--ink);outline:3px solid var(--ink);outline-offset:3px;margin:0;padding:14px clamp(14px,5vw,26px);font-size:clamp(30px,9vw,46px);font-weight:600}.app-subtitle{letter-spacing:2px;white-space:nowrap;color:var(--faint);margin:4px 0 0;font-size:13px}.offline-badge{letter-spacing:1px;color:var(--green);border:1px solid var(--green);border-radius:999px;margin:0;padding:3px 12px;font-size:11px}.difficulty-picker{border:1.5px solid var(--rule-strong);border-radius:6px;gap:0;display:flex;overflow:hidden}.difficulty-btn{background:var(--paper);color:var(--faint);padding:12px 20px;font-size:16px}.difficulty-btn+.difficulty-btn{border-left:1.5px solid var(--rule-strong)}.difficulty-btn.active{background:var(--ink);color:var(--paper);font-weight:700}.mode-picker{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.mode-btn{color:#fff;border-radius:8px;padding:14px 30px;font-size:20px;font-weight:700;box-shadow:0 2px 4px #26221c2e}.mode-btn.omakase{background:var(--red)}.mode-btn.nigate{background:var(--blue)}.mode-btn:active{box-shadow:none;transform:translateY(2px)}.genre-heading{letter-spacing:2px;color:var(--faint);margin:10px 0 0;font-size:13px;font-weight:700}.genre-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;width:100%;display:grid}.genre-btn{background:var(--paper);color:var(--ink);border:1.5px solid var(--rule);text-align:left;border-radius:4px;align-items:center;gap:8px;padding:12px;font-size:15px;display:flex}.genre-no{font-family:var(--serif);color:var(--faint);border-bottom:1px solid var(--rule-strong);text-align:center;flex-shrink:0;min-width:1.4em;font-size:13px}.genre-btn:active{border-color:var(--ink);background:#f6f4ef}.start-btn{background:var(--red);color:#fff;border-radius:8px;padding:16px 56px;font-size:24px;font-weight:700;box-shadow:0 2px 4px #26221c2e}.start-btn:active{box-shadow:none;transform:translateY(2px)}.ghost-btn{color:var(--faint);background:0 0;padding:10px 24px;font-size:15px;text-decoration:underline}.problem-screen{min-height:100svh;padding:10px 12px calc(10px + env(safe-area-inset-bottom));flex-direction:column;gap:10px;display:flex;position:relative}.problem-header{z-index:6;align-items:center;gap:12px;display:flex;position:relative}.problem-count{font-family:var(--serif);color:var(--ink);min-width:52px;font-size:20px;font-weight:600}.timer-track{background:#dedacf;border-radius:999px;flex:1;height:6px;overflow:hidden}.timer-fill{border-radius:999px;height:100%;transition:background .3s}.icon-btn{background:var(--paper);border:1.5px solid var(--rule);border-radius:8px;flex-shrink:0;place-items:center;width:40px;height:40px;font-size:19px;display:grid}.icon-btn.active{border-color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink);background:#f6f4ef}.icon-btn:disabled{opacity:.35}.problem-paper{flex-direction:column;flex:1;gap:12px;padding:14px 14px 16px;display:flex;overflow:hidden}.problem-instruction{font-family:var(--serif);color:var(--ink);border-bottom:1px solid var(--rule);-webkit-user-select:text;user-select:text;margin:0;padding-bottom:8px;font-size:13px;line-height:1.9}.exemplar-box{border:1.5px solid var(--rule-strong);background:var(--paper);border-radius:4px;flex-direction:column;align-self:center;align-items:center;gap:4px;padding:8px 18px 6px;display:flex}.exemplar-label{letter-spacing:2px;color:var(--faint);font-size:12px;font-weight:700}.exemplar-fig{width:clamp(96px,26vw,150px);height:clamp(96px,26vw,150px)}.scene-box{align-self:center;width:100%;max-width:430px}.scene-scatter{aspect-ratio:1;border:1.5px solid var(--rule-strong);background:var(--paper);border-radius:4px;width:100%;position:relative}.scatter-item{width:13%;position:absolute;transform:translate(-50%,-50%)}.scatter-img{object-fit:contain;width:100%;height:100%}.scene-grid{aspect-ratio:1;grid-auto-rows:1fr;gap:3px;width:100%;display:grid}.grid-cell{border:1.5px solid var(--rule-strong);background:var(--paper);border-radius:2px;place-items:center;display:grid;overflow:hidden}.grid-img,.grid-flag{object-fit:contain;width:84%;height:84%}.scene-series{flex-wrap:wrap;justify-content:center;align-items:center;gap:4px;padding:6px 2px;display:flex}.series-item{place-items:center;width:clamp(34px,9.5vw,52px);height:clamp(34px,9.5vw,52px);display:grid}.series-fig{width:100%;height:100%}.series-blank{border:2.5px dashed var(--rule-strong);background:var(--paper);color:var(--faint);border-radius:4px;font-size:clamp(18px,5vw,28px);font-weight:700}.scene-groups{flex-direction:column;gap:10px;display:flex}.group-row{border:1.5px solid var(--rule-strong);background:var(--paper);border-radius:4px;align-items:center;gap:10px;padding:8px 10px;display:flex}.group-owner{object-fit:contain;flex-shrink:0;width:56px;height:56px}.group-items{flex-wrap:wrap;gap:4px;display:flex}.group-item{object-fit:contain;width:30px;height:30px}.scene-maze{aspect-ratio:1;border:1.5px solid var(--rule-strong);background:var(--paper);border-radius:4px;width:100%;position:relative}.maze-svg{width:100%;height:100%;position:absolute;inset:0}.maze-item{width:14%;position:absolute;transform:translate(-50%,-50%)}.maze-img{object-fit:contain;width:100%;height:100%}.scene-blocks{place-items:center;padding:6px 0;display:grid}.blocks-fig{width:min(60vw,260px);height:min(60vw,260px)}.scene-substitution{flex-direction:column;gap:10px;display:flex}.subst-rules{border:1.5px solid var(--rule-strong);background:var(--paper);border-radius:4px;flex-direction:column;gap:6px;padding:8px 12px;display:flex}.subst-rule{align-items:center;gap:6px;display:flex}.subst-fig{width:34px;height:34px}.subst-arrow{color:var(--ink);margin:0 4px;font-size:20px}.subst-sequence{justify-content:center;align-items:center;gap:8px;padding:8px 0 2px;display:flex}.subst-seq-fig{width:46px;height:46px}.scene-wheel{aspect-ratio:1;width:min(80vw,380px);margin:0 auto;position:relative}.wheel-frame{width:100%;height:100%;position:absolute;inset:0}.wheel-gondola{background:var(--paper);border:2px solid var(--rule-strong);border-radius:50%;place-items:center;width:17%;height:17%;display:grid;position:absolute;overflow:hidden;transform:translate(-50%,-50%)}.wheel-img{object-fit:contain;width:82%;height:82%}.choices-grid{flex:1;grid-template-columns:repeat(2,1fr);align-content:center;gap:10px;display:grid}.choice-card{background:var(--paper);border:1.5px solid var(--rule-strong);border-radius:4px;place-items:center;min-height:120px;padding:8px;display:grid;position:relative}.choice-card:disabled{opacity:.9}.choice-fig{width:100%;height:100%;max-height:24vh}.choice-img{object-fit:contain;width:100%;height:100%;max-height:24vh}.choice-number{font-family:var(--serif);color:var(--ink);font-size:clamp(48px,12vw,88px);font-weight:600;line-height:1}.asset-fallback{color:var(--ink);text-align:center;padding:8px;font-size:18px;font-weight:700}.coupy-overlay{pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.problem-footer{z-index:6;align-items:center;gap:6px;display:flex;position:relative}.color-picker{align-items:flex-end;gap:6px;margin-right:auto;display:flex}.color-dot{border:2px solid #26221c40;border-radius:11px 11px 4px 4px;width:22px;height:38px;transition:height .12s ease-out}.color-dot.active{border-color:var(--ink);height:48px}.answer-btn{background:var(--red);color:#fff;white-space:nowrap;border-radius:8px;padding:11px 14px;font-size:16px;font-weight:700;box-shadow:0 2px 4px #26221c2e}.answer-btn:active{box-shadow:none;transform:translateY(2px)}.answer-btn:disabled{color:#f3f1ea;box-shadow:none;background:#c9c4b8}.scribble-canvas{z-index:5;position:absolute;inset:0}.feedback-overlay{z-index:10;background:#ffffffe0;flex-direction:column;justify-content:center;align-items:center;gap:10px;animation:.25s ease-out pop-in;display:flex;position:absolute;inset:0}.feedback-mark{width:140px;height:140px}.feedback-mark path{stroke-dasharray:100;stroke-dashoffset:100px;animation:.5s ease-out 50ms forwards draw-stroke}.feedback-text{font-size:26px;font-weight:700}.feedback-overlay.ok .feedback-text{color:var(--red)}.feedback-overlay.ng .feedback-text{color:var(--blue)}@keyframes pop-in{0%{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}@keyframes draw-stroke{to{stroke-dashoffset:0}}.result-paper{flex-direction:column;align-items:center;gap:14px;width:min(94vw,560px);padding:30px 22px;display:flex}.grade-stamp{place-items:center;width:190px;height:190px;display:grid;position:relative}.grade-mark{width:100%;height:100%;position:absolute;inset:0}.grade-mark path{stroke-dasharray:100;stroke-dashoffset:100px;animation:.7s ease-out .15s forwards draw-stroke}.grade-score{font-family:var(--serif);color:var(--ink);font-size:64px;font-weight:600}.grade-score small{color:var(--faint);font-size:26px}.medal-label{font-family:var(--serif);color:var(--red);letter-spacing:3px;margin:0;font-size:26px}.result-score{color:var(--faint);margin:0;font-size:17px}.result-dots{gap:12px;font-size:26px;display:flex}.result-dot{font-weight:700}.result-dot.ok{color:var(--red)}.result-dot.ng{color:var(--rule-strong)}.parent-toggle{color:var(--faint);background:0 0;margin-top:20px;font-size:14px;text-decoration:underline}.parent-notes{text-align:left;-webkit-user-select:text;user-select:text;flex-direction:column;gap:12px;max-width:640px;display:flex}.parent-note{background:var(--paper);border:1px solid var(--rule);border-radius:4px;padding:12px 16px}.parent-note-head{align-items:center;gap:8px;display:flex}.parent-note-head .ok{color:var(--red);font-weight:700}.parent-note-head .ng{color:var(--blue);font-weight:700}.parent-note-instruction{color:var(--faint);margin:6px 0;font-size:13px}.parent-note-body{margin:0;font-size:14px;line-height:1.7}@media (prefers-reduced-motion:reduce){.feedback-overlay,.grade-mark path,.feedback-mark path{animation:none}.feedback-mark path,.grade-mark path{stroke-dashoffset:0}}