:root{font-family:'Microsoft YaHei','PingFang SC',system-ui,sans-serif;color:#182b3c;background:#eef3f6;font-size:16px;--ink:#11293b;--teal:#087f87;--line:#d7e1e8;--orange:#e8a343}*{box-sizing:border-box}body{margin:0}button,select,input{font:inherit}button,select{cursor:pointer;min-height:38px;padding:7px 13px;border:1px solid #ccd8e0;border-radius:7px;color:var(--ink);background:#fff}button:hover{background:#eaf5f6;border-color:#70aeb3}button:disabled{opacity:.4;cursor:default}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #e8a343;outline-offset:3px}header{height:94px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px 30px;background:#fff;border-bottom:1px solid var(--line)}.brand{display:flex;gap:12px;align-items:center}.logo{display:grid;place-items:center;font-size:35px;width:47px;height:49px;border-radius:12px;background:#143448;color:#84dfe7}.brand small{font-size:12px;letter-spacing:2px;color:#6b8193}h1{font-size:25px;margin:2px 0 0;letter-spacing:2px}.modes{display:flex;padding:4px;background:#edf2f5;border-radius:10px;gap:4px}.modes button{border:0;background:none;min-width:180px;font-weight:bold}.modes small{font-size:12px;font-weight:400;display:block;margin-top:3px;color:#67808d}.modes button[aria-pressed=true]{background:#123c4a;color:#fff;box-shadow:0 3px 9px #16374b20}.modes button[aria-pressed=true] small{color:#a7d9d9}.header-actions{display:flex;gap:8px}.header-actions button{font-size:14px}main{display:grid;grid-template-columns:minmax(0,1fr) 322px;gap:18px;padding:22px 28px 0;max-width:2000px;margin:auto}.workspace{min-width:0}.stage{position:relative;min-height:400px;height:clamp(400px,51vh,650px);background:#0c2031;border-radius:14px;overflow:hidden;box-shadow:0 10px 30px #19334814}#viewport{width:100%;height:100%;touch-action:none}#viewport canvas{display:block;width:100%;height:100%}#loading{position:absolute;inset:0;display:grid;place-items:center;color:#b7d8e7}.scene-top{position:absolute;top:17px;left:18px;right:18px;z-index:2;display:flex;justify-content:space-between;align-items:center;pointer-events:none}.badge{font-size:12px;color:#9cbed0;background:#102b3bcb;padding:8px 11px;border:1px solid #284454;border-radius:6px}.badge b{font-size:14px;color:#d8f9fc;margin-left:10px;font-weight:500}.views{display:flex;gap:4px;pointer-events:auto}.views button{color:#b4cbd8;background:#122f41;border:1px solid #35576a;font-size:13px;min-height:32px;padding:6px 10px}.views button[aria-pressed=true]{color:#fff;background:#2f5669;border-color:#85b5c7}.layerbar{position:absolute;top:67px;left:18px;display:flex;gap:16px;background:#102738de;padding:9px 12px;border-radius:6px;color:#c3d7e2;font-size:13px;z-index:2}.layerbar label{display:flex;gap:5px;align-items:center;cursor:pointer}.layerbar input{accent-color:#66d3d8;margin:0;width:15px;height:15px}i{width:8px;height:8px;display:inline-block;border-radius:50%;flex-shrink:0}.gold{background:#ffbe64}.cyan{background:#65dce5}.blue{background:#7db7ff}.stage-bottom{position:absolute;bottom:14px;left:18px;right:18px;color:#90adbf;font-size:11px;display:flex;justify-content:space-between;pointer-events:none}#range-note{position:absolute;bottom:43px;left:50%;transform:translateX(-50%);background:#26323b;color:#ffd298;border:1px solid #7c6748;padding:8px 13px;border-radius:7px;font-size:13px;max-width:90%;white-space:nowrap}.controls{margin-top:14px;padding:17px 20px;background:#fff;border:1px solid var(--line);border-radius:12px}.sliders{display:grid;grid-template-columns:1fr 1fr;gap:28px}.slider-row label{display:flex;align-items:center;gap:7px;font-size:14px}.slider-row strong{margin-left:auto;font-size:22px;font-family:Consolas,monospace;font-weight:500}.slider-row strong small{font-size:12px;color:#718696}input[type=range]{width:100%;accent-color:#128f98;cursor:pointer;height:24px;margin:8px 0 3px}#object-distance{accent-color:#d99537}.ends{display:flex;justify-content:space-between;font-size:11px;color:#78909e;min-height:23px;align-items:center}.ends button{font-size:12px;color:#07717c;border:0;padding:0;min-height:20px;background:none}.presets{border-top:1px solid #e6edf1;padding-top:12px;margin-top:11px;display:flex;gap:7px;align-items:center}.presets>span{font-size:12px;color:#6f8595;margin-right:4px}.presets button{font-size:13px;flex:1;padding:5px 7px;min-height:31px;white-space:nowrap}.presets button.active{background:#e3f3f3;color:#007780;border-color:#82bcbf}.presets select{font-size:12px;padding:4px;min-height:31px}aside{display:flex;flex-direction:column;gap:16px;min-width:0}.observation,.explanation{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px}.section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.eyebrow{font-size:12px;letter-spacing:2px;color:#6a8393}.tag{font-size:11px;border-radius:5px;background:#eef3f5;color:#647a89;padding:4px 7px}.tag.sharp{color:#147165;background:#e0f3e9}.screen-preview{position:relative;display:flex;flex-direction:column;background:#19232b;border-radius:8px;overflow:hidden}.screen-preview canvas{width:100%;height:auto;display:block}.screen-preview>span{order:-1;display:block;padding:9px 8px;text-align:center;font-size:14px;line-height:1.5;font-weight:500;color:#355565;background:#edf3f5;border-bottom:1px solid #cbdbe1}.observation>p{font-size:13px;line-height:1.7;color:#6b8090;margin:12px 0 0}#eye-view{width:100%;margin-top:12px;font-size:13px;color:#087f87;background:#eaf8f8;border-color:#9cc9ce}.explanation h2{font-size:22px;line-height:1.5;margin:10px 0}.explanation>p{font-size:14px;line-height:1.8;color:#667d8d;margin:0}#reveal{width:100%;margin-top:14px;border-color:#88b8bd;color:#087681;background:#f1fafa;font-size:13px;text-align:left}#reveal span{float:right}#result{border-top:1px solid #e2eaee;margin-top:15px;padding-top:14px}.result-tags{display:flex;gap:6px}.result-tags b{background:#eef6f7;color:#0d7680;padding:5px 10px;border-radius:5px;font-size:14px;font-weight:500}.result-distance{display:flex;justify-content:space-between;margin-top:14px;align-items:center;font-size:13px;color:#708795}.result-distance strong{font-size:20px;color:#1c5268;font-family:Consolas,monospace}#result-note{font-size:12px;color:#6d8593;line-height:1.6;margin-bottom:0}.mode-note{font-size:12px;line-height:1.7;color:#6f8592;padding:0 10px}.rules{grid-column:1 / -1;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}.rules-head{display:flex;gap:16px;align-items:center;padding:15px 20px;border-bottom:1px solid #e5ecef}.rules h2{font-size:16px;margin:0}.rules-head p{font-size:12px;color:#758b97;margin:0}.rules-head>span{margin-left:auto;color:#42818a;font-size:12px}table{width:100%;border-collapse:collapse;text-align:center;font-size:14px}th{font-size:12px;color:#78909d;font-weight:500;background:#f8fafb;padding:10px}td{padding:10px;border-top:1px solid #edf1f3;height:42px}tr.current{background:#edf8f7}tr.current td:first-child{color:#087983;font-weight:bold;box-shadow:inset 3px 0 #188d93}.concealed{color:#a1b0b9;font-size:12px}footer{padding:15px 30px 20px;display:flex;justify-content:space-between;font-size:11px;color:#8194a0;gap:18px}dialog{border:1px solid #9ebcc8;border-radius:16px;max-width:680px;width:90%;padding:26px;color:#17394d}dialog::backdrop{background:#092434b8;backdrop-filter:blur(5px)}dialog h2{font-size:22px}dialog canvas{width:100%;background:#122938;border-radius:10px}dialog p{font-size:14px;line-height:1.8;color:#527083}#close-eye{float:right;font-size:25px;border:0;min-height:20px;padding:0 6px}[hidden]{display:none!important}@media(min-width:1600px){main{grid-template-columns:minmax(0,1fr) 360px}.explanation h2{font-size:25px}.explanation>p{font-size:16px}table{font-size:16px}.layerbar{font-size:15px}.stage-bottom{font-size:12px}}@media(max-width:1100px){header{padding:14px 18px;gap:10px}.modes button{min-width:140px}main{padding:16px;gap:12px;grid-template-columns:minmax(0,1fr) 286px}.observation,.explanation{padding:15px}.presets{flex-wrap:wrap}.presets>span{display:none}.layerbar{gap:9px;font-size:11px}.controls{padding:14px}.sliders{gap:18px}.stage-bottom span:last-child{display:none}}@media(max-width:850px){header{height:auto;flex-wrap:wrap}.brand{flex:1}.modes{order:3;width:100%}.modes button{flex:1}main{grid-template-columns:1fr}.stage{height:480px}aside{display:grid;grid-template-columns:1fr 1fr}.mode-note{grid-column:1/-1}.rules{grid-column:1}.table-wrap{overflow:auto}footer{display:block;line-height:1.7}footer span{display:block}}@media(max-width:520px){main{padding:10px}.logo{display:none}h1{font-size:22px}.stage{height:430px}.scene-top{left:10px;right:10px;flex-wrap:wrap;gap:9px}.badge{font-size:10px}.badge b{font-size:11px}.views button{font-size:11px;padding:5px}.layerbar{left:10px;right:10px;top:68px;flex-wrap:wrap;font-size:11px;gap:8px}.stage-bottom{left:10px;right:10px;font-size:10px}.sliders{grid-template-columns:1fr;gap:13px}.presets button{font-size:11px}.presets select{width:100%}aside{grid-template-columns:1fr}.observation .screen-preview{max-width:360px;margin:auto}.rules-head{flex-wrap:wrap;gap:8px}.rules-head>span{margin-left:0;font-size:10px}table{font-size:11px;min-width:460px}th{font-size:10px}td{padding:8px}.header-actions button{font-size:12px;padding:5px 9px}}

.violet{background:#dfa0ff}.layerbar{flex-wrap:wrap;max-width:calc(100% - 36px)}#third-note{position:absolute;bottom:39px;left:18px;right:18px;color:#e1c0f4;background:#182d40e8;border-left:3px solid #bb85d7;padding:7px 10px;font-size:12px;line-height:1.6;pointer-events:none}#range-note{bottom:100px}@media(max-width:520px){.badge b{display:inline-block}.scene-top{align-items:flex-start}.layerbar{top:96px;max-width:calc(100% - 20px)}#third-note{font-size:11px;left:10px;right:10px;bottom:45px}}

.stage-bottom>span:first-child{color:#ffe0a3;background:rgba(5,20,32,.88);border:1px solid rgba(255,208,122,.32);border-radius:5px;padding:6px 10px;font-size:12px;line-height:1.5;font-weight:500;box-shadow:0 2px 8px #0002}.stage-bottom{align-items:center;gap:10px}.stage-bottom>span:last-child{flex-shrink:0}@media(max-width:520px){.stage-bottom>span:first-child{font-size:11px;padding:5px 8px}}