:root{color-scheme:dark;--bg:#0e1418;--panel:#141d22;--border:#29343a;--text:#e7ece9;--muted:#87969b;--lime:#c5ec99;--green:#7ee1b8;--mono:'IBM Plex Mono',ui-monospace,monospace;font-family:'DM Sans','PingFang SC','Microsoft YaHei',sans-serif;font-synthesis:none}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-size:13px}button,input,select{font:inherit}button{cursor:pointer}button:disabled{cursor:wait;opacity:.45}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--lime);outline-offset:4px}button{border:1px solid var(--border);border-radius:7px;color:var(--text);background:#1a252b;transition:background .15s,border-color .15s}button:hover{background:#253239;border-color:#55625e}button:active{transform:translateY(1px)}button.quiet{background:transparent;border-color:transparent;padding:8px 10px;color:#b0bdbf}button.quiet:hover{background:#202c31;color:var(--text)}button.primary{background:var(--lime);color:#14201b;border-color:var(--lime);font-weight:600;padding:12px 16px}button.primary:hover{background:#dbffb0}.wide{width:100%}.topbar{height:92px;border-bottom:1px solid var(--border);padding:0 34px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;gap:14px;align-items:center}.brand-symbol{font-size:48px;color:var(--lime);line-height:1}.eyebrow{font:10px var(--mono);letter-spacing:1.5px;color:var(--muted)}h1{font-size:22px;letter-spacing:1px;font-weight:500;margin:5px 0 0}.version{font:17px var(--mono);color:#708078}.header-right{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:11px}.header-right button{margin-left:22px}.live-dot,.status-dot{width:6px;height:6px;border-radius:50%;background:var(--lime);display:inline-block}.live-dot{box-shadow:0 0 10px #c5ec9940}main{max-width:1800px;margin:auto;display:grid;grid-template-columns:252px minmax(0,1fr);min-height:calc(100vh - 92px)}.sidebar{padding:27px 22px 18px 26px;border-right:1px solid var(--border);display:flex;flex-direction:column}.section-label{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);letter-spacing:.3px}.tiny{font:9px var(--mono);color:#8b9a9e}.sidebar h2{font-size:17px;font-weight:500;margin:12px 0 18px}.topologies{display:grid;gap:7px}.topologies button{display:flex;gap:14px;align-items:center;text-align:left;padding:11px 13px;background:transparent}.topologies button.selected{border-color:#b8df92;background:#c5ec990b}.topologies button.selected .shape{color:var(--lime)}.shape{font:35px sans-serif;line-height:1;width:35px;color:#9babae;text-align:center}.topologies button>span+span{font-size:12px}.topologies small{display:block;font-size:10px;margin-top:5px;color:var(--muted)}label{display:block;font-size:11px;margin:19px 0 8px;color:#b9c4c5}label span{float:right;font-size:9px;color:var(--muted)}input:not([type=checkbox]):not([type=range]),select{width:100%;padding:10px 11px;background:#10191e;border:1px solid #303d42;color:#d2dcda;border-radius:5px;font-size:11px}input#seed{font-family:var(--mono);letter-spacing:.3px}.seed-row{display:flex;gap:6px}.seed-row button{width:35px;flex-shrink:0;font-size:20px}.sidebar .primary{margin-top:13px;text-align:left;display:flex;justify-content:space-between}.geometry-note{font-size:10px;color:#92a2a5;line-height:1.8;min-height:36px;margin:13px 0 0}.render-section{border-top:1px solid var(--border);margin-top:22px;padding-top:22px}.toggle-row{display:flex;align-items:center;justify-content:space-between;margin-top:15px}.toggle-row label{margin:0}.toggle-row input{appearance:none;width:30px;height:17px;border-radius:20px;background:#3e4c51;position:relative;cursor:pointer}.toggle-row input:before{content:'';display:block;position:absolute;left:3px;top:3px;width:11px;height:11px;border-radius:50%;background:white}.toggle-row input:checked{background:#819e64}.toggle-row input:checked:before{left:16px}output{float:right;font:10px var(--mono);color:var(--lime)}input[type=range]{width:100%;height:3px;accent-color:var(--lime);cursor:pointer;margin:10px 0}.range-ticks{display:flex;justify-content:space-between;color:#73868c;font-size:9px}.subtle{color:var(--muted);font-size:10px;line-height:1.8}.sidebar-footer{padding-top:22px;margin-top:auto;display:flex;gap:7px;align-items:center;font-size:9px;color:#6e848b}.workspace{padding:27px 30px 24px;min-width:0}.view-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.view-heading h2{margin:7px 0 0;font-size:22px;letter-spacing:.6px;font-weight:500}.view-actions{display:flex;gap:6px}.viewport{position:relative;aspect-ratio:1.85;background:#1c2a31;border-radius:9px;border:1px solid #3d4b50;overflow:hidden;isolation:isolate;min-height:270px}.viewport:fullscreen{height:100vh;width:100vw;border-radius:0;aspect-ratio:auto}.viewport canvas#scene{display:block;width:100%;height:100%;object-fit:fill;outline:none}.view-top,.view-bottom{position:absolute;left:22px;right:22px;display:flex;align-items:center;justify-content:space-between;pointer-events:none}.view-top{top:18px}.view-top>span{font:10px var(--mono);color:#d9e4e7;background:#0c191d99;border:1px solid #a2c1c330;padding:7px 9px;border-radius:4px;backdrop-filter:blur(8px)}.view-bottom{bottom:20px}.crosshair{position:absolute;left:50%;top:50%;width:5px;height:5px;border:1px solid #f4ffe8ab;border-radius:50%;pointer-events:none}.direction-widget{display:flex;gap:10px;align-items:center;background:#08151b9c;padding:8px 11px;border:1px solid #a2c1c330;border-radius:5px}.direction-widget strong{display:block;font:11px var(--mono);margin-top:3px}.direction-arrow{color:var(--lime);font-size:24px;display:inline-block}.avatar-key{display:flex;gap:6px;align-items:center;font-size:9px;color:#e0e5e6;text-shadow:0 1px 3px black;background:#07151b90;border-radius:5px;padding:8px}.front-swatch,.back-swatch{width:6px;height:6px;border-radius:2px;background:#ffac36}.back-swatch{background:#4c9fe4;margin-left:8px}.control-deck{display:flex;align-items:center;gap:20px;border:1px solid var(--border);border-radius:8px;margin-top:14px;padding:15px;background:#162025}.controls{display:flex;gap:8px;flex:1}.action{display:flex;align-items:center;justify-content:center;gap:11px;padding:12px;flex:1;min-height:62px;text-align:left}.action>span:not(.action-icon){white-space:nowrap;font-size:11px}.action small{display:block;font:9px var(--mono);color:var(--muted);margin-top:4px}.action-icon{font-size:24px;color:#a6b5b9}.action.forward{border-color:#789866;background:#c5ec9910}.action.forward .action-icon{color:var(--lime)}kbd{font:9px var(--mono);color:#72888e;border:1px solid #3c4b50;padding:3px 4px;border-radius:4px;white-space:nowrap;margin-left:auto}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding-left:20px;border-left:1px solid #344249}.stats strong{display:block;font:20px var(--mono);font-weight:400}.stats span{display:block;font-size:9px;color:var(--muted);margin-top:6px;white-space:nowrap}.underbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:7px;color:var(--muted);font-size:10px}.underbar>div{display:flex;white-space:nowrap}.underbar button{font-size:10px!important}.green{color:var(--green)}.technical{margin-top:17px;border-top:1px solid #26353b;padding-top:15px;font-size:10px;color:var(--muted)}.technical summary{cursor:pointer;color:#a2b2b4}.technical summary>span{float:right;font:9px var(--mono);color:#71878e}.technical-body{max-width:850px;line-height:1.8;padding:6px 0}.technical-body button{font-size:10px}.technical-body #benchmark-result{margin-left:10px;font:10px var(--mono);color:var(--lime)}.toast{position:absolute;bottom:86px;left:50%;transform:translateX(-50%);padding:11px 16px;border:1px solid #f2c98770;border-radius:6px;background:#282720e8;color:#ffe2ae;opacity:0;transition:opacity .2s;pointer-events:none;white-space:nowrap;font-size:12px}.toast.show{opacity:1}.map-panel{position:absolute;right:16px;top:60px;width:min(280px,65%);background:#101d24f5;border:1px solid #718a83;border-radius:8px;box-shadow:0 10px 40px #0008;backdrop-filter:blur(15px);padding:12px}.map-title{display:flex;align-items:center;justify-content:space-between;font-size:10px;color:#c0cdc9}.map-title button{border:0;background:none;padding:0 4px;font-size:20px;color:var(--muted)}#map{display:block;width:100%;height:auto;margin-top:10px}.map-legend{display:flex;justify-content:center;gap:15px;font-size:9px;color:var(--lime);padding:8px}.map-panel .quiet{font-size:10px}.win{position:absolute;inset:0;background:#0c171edb;backdrop-filter:blur(8px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.win[hidden],.error[hidden],.map-panel[hidden]{display:none}.win-icon{font-size:50px;color:var(--lime);margin-bottom:15px}.win h2{font-size:26px;font-weight:500;margin:12px 0}.win p{color:#a7baba;margin-bottom:22px;font-size:12px}.win button{margin:0 4px}.error{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:35px;color:#ffd8a1;background:#151d21;line-height:1.9}dialog{background:#172328;color:var(--text);border:1px solid #4c605e;border-radius:12px;max-width:610px;width:calc(100% - 32px);padding:34px;box-shadow:0 20px 100px #0008}dialog::backdrop{background:#050b10b8;backdrop-filter:blur(4px)}dialog h2{font-size:24px;font-weight:500;line-height:1.5}dialog h3{font-size:12px;color:var(--lime);margin:23px 0 8px}dialog p{font-size:12px;color:#b3c2c3;line-height:1.9}dialog a{color:var(--green)}.dialog-close{position:absolute;right:14px;top:12px;border:0;background:none;font-size:26px}dialog code{color:#d1e5b9;font-size:11px}.mobile-note{display:none}@media(min-width:1550px){.viewport{aspect-ratio:1.95}.sidebar{padding-top:32px}.workspace{padding:32px 40px}}@media(max-width:1250px){.control-deck{display:block}.stats{border-left:0;border-top:1px solid #344249;padding:14px 4px 0;margin-top:14px;display:flex;justify-content:space-between}.stats>div{display:flex;align-items:center;gap:8px}.stats span{margin:0}.stats strong{font-size:17px}.underbar{align-items:flex-start;flex-direction:column;gap:0}kbd{display:none}}@media(max-width:850px){.topbar{padding:0 18px;height:75px}.header-right>span{display:none}.header-right button{margin:0}.brand-symbol{font-size:36px}h1{font-size:19px}.eyebrow{font-size:8px}main{display:flex;flex-direction:column-reverse;min-height:0}.workspace{padding:20px 16px}.sidebar{border-right:0;border-top:1px solid var(--border);display:grid;grid-template-columns:1.2fr 1fr;gap:24px;padding:25px 20px}.render-section{border-top:0;border-left:1px solid var(--border);padding:0 0 0 24px;margin:0}.sidebar-footer{grid-column:1/-1;padding:0}.topologies{grid-template-columns:repeat(3,1fr)}.topologies button{display:block;text-align:center;padding:10px 3px}.topologies .shape{display:block;margin:auto auto 8px}.topologies small{font-size:8px}.topologies button>span+span{font-size:10px}.view-heading h2{font-size:19px}.viewport{aspect-ratio:1.5}.control-deck{padding:10px}.action{gap:8px;padding:10px 7px}.action-icon{font-size:21px}.view-top,.view-bottom{left:12px;right:12px}.avatar-key{display:none}.stats{gap:5px}.stats span{font-size:8px}.underbar p{line-height:1.8}.technical summary>span{font-size:8px}.geometry-note{min-height:0}}@media(max-width:480px){.sidebar{grid-template-columns:1fr}.render-section{border-left:0;border-top:1px solid var(--border);padding:22px 0 0}.viewport{aspect-ratio:1.1}.view-top>span{font-size:8px;padding:5px}.view-heading{margin-bottom:13px}.view-actions button{font-size:10px}.action>span:not(.action-icon){font-size:10px}.action small{font-size:8px}.stats>div{display:block}.stats span{margin-top:4px}.win h2{font-size:20px}.win p{font-size:10px}.technical summary>span{float:none;display:block;margin-top:8px}.map-panel{top:45px}}

@media(min-width:851px){.viewport{height:clamp(280px,48vh,650px);aspect-ratio:auto}.sidebar{max-height:calc(100vh - 92px);overflow-y:auto;scrollbar-width:thin}}
.map-panel{max-height:calc(100% - 76px);overflow-y:auto;scrollbar-width:thin}
/* Keep the review map beside, rather than over, the first-person observation. */
.scene-review{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:14px;align-items:stretch}
.scene-review.map-hidden{grid-template-columns:minmax(0,1fr)}
.map-panel{position:static;top:auto;right:auto;width:auto;max-height:none;min-width:0;height:clamp(280px,48vh,650px);overflow:hidden;display:flex;flex-direction:column;box-shadow:none;backdrop-filter:none;background:#101d24;border-color:#3d4b50;padding:12px}
.map-panel[hidden]{display:none}.map-title{flex-shrink:0}.map-title button{cursor:pointer;font-size:21px;padding:0 4px}.map-meta{font-size:9px;color:#839c9e;margin:4px 0 8px;flex-shrink:0}.map-drawing{display:flex;align-items:center;justify-content:center;flex:1;min-height:0;overflow:hidden}
#map{display:block;margin:0;width:100%;height:100%;object-fit:contain;max-width:100%;max-height:100%}.map-legend{flex-shrink:0;padding:6px 0}.map-panel #hint{padding:5px;font-size:9px;flex-shrink:0}
.large-map-dialog{max-width:min(900px,95vw);padding:18px}.large-map-dialog h2{font-size:16px;margin:0}#large-map{display:block;max-width:100%;height:min(72vh,800px);width:100%;object-fit:contain;margin-top:10px}
@media(max-width:1300px) and (min-width:851px){.scene-review{grid-template-columns:minmax(0,1fr) 240px}.avatar-key{display:none}.view-top,.view-bottom{left:12px;right:12px}.view-top>span{font-size:8px;padding:5px}}
@media(max-width:1000px) and (min-width:851px){.scene-review{grid-template-columns:minmax(0,1fr) 200px}}
@media(max-width:850px){.scene-review{grid-template-columns:minmax(0,1fr) 220px}.scene-review .viewport{height:340px;aspect-ratio:auto}.map-panel{height:340px}.map-meta{font-size:8px}.view-top>span{font-size:8px;padding:5px}.view-top,.view-bottom{left:10px;right:10px}}
@media(max-width:600px){.scene-review{grid-template-columns:1fr}.scene-review .viewport{height:330px}.map-panel{height:300px}.map-drawing{min-height:170px}.view-top>span{font-size:9px}.map-panel .map-legend{justify-content:center;gap:25px}}