:root { --ground: #151412; --ink: #f6f1e7; --ink-dim: #b9b0a0; --panel: rgba(24, 22, 20, .8); --line: rgba(246, 241, 231, .14); --accent: #e7b54a; color-scheme: dark;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; --sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif; }
html, body { margin: 0; height: 100%; background: var(--ground); color: var(--ink); font: 14px/1.4 var(--sans); overflow: hidden; }
#stage { position: fixed; inset: 0; touch-action: none; }
#stage canvas, #photo { position: absolute; }
header { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 12px); left: 16px; right: 16px; display: flex; gap: 10px; justify-content: space-between; align-items: center; flex-wrap: wrap; pointer-events: none; }
header > * { pointer-events: auto; }
.brand { font-weight: 600; font-size: 17px; background: var(--panel); padding: 8px 14px; border-radius: 10px; backdrop-filter: blur(6px); }
.brand span { font-weight: 400; opacity: .7; font-size: 13px; margin-left: 6px; }
nav, #rooms { display: flex; gap: 4px; background: var(--panel); padding: 4px; border-radius: 10px; backdrop-filter: blur(6px); flex-wrap: wrap; }
button { background: transparent; color: var(--ink); border: 0; padding: 7px 12px; border-radius: 7px; font: inherit; cursor: pointer; }
a.navlink { color: var(--ink); text-decoration: none; padding: 7px 12px; border-radius: 7px; }
a.navlink:hover, a.navlink:focus-visible { background: rgba(255, 255, 255, .1); }
button:hover { background: rgba(255, 255, 255, .1); }
button:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
body[data-mode=walk] [data-set-mode=walk], body[data-mode=align] [data-set-mode=align], body[data-mode=overview] [data-set-mode=overview], #rooms button.here, #tour.on { background: var(--ink); color: #1a1816; }
footer { position: fixed; bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); left: 16px; right: 16px; display: none; gap: 8px; align-items: center; flex-wrap: wrap; }
body[data-mode=walk] #walkbar, body[data-mode=overview] #walkbar { display: flex; }
body[data-mode=align] #alignbar { display: flex; background: var(--panel); padding: 8px 12px; border-radius: 10px; }
#tour, #photoToggle { background: var(--panel); }
#photoToggle.on { background: var(--accent); color: #1a1816; }
.hint { opacity: .75; font-size: 12px; background: var(--panel); padding: 6px 10px; border-radius: 8px; }
#frameSlider { flex: 1 1 200px; accent-color: var(--accent); }
#frameLabel, #fit { font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums; }
#frameLabel { min-width: 120px; }
#fit { color: var(--ink-dim); flex-basis: 100%; }
label { display: flex; gap: 6px; align-items: center; }
@media (max-width: 560px) { .brand span, .hint { display: none; } }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }