/* The Myles 8A tour, USER206 design: the photograph leads, the interface recedes.
   Chosen from three candidates compared on the user's problem views (A light + Onest, B graphite + Manrope, C stone + Geologica; see
   artifacts .../opus-viewer-balance-206/design_candidates): one interface family, Onest (self-hosted, OFL 1.1, fonts/FONTS.json); light
   neutral surfaces; the plan as an architectural drawing (black walls on white); one blue accent, used only for "you are here", the
   selection and the primary action. Destinations in the panorama are rings on the floor (drawn in WebGL, tour206-gl.mjs); a name appears
   for one ring at a time. */
@font-face { font-family: "Onest"; src: url("../fonts/onest-206.woff2") format("woff2"); font-weight: 400 650; font-display: swap; }

:root {
  --font: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --surface: rgba(250, 250, 248, .92); --surface-solid: #f8f8f6; --well: rgba(20, 22, 26, .055); --hover: rgba(20, 22, 26, .065);
  --ink: #17191c; --ink-2: #51555c; --ink-3: #6b6f76; --line: rgba(20, 22, 26, .1);
  --accent: #2a5bd7; --accent-soft: rgba(42, 91, 215, .12); --on-accent: #fff;
  --shadow: 0 1px 2px rgba(10, 12, 16, .1), 0 6px 18px rgba(10, 12, 16, .14);
  --blur: saturate(1.4) blur(14px);
  --photo-ink: #fff; --photo-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 1px 14px rgba(0, 0, 0, .3);
  --ring-halo: 14, 16, 19;
  --plan-ink-rgb: 27, 29, 33; --plan-glass-rgb: 118, 146, 204; --plan-bg: #f8f8f6; --plan-room: rgba(42, 91, 215, .09);
  --mini-bg: #e9e8e4; --boot-bg: #f1f1ef; --veil: #0c0d0f;
  --ease-out: cubic-bezier(.23, 1, .32, 1); --ease-io: cubic-bezier(.77, 0, .175, 1);
  --pad: clamp(12px, 1.8vw, 24px);
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px); --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px);
  --z-pano: 0; --z-marks: 2; --z-chrome: 4; --z-panel: 6; --z-veil: 8; --z-alert: 9; --z-boot: 10;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
body { font: 400 1rem/1.45 var(--font); color: var(--ink); font-kerning: normal; -webkit-font-smoothing: antialiased; font-variant-numeric: lining-nums; }
button { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#stage { position: fixed; inset: 0; }
#pano { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; z-index: var(--z-pano); }
#pano:active { cursor: grabbing; }
#pano.over { cursor: pointer; }
.scrim { position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .26), rgba(0, 0, 0, 0) 96px), linear-gradient(to top, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 180px); }
#veil { position: absolute; inset: 0; background: var(--veil); opacity: 0; pointer-events: none; z-index: var(--z-veil); transition: opacity 180ms var(--ease-out); }
#veil.on { opacity: 1; transition-duration: 160ms; }
#progress { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--accent); transform-origin: 0 50%; z-index: var(--z-alert); transition: transform 140ms linear; }

/* ---------------------------------------------------------------- brand, tools, caption (over the photograph) */
.brand { position: absolute; z-index: var(--z-chrome); top: calc(var(--pad) + 10px + var(--safe-t)); left: calc(var(--pad) + var(--safe-l)); margin: 0;
  font: 600 .8125rem/1 var(--font); letter-spacing: .01em; color: var(--photo-ink); text-shadow: var(--photo-shadow); }
.tools { position: absolute; z-index: var(--z-chrome); top: calc(var(--pad) + var(--safe-t)); right: calc(var(--pad) + var(--safe-r)); display: flex; gap: 2px; padding: 3px;
  background: var(--surface); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-radius: 999px; box-shadow: var(--shadow); }
.tools button { width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; cursor: pointer;
  transition: background-color 150ms ease, transform 120ms var(--ease-out); }
