:root{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#262d33;background:#f3f5f7;line-height:1.5}
*{box-sizing:border-box}body{margin:0;height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden}
[hidden]{display:none!important}header{display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding:12px 20px;border-bottom:1px solid #c0cbd3}
a{color:#175a88}h1{font-size:1.15rem;margin:0;letter-spacing:-.025em}h2{font-size:.95rem;margin:22px 0 10px}h2:first-child{margin-top:0}
.title{margin-right:auto}.title span,footer,.view-note{font-size:.8rem;color:#4d5c67}nav{display:flex;gap:6px}
button,select{font:inherit;font-size:.88rem;color:inherit;background:white;border:1px solid #8b98a3;border-radius:6px;padding:9px 12px;min-height:44px}
button{cursor:pointer}button:hover,select:hover{background:#e8edf1}button[aria-pressed=true]{background:#d8e4ec;border-color:#226b9b}
button:disabled{opacity:.55;cursor:default}:focus-visible{outline:3px solid #226b9b;outline-offset:2px}
body.pseudo-fullscreen{position:fixed;inset:0;width:100vw;height:100dvh;z-index:10000}
main{display:grid;grid-template-columns:minmax(0,1fr);min-height:0;position:relative}
#stage{position:relative;min-width:0;min-height:0;background:#e1e7eb}canvas{width:100%;height:100%;display:block;touch-action:none;cursor:grab}
canvas:active{cursor:grabbing}.view-note{position:absolute;bottom:14px;left:16px;background:#f3f5f7;padding:6px 10px;border:1px solid #c0cbd3;pointer-events:none;max-width:calc(100% - 32px)}
#dimension-overlay{position:absolute;inset:0;overflow:hidden;pointer-events:none}
#dimension-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.dimension-line-halo{stroke:#f3f5f7;stroke-width:4;vector-effect:non-scaling-stroke}
.dimension-line{stroke:#26333f;stroke-width:1.5;stroke-dasharray:4 3;vector-effect:non-scaling-stroke}
#dimension-labels{position:absolute;inset:0}
.dimension-label{position:absolute;width:min(220px,calc(100vw - 32px));padding:4px 7px;background:#26333ff2;color:#fff;border:1px solid #c0cbd3;border-radius:4px;font-size:10px;line-height:1.3;box-shadow:0 2px 6px #18232d66;overflow-wrap:anywhere}
.dimension-label strong{font-size:10px;color:#fff}
.dimension-label span{display:block}
.dimension-note{font-size:.78rem;line-height:1.45;color:#465561;margin:4px 0 10px}
#loading{position:absolute;inset:0;display:grid;align-content:center;justify-items:center;background:#e1e7eb;text-align:center;padding:24px}
#loading h2{font-size:1.2rem}#loading p{max-width:50ch}#retry{margin-top:14px}
aside{position:absolute;z-index:3;right:0;top:0;bottom:0;width:min(360px,38vw);overflow-y:auto;min-height:0;padding:20px;border-left:1px solid #c0cbd3;background:#f3f5f7;font-size:.88rem;box-shadow:-6px 0 20px #26333f20}
.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
.panel-heading h2{margin:0}
#panel-close{min-height:44px}
#panel-backdrop{display:none}
.compact-label{display:none}
.field{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:8px 0}.field select{max-width:170px;min-width:0}
#layers label,details label{display:flex;align-items:center;gap:8px;min-height:36px}input[type=checkbox]{width:18px;height:18px;accent-color:#226b9b;flex-shrink:0}
.swatch{display:inline-block;width:12px;height:12px;border-radius:50%;flex-shrink:0}
.normal{background:#1447cc}.backup{background:#f28712}.data{background:#1a8c47}.cold{background:#05adcc}.hot{background:#d6241a}.waste{background:#7d2ea3}.vent{background:#ba59c7}
.presets{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0}.presets button{padding:8px;font-size:.8rem}
summary{cursor:pointer;min-height:40px;display:list-item;padding-top:8px;font-weight:600}
.selection{margin-top:22px;padding-top:16px;border-top:1px solid #c0cbd3}.selection p{overflow-wrap:anywhere}.selection button{margin-top:8px}
.limits{margin-top:16px}.limits ul{padding-left:20px;margin:8px 0}.limits li{margin:10px 0}
footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px 16px;border-top:1px solid #c0cbd3;padding:8px 20px}footer p{margin:0}
#movement{position:absolute;bottom:16px;left:16px;display:flex;align-items:end;gap:12px;max-width:calc(100% - 32px)}
#services-stick{position:relative;width:112px;height:112px;flex:0 0 112px;border-radius:50%;touch-action:none;user-select:none;background:#f3f5f7;border:2px solid #8b98a3;padding:0;box-shadow:0 4px 12px #26333f26}
.stick-knob{position:absolute;left:35px;top:35px;width:38px;height:38px;border-radius:50%;background:#226b9b;pointer-events:none}
.stick-label{position:absolute;bottom:6px;left:0;width:100%;font-size:.72rem;pointer-events:none}
.height-controls{display:flex;flex-direction:column;gap:6px}
#movement button{touch-action:none;user-select:none;min-width:56px}
#movement button[aria-pressed=true]{background:#d8e4ec;border-color:#226b9b}
.walk-mode #view-note{left:auto;right:12px;max-width:42%}
#trace-route,#clear-trace,#clear{margin:6px 6px 0 0}
#trace-status{font-size:.8rem;line-height:1.45}
@media(max-width:760px){
  header{gap:8px;padding:8px 10px;display:grid;grid-template-columns:minmax(0,1fr) auto}
  header>a{font-size:.78rem;grid-column:1;grid-row:1}
  .title{grid-column:1;grid-row:2;min-width:0}
  .title span{font-size:.72rem}
  h1{font-size:1rem}
  #panel-toggle{grid-column:2;grid-row:1 / span 2;font-size:.82rem;padding-inline:12px}
  nav{grid-column:1 / -1;grid-row:3;display:flex;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;max-width:100%;padding:2px 1px}
  nav::-webkit-scrollbar{display:none}
  nav button{flex:0 0 auto;font-size:.8rem;padding-inline:10px}
  .wide-label{display:none}
  .compact-label{display:inline}
  main{display:block;position:relative}
  #stage{height:100%}
  #panel-backdrop:not([hidden]){display:block;position:absolute;z-index:2;inset:0;background:#18232d66;border:0;border-radius:0;padding:0;width:100%;height:100%}
  aside{left:0;right:0;top:auto;bottom:0;width:100%;max-height:min(76dvh,680px);padding:14px 16px calc(18px + env(safe-area-inset-bottom));border:1px solid #c0cbd3;border-bottom:0;border-radius:14px 14px 0 0;box-shadow:0 -8px 24px #26333f26}
  aside h2{margin-top:18px}
  .panel-heading h2{margin-top:0}
  footer{padding:6px 10px;font-size:.73rem}
  footer span{display:none}
  .view-note{font-size:.72rem;bottom:8px}
  .dimension-label{width:min(186px,calc(100vw - 24px));font-size:9px}
  .dimension-label strong{font-size:9px}
  .walk-mode .view-note{right:8px;max-width:45%;font-size:.66rem;line-height:1.35}
  #movement{bottom:calc(12px + env(safe-area-inset-bottom));left:10px;gap:8px}
  .walk-mode .view-note{top:8px;bottom:auto;max-width:calc(100% - 16px)}
}
.viewer-nav{margin-right:auto;gap:18px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
#view-note,.touch-instructions{font-size:.8rem;color:#4d5c67;margin:8px 0}
#restore-controls{display:none}
#trace-banner{position:absolute;z-index:2;top:12px;left:12px;max-width:min(560px,calc(100% - 24px));display:flex;flex-wrap:wrap;gap:8px;padding:10px;background:#f3f5f7;border:1px solid #8b98a3;border-radius:6px}
#trace-summary{flex-basis:100%;margin:0;font-size:.85rem;overflow-wrap:anywhere}
@media(max-width:760px){#trace-banner{top:124px}.phone-exploring #trace-banner{top:64px}}
.viewer-nav a{display:flex;align-items:center;min-height:44px;text-decoration:none}
.viewer-nav a[aria-current]{color:#262d33;font-weight:700;border-bottom:2px solid #226b9b}
#panel #fit{margin:16px 0 4px}
@media(max-width:760px){
  header .viewer-nav{grid-column:1;grid-row:1;overflow:visible;gap:20px;padding:0}
  header nav[aria-label="Camera views"]{grid-row:2}
  #panel-toggle{grid-row:1}
}
@media(any-pointer:coarse),(max-width:760px){
  body{grid-template-rows:minmax(0,1fr)}
  main{grid-row:1}
  header{position:absolute;inset:0 0 auto;z-index:4;background:#f3f5f7}
  footer{position:absolute;bottom:0;left:0;right:0;z-index:2;background:#f3f5f7}
  #movement{bottom:max(64px,env(safe-area-inset-bottom))}
  .phone-exploring header,.phone-exploring footer{display:none}
  .phone-exploring #restore-controls{display:block;position:fixed;top:max(10px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));z-index:5}
}