:root{font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif;color:#263e48;background:#f9faf8;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{cursor:pointer;color:inherit;border:1px solid #d8e1df;background:#fff;border-radius:8px;padding:8px 13px;min-height:38px;transition:.18s}button:hover{background:#f1f6f3;border-color:#8bacaa}button:focus-visible,input:focus-visible{outline:3px solid #5d91af;outline-offset:3px}button[aria-pressed=true],button.active{background:#1e6170;color:#fff;border-color:#1e6170}#app{max-width:1280px;margin:auto;padding:22px 24px 14px}header{display:flex;align-items:center;justify-content:space-between;gap:16px}.eyebrow{font-size:12px;letter-spacing:.08em;color:#6b878b}h1{margin:5px 0 18px;font-size:27px;letter-spacing:.015em;font-weight:650}nav{display:flex;gap:6px}.toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px;min-height:38px}#steps,.views{display:flex;gap:6px;align-items:center}#steps{font-size:14px}.views button{font-size:13px;padding:6px 12px}.lesson-hint{color:#526f76;font-size:14px}#stage{position:relative;border:1px solid #dce5e1;border-radius:16px;overflow:hidden;background:#f1f5f2;height:555px}#scene,#overlay,#labels{position:absolute;inset:0}#scene canvas{display:block;width:100%;height:100%;touch-action:none}#overlay{pointer-events:none;overflow:visible}#labels{pointer-events:none}.part-label{pointer-events:auto;position:absolute;padding:5px 9px;border:1px solid #c3d1ce;border-radius:6px;font-size:13px;min-height:29px;box-shadow:0 2px 8px #324b5511;background:#fffffff0;white-space:nowrap;z-index:3}.part-label.active{background:#175c69;color:white;border-color:#175c69}.part-label.is-hidden{opacity:.53;text-decoration:line-through}.dimension-label{position:absolute;transform:translate(-50%,-50%);font-size:14px;white-space:nowrap;border-radius:5px;background:#ffffffec;border:1px solid currentColor;padding:4px 8px;pointer-events:none;font-weight:550}.dimension-label small{font-size:11px;font-weight:400}.water-tag{color:#14798a}#scene-note,.scale-note{position:absolute;font-size:12px;color:#6a8487;pointer-events:none}#scene-note{top:13px;left:16px}.scale-note{bottom:12px;right:15px}#dimension-key{position:absolute;left:15px;bottom:12px;font-size:12px;color:#577175;max-width:75%}#controls{padding:15px 0 9px;display:flex;gap:15px;align-items:center;justify-content:space-between;min-height:70px}.selected-info{display:flex;align-items:baseline;gap:12px;min-width:0;line-height:1.6}.selected-info strong{font-size:18px;white-space:nowrap;color:#1d6570}.selected-info p{font-size:14px;margin:0;max-width:620px}.actions{display:flex;gap:6px;flex-shrink:0}.actions button{font-size:13px}.slider-row{width:100%;display:grid;grid-template-columns:125px 1fr 82px;gap:20px;align-items:center;max-width:690px;margin:auto}.slider-row label{font-size:15px}.slider-row output{font-variant-numeric:tabular-nums;font-size:20px;color:#1d6570;text-align:right}input[type=range]{width:100%;accent-color:#247988;cursor:pointer}#feedback{min-height:38px;padding:10px 14px;border-radius:10px;background:#edf3ef;color:#42646c;font-size:14px;line-height:1.65;display:flex;justify-content:space-between;align-items:center;gap:12px}#feedback b{color:#236775;font-weight:650}.metrics{display:flex;gap:24px;flex-wrap:wrap}.metrics span{white-space:nowrap}.metrics strong{font-size:18px;color:#176e7d;margin-left:5px}footer{display:flex;justify-content:space-between;gap:10px;color:#829596;font-size:11px;margin-top:11px}#steps button{font-size:13px}.flood-disclaimer{font-size:12px;color:#6a7e7f;max-width:290px}.legend-line{stroke-width:1.2;stroke:#7d979c;fill:none}.endpoint{fill:#417a88;stroke:#fff;stroke-width:1.3}.dimension-line{fill:none;stroke-width:1.7}.dot-mark{fill:#7d8d91}.component-hidden{display:none}
@media(max-width:720px){#app{padding:13px 10px 11px}header{display:block}h1{font-size:23px;margin-bottom:11px}.eyebrow{font-size:10px}nav{margin-bottom:12px}nav button{flex:1;padding:7px 4px;font-size:13px}.toolbar{align-items:flex-start;flex-direction:column;gap:8px}.views{align-self:flex-end}.views button{padding:4px 10px;min-height:32px}#steps button{padding:6px 8px;font-size:12px}#stage{height:455px;border-radius:12px}.part-label{font-size:11px;padding:5px 6px;min-height:28px}.dimension-label{font-size:11px;padding:3px 5px}.dimension-label small{font-size:9px}#controls{display:block;padding-top:12px}.selected-info{display:block;min-height:69px}.selected-info strong{font-size:17px}.selected-info p{font-size:13px;margin:3px 0 8px}.actions{justify-content:flex-end}.actions button{padding:6px 9px;min-height:35px;font-size:12px}.slider-row{grid-template-columns:96px 1fr 67px;gap:8px;min-height:43px}.slider-row label{font-size:13px}.slider-row output{font-size:17px}#feedback{font-size:12px;display:block;padding:9px 10px}.metrics{gap:8px 18px}.metrics strong{font-size:16px}.flood-disclaimer{max-width:none;margin-top:5px}footer{font-size:9px}footer span{max-width:50%;text-align:right}#scene-note{font-size:10px;top:10px;left:10px}.scale-note{font-size:9px;right:10px;bottom:9px}#dimension-key{font-size:10px;left:10px;bottom:28px;max-width:95%}}
/* Progressive component reading and separate orthographic span cards. */
[hidden]{display:none!important}#steps{flex-wrap:wrap}.toolbar{align-items:flex-start}.views{flex-shrink:0}.actions{flex-wrap:wrap;align-items:center;justify-content:flex-end}#controls{align-items:flex-start;flex-wrap:wrap}.selected-info{flex:1 1 540px}.actions{flex:0 1 auto}.secondary-tools{position:relative;font-size:13px}.secondary-tools summary{padding:10px;cursor:pointer;color:#627b80}.secondary-tools[open]{border:1px solid #dce5df;border-radius:9px;padding-bottom:7px}.secondary-tools button{margin:0 7px}.part-label{min-width:70px;text-align:center}.part-label[hidden]{display:none}.single-insight{font-size:14px;line-height:1.7;margin:0;padding:0 7px;color:#597075}.single-insight b{color:#2c5762;display:block}.legend-line{stroke-width:1.4;stroke-dasharray:3 3}.dimension-line{stroke-width:2.3}
#span-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:5px 0 7px}.span-card{display:block;min-width:0;padding:13px 12px 12px;text-align:left;background:#fff;border:1px solid #d9e3df;border-radius:13px;color:#274751}.span-card:hover{background:#f4f8f5}.span-card[aria-pressed=true]{background:#f4f8f5;color:#274751;border:2px solid #277882;padding:12px 11px 11px;box-shadow:0 0 0 2px #27788212}.card-heading{display:flex;align-items:center;justify-content:space-between;font-size:16px}.card-heading i{font-family:Georgia,serif;font-size:22px;font-weight:bold;color:#397684}.span-card svg{width:100%;display:block;margin:8px 0;border-radius:7px}.span-card>strong{display:block;font-size:14px;color:#235d6a;font-weight:600}.card-endpoints{display:block;font-size:12px;margin-top:6px;line-height:1.5;color:#667a7f}#symbol-note{font-size:11px;color:#7b8c8d;line-height:1.6;margin:8px 0 14px}#app[data-lesson=spans] #stage{height:445px}#app[data-lesson=spans] #controls{min-height:60px}#app[data-lesson=structure] #stage{height:515px}
@media(max-width:720px){#span-cards{grid-template-columns:1fr;gap:10px}.span-card{display:grid;grid-template-columns:1fr 1.4fr;column-gap:9px;align-items:center;padding:10px}.span-card[aria-pressed=true]{padding:9px}.card-heading{grid-column:1;align-self:end;font-size:15px}.span-card svg{grid-column:2;grid-row:1 / 4;margin:0}.span-card>strong{grid-column:1;font-size:12px;margin-top:5px}.card-endpoints{grid-column:1;font-size:10px}.card-heading i{font-size:20px}#symbol-note{font-size:10px}#app[data-lesson=structure] #stage{height:425px}#app[data-lesson=spans] #stage{height:370px}.actions{justify-content:flex-start}.selected-info{min-height:0;margin-bottom:10px}.secondary-tools summary{padding:8px}.toolbar{gap:8px}#steps{gap:5px}.part-label{min-width:68px;font-size:11px}.dimension-label{font-size:12px}#dimension-key{bottom:29px;max-width:95%}}
@media(max-width:720px){.span-card{display:block;padding:11px 12px}.span-card[aria-pressed=true]{padding:10px 11px}.span-card svg{height:155px;margin:7px 0;object-fit:contain}.card-heading{font-size:16px}.span-card>strong{font-size:13px}.card-endpoints{font-size:12px;margin-top:4px}}

/* Focus each textbook insertion on one lesson. */
#lesson-nav[hidden],#feedback[hidden]{display:none}#app[data-lesson=spans] #controls:empty{display:none}.span-card{align-self:start}.card-detail{display:block;margin:0 0 7px}.card-detail svg{margin:0;max-height:130px}#bearing-detail{position:absolute;right:14px;bottom:16px;width:280px;background:#faf9f3;border:1px solid #d6cba8;border-radius:9px;box-shadow:0 4px 18px #2b423c15}#bearing-detail svg{display:block;width:100%}#app[data-lesson=flood] #stage{height:560px}#app[data-lesson=flood] .scale-note{background:#ffffffdf;padding:4px 8px;border-radius:4px}#app[data-lesson=spans] .toolbar{margin-top:15px}.dimension-label{background:#fffef4ed}#app[data-lesson=structure] #feedback:empty{display:none}.card-heading i{display:none}