.tools svg { width: 20px; height: 20px; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tools button[aria-expanded="true"], .tools button[aria-pressed="true"] { background: var(--accent-soft); }
.tools button[aria-expanded="true"] svg, .tools button[aria-pressed="true"] svg { stroke: var(--accent); }
.tools button:active:not(:disabled) { transform: scale(.94); }
.tools button:disabled { cursor: default; opacity: .3; }
@media (hover: hover) and (pointer: fine) { .tools button:hover:not(:disabled):not([aria-expanded="true"]) { background: var(--hover); } }
.caption { position: absolute; z-index: var(--z-chrome); left: calc(var(--pad) + var(--safe-l)); bottom: calc(var(--pad) + var(--safe-b)); max-width: min(70vw, 600px); pointer-events: none;
  color: var(--photo-ink); text-shadow: var(--photo-shadow); }
.caption h1 { margin: 0; font: 600 1.625rem/1.15 var(--font); letter-spacing: -.012em; text-wrap: balance; }
.caption p { margin: .2rem 0 0; font: 500 .9375rem/1.3 var(--font); opacity: .92; }
.caption p:empty { display: none; }

/* ---------------------------------------------------------------- the one ring label, the chooser, the edge chevrons */
#marks .mk { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; padding: 0; border: 0; }
.rlabel { position: absolute; left: 0; top: 0; z-index: var(--z-marks); display: grid; gap: 1px; max-width: 280px; padding: 6px 11px 7px; border-radius: 10px; pointer-events: none;
  background: var(--surface); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: var(--shadow); white-space: nowrap; will-change: transform;
  animation: rl-in 140ms var(--ease-out); }
.rlabel .nm { font: 600 .9375rem/1.2 var(--font); color: var(--ink); overflow: hidden; text-overflow: ellipsis; }
.rlabel .sub { font: 500 .75rem/1.25 var(--font); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; }
.rlabel .sub:empty { display: none; }
.rlabel.pending .nm::after { content: " …"; color: var(--ink-3); }
@keyframes rl-in { from { opacity: 0; } to { opacity: 1; } }
.chooser { position: absolute; left: 0; top: 0; z-index: var(--z-panel); display: grid; gap: 2px; min-width: 200px; max-width: min(320px, calc(100vw - 16px)); padding: 4px;
  background: var(--surface-solid); border-radius: 12px; box-shadow: var(--shadow); }
.chooser button { display: grid; gap: 1px; min-height: 48px; padding: 7px 12px; border: 0; border-radius: 9px; background: transparent; text-align: left; cursor: pointer; }
.chooser .nm { font: 600 .9375rem/1.2 var(--font); color: var(--ink); }
.chooser .sub { font: 500 .75rem/1.25 var(--font); color: var(--ink-2); }
.chooser .sub:empty { display: none; }
.chooser button:active { background: var(--hover); }
@media (hover: hover) and (pointer: fine) { .chooser button:hover { background: var(--hover); } }
.edge { position: absolute; z-index: var(--z-marks); width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--surface); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: var(--shadow); animation: rl-in 200ms var(--ease-out); }
.edge svg { width: 22px; height: 22px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.edge.left { left: calc(var(--pad) + var(--safe-l)); top: 50%; margin-top: -22px; }
.edge.right { right: calc(var(--pad) + var(--safe-r)); top: 50%; margin-top: -22px; }
.edge.down { left: 50%; margin-left: -22px; bottom: calc(var(--pad) + var(--safe-b) + 72px); }
.edge.up { left: 50%; margin-left: -22px; top: calc(var(--pad) + var(--safe-t) + 64px); }
.edge:active { transform: scale(.94); }
body.moving .rlabel, body.moving .edge { display: none; }

/* ---------------------------------------------------------------- plan card (plan / rooms / model) */
#plan { position: absolute; z-index: var(--z-panel); right: calc(var(--pad) + var(--safe-r)); bottom: calc(var(--pad) + var(--safe-b)); width: clamp(340px, 32vw, 520px);
  padding: 6px; background: var(--surface-solid); border-radius: 14px; box-shadow: var(--shadow); }
.planbar { display: flex; align-items: center; gap: 2px; margin: 0 0 6px; }
.seg { display: inline-flex; padding: 3px; margin-right: auto; border-radius: 10px; background: var(--well); }
.seg button { min-height: 32px; padding: 0 13px; border: 0; border-radius: 7px; background: transparent; color: var(--ink-2); font: 550 .8125rem/1 var(--font); cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease; }
.seg button[aria-pressed="true"] { background: var(--surface-solid); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.planbar .x, .planbar .reset { width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 9px; background: transparent; cursor: pointer; }
.planbar svg, .helpbar svg, #hint .x svg { width: 18px; height: 18px; fill: none; stroke: var(--ink-2); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) and (pointer: fine) {
  .planbar .x:hover, .planbar .reset:hover, .helpbar .x:hover, #hint .x:hover { background: var(--hover); }
  .seg button:hover:not([aria-pressed="true"]) { color: var(--ink); }
}
.planview { position: relative; aspect-ratio: 1.58; border-radius: 10px; background: var(--plan-bg); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); touch-action: none; }
#plan2d { position: absolute; inset: 0; width: 100%; height: 100%; display: block; user-select: none; -webkit-user-select: none; }
#plan2d .room { fill: transparent; stroke: none; }
#plan2d .room.on { fill: var(--plan-room); }
#plan2d .rl { font: 550 11.5px var(--font); fill: var(--ink-2); text-anchor: middle; dominant-baseline: central; pointer-events: none;
  paint-order: stroke; stroke: var(--plan-bg); stroke-width: 3px; stroke-linejoin: round; }
#plan2d .rl.on { fill: var(--ink); font-weight: 650; }
#plan2d .pt { cursor: pointer; outline: none; }
#plan2d .pt .dot { fill: var(--ink); stroke: var(--plan-bg); stroke-width: 2px; transform-box: fill-box; transform-origin: center; transition: transform 120ms var(--ease-out), fill 120ms ease; }
#plan2d .pt .ring { fill: none; stroke: transparent; stroke-width: 2.5px; }
#plan2d .pt.hov .dot, #plan2d .pt:focus-visible .dot, #plan2d .pt.sel .dot { transform: scale(1.3); }
#plan2d .pt.sel .ring, #plan2d .pt:focus-visible .ring { stroke: var(--accent); }
#plan2d .pt.sel .dot { fill: var(--accent); }
#plan2d .pt.cur .dot, #plan2d .pt.cur .ring { display: none; }
#plan2d .cone { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1.25px; stroke-opacity: .7; pointer-events: none; }
#plan2d .here { fill: var(--accent); stroke: var(--plan-bg); stroke-width: 2.5px; pointer-events: none; }
.ptip { position: absolute; left: 0; top: 0; z-index: 1; padding: 5px 9px 6px; border-radius: 7px; background: var(--ink); color: var(--surface-solid); font: 600 .8125rem/1.15 var(--font);
  white-space: nowrap; pointer-events: none; box-shadow: 0 2px 8px rgba(0, 0, 0, .18); }
