:root{--bg:#f6f7f9;--surface:#fff;--text:#1c2430;--muted:#5f6b7a;--border:#d9dee5;--primary:#1f5fd0;--primary-text:#fff;--lm:#5b6675;--tr:#1c2430;--focus:#e8590c;--focus-soft:#e8590c2e;--good:#1b7f3b;--ok:#a66a00;--bad:#b3261e;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--bg:#12161c;--surface:#1b212a;--text:#e8ecf1;--muted:#9aa5b4;--border:#2f3844;--primary:#5b9bff;--primary-text:#0b1220;--lm:#a9b4c3;--tr:#e8ecf1;--focus:#ff922b;--focus-soft:#ff922b40;--good:#5bd17f;--ok:#f0b84a;--bad:#ff8a80}}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);-webkit-text-size-adjust:100%;margin:0;font-family:system-ui,-apple-system,Hiragino Sans,Yu Gothic UI,Meiryo,sans-serif;font-size:17px;line-height:1.7}[lang=en]{font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}h1{margin:.4rem 0 .8rem;font-size:1.4rem;line-height:1.4}h2{margin:0 0 .5rem;font-size:1.05rem}p{margin:0 0 .7rem}.screen{max-width:640px;padding:.75rem 1rem calc(7.5rem + env(safe-area-inset-bottom));padding-top:calc(.75rem + env(safe-area-inset-top));margin:0 auto}.status{padding:2rem 1rem}.topbar{justify-content:space-between;align-items:center;margin-bottom:.5rem;display:flex}.progress{color:var(--muted);font-variant-numeric:tabular-nums}.eyebrow{color:var(--muted);margin:0;font-weight:700}.muted{color:var(--muted)}.small{font-size:.9rem}.note{color:var(--muted)}.card{background:var(--surface);border:1px solid var(--border);border-radius:14px;margin:0 0 .9rem;padding:.9rem 1rem}.big-number{font-size:1.2rem}.big-number strong{font-size:2.4rem}.next-step{font-size:1.15rem;font-weight:700}.summary{border-left:4px solid var(--primary);padding-left:.7rem;font-weight:600}.action-bar{max-width:640px;padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom));background:linear-gradient(to top, var(--bg) 70%, transparent);flex-direction:column;gap:.6rem;margin:0 auto;display:flex;position:fixed;bottom:0;left:0;right:0}button{font:inherit;cursor:pointer}button.primary,button.secondary{border:2px solid var(--primary);border-radius:14px;min-height:56px;padding:.6rem 1rem;font-size:1.1rem;font-weight:700}button.primary{background:var(--primary);color:var(--primary-text)}button.secondary{background:var(--surface);color:var(--primary)}button:disabled{opacity:.45;cursor:default}button.quiet{color:var(--primary);background:0 0;border:none;min-height:44px;padding:0 .3rem}button:focus-visible{outline:3px solid var(--focus);outline-offset:2px}.speak{border:1px solid var(--border);background:var(--surface);min-width:44px;min-height:44px;color:var(--text);white-space:nowrap;border-radius:22px;padding:0 .8rem}.examples{margin:0;padding:0;list-style:none}.example{border-top:1px solid var(--border);padding:.6rem 0}.example:first-child{border-top:none}.example-text{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.6rem;display:flex}.chunks{flex-wrap:wrap;gap:.3rem;font-size:1.1rem;display:inline-flex}.chunk{border:1px solid var(--border);background:var(--surface);border-radius:8px;padding:0 .45rem}.chunk.focus{border-color:var(--focus);background:var(--focus-soft);font-weight:700}.construal{color:var(--muted);margin:.3rem 0 0;font-size:.95rem}.scene{margin:0;font-size:1.05rem}.sentence{margin:.4rem 0 1rem;font-size:1.4rem;line-height:1.6}.blank{text-align:center;border-bottom:3px solid var(--focus);min-width:3.2rem;color:var(--muted);margin:0 .25rem;display:inline-block}.blank.filled{color:var(--text);background:var(--focus-soft);border-radius:6px 6px 0 0;padding:0 .3rem;font-weight:700}.choices{gap:.7rem;display:grid}.choice{border:2px solid var(--border);background:var(--surface);min-height:60px;color:var(--text);border-radius:14px;font-size:1.3rem;font-weight:700}.choice:active{border-color:var(--primary)}.result{font-size:1.2rem}.result.best{color:var(--good)}.result.acceptable{color:var(--ok)}.result.wrong{color:var(--bad)}.option-list{gap:.6rem;margin:0 0 .9rem;padding:0;list-style:none;display:grid}.option-result{background:var(--surface);border:1px solid var(--border);border-left-width:6px;border-radius:10px;padding:.55rem .8rem}.option-result.best{border-left-color:var(--good)}.option-result.acceptable{border-left-color:var(--ok)}.option-result.wrong{border-left-color:var(--bad)}.option-result.mine{box-shadow:0 0 0 2px var(--primary)}.option-result p{margin:.2rem 0 0;font-size:.95rem}.option-head{flex-wrap:wrap;align-items:center;gap:.5rem;display:flex}.option-head strong{font-size:1.2rem}.badge{border:1px solid var(--border);border-radius:999px;padding:0 .55rem;font-size:.8rem}.badge.best{color:var(--good);border-color:var(--good)}.badge.acceptable{color:var(--ok);border-color:var(--ok)}.badge.wrong{color:var(--bad);border-color:var(--bad)}.badge.mine{color:var(--primary);border-color:var(--primary)}.done{text-align:center;padding:2rem 0}.diagram{background:var(--surface);border:1px solid var(--border);border-radius:14px;margin:0 0 .9rem;padding:.5rem .6rem .7rem}.diagram figcaption{color:var(--muted);margin-top:.3rem;font-size:.92rem}.diagram-panels{grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:.3rem;display:grid}.diagram-panels.single{grid-template-columns:minmax(0,1fr);justify-items:center}.diagram-panels.single .diagram-svg{width:auto;max-width:100%;max-height:150px}.diagram-svg{width:100%;height:auto;color:var(--lm)}.diagram-svg .lm{stroke:var(--lm)}.diagram-svg .lm-fill{fill:var(--lm)}.diagram-svg .tr{fill:var(--tr)}.diagram-svg .focus-fill{fill:var(--focus-soft);stroke:var(--focus);stroke-width:2px}.diagram-svg .focus-stroke{stroke:var(--focus)}.diagram-svg .path-stroke{stroke:var(--lm)}.diagram-label{fill:var(--text);font-family:system-ui,sans-serif;font-size:22px}.diagram-todo{color:var(--muted);padding:1rem}@media (width>=700px){.screen{padding-top:2rem}}.diagram-thumb{background:var(--surface);border:1px solid var(--border);width:100%;color:var(--text);border-radius:12px;margin:0 0 .8rem;padding:.3rem .5rem;display:block;position:relative}.diagram-thumb .diagram{pointer-events:none;background:0 0;border:none;margin:0;padding:0}.diagram-thumb .diagram-panels.single .diagram-svg{max-height:90px}.diagram-thumb .diagram-panels:not(.single){max-width:300px;margin:0 auto}.thumb-hint{color:var(--muted);font-size:.75rem;position:absolute;bottom:.3rem;right:.6rem}.overlay{z-index:10;background:#0009;justify-content:center;align-items:center;padding:1rem;display:flex;position:fixed;inset:0}.overlay-body{background:var(--bg);border-radius:16px;width:100%;max-width:560px;max-height:90vh;padding:.8rem;overflow:auto}.overlay-body .primary{width:100%}
