: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","Noto Sans JP",sans-serif}.shell{width:min(820px,100%);margin:auto;padding-bottom:20px}.chapter-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(22px,4vw,29px);font-weight:500}.question{margin:0;color:var(--muted);font-size:12px;line-height:1.6}.focus{padding:0 7px;border-radius:7px;background:#fff0e7;color:#ad6243}.lesson{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(250px,.78fr);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:500}.drag-note{display:flex;align-items:center;justify-content:center;gap:7px;width:max-content;max-width:100%;margin:5px auto 2px;padding:5px 12px;border:1px solid #c8ddd7;border-radius:999px;background:#eef7f4;color:#47776d;font-size:11px;font-weight:600}.rotate-icon{display:inline-grid;place-items:center;width:21px;height:21px;border-radius:50%;background:#fff;color:var(--orange);font-size:19px;animation:turnHint 2.8s ease-in-out infinite}@keyframes turnHint{0%,55%,100%{transform:rotate(0)}75%{transform:rotate(135deg)}}.canvas-wrap{position:relative;margin-top:4px;border-radius:14px;background:radial-gradient(circle at 50% 46%,#fff 0,#f4faf8 42%,#ebf5f2 100%);overflow:hidden}.canvas-wrap canvas{display:block;width:100%;height:auto;touch-action:none;cursor:grab}.canvas-wrap canvas:active{cursor:grabbing}.step-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}.canvas-wrap.ready::after{content:'2点ずつタップして、6本の線を結ぼう';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}.canvas-wrap.complete::after{content:'6本つながりました！';color:#a45f40;background:rgba(255,244,236,.95)}.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;flex-wrap:wrap;margin-top:6px}.btn{border:0;border-radius:11px;padding:8px 11px;background:var(--soft);color:var(--green);font:inherit;font-size:11px;cursor:pointer}.btn.cut{background:#fff0e8;color:#a85f3e}.btn:disabled{opacity:.5;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)}.choices{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:9px}.choice{padding:8px 4px;border:1px solid var(--line);border-radius:999px;background:white;color:var(--ink);font:inherit;font-size:11px;cursor:pointer}.choice.selected{border-color:var(--orange);background:#fff4ec}.choice.ok{border-color:var(--green);background:#edf6f3}.choice.ng{border-color:var(--orange);background:#fff1e9}.count-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:8px}.count-item{padding:7px 3px;border:1px solid #d8e5e1;border-radius:10px;background:#f7fbf9;text-align:center;color:var(--muted);font-size:10px}.count-item b{display:block;margin-bottom:4px;color:var(--green)}.count-item input{width:48px;padding:5px 3px;border:1px solid var(--line);border-radius:7px;background:white;color:var(--ink);font:inherit;font-size:15px;font-weight:600;text-align:center}.count-item.ok{border-color:#76aa9d;background:#eef8f4}.count-item.ng{border-color:var(--orange);background:#fff3ec}.check-btn{width:100%;margin-top:8px;background:var(--green);color:white}.feedback{min-height:34px;margin-top:7px;text-align:center;color:var(--muted);font-size:11px;line-height:1.5}.hint{width:100%;margin-top:7px;border:1px solid #e8c6ae;background:#fff8ed;color:#956649}.hintbox{display:none;margin-top:6px;color:#795d4c;font-size:11px;line-height:1.55}.hintbox.show{display:block}.rule-title{text-align:center;font-size:13px}.observe-flow{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:8px}.observe-item{position:relative;padding:7px 4px;border-radius:9px;background:#f3f8f6;text-align:center;color:var(--muted);font-size:10px;line-height:1.35}.observe-item:not(:last-child)::after{content:'›';position:absolute;right:-5px;top:50%;translate:0 -50%;color:#9bb8b1;font-size:16px}.observe-item b{display:block;color:var(--green);font-size:11px}.rule,.point{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}.answerbox{display:none;margin-top:8px;padding:8px;border-radius:10px;background:#fff0e8;text-align:center;font-size:11px;line-height:1.6}.answerbox.show{display:block}.answerbox strong{display:block;color:var(--orange);font-size:19px;font-weight:500}@media(max-width:720px){.lesson{grid-template-columns:1fr}.side{display:grid;grid-template-columns:1fr 1fr}.stage canvas{max-height:390px;object-fit:contain}}@media(max-width:520px){.side{grid-template-columns:1fr}.head{padding:8px 10px}.question{font-size:11px}.stage{padding:8px}.drag-note{padding:4px 9px;font-size:10px}}