:root{color-scheme:light dark;--page:light-dark(#f2f5f2,#17231e);--paper:light-dark(#fff,#23352b);--ink:light-dark(#213c2d,#edf6ee);--muted:light-dark(#536858,#b7cab9);--accent:light-dark(#245e3b,#b9e5be);--selected:light-dark(#e0efdf,#37543b);--edge:light-dark(#bccdbd,#718772);--row:76px;font-family:system-ui,-apple-system,sans-serif;color:var(--ink);background:var(--page);font-size:16px}
*{box-sizing:border-box}body{margin:0}main{max-width:780px;margin:auto;padding:24px 18px 36px}h1{font-size:26px;font-weight:600;margin:8px 0}p{line-height:1.6;margin:8px 0}.eyebrow{font-size:13px;color:var(--muted)}.guide{font-size:14px;margin:16px 0}button,textarea{font:inherit;color:inherit}button{border:1px solid var(--edge);border-radius:9px;background:var(--paper);min-height:44px;padding:8px 12px;cursor:pointer}button:disabled{opacity:.45;cursor:default}button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:14px 0;font-size:13px}
#board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:8px;background:var(--ink);border-radius:16px;box-shadow:4px 5px 0 var(--edge)}.cell{min-width:0;background:var(--paper);border-radius:9px;overflow:hidden}.cell h2{font-size:14px;font-weight:500;margin:0;padding:10px 6px;min-height:52px;display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.3}.reel{position:relative;display:block;width:100%;height:calc(var(--row)*3);border:0;padding:0;border-radius:0;overflow:hidden;touch-action:pan-x;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;cursor:grab;background:var(--paper)}.reel:active{cursor:grabbing}.reel:focus-visible{outline-offset:-3px}.band{position:absolute;top:var(--row);height:var(--row);inset-inline:0;background:var(--selected);border-block:2px solid var(--accent);pointer-events:none}.cell[data-state=unanswered] .band,.cell[data-state=unknown] .band{border-style:dashed}.track{position:absolute;inset:0 0 auto;will-change:transform;pointer-events:none}.option{height:var(--row);display:flex;align-items:center;justify-content:center;text-align:center;padding:4px 7px;font-size:14px;line-height:1.5;overflow-wrap:anywhere;color:var(--muted)}.option.center{color:var(--ink);font-weight:600}.veil{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,var(--paper),transparent 20%,transparent 80%,var(--paper));opacity:.38}.state-label{padding:8px 4px;text-align:center;font-size:12px;color:var(--muted);min-height:34px}.cell[data-focused=true] .state-label{color:var(--accent);font-weight:600}.cell[data-state=unanswered] .option.center{font-weight:400}.scroll-hint{font-size:12px;color:var(--muted);margin:12px 0 20px}.adjust{background:var(--selected);padding:14px;border-radius:12px;font-size:14px}.actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.actions button{font-size:14px}.speech{margin-top:24px}.speech label{display:block;font-weight:600}#quote-status{font-size:12px;font-weight:400;color:var(--muted)}textarea{display:block;width:100%;font-size:16px;line-height:1.8;padding:14px;margin-top:10px;background:var(--paper);border:1px solid var(--edge);border-radius:12px;min-height:100px;resize:none;overflow:hidden}#edit-note,footer,#message{font-size:12px;line-height:1.6;color:var(--muted)}#message{min-height:20px}footer{margin-top:22px}[hidden]{display:none!important}
@media(max-width:380px){main{padding:18px 10px 28px}#board{gap:5px;padding:6px}.option{padding-inline:4px}.cell h2{font-size:13px} .toolbar{gap:5px;font-size:12px}.toolbar button{padding-inline:8px}}
@media(min-width:620px){:root{--row:64px}.option{font-size:16px}.cell h2{min-height:44px}}
/* Compact reels: one full answer, one third of each adjacent answer. */
:root{--row:62px}main{max-width:680px;padding:12px 12px 28px}h1{font-size:20px;margin:0 0 3px}header p{font-size:14px;margin:2px 0;line-height:1.4}.guide{font-size:12px;margin:6px 0 2px}.toolbar{margin:6px 0;font-size:12px}.toolbar button{min-height:32px;padding:4px 8px;font-size:12px}#board{gap:6px;padding:6px;border-radius:12px}.cell h2{font-size:13px;min-height:28px;height:28px;padding:4px 2px;line-height:1.2}.reel{height:calc(var(--row)*5/3);background:#34443b}.band{top:calc(var(--row)/3);background:#f5ffef;border-block:1px solid #a6cf91}.option{color:#d4e1d7;font-size:14px;line-height:1.25;padding:2px 5px}.option.center{color:#183520;font-weight:600}.veil{opacity:1;background:linear-gradient(to bottom,rgba(8,19,13,.42) 0%,rgba(8,19,13,.42) 20%,transparent 20%,transparent 80%,rgba(8,19,13,.42) 80%,rgba(8,19,13,.42) 100%)}.state-label{min-height:20px;height:20px;padding:2px 0;font-size:12px;line-height:16px}.cell[data-state=unanswered] .band{border-style:solid}.reel:disabled{opacity:1;cursor:wait}.accept-row{display:flex;gap:10px;align-items:center;justify-content:space-between;margin:12px 0;font-size:12px}.accept-row button{flex-shrink:0;background:var(--selected);font-size:14px}.adjust{margin-top:14px}.speech{margin-top:18px}
@media(max-width:380px){main{padding:8px 10px 24px}.cell h2{font-size:12px}.option{font-size:13px;padding-inline:3px}}
@media(max-height:650px){:root{--row:54px}main{padding-top:6px}header p{font-size:13px}.guide{font-size:12px;margin-top:4px}h1{font-size:18px}.cell h2{height:26px;min-height:26px}.option{font-size:13px;line-height:1.2}.toolbar{margin-block:4px}}
dialog{width:min(540px,calc(100% - 28px));max-height:calc(100dvh - 40px);border:1px solid var(--edge);border-radius:18px;padding:22px;background:var(--paper);color:var(--ink);box-shadow:0 20px 70px #0005;overflow:auto}dialog::backdrop{background:#10231bd0}dialog h2{font-size:20px;margin:0 0 16px;font-weight:600}dialog #quote{font-size:16px;line-height:1.9;margin:0;white-space:pre-wrap}.dialog-actions{display:flex;gap:10px;margin-top:22px}.dialog-actions button{flex:1;font-size:14px;min-height:48px}#confirm{background:var(--selected);border-color:var(--accent)}body:has(dialog[open]){overflow:hidden}#complete{padding:30px 8px}#complete h2{font-size:22px}
.title-row{display:flex;align-items:center;justify-content:space-between;gap:8px}.title-row h1{margin:0}#sound-toggle{min-height:28px;padding:2px 8px;font-size:12px}#sound-toggle[aria-pressed=true],#start-sound{background:var(--selected);border-color:var(--accent)}
#dialog-question{font-size:14px;line-height:1.6;padding:12px;background:var(--selected);border-radius:10px;margin:0 0 16px}
.toolbar-actions{display:flex;gap:4px;flex-shrink:0}.toolbar #progress{flex:1;min-width:0;line-height:1.25}.toolbar{gap:6px}
#dialog-help{font-size:13px;line-height:1.5;color:var(--muted);margin-top:14px}#complete{padding:12px 2px}#complete h1{font-size:24px;margin:10px 0}#complete h2{font-size:17px;margin:0 0 8px}#score-panels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:20px 0}.score-card{padding:16px 12px;border:1px solid var(--edge);background:var(--paper);border-radius:14px}.score-card p{font-size:13px;min-height:42px}.score-value{font-size:42px;font-weight:600;line-height:1.3}.score-value small{font-size:14px;color:var(--muted);font-weight:400}.score-card meter{display:block;width:100%;height:18px;margin-top:8px}.result-note,#coverage{font-size:12px;color:var(--muted);line-height:1.7}.result-block{margin:22px 0;padding-top:16px;border-top:1px solid var(--edge)}.result-block li{font-size:14px;line-height:1.7;margin:8px 0}.result-block ul{padding-left:20px}#today-step{font-size:15px;line-height:1.8}details{margin:22px 0}summary{cursor:pointer;min-height:44px;padding:10px 0}.review-item{padding:12px 0;border-top:1px solid var(--edge)}.review-item p{font-size:14px}.review-item button{font-size:14px}#restart{margin-top:12px}