:root { color-scheme: light dark; --ink: #0a0a0a; --ink-2: #5f5d58; --sheet: #ffffff; --line: #e3dfd8; --bg: #15161a; --chip: #efece7;
    --font: "Inter", -apple-system, "Segoe UI", system-ui, sans-serif; }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ink: #f2f0ea; --ink-2: #b4b0a6; --sheet: #23221f; --line: #3a3833; --chip: #2d2c28; } }
  :root[data-theme="dark"] { --ink: #f2f0ea; --ink-2: #b4b0a6; --sheet: #23221f; --line: #3a3833; --chip: #2d2c28; }
  * { box-sizing: border-box; }
  html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font-family: var(--font); overflow: hidden; }
  #stage { position: fixed; inset: 0; touch-action: none; cursor: grab; }
  #stage:active { cursor: grabbing; }
  canvas { display: block; width: 100%; height: 100%; }
  .bar { position: fixed; left: 16px; top: 12px; right: 16px; z-index: 5; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; pointer-events: none; }
  .bar > * { pointer-events: auto; }
  .pill { background: color-mix(in srgb, var(--sheet) 92%, transparent); border-radius: 2px; padding: 8px 12px; font-size: 13px; color: var(--ink); text-decoration: none; }
  a.pill { text-decoration: underline; text-underline-offset: 3px; }
  .pill.times { display: flex; gap: 10px; padding: 4px 8px; }
  .pill.times[hidden] { display: none; }
  .pill.times button { background: none; border: 0; padding: 4px 4px; font: inherit; font-size: 13px; color: var(--ink-2); cursor: pointer; border-bottom: 2px solid transparent; }
  .pill.times button[aria-pressed="true"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--ink); }
  .brand { font-weight: 700; font-size: 20px; letter-spacing: -0.02em; line-height: 1; text-decoration: none; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
  .brand small { display: block; font-weight: 400; font-size: 11px; letter-spacing: 0.12em; margin-top: 2px; }
  .hint { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 5; max-width: calc(100% - 24px); text-align: center; background: color-mix(in srgb, var(--sheet) 92%, transparent); border: 1px solid var(--line); border-radius: 14px; padding: 8px 12px; font-size: 13px; color: var(--ink-2); }
  .spot { position: fixed; z-index: 4; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; }
  .spot i { display: block; width: 38px; height: 38px; border-radius: 50%; border: 2px solid rgba(255,255,255,.9); background: rgba(255,255,255,.22); box-shadow: 0 2px 12px rgba(0,0,0,.35); backdrop-filter: blur(2px); transition: transform .15s; }
  .spot:hover i { transform: scale(1.12); background: rgba(255,255,255,.4); }
  .spot b { font-size: 12px; font-weight: 600; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.7); white-space: nowrap; }
  .spot[hidden] { display: none; }
  #plan { position: fixed; right: 12px; bottom: 12px; z-index: 5; width: 220px; background: color-mix(in srgb, var(--sheet) 92%, transparent); border: 1px solid var(--line); border-radius: 14px; padding: 8px; box-shadow: 0 2px 10px rgba(0,0,0,.18); }
  #plan svg { display: block; width: 100%; height: auto; }
  #plan .room { fill: var(--chip); stroke: var(--ink-2); stroke-width: .04; }
  #plan .room-label { font-size: .28px; fill: var(--ink-2); font-family: var(--font); }
  #plan .pt { fill: var(--sheet); stroke: var(--ink); stroke-width: .05; cursor: pointer; }
  #plan .pt.cur { fill: #d9822b; stroke: #d9822b; }
  #plan .fov { fill: #d9822b; opacity: .3; }
  #fade { position: fixed; inset: 0; z-index: 3; background: #000; opacity: 0; pointer-events: none; transition: opacity .25s; }
  #load { position: fixed; inset: 0; display: grid; place-items: center; z-index: 9; background: var(--bg); color: #ddd; font-size: 14px; text-align: center; }
  #load[hidden] { display: none; }
  @media (max-width: 700px) { #plan { width: 150px; } .hint { bottom: 118px; } }

button, select { font: inherit; }
.spot { border: 0; background: none; padding: 8px; }
.spot:focus-visible i { outline: 3px solid #d9822b; outline-offset: 3px; }
.bar select { max-width: 190px; border: 0; }
#status { position: fixed; z-index: 8; left: 16px; top: 110px; padding: 10px 14px; background: #23221f; color: white; border-radius: 8px; }
#status[hidden] { display: none; }
#plan .pt:focus { outline: none; stroke: #d9822b; stroke-width: .12; }
@media (max-width: 700px) { .bar { left: 10px; right: 10px; gap: 6px; } .brand { font-size: 16px; } .pill { font-size: 12px; padding: 7px 9px; } .bar select { max-width: 145px; } .pill.times { gap: 4px; } .pill.times button { min-height: 32px; } #plan { width: 135px; } .hint { bottom: 112px; font-size: 11px; } }