:root{font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;color:#263b35;background:#203529;--forest:#203529;--grass:#78ad50;--paper:#f6f0dc;--ink:#263b35;--orange:#e98936;--blue:#42a9be;--purple:#7a65aa;--border:#233a2d}*{box-sizing:border-box}body{margin:0;min-width:320px}button,input{font:inherit}.page{max-width:1480px;margin:auto;min-height:100vh;padding:22px clamp(13px,3vw,48px) 30px;background-color:var(--forest);background-image:linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px);background-size:32px 32px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:26px;color:#fff}.brand{display:flex;align-items:center;gap:15px}.brand-mark{width:48px;height:48px;flex:none;background:#78ad50;border:4px solid #a8d47d;box-shadow:5px 5px 0 #101f16;position:relative}.brand-mark:before,.brand-mark:after{content:"";position:absolute;width:10px;height:10px;background:#d3ed9c}.brand-mark:before{top:6px;left:6px}.brand-mark:after{right:5px;bottom:5px;background:#315f38}.brand p{margin:0 0 3px;color:#b7d997;font-size:12px;font-weight:900;letter-spacing:.16em}.brand h1{margin:0;font-size:clamp(21px,2.5vw,32px)}.top-links{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px}.top-links a{display:inline-block;border:2px solid #86ad6b;color:#d9eac8;padding:8px 12px;text-decoration:none;font-weight:900;white-space:nowrap}.top-links a:hover{background:#32513a}.panel{background:var(--paper);border:5px solid var(--border);box-shadow:8px 8px 0 #112118}.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 20px;background:#e6ddc0;border-bottom:4px solid var(--border);font-weight:900}.panel-heading h2{margin:0;font-size:17px}.panel-heading span{color:#397347;font-size:13px}.switch-row{display:flex;justify-content:space-between;gap:16px;padding:16px 18px 0}.segmented{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;min-width:min(430px,48%)}.segmented button,.presets button,{min-height:44px;border:3px solid var(--border);background:#fffaf0;color:var(--ink);font-weight:900;cursor:pointer}.segmented button+button{border-left:0}.segmented button.active{background:var(--grass)}.stage-wrap{padding:16px 18px 18px}.stage-wrap svg{display:block;width:100%;height:auto;max-height:68vh;border:3px solid #244e57;background:#f8f3e7;touch-action:none}.stage-hint{display:flex;align-items:center;gap:10px;margin:12px 3px 0;font-weight:800;color:#4c6255}.hint-square{width:16px;height:16px;background:#78ad50;box-shadow:4px 4px 0 #315f38}.axis{fill:none;stroke:#334e47;stroke-width:4}.small-label{font-size:16px;font-weight:900;fill:#33515a}.focus-mark{stroke:#334e47;stroke-width:4}.focus-text{font-size:18px;font-weight:900;fill:#334e47;text-anchor:middle}.lens-fill{fill:#bfe8e7;fill-opacity:.72;stroke:#257387;stroke-width:5}.lens-center{stroke:#257387;stroke-width:3}.ray{fill:none;stroke-width:5;stroke-linecap:round}.ray.incoming{stroke:#e98936;marker-mid:url(#ray-arrow-orange)}.ray.outgoing{stroke:#42a9be;marker-mid:url(#ray-arrow-blue)}.ray.virtual{stroke:#7a65aa;stroke-width:4;stroke-dasharray:10 8}.candle-body{fill:#d14f3f;stroke:#743b1c;stroke-width:4}.candle-band{fill:#ef8b58}.candle-flame{fill:#ffc83d;stroke:#a85a20;stroke-width:4}.candle-inner{fill:#fff0a7}.candle-label{font-size:17px;font-weight:900;fill:#8a461f;text-anchor:middle}.image-real .candle-body{fill:#42a9be;stroke:#205a68}.image-real .candle-band{fill:#86d4dc}.image-real .candle-flame{fill:#73cbd7;stroke:#205a68}.image-virtual{opacity:.52}.image-virtual .candle-body{fill:#7a65aa;stroke:#5c477f;stroke-dasharray:7 5}.image-virtual .candle-flame{fill:#c2b1ef;stroke:#5c477f}.image-label{font-size:17px;font-weight:900;fill:#146278;text-anchor:middle}.draggable{cursor:grab}.draggable:active{cursor:grabbing}.offscreen-box{fill:#fff0d3;stroke:#a4511b;stroke-width:3}.offscreen-text{font-size:16px;font-weight:900;fill:#8a461f;text-anchor:middle}.workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;margin-top:28px}.control-body,.result-body{padding:20px}.slider-label{display:flex;justify-content:space-between;font-weight:900}.slider-label strong{color:#a4511b}input[type=range]{width:100%;height:34px;margin:9px 0;accent-color:#e98936}.presets{display:grid;grid-template-columns:repeat(6,1fr);gap:7px}.presets button{min-height:39px;padding:5px}.ray-toggles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:18px}.ray-toggles label{padding:9px;border:2px solid #c4bea8;background:#fffaf0;font-size:13px;font-weight:900}.readouts{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.readouts div{padding:10px;border:2px solid #c4bea8;background:#fffaf0}.readouts span{display:block;font-size:13px;font-weight:800}.readouts strong{display:block;margin-top:3px;font-size:20px}.magnification{margin-top:12px;padding:14px;border-left:6px solid #e98936;background:#fff0d3}.magnification span{display:block;font-size:13px;font-weight:900}.magnification strong{display:block;margin-top:4px;font-size:clamp(18px,2.2vw,27px)}.properties{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px}.property{padding:8px 11px;border:3px solid var(--border);background:#dcebc8;font-weight:900}.screen-note{min-height:49px;margin:14px 0 0;padding:11px;background:#e6ddc0;border-left:6px solid #78ad50;font-weight:900;line-height:1.45}.rules-panel{margin-top:28px}.rule-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:18px}.rule-card{padding:15px;border:3px solid var(--border);background:#fffaf0}.rule-card strong{display:block;margin-bottom:7px;color:#397347}.rule-card p{margin:0;line-height:1.55}footer{margin-top:28px;color:#c3d8bf;font-size:12px}button:focus-visible,a:focus-visible,input:focus-visible,#object-candle:focus-visible{outline:3px solid #e98936;outline-offset:3px}svg [hidden],[hidden]{display:none!important}#lens-diagram,#lens-diagram *{user-select:none;-webkit-user-select:none}
@media(max-width:900px){.workspace{grid-template-columns:1fr}.stage-wrap svg{max-height:none}.segmented{min-width:0;flex:1}.rule-cards{grid-template-columns:1fr}.presets{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){.page{padding:15px 12px 26px}.topbar{align-items:flex-start;flex-direction:column}.top-links{justify-content:flex-start}.panel{box-shadow:5px 5px 0 #112118}.switch-row{flex-direction:column;padding:10px}.stage-wrap{padding:8px}.stage-hint{font-size:13px}.panel-heading{padding:11px}.control-body,.result-body{padding:13px}.ray-toggles{grid-template-columns:1fr}.readouts strong{font-size:18px}}