:root{color-scheme:light;--bg:#edf1e9;--paper:#f8faf5;--ink:#213b2d;--green:#355e48;--muted:#74816f;--border:#d1dccb}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}button,input{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,input:focus-visible,#viewport:focus-visible{outline:3px solid #8cab72;outline-offset:3px}[hidden]{display:none!important}main{max-width:1680px;margin:auto;padding:38px 46px 24px}.eyebrow{margin:0 0 10px;font-size:11px;letter-spacing:1.4px;color:#68796a}h1{font:400 clamp(36px,4.1vw,60px)/1.12 Georgia,"Times New Roman",serif;letter-spacing:-1.6px;margin:0}.subtitle{margin:13px 0 28px;font-size:13px;color:#788574}.scene-card{background:var(--paper);border:1px solid var(--border);border-radius:18px;overflow:hidden}.toolbar{display:flex;align-items:center;gap:25px;padding:11px 14px;border-bottom:1px solid var(--border);height:65px}.active-tab{padding:10px 23px;background:var(--green);color:#fff;border-radius:10px;font-size:13px}.toolbar>p{font-size:12px;color:#788675;margin:0;flex:1;text-align:center}.toolbar>p>span{margin:0 5px}.toolbar-end{display:flex;gap:18px;align-items:center}.mode{padding:10px 21px;border-radius:10px;background:var(--green);color:#fff;font-size:13px}.toolbar button{background:none;border:0;color:#70816a;font-size:19px;padding:8px 0}.toolbar button span{font-size:11px;margin-left:4px}.toolbar button:hover{color:var(--green)}#viewport{height:clamp(400px,calc(100vh - 370px),800px);min-height:400px;position:relative;overflow:hidden;background:#f3f6ee;touch-action:pan-y}#viewport canvas{display:block;width:100%;height:100%}#connectors,#markers,#callouts{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;overflow:hidden}#connectors{z-index:1}#connectors path{fill:none;stroke:#859b7b;stroke-width:1.25;stroke-dasharray:3 4;opacity:.7;transition:opacity .15s}#connectors path.selected{stroke:#315c40;stroke-width:1.7;stroke-dasharray:none;opacity:1}#connectors path.occluded{opacity:0}.marker{position:absolute;width:29px;height:29px;background:var(--green);color:white;border:3px solid #fffdf7;border-radius:50%;font-size:11px;transform:translate(-50%,-50%);pointer-events:auto;box-shadow:0 2px 8px #29452a25;transition:opacity .15s,box-shadow .15s}.marker.selected{background:#234b32;box-shadow:0 0 0 5px #acc89270}.marker.occluded{opacity:0;visibility:hidden;pointer-events:none}.callout{position:absolute;display:flex;align-items:center;gap:9px;width:222px;height:43px;border:1px solid #cfdbc7;border-radius:10px;background:#f7faf2ef;color:#334b34;pointer-events:auto;padding:7px 10px;text-align:left;font-size:11px;transition:opacity .15s,background .15s}.callout:hover,.callout.selected{background:#e3ecd9;border-color:#a6bb95}.callout.occluded{opacity:.45}.callout .num,.mobile-callout .num{display:flex;align-items:center;justify-content:center;flex:none;width:23px;height:23px;border-radius:50%;background:var(--green);color:#fff;font-size:10px}.callout .title{flex:1;line-height:1.25}.scene-caption{position:absolute;top:16px;left:20px;display:flex;align-items:center;gap:6px;color:#82937a;font-size:9px;letter-spacing:.5px;pointer-events:none;z-index:3}.scene-caption>span{width:5px;height:5px;border-radius:50%;background:#8da274}.view-controls{position:absolute;bottom:17px;left:50%;transform:translateX(-50%);z-index:3;display:flex;gap:3px;border:1px solid #d2ddc9;border-radius:11px;padding:4px;background:#f9fcf5ed;white-space:nowrap;box-shadow:0 3px 14px #3655230b}.view-controls button{background:none;border:0;border-radius:7px;padding:8px 13px;color:#73846a;font-size:10px}.view-controls button:hover,.view-controls button[aria-pressed=true]{background:#e2ecd8;color:#355c3e}.scene-footer{display:flex;align-items:center;gap:24px;padding:15px 22px;border-top:1px solid var(--border);color:#6f7f64;font-size:10px}.legend{display:flex;gap:20px;align-items:center;flex:1}.legend>span{display:flex;gap:6px;align-items:center;white-space:nowrap}.legend i{width:12px;height:12px;border:1px solid #b9c6ad;border-radius:3px}.green{background:#d0dfc0}.stone{background:#c8c3a6}.wood{background:#b2a17d}.light{background:#e3c36d}.scene-footer label{display:flex;gap:5px;align-items:center;white-space:nowrap;cursor:pointer}.scene-footer input{accent-color:var(--green);margin:0}.footer-note{color:#89947f}.info-panel{scroll-margin-block:16px;display:flex;align-items:start;gap:16px;border:1px solid #c6d8be;border-radius:12px;background:#e4eddf;padding:19px 22px;margin-top:18px;min-height:86px}.info-panel h2{font-size:13px;font-weight:500;margin:0 0 4px;color:#3a6143}.info-panel p{margin:0;color:#65815f;font-size:11px;line-height:1.65}.info-icon{display:flex;align-items:center;justify-content:center;flex:none;width:28px;height:28px;border-radius:50%;background:#cfdcc7;color:#55754a;margin-top:2px}.info-panel>div{flex:1}.info-panel>button{border:0;background:transparent;color:#79906c;font-size:23px;line-height:1;padding:0}.disclaimer{text-align:right;font-size:9px;color:#8b9682;margin:12px 1px 0}#mobile-list{display:none}#loading{position:absolute;inset:0;z-index:5;background:#f3f6ee;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:30px}#loading strong{font-family:Georgia,serif;font-weight:400;font-size:24px;margin-top:15px}#loading p{color:#829276;font-size:12px;max-width:320px}#loading button{background:var(--green);color:white;border:0;border-radius:8px;padding:10px 20px;margin-top:10px}.spinner{width:27px;height:27px;border:2px solid #d8e3ce;border-top-color:#72955c;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media(min-width:1500px){.callout{width:242px;font-size:12px}}@media(max-width:1150px){main{padding:30px 25px}.callout{width:190px;font-size:10px;padding:7px 8px;gap:7px}.toolbar{gap:10px}.toolbar>p{font-size:10px}.footer-note{display:none}.scene-footer{gap:14px}.legend{gap:15px}}@media(max-width:800px){main{padding:25px 14px 18px}.eyebrow{font-size:9px;letter-spacing:1px}h1{font-size:37px;letter-spacing:-1px;max-width:500px}.subtitle{font-size:11px;margin:12px 0 22px}.toolbar{height:58px;padding:9px;gap:8px}.active-tab{font-size:11px;padding:9px 14px}.toolbar>p{display:none}.toolbar-end{margin-left:auto;gap:16px}.mode{padding:9px 16px;font-size:12px}.toolbar button span{font-size:10px}#viewport{height:56vh;min-height:390px;max-height:650px}#callouts,#connectors{display:none}.scene-caption{left:14px;top:14px;font-size:8px}.view-controls{bottom:13px}.view-controls button{font-size:9px;padding:8px 11px}.marker{width:29px;height:29px;font-size:10px}#mobile-list{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:13px;border-top:1px solid var(--border);background:#f3f7ed}.mobile-callout{display:flex;align-items:center;gap:7px;border:1px solid #d7e1cf;border-radius:8px;padding:7px 8px;background:#fafcf7;text-align:left;font-size:10px;min-height:39px}.mobile-callout.selected{background:#e1ecd7;border-color:#a8bf98}.mobile-callout.occluded{opacity:.6}.mobile-callout .num{width:21px;height:21px;font-size:9px}.scene-footer{padding:13px;gap:10px;font-size:9px;align-items:start}.legend{flex-wrap:wrap;gap:8px 13px}.legend i{width:10px;height:10px}.info-panel{padding:15px;gap:11px;margin-top:13px}.info-panel h2{font-size:12px}.info-panel p{font-size:10px}.disclaimer{text-align:left;line-height:1.5;font-size:8px}}@media(prefers-reduced-motion:reduce){.spinner{animation:none}.marker,.callout,#connectors path{transition:none}}

.navigation{display:flex;justify-content:center;align-items:center;gap:12px;border-top:1px solid var(--border);padding:10px 16px;background:#f6f9f1}.navigation-label{font-size:11px;color:#738568;margin-right:12px}.navigation-group{display:flex;gap:4px}.navigation button{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;border:1px solid #d1ddc7;border-radius:9px;background:#fcfdf9;font-size:22px;line-height:1;color:#3f6549;touch-action:manipulation}.navigation button:hover{background:#e6efdf;border-color:#afc69e}.navigation button:active{background:#d6e5cd}.touch-help{display:none}.view-controls button{min-height:44px}.toolbar button{min-height:44px;min-width:44px}.callout{min-height:44px}.mobile-callout{min-height:44px}.marker{width:44px;height:44px;isolation:isolate;border:0;background:transparent!important;box-shadow:none!important}.marker::before{content:"";position:absolute;inset:7px;border:3px solid #fffdf7;border-radius:50%;background:var(--green);z-index:-1;box-shadow:0 2px 8px #29452a25}.marker.selected::before{background:#234b32;box-shadow:0 0 0 5px #acc89270}#clear-selection{min-width:44px;min-height:44px;margin:-8px -9px -8px 0;display:flex;align-items:center;justify-content:center}
@media(max-width:800px){.navigation{gap:8px;padding:10px}.navigation-label{display:none}.touch-help{display:block;margin:0;padding:0 12px 11px;background:#f6f9f1;font-size:10px;line-height:1.5;text-align:center;color:#7b8d6e}.view-controls button{padding:8px 9px;min-width:44px}.scene-footer label{min-height:44px}.marker{width:44px;height:44px}.navigation button{flex:none}}
@media(max-width:370px){.navigation{gap:5px;padding:8px 3px}.navigation-group{gap:1px}.navigation button{min-width:44px}}

@media(max-width:350px){.navigation{flex-wrap:wrap}.navigation>.navigation-group:first-of-type{flex-basis:100%;justify-content:center}}