:root{--bg:#f5f3eb;--paper:#fffdfa;--ink:#304844;--muted:#687d78;--green:#4e8177;--line:#b9cbc6;--soft:#eef5f2;--orange:#df946b}
*{box-sizing:border-box}body{margin:0;padding:6px;background:radial-gradient(circle at 12% 0,#fff9ef 0,transparent 35%),var(--bg);color:var(--ink);font-family:"Yu Gothic","Hiragino Kaku Gothic ProN",sans-serif}.shell{width:min(900px,100%);margin:auto;padding-bottom:18px}.pill{display:block;width:max-content;margin:0 auto 5px;padding:5px 12px;border:1px solid var(--line);border-radius:999px;background:var(--paper);color:var(--green);font-size:11px}.head{padding:9px 14px;border:1px solid var(--line);border-radius:18px;background:var(--paper);text-align:center}.kicker{color:var(--green);font-size:11px;letter-spacing:.12em}.head h1{margin:3px 0;font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:clamp(21px,4vw,29px);font-weight:500}.focus{padding:0 7px;border-radius:7px;background:#fff0e7;color:#ad6243}.question{margin:0;color:var(--muted);font-size:12px;line-height:1.6}.lesson{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(275px,.8fr);gap:8px;margin-top:8px}.panel{min-width:0;border:1px solid var(--line);border-radius:18px;background:var(--paper);box-shadow:0 6px 18px rgba(57,87,80,.04)}.stage{padding:10px}.part-title{margin:0;text-align:center;font-size:13px;font-weight:600}.drag-note{display:flex;align-items:center;justify-content:center;gap:7px;width:max-content;max-width:100%;margin:5px auto 3px;padding:5px 12px;border:1px solid #c8ddd7;border-radius:999px;background:#eef7f4;color:#47776d;font-size:11px;font-weight:600}.rotate{display:grid;place-items:center;width:21px;height:21px;border-radius:50%;background:white;color:var(--orange);font-size:19px;animation:turn 2.8s ease-in-out infinite}@keyframes turn{0%,55%,100%{transform:rotate(0)}75%{transform:rotate(135deg)}}.canvas-wrap{position:relative;border-radius:14px;background:radial-gradient(circle at 50% 44%,#fff 0,#f4faf8 43%,#eaf4f1 100%);overflow:hidden}.canvas-wrap canvas{display:block;width:100%;height:auto;touch-action:none;cursor:grab}.badge{position:absolute;left:9px;top:9px;padding:5px 9px;border:1px solid #d6e4df;border-radius:999px;background:rgba(255,253,250,.94);color:var(--green);font-size:10px}.prompt{position:absolute;left:50%;bottom:9px;translate:-50% 0;padding:5px 10px;border-radius:999px;background:rgba(255,253,250,.94);color:var(--green);font-size:10px;white-space:nowrap;pointer-events:none}.status{min-height:48px;margin-top:6px;padding:7px 10px;border-radius:12px;background:var(--soft);text-align:center;color:var(--muted);font-size:11px;line-height:1.55}.status b{color:var(--orange)}.progress{display:flex;justify-content:center;gap:5px;margin-top:7px}.dot{width:7px;height:7px;border-radius:50%;background:#d5e1de}.dot.on{background:var(--orange);transform:scale(1.12)}.controls{display:flex;justify-content:center;gap:6px;margin-top:7px}.btn{border:0;border-radius:11px;padding:8px 12px;background:var(--soft);color:var(--green);font:inherit;font-size:11px;cursor:pointer}.btn.cut{background:#fff0e8;color:#a85f3e}.btn:disabled{opacity:.48;cursor:default}.side{display:flex;flex-direction:column;gap:8px;padding:9px}.mini{padding:10px;border:1px solid #dbe7e3;border-radius:14px;background:#fffefa}.qhead{display:flex;align-items:center;gap:7px;font-size:13px}.qno{display:grid;place-items:center;width:23px;height:23px;border-radius:50%;background:var(--soft);color:var(--green)}.label{margin:9px 0 4px;color:var(--muted);font-size:10px}.choices{display:grid;grid-template-columns:1fr 1fr;gap:5px}.choice{padding:7px 3px;border:1px solid var(--line);border-radius:999px;background:white;color:var(--ink);font:inherit;font-size:11px;cursor:pointer}.choice.sel{border-color:var(--orange);background:#fff4ec}.choice.ok{border-color:var(--green);background:#edf6f3}.choice.ng{border-color:var(--orange);background:#fff1e9}.check{width:100%;margin-top:9px;background:var(--green);color:white}.feedback{min-height:33px;margin-top:7px;text-align:center;color:var(--muted);font-size:11px;line-height:1.5}.flow{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:8px}.flow div{padding:7px 3px;border-radius:9px;background:#f3f8f6;text-align:center;color:var(--muted);font-size:10px;line-height:1.35}.flow b{display:block;color:var(--green);font-size:11px}.rule,.point,.answer{margin-top:7px;padding:8px;border-radius:10px;background:var(--soft);color:var(--muted);font-size:11px;line-height:1.65}.rule b{color:var(--green)}.point{border:1px solid #c8ddd7;background:#eef7f4;color:#47776d}.point b{color:#b96948}.answer{display:none;background:#fff0e8;text-align:center}.answer.show{display:block}.answer strong{display:block;color:var(--orange);font-size:17px;font-weight:600}.hint{width:100%;margin-top:7px;border:1px solid #e8c6ae;background:#fff8ed;color:#956649}.hintbox{display:none;margin-top:7px;color:#795d4c;font-size:11px;line-height:1.6}.hintbox.show{display:block}@media(max-width:740px){.lesson{grid-template-columns:1fr}.side{display:grid;grid-template-columns:1fr 1fr}}@media(max-width:520px){.side{grid-template-columns:1fr}.head{padding:8px 10px}.question{font-size:11px}.stage{padding:8px}.drag-note{font-size:10px}.prompt{font-size:9px}}