:root{--bg:#f6f7f9;--card:#fff;--ink:#1c2430;--mute:#55606e;--line:#d5dae1;--acc:#1f5fbf;--accd:#174a96;--ok:#17703a;--okbg:#e4f4ea;--bad:#a8261c;--badbg:#fbe7e5;--hl:#fff1b8}
*{box-sizing:border-box}
body{margin:0;font:16px/1.6 system-ui,"Segoe UI",Arial,sans-serif;background:var(--bg);color:var(--ink)}
.top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 20px;background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.brand{font-weight:700;font-size:20px;color:var(--ink);text-decoration:none}
nav a{margin-left:16px;color:var(--acc);text-decoration:none}
nav a:hover{text-decoration:underline}
main{max-width:980px;margin:0 auto;padding:20px 16px 80px}
h1{font-size:26px;margin:8px 0 4px}h2{font-size:20px;margin:20px 0 8px}
.sub{color:var(--mute);margin:0 0 16px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px 16px;text-decoration:none;color:inherit;display:block}
a.card:hover{border-color:var(--acc)}
.card h3{margin:0 0 4px;font-size:17px}
.card p{margin:0;color:var(--mute);font-size:14px}
.card .meta{margin-top:8px;font-size:13px;color:var(--accd);font-weight:600}
.bar{height:6px;background:var(--line);border-radius:3px;margin-top:6px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--acc)}
.panel{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px 18px;margin:12px 0}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0}
button,.btn{font:inherit;padding:8px 14px;min-height:44px;border-radius:8px;border:1px solid var(--acc);background:var(--card);color:var(--acc);cursor:pointer}
button:hover{background:#eef3fb}
button.pri{background:var(--acc);color:#fff}button.pri:hover{background:var(--accd)}
button.sm{min-height:36px;padding:4px 10px;font-size:14px}
button:disabled{opacity:.5;cursor:default}
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,.w:focus-visible{outline:3px solid #f0a500;outline-offset:2px}
.nums{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.nums a{min-width:44px;height:44px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink);text-decoration:none;font-size:14px}
.nums a.done{background:var(--okbg);border-color:var(--ok);color:var(--ok);font-weight:600}
.nums a.cur{border:2px solid var(--acc);font-weight:700}
.w{cursor:pointer;border-bottom:1px dotted #8a97a8}
.w:hover{background:var(--hl)}
.passage{font-size:18px;line-height:1.9}
.inp{font:inherit}
textarea{width:100%;min-height:140px;font:inherit;padding:10px;border:1px solid var(--line);border-radius:8px;resize:vertical}
select{font:inherit;padding:2px 4px;border:1px solid var(--acc);border-radius:6px;background:#eef3fb;max-width:200px}
select.ok{background:var(--okbg);border-color:var(--ok)}select.bad{background:var(--badbg);border-color:var(--bad)}
.opt{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;border:1px solid var(--line);border-radius:8px;margin:6px 0;cursor:pointer;background:var(--card);text-align:left;width:100%;min-height:44px;color:var(--ink)}
.opt:hover{background:#f1f5fb}
.opt.sel{border-color:var(--acc);background:#eef3fb}
.opt.ok{border-color:var(--ok);background:var(--okbg)}
.opt.bad{border-color:var(--bad);background:var(--badbg)}
.opt b{min-width:20px}
.tr{margin:8px 0;padding:10px 12px;background:#f1f6ee;border-left:4px solid var(--ok);border-radius:4px;white-space:pre-wrap}
.ans{margin:8px 0;padding:10px 12px;background:var(--okbg);border-left:4px solid var(--ok);border-radius:4px}
.warn{margin:8px 0;padding:10px 12px;background:#fff6dd;border-left:4px solid #b88400;border-radius:4px}
.res{font-weight:700;margin:6px 0}.res.ok{color:var(--ok)}.res.bad{color:var(--bad)}
mark{background:var(--hl);padding:0 2px}
mark.gap{background:#cfe0fb}
.pop{position:fixed;z-index:20;width:min(320px,92vw);background:var(--card);border:1px solid var(--ink);border-radius:10px;padding:12px 14px;box-shadow:0 4px 18px rgba(0,0,0,.18)}
.pop .wd{font-weight:700;font-size:18px}
.pop .vi{font-size:18px;color:var(--accd);margin:4px 0}
.pop ul{margin:4px 0 8px;padding-left:18px;font-size:14px;color:var(--mute)}
.bubble{margin:8px 0;padding:10px 14px;border-radius:12px;max-width:85%;border:1px solid var(--line);background:var(--card)}
.bubble.you{margin-left:auto;background:#eef3fb;border-color:var(--acc)}
.bubble small{display:block;color:var(--mute);font-weight:600}
.hide-text .bubble.other .txt{filter:blur(6px)}
.hide-text .bubble.other .txt:hover{filter:none}
.photo{max-width:100%;width:380px;border-radius:8px;border:1px solid var(--line);display:block}
.timer{font:600 20px ui-monospace,Consolas,monospace}
.rs-row{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--line)}
.rs-row .nm{width:40px;color:var(--mute);font-size:13px}
.rs-row .wd{flex:1;font-size:18px}
.rs-row .st{width:90px;font-size:13px}
.seg button.on{background:var(--acc);color:#fff}
table{border-collapse:collapse;width:100%}td,th{border-bottom:1px solid var(--line);padding:6px;text-align:left}
@media (max-width:600px){main{padding:12px 10px 80px}.passage{font-size:17px}.bubble{max-width:100%}.top{padding:8px 12px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.lbox{display:inline-flex;vertical-align:baseline;margin:0 2px;}
.cell,.cell:focus,.cell:focus-visible,.cell:active{display:inline-block;width:.9em;height:1.5em;line-height:1.5em;padding:0;text-align:center;font:inherit;border:0;border-bottom:2px solid #7d8a9b;border-radius:0;background:transparent;color:var(--ink);outline:none;box-shadow:none}

input.cell,input.cell:focus,input.cell:focus-visible,input.cell:active{margin:4px 0.5px -1px 0px}
.cell.pre{width:auto;padding:0;margin:0;border-bottom:0}.cell.pre:last-of-type{margin-right:2px}
.cell.ok{color:var(--ok);border-bottom-color:var(--ok)}
.cell.bad{color:var(--bad);border-bottom-color:var(--bad)}
.cd{position:sticky;top:56px;z-index:4;display:flex;gap:10px;align-items:center;justify-content:flex-end;font:600 18px ui-monospace,Consolas,monospace;margin:0 0 6px}
.cd.low{color:var(--bad)}
input.cell:focus,input.cell:focus-visible,input.cell:active,input.cell:hover{outline:none!important;box-shadow:none!important;background:transparent!important;-webkit-tap-highlight-color:transparent}
input.cell:focus,input.cell:active{border-bottom-color:#7d8a9b}
input.cell.ok:focus,input.cell.ok:active{border-bottom-color:var(--ok)}input.cell.bad:focus,input.cell.bad:active{border-bottom-color:var(--bad)}
.g{color:var(--ok);font-weight:600}.o{color:#a35200;font-weight:600}.r{color:var(--bad);font-weight:600}
.pop{max-height:75vh;overflow:auto;width:min(360px,92vw)}
.pop .sec{font-weight:700;margin:8px 0 2px;font-size:14px;color:var(--accd)}
.nums a[hidden]{display:none}.nums a.bn{border-style:dashed}
.pop{display:flex;flex-direction:column;overflow:hidden;resize:both;min-width:240px;min-height:140px;max-width:96vw;max-height:92vh;padding:0}
.popbar{display:flex;gap:6px;align-items:center;padding:6px 8px;background:#eef3fb;border-bottom:1px solid var(--line);cursor:move;touch-action:none;user-select:none}
.poptitle{flex:1;font-size:12px;color:var(--mute);line-height:1.3}
.popbar button{min-height:32px;padding:2px 8px}
.popbody{flex:1;overflow:auto;padding:10px 14px}
.pop[hidden]{display:none}
.scenebar{position:sticky;top:104px;z-index:3;background:var(--bg);padding:6px 0 8px;display:flex;gap:14px;align-items:center;border-bottom:1px solid var(--line);margin-bottom:8px}
.scenebar .sv{flex:0 0 min(46%,340px)}
.scenebar .cap{flex:1;font-size:17px;line-height:1.5;color:var(--mute)}
.scenebar.playing .cap{color:var(--ink);font-weight:600}
.scenebar .ico{transition:opacity .25s,transform .25s;transform-box:fill-box;transform-origin:center}
.scenebar.playing .ico{opacity:.2}
.scenebar.playing .ico.on{opacity:1;transform:scale(1.3)}
@media (max-width:700px){.scenebar{position:sticky;top:96px;flex-direction:column;align-items:stretch;gap:2px;padding:4px 0}.scenebar .sv{flex:none;width:100%}.scenebar .sv svg{max-width:none!important;width:100%}.scenebar .cap{font-size:13px;line-height:1.3;max-height:2.7em;overflow:hidden}.scenebar.playing .ico.on{transform:scale(1.2)}}