.pzoom { display: flex; gap: 0; }
.pzoom button { width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 9px; background: transparent; cursor: pointer; }
.pzoom svg { width: 18px; height: 18px; fill: none; stroke: var(--ink-2); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#plan:not([data-mode="2d"]) .pzoom { display: none; }
@media (hover: hover) and (pointer: fine) { .pzoom button:hover { background: var(--hover); } .pzoom button:hover svg { stroke: var(--ink); } }
.ppick { display: none; align-items: center; gap: 10px; min-height: 52px; margin-top: 6px; padding: 6px 6px 6px 14px; border-radius: 12px; background: var(--well); }
.ppick .nm { flex: 1; min-width: 0; font: 500 .875rem/1.2 var(--font); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ppick.on .nm { font-weight: 600; font-size: .9375rem; color: var(--ink); }
.ppick .go:disabled { opacity: .35; cursor: default; filter: none; transform: none; }
@media (pointer: coarse) { #plan[data-mode="2d"] .ppick { display: flex; } }
#plan[data-mode="list"] .planview, #plan[data-mode="3d"] .planview { display: none; }
#plan:not([data-mode="3d"]) #mini, #plan:not([data-mode="3d"]) .reset { display: none; }
#plan[data-mode="3d"] { width: clamp(360px, 36vw, 560px); }

/* room index: rooms; rooms with several places list them as chips */
#rooms { display: none; max-height: min(60vh, 520px); overflow-y: auto; overscroll-behavior: contain; padding: 0 2px 4px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
#plan[data-mode="list"] #rooms { display: block; }
#rooms h3 { margin: 12px 10px 4px; font: 600 .75rem/1.2 var(--font); color: var(--ink-3); letter-spacing: .01em; }
#rooms h3:first-child { margin-top: 4px; }
#rooms ul { list-style: none; margin: 0; padding: 0; }
#rooms .room { position: relative; width: 100%; min-height: 42px; display: flex; align-items: center; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent;
  font: 500 .9375rem/1.25 var(--font); color: var(--ink); text-align: left; cursor: pointer; transition: background-color 140ms ease; }
#rooms .rn { margin: 0; padding: 9px 10px 3px; font: 500 .9375rem/1.25 var(--font); color: var(--ink); }
#rooms .places { display: flex; flex-wrap: wrap; gap: 6px; padding: 3px 10px 9px; }
#rooms .place { min-height: 34px; padding: 0 13px; border: 0; border-radius: 999px; background: var(--well); font: 500 .8125rem/1 var(--font); color: var(--ink); cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease; }
#rooms .room[aria-current] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
#rooms .room[aria-current]::after, #rooms .rn.here::after { content: "you are here"; margin-left: auto; padding-left: 12px; font: 500 .75rem/1 var(--font); color: var(--accent); }
#rooms .rn.here { display: flex; align-items: baseline; }
#rooms .place[aria-current] { background: var(--accent); color: var(--on-accent); font-weight: 600; }
@media (hover: hover) and (pointer: fine) { #rooms .room:hover:not([aria-current]) { background: var(--hover); } #rooms .place:hover:not([aria-current]) { background: var(--hover); box-shadow: inset 0 0 0 1px var(--line); } }

/* dollhouse */
#mini { position: relative; height: clamp(240px, 34vh, 400px); border-radius: 10px; overflow: hidden; background: var(--mini-bg); }
#mini canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
#mini canvas:active { cursor: grabbing; }
#mini .anchors { position: absolute; inset: 0; pointer-events: none; }
#mini .mini-note { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: var(--ink-2); font-size: .8125rem; }
#mini[data-state="ready"] .mini-note { display: none; }
#mini[data-state="error"] .mini-note::after { content: " Could not load the model."; }
.anchor { position: absolute; left: 0; top: 0; width: 34px; height: 34px; margin: -17px 0 0 -17px; padding: 0; border: 0; background: transparent; pointer-events: auto; cursor: pointer; visibility: hidden; }
.anchor .dot { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 2px var(--mini-bg); transition: transform 120ms ease; }
.anchor .lbl { position: absolute; left: 50%; bottom: calc(100% - 6px); transform: translateX(-50%); white-space: nowrap; font: 600 .75rem/1 var(--font); color: var(--ink);
  text-shadow: 0 0 3px var(--mini-bg), 0 0 3px var(--mini-bg), 0 0 6px var(--mini-bg); transition: opacity 120ms ease; }
.anchor:hover .dot, .anchor:focus-visible .dot { transform: scale(1.35); }
.anchor.here .dot { background: var(--accent); } .anchor.here .lbl { color: var(--accent); }

/* ---------------------------------------------------------------- help, first-visit hint, status */
#help { position: absolute; z-index: var(--z-panel); top: calc(var(--pad) + 52px + var(--safe-t)); right: calc(var(--pad) + var(--safe-r)); width: min(360px, calc(100vw - 2 * var(--pad)));
  padding: 12px 16px 16px; background: var(--surface-solid); border-radius: 14px; box-shadow: var(--shadow); }
.helpbar { display: flex; align-items: center; justify-content: space-between; margin: 0 -8px 6px 0; }
.helpbar h2 { margin: 0; font: 600 1.0625rem/1.2 var(--font); color: var(--ink); }
.helpbar .x, #hint .x { width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 9px; background: transparent; cursor: pointer; }
#help dl { margin: 0; display: grid; grid-template-columns: minmax(104px, auto) 1fr; gap: 8px 14px; font-size: .875rem; line-height: 1.4; }
#help dt { color: var(--ink); font-weight: 600; } #help dd { margin: 0; color: var(--ink-2); }
#hint { position: absolute; z-index: var(--z-chrome); left: 50%; bottom: calc(var(--pad) + var(--safe-b) + 4px); transform: translateX(-50%); display: flex; align-items: center; gap: 6px; width: max-content;
  max-width: min(520px, calc(100vw - 2 * var(--pad))); padding: 4px 4px 4px 16px; background: var(--surface); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-radius: 999px; box-shadow: var(--shadow);
  transition: opacity 200ms ease, transform 200ms var(--ease-out); }
#hint p { margin: 0; font: 500 .875rem/1.35 var(--font); color: var(--ink); }
#hint.out { opacity: 0; transform: translate(-50%, 6px); }
body.plan-open.narrow #hint { display: none; }
.kb { } .tc { display: none; }
@media (hover: none) and (pointer: coarse) { .kb { display: none !important; } .tc { display: inline; } }
.status { position: absolute; z-index: var(--z-alert); left: 50%; bottom: calc(var(--pad) + var(--safe-b) + 64px); transform: translateX(-50%); display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center;
  max-width: min(540px, calc(100vw - 2 * var(--pad))); margin: 0; padding: 10px 10px 10px 16px; background: var(--surface-solid); border-radius: 14px; box-shadow: var(--shadow); }
.status p { margin: 0; font-size: .9375rem; color: var(--ink); }
.action { min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--accent); color: var(--on-accent); font: 600 .9375rem/1 var(--font); cursor: pointer;
  transition: filter 150ms ease, transform 120ms var(--ease-out); }
