:root{--ink:#ecede7;--light:#b9c1b7;--muted:#97a79e;--panel:#14201eef;--line:#9eafa345;--sand:#e4c096;--green:#b4cbbc;--dark:#0e1715;font:15px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--dark);color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;display:grid;grid-template-rows:auto minmax(0,1fr);height:100vh;height:100dvh;overflow:hidden}
button,select,input{font:inherit}
button,select{color:inherit}
button{cursor:pointer}
button:focus-visible,select:focus-visible,input:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--sand);outline-offset:3px}
button[hidden],[hidden]{display:none!important}
button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}
.icons{position:absolute;inset:0;width:0;height:0;pointer-events:none}
.top{z-index:10;display:grid;grid-template-columns:minmax(185px,1fr) auto minmax(185px,1fr);gap:14px;align-items:center;background:#101c19;padding:10px 22px;border-bottom:1px solid var(--line);min-height:64px}
.identity{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);width:max-content}
.identity b,.identity small{display:block}
.identity b{font:23px/1 Georgia,serif}
.identity small{font-size:8px;letter-spacing:.17em;color:var(--muted);margin-top:5px}
.mode,.levels{display:flex;align-items:center;gap:4px;padding:4px;border:1px solid var(--line);border-radius:11px;background:#101c1aee}
.mode button,.levels button,.quiet,.control{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:36px;padding:5px 12px;border:1px solid transparent;border-radius:7px;white-space:nowrap;background:transparent;font-weight:600;font-size:13px}
.mode button[aria-pressed=true],.levels button[aria-pressed=true]{background:#344940;color:#f5e5ca;border-color:#a0bba244}
.mode button:hover,.levels button:hover,.quiet:hover,.control:hover{background:#3b5148}
.actions{display:flex;justify-content:end;align-items:center;gap:4px}
.quiet{color:#d4ded5}
.square{width:38px;min-height:38px;padding:4px}
#stage{position:relative;overflow:hidden;isolation:isolate;background:#b8c9bf}
#viewport,#backdrop,.scene-grad,#portals,#overlay-dimensions{position:absolute;inset:0;width:100%;height:100%}
#viewport{background:#bccac1}
#viewport canvas{display:block;width:100%;height:100%;touch-action:none}
#backdrop{object-fit:cover;object-position:60% 55%;z-index:1;pointer-events:none}
.scene-grad{z-index:2;pointer-events:none;background:linear-gradient(0deg,#09110ef0,transparent 21%,transparent 86%,#111d1840)}
body[data-start=true] .scene-grad{background:linear-gradient(90deg,#09110ded 0%,#111a14bd 23%,#0d171240 62%,transparent 90%),linear-gradient(0deg,#070f0cbf,transparent 35%)}
#intro{position:absolute;z-index:3;left:clamp(24px,7vw,115px);top:48%;transform:translateY(-50%);max-width:min(470px,85vw);padding-bottom:10px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:10px;font-weight:720;letter-spacing:.16em;color:var(--green);line-height:1.3}
.eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--sand);box-shadow:0 0 12px #e4c09677}
#intro h1{font:clamp(69px,10.5vw,155px)/.81 Georgia,"Times New Roman",serif;letter-spacing:-.073em;margin:24px 0;color:#fff7e8}
#intro em{font-weight:400;color:var(--sand)}
#intro p{max-width:29em;margin:23px 0;color:#e4e8dd;font-size:clamp(14px,1.5vw,18px)}
.intro-actions{display:flex;gap:10px;flex-wrap:wrap}
.primary,.secondary{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:45px;padding:9px 14px;border-radius:8px;font-weight:700;font-size:13px;border:1px solid transparent}
.primary{color:#1b2721;background:var(--sand);border-color:var(--sand)}
.primary:hover{background:#f7d9b4}
.secondary{background:#12201bce;border-color:#c2d3c27d;color:#f1f4e9}
.secondary:hover{background:#3b5148}
.bottom{z-index:5;position:absolute;bottom:max(14px,env(safe-area-inset-bottom));left:16px;right:16px;display:flex;align-items:flex-end;justify-content:space-between;gap:8px;pointer-events:none}
.bottom>*{pointer-events:auto}
.bottom-right{display:flex;gap:6px}
.control{min-height:42px;border:1px solid #c4d3c366;background:#13201deb;color:#f2f3e9}
.bottom .levels{margin-inline:auto;box-shadow:0 4px 16px #0b17183b}
.position{z-index:3;position:absolute;left:24px;top:20px;max-width:62%;pointer-events:none;border-radius:8px;padding:10px 13px;background:#101c19db;border:1px solid #c5d4c44a}
.position h2{margin:2px 0 0;font:clamp(17px,2vw,26px)/1.05 Georgia,serif}
.panel,dialog{background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 52px #07110d54}
.panel{position:absolute;z-index:6;padding:15px;overflow:auto;scrollbar-width:thin}
.panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.panel-head h2{font:27px/1.05 Georgia,serif;margin:3px 0 5px;overflow-wrap:anywhere}
.close{font:24px/1 -apple-system,sans-serif;background:#2b3c35;border:1px solid transparent;border-radius:7px;width:32px;height:32px;flex:none}
.close:hover{border-color:var(--sand)}
.places{bottom:66px;left:16px;width:min(315px,calc(100% - 32px));max-height:min(69%,535px)}
.room-group{margin:12px 0 4px;color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.room-item{width:100%;display:flex;justify-content:space-between;gap:8px;text-align:left;border:0;border-top:1px solid #a5bfa521;padding:7px 9px;border-radius:4px;background:transparent}
.room-item:hover,.room-item[aria-current=true]{background:#365145}
.room-item small{color:var(--green)}
.piece{right:16px;bottom:67px;width:min(348px,calc(100% - 32px));max-height:69%;border-top:2px solid var(--sand)}
.piece p{color:#cdd8ce;margin:9px 0 13px;font-size:14px}
.piece img{width:100%;height:110px;object-fit:cover;border-radius:7px;margin-top:6px}
.valuation{display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:1px solid var(--line);padding-top:9px}
.valuation span{font-size:9px;color:var(--sand);font-weight:750;letter-spacing:.13em}
.valuation strong{font:24px/1.2 Georgia,serif;text-align:right}
.guide{right:16px;top:14px;width:min(365px,calc(100% - 32px));max-height:64%}
.guide-content{display:grid;grid-template-columns:76px 1fr;align-items:center;gap:9px}
.portrait{height:106px;background:radial-gradient(ellipse at center,#e5d9bf,#aa9f88);border-radius:7px;overflow:hidden;display:grid;place-items:center}
.portrait img,.portrait canvas{width:100%;height:100%;object-fit:contain;min-width:0;min-height:0}
.guide-pick,.play-row{display:flex;gap:6px;align-items:center}
select{min-width:0;background:#253a32;border:1px solid var(--line);border-radius:6px;padding:5px;font-size:13px}
#chapter{flex:1}
.play-row{margin:7px 0}
.play{width:36px;height:33px;flex:none;border:0;border-radius:7px;background:var(--sand);color:#1b2721}
#seek{width:100%;min-width:10px;accent-color:var(--sand)}
#guide-time{font-variant-numeric:tabular-nums;color:var(--muted);font-size:11px}
.jump{background:none;border:0;color:var(--sand);padding:3px 0;text-align:left;font-size:12px}
#captions{margin:9px 0 0;font-size:12px;color:#cfd6ca}
#portals{z-index:3;pointer-events:none}
.portal{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;border:1px solid #c5e1ce85;background:#102320d9;padding:5px 10px;border-radius:20px;white-space:nowrap;font-weight:650;font-size:11px;color:#fff;box-shadow:0 3px 12px #0005}
.portal:hover{background:#34564a}
.portal b{color:var(--sand);margin-right:5px}
#overlay-dimensions{z-index:3;pointer-events:none;overflow:visible}
#movement{z-index:4;position:absolute;left:17px;bottom:69px;text-align:center}
#movement button{touch-action:none;border:1px solid #d3e0cb56;border-radius:7px;background:#172723dc;color:var(--ink);width:36px;height:35px;margin:2px}
#movement button:active{background:#506d5e}
.status,.toast{z-index:8;position:absolute;left:50%;transform:translateX(-50%);text-align:center;max-width:85vw;border:1px solid var(--line);background:#10201beb;padding:8px 14px;border-radius:8px;font-size:13px}
.status{top:15px;display:flex;align-items:center;gap:8px;white-space:nowrap}
.status i{width:10px;height:10px;border:2px solid #687e71;border-top-color:var(--sand);border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#walk-wait{
  position:fixed;inset:0;z-index:20;display:grid;place-items:center;
  padding:20px;background:#efede6;color:#142321;
}
.walk-loader{display:grid;justify-items:center;gap:26px}
.walk-brand{display:flex;align-items:center;gap:13px}
.walk-brand img{display:block;width:52px;height:52px}
.walk-brand span{font:clamp(27px,5vw,33px)/1 Georgia,"Times New Roman",serif;white-space:nowrap}
.walk-load-meter{width:120px;height:2px;overflow:hidden;background:#d8d2c7}
.walk-load-meter::before{content:'';display:block;width:42%;height:100%;background:#8b6945;animation:walk-load 1.25s ease-in-out infinite}
@keyframes walk-load{from{transform:translateX(-100%)}to{transform:translateX(240%)}}
#walk-load-stage{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.toast{bottom:76px}
dialog{color:var(--ink);width:min(810px,calc(100vw - 28px));max-height:calc(100dvh - 32px);padding:0;background:#14221f}
dialog::backdrop{background:#07140ed1}
.dialog-inner{padding:18px}
.dialog-inner .levels{margin:9px 0;width:max-content;max-width:100%}
.plan-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(150px,205px);gap:13px}
.drawing{border:1px solid var(--line);border-radius:9px;background:#0e1916;min-height:245px;display:grid;place-items:center}
#plan{display:block;width:100%;max-height:390px}
#plan .room-shape{fill:#2b4038;stroke:#a2c1a5;stroke-width:.075;cursor:pointer}
#plan .room-shape:hover,#plan .room-shape.selected{fill:#a5815a;stroke:#f3d6ac}
#plan text{pointer-events:none;font:650 .47px -apple-system,sans-serif;fill:#f9f1df;text-anchor:middle}
#plan .dim-value{font-size:.52px;fill:#f8cf9d;paint-order:stroke;stroke:#14221f;stroke-width:.14;stroke-linejoin:round}
.measurement{display:flex;flex-direction:column;align-items:start;padding:6px 2px}
.measurement select{max-width:100%;width:100%;margin:5px 0 9px}
#measure-size{font:clamp(20px,3.4vw,29px)/1.2 Georgia,serif;color:var(--sand);font-variant-numeric:tabular-nums}
#measure-area{margin-top:3px;color:var(--green);font-weight:600}
#measure-note,.dim-note{font-size:12px;color:#abbbae}
#help{width:min(520px,calc(100% - 28px))}
#help p{font-size:14px;color:#d1dcd3}
@media(max-width:760px){
 .top{grid-template-columns:1fr auto;gap:6px 10px;padding:6px 9px}
 .identity b{font-size:21px}
 .identity img{width:29px;height:29px}
 .identity small{font-size:7px}
 .mode{grid-column:1/-1;grid-row:2;justify-self:center;min-width:min(100%,335px)}
 .mode button{flex:1}
 .actions{grid-row:1;grid-column:2}
 .actions .quiet{min-height:32px;padding:4px 5px;font-size:11px}
 #fullscreen{display:none}
 .bottom{left:8px;right:8px;bottom:max(8px,env(safe-area-inset-bottom));flex-wrap:wrap}
 .bottom .levels{order:-1;width:100%;justify-content:center}
 .bottom .levels button{flex:1;min-height:34px;padding-inline:6px}
 .control{min-height:37px;font-size:12px;padding:4px 8px}
 .position{left:8px;top:8px;padding:6px 8px}
 .position .eyebrow{font-size:8px}
 .panel{padding:10px}
 .places{left:8px;bottom:53px;max-height:69%}
 body[data-mode=overview] .places{bottom:96px}
 .piece{right:8px;bottom:54px}
 body[data-mode=overview] .piece{bottom:96px}
 .guide{right:8px;top:58px}
 .panel-head h2{font-size:23px}
 #movement{left:7px;bottom:53px}
 #intro{top:48%}
 .scene-grad{background:linear-gradient(0deg,#09110ed9,transparent 31%)}
 body[data-start=true] .scene-grad{background:linear-gradient(90deg,#09110dca,#111a1452 80%),linear-gradient(0deg,#070f0caa,transparent 35%)}
 #backdrop{object-position:62% center}
 .dialog-inner{padding:12px}
 .plan-layout{grid-template-columns:1fr;gap:5px}
 .drawing{min-height:0}
 #plan{max-height:32vh}
 .measurement{display:grid;grid-template-columns:1fr 1fr;gap:4px 8px;align-items:center}
 .measurement label,.measurement select{grid-column:1/-1;margin:0}
 #measure-note,.measurement .primary{grid-column:1/-1}
 #measure-note{margin:2px 0 3px}
 .dim-note{margin-bottom:0}
}
@media(max-height:475px){
 #intro h1{font-size:clamp(46px,9vw,75px);margin:8px 0}
 #intro p{margin:9px 0}
 .guide{top:8px;max-height:75%}
 .places,.piece{max-height:74%}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;scroll-behavior:auto!important}}
.level-label{fill:#fff2dc;text-anchor:middle;dominant-baseline:middle;font:600 13px -apple-system,sans-serif;letter-spacing:.02em}
.level-pill{fill:#10201aeb;stroke:#a0bba255;stroke-width:1px}
@media(max-width:760px){
 .top{grid-template-columns:minmax(0,1fr) auto}
 .identity{max-width:100%;min-width:0}
 .identity span{min-width:0}
 .identity small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .actions .quiet{gap:4px}
}
@media(max-width:360px){
 .mode{justify-self:stretch;width:100%;min-width:0}
 .mode button{min-width:0;gap:5px;padding-inline:6px;font-size:12px}
 .mode button svg{width:15px;height:15px}
}
#walk-tools{position:absolute;inset:0;z-index:4;pointer-events:none}
.door-marker{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;white-space:nowrap;padding:7px 12px;border:1px solid #ead2b3a0;border-radius:16px;background:#17251fe8;box-shadow:0 3px 18px #0006;color:#f2d5ab;font-weight:670;font-size:12px}
.door-marker:hover,.door-marker:focus-visible{background:#ead0a8;color:#192822}
.guide-content{grid-template-columns:106px 1fr;gap:10px}
.portrait{height:150px;position:relative;background:radial-gradient(ellipse at 42% 26%,#eee2c8,#b3a084)}
.portrait canvas,.portrait img,.portrait svg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.portrait svg{pointer-events:none}
@media(max-width:490px){.guide-content{grid-template-columns:89px 1fr}.portrait{height:133px}}
#plan .room-shape{fill:#293e37;stroke:#8da594}
#plan .room-shape.selected{fill:#8d7153;stroke:#f2d1a6}
#plan .room-shape:hover{stroke:#f7dcb5}
#plan .plan-wall{fill:#c5c6ae;pointer-events:none;opacity:.77}
#plan .plan-furniture{fill:#b6b5a124;stroke:#d7cfab8f;stroke-width:.038;pointer-events:none}
#plan .plan-scale{fill:none;stroke:#b9c3ad;stroke-width:.055}
#plan .plan-scale-text{font-size:.30px;fill:#b9c3ad}