/* Capy classroom skin: preserve the imported lessons and SVG animations. */
:root{--desk:#fff9ed;--paper:#fffdf8;--paper-2:#fff2db;--canvas-bg:#fffaf0;--bubble-bg:#fff7e8;--ink:#4a3623;--ink-soft:#8d7357;--ink-faint:#987f64;--rule:#ecdcc2;--rule-2:#d9bf97;--indigo:#4c83ad;--vermilion:#ba692c;--shadow:0 7px 0 #dfcdb0;--grid-line:#f0e6d3}
body{background-color:var(--desk);background-image:radial-gradient(#f0ce93 2px,transparent 3px),radial-gradient(#bde1ce 2px,transparent 3px);background-size:160px 160px,210px 210px;background-position:12px 20px,80px 90px;color:var(--ink)}
.wrap{max-width:1320px}.capy-header{max-width:1320px;margin:0 auto 30px;display:flex;align-items:center;gap:14px;background:var(--paper);border:2px solid var(--rule);border-radius:26px;box-shadow:var(--shadow);padding:14px 22px}.capy-header strong{font-size:25px}.capy-header small{display:block;color:var(--ink-soft)}.capy-header nav{margin-left:auto;display:flex;gap:12px;flex-wrap:wrap}.capy-header a{display:inline-block;border:1px solid var(--rule);border-radius:24px;padding:9px 18px;background:#fff;color:var(--ink);text-decoration:none;font-weight:700}#headerCapy{display:flex;flex-shrink:0}
h1{font-size:30px}.top{background:var(--paper);border:2px solid var(--rule);border-radius:26px;padding:24px;box-shadow:var(--shadow);margin-bottom:26px}.guideLink{background:#fff3dc;border-color:var(--rule);border-radius:16px;color:var(--ink-soft)}.guideLink b{color:#a96929}.tabs,.subtabs{gap:8px}.ctabs{gap:12px}.ctab,.tab,.stab,.qbtn{border:2px solid var(--rule);border-radius:16px;background:#fffdf8;padding:9px 14px;font-family:inherit;line-height:1.5}.ctab.on,button.act.pri{background:#5089b5;border-color:#5089b5;color:white}.tab.on,.stab.on,.qbtn.on{background:#fff0cf;color:#925b28;border-color:#e5a35e}
.paper,.notes,.practice-section{border:2px solid var(--rule);border-radius:28px;box-shadow:var(--shadow);background:var(--paper)}.paper{padding:26px}.canvas{border-radius:22px;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;padding:16px;overflow:hidden;background:#fffaf0;border:2px solid var(--rule)}svg#stage{max-height:100%;width:100%;height:auto}.bubble{border-radius:20px}.tv{background:#e8f3e5;border:0;box-shadow:none;overflow:visible}.tv svg{width:100%;height:100%}.qtext{min-width:0}.qblock{flex-wrap:wrap}.qsel{margin-left:auto}.practice-section{margin-top:26px;padding:24px}.practice-section details{border-radius:16px}.notes{margin-top:26px;padding:18px}.tools button.act,.mini{border-radius:16px;border-width:2px;padding:10px 16px;font-weight:600}.sliderbox,.drawer{border-radius:18px}.practiceFloat{background:#538c79;border-radius:24px;box-shadow:0 5px 0 #c7d5b5}
button:not(:disabled),a,summary{cursor:pointer;transition:background .16s,border-color .16s,box-shadow .16s,transform .16s}button:not(:disabled):hover,a:hover,summary:hover{background:#ffedc4!important;color:#74451f!important;border-color:#e39742!important;box-shadow:0 3px 0 #d8b785;transform:translateY(-1px)}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #e6a04c;outline-offset:3px}.method-guide .sheet,.method-guide .card{border-radius:24px}.method-guide .capy-header{font-family:"Microsoft YaHei",sans-serif}
@media(max-width:700px){body{padding:12px 10px 80px}.capy-header{padding:12px;gap:8px;flex-wrap:wrap}.capy-header strong{font-size:21px}.capy-header nav{width:100%;margin:0}.top,.paper,.practice-section{padding:16px}h1{font-size:25px}.qtext{font-size:18px;flex-basis:75%}.canvas{padding:4px;min-height:220px}.ctabs{display:grid}.ctab{text-align:left}.talkrow{gap:8px}.teacher{flex-basis:56px}.tv{width:56px;height:56px}.bubble{padding:12px}.row{gap:8px}.kbd{display:none}.practiceFloat{bottom:10px}}
@media(prefers-reduced-motion:reduce){button,a,summary{transition:none}}

.canvas{width:100%;min-width:0}svg#stage{min-width:0;max-width:100%}.notes,details.notes{border-radius:24px}.bubble{min-width:0;overflow-wrap:anywhere}

/* 2026-09-27: keep the question, diagram and explanation together. */
.paper{padding:18px 24px;scroll-margin-top:12px}
.qblock{padding-bottom:10px;gap:10px}
.canvas{aspect-ratio:auto;height:auto;min-height:0;margin-top:10px;padding:8px 12px}
svg#stage{height:auto;max-height:clamp(180px,36vh,360px);width:100%;display:block}
.prog{margin:10px 0 2px}
.talkrow{margin-top:8px}
.bubble{padding:10px 14px}
.narr{min-height:0}
.formula{min-height:0;margin-top:6px;padding-top:6px}
.tools{margin-top:10px;padding-top:10px}
.tools button.act{padding:8px 12px}
@media(max-width:700px){.paper{padding:14px}.canvas{padding:4px;min-height:0}svg#stage{max-height:260px}.qblock{gap:8px}}