:root{color-scheme:dark;--bg:#091720;--panel:#112731;--line:#29404a;--text:#e9f1ee;--muted:#9ab1b7;--mint:#91d8cb;--gold:#f5c781}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 20% 0,#18333e,transparent 55%),var(--bg);color:var(--text);font-family:"Microsoft YaHei","Segoe UI",sans-serif}main{max-width:1800px;margin:auto;padding:24px 32px}header{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-bottom:24px}header small{font-size:11px;letter-spacing:3px;color:var(--mint)}h1{font-size:29px;letter-spacing:3px;margin:9px 0 0;font-weight:600}header p{font-size:13px;color:var(--muted);line-height:1.8}.brand{display:flex;gap:16px;align-items:center}.brand:before{content:"";width:3px;height:46px;background:linear-gradient(var(--mint),#91d8cb22)}nav{display:flex;gap:6px;padding:5px;background:#06131bbb;border:1px solid var(--line);border-radius:12px;margin-bottom:20px}button,select{font:inherit;cursor:pointer;border:1px solid #344d58;background:#152d38;border-radius:7px;padding:9px 12px;color:#b9ccd0;transition:background .15s,border-color .15s}button:hover{background:#28444e;border-color:#82c4b5}button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:3px}nav button{flex:1;text-align:left;border:0;background:transparent;padding:15px 18px;font-size:15px;letter-spacing:1px}.active,.primary{background:#29554f;color:#e6fff7;border-color:#79bfaf}nav .active{background:linear-gradient(100deg,#285149,#193a3d);box-shadow:inset 0 0 0 1px #57988988}button:disabled{opacity:.35;cursor:default}.layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start}.stage{position:relative;border:1px solid #38515b;border-radius:14px;overflow:hidden;background:#102631;box-shadow:0 24px 64px #0003}.toolbar{display:flex;align-items:center;gap:6px;padding:12px 16px;border-bottom:1px solid #29434e;background:#0e232dc9;flex-wrap:wrap}.toolbar button{font-size:12px;padding:7px 11px}.toolbar #fullscreen{margin-left:auto}#viewport{height:clamp(490px,64vh,780px);position:relative;touch-action:none;background:#102631}canvas{display:block;width:100%;height:100%}#labels{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:2}.label{position:absolute;font-size:12px;background:#081922e8;border:1px solid #47616a;border-radius:4px;padding:4px 7px;white-space:nowrap;transform:translate(-50%,-125%);box-shadow:0 2px 8px #0002}#loading{position:absolute;inset:40% 20px auto;text-align:center;color:var(--mint);z-index:4}#viewnote{position:absolute;left:18px;bottom:12px;font-size:11px;color:#bdd1d5;background:#0c2029cc;padding:6px 9px;border-radius:4px;pointer-events:none}.legend{display:flex;gap:22px;padding:15px 18px 10px;font-size:12px;flex-wrap:wrap}.help{font-size:11px;margin:0;padding:0 18px 14px;color:var(--muted);line-height:1.7}#relations{padding:14px 18px;background:#091b2499;border-top:1px solid var(--line);font-size:13px;line-height:1.9;color:#c5e5dd;min-height:58px}aside{padding:23px;background:linear-gradient(145deg,#19333e,#102630);border:1px solid #314954;border-radius:14px}#chapter{font-size:10px;letter-spacing:2px;color:var(--mint)}h2{font-size:23px;letter-spacing:1px;margin:12px 0}aside p{font-size:13px;line-height:1.9;color:#b4c9cd;margin:0 0 20px}.control-heading{font-size:10px;letter-spacing:2px;color:#7c9da7;margin:24px 0 14px;padding-top:18px;border-top:1px solid #344b56}#steps{padding:12px;background:#081d2788;border:1px solid #34515c;border-radius:8px;margin:16px 0}#steptext{min-height:65px;font-size:12px;margin-bottom:12px}.buttons{display:flex;gap:5px;flex-wrap:wrap}.buttons button{font-size:11px;padding:7px 8px}#autoplay{width:100%;margin-top:8px;border-color:#6b654a;color:var(--gold)}.controls>label,#eye-controls>label{display:block;font-size:12px;margin:17px 0;color:#bfd0d3}input[type=range]{display:block;width:100%;height:5px;accent-color:var(--gold);margin:15px 0 7px;cursor:pointer}select{display:block;width:100%;margin-top:9px;padding:9px;background:#0d242e;color:#d9e9e8}output{float:right;font-size:11px;color:var(--gold)}.checks{display:flex;gap:6px 12px;flex-wrap:wrap;font-size:11px;line-height:2.4;margin-top:14px}.checks input{accent-color:var(--mint);vertical-align:middle}.checks label{cursor:pointer}#visibility{padding:10px;background:#21473e;color:#b9e4cb;border-radius:5px;margin:14px 0 8px;font-size:12px}#visibility.outside{background:#4a3030;color:#ffbdb0}#point-status{font-size:11px;color:#a7bdc3;line-height:1.9}.conclusion{border-left:2px solid var(--gold);padding:10px 12px;margin:22px 0 14px;background:#e2b77609;font-size:13px;line-height:1.9;color:#e9d9ba}.footnote{display:block;font-size:10px;color:#849fa7;line-height:1.9}footer{display:flex;justify-content:space-between;color:#678590;font-size:10px;letter-spacing:1px;padding:20px 2px}main:fullscreen{background:var(--bg);max-width:none;overflow:auto}[hidden]{display:none!important}@media(min-width:1600px){.layout{grid-template-columns:minmax(0,1fr) 350px}aside{padding:27px}#viewport{height:72vh}}@media(max-width:1000px){main{padding:18px}.layout{grid-template-columns:minmax(0,1fr) 290px;gap:12px}aside{padding:18px}nav button{font-size:13px;padding:13px 10px}}@media(max-width:760px){main{padding:14px 10px}header{padding:8px 5px 20px}h1{font-size:25px}header p{display:none}.layout{grid-template-columns:1fr}nav{gap:3px;margin-bottom:12px}nav button{font-size:12px;padding:13px 7px;letter-spacing:0}#viewport{height:480px}.toolbar{padding:10px;gap:5px}.toolbar button{font-size:11px;padding:7px 8px}.legend{gap:12px;font-size:11px}aside{padding:22px}.control-heading{margin-top:18px}footer{font-size:9px}#steptext{min-height:0}}


#size-questions{background:#091d2788;border:1px solid #38545d;border-radius:8px;padding:12px;margin:16px 0}#size-questions h3{font-size:14px;color:#f5c781;margin:0 0 10px}#size-questions p{font-size:12px;margin:9px 0;line-height:1.8}#size-questions summary{cursor:pointer;font-size:12px;color:#91d8cb}#size-questions details{padding:6px 0;border-bottom:1px solid #29404a}#ray-count-control{border:1px solid #73633f;background:#f5c78109;padding:12px;border-radius:8px}

.phase-strip{display:flex;gap:4px;font-size:10px;color:#718e99;margin-bottom:10px}.phase-strip span{flex:1;text-align:center;padding:6px 2px;border:1px solid #304d58;border-radius:4px}.phase-strip .current{color:#ffe1a1;border-color:#c49b59;background:#534b2f66}.phase-strip .done{color:#9fe0d1;background:#254c4355}.animation-track{height:3px;background:#29434b;border-radius:3px;overflow:hidden;margin:0 0 14px}#animation-progress{width:0;height:100%;background:linear-gradient(90deg,#f5c781,#75d8d1,#c6a6e8)}.stage{box-shadow:0 30px 80px #0005,inset 0 1px 0 #96b8c211}#viewport{background:linear-gradient(#081924,#19323e)}
/* Fullscreen recording: keep the existing layout, fit its height to the screen. */
main:fullscreen{height:100dvh;padding:12px 20px;display:flex;flex-direction:column;overflow:hidden}
main:fullscreen header{padding-bottom:8px;flex-shrink:0}
main:fullscreen h1{font-size:25px;margin-top:4px}
main:fullscreen header p{margin:0}
main:fullscreen .brand:before{height:38px}
main:fullscreen nav{margin-bottom:10px;flex-shrink:0}
main:fullscreen nav button{padding:10px 16px}
main:fullscreen .layout{flex:1;min-height:0;align-items:start}
main:fullscreen .stage{height:100%;display:flex;flex-direction:column;min-height:0}
main:fullscreen #viewport{height:auto;min-height:0;flex:1}
main:fullscreen .toolbar{padding:8px 12px;flex-shrink:0}
main:fullscreen .legend{padding:9px 14px 6px}
main:fullscreen .help{padding:0 14px 8px}
main:fullscreen #relations{padding:8px 14px;min-height:0}
main:fullscreen aside{padding:14px 18px;zoom:var(--fullscreen-panel-scale,1)}
main:fullscreen h2{font-size:21px;margin:8px 0}
main:fullscreen aside p{line-height:1.65;margin-bottom:12px}
main:fullscreen .control-heading{margin:14px 0 8px;padding-top:10px}
main:fullscreen .controls>label,main:fullscreen #eye-controls>label{margin:11px 0}
main:fullscreen input[type=range]{margin:10px 0 6px}
main:fullscreen select{margin-top:6px;padding:7px}
main:fullscreen #steps,main:fullscreen #size-questions{margin:10px 0;padding:10px}
main:fullscreen #steptext{min-height:40px;margin-bottom:8px}
main:fullscreen .conclusion{margin:12px 0 8px;padding:8px 10px}
main:fullscreen .checks{margin-top:8px;line-height:1.9}
main:fullscreen footer{padding:8px 2px 0;flex-shrink:0}