:root{font-family:"Microsoft YaHei","PingFang SC",Arial,sans-serif;color:#244458;background:#edf4f9}*{box-sizing:border-box}
body{margin:0;overflow:hidden}button,select,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #ecad74;outline-offset:2px}[hidden]{display:none!important}
.top{height:67px;background:#153f5b;color:#f9fdff;display:flex;align-items:center;gap:24px;padding:0 20px}
.top nav{display:flex;gap:9px}.top a{color:#e2f0fa;text-decoration:none;border:1px solid #6a95b0;padding:10px 13px;border-radius:10px;font-size:12px}
.brand{display:flex;gap:11px;align-items:center}.brand strong,.brand small{display:block}.brand strong{font-size:19px}.brand small{font-size:10px;color:#b4d2e4}.logo{background:#e6c0bf;color:#184661;width:38px;height:38px;display:grid;place-items:center;font-weight:800;font-size:21px;border-radius:11px}.top-right{margin-left:auto;font-size:12px;color:#c8ddec}
.workspace{height:calc(100dvh - 99px);padding:15px;display:grid;grid-template-columns:minmax(0,1fr) 349px;gap:13px}
.viewer{background:#fff;min-height:0;min-width:0;display:flex;flex-direction:column;border:1px solid #d0e2ed;border-radius:17px;overflow:hidden;box-shadow:0 8px 32px #21537013}
.viewport-head{padding:15px 19px;display:flex;align-items:center;justify-content:space-between;gap:18px;border-bottom:1px solid #e4eef4}
.viewport-head h1{font-size:18px;margin:0 0 4px}.viewport-head p{font-size:11px;margin:0;color:#7891a2}
.view-preset{background:#edf4f9;padding:4px;border-radius:12px;display:flex;gap:5px}.view-preset button{border:0;background:transparent;color:#45677e;padding:9px 13px;font-size:12px;border-radius:9px;min-height:39px}.view-preset .active{background:#255f81;color:#fff}
#solid-stage{position:relative;flex:1;min-height:180px;overflow:hidden;touch-action:none;background:radial-gradient(ellipse at 50% 36%,#fdfefe,#eaf3f9)}
#solid-stage canvas{display:block;outline:0}
#solid-fallback{padding:24px;position:absolute;top:38%;left:15%;right:15%;background:#fff6eb;border:1px solid #e3ba93;z-index:4;border-radius:10px;color:#89512c}
.viewport-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 18px;border-top:1px solid #e4edf2;font-size:12px;color:#547991}
.viewport-footer button{border:1px solid #bad4e3;background:#eff7fb;color:#235677;border-radius:9px;padding:7px 11px;font-size:12px}
.panel{background:#fff;border-radius:17px;border:1px solid #d0e2ed;overflow:auto;box-shadow:0 8px 32px #21537013}
.panel-head{position:sticky;top:0;z-index:5;padding:15px 16px;background:#205371;color:#fff}.panel-head strong,.panel-head small{display:block}.panel-head strong{font-size:15px}.panel-head small{font-size:10px;color:#c4d9e6;margin-top:4px}
.panel-body{padding:15px}.field{display:grid;gap:7px;color:#3c627a;font-size:12px;font-weight:700;margin-bottom:13px}.field select{padding:11px;border:1px solid #c9dce8;border-radius:9px;background:#fff;color:#254b64}
.metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-bottom:16px}
.metrics>div{background:#eaf3f9;border-radius:10px;padding:10px 8px;overflow:hidden}.metrics small{display:block;font-size:10px;color:#6f8ba0}.metrics strong{display:block;margin-top:5px;font-size:17px;color:#244f69;white-space:nowrap}
.topic-title{font-weight:700;font-size:13px;color:#23475e;margin:16px 0 11px;display:flex;justify-content:space-between;align-items:center}.topic-title span{font-size:10px;color:#8299a8;font-weight:400}
.range-row{display:grid;grid-template-columns:80px 1fr 27px;gap:10px;align-items:center;font-size:12px;color:#54748b}.range-row input{width:100%;accent-color:#337caa;min-height:25px}.range-row output{font-weight:700;text-align:right}
.switches{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:15px}.switches label{display:flex;gap:6px;align-items:center;color:#476d83;font-size:11px}.switches input{accent-color:#226f98;width:17px;height:17px}
.math{white-space:pre-wrap;background:#edf6fb;border-radius:11px;padding:12px;font-size:12px;line-height:1.85;color:#254e67;margin-top:15px}
.topic-description{font-size:12px;color:#698498;line-height:1.65}
.three-views{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.view-card{text-align:center;background:#f6fafd;border:1px solid #d5e5ee;border-radius:10px;padding:5px;min-width:0}.view-card strong{font-size:11px;color:#2e5b77}.view-card svg{display:block;width:100%;aspect-ratio:1}
.fine-print{color:#8597a5;font-size:10px;line-height:1.6}.actions{display:flex;gap:7px}.actions button{flex:1;background:#eef6fa;color:#275675;border:1px solid #c2d8e5;padding:10px 8px;border-radius:9px;font-size:12px}
#solid-expand{position:fixed;right:18px;bottom:49px;background:#1e5678;color:#fff;border-radius:30px;padding:12px 18px;border:0;z-index:4}
footer{height:32px;display:flex;align-items:center;justify-content:center;gap:9px;color:#8195a3;font-size:10px}footer a{color:#477a9b}
@media(max-width:970px){.workspace{grid-template-columns:minmax(0,1fr) 300px;padding:7px;gap:7px}.top{padding:0 10px}.top-right{display:none}.view-preset button{padding:8px}.panel-body{padding:11px}}
@media(max-width:670px){.top{height:59px;gap:8px}.top a{padding:7px;font-size:11px}.brand strong{font-size:15px}.workspace{height:calc(100dvh - 85px);grid-template-columns:1fr}.panel{position:absolute;z-index:4;top:140px;right:8px;width:min(318px,calc(100vw - 16px));max-height:calc(100dvh - 185px);box-shadow:0 12px 35px #16547333}.viewer{width:100%}.viewport-head{display:block;padding:10px}.viewport-head h1{font-size:15px}.view-preset{margin-top:9px}.view-preset button{flex:1}.viewport-footer{padding:8px 10px}footer{height:26px;font-size:9px}}


/* V0.35 orientation fix: keep WebGL bitmap dimensions distinct from CSS layout. */
.workspace,.viewer,#solid-stage{min-width:0}
#solid-stage canvas{width:100%!important;height:100%!important;max-width:100%;max-height:100%}

/* V0.35r1 floating controls: the 3D model remains the primary viewport. */
.workspace{display:block;position:relative}
.viewer{width:100%;height:100%;min-width:0}
.panel{position:fixed;right:27px;top:133px;width:min(349px,calc(100vw - 16px));max-height:calc(100dvh - 171px);z-index:5}
.panel-head{display:flex;justify-content:space-between;align-items:center;gap:8px;cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none}
.panel-head:active{cursor:grabbing}
.panel-buttons{display:flex;gap:5px}
.panel-buttons button{padding:7px 9px;min-height:40px;min-width:42px;border:1px solid #9bbdd0;color:white;border-radius:8px;background:#316b8a;font-size:11px;touch-action:manipulation}
.axes-legend{position:absolute;left:12px;bottom:12px;z-index:2;pointer-events:none;display:flex;gap:7px;font-size:11px;color:#506c81}
.axes-legend span{border:1px solid #d5e5ee;border-radius:8px;background:#fffffff0;padding:5px 7px}
.axes-legend span:nth-child(1){border-left:3px solid #e14e52}
.axes-legend span:nth-child(2){border-left:3px solid #65a556}
.axes-legend span:nth-child(3){border-left:3px solid #4a8bc2}
@media(max-width:670px){.panel{position:fixed;top:142px;right:8px;width:min(318px,calc(100vw - 16px));max-height:calc(100dvh - 184px)}.panel-buttons button{font-size:10px;padding:5px}}

/* V0.36 compact dual-axis section controls */
.slice-actions{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:9px 0 12px}
.slice-actions button{background:#f0f6fb;border:1px solid #bed5e4;border-radius:8px;color:#235a79;font-size:11px;padding:8px;white-space:nowrap}
.slice-actions span{font-size:10px;color:#7990a1;line-height:1.4;text-align:right}
.range-row{margin:7px 0}

/* V0.37 spatial vector lesson cards: low-noise, classroom-readable. */
.analysis-switches{margin-bottom:10px}
.analysis-readout{border:1px solid #d6e6ee;border-left:3px solid #7b91b5;background:#f6f9fd;font-size:11.5px;line-height:1.85;margin-top:9px}
.analysis-switches label{min-height:29px}
@media(max-width:670px){.analysis-readout{font-size:11px}}

/* V0.38: step-by-step spatial geometry proof, restrained overlay controls. */
.spatial-plane-selectors{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.spatial-plane-selectors .field{min-width:0;font-size:10px}
.spatial-plane-selectors select{min-width:0;width:100%;font-size:11px;padding:9px 6px}
.spatial-planes-toggle{display:flex;gap:7px;align-items:center;font-size:11px;color:#506e83;margin-bottom:12px}
.spatial-step-actions{display:flex;gap:7px;align-items:center;justify-content:space-between;margin:9px 0}
.spatial-step-actions button{border:1px solid #bfd5e2;background:#eaf4fa;color:#2c617e;border-radius:9px;padding:9px;min-height:38px;font-size:11px;min-width:65px}
.spatial-step-actions button:disabled{opacity:.4;cursor:not-allowed}
.spatial-step-actions span{font-size:11px;color:#55768a;text-align:center;flex:1}
#spatial-math{border-left:3px solid #548d9d;background:#f1f7f9;white-space:pre-wrap;line-height:1.7}