:root{color-scheme:light;--ink:#17324d;--paper:#fff8e7;--coral:#c84833;--teal:#087f7b}*{box-sizing:border-box}body{margin:0;color:var(--ink);font:16px/1.7 "PingFang SC","Microsoft YaHei",sans-serif;background:linear-gradient(#17324d08 1px,transparent 1px),linear-gradient(90deg,#17324d08 1px,transparent 1px),var(--paper);background-size:28px 28px}.page-shell{max-width:1180px;width:calc(100% - 40px);margin:auto;padding:24px 0}button,input,summary{font:inherit}button,summary{cursor:pointer}button:focus-visible,input:focus-visible,summary:focus-visible,a:focus-visible{outline:3px solid #e7b92f;outline-offset:4px}.course-nav{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:800px}.course-nav a{display:flex;align-items:center;gap:12px;border:2px solid var(--ink);border-radius:7px;background:#fffdf8;padding:8px 14px;text-decoration:none;color:inherit;box-shadow:3px 3px #17324d25}.course-nav a[aria-current]{background:var(--ink);color:#fff8e7}.course-nav b{font-size:24px}.course-nav small{display:block;font-size:11px;opacity:.7}header{display:flex;justify-content:space-between;align-items:center;gap:30px;padding:48px 25px 35px}.eyebrow{font-size:12px;letter-spacing:2px;font-weight:800;color:var(--teal);margin:0 0 7px}h1{font-size:clamp(32px,4vw,49px);line-height:1.35;margin:0 0 14px;letter-spacing:-1px}mark{color:inherit;background:linear-gradient(transparent 57%,#f2c84b 57%)}.lead{color:#52677a;margin:0}.note{background:#fae8a3;padding:22px 28px;transform:rotate(3deg);box-shadow:5px 7px #17324d12;position:relative;min-width:230px}.note:before{content:"";position:absolute;top:-10px;left:80px;width:65px;height:23px;background:#ffffff90;transform:rotate(-9deg)}.note p{margin:8px 0}.note small{font-size:12px}h2{font-size:24px;margin:0}h3{font-size:23px;margin:0 0 20px}.experiment,.answer,.challenge{border:2px solid var(--ink);border-radius:12px;background:#fffdf8;box-shadow:6px 6px #17324d15;overflow:hidden}.section-head{display:flex;justify-content:space-between;align-items:center;padding:24px 28px;gap:16px;border-bottom:1px solid #17324d25}.pill{font-size:12px;padding:5px 12px;border-radius:20px;background:#e4eeea;color:var(--teal);white-space:nowrap}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 260px}.display{padding:20px;min-width:0}.legend{display:flex;gap:19px;align-items:center;font-size:12px;color:#52677a}.legend span:last-child{margin-left:auto}.legend i{display:inline-block;width:14px;height:4px;margin-right:6px;vertical-align:middle}.orange{background:#c84833}.blue{background:#28768d}#stage{width:100%;display:block;margin:12px 0;border:1px solid #17324d15;border-radius:8px}svg text{font-family:inherit;fill:var(--ink);font-size:17px}.feedback{font-size:14px;min-height:48px;margin:10px 0}.invariant{display:flex;justify-content:space-between;gap:10px;background:#edf4eb;padding:9px 12px;border-radius:6px;font-size:12px}.invariant span{color:var(--teal)}.desk{background:#f4eddd;border-left:1px solid #17324d25;padding:24px 20px}.desk label{display:block;font-size:13px;margin-top:18px}.desk label strong,.desk output{float:right}.choices{display:flex;gap:5px;margin-top:8px}button{border:1.5px solid var(--ink);border-radius:6px;padding:9px 10px;background:#fffdf8;color:var(--ink);font-weight:600}button:hover{background:#f9e9bb}button[aria-pressed=true]{background:var(--ink);color:#fff}.choices button{flex:1;min-width:0;padding:7px 0;font-size:13px}.desk>button{width:100%;margin-top:10px}.desk .primary{background:var(--coral);color:white;border-color:var(--coral)}input[type=range]{width:100%;accent-color:var(--teal);cursor:pointer}.hint{font-size:12px;color:#617080;line-height:1.65}.thinking{display:flex;gap:25px;padding:30px 24px}.thinking>b{color:var(--coral);white-space:nowrap;padding-top:3px}.thinking h2{font-size:20px}.thinking p{margin:7px 0 0;color:#52677a;font-size:14px}.answer summary{display:flex;justify-content:space-between;align-items:center;padding:20px 28px;list-style:none}.answer summary small{display:block;color:var(--teal);font-size:12px}.answer summary b{font-size:20px}.answer-body{padding:0 28px 25px;border-top:1px solid #17324d20}.formula-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;padding-top:24px}.formula-grid b{display:block;font-size:28px;margin-top:8px}.formula-grid p,.answer-body>p{font-size:14px;color:#52677a}.orange-text{color:var(--coral)}.blue-text{color:#28768d}.formula{background:#faedbb;padding:18px;text-align:center;font-size:23px;border-radius:6px}.formula strong{font-size:32px}.challenge{margin-top:28px;display:grid;grid-template-columns:1fr 1fr;padding:28px;gap:30px}.challenge p{font-size:14px;color:#52677a}.challenge svg{width:100%;align-self:center}.challenge label{font-size:14px}.challenge output{float:right}.challenge .ratio{font-size:20px;color:var(--ink);margin:10px 0 0}.ratio strong{color:var(--teal);font-size:32px}.challenge small{color:#52677a}footer{display:flex;justify-content:space-between;padding:25px 5px 0;font-size:12px;color:#52677a}@media(max-width:800px){header{padding:32px 0}.note{display:none}.workspace{grid-template-columns:1fr}.desk{border-left:0;border-top:1px solid #17324d25}.desk>button{width:auto;margin-right:8px}.choices{max-width:400px}.desk label strong,.desk output{float:none;margin-left:10px}.challenge{grid-template-columns:1fr}.section-head{padding:20px}.pill{display:none}.course-nav a{padding:8px;gap:6px;font-size:12px}.course-nav b{font-size:18px}.page-shell{width:calc(100% - 24px)}.thinking{padding:25px 5px;gap:12px}.formula{font-size:18px}.formula-grid{gap:15px}.legend{gap:10px;font-size:11px}.invariant{flex-wrap:wrap}.display{padding:12px}}

@media (max-width: 600px) { #stage text { font-size: 23px; } }

/* Tactile classroom workbench. Geometry remains orthographic for comparison. */
#stage{border:0;border-radius:0;box-shadow:none;background:#fffdf8}#stage text{fill:#503d29;font-weight:550;paint-order:stroke;stroke:#fffdf8;stroke-width:3px;stroke-linejoin:round}.display{background:#fffdf8}.primary{box-shadow:0 3px 0 #843b29}.desk>button:active{transform:translateY(2px)}

.stage-scroll{width:100%;overflow-x:auto;overscroll-behavior-x:contain}.stage-note{font-size:14px;line-height:1.8;color:#52677a;margin:8px 0}.zoom-stage{display:none}.fine-pieces .piece-depth{display:none}.fine-pieces #pieces>g>path:nth-child(3){opacity:0}.fine-pieces #pieces>g>path:nth-child(2){stroke-width:.15}.is-zoomed #stage{min-width:780px}.stage-scroll:focus-visible{outline:2px solid #087f7b}@media(max-width:600px){.zoom-stage{display:inline-block;font-size:13px;padding:7px 12px}#stage .long-note{display:none}#stage .short-note{font-size:28px}.stage-note{font-size:14px}.stage-scroll.is-zoomed{border:1px solid #17324d20;border-radius:6px}.stage-scroll.is-zoomed #stage{width:780px;max-width:none}.display{padding:8px}}

[hidden]{display:none!important}button:disabled{opacity:.4;cursor:not-allowed}.manual-mode{touch-action:none}.manual-mode #arc-note,.manual-mode #dimensions{pointer-events:none}.manual-mode [data-tile]{cursor:grab;outline:none}.manual-mode [data-tile]:focus-visible>path:nth-child(2){stroke:#17324d;stroke-width:3}.manual-mode .is-dragging{cursor:grabbing}.manual-mode .is-placed>path:nth-child(2){stroke:#087f7b;stroke-width:1}.manual-mode #guide text{display:none}#manual-status{font-size:13px;color:#087f7b}.manual-mode #manual-slots{pointer-events:none}

/* Flat boundaries keep both colors equally legible during area comparison. */
#pieces .piece-depth{display:none}
#pieces > g > path:nth-child(4){stroke-width:1.5;stroke-linejoin:round}