.action:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .action:hover { filter: brightness(1.08); } }
.ppick .go { flex: none; min-height: 40px; padding: 0 16px; }
#plan .ppick { flex: none; }

/* ---------------------------------------------------------------- first load */
.empty { position: absolute; inset: 0; z-index: var(--z-boot); display: grid; place-content: center; justify-items: center; gap: 12px; padding: 24px; text-align: center;
  background: var(--boot-bg); color: var(--ink); transition: opacity 360ms var(--ease-out); }
body.ready .empty { opacity: 0; pointer-events: none; }
.empty-brand { margin: 0; font: 600 .8125rem/1 var(--font); color: var(--ink-2); letter-spacing: .01em; }
.empty-room { margin: 2px 0 0; font: 600 clamp(1.75rem, 1.3rem + 1.6vw, 2.25rem)/1.1 var(--font); letter-spacing: -.015em; }
.empty-bar { width: 160px; height: 2px; margin: 8px 0 2px; background: var(--line); overflow: hidden; border-radius: 1px; }
.empty-bar span { display: block; height: 100%; width: 100%; background: var(--accent); transform: scaleX(.04); transform-origin: 0 50%; transition: transform 200ms var(--ease-out); }
.empty-text { margin: 0; max-width: 36ch; color: var(--ink-2); font-size: .9375rem; }

/* ---------------------------------------------------------------- layouts */
@media (max-width: 760px) {
  .caption { max-width: calc(100vw - 2 * var(--pad)); }
  .caption h1 { font-size: 1.4375rem; }
  #plan:not([hidden]) { position: fixed; inset: auto 0 0 0; width: auto !important; height: min(86vh, 820px); display: flex; flex-direction: column; padding: 8px 8px calc(8px + var(--safe-b));
    border-radius: 16px 16px 0 0; }
  #plan .planbar { flex: none; }
  .planview { flex: 1; aspect-ratio: auto; min-height: 0; }
  #mini { flex: 1; height: auto; min-height: 0; }
  #rooms { flex: 1; max-height: none; }
  body.plan-open .caption, body.plan-open .brand { display: none; }
  .seg button { min-height: 40px; font-size: .875rem; padding: 0 12px; }
  .pzoom [data-z="fit"] { display: none; }
  .planbar .x, .planbar .reset { width: 44px; height: 44px; }
  #help { left: calc(var(--pad) + var(--safe-l)); width: auto; }
  #help dl { font-size: .9375rem; grid-template-columns: 1fr; gap: 2px 0; } #help dd { margin-bottom: 8px; }
  .status { bottom: calc(var(--pad) + var(--safe-b) + 92px); }
  #hint { bottom: calc(var(--pad) + var(--safe-b) + 76px); }
}
@media (max-height: 500px) and (orientation: landscape) {
  :root { --pad: 10px; }
  .caption { max-width: 44vw; }
  .caption h1 { font-size: 1.3125rem; }
  .caption p { font-size: .875rem; }
  #plan:not([hidden]) { position: fixed; inset: 0 0 0 auto; width: min(58vw, 560px) !important; height: auto; display: flex; flex-direction: column;
    padding: calc(6px + var(--safe-t)) calc(8px + var(--safe-r)) calc(6px + var(--safe-b)) 8px; border-radius: 0; }
  #plan .planbar { flex: none; }
  .planview { flex: 1; aspect-ratio: auto; min-height: 0; }
  #mini { flex: 1; height: auto; min-height: 0; }
  #rooms { flex: 1; max-height: none; }
  body.plan-open .tools { right: calc(min(58vw, 560px) + 6px); }
  #help { max-height: calc(100vh - 64px); overflow-y: auto; }
  #hint { left: auto; right: calc(var(--pad) + var(--safe-r)); transform: none; max-width: min(52vw, 440px); }
  #hint.out { transform: translateY(6px); }
  .edge.down { bottom: calc(var(--pad) + var(--safe-b) + 8px); }
}
@media (hover: none) and (pointer: coarse) {
  .tools button { width: 44px; height: 44px; }
  .seg button { min-height: 42px; }
  .planbar .x, .planbar .reset, .helpbar .x, #hint .x { width: 44px; height: 44px; }
  .pzoom button { width: 44px; height: 44px; }
  #rooms .room { min-height: 48px; }
  #rooms .place { min-height: 44px; padding: 0 16px; font-size: .875rem; }
}
@media (prefers-reduced-motion: reduce) {
  #veil, #progress, .rlabel, .edge, #hint, .empty, .tools button, .action, .seg button, #plan2d .pt .dot { transition: none !important; animation: none !important; }
}