html,body { margin:0; padding:0; background:#000; color:#cdf6ff; height:100%;
              font-family: 'SF Mono', 'Menlo', 'Consolas', monospace; overflow:hidden; }
  #app { position:fixed; inset:0; }
  .sr-only {
    position: fixed;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  canvas {
    display:block;
    cursor: none;
    touch-action: none;
  }
  #tron-disc-cursor {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 80;
    width: 33px;
    height: 33px;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translate3d(-100px, -100px, 0) translate(-50%, -50%) rotate(0deg);
    transition: none;
    will-change: transform, opacity;
    contain: layout paint style;
  }
  #tron-disc-cursor::before,
  #tron-disc-cursor::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
  }
  #tron-disc-cursor::before {
    background:
      radial-gradient(circle at 50% 50%, transparent 0 29%, rgba(0, 15, 18, 0.96) 30% 45%, transparent 46%),
      conic-gradient(from 0deg,
        rgba(97, 247, 255, 0.98) 0deg 32deg,
        rgba(97, 247, 255, 0.20) 32deg 54deg,
        transparent 54deg 93deg,
        rgba(210, 255, 255, 0.98) 93deg 102deg,
        transparent 102deg 181deg,
        rgba(97, 247, 255, 0.98) 181deg 213deg,
        rgba(97, 247, 255, 0.18) 213deg 236deg,
        transparent 236deg 292deg,
        rgba(210, 255, 255, 0.98) 292deg 302deg,
        transparent 302deg 360deg);
    -webkit-mask: radial-gradient(circle, transparent 0 34%, #000 35% 57%, transparent 58%);
    mask: radial-gradient(circle, transparent 0 34%, #000 35% 57%, transparent 58%);
    filter: drop-shadow(0 0 5px rgba(70, 244, 255, 0.95)) drop-shadow(0 0 11px rgba(33, 205, 224, 0.62));
  }
  #tron-disc-cursor::after {
    inset: 6px;
    border: 1.4px solid rgba(62, 246, 255, 0.92);
    border-left-color: rgba(62, 246, 255, 0.14);
    border-bottom-color: rgba(62, 246, 255, 0.28);
    box-shadow:
      0 0 5px rgba(70, 244, 255, 0.9),
      inset 0 0 6px rgba(70, 244, 255, 0.56);
  }
  #tron-disc-cursor .disc-core {
    position: absolute;
    inset: 12.5px;
    border-radius: 50%;
    border: 1px solid rgba(218, 255, 255, 0.94);
    box-shadow: 0 0 5px rgba(76, 245, 255, 0.9);
  }
  #tron-disc-cursor .disc-wait-ring {
    position: absolute;
    inset: -9px;
    opacity: 0;
    pointer-events: none;
    animation: tron-disc-wait-orbit 0.82s linear infinite;
    animation-play-state: paused;
    transition: none;
    filter:
      drop-shadow(0 0 5px rgba(70, 244, 255, 0.88))
      drop-shadow(0 0 13px rgba(33, 205, 224, 0.44));
  }
  #tron-disc-cursor .disc-wait-notch {
    position: absolute;
    left: 50%;
    top: 0;
    width: 3px;
    height: 11px;
    border-radius: 3px;
    background: linear-gradient(180deg, rgba(226, 255, 255, 0.98), rgba(70, 244, 255, 0.26));
    box-shadow:
      0 0 5px rgba(70, 244, 255, 0.88),
      0 0 11px rgba(33, 205, 224, 0.5);
    transform: translateX(-50%) rotate(0deg);
    transform-origin: 50% 26px;
  }
  #tron-disc-cursor .disc-wait-notch:nth-child(2) {
    transform: translateX(-50%) rotate(120deg);
  }
  #tron-disc-cursor .disc-wait-notch:nth-child(3) {
    transform: translateX(-50%) rotate(240deg);
  }
  #tron-disc-cursor.is-reveal-waiting .disc-wait-ring {
    opacity: 1;
    animation-play-state: running;
  }
  #tron-reveal-wait-label {
    position: fixed;
    right: max(72px, env(safe-area-inset-right));
    bottom: max(42px, env(safe-area-inset-bottom));
    z-index: 81;
    display: inline-flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 0.04em;
    pointer-events: none;
    opacity: 0;
    color: oklch(92% 0.11 205);
    font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
    font-size: clamp(24px, 2.2vw, 30px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.1em;
    text-align: right;
    text-transform: none;
    text-shadow:
      0 0 5px rgba(70, 244, 255, 0.78),
      0 0 16px rgba(33, 205, 224, 0.38);
    transform: translateZ(0);
    transition: none;
  }
  .tron-wait-dots {
    display: inline-flex;
    justify-content: space-between;
    width: 0.88em;
    margin-left: 0.02em;
    letter-spacing: 0;
  }
  .tron-wait-dot {
    display: inline-block;
    opacity: 0.28;
    transform: translateY(0);
  }
  #tron-reveal-wait-label.is-active .tron-wait-dot {
    animation: tron-wait-dot-scan 0.84s cubic-bezier(0.16, 1, 0.3, 1) infinite;
  }
  #tron-reveal-wait-label .tron-wait-dot:nth-child(1) {
    animation-delay: 0s;
  }
  #tron-reveal-wait-label .tron-wait-dot:nth-child(2) {
    animation-delay: 0.16s;
  }
  #tron-reveal-wait-label .tron-wait-dot:nth-child(3) {
    animation-delay: 0.32s;
  }
  #tron-reveal-wait-label.is-active {
    opacity: 1;
    animation: tron-reveal-wait-label-pulse 0.92s cubic-bezier(0.16, 1, 0.3, 1) infinite;
  }
  @keyframes tron-reveal-wait-label-pulse {
    0%, 100% {
      opacity: 0.54;
      text-shadow:
        0 0 4px rgba(70, 244, 255, 0.55),
        0 0 12px rgba(33, 205, 224, 0.22);
    }
    50% {
      opacity: 1;
      text-shadow:
        0 0 7px rgba(226, 255, 255, 0.82),
        0 0 18px rgba(70, 244, 255, 0.72),
        0 0 34px rgba(33, 205, 224, 0.42);
    }
  }
  @keyframes tron-disc-wait-orbit {
    to {
      transform: rotate(360deg);
    }
  }
  @keyframes tron-wait-dot-scan {
    0%, 100% {
      opacity: 0.28;
      text-shadow: 0 0 4px rgba(70, 244, 255, 0.3);
      transform: translateY(0);
    }
    38% {
      opacity: 1;
      text-shadow:
        0 0 6px rgba(226, 255, 255, 0.88),
        0 0 16px rgba(70, 244, 255, 0.72);
      transform: translateY(-0.14em);
    }
    62% {
      opacity: 0.44;
      text-shadow: 0 0 7px rgba(70, 244, 255, 0.42);
      transform: translateY(0);
    }
  }
  body.tron-disc-cursor-visible #tron-disc-cursor {
    opacity: 1;
    visibility: visible;
  }
  body.mouse-look-engaged #tron-disc-cursor,
  #tron-disc-cursor.is-hidden {
    opacity: 0 !important;
    visibility: hidden !important;
  }
  #contact-terminal-action,
  #contact-terminal-back {
    position: fixed;
    z-index: 90;
    box-sizing: border-box;
    border: 1px solid oklch(84% 0.14 202 / 0.84);
    border-radius: 6px;
    background: oklch(12% 0.028 215 / 0.94);
    color: oklch(94% 0.045 205);
    font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
    font-weight: 800;
    letter-spacing: 0;
    box-shadow: 0 0 18px oklch(80% 0.14 202 / 0.24), inset 0 0 14px oklch(80% 0.14 202 / 0.08);
    cursor: pointer;
    transition: background-color 150ms cubic-bezier(0.16, 1, 0.3, 1), border-color 150ms cubic-bezier(0.16, 1, 0.3, 1), opacity 150ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  #contact-terminal-action[hidden],
  #contact-terminal-back[hidden] {
    display: none !important;
  }
  #contact-terminal-action {
    left: 50%;
    bottom: max(28px, env(safe-area-inset-bottom));
    min-width: 188px;
    min-height: 44px;
    padding: 10px 16px;
    transform: translateX(-50%);
    font-size: 13px;
  }
  .contact-terminal-key {
    margin-right: 8px;
    color: oklch(82% 0.17 78);
  }
  #contact-terminal-back {
    top: max(18px, env(safe-area-inset-top));
    left: max(18px, env(safe-area-inset-left));
    width: 44px;
    height: 44px;
    padding: 0;
    font-family: system-ui, sans-serif;
    font-size: 25px;
    line-height: 1;
  }
  #contact-terminal-action:hover,
  #contact-terminal-back:hover {
    border-color: oklch(84% 0.17 78);
    background: oklch(19% 0.045 78 / 0.96);
  }
  #contact-terminal-action:focus-visible,
  #contact-terminal-back:focus-visible {
    outline: 3px solid oklch(82% 0.17 78);
    outline-offset: 3px;
  }
  body.contact-terminal-focus #mobile-movement-pad,
  body.contact-terminal-focus .splat-input-overlay,
  body.contact-terminal-focus #hud-tl,
  body.contact-terminal-focus #settings-toggle,
  body.contact-terminal-focus #hud-controls,
  body.contact-terminal-focus #tron-disc-cursor {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  body.contact-terminal-focus #app canvas {
    cursor: pointer;
  }
  @media (hover: none), (pointer: coarse) {
    #contact-terminal-action {
      left: auto;
      right: max(18px, env(safe-area-inset-right));
      bottom: max(18px, env(safe-area-inset-bottom));
      min-width: 154px;
      min-height: 48px;
      padding: 11px 15px;
      transform: none;
      font-size: 12px;
    }
    #contact-terminal-action .contact-terminal-key {
      display: none;
    }
    #contact-terminal-back {
      top: max(12px, env(safe-area-inset-top));
      left: max(12px, env(safe-area-inset-left));
      width: 48px;
      height: 48px;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    #contact-terminal-action,
    #contact-terminal-back {
      transition: none;
    }
  }
  @media (hover: none), (pointer: coarse) {
    #tron-disc-cursor { display: none; }
    canvas { cursor: auto; }
  }
  /* Il pannello dei valori di performance e' uno strumento di lavoro, non parte della
     demo: resta spento salvo che l'URL abbia ?osd (2026-09-18). La classe la mette lo
     script in index.html prima del primo frame, cosi' non lampeggia all'apertura. */
  #hud-tl { display: none; }
  body.osd-on #hud-tl { display: block; }

  .hud {
    position:fixed; pointer-events:none;
    background: rgba(2,9,11,0.55);
    border:1px solid rgba(98,247,255,0.35);
    color:#cdf6ff;
    padding:10px 14px;
    font-size:11px;
    line-height:1.55;
    letter-spacing:0.04em;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-variant-numeric: tabular-nums;
    contain: layout paint;
    text-shadow: 0 0 6px rgba(98,247,255,0.35);
    max-width: 380px;
  }
  .perf-live-overlay {
    display: grid;
    gap: 2px;
    width: min(258px, calc(100vw - 54px));
  }
  .perf-live-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    white-space: nowrap;
  }
  .perf-live-row span:first-child {
    color: rgba(183, 239, 246, 0.72);
  }
  .perf-live-row strong,
  .perf-live-value {
    color: #f2feff;
    font-weight: 600;
    text-align: right;
  }
  .perf-live-primary strong {
    color: #5ff8ff;
    text-shadow: 0 0 8px rgba(95, 248, 255, 0.75);
  }
  .perf-live-muted .perf-live-value {
    color: rgba(205, 246, 255, 0.66);
  }
  .perf-live-warn .perf-live-value {
    color: #ffd36a;
  }
  .perf-live-bad .perf-live-value {
    color: #ff6e8f;
  }
  .perf-live-spike .perf-live-value {
    max-width: 176px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .tech-breakdown-overlay {
    position: fixed;
    top: 14px;
    right: 14px;
    z-index: 82;
    width: min(340px, calc(100vw - 28px));
    box-sizing: border-box;
    pointer-events: none;
    background: rgba(2, 9, 11, 0.72);
    border: 1px solid rgba(98, 247, 255, 0.35);
    color: #cdf6ff;
    padding: 12px 14px;
    font-size: 11px;
    line-height: 1.45;
    letter-spacing: 0.02em;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-variant-numeric: tabular-nums;
    contain: layout paint;
    text-shadow: 0 0 6px rgba(98, 247, 255, 0.25);
  }
  .tech-breakdown-title {
    margin: 0 0 8px;
    color: #f2feff;
    font-weight: 700;
    text-transform: uppercase;
  }
  .tech-breakdown-overlay dl {
    display: grid;
    gap: 4px;
    margin: 0;
  }
  .tech-breakdown-overlay dl > div {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 10px;
    min-width: 0;
  }
  .tech-breakdown-overlay dt {
    color: rgba(183, 239, 246, 0.72);
  }
  .tech-breakdown-overlay dd {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: #f2feff;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  @media (max-width: 760px), (hover: none), (pointer: coarse) {
    .hud {
      padding: 8px 10px;
      font-size: 10px;
      line-height: 1.45;
      max-width: calc(100vw - 24px);
    }
    /* No perf/FPS counter on mobile (production). */
    #hud-tl {
      display: none !important;
    }
    .perf-live-overlay {
      width: min(220px, calc(100vw - 44px));
    }
    #hud-tl .perf-live-overlay {
      display: inline-grid;
      width: max-content;
      min-width: 0;
      gap: 0;
    }
    #hud-tl > :not(.perf-live-overlay) {
      display: none !important;
    }
    #hud-tl .perf-live-row:not(.perf-live-primary) {
      display: none;
    }
    #hud-tl .perf-live-primary {
      display: flex;
      align-items: baseline;
      justify-content: flex-start;
      width: max-content;
      gap: 8px;
    }
    #hud-tl .perf-live-primary strong {
      min-width: 2ch;
    }
    .perf-live-extra-mobile {
      display: none;
    }
    .tech-breakdown-overlay {
      top: max(12px, env(safe-area-inset-top));
      right: 12px;
      width: min(312px, calc(100vw - 24px));
      padding: 10px 12px;
      font-size: 10px;
      line-height: 1.4;
    }
    .tech-breakdown-overlay dl > div {
      grid-template-columns: 68px minmax(0, 1fr);
      gap: 8px;
    }
  }
  #welcome-window-overlay {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: grid;
    align-items: start;
    justify-items: center;
    padding: clamp(34px, 8vh, 84px) 22px 28px;
    overflow-y: auto;
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
    background: oklch(0% 0 0);
    color: oklch(96% 0.018 220);
    transition: opacity 360ms cubic-bezier(0.16, 1, 0.3, 1), visibility 360ms ease;
  }
  #welcome-window-overlay.is-dismissed {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  body.welcome-cover-visible {
    background: oklch(0% 0 0);
  }
  body.welcome-cover-visible #hud-tl,
  body.welcome-cover-visible #hud-controls,
  body.welcome-cover-visible #settings-toggle,
  body.welcome-cover-visible #mobile-performance-diagnostics,
  body.welcome-cover-visible #mobile-movement-pad {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  body.welcome-cover-visible #loader {
    z-index: 20;
    background: transparent;
  }
  body.welcome-cover-visible .welcome-action {
    display: none;
  }
  .welcome-window {
    --welcome-move-x: 0px;
    --welcome-move-y: 0px;
    --welcome-bend-y: 0deg;
    --welcome-tilt-x: 0deg;
    --welcome-origin-x: 50%;
    position: relative;
    width: min(980px, calc(100vw - 44px));
    border: 0;
    background: transparent;
    color: inherit;
    text-align: center;
    box-shadow: none;
    contain: layout paint;
    /* Keep the WebGL heads on a flat compositor layer. A perspective layer
       around the whole cover forces expensive recompositing in Firefox. */
    transform: none;
    transition: none;
    will-change: auto;
  }
  #welcome-window-overlay.is-motion-active .welcome-window {
    transition-duration: 70ms, 180ms;
  }
  .welcome-body {
    display: grid;
    justify-items: center;
    gap: 0;
    padding: 0;
  }
  .welcome-body h1 {
    max-width: 900px;
    margin: 0;
    color: oklch(96% 0.018 220);
    font-family: Sora, Avenir Next, Segoe UI, sans-serif;
    /* 2026-09-18: era clamp(22px, 3.5vw, 48px) e la frase occupava due righe alte quanto le
       foto dei reparti, rubando la scena a quello che sta sotto. */
    font-size: clamp(18px, 2.3vw, 30px);
    font-weight: 800;
    line-height: 1.24;
    letter-spacing: 0;
    text-wrap: balance;
    text-shadow: 0 0 16px oklch(74% 0.16 195 / 0.38);
  }
  .welcome-start-button {
    position: relative;
    z-index: 3;
    /* 2026-09-18: il bottone era 520x123 con testo a 48px, piu' largo delle quattro foto messe
       insieme. Rimpicciolito, e lo stacco dalle foto cresce invece di calare: sotto le foto ci
       vuole aria, altrimenti sembra attaccato all'ultima riga della griglia. */
    min-width: min(320px, 76vw);
    min-height: 62px;
    margin-block: clamp(96px, 12vh, 144px) clamp(34px, 4.8vh, 50px);
    padding: 0 26px;
    border: 2px solid oklch(68% 0.19 45);
    border-radius: 0;
    background: oklch(68% 0.19 45);
    color: oklch(16% 0.018 45);
    box-shadow: none;
    cursor: pointer;
    font-family: Sora, Avenir Next, Segoe UI, sans-serif;
    font-size: clamp(17px, 1.9vw, 24px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0;
    filter: brightness(1);
    isolation: isolate;
    transition: none;

  }
  .welcome-start-button:hover {
    animation: none;
    filter: none;
    border-color: oklch(96% 0.012 95);
    background: oklch(96% 0.012 95);
    box-shadow: none;
  }
  .welcome-start-button:focus-visible {
    outline: 3px solid oklch(42% 0.16 255);
    outline-offset: 5px;
  }
  .welcome-start-button::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    box-shadow: 0 0 18px oklch(73% 0.19 45 / 0.22), 0 0 42px oklch(73% 0.19 45 / 0.1);
    opacity: 0.45;
    animation: none;
  }
  @keyframes welcome-start-button-pulse {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
  }
  .welcome-start-button[aria-busy="true"] { font-size: clamp(15px, 1.7vw, 21px); cursor: progress; }
  .welcome-start-button:hover::before,
  .welcome-start-button[aria-busy="true"]::before { animation: none; opacity: 0; }
  @media (prefers-reduced-motion: reduce) {
    .welcome-start-button::before { animation: none; opacity: 0; }
  }
  /* L'avviso che prende il posto del bottone quando JavaScript e' spento (2026-09-19). */
  .welcome-noscript {
    position: relative;
    z-index: 3;
    max-width: 34em;
    margin: clamp(52px, 7.5vh, 84px) auto clamp(20px, 3vh, 32px);
    color: oklch(96% 0.018 220);
    font-family: Sora, Avenir Next, Segoe UI, sans-serif;
    font-size: clamp(15px, 1.4vw, 19px);
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
  }
  .welcome-home-link {
    position: relative;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: clamp(36px, 5.4vh, 58px);
    color: oklch(96% 0.018 220);
    font-family: Sora, Avenir Next, Segoe UI, sans-serif;
    font-size: clamp(14px, 1.25vw, 17px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0;
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: oklch(96% 0.018 220 / 0.48);
    text-underline-offset: 5px;
    transition: none;
  }
  .welcome-home-link:hover {
    color: oklch(100% 0.006 220);
    text-decoration-color: currentColor;
  }
  .welcome-home-link:focus-visible {
    outline: 2px solid oklch(42% 0.16 255);
    outline-offset: 5px;
  }
  .welcome-departments {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    width: min(960px, calc(100vw - 48px));
    margin-top: clamp(30px, 4.8vh, 48px);
    pointer-events: auto;
  }
  .welcome-department-card {
    position: relative;
    display: grid;
    grid-template-rows: 1fr auto;
    justify-items: center;
    min-height: 198px;
    padding: 15px 15px 16px;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  .welcome-department-face {
    position: relative;
    z-index: 2;
    width: min(210px, 100%);
    height: 145px;
    align-self: end;
    background: oklch(0% 0 0);
    border: 0;
    cursor: default;
    opacity: 0;
    touch-action: none;
    filter: none;
  }
  .welcome-department-face.is-head-ready {
    opacity: 1;
  }
  .welcome-department-label {
    position: relative;
    z-index: 2;
    margin-top: 24px;
    color: oklch(96% 0.008 250);
    font-family: Sora, Avenir Next, Segoe UI, sans-serif;
    font-size: clamp(13px, 1.15vw, 15px);
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: 0;
    text-align: center;
  }
  .welcome-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0;
    color: oklch(43% 0.018 255);
    font-size: 12px;
    line-height: 1.25;
    letter-spacing: 0.02em;
  }
  .welcome-action.is-touch-prompt {
    gap: 0;
  }
  .welcome-action.is-touch-prompt .welcome-action-prefix {
    display: none;
  }
  .welcome-key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 82px;
    height: 31px;
    padding: 0 11px;
    border: 1px solid oklch(68% 0.06 255);
    background: transparent;
    color: oklch(28% 0.02 255);
    font-weight: 700;
  }
  @media (max-width: 760px) {
    .welcome-departments {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 18px;
      width: min(448px, 100%);
    }
    .welcome-department-card {
      min-height: 179px;
      padding: 12px 13px 14px;
    }
    .welcome-department-face {
      height: 112px;
      width: min(200px, 100%);
    }
  }
  @media (max-width: 560px) {
    #welcome-window-overlay {
      padding: 34px 18px 22px;
    }
    .welcome-body {
      gap: 0;
    }
    .welcome-start-button {
      box-sizing: border-box;
      min-width: 0;
      /* Stessa cura della versione da scrivania (2026-09-18): bottone piu' piccolo e piu'
         staccato dalle foto dei reparti, che qui gli stanno subito sopra. */
      width: min(300px, 100%);
      min-height: 56px;
      margin-block: 64px 44px;
      padding-inline: 20px;
      font-size: clamp(17px, 5vw, 22px);
    }
    .welcome-departments {
      gap: 14px;
    }
    .welcome-department-card {
      min-height: 154px;
      padding: 10px 10px 12px;
    }
    .welcome-department-face {
      height: 96px;
      width: min(174px, 100%);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .welcome-window {
      transition: none;
      will-change: auto;
    }
    .welcome-start-button {
      animation: none;
      transition: none;
      will-change: auto;
    }
  }
  #hud-tl { top:14px; left:14px; }
  #mobile-performance-diagnostics {
    margin-top: 6px;
    max-width: min(320px, calc(100vw - 28px));
    white-space: pre-line;
    font-variant-numeric: tabular-nums;
    line-height: 1.35;
    color: rgba(205, 246, 255, 0.82);
    text-shadow: 0 0 8px rgba(98, 247, 255, 0.28);
  }
  #mobile-movement-pad {
    position: fixed;
    left: max(18px, env(safe-area-inset-left));
    bottom: max(18px, env(safe-area-inset-bottom));
    z-index: 55;
    width: 116px;
    height: 116px;
    border-radius: 50%;
    border: 1px solid rgba(98, 247, 255, 0.34);
    background:
      radial-gradient(circle at 50% 50%, rgba(98, 247, 255, 0.10), rgba(3, 18, 22, 0.28) 58%, rgba(0, 0, 0, 0.38) 100%);
    box-shadow:
      0 0 18px rgba(98, 247, 255, 0.18),
      inset 0 0 18px rgba(98, 247, 255, 0.08);
    pointer-events: auto;
    touch-action: none;
    user-select: none;
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, 8px, 0);
    transition: opacity 160ms ease, visibility 160ms ease, transform 160ms ease;
    contain: layout paint style;
  }
  #mobile-movement-pad::before,
  #mobile-movement-pad::after {
    content: "";
    position: absolute;
    inset: 18px;
    border-radius: 50%;
    border: 1px solid rgba(98, 247, 255, 0.18);
  }
  #mobile-movement-pad::after {
    inset: 50%;
    width: 1px;
    height: 1px;
    transform: translate(-50%, -50%);
    border: 0;
    box-shadow:
      -38px 0 0 rgba(98, 247, 255, 0.22),
      38px 0 0 rgba(98, 247, 255, 0.22),
      0 -38px 0 rgba(98, 247, 255, 0.22),
      0 38px 0 rgba(98, 247, 255, 0.22);
  }
  #mobile-movement-knob {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(232, 254, 255, 0.62);
    background: rgba(98, 247, 255, 0.18);
    box-shadow:
      0 0 14px rgba(98, 247, 255, 0.48),
      inset 0 0 10px rgba(232, 254, 255, 0.16);
    transform: translate3d(-50%, -50%, 0);
    pointer-events: none;
    will-change: transform;
  }
  /* The touch joystick only appears once the reveal is complete (parity with
     the desktop input overlay), not during the wireframe sweep. rf-reveal-done
     is set on <body> at cityRevealComplete by the input-overlay script. */
  body.mobile-landscape.rf-reveal-done #mobile-movement-pad {
    opacity: 1;
    visibility: visible;
    transform: translate3d(0, 0, 0);
  }
  @media (hover: hover) and (pointer: fine) {
    #mobile-movement-pad {
      display: none;
    }
  }
  @media (min-width: 861px) and (hover: hover) and (pointer: fine) {
    #mobile-performance-diagnostics {
      display: none;
    }
  }
  #hud-controls {
    top:14px;
    right:14px;
    width: 380px;
    max-height: calc(100vh - 28px);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    pointer-events: auto;
    transition: opacity 180ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1), visibility 220ms ease;
    will-change: opacity, transform;
  }
  body.controls-hidden #hud-controls {
    opacity: 0;
    transform: translateX(calc(100% + 28px));
    visibility: hidden;
    pointer-events: none;
  }
  #settings-toggle {
    position: fixed;
    top: 14px;
    right: 408px;
    z-index: 40;
    min-width: 104px;
    border: 1px solid rgba(98,247,255,0.48);
    border-radius: 6px;
    background: rgba(3,18,22,0.76);
    color: #e8feff;
    padding: 9px 11px;
    font: inherit;
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 0 18px rgba(98,247,255,0.12), inset 0 0 0 1px rgba(232,254,255,0.04);
    text-shadow: 0 0 6px rgba(98,247,255,0.35);
    contain: layout paint;
    transition: right 220ms cubic-bezier(0.22, 1, 0.36, 1), border-color 160ms ease, background 160ms ease;
  }
  #settings-toggle:hover {
    border-color: rgba(98,247,255,0.82);
    background: rgba(98,247,255,0.14);
  }
  body.controls-hidden #settings-toggle {
    right: 14px;
  }
  @media (max-width: 860px) {
    #settings-toggle {
      right: 14px;
      top: 14px;
    }
    #hud-controls {
      top: 62px;
      right: 14px;
      width: min(380px, calc(100vw - 28px));
      max-height: calc(100vh - 76px);
    }
  }
  .tag { color:#62f7ff; font-weight:700; }
  .dim { color:#7fa7ad; }
  .rule { height:1px; background:linear-gradient(90deg,#62f7ff44,transparent); margin:6px 0; }
  .control-row {
    display: grid;
    gap: 5px;
    margin: 9px 0 0;
    position: relative;
  }
  .control-row::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 1px;
    width: 6px;
    height: 12px;
    border: 1px solid rgba(232,254,255,0.56);
    border-radius: 2px;
    background: rgba(98,247,255,0.20);
    box-shadow: 0 0 8px rgba(98,247,255,0.25);
    transform: translateX(-50%);
    pointer-events: none;
  }
  .control-row.select-row::after { display: none; }
  .control-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
  }
  .control-head output,
  .control-head .control-value {
    color: #e8feff;
    font-variant-numeric: tabular-nums;
  }
  input[type="range"] {
    width: 100%;
    accent-color: #62f7ff;
  }
  select.control-select {
    width: 100%;
    border: 1px solid rgba(98,247,255,0.35);
    background: rgba(3,18,22,0.82);
    color: #e8feff;
    border-radius: 6px;
    padding: 7px 8px;
    font: inherit;
    outline: none;
  }
  select.control-select:focus {
    border-color: rgba(98,247,255,0.78);
    box-shadow: 0 0 0 2px rgba(98,247,255,0.12);
  }
  .control-section {
    margin-top: 13px;
    color: #62f7ff;
    font-weight: 700;
    text-transform: uppercase;
  }
  .control-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0 10px;
  }
  .control-tab {
    border: 1px solid rgba(98,247,255,0.32);
    background: rgba(3,18,22,0.72);
    color: #9adce5;
    border-radius: 6px;
    padding: 5px 8px;
    font: inherit;
    cursor: pointer;
  }
  .control-tab.active {
    color: #e8feff;
    border-color: rgba(98,247,255,0.72);
    background: rgba(98,247,255,0.16);
  }
  .control-panels {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow: auto;
    padding-right: 4px;
  }
  .control-panel { display: none; }
  .control-panel.active { display: block; }
  #hud-controls .control-tab:not([data-tab="movement"]):not([data-tab="character"]):not([data-tab="surface-reflections"]):not([data-tab="bloom-fx"]):not([data-tab="led-glow-fx"]):not([data-tab="central-building-leds"]):not([data-tab="wireframe-fx"]):not([data-tab="audio-fx"]):not([data-tab="atmosphere-fx"]):not([data-tab="performance-fx"]),
  #hud-controls .control-panel:not([data-panel="movement"]):not([data-panel="character"]):not([data-panel="surface-reflections"]):not([data-panel="bloom-fx"]):not([data-panel="led-glow-fx"]):not([data-panel="central-building-leds"]):not([data-panel="wireframe-fx"]):not([data-panel="audio-fx"]):not([data-panel="atmosphere-fx"]):not([data-panel="performance-fx"]) {
    display: none !important;
  }
  .control-box {
    margin-top: 12px;
    padding: 10px;
    border: 1px solid rgba(98,247,255,0.24);
    border-radius: 6px;
    background: rgba(3,18,22,0.38);
    box-shadow: inset 0 0 0 1px rgba(232,254,255,0.025);
  }
  .control-box .control-section:first-child {
    margin-top: 0;
  }
  .pose-grid {
    display: grid;
    gap: 8px;
    margin-top: 9px;
  }
  .pose-readout {
    border: 1px solid rgba(98,247,255,0.24);
    border-radius: 6px;
    background: rgba(3,18,22,0.44);
    padding: 8px 9px;
  }
  .pose-readout span {
    display: block;
    color: #62f7ff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .pose-readout output {
    display: block;
    margin-top: 4px;
    color: #e8feff;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
  }
  .control-actions-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .control-actions-row .control-action {
    margin-top: 10px;
  }
  .control-action {
    width: 100%;
    margin-top: 10px;
    border: 1px solid rgba(98,247,255,0.45);
    background: rgba(98,247,255,0.10);
    color: #e8feff;
    border-radius: 6px;
    padding: 8px 10px;
    font: inherit;
    cursor: pointer;
  }
  .control-action:hover { background: rgba(98,247,255,0.18); }
  .control-action.saved {
    border-color: rgba(180,255,238,0.72);
    background: rgba(180,255,238,0.15);
  }
  .retro-benchmark-panel {
    position: fixed;
    right: max(14px, env(safe-area-inset-right));
    bottom: max(14px, env(safe-area-inset-bottom));
    z-index: 130;
    width: min(360px, calc(100vw - 28px));
    box-sizing: border-box;
    padding: 12px;
    border: 1px solid rgba(98,247,255,0.38);
    border-radius: 8px;
    background: rgba(1,10,14,0.94);
    color: #e8feff;
    box-shadow: 0 18px 46px rgba(0,0,0,0.58), 0 0 22px rgba(98,247,255,0.12);
    font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
    font-size: 11px;
    line-height: 1.35;
    pointer-events: auto;
  }
  .retro-benchmark-panel[hidden] {
    display: none !important;
  }
  .retro-benchmark-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #e8feff;
    text-transform: uppercase;
  }
  .retro-benchmark-head strong {
    font-size: 12px;
    letter-spacing: 0.08em;
  }
  .retro-benchmark-head span {
    color: rgba(154,220,229,0.92);
    font-variant-numeric: tabular-nums;
    text-align: right;
  }
  .retro-benchmark-progress {
    height: 4px;
    margin: 10px 0 12px;
    border-radius: 999px;
    background: rgba(98,247,255,0.12);
    overflow: hidden;
  }
  .retro-benchmark-progress span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: rgba(98,247,255,0.88);
    box-shadow: 0 0 12px rgba(98,247,255,0.45);
  }
  .retro-benchmark-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
  }
  .retro-benchmark-grid div {
    min-width: 0;
    padding: 7px 8px;
    border: 1px solid rgba(98,247,255,0.18);
    border-radius: 6px;
    background: rgba(3,18,22,0.62);
  }
  .retro-benchmark-grid dt {
    margin: 0 0 3px;
    color: rgba(154,220,229,0.82);
    font-size: 9px;
    text-transform: uppercase;
  }
  .retro-benchmark-grid dd {
    margin: 0;
    color: #e8feff;
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
  }
  .retro-benchmark-actions {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 7px;
    margin-top: 10px;
  }
  .retro-benchmark-actions button {
    min-height: 30px;
    border: 1px solid rgba(98,247,255,0.42);
    border-radius: 6px;
    background: rgba(98,247,255,0.10);
    color: #e8feff;
    font: inherit;
    cursor: pointer;
  }
  .retro-benchmark-actions button:hover:not(:disabled),
  .retro-benchmark-actions button:focus-visible {
    background: rgba(98,247,255,0.18);
    outline: none;
  }
  .retro-benchmark-actions button:disabled {
    cursor: not-allowed;
    opacity: 0.42;
  }
  body.mobile-landscape .retro-benchmark-panel {
    right: max(8px, env(safe-area-inset-right));
    bottom: max(8px, env(safe-area-inset-bottom));
    width: min(286px, calc(100vw - 16px));
    max-height: calc(100vh - 16px);
    overflow: auto;
    padding: 8px;
    border-radius: 7px;
    font-size: 9px;
    line-height: 1.25;
  }
  body.mobile-landscape .retro-benchmark-head {
    gap: 8px;
  }
  body.mobile-landscape .retro-benchmark-head strong {
    font-size: 10px;
  }
  body.mobile-landscape .retro-benchmark-progress {
    height: 3px;
    margin: 7px 0 8px;
  }
  body.mobile-landscape .retro-benchmark-grid {
    gap: 5px;
  }
  body.mobile-landscape .retro-benchmark-grid div {
    padding: 5px 6px;
  }
  body.mobile-landscape .retro-benchmark-grid dt {
    font-size: 8px;
  }
  body.mobile-landscape .retro-benchmark-grid dd {
    font-size: 11px;
  }
  body.mobile-landscape .retro-benchmark-actions {
    grid-template-columns: 1fr 1fr auto;
    gap: 5px;
    margin-top: 7px;
  }
  body.mobile-landscape .retro-benchmark-actions button {
    min-height: 24px;
    padding: 0 6px;
  }
  #loader {
    position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
    z-index:9999; background:#000; color:transparent; font-size:0;
  }
  #loader.hidden { display:none; }
  #boundary-error-overlay {
    position: fixed;
    left: 50%;
    top: 46%;
    z-index: 8;
    pointer-events: none;
    color: #e8feff;
    line-height: 1;
    opacity: 0;
    mix-blend-mode: screen;
    transform: translate(-50%, -50%);
    will-change: opacity, transform, filter;
  }
  .boundary-error-window {
    position: relative;
    min-width: 12.5ch;
    padding: 1.25em 1.55em 1.15em;
    border: 1px solid rgba(197,252,255,0.88);
    background:
      linear-gradient(180deg, rgba(105,242,255,0.13) 0 0.42em, rgba(4,16,20,0.78) 0.42em 100%),
      repeating-linear-gradient(180deg, rgba(177,250,255,0.10) 0 1px, transparent 1px 6px);
    box-shadow:
      0 0 0 1px rgba(98,247,255,0.18) inset,
      0 0 18px rgba(98,247,255,0.58),
      0 12px 44px rgba(0,0,0,0.62);
    transform: perspective(360px) rotateX(3deg) translateZ(0);
  }
  .boundary-error-window::after {
    content: "";
    position: absolute;
    inset: 0.7em 0.65em 0.55em;
    border: 1px solid rgba(98,247,255,0.24);
    transform: translate(0.18em, 0.16em);
    opacity: 0.52;
  }
  .boundary-error-x {
    position: absolute;
    top: 0.22em;
    right: 0.42em;
    color: rgba(232,254,255,0.94);
    font-weight: 900;
    font-size: 0.52em;
    letter-spacing: 0;
    text-shadow: 0 0 8px rgba(98,247,255,0.82);
  }
  .boundary-error-text {
    position: relative;
    z-index: 1;
    display: block;
    color: #e8feff;
    font-weight: 900;
    letter-spacing: 0.10em;
    text-shadow:
      0 0 3px rgba(232,254,255,0.92),
      0 0 12px rgba(98,247,255,0.82),
      0 0 32px rgba(98,247,255,0.45);
    transform: translate(-0.06em, -0.03em);
  }
  .boundary-error-text::before,
  .boundary-error-text::after {
    content: "//error";
    position: absolute;
    inset: 0;
    opacity: var(--error-glitch-opacity, 0);
    pointer-events: none;
  }
  .boundary-error-text::before {
    color: rgba(98,247,255,0.76);
    transform: translate(var(--error-glitch-x, 0), -0.015em);
  }
  .boundary-error-text::after {
    color: rgba(232,254,255,0.62);
    transform: translate(calc(var(--error-glitch-x, 0) * -0.62), 0.018em);
  }
  .err { color:#ff7777; }

  /* ---- input overlay (WASD + mouse), ported 1:1 from /tecnologie/gaussian-splatting ---- */
  .splat-input-overlay {
    --splat-control-ink: oklch(97% .006 260);
    --splat-control-border: oklch(97% .006 260 / .78);
    --splat-control-glass: oklch(97% .006 260 / .11);
    --splat-control-glass-hover: oklch(97% .006 260 / .16);
    --splat-control-glass-active: oklch(82% .18 67 / .24);
    --splat-control-hot: oklch(82% .18 67);
    --splat-control-unit: clamp(3.705rem, 5.85vw, 5.33rem);
    --splat-key-gap: clamp(.221rem, .403vw, .338rem);
    --splat-stroke: 1.5px;
    z-index: 40;
    color: var(--splat-control-ink);
    opacity: 0;
    /* visibility, non solo opacity: con la sola opacity i cinque bottoni W A S D
       e mouse restano nel tab order anche mentre l'overlay e' invisibile, e siccome
       stanno prima della cover nel DOM diventano i primi cinque stop di Tab della
       pagina. Un utente da tastiera doveva premere Tab sei volte per arrivare a
       "Esplora i reparti". is-active viene aggiunta a reveal completato, cioe'
       quando i tasti servono davvero. */
    visibility: hidden;
    pointer-events: none;
    font-family: Sora, Avenir Next, Segoe UI, sans-serif;
    transition: opacity .18s cubic-bezier(.16, 1, .3, 1), visibility .18s cubic-bezier(.16, 1, .3, 1);
    position: fixed;
    inset: 0;
  }
  .splat-input-overlay.is-active { opacity: 1; visibility: visible; }
  .splat-input-overlay, .splat-input-overlay * { box-sizing: border-box; }
  .splat-control-row {
    --splat-key-size: calc((var(--splat-control-unit) - (2 * var(--splat-key-gap))) / 3);
    left: max(1.1rem, env(safe-area-inset-left));
    bottom: max(1rem, env(safe-area-inset-bottom));
    pointer-events: none;
    justify-content: flex-start;
    align-items: center;
    gap: clamp(.75rem, 2.1vw, 2rem);
    display: flex;
    position: absolute;
  }
  .splat-control-unit { min-width: var(--splat-control-unit); justify-items: center; gap: .78rem; display: grid; }
  .splat-glyph-box {
    width: var(--splat-control-unit);
    height: var(--splat-control-unit);
    color: var(--splat-control-ink);
    place-items: center;
    display: grid;
  }
  .splat-wasd-pad {
    grid-template-columns: repeat(3, var(--splat-key-size));
    grid-template-rows: repeat(2, var(--splat-key-size));
    gap: var(--splat-key-gap);
    place-content: center;
  }
  .splat-key-button, .splat-mouse-button {
    appearance: none;
    color: inherit;
    cursor: pointer;
    font: inherit;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
    background: 0 0;
    border: 0;
  }
  .splat-key-button {
    width: var(--splat-key-size);
    height: var(--splat-key-size);
    border: var(--splat-stroke) solid var(--splat-control-border);
    background: var(--splat-control-glass);
    min-width: 0;
    min-height: 0;
    color: var(--splat-control-ink);
    font-family: Sora, Avenir Next, Segoe UI, sans-serif;
    font-size: calc(var(--splat-control-unit) * .198);
    font-weight: 800;
    line-height: 1;
    padding: 0;
    -webkit-backdrop-filter: blur(12px) saturate(1.2);
    backdrop-filter: blur(12px) saturate(1.2);
    border-radius: .18rem;
    place-items: center;
    transition: background .16s cubic-bezier(.16, 1, .3, 1), border-color .16s cubic-bezier(.16, 1, .3, 1), color .16s cubic-bezier(.16, 1, .3, 1), transform .16s cubic-bezier(.16, 1, .3, 1);
    display: grid;
  }
  .splat-key-button[data-splat-control="w"] { grid-area: 1 / 2; }
  .splat-key-button[data-splat-control="a"] { grid-area: 2 / 1; }
  .splat-key-button[data-splat-control="s"] { grid-area: 2 / 2; }
  .splat-key-button[data-splat-control="d"] { grid-area: 2 / 3; }
  .splat-key-button:hover { background: var(--splat-control-glass-hover); }
  .splat-key-button.is-live, .splat-key-button:active {
    border-color: var(--splat-control-hot);
    background: var(--splat-control-glass-active);
    color: var(--splat-control-hot);
    transform: translateY(3px);
  }
  .splat-key-button:focus-visible { outline: 3px solid var(--splat-control-hot); outline-offset: 5px; }
  .splat-mouse-button { width: var(--splat-control-unit); height: var(--splat-control-unit); padding: 0; }
  /* Il bottone mouse e' un quadrato che contiene una sagoma di mouse molto piu'
     piccola: un outline sul bottone starebbe lontanissimo dalla grafica. Prima
     veniva annullato con `outline: 0` senza nessun sostituto, quindi da tastiera
     non si vedeva dove si era. Il ring segue la sagoma. */
  .splat-mouse-button:focus-visible { outline: 0; }
  .splat-mouse-button:focus-visible .splat-mouse-outline { outline: 3px solid var(--splat-control-hot); outline-offset: 5px; }
  .splat-mouse-outline {
    border: var(--splat-stroke) solid var(--splat-control-border);
    background: var(--splat-control-glass);
    border-radius: 48% 48% 42% 42% / 34% 34% 44% 44%;
    width: 44.7%;
    height: 70.8%;
    margin: auto;
    transition: background .16s cubic-bezier(.16, 1, .3, 1), border-color .16s cubic-bezier(.16, 1, .3, 1), transform .16s cubic-bezier(.16, 1, .3, 1);
    display: block;
    position: relative;
  }
  .splat-mouse-outline::before {
    content: "";
    width: var(--splat-stroke);
    background: var(--splat-control-border);
    opacity: .9;
    border-radius: 999px;
    height: 22%;
    position: absolute;
    inset-block-start: 10%;
    inset-inline-start: 50%;
    transform: translate(-50%);
  }
  .splat-mouse-outline::after {
    content: "";
    inline-size: 64%;
    block-size: var(--splat-stroke);
    background: var(--splat-control-border);
    opacity: .34;
    position: absolute;
    inset-block-start: 35%;
    inset-inline-start: 18%;
  }
  .splat-mouse-button.is-live .splat-mouse-outline, .splat-mouse-button:active .splat-mouse-outline {
    border-color: var(--splat-control-hot);
    background: var(--splat-control-glass-active);
    transform: translateY(3px);
  }
  .splat-control-caption {
    border: 1px solid var(--splat-control-border);
    background: var(--splat-control-glass);
    min-height: 1.25rem;
    color: var(--splat-control-ink);
    text-align: center;
    text-transform: uppercase;
    -webkit-backdrop-filter: blur(12px) saturate(1.2);
    backdrop-filter: blur(12px) saturate(1.2);
    border-radius: .32rem;
    justify-content: center;
    align-items: center;
    padding: .22rem .38rem;
    font-size: clamp(.58rem, .7vw, .72rem);
    font-weight: 950;
    line-height: 1;
    display: inline-flex;
  }
  /* Look onboarding: until the scene is clicked, the mouse icon + its caption
     pulse orange ("Clicca") to prompt entering mouse-look. First click swaps
     the caption to "Guarda" and drops the .is-look-hint state. */
  @keyframes rf-look-hint-mouse {
    0%, 100% { border-color: var(--splat-control-border); background: var(--splat-control-glass); }
    50% { border-color: var(--splat-control-hot); background: var(--splat-control-glass-active); }
  }
  @keyframes rf-look-hint-caption {
    0%, 100% { border-color: var(--splat-control-border); color: var(--splat-control-ink); background: var(--splat-control-glass); }
    50% { border-color: var(--splat-control-hot); color: var(--splat-control-hot); background: var(--splat-control-glass-active); }
  }
  .splat-input-overlay.is-look-hint [data-symbol="mouse"] .splat-mouse-outline {
    animation: rf-look-hint-mouse 1.05s ease-in-out infinite;
  }
  .splat-input-overlay.is-look-hint [data-symbol="mouse"] .splat-control-caption {
    animation: rf-look-hint-caption 1.05s ease-in-out infinite;
  }
  /* Hide the pointer/keyboard indicator on every touch device (matches the
     demo's own mobile query in MOBILE_PERFORMANCE_QUERY): a landscape phone is
     wider than 640px but still has no mouse — it uses the touch joystick. */
  @media (max-width: 760px), (hover: none), (pointer: coarse) {
    .splat-input-overlay { display: none !important; }
  }
  @media (prefers-reduced-motion: reduce) {
    .splat-input-overlay, .splat-key-button, .splat-mouse-outline { transition-duration: .01ms !important; }
    /* No blink: keep a steady orange hint instead. */
    .splat-input-overlay.is-look-hint [data-symbol="mouse"] .splat-mouse-outline { animation: none; border-color: var(--splat-control-hot); background: var(--splat-control-glass-active); }
    .splat-input-overlay.is-look-hint [data-symbol="mouse"] .splat-control-caption { animation: none; border-color: var(--splat-control-hot); color: var(--splat-control-hot); background: var(--splat-control-glass-active); }
  }

  /* ---- rotate-to-landscape prompt (mobile portrait, blocks demo start) ---- */
  #rf-rotate-prompt {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: none;
    place-items: center;
    background: oklch(0% 0 0);
    color: rgba(98, 247, 255, 0.92);
    font-family: Sora, Avenir Next, Segoe UI, sans-serif;
    text-align: center;
    padding: 24px;
  }
  body.rf-awaiting-landscape #rf-rotate-prompt {
    display: grid;
  }
  .rf-rotate-card {
    display: grid;
    justify-items: center;
    gap: 14px;
    max-width: 22rem;
  }
  .rf-rotate-icon {
    color: rgba(98, 247, 255, 0.92);
    filter: drop-shadow(0 0 16px rgba(98, 247, 255, 0.45));
    transform-origin: 50% 50%;
    animation: rf-rotate-hint 2.2s ease-in-out infinite;
  }
  @keyframes rf-rotate-hint {
    0%, 18% { transform: rotate(0deg); }
    48%, 72% { transform: rotate(-90deg); }
    100% { transform: rotate(0deg); }
  }
  .rf-rotate-text {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }
  .rf-rotate-sub {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 400;
    color: rgba(232, 254, 255, 0.62);
  }
  @media (prefers-reduced-motion: reduce) {
    .rf-rotate-icon { animation: none; transform: rotate(-45deg); }
  }

.welcome-model-credit { display: block; margin-top: 8px; color: #9aa5ad; font-size: 10px; line-height: 1.5; }
.welcome-model-credit a { color: inherit; text-decoration: underline; }