/*
 * Liquid Glass viewer chrome (after Apple HIG Materials / WWDC25 "Meet Liquid Glass").
 * The 3D canvas is the content layer and never gets glass. Controls float above it on a
 * small number of glass surfaces: the top-right group(s), the bottom toolbar (Quality | Reset), the
 * touch movement dock's small keys (touch screens only), and transient surfaces (start, popover,
 * loading, error). Nothing is glass-on-glass: items inside a glass surface use fills.
 * Small controls and the title/hint adapt to what is behind them: viewer.js samples the
 * backdrop and sets data-backdrop="light" over bright sky or snow (dark glyphs on light glass).
 * Standalone space page: the scene fills the whole viewport, and a Language button beside
 * Controls opens a regular-glass menu (English / 日本語 / 中文) built like the Controls popover.
 */
@property --glow { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --tint { syntax: "<color>"; inherits: false; initial-value: transparent; }

:root, .controls-popover, .language-popover {
  /* Dark appearance (default). Popovers always keep it; they only get denser over bright content. */
  --label: #fff;
  --label-2: rgb(240 240 247 / 80%);
  --label-3: rgb(240 240 247 / 62%);
  --label-disabled: rgb(255 255 255 / 36%);
  --fill-1: rgb(255 255 255 / 10%);
  --fill-2: rgb(255 255 255 / 16%);
  --fill-3: rgb(255 255 255 / 26%);
  --fill-hover: rgb(255 255 255 / 8%);
  --separator: rgb(255 255 255 / 13%);
  --glyph-shadow: drop-shadow(0 .5px 1px rgb(0 0 0 / 28%));
}
:root {
  color-scheme: dark;
  --font: -apple-system, BlinkMacSystemFont, system-ui, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --accent: #0a84ff;
  --red: #ff453a;
  /* Clear glass for small media controls; regular for text; denser for the popover. */
  /* Kept light so the controls recede over the landscape (user request 2026-10-05). */
  --tint-clear: rgb(28 29 32 / 16%);
  --tint-regular: rgb(28 29 32 / 26%);
  --tint-popover: rgb(26 27 30 / 42%);
  --tint-prominent: rgb(0 100 214 / 84%);
  --glass-backdrop: blur(8px) saturate(150%) brightness(.97);
  --glass-backdrop-bar: blur(10px) saturate(150%) brightness(.95);
  --glass-edge: inset 0 0 0 .5px rgb(255 255 255 / 14%), inset 0 1px 0 rgb(255 255 255 / 26%),
    inset 0 -1px 1.5px rgb(255 255 255 / 8%), inset 0 0 16px rgb(255 255 255 / 5%);
  --glass-shadow: 0 6px 18px rgb(0 0 0 / 8%), 0 1px 2px rgb(0 0 0 / 8%);
  /* Text over content without glass (title, hint): a soft local dim, not a full-width band. */
  --scrim: rgb(0 0 0 / 28%);
  --text-shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 0 12px rgb(0 0 0 / 18%);
  --adapt: --tint .35s ease, color .35s ease;
  --spring: cubic-bezier(.34, 1.45, .64, 1);
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --edge-t: max(16px, env(safe-area-inset-top));
  --edge-r: max(16px, env(safe-area-inset-right));
  --edge-b: max(14px, env(safe-area-inset-bottom));
  --edge-l: max(16px, env(safe-area-inset-left));
  /* Touch movement dock: key size and spacing; the side-by-side layout reserves the pad's width for the pill. */
  --dock-key: 46px;
  --dock-small: 38px;
  --dock-gap: 6px;
  --dock-pad-width: calc(3 * var(--dock-key) + 2 * var(--dock-gap));
  --dock-active: rgb(255 255 255 / 32%);
  font: 400 15px/1.4 var(--font);
  color: var(--label);
  background: #192732;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
/*
 * CJK: the system face still sets Latin text; Japanese and Simplified Chinese get their own faces.
 * No system-ui here: on Windows it resolves to the OS locale's CJK UI face (Yu Gothic UI or
 * Microsoft YaHei UI), which would take the kanji/hanzi before the faces listed for the language.
 */
:lang(ja) {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial,
    "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Noto Sans CJK JP", "Yu Gothic", sans-serif;
}
:lang(zh-Hans) {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial,
    "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
}
/* Negative Latin tracking crowds CJK glyphs. */
:is(.title, .controls-toggle, .language-toggle, .language-option, #start, #reset, .scene-selector select, .controls-sections h2):is(:lang(ja), :lang(zh-Hans)) { letter-spacing: 0; }
/* Light appearance for small controls over bright content (iOS flips these; big surfaces do not). */
:is(.top-controls, .toolbar-row, .dock-pad, .dock-side)[data-backdrop="light"] {
  --dock-active: rgb(255 255 255 / 72%);
  --label: rgb(0 0 0 / 85%);
  --label-2: rgb(60 60 67 / 80%);
  --label-3: rgb(60 60 67 / 62%);
  --label-disabled: rgb(0 0 0 / 30%);
  --fill-1: rgb(0 0 0 / 5%);
  --fill-2: rgb(0 0 0 / 9%);
  --fill-3: rgb(0 0 0 / 14%);
  --fill-hover: rgb(0 0 0 / 6%);
  --separator: rgb(0 0 0 / 12%);
  --glyph-shadow: none;
  --tint-clear: rgb(255 255 255 / 30%);
  --tint-regular: rgb(255 255 255 / 40%);
  --glass-backdrop: blur(12px) saturate(170%) brightness(1.02);
  --glass-backdrop-bar: blur(16px) saturate(170%) brightness(1.02);
}
/* A gentle spring: quick lift, small overshoot, settles (WWDC23 springs; bounce kept low). */
@supports (transition-timing-function: linear(0, 1)) {
  :root { --spring: linear(0, .146, .46, .788, 1.036, 1.172, 1.205, 1.17, 1.103, 1.037, .988, .963, .958, .966, .98, .994, 1.003, 1.008, 1.004, 1); }
}

* { box-sizing: border-box; }
/* The page is only the scene: it fills the dynamic viewport and never scrolls or rubber-bands. */
html, body, #scene { width: 100%; height: 100%; height: 100dvh; margin: 0; overflow: hidden; }
html, body { overscroll-behavior: none; background: #192732; }
button, select { font: inherit; color: inherit; margin: 0; }
button { border: 0; background: none; padding: 0; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: default; }
[hidden] { display: none !important; }
.glyph { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

#scene { position: relative; background: #192732 center/cover no-repeat; }
#canvas { position: absolute; inset: 0; touch-action: none; }
#canvas canvas { display: block; width: 100%; height: 100%; }
#canvas:focus-visible { outline: 2px solid rgb(10 132 255 / 85%); outline-offset: -2px; }

.scene-poster { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; pointer-events: none; transition: opacity .25s ease, visibility .25s; }
#scene[data-state="ready"] .scene-poster { opacity: 0; visibility: hidden; }
.welcome, .loading, .error, .bottom-panel { z-index: 2; }

/* ---------- Glass material ---------- */
.glass {
  --tint: var(--tint-clear);
  position: relative;
  color: var(--label);
  border: 0;
  background:
    radial-gradient(circle var(--glow-size, 64px) at var(--px, 50%) var(--py, 50%), rgb(255 255 255 / calc(var(--glow) * 30%)), rgb(255 255 255 / 0) 100%),
    linear-gradient(rgb(255 255 255 / 9%), rgb(255 255 255 / 0) 52%),
    var(--tint);
  -webkit-backdrop-filter: var(--glass-backdrop);
  backdrop-filter: var(--glass-backdrop);
  box-shadow: var(--glass-edge), var(--glass-shadow), var(--ring, 0 0 #0000);
  transition: var(--adapt);
}
/* Specular rim: bright where light enters (top), a softer bounce at the bottom, clear sides. */
.glass::before, .glass-group::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(168deg, rgb(255 255 255 / 38%), rgb(255 255 255 / 10%) 24%, rgb(255 255 255 / 0) 46%, rgb(255 255 255 / 3%) 70%, rgb(255 255 255 / 18%));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.glass-regular {
  --tint: var(--tint-popover);
  -webkit-backdrop-filter: blur(18px) saturate(160%) brightness(.82);
  backdrop-filter: blur(18px) saturate(160%) brightness(.82);
  box-shadow: var(--glass-edge), 0 18px 48px rgb(0 0 0 / 28%), 0 2px 6px rgb(0 0 0 / 14%);
}

/*
 * One glass container for related icon buttons. The material sits on a pseudo-element so the
 * container never becomes a backdrop root: the popover, a descendant, still samples the scene.
 */
.glass-group {
  position: relative;
  display: flex;
  align-items: center;
  border-radius: 22px;
  color: var(--label);
  transition: color .35s ease;
}
.glass-group::before {
  --tint: var(--tint-clear);
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(rgb(255 255 255 / 9%), rgb(255 255 255 / 0) 52%), var(--tint);
  -webkit-backdrop-filter: var(--glass-backdrop);
  backdrop-filter: var(--glass-backdrop);
  box-shadow: var(--glass-edge), var(--glass-shadow);
  transition: --tint .35s ease;
}

/* Interactive glass: hover lifts a soft light; press grows and glows from the touch point. */
.glass-press {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform .6s var(--spring), --glow .45s ease, box-shadow .2s ease, var(--adapt);
}
.glass-press.is-pressed:not(:disabled), .glass-press:active:not(:disabled) {
  --glow: 1;
  transform: scale(1.07);
  transition: transform .2s var(--ease-out), --glow .08s linear, box-shadow .2s ease, var(--adapt);
}
.glass-press:disabled { color: var(--label-disabled); }
@media (hover: hover) and (pointer: fine) {
  .glass-press:hover:not(:disabled) { --glow: .5; }
}

/* Items that sit on glass: fills only, never their own glass. */
.glass-item, .controls-popover button:not(.cube-face), .language-option {
  --glow: 0;
  --fill: transparent;
  position: relative;
  border-radius: 999px;
  background:
    radial-gradient(circle var(--glow-size, 56px) at var(--px, 50%) var(--py, 50%), rgb(255 255 255 / calc(var(--glow) * 24%)), rgb(255 255 255 / 0) 100%),
    var(--fill);
  box-shadow: var(--ring, 0 0 #0000);
  transition: transform .55s var(--spring), --glow .4s ease, background-color .2s ease;
}
.glass-item.is-pressed:not(:disabled), button.glass-item:active:not(:disabled) { --glow: 1; --fill: var(--fill-2); }
.controls-popover button:not(.cube-face).is-pressed:not(:disabled), .controls-popover button:not(.cube-face):active:not(:disabled),
.language-option.is-pressed, .language-option:active { --glow: 1; --fill: var(--fill-3); }
.glass-item.is-pressed:not(:disabled), button.glass-item:active:not(:disabled),
.controls-popover button:not(.cube-face).is-pressed:not(:disabled), .controls-popover button:not(.cube-face):active:not(:disabled),
.language-option.is-pressed, .language-option:active {
  transform: scale(1.06);
  transition: transform .18s var(--ease-out), --glow .08s linear;
}
.glass-item:disabled, .controls-popover button:disabled { color: var(--label-disabled); cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .glass-item:hover:not(:disabled):not(:has(select:disabled)) { --glow: .55; --fill: var(--fill-hover); }
  .controls-popover button:not(.cube-face):hover:not(:disabled), .language-option:hover { --glow: .55; --fill: var(--fill-2); }
}

/* Focus halo follows the shape: white inner ring plus accent outer ring, legible on sky and rock. */
:where(button, summary, select):focus { outline: none; }
:where(button, summary, select):focus-visible { --ring: 0 0 0 2px #fff; outline: 2px solid var(--accent); outline-offset: 2px; }
.glass-item:focus-visible, .controls-popover button:focus-visible, .language-option:focus-visible { outline-offset: 1px; }

/* Text straight on content: a soft local dim shaped to the text (dark), or a light haze with dark text. */
.title, .hint {
  position: relative;
  color: var(--label);
  text-shadow: var(--text-shadow);
  transition: color .35s ease, text-shadow .35s ease;
}
.title::before, .hint::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -6px -22px;
  border-radius: 999px;
  background: var(--scrim);
  filter: blur(14px);
  pointer-events: none;
  transition: background-color .35s ease;
}
:is(.title, .hint)[data-backdrop="light"] {
  --label: rgb(0 0 0 / 85%);
  --label-2: rgb(60 60 67 / 80%);
  --scrim: rgb(255 255 255 / 48%);
  --text-shadow: 0 0 10px rgb(255 255 255 / 55%);
  --glyph-shadow: none;
}

/* ---------- Top bar: title + top-right controls ---------- */
.topbar {
  position: absolute;
  z-index: 3;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: var(--edge-t) var(--edge-r) 0 var(--edge-l);
  pointer-events: none;
}
.title {
  flex: 0 1 auto;
  min-width: 0;
  padding: 11px 0;
  font: 600 17px/22px var(--font);
  letter-spacing: -.022em;
}
.title-text { display: block; overflow-wrap: anywhere; }
.top-controls { position: relative; flex: none; display: flex; align-items: center; gap: 10px; border-radius: 22px; }
.top-controls > * { pointer-events: auto; }

.glass-icon { display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border-radius: 50%; }
.glass-icon > svg { display: block; filter: var(--glyph-shadow); }
#fullscreen .icon-exit, #fullscreen[data-active="true"] .icon-enter { display: none; }
#fullscreen[data-active="true"] .icon-exit { display: block; }

/* Level dial (Maps-style compass): grows out of its glass group when the view is rolled. */
#level-view svg { overflow: visible; }
#level-view .level-pointer { fill: var(--red); }
#level-view .level-tail { fill: currentColor; opacity: .75; }
#level-view:not([hidden]) { animation: glass-grow .5s var(--spring) both; }
@keyframes glass-grow { from { width: 0; opacity: 0; transform: scale(.4); } }

.camera-controls { position: static; }
.controls-toggle, .language-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 44px;
  padding: 0 17px 0 13px;
  border-radius: 999px;
  list-style: none;
  font: 600 15px/20px var(--font);
  letter-spacing: -.012em;
  white-space: nowrap;
}
.controls-toggle::-webkit-details-marker { display: none; }
.controls-toggle::marker { content: ""; }
.controls-toggle > svg, .language-toggle > svg { filter: var(--glyph-shadow); }
/* Selected: an inverted, near-opaque platter (as iOS does for selected bar items), legible on any backdrop. */
.camera-controls[open] > .controls-toggle, .language-toggle.glass[aria-expanded="true"] {
  --tint: rgb(255 255 255 / 90%);
  --fill: rgb(255 255 255 / 90%);
  --glyph-shadow: none;
  color: rgb(0 0 0 / 85%);
}

/* ---------- Language menu (regular glass; pops out of its button like Controls) ---------- */
/*
 * Anchored to the whole top-right group, like the Controls popover, so it opens leftward from the
 * screen edge and never runs off the left side on narrow phones. viewer.js aims the pop animation
 * at the globe button (--language-origin, distance from the right edge).
 */
.language-menu { position: static; flex: none; }
.language-popover {
  position: absolute;
  z-index: 2;
  top: calc(100% + 10px);
  right: 0;
  display: grid;
  gap: 2px;
  min-width: 184px;
  max-width: calc(100vw - var(--edge-l) - var(--edge-r));
  padding: 6px;
  border-radius: 22px;
  color: var(--label);
  transform-origin: calc(100% - var(--language-origin, 24px)) 0;
}
.language-popover[data-backdrop="light"] { --tint-popover: rgb(26 27 30 / 72%); }
.language-popover:not([hidden]) { animation: glass-pop .5s var(--spring) both; }
/* Items are fills on the glass; radius 16 = 22 popover - 6 inset. */
.language-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 0 16px 0 10px;
  border-radius: 16px;
  text-align: start;
  font: 500 15px/20px var(--font);
  letter-spacing: -.012em;
  white-space: nowrap;
}
.language-check { visibility: hidden; }
.language-option[aria-checked="true"] { font-weight: 600; }
.language-option[aria-checked="true"] .language-check { visibility: visible; }

/* ---------- Controls popover (regular glass; pops out of its button) ---------- */
.controls-popover {
  position: absolute;
  z-index: 2;
  top: calc(100% + 10px);
  right: 0;
  width: min(340px, calc(100vw - 32px));
  border-radius: 28px;
  color: var(--label);
  transform-origin: 82% 0;
}
/* Over bright content the popover does not flip; it gets denser so its labels keep their contrast. */
.controls-popover[data-backdrop="light"] { --tint-popover: rgb(26 27 30 / 72%); }
.camera-controls[open] .controls-popover { animation: glass-pop .5s var(--spring) both; }
@keyframes glass-pop { from { opacity: 0; transform: translateY(-8px) scale(.88); } }
.controls-scroll {
  max-height: calc(100dvh - var(--edge-t) - 72px);
  overflow: auto;
  overscroll-behavior: contain;
  padding: 16px;
  border-radius: inherit;
  scrollbar-width: thin;
  scrollbar-color: rgb(255 255 255 / 30%) transparent;
}
.controls-scroll::-webkit-scrollbar { width: 4px; }
.controls-scroll::-webkit-scrollbar-thumb { border-radius: 999px; background: rgb(255 255 255 / 30%); }
.controls-sections {
  display: grid;
  grid-template-columns: 140px 140px;
  grid-template-areas: "move view" "manual manual";
  justify-content: space-between;
  gap: 16px 12px;
}
.controls-sections h2 { margin: 0 0 8px; font: 600 15px/20px var(--font); letter-spacing: -.012em; color: var(--label); }
.controls-sections p { margin: 0; font-size: 13px; line-height: 18px; color: var(--label-2); }
/* Move & rotate (user request 2026-10-16): the rotate buttons are the pad's third row, under A and S (the empty corner
   under D keeps the pad from looking like a second arrow cross), and the pad sits at
   the bottom of its column, so the block ends level with the View block's axis buttons (no separate Rotate row). */
.movement-guide { grid-area: move; display: flex; flex-direction: column; }
.movement-guide .key-guide { margin-top: auto; }
.views-guide { grid-area: view; }
.key-guide { display: grid; grid-template-columns: repeat(3, 44px); gap: 4px; }
.key-guide button:first-child { grid-column: 2; }
.key-guide button:nth-child(2) { grid-column: 1; }
.controls-popover .key-guide button {
  --fill: var(--fill-1);
  display: grid;
  place-items: center;
  height: 44px;
  border-radius: 12px;
  font: 600 15px/1 var(--font);
}
.controls-popover .key-guide button.is-active:not(:disabled) { --fill: var(--fill-3); transform: scale(.96); }
/* Walking speed (1× → 2× → 8×): a small round fill like the Rotate buttons, in the key pad's free corner.
   The disc is 36 px; ::after keeps the whole 44 px cell as its hit area. */
.key-guide .walk-speed { grid-column: 3; grid-row: 1; }
.key-guide [data-roll="ccw"] { grid-column: 1; grid-row: 3; }
.key-guide [data-roll="cw"] { grid-column: 2; grid-row: 3; }
/* Rotate glyph (user request 2026-10-16): one slightly turned square and a tiny curved arrow for the direction. */
.controls-popover .key-guide button.walk-speed {
  place-self: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font: 600 13px/1 var(--font);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.walk-speed::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.axis-placeholder { margin: 0; font-size: 13px; line-height: 18px; color: var(--label-2); }

/* Pointer-specific copy: keyboard help for mouse and trackpad, gestures and arrows for touch. */
.copy-touch, .key-arrow { display: none; }
@media (pointer: coarse) and (hover: none) {
  .copy-fine, .key-cap { display: none; }
  .copy-touch { display: revert; }
  .key-arrow { display: block; }
}

/* Axis views (built by camera-navigation.js). */
.view-navigation { position: relative; width: 100%; }
.view-name { display: block; text-align: center; font-size: 13px; line-height: 18px; color: var(--label-2); white-space: nowrap; }
.view-cube-stage { height: 64px; display: grid; place-items: center; }
.view-cube { position: relative; width: 38px; height: 38px; transform-style: preserve-3d; }
.cube-face {
  position: absolute; inset: 0; width: 38px; height: 38px; padding: 0;
  border-radius: 4px; backface-visibility: hidden;
  background: rgb(255 255 255 / 14%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 34%);
  font: 700 11px/1 var(--font);
}
.cube-face:disabled { color: var(--label-disabled); }
.face-positive-x { transform: rotateY(90deg) translateZ(19px); }
.face-negative-x { transform: rotateY(-90deg) translateZ(19px); }
.face-positive-y { transform: rotateX(90deg) translateZ(19px); }
.face-negative-y { transform: rotateX(-90deg) translateZ(19px); }
.face-positive-z { transform: translateZ(19px); }
.face-negative-z { transform: rotateY(180deg) translateZ(19px); }
.axis-buttons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 2px; }
.controls-popover .axis-buttons button,
.controls-popover button.perspective-view { --fill: var(--fill-1); height: 36px; border-radius: 10px; font: 600 13px/1 var(--font); }
.controls-popover button.perspective-view { width: 100%; margin-top: 6px; }
/* Axis colour is information (X red, Y green, Z blue), carried by the label only. */
.axis-buttons .axis-x:not(:disabled), .cube-face.axis-x:not(:disabled) { color: #ffb3ad; }
.axis-buttons .axis-y:not(:disabled), .cube-face.axis-y:not(:disabled) { color: #9ff0b4; }
.axis-buttons .axis-z:not(:disabled), .cube-face.axis-z:not(:disabled) { color: #a8d4ff; }
.controls-popover .axis-buttons button[aria-pressed="true"]:not(:disabled) { --fill: rgb(255 255 255 / 30%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 45%), var(--ring, 0 0 #0000); }
/* Touch: full 44pt targets (radius 12 = 28 popover - 16 inset), and the cube is an indicator only. */
@media (pointer: coarse) {
  .controls-popover .axis-buttons button, .controls-popover button.perspective-view { height: 44px; border-radius: 12px; }
  .view-cube { pointer-events: none; }
}

/* Operation manual (user request 2026-10-15): one compact block in the closing quote's small type, the last row of
   the sections grid (the selector outranks .controls-sections p). Japanese and Chinese break between phrases only. */
.controls-sections .controls-manual {
  grid-area: manual;
  margin: 0;
  padding-top: 12px;
  border-top: .5px solid var(--separator);
  font-size: 12px;
  line-height: 17px;
  color: var(--label-2);
  text-wrap: pretty;
}
.controls-manual:is(:lang(ja), :lang(zh-Hans)) { word-break: keep-all; }
/* Legacy (an index.html of 2026-10-07 or 2026-10-16 morning still cached by a browser during an update): the status line,
   the separate Rotate row (with its hint), the gesture row and the shortcut row. Remove together with the legacy i18n keys. */
.roll-guide { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding-top: 14px; border-top: .5px solid var(--separator); }
.roll-guide h2 { margin: 0; flex: none; }
.roll-buttons { display: flex; gap: 6px; flex: none; }
.controls-popover .roll-buttons button { --fill: var(--fill-1); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; }
.controls-popover .roll-buttons button.is-active:not(:disabled) { --fill: var(--fill-3); }
.camera-controls-status { margin: 0 4px 14px; font-size: 13px; line-height: 18px; color: var(--label-2); }
.roll-guide p { flex: 1 1 140px; }
.gesture-guide { grid-area: manual; display: grid; gap: 4px; padding-top: 14px; border-top: .5px solid var(--separator); }
.controls-shortcuts { margin: 14px 0 0; padding-top: 12px; border-top: .5px solid var(--separator); font-size: 13px; line-height: 18px; color: var(--label-3); }
@media (pointer: coarse) and (hover: none) { .controls-shortcuts { display: none; } }
/* Closing quote (user request 2026-10-06): the last line, small and muted under its own hairline.
   The book title is italic (cite); the quotation itself stays upright. */
.controls-quote {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: .5px solid var(--separator);
  font-size: 12px;
  line-height: 17px;
  color: var(--label-3);
  text-wrap: pretty;
}
.controls-quote cite { font-style: italic; }
.quote-source { white-space: nowrap; }

/* ---------- Start (one prominent, tinted action) ---------- */
.welcome {
  position: absolute; inset: 0; display: grid; place-items: center;
  /* Soft dimming so the tinted capsule reads over snow or a bright sky. */
  background: radial-gradient(ellipse 230px 90px at 50% 50%, rgb(0 0 0 / 24%), rgb(0 0 0 / 0) 100%);
}
.welcome-card { max-width: calc(100% - 32px); text-align: center; }
#start {
  --tint: var(--tint-prominent);
  --glow-size: 90px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  max-width: 100%;
  min-height: 52px;
  padding: 0 24px 0 20px;
  border-radius: 999px;
  font: 600 17px/22px var(--font);
  letter-spacing: -.022em;
  -webkit-backdrop-filter: blur(14px) saturate(200%) brightness(.9);
  backdrop-filter: blur(14px) saturate(200%) brightness(.9);
  box-shadow: inset 0 0 0 .5px rgb(255 255 255 / 22%), inset 0 1px 0 rgb(255 255 255 / 36%),
    inset 0 -1px 2px rgb(255 255 255 / 10%), inset 0 0 18px rgb(255 255 255 / 8%),
    0 10px 28px rgb(0 40 110 / 26%), 0 2px 5px rgb(0 0 0 / 16%), var(--ring, 0 0 #0000);
}
#start:disabled { --tint: var(--tint-regular); color: var(--label-2); box-shadow: var(--glass-edge), var(--glass-shadow); }
#start .start-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) {
  #start:hover:not(:disabled) { --tint: rgb(14 116 232 / 86%); }
}

/* ---------- Loading and error ---------- */
.loading {
  position: absolute;
  left: 50%; top: 48%;
  translate: -50% -50%;
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px;
  width: max-content; max-width: calc(100% - 32px);
  padding: 0 20px 0 16px;
  border-radius: 999px;
  --tint: var(--tint-regular);
  font: 500 15px/20px var(--font);
}
.spinner { display: block; flex: none; width: 20px; height: 20px; }
.spinner svg { display: block; animation: glass-spin .8s steps(8) infinite; }
@keyframes glass-spin { to { transform: rotate(360deg); } }
.error {
  position: absolute;
  top: 44%; left: 50%;
  translate: -50% -50%;
  width: min(380px, calc(100% - 32px));
  margin: 0;
  padding: 20px;
  border-radius: 28px;
  text-align: center;
  font-size: 15px; line-height: 20px;
}
.error p { margin: 0 0 16px; }
#retry {
  --fill: rgb(0 100 214 / 92%);
  min-height: 44px;
  padding: 0 22px;
  font: 600 15px/20px var(--font);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 26%), var(--ring, 0 0 #0000);
}
@media (hover: hover) and (pointer: fine) { #retry:hover { --fill: rgb(14 116 232 / 95%); } }
#retry.is-pressed, #retry:active { --fill: rgb(40 132 240); }

/* ---------- Bottom: one capsule, the Quality pop-up | Reset (the camera itself is free) ---------- */
.bottom-panel {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 48px var(--edge-r) var(--edge-b) var(--edge-l);
  pointer-events: none;
  transition: opacity .2s ease, visibility .2s;
}
.toolbar-row { display: flex; align-items: center; justify-content: center; max-width: 100%; }
.toolbar-row > * { pointer-events: auto; }
.view-toolbar {
  --tint: var(--tint-regular);
  display: flex;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
  gap: 2px;
  padding: 4px;
  border-radius: 999px;
  -webkit-backdrop-filter: var(--glass-backdrop-bar);
  backdrop-filter: var(--glass-backdrop-bar);
}
.scene-selector {
  display: block;
  flex: 0 1 auto;
  min-width: 0;
  height: 44px;
  border-radius: 999px;
}
.scene-selector select {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  max-width: 280px;
  height: 44px;
  padding: 0 30px 0 var(--value-start, 74px);
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: var(--label);
  font: 500 15px/20px var(--font);
  letter-spacing: -.012em;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  /* Size to the current value like a pop-up button where supported. */
  field-sizing: content;
  transition: color .35s ease;
}
.scene-selector select:disabled { color: var(--label-disabled); cursor: default; }
.scene-selector select:focus-visible { box-shadow: var(--ring); }
.scene-selector option { color: #fff; background: #2c2c2e; }
.selector-caption {
  position: absolute;
  left: 16px; top: 50%;
  translate: 0 -50%;
  font: 400 13px/18px var(--font);
  color: var(--label-2);
  pointer-events: none;
}
/* The value starts a fixed gap after its caption. CJK captions are 2 em at 13px (26px), narrower
   than "Quality", so they move the value in to keep the same spacing in every language. */
.scene-selector:is(:lang(ja), :lang(zh-Hans)) { --value-start: 58px; --value-start-compact: 52px; }
.selector-chevron { position: absolute; right: 12px; top: 50%; translate: 0 -50%; stroke-width: 2.1; color: var(--label-2); pointer-events: none; }
.scene-selector:has(select:disabled) :is(.selector-caption, .selector-chevron) { color: var(--label-disabled); }
.scene-selector:has(select:disabled) { cursor: default; }
/* A hairline between the pop-up and Reset (a border, so forced colours keep it visible). */
.toolbar-divider { flex: none; align-self: center; width: 0; height: 22px; margin: 0 3px; border-left: 1px solid var(--separator); transition: border-color .35s ease; }
/* Reset is an item on the toolbar glass (fills only), the same height as the pop-up. */
#reset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: none;
  min-width: 44px;
  height: 44px;
  padding: 0 17px 0 13px;
  font: 500 15px/20px var(--font);
  letter-spacing: -.012em;
  white-space: nowrap;
}
#reset > svg { filter: var(--glyph-shadow); }
.hint {
  margin: 0;
  max-width: 100%;
  font-size: 13px;
  line-height: 18px;
  text-align: center;
  visibility: visible;
  transition: color .35s ease, text-shadow .35s ease, opacity .5s ease, visibility .5s;
}
/* The hint teaches the first move, then gets out of the way of the content. */
#scene[data-explored] .hint { opacity: 0; visibility: hidden; transition: opacity .6s ease .6s, visibility 0s 1.2s; }
.hint-more { white-space: nowrap; }
.hint .glyph { vertical-align: -2px; stroke-width: 2; filter: var(--glyph-shadow); }

/* ---------- Touch movement dock (touch screens, once the scene is ready; viewer.js) ---------- */
/*
 * User request 2026-10-06: on touch screens on-screen buttons move the eye; gestures only look around, pinch the
 * field of view and twist. Each key is its own small clear-glass surface, so the scene shows between them:
 * W A S D in the bottom-left corner; Up / n× / Down (eye height and the shared walking speed) in the bottom-right
 * under a small hide button. The buttons are [data-move] buttons (camera-navigation.js). Phones in portrait stack
 * the dock above the Quality | Reset pill; wider screens put the clusters level with it and keep the pill and the
 * hint between them. Hidden, only the round show button remains in the bottom-right corner.
 */
.touch-dock { display: none; }
#scene[data-touch][data-state="ready"] .touch-dock {
  display: flex;
  align-self: stretch;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  pointer-events: none;
  transition: opacity .2s ease, visibility .2s;
}
.dock-pad {
  display: grid;
  grid-template-columns: repeat(3, var(--dock-key));
  grid-template-rows: repeat(2, var(--dock-key));
  gap: var(--dock-gap);
}
.dock-pad [data-move="w"] { grid-area: 1 / 2; }
.dock-pad [data-move="a"] { grid-area: 2 / 1; }
.dock-pad [data-move="s"] { grid-area: 2 / 2; }
.dock-pad [data-move="d"] { grid-area: 2 / 3; }
.dock-side, .dock-lift { display: flex; flex-direction: column; align-items: center; gap: var(--dock-gap); }
.dock-side { gap: 10px; margin-left: auto; }
.touch-dock button {
  pointer-events: auto;
  display: grid;
  place-items: center;
  padding: 0;
  /* Holding and sliding on a key must never scroll, zoom the page or open a callout. */
  touch-action: none;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
}
.dock-key { width: var(--dock-key); height: var(--dock-key); border-radius: 15px; }
.dock-round { width: var(--dock-key); height: var(--dock-key); border-radius: 50%; }
.touch-dock .dock-speed {
  width: var(--dock-small);
  height: var(--dock-small);
  border-radius: 50%;
  font: 600 13px/1 var(--font);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  white-space: nowrap;
  text-shadow: 0 .5px 1px rgb(0 0 0 / 22%);
}
/* The hide/show button is visually small; ::after keeps a 44 px hit area (the speed disc uses .walk-speed::after). */
.dock-toggle { width: calc(var(--dock-small) - 2px); height: calc(var(--dock-small) - 2px); border-radius: 50%; }
.dock-toggle::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; }
.touch-dock svg { display: block; filter: var(--glyph-shadow); }
.touch-dock .glyph { stroke-width: 2; }
.dock-toggle .icon-show, #scene[data-dock="hidden"] .dock-toggle .icon-hide { display: none; }
#scene[data-dock="hidden"] .dock-toggle .icon-show { display: block; }
#scene[data-dock="hidden"] :is(.dock-pad, .dock-lift) { display: none; }
/* Held keys stay lit while their finger is down (several can be held at once). */
.touch-dock button.is-active:not(:disabled) { --glow: 1; --tint: var(--dock-active); }
/* No glass on glass: the dock steps aside while the Controls popover (which has its own pad) is open. */
#scene:has(.camera-controls[open]) .touch-dock { opacity: 0; visibility: hidden; }
#scene:has(.camera-controls[open]) .touch-dock * { pointer-events: none; }
/* Tablets: held in two hands with the thumbs at the bottom corners, so slightly larger keys. */
@media (min-width: 700px) and (min-height: 700px) {
  :root { --dock-key: 52px; --dock-small: 42px; --dock-gap: 8px; }
}
/* Wide enough for pad | pill | column side by side (landscape phones, tablets): the clusters sit in the bottom
   corners level with the pill, and the pill and the hint keep to the middle. */
@media (min-width: 620px) {
  #scene[data-touch][data-state="ready"] .touch-dock { position: absolute; left: var(--edge-l); right: var(--edge-r); bottom: var(--edge-b); }
  #scene[data-touch][data-state="ready"] .bottom-panel {
    padding-left: calc(var(--edge-l) + var(--dock-pad-width) + 12px);
    padding-right: calc(var(--edge-r) + var(--dock-pad-width) + 12px);
  }
  #scene[data-touch][data-state="ready"][data-dock="hidden"] .bottom-panel {
    padding-left: calc(var(--edge-l) + 56px);
    padding-right: calc(var(--edge-r) + 56px);
  }
}

/* ---------- Compact widths (phones) ---------- */
@media (max-width: 600px) {
  .title { font-size: 16px; line-height: 20px; padding: 12px 0; }
  .title-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
  .controls-label, .language-label { display: none; }
  /* All top-right buttons are icons here, so they share one glass capsule. */
  .top-controls { gap: 0; }
  .top-controls::before {
    --tint: var(--tint-clear);
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(rgb(255 255 255 / 9%), rgb(255 255 255 / 0) 52%), var(--tint);
    -webkit-backdrop-filter: var(--glass-backdrop);
    backdrop-filter: var(--glass-backdrop);
    box-shadow: var(--glass-edge), var(--glass-shadow);
    transition: --tint .35s ease;
  }
  .top-controls::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    padding: 1px;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(168deg, rgb(255 255 255 / 38%), rgb(255 255 255 / 10%) 24%, rgb(255 255 255 / 0) 46%, rgb(255 255 255 / 3%) 70%, rgb(255 255 255 / 18%));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
  }
  .top-icons::before, .top-icons::after, .controls-toggle.glass::before, .language-toggle.glass::before { display: none; }
  .controls-toggle.glass, .language-toggle.glass {
    --glow-size: 56px;
    --fill: transparent;
    width: 44px;
    padding: 0;
    border-radius: 50%;
    background:
      radial-gradient(circle var(--glow-size) at var(--px, 50%) var(--py, 50%), rgb(255 255 255 / calc(var(--glow) * 24%)), rgb(255 255 255 / 0) 100%),
      var(--fill);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: var(--ring, 0 0 #0000);
  }
  /* The same capsule, a little tighter: Quality pop-up | Reset, every target still 44 px tall. */
  .view-toolbar { padding: 2px; gap: 0; }
  .scene-selector select { font-size: 14px; padding: 0 24px 0 var(--value-start-compact, 66px); }
  .selector-chevron { right: 9px; }
  .selector-caption { left: 14px; }
  .toolbar-divider { margin: 0 2px; }
  #reset { font-size: 14px; padding: 0 15px 0 11px; }
}
/* Very narrow screens: Reset becomes its circular glyph; its accessible name is unchanged. */
@media (max-width: 300px) {
  .reset-label { display: none; }
  #reset { width: 44px; padding: 0; }
}
@media (max-width: 360px) {
  .controls-sections { grid-template-columns: 1fr; grid-template-areas: "move" "view" "manual"; }
  .movement-guide .key-guide { margin-top: 0; }
}
/* Short, wide viewports (embeds up to ~680px tall, landscape phones from 560px wide): wider popover, three columns. */
@media (max-height: 700px) and (min-width: 560px) {
  .controls-popover { width: min(560px, calc(100vw - 32px)); }
  .controls-sections { grid-template-columns: 140px 140px 1fr; grid-template-areas: "move view manual"; gap: 12px 16px; }
  .controls-sections .controls-manual { align-self: start; }
  .roll-guide { flex-direction: column; align-items: flex-start; padding: 0; border-top: 0; }
  .roll-guide h2 { margin-bottom: 0; }
  .roll-guide p { flex: none; }
  .gesture-guide { padding-top: 12px; }
}
/* Narrow phones: the open popover reaches the Quality | Reset pill, which steps aside instead of peeking out under it. */
@media (max-width: 360px) {
  #scene:has(.camera-controls[open]) .bottom-panel { opacity: 0; visibility: hidden; pointer-events: none; }
  #scene:has(.camera-controls[open]) .bottom-panel * { pointer-events: none; }
}
@media (max-height: 520px) {
  .bottom-panel { padding-top: 28px; gap: 6px; }
  /* No room for both: the open popover takes the height and the toolbar steps aside (no glass on glass). */
  #scene:has(.camera-controls[open]) .bottom-panel { opacity: 0; visibility: hidden; pointer-events: none; }
  #scene:has(.camera-controls[open]) .bottom-panel * { pointer-events: none; }
  .controls-scroll { max-height: calc(100dvh - var(--edge-t) - 54px - var(--edge-b)); }
}
@media (max-height: 420px) {
  /* Landscape phones: the closing quote steps aside so the manual and the controls fit without scrolling. */
  .hint, .controls-quote, .gesture-guide, .controls-shortcuts { display: none; }
}

/* ---------- Accessibility and fallbacks ---------- */
@media (prefers-reduced-motion: reduce) {
  .glass-press, .glass-item, .controls-popover button, .language-option { transition: --glow .2s ease, background-color .2s ease; }
  .glass-press.is-pressed:not(:disabled), .glass-press:active:not(:disabled),
  .glass-item.is-pressed:not(:disabled), button.glass-item:active:not(:disabled),
  .controls-popover button.is-pressed:not(:disabled), .controls-popover button:active:not(:disabled),
  .language-option.is-pressed, .language-option:active,
  .controls-popover .key-guide button.is-active:not(:disabled) { transform: none; }
  .camera-controls[open] .controls-popover, .language-popover:not([hidden]) { animation: glass-fade .2s ease both; }
  #level-view:not([hidden]) { animation: glass-fade .2s ease both; }
  .spinner svg { animation-duration: 2s; }
  .scene-poster { transition: none; }
}
@keyframes glass-fade { from { opacity: 0; } }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root, :is(.controls-popover, .language-popover), :is(.controls-popover, .language-popover)[data-backdrop="light"] { --tint-clear: rgb(30 31 34 / 90%); --tint-regular: rgb(30 31 34 / 90%); --tint-popover: rgb(30 31 34 / 92%); }
  :is(.top-controls, .toolbar-row, .dock-pad, .dock-side)[data-backdrop="light"] { --tint-clear: rgb(242 242 247 / 92%); --tint-regular: rgb(242 242 247 / 92%); }
  #start:not(:disabled) { --tint: rgb(0 92 200); }
}
/* Reduce Transparency (Chromium only): frostier, mostly opaque glass in either appearance. */
@media (prefers-reduced-transparency: reduce) {
  :root, :is(.controls-popover, .language-popover), :is(.controls-popover, .language-popover)[data-backdrop="light"] { --tint-clear: rgb(30 31 34 / 93%); --tint-regular: rgb(30 31 34 / 93%); --tint-popover: rgb(30 31 34 / 95%); }
  :is(.top-controls, .toolbar-row, .dock-pad, .dock-side)[data-backdrop="light"] { --tint-clear: rgb(242 242 247 / 94%); --tint-regular: rgb(242 242 247 / 94%); }
  #start:not(:disabled) { --tint: rgb(0 92 200 / 97%); }
  .title::before, .hint::before { filter: blur(8px); }
  :root { --scrim: rgb(0 0 0 / 62%); }
  :is(.title, .hint)[data-backdrop="light"] { --scrim: rgb(255 255 255 / 72%); }
}
/* Increase Contrast (reaches Safari/iOS): predominantly black with a contrasting border, never flipped. */
@media (prefers-contrast: more) {
  :root, .controls-popover, .language-popover, :is(.top-controls, .toolbar-row, .dock-pad, .dock-side, .controls-popover, .language-popover)[data-backdrop="light"] {
    --label: #fff; --label-2: #fff; --label-3: #fff; --label-disabled: rgb(255 255 255 / 60%);
    --separator: rgb(255 255 255 / 60%); --glyph-shadow: none;
    --fill-1: rgb(255 255 255 / 10%); --fill-2: rgb(255 255 255 / 16%); --fill-3: rgb(255 255 255 / 26%); --fill-hover: rgb(255 255 255 / 8%);
    --tint-clear: #000; --tint-regular: #000; --tint-popover: #000; --dock-active: #3a3a3c;
  }
  .glass, .glass-regular, .glass-group::before, .top-controls::before, #start:disabled {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: inset 0 0 0 1.5px #fff, var(--ring, 0 0 #0000);
  }
  .camera-controls[open] > .controls-toggle, .language-toggle.glass[aria-expanded="true"] { --tint: #3a3a3c; --fill: #3a3a3c; color: #fff; }
  #start:not(:disabled) { --tint: #0040dd; box-shadow: inset 0 0 0 1.5px #fff, var(--ring, 0 0 #0000); }
  .glass::before, .glass-group::after, .top-controls::after { display: none; }
  .controls-popover button:not(.cube-face), .glass-item { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 70%), var(--ring, 0 0 #0000); }
  .language-option[aria-checked="true"] { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 70%), var(--ring, 0 0 #0000); }
  :root { --scrim: rgb(0 0 0 / 70%); --text-shadow: 0 0 3px #000, 0 1px 2px #000; }
  :is(.title, .hint)[data-backdrop="light"] { --scrim: rgb(255 255 255 / 80%); --text-shadow: 0 0 3px #fff; --label: #000; }
}
@media (forced-colors: active) {
  .glass, .glass-item, .controls-popover button, .language-option, .view-toolbar { border: 1px solid ButtonText; box-shadow: none; text-shadow: none; forced-color-adjust: auto; }
  .glass::before, .glass-group::before, .glass-group::after, .top-controls::before, .top-controls::after, .title::before, .hint::before { display: none; }
  .scene-selector, .view-toolbar .glass-item { border: 0; }
  :where(button, summary, select):focus-visible { outline: 2px solid Highlight; }
  #level-view .level-pointer { fill: CanvasText; }
}

/* Focus rings are for keyboard users only: after a mouse/touch press (including scripted focus moves
   such as opening a menu) no ring is drawn over the glass. viewer.js sets data-input on <html>. */
:root[data-input="pointer"] :focus-visible { outline: none !important; --ring: 0 0 #0000; }
:root[data-input="pointer"] .scene-selector select:focus-visible { box-shadow: none; }