:root {
      --gold: #d8b982;
      --gold-bright: #f4ddb0;
      --cyan: #67e8f9;
      --text: #dbe4ea;
      --bg: #02040a;
      color-scheme: dark;
    }

    * { box-sizing: border-box; }

    html,
    body {
      width: 100%;
      height: 100%;
      margin: 0;
      overflow: hidden;
      background: var(--bg);
      font-family: Cambria, Georgia, serif;
    }

    button,
    input { font: inherit; }

    body.cursor-idle,
    body.cursor-idle * {
      cursor: none !important;
    }

    .scene {
      position: relative;
      width: 100%;
      height: 100%;
      overflow: hidden;
      isolation: isolate;
      background: var(--bg);
    }

    .camera {
      position: absolute;
      left: 50%;
      top: 50%;
      z-index: 1;
      width: max(275vw, 488.889vh);
      height: max(275vh, 154.6875vw);
      transform: translate(-50%, -50%) scale(.364364);
      transform-origin: 50% 50%;
      transition: transform 2s cubic-bezier(.18, .68, .16, 1);
    }

    .camera-bg {
      position: absolute;
      inset: 0;
      background: url("../eingang/medien/22df28763fe9f4b7.webp") center / 100% 100% no-repeat;
      filter: brightness(1) saturate(1);
      transition: filter 1.8s ease;
    }

    .scene::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 2;
      pointer-events: none;
      background:
        radial-gradient(circle at center, transparent 0 34%, rgba(0, 0, 0, .08) 58%, rgba(0, 0, 0, .28) 100%),
        linear-gradient(180deg, rgba(0, 0, 0, .05), transparent 24%, rgba(0, 0, 0, .18) 100%);
    }

    .scene.gate-approach .camera {
      transform: translate(-50%, -50%) scale(1);
      will-change: transform;
    }

    .scene.gate-approach .camera-bg {
      filter: brightness(1.12) saturate(1.10);
      will-change: filter;
    }

    .scene.gate-arrived .camera,
    .scene.gate-arrived .camera-bg { will-change: auto; }

    .scene.gate-returning .camera {
      transition-duration: 1.2s;
      transition-timing-function: cubic-bezier(.30, .02, .22, 1);
      will-change: transform;
    }

    .scene.gate-returning .camera-bg {
      transition-duration: 1.1s;
      transition-timing-function: ease;
      will-change: filter;
    }

    .scene.gate-arrived::after {
      background:
        radial-gradient(circle at 50% 44%, rgba(103, 232, 249, .07), transparent 26%),
        radial-gradient(circle at center, transparent 0 38%, rgba(0, 0, 0, .09) 66%, rgba(0, 0, 0, .30) 100%);
    }

    .access-zone:focus-visible,
    .login-close:focus-visible,
    .login-btn:focus-visible {
      outline: 2px solid rgba(103, 232, 249, .88);
      outline-offset: 3px;
    }

    .access-zone {
      position: absolute;
      left: 50%;
      top: 46.25%;
      z-index: 14;
      width: 9.44%;
      height: auto;
      aspect-ratio: 1;
      display: grid;
      place-items: center;
      padding: 0;
      border: 0;
      background: transparent;
      transform: translate(-50%, -50%);
      isolation: isolate;
      cursor: pointer;
      transition: opacity 1.15s ease 1s;
    }

    .access-zone::before {
      content: "";
      position: absolute;
      inset: -10%;
      z-index: 1;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(216, 185, 130, .20), rgba(103, 232, 249, .06) 42%, transparent 68%);
      filter: blur(16px);
      opacity: .68;
      animation: halo-pulse 5.2s ease-in-out infinite;
      transition: opacity 1.45s ease;
    }

    .access-zone::after {
      content: "";
      position: absolute;
      inset: -2%;
      z-index: 2;
      border: 1px solid rgba(216, 185, 130, .18);
      border-radius: 50%;
      box-shadow: 0 0 18px rgba(216, 185, 130, .12), inset 0 0 18px rgba(255, 255, 255, .02);
      opacity: .55;
      animation: ring-breath 4.8s ease-in-out infinite;
      transition: opacity 1.45s ease, transform 1.45s ease;
    }

    .micro-ring {
      position: absolute;
      inset: 7%;
      z-index: 2;
      border: 1px dashed rgba(216, 185, 130, .12);
      border-radius: 50%;
      opacity: .38;
      animation: slow-rotate 18s linear infinite;
      transition: opacity 1.45s ease, transform 1.45s ease;
    }

    .layer {
      position: absolute;
      inset: 0;
      z-index: 3;
      display: grid;
      place-items: center;
      transition: opacity 1.65s ease, transform 1.65s ease, filter 1.65s ease;
    }

    .logo-layer {
      opacity: 1;
      filter: blur(0);
      animation: logo-float 4.8s ease-in-out infinite;
    }

    .logo-img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      filter:
        drop-shadow(0 0 10px rgba(216, 185, 130, .18))
        drop-shadow(0 0 20px rgba(216, 185, 130, .12))
        drop-shadow(0 0 8px rgba(103, 232, 249, .05));
      animation: logo-glow 3.8s ease-in-out infinite;
    }

    .token-layer {
      opacity: 0;
      filter: blur(8px);
    }

    .token-wrap {
      position: relative;
      width: 100%;
      height: 100%;
      display: grid;
      place-items: center;
      transform: translateY(0);
    }

    .token-glow {
      position: absolute;
      inset: 8%;
      z-index: 1;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(245, 223, 173, .28), rgba(216, 185, 130, .10) 42%, rgba(103, 232, 249, .08) 58%, transparent 74%);
      filter: blur(18px);
      opacity: .82;
    }

    .token-img {
      position: relative;
      z-index: 3;
      width: 84%;
      height: 84%;
      object-fit: contain;
      filter:
        drop-shadow(0 0 16px rgba(216, 185, 130, .28))
        drop-shadow(0 0 28px rgba(216, 185, 130, .16))
        drop-shadow(0 0 12px rgba(103, 232, 249, .10));
    }

    .click-pulse {
      position: absolute;
      inset: 10%;
      z-index: 0;
      border: 2px solid rgba(245, 223, 173, 0);
      border-radius: 50%;
      transform: scale(.7);
      opacity: 0;
      pointer-events: none;
    }

    .access-zone.token-revealed .logo-layer,
    .access-zone:hover .logo-layer,
    .access-zone:focus-visible .logo-layer {
      opacity: 0;
      transform: scale(.90);
      filter: blur(6px);
    }

    .access-zone.token-revealed .token-layer,
    .access-zone:hover .token-layer,
    .access-zone:focus-visible .token-layer {
      opacity: 1;
      filter: blur(0);
    }

    .access-zone.token-revealed .micro-ring,
    .access-zone:hover .micro-ring,
    .access-zone:focus-visible .micro-ring {
      opacity: .60;
      transform: scale(1.03);
    }

    .access-zone.token-revealed::after,
    .access-zone:hover::after,
    .access-zone:focus-visible::after {
      opacity: .78;
      transform: scale(1.04);
    }

    .access-zone.token-revealed:not(.token-clicked)::before,
    .access-zone.token-revealed::after,
    .access-zone.token-revealed .micro-ring {
      animation: none;
    }

    .access-zone.token-clicked .click-pulse { animation: click-pulse .8s ease-out forwards; }
    .access-zone.token-clicked::before { animation: halo-burst .8s ease-out; }

    .scene.gate-approach .access-zone {
      opacity: 1;
      pointer-events: none;
    }

    .scene.gate-returning .access-zone {
      opacity: 1;
      pointer-events: none;
      transition-duration: .35s;
      transition-delay: 0s;
    }

    .gate-thesis {
      position: absolute;
      left: 50%;
      top: 61.5%;
      z-index: 16;
      width: min(1500px, 94vw);
      margin: 0;
      text-align: center;
      pointer-events: none;
      transform: translate(-50%, 0) perspective(900px) rotateX(5deg);
      transform-origin: 50% 100%;
      transition: opacity .48s ease, transform .58s ease, filter .48s ease;
    }

    .gate-thesis::before {
      content: "";
      position: absolute;
      left: 50%;
      top: 48%;
      z-index: -1;
      width: min(1320px, 90vw);
      height: 150%;
      background: radial-gradient(ellipse at center, rgba(4, 10, 17, .40) 0%, rgba(4, 10, 17, .20) 46%, transparent 74%);
      filter: blur(12px);
      transform: translate(-50%, -50%);
    }

    .gate-thesis-title {
      display: block;
      color: #f1dcc0;
      font-size: clamp(48px, 5.1vw, 88px);
      line-height: 1.08;
      font-weight: 600;
      letter-spacing: .075em;
      text-transform: uppercase;
      text-shadow:
        0 8px 24px rgba(0, 0, 0, .96),
        0 2px 6px rgba(0, 0, 0, .90),
        0 0 22px rgba(216, 185, 130, .20),
        0 0 9px rgba(103, 232, 249, .08);
    }

    .gate-thesis-subtitle {
      display: block;
      margin-top: 12px;
      color: rgba(220, 229, 229, .90);
      font-size: clamp(26px, 2.24vw, 36px);
      line-height: 1.25;
      font-weight: 400;
      letter-spacing: .19em;
      text-transform: uppercase;
      text-shadow:
        0 6px 18px rgba(0, 0, 0, .96),
        0 0 14px rgba(103, 232, 249, .14),
        0 0 10px rgba(216, 185, 130, .12);
    }

    .gate-thesis::after {
      content: "";
      display: block;
      width: min(280px, 38vw);
      height: 1px;
      margin: 14px auto 0;
      background: linear-gradient(90deg, transparent, rgba(216, 185, 130, .58), rgba(103, 232, 249, .46), transparent);
      box-shadow: 0 0 12px rgba(103, 232, 249, .15);
    }

    .scene.gate-approach .gate-thesis,
    .scene.gate-returning .gate-thesis,
    .scene.login-visible .gate-thesis,
    .scene.token-revealed .gate-thesis {
      opacity: 0;
      transform: translate(-50%, 18px) perspective(900px) rotateX(5deg);
      filter: blur(5px);
    }

    .access-thesis {
      position: absolute;
      left: 50%;
      top: 61.5%;
      z-index: 16;
      width: min(1600px, 96vw);
      color: #f1dcc0;
      font-size: clamp(55px, 5.25vw, 90px);
      line-height: 1.08;
      font-weight: 600;
      letter-spacing: .075em;
      text-align: center;
      text-transform: uppercase;
      white-space: pre-line;
      text-shadow:
        0 8px 24px rgba(0, 0, 0, .96),
        0 2px 6px rgba(0, 0, 0, .90),
        0 0 22px rgba(216, 185, 130, .20),
        0 0 9px rgba(103, 232, 249, .08);
      opacity: 0;
      pointer-events: none;
      filter: blur(5px);
      transform: translate(-50%, 18px) perspective(900px) rotateX(5deg);
      transform-origin: 50% 100%;
      transition: opacity .62s ease, transform .72s ease, filter .62s ease;
    }

    .access-thesis::before {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      z-index: -1;
      width: min(1420px, 92vw);
      height: 190%;
      background: radial-gradient(ellipse at center, rgba(4, 10, 17, .40) 0%, rgba(4, 10, 17, .20) 46%, transparent 74%);
      filter: blur(12px);
      transform: translate(-50%, -50%);
    }

    .access-thesis::after {
      content: "";
      display: block;
      width: min(280px, 38vw);
      height: 1px;
      margin: 14px auto 0;
      background: linear-gradient(90deg, transparent, rgba(216, 185, 130, .58), rgba(103, 232, 249, .46), transparent);
      box-shadow: 0 0 12px rgba(103, 232, 249, .15);
    }

    .scene.token-revealed .access-thesis {
      opacity: 1;
      filter: blur(0);
      transform: translate(-50%, 0) perspective(900px) rotateX(5deg);
      transition-delay: 1.15s;
    }

    .scene.gate-approach .access-thesis,
    .scene.gate-returning .access-thesis,
    .scene.login-visible .access-thesis {
      opacity: 0;
      filter: blur(5px);
      transform: translate(-50%, 18px) perspective(900px) rotateX(5deg);
      transition-delay: 0s;
    }

    .login-drawer {
      position: absolute;
      left: 50%;
      /* Screenshot: gate foot y=800, viewport y=80..1028.
         Midpoint y=914 => 88% of scene height; center the whole panel. */
      top: 88%;
      bottom: auto;
      z-index: 20;
      width: min(340px, 88vw);
      opacity: 0;
      pointer-events: none;
      transform: translate(-50%, calc(-50% + 24px));
      transition: opacity .36s ease, transform .44s ease;
    }

    .login-drawer.active {
      opacity: 1;
      pointer-events: auto;
      transform: translate(-50%, -50%);
    }

    .login-panel{position:relative;display:grid;width:100%;min-height:0;padding:16px 22px 18px;align-items:center;overflow:hidden;border:1px solid #40576a;border-top-color:#6a8396;border-radius:9px;background:linear-gradient(145deg,rgba(12,20,29,.97),rgba(5,10,16,.97));box-shadow:0 14px 38px #0009,inset 0 1px 0 #a4c3da18;}

    .login-panel::before,
    .login-panel::after {
      content: none;
    }

    .login-heading{display:grid;justify-items:center;margin-bottom:12px;text-align:center;}

    .login-close {
      position: absolute;
      top: 7px;
      right: 34px;
      z-index: 8;
      width: 30px;
      height: 30px;
      display: grid;
      place-items: center;
      border: 0;
      border-radius: 0;
      color: rgba(245, 223, 173, .70);
      background: transparent;
      box-shadow: none;
      font-size: 21px;
      line-height: 1;
      cursor: pointer;
      transition: color .18s ease, transform .18s ease;
    }

    .login-close:hover {
      color: var(--gold-bright);
      transform: translateY(-1px);
    }

    .login-title{margin:0;color:#dbe7ef;font-size:17px;line-height:1.25;font-weight:500;letter-spacing:.045em;text-transform:uppercase;}

    .login-form{width:100%;display:flex;justify-content:center;align-items:center;gap:0;margin:0;}

    .field {
      display: grid;
      margin: 0;
      gap: 5px;
    }

    .field label {
      color: #efdfba;
      font-size: 11px;
      line-height: 1;
      letter-spacing: .12em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .field input {
      width: 100%;
      height: 48px;
      padding: 10px 14px;
      border: 1px solid rgba(216, 185, 130, .32);
      border-radius: 4px;
      outline: none;
      color: #fff3d8;
      background: rgba(7, 8, 10, .82);
      box-shadow: inset 0 0 14px rgba(0, 0, 0, .34);
      font-size: 15px;
      transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
    }

    .field input:focus {
      border-color: rgba(245, 223, 173, .78);
      background: rgba(9, 10, 12, .94);
      box-shadow: 0 0 0 3px rgba(216, 185, 130, .08), inset 0 0 10px rgba(0, 0, 0, .20);
    }

    .login-actions{width:100%;display:flex;justify-content:center;}

    .login-btn{height:40px;min-width:150px;padding:8px 24px;border:1px solid #668ba9;border-radius:5px;color:#e4eff7;background:#162b40;font-size:15px;font-weight:500;letter-spacing:.08em;cursor:pointer;transition:background .18s;}

    .login-btn:hover {
      transform: translateY(-1px);
      border-color: rgba(216, 185, 130, .58);
    }

    .login-btn.primary{border-color:#668ba9;background:linear-gradient(#28465f,#162b40);box-shadow:inset 0 1px 0 #b9dcf51c;}

    .login-btn:disabled,
    .field input:disabled {
      cursor: wait;
      opacity: .68;
    }

    .login-status{display:none;}

    /* Der vorhandene NOK-Kachelbereich liegt bereits hinter dem Vorhang. */
    .portal-stage {
      position: absolute;
      inset: 0;
      z-index: 60;
      overflow: hidden;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      clip-path: inset(0 50% 0 50%);
      background: #eaf5fb;
      will-change: clip-path, opacity;
    }

    .portal-stage.active,
    .portal-stage.opening {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      clip-path: inset(0 0 0 0);
      transition:
        clip-path 1.3s cubic-bezier(.22, .76, .18, 1) .12s,
        opacity .25s ease,
        visibility 0s linear 0s;
    }

    .portal-stage.open {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      clip-path: inset(0 0 0 0);
    }

    .portal-shell {
      position: absolute;
      inset: 0;
      z-index: 1;
      width: 100%;
      height: 100%;
      border: 0;
      background: #eaf5fb;
    }

    .portal-curtain {
      position: absolute;
      top: 0;
      bottom: 0;
      z-index: 4;
      width: 20px;
      pointer-events: none;
      opacity: 0;
      filter: blur(.2px);
    }

    .portal-curtain.left {
      left: 50%;
      transform: translateX(-50%);
      background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .90), rgba(103, 232, 249, .22));
      box-shadow:
        0 0 26px rgba(255, 255, 255, .70),
        0 0 54px rgba(103, 232, 249, .28);
    }

    .portal-curtain.right {
      right: 50%;
      transform: translateX(50%);
      background: linear-gradient(270deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .90), rgba(216, 185, 130, .18));
      box-shadow:
        0 0 26px rgba(255, 255, 255, .70),
        0 0 54px rgba(216, 185, 130, .18);
    }

    .portal-stage.opening .portal-curtain {
      opacity: 1;
      transition:
        left 1.3s cubic-bezier(.22, .76, .18, 1) .12s,
        right 1.3s cubic-bezier(.22, .76, .18, 1) .12s,
        opacity .35s ease 1.05s;
    }

    .portal-stage.opening .portal-curtain.left {
      left: 0;
      transform: translateX(-40%);
      opacity: 0;
    }

    .portal-stage.opening .portal-curtain.right {
      right: 0;
      transform: translateX(40%);
      opacity: 0;
    }

    .portal-stage.open .portal-curtain {
      opacity: 0;
    }

    @keyframes logo-float {
      0%, 100% { transform: translateY(0) scale(1); }
      50% { transform: translateY(-4px) scale(1.012); }
    }

    @keyframes logo-glow {
      0%, 100% {
        filter: drop-shadow(0 0 10px rgba(216, 185, 130, .18)) drop-shadow(0 0 20px rgba(216, 185, 130, .10)) drop-shadow(0 0 8px rgba(103, 232, 249, .04));
      }
      50% {
        filter: drop-shadow(0 0 16px rgba(216, 185, 130, .28)) drop-shadow(0 0 28px rgba(216, 185, 130, .14)) drop-shadow(0 0 10px rgba(103, 232, 249, .08));
      }
    }

    @keyframes halo-pulse {
      0%, 100% { transform: scale(.95); opacity: .46; }
      50% { transform: scale(1.08); opacity: .86; }
    }

    @keyframes ring-breath {
      0%, 100% { transform: scale(.98); opacity: .28; }
      50% { transform: scale(1.05); opacity: .62; }
    }

    @keyframes slow-rotate {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    @keyframes click-pulse {
      0% { opacity: .85; transform: scale(.72); border-color: rgba(245, 223, 173, .78); }
      100% { opacity: 0; transform: scale(1.22); border-color: rgba(103, 232, 249, 0); }
    }

    @keyframes halo-burst {
      0% { opacity: .72; transform: scale(1); }
      50% { opacity: 1; transform: scale(1.10); }
      100% { opacity: .68; transform: scale(1); }
    }

    @media (max-width: 900px) {
      .gate-thesis {
        top: 58.5%;
        width: min(96vw, 860px);
      }

      .gate-thesis-title {
        font-size: clamp(42px, 9.6vw, 68px);
        letter-spacing: .055em;
      }

      .gate-thesis-subtitle {
        margin-top: 9px;
        font-size: clamp(22px, 5.1vw, 30px);
        letter-spacing: .13em;
      }

      .access-thesis {
        top: 58.5%;
        width: 96vw;
        font-size: clamp(45px, 10.25vw, 75px);
        letter-spacing: .055em;
      }

      .scene.gate-approach .camera { transform: translate(-50%, -50%) scale(.91860); }

      .login-drawer {
        top: min(88%, calc(100% - 100px));
        bottom: auto;
        width: min(340px, 90vw);
      }

      .login-panel {
        padding: 18px 18px 20px;
      }

      .login-heading { margin-bottom: 13px; }

      .login-title {
        max-width: 82vw;
        font-size: clamp(20px, 6vw, 28px);
        letter-spacing: .045em;
      }

      .login-form {
        grid-template-columns: 1fr;
        gap: 12px;
      }

      .login-actions {
        width: 100%;
        justify-self: stretch;
      }

      .login-btn { width: 100%; }

      .login-status { text-align: center; }

      .login-close {
        top: 6px;
        right: 18px;
        width: 32px;
        height: 32px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
      }

      .camera,
      .camera-bg,
      .gate-thesis,
      .access-thesis,
      .login-drawer,
      .portal-curtain {
        transition-duration: .12s !important;
        transition-delay: 0s !important;
      }
    }
  
    #skipIntro{position:fixed;right:22px;top:20px;z-index:1000;border:1px solid #c8b183;background:#142534e8;color:#fff3df;padding:10px 16px;border-radius:5px;font-family:Cambria,Georgia,serif;font-size:16px;cursor:pointer}
    #skipIntro[hidden]{display:none}.field[hidden]{display:none}
    #skipIntro{min-height:44px;max-width:calc(100vw - 32px);top:max(16px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right));}
    #skipIntro:hover{background:#263b4d;border-color:#eed39e}
    #skipIntro:focus-visible{outline:2px solid #abdafa;outline-offset:3px}
    .scene.intro-skipped .camera,.scene.intro-skipped .camera-bg,.scene.intro-skipped .access-zone,.scene.intro-skipped .login-drawer{transition:none!important}

    body.intro-pending .gate-thesis,body.intro-pending .access-thesis{visibility:hidden;opacity:0;pointer-events:none}
    #loginClose{display:none}
    #introSetup{position:fixed;z-index:1200;left:50%;bottom:6vh;transform:translateX(-50%);width:min(690px,94vw);padding:20px 24px;background:linear-gradient(145deg,rgba(12,20,29,.97),rgba(5,10,16,.97));border:1px solid #40576a;border-top-color:#6a8396;border-radius:9px;box-shadow:0 14px 38px #0009,inset 0 1px 0 #a4c3da18;color:#d9e4ed;font-family:Cambria,Georgia,serif}
    #introSetup[hidden]{display:none}.intro-controls{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:18px;align-items:end}.intro-field{display:flex;flex-direction:column;gap:8px;font-size:15px}
    #introLanguage,#introStart,#introSound{height:42px;border:1px solid #4a647a;border-radius:5px;padding:8px 12px;font:inherit;color:#e4eff7;background:#101c28}
    #introLanguage option{background:#101c28;color:#e4eff7}
    #introStart{background:linear-gradient(#28465f,#162b40);border-color:#668ba9;cursor:pointer;font-weight:bold;box-shadow:inset 0 1px 0 #b9dcf51c}
    #introStart:hover{background:#304f68}
    #introSound{display:flex;align-items:center;justify-content:center;gap:9px;cursor:pointer;background:transparent;border-color:transparent;padding:5px}
    .intro-switch-track{display:block;position:relative;flex:none;width:45px;height:24px;border:1px solid #718da3;border-radius:20px;background:#34414a;transition:background .2s}
    .intro-switch-knob{position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#e4edf2;box-shadow:0 1px 4px #0007;transition:transform .2s}
    #introSound[aria-checked=true] .intro-switch-track{background:#2d668e;border-color:#81badf}
    #introSound[aria-checked=true] .intro-switch-knob{transform:translateX(21px)}
    #introSound:focus-visible{outline:2px solid #abdafa;outline-offset:3px}
    #introSetup small{display:block;margin-top:12px;font-size:12px;line-height:1.4;color:#aabcc9}
    @media(max-width:600px){.intro-controls{grid-template-columns:1fr 1fr;gap:12px}#introStart{grid-column:1 / -1}#introSetup{bottom:3vh;padding:16px}.intro-field{gap:5px}}

/* Keep focus inside the visible presentation instead of scrolling the gate artwork. */.scene:has(>.portal-stage.active){overflow:clip}