:root{color-scheme:light;font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif;color:#213644;background:#fff;font-synthesis:none}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0}button{font:inherit;color:inherit;cursor:pointer;border:1px solid #d5dfe3;border-radius:5px;background:#fff;min-height:32px;padding:6px 12px}button:hover{background:#edf3f6}button:focus-visible{outline:3px solid #167b9b;outline-offset:2px}button[aria-pressed=true]{background:#e7f0f4;border-color:#4c788c;color:#163f51}.lesson{max-width:1200px;margin:auto;padding:14px 16px 10px}header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:10px}.eyebrow{font-size:12px;color:#5e747e;margin:0 0 3px}h1{font-size:21px;line-height:1.4;font-weight:650;margin:0}#models{display:flex;gap:5px}.layout{display:grid;grid-template-columns:minmax(0,1fr) 256px;gap:17px}.stage{position:relative;height:490px;min-width:0;background:#f2f5f5;border:1px solid #e4eaea;border-radius:7px;overflow:hidden}canvas{width:100%;height:100%;display:block;touch-action:none;outline-offset:-3px!important}.scene-title{position:absolute;top:13px;left:14px;right:14px;font-size:12px;color:#516b77;pointer-events:none}.scene-tag{position:absolute;left:14px;top:38px;color:#203d4b;font-size:13px;line-height:1.5;max-width:90%;font-weight:600;pointer-events:none}.view-tools{position:absolute;bottom:32px;left:12px;display:flex;gap:5px}.view-tools button{font-size:12px;padding:4px 11px;min-height:28px;background:#ffffffea}.view-tools button[aria-pressed=true]{background:#e4edf2}.gesture{position:absolute;bottom:6px;left:14px;margin:0;color:#6c7f87;font-size:11px;pointer-events:none}aside{min-width:0;padding-top:2px}.choose{font-size:12px;color:#617780;margin:0 0 9px}#legend{display:grid;gap:5px}.legend-item{width:100%;text-align:left;display:flex;align-items:center;gap:9px;font-size:13px;line-height:1.45;min-height:34px;padding:6px 9px;border-color:transparent;border-radius:4px;background:#f6f8f8}.legend-item[aria-pressed=true]{border-color:var(--color);background:#fff;box-shadow:inset 3px 0 var(--color);color:#233c48}.swatch{background:var(--color);width:19px;height:5px;border-radius:3px;flex:0 0 auto}.legend-group{font-size:11px;color:#73848b;margin:7px 0 1px}.explanation{border-top:1px solid #dce5e8;margin-top:13px;padding-top:12px;min-height:164px}#type-label{font-size:11px;color:#5d7682}h2{font-size:16px;line-height:1.5;margin:4px 0 7px;font-weight:650}.explanation p{font-size:13px;line-height:1.75;margin:0}#force-note{color:#42616e;font-size:12px;margin-top:8px}footer{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:8px;font-size:10px;line-height:1.6;color:#7a858a}#error{position:absolute;inset:35% 12% auto;background:white;padding:18px;color:#7f3625;font-size:14px;line-height:1.7}body[data-model=pc] .stage{height:530px}body[data-model=pc] .explanation{min-height:150px}@media(max-width:680px){.lesson{padding:10px}.layout{grid-template-columns:minmax(0,1fr) 204px;gap:10px}.stage,body[data-model=pc] .stage{height:500px}h1{font-size:18px}#models{display:none}.legend-item{font-size:12px;padding:5px}.explanation p{font-size:12px}.view-tools{gap:3px;left:7px}.view-tools button{padding:3px 7px}footer{font-size:9px}}@media(max-width:470px){.layout{grid-template-columns:1fr}.stage,body[data-model=pc] .stage{height:330px}#legend{grid-template-columns:1fr 1fr}.legend-group{grid-column:1/-1}.explanation{min-height:0}header{margin-bottom:8px}.choose{margin-top:5px}}
/* Keep the long beam proportional without leaving a tall empty canvas in the book column. */
@media(min-width:471px) and (max-width:760px){.stage{height:310px}body[data-model=pc] .stage{height:350px}}