* {
      box-sizing: border-box;
    }

    :root {
      --app-viewport-height: 100vh;
      --focus-ring: #005fcc;
      --link-text: #124c3a;
      --link-hover: #0b2f21;
      --button-primary: #234f2f;
      --button-text: #fffdf7;
      --surface-text: #2b2118;
    }

    html,
    body {
      width: 100%;
      height: 100%;
    }

    body {
      margin: 0;
      overflow: hidden;
      background: #ffffff;
      color: var(--surface-text);
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    [hidden] {
      display: none !important;
    }

    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      clip-path: inset(50%);
      white-space: nowrap;
    }

    .sr-only:focus,
    .sr-only:focus-within {
      left: 16px;
      top: 72px;
      z-index: 20;
      width: min(520px, calc(100vw - 32px));
      height: auto;
      max-height: calc(100vh - 96px);
      margin: 0;
      overflow: auto;
      clip: auto;
      clip-path: none;
      padding: 18px 20px;
      border: 3px solid var(--focus-ring);
      border-radius: 8px;
      background: #ffffff;
      color: #1f1a14;
      white-space: normal;
      box-shadow: 0 16px 42px rgba(0, 0, 0, 0.22);
    }

    .sr-only h1,
    .sr-only h2,
    .sr-only p,
    .sr-only ul {
      margin-block: 0 10px;
    }

    .sr-only ul {
      padding-left: 22px;
    }

    .skip-link {
      position: fixed;
      left: 16px;
      top: 16px;
      z-index: 40;
      transform: translateY(-140%);
      border: 3px solid var(--focus-ring);
      border-radius: 8px;
      padding: 10px 14px;
      background: #ffffff;
      color: #0b2f21;
      font: 800 14px/1.2 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      text-decoration: underline;
      text-decoration-thickness: 2px;
      text-underline-offset: 4px;
      transition: transform 160ms ease;
    }

    .skip-link:focus-visible {
      transform: translateY(0);
      outline: 3px solid #ffffff;
      outline-offset: 2px;
    }

    /* The way back out of the house.
     *
     * Every reading page now opens on a picture of one of these rooms and that
     * picture is a door, so a visitor arrives here mid-read rather than from
     * the front page. The exit is the hotspot label's own material — cream
     * pill, warm shadow, lit top edge — held at the top-left corner where
     * nothing in any room is drawn, and it warms rather than darkens when you
     * reach for it, like everything else in this house. */
    .house-exit {
      position: fixed;
      left: max(14px, env(safe-area-inset-left));
      top: max(14px, env(safe-area-inset-top));
      z-index: 30;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 40px;
      padding: 0 15px 0 13px;
      border: 1px solid rgba(92, 61, 22, 0.22);
      border-radius: 999px;
      background: rgba(255, 250, 235, 0.9);
      box-shadow:
        0 10px 24px rgba(45, 25, 9, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.72);
      backdrop-filter: blur(6px) saturate(1.08);
      -webkit-backdrop-filter: blur(6px) saturate(1.08);
      color: rgba(52, 34, 16, 0.96);
      font: 800 12px/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      text-decoration: none;
      opacity: 0.78;
      transition: opacity 160ms ease, box-shadow 160ms ease, transform 160ms ease;
    }

    .house-exit__mark {
      flex: none;
      transition: transform 160ms ease;
    }

    .house-exit:hover,
    .house-exit:focus-visible {
      opacity: 1;
      box-shadow:
        0 12px 26px rgba(45, 25, 9, 0.18),
        0 0 28px rgba(255, 234, 172, 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.78);
    }

    .house-exit:hover .house-exit__mark,
    .house-exit:focus-visible .house-exit__mark {
      transform: translateX(-2px);
    }

    .house-exit:focus-visible {
      outline: 3px solid var(--focus-ring);
      outline-offset: 2px;
    }

    @media (prefers-reduced-motion: reduce) {
      .house-exit,
      .house-exit__mark {
        transition: none;
      }

      .house-exit:hover .house-exit__mark,
      .house-exit:focus-visible .house-exit__mark {
        transform: none;
      }
    }

    /* On a phone the label alone would take a third of the width of the room
       it is standing in front of. The mark carries it, and the words stay for
       anyone reading the page rather than looking at it. */
    @media (max-width: 34rem) {
      .house-exit {
        min-height: 36px;
        padding: 0;
        width: 36px;
        justify-content: center;
      }

      .house-exit span {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
      }
    }

    body.debug-mode {
      overflow-y: auto;
    }

    .stage {
      position: relative;
      width: 100vw;
      height: 100vh;
      background: #ffffff;
      overflow: hidden;
      touch-action: none;
      user-select: none;
    }

    .orientation-lock {
      position: fixed;
      inset: 0;
      z-index: 30;
      display: none;
      place-items: center;
      padding: 28px;
      background:
        radial-gradient(circle at 50% 24%, rgba(255, 247, 229, 0.94), transparent 44%),
        #fffaf0;
      color: rgba(54, 35, 17, 0.94);
      text-align: center;
    }

    .orientation-lock__content {
      width: min(320px, 100%);
      display: grid;
      justify-items: center;
      gap: 16px;
    }

    .orientation-lock__logo-frame {
      width: min(230px, 70vw);
      aspect-ratio: 1;
      display: grid;
      place-items: center;
      perspective: 900px;
    }

    .orientation-lock__logo {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: contain;
      transform-origin: 50% 50%;
      animation: rotatePromptLogo 2.8s ease-in-out infinite;
      filter: drop-shadow(0 18px 24px rgba(72, 42, 13, 0.18));
    }

    .orientation-lock__rotate-mark {
      width: 112px;
      height: 64px;
      display: grid;
      place-items: center;
      border: 4px solid rgba(73, 47, 22, 0.82);
      border-radius: 18px;
      box-shadow:
        0 12px 28px rgba(70, 42, 14, 0.13),
        inset 0 0 0 2px rgba(255, 255, 255, 0.54);
    }

    .orientation-lock__rotate-mark::before {
      content: "";
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: rgba(73, 47, 22, 0.76);
      box-shadow: 0 0 0 5px rgba(73, 47, 22, 0.08);
    }

    .orientation-lock__title {
      margin: 0;
      font: 700 26px/1.08 Georgia, "Times New Roman", serif;
      letter-spacing: 0;
    }

    .orientation-lock__text {
      margin: 0;
      font: 650 15px/1.42 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    body.debug-mode .stage {
      height: min(62vh, calc(100vh - 340px));
      min-height: 360px;
    }

    canvas {
      display: block;
      width: 100%;
      height: 100%;
      background: #ffffff;
      transition: opacity 520ms ease;
    }

    .door-hotspot {
      position: absolute;
      display: block;
      border: 0;
      padding: 0;
      background: transparent;
      cursor: pointer;
      touch-action: manipulation;
      isolation: isolate;
      z-index: 3;
    }

    .door-hotspot::before {
      content: "";
      position: absolute;
      inset: 18% 22%;
      border-radius: 999px;
      background:
        radial-gradient(circle, rgba(255, 238, 170, 0.7) 0%, rgba(255, 210, 84, 0.2) 44%, transparent 72%);
      box-shadow:
        0 0 22px rgba(255, 210, 84, 0.42),
        0 0 46px rgba(255, 190, 68, 0.22);
      opacity: 0.54;
      transform: scale(0.88);
      animation: doorGlow 2.8s ease-in-out infinite;
      pointer-events: none;
    }

    .door-hotspot::after {
      content: "";
      position: absolute;
      inset: 12% 18%;
      border: 1px solid rgba(255, 229, 151, 0.58);
      border-radius: 999px;
      opacity: 0.42;
      transform: scale(0.8);
      animation: doorPulse 2.8s ease-out infinite;
      pointer-events: none;
    }

    .door-hotspot:hover::before,
    .door-hotspot:focus-visible::before {
      opacity: 0.78;
      box-shadow:
        0 0 30px rgba(255, 219, 104, 0.52),
        0 0 66px rgba(255, 190, 68, 0.3);
    }

    .exterior-hotspot-layer {
      position: absolute;
      inset: 0;
      z-index: 3;
      pointer-events: none;
    }

    .exterior-hotspot {
      position: absolute;
      display: grid;
      place-items: center;
      border: 0;
      padding: 0;
      background: transparent;
      color: rgba(58, 38, 18, 0.96);
      cursor: pointer;
      pointer-events: auto;
      touch-action: manipulation;
      transform: translateZ(0);
    }

    .exterior-hotspot::before {
      content: "";
      position: absolute;
      inset: 10%;
      border-radius: 999px;
      background:
        radial-gradient(circle, rgba(255, 238, 170, 0.54) 0%, rgba(255, 210, 84, 0.18) 46%, transparent 74%);
      box-shadow:
        0 0 18px rgba(255, 210, 84, 0.28),
        0 0 42px rgba(255, 190, 68, 0.16);
      opacity: 0;
      transform: scale(0.82);
      transition: opacity 160ms ease, transform 160ms ease;
      pointer-events: none;
    }

    .exterior-hotspot:hover::before,
    .exterior-hotspot:focus-visible::before {
      opacity: 0.72;
      transform: scale(1);
    }

    .exterior-hotspot:focus-visible {
      outline: 3px solid var(--focus-ring);
      outline-offset: 3px;
      border-radius: 16px;
    }

    .exterior-hotspot__label {
      position: absolute;
      left: 50%;
      top: 100%;
      z-index: 1;
      transform: translate(-50%, 8px);
      max-width: 180px;
      border: 1px solid rgba(92, 61, 22, 0.22);
      border-radius: 999px;
      padding: 6px 10px;
      background: rgba(255, 250, 235, 0.9);
      box-shadow: 0 10px 24px rgba(45, 25, 9, 0.15);
      color: rgba(52, 34, 16, 0.96);
      font: 800 12px/1.1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      letter-spacing: 0;
      text-align: center;
      white-space: nowrap;
      opacity: 0;
      transition: opacity 140ms ease, transform 140ms ease;
      pointer-events: none;
    }

    .exterior-hotspot:hover .exterior-hotspot__label,
    .exterior-hotspot:focus-visible .exterior-hotspot__label {
      opacity: 1;
      transform: translate(-50%, 2px);
    }

    .sparkle {
      position: absolute;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #fff2ad;
      box-shadow:
        0 0 8px rgba(255, 232, 139, 0.95),
        0 0 16px rgba(255, 192, 78, 0.52);
      opacity: 0;
      pointer-events: none;
      animation: sparkleFloat 3.4s ease-in-out infinite;
    }

    .sparkle:nth-child(1) {
      left: 24%;
      top: 28%;
      animation-delay: 0s;
    }

    .sparkle:nth-child(2) {
      left: 70%;
      top: 31%;
      width: 5px;
      height: 5px;
      animation-delay: 0.7s;
    }

    .sparkle:nth-child(3) {
      left: 62%;
      top: 72%;
      width: 4px;
      height: 4px;
      animation-delay: 1.4s;
    }

    .sparkle:nth-child(4) {
      left: 33%;
      top: 68%;
      width: 4px;
      height: 4px;
      animation-delay: 2.1s;
    }

    .door-hotspot:focus-visible {
      outline: 3px solid var(--focus-ring);
      outline-offset: 4px;
      border-radius: 999px;
    }

    .transition-video {
      position: absolute;
      inset: 0;
      display: none;
      width: 100%;
      height: 100%;
      object-fit: contain;
      background: #ffffff;
      cursor: pointer;
      opacity: 0;
      transition: opacity 520ms ease;
    }

    .stage.is-playing canvas,
    .stage.is-playing .door-hotspot,
    .stage.is-playing .exterior-hotspot-layer {
      opacity: 0;
      pointer-events: none;
    }

    .stage.is-playing .transition-video {
      display: block;
      opacity: 1;
    }

    .inside-view {
      position: absolute;
      inset: 0;
      display: none;
      background:
        linear-gradient(to bottom, #000000, var(--inside-edge-top-color, #34231a)) top / 100% var(--inside-frame-top, 0px) no-repeat,
        linear-gradient(to top, #000000, var(--inside-edge-bottom-color, #24170f)) bottom / 100% var(--inside-frame-bottom, 0px) no-repeat,
        linear-gradient(to right, #000000, var(--inside-edge-left-color, #31231b)) left / var(--inside-frame-left, 0px) 100% no-repeat,
        linear-gradient(to left, #000000, var(--inside-edge-right-color, #2d211a)) right / var(--inside-frame-right, 0px) 100% no-repeat,
        #000000;
      opacity: 0;
      overflow: hidden;
      transition: opacity 1100ms ease;
    }

    .inside-parallax {
      position: absolute;
      inset: 0;
      z-index: 0;
      overflow: hidden;
      clip-path: inset(
        var(--inside-frame-top, 0px)
        var(--inside-frame-right, 0px)
        var(--inside-frame-bottom, 0px)
        var(--inside-frame-left, 0px)
      );
      pointer-events: none;
      transform: translateZ(0);
    }

    .inside-parallax__layer {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: center;
      user-select: none;
      -webkit-user-drag: none;
      transform: translate3d(0, 0, 0);
      transform-origin: center;
      will-change: transform;
    }

    .inside-parallax__layer--background {
      z-index: 0;
    }

    .inside-parallax__layer--middle {
      z-index: 2;
    }

    .inside-parallax__layer--foreground {
      z-index: 3;
    }

    .inside-firelight-layer {
      position: absolute;
      top: var(--inside-frame-top, 0px);
      right: var(--inside-frame-right, 0px);
      bottom: var(--inside-frame-bottom, 0px);
      left: var(--inside-frame-left, 0px);
      z-index: 1;
      pointer-events: none;
      opacity: 0;
      mix-blend-mode: screen;
      transform: translate3d(0, 0, 0);
      transform-origin: center;
      transition: opacity 1500ms ease;
      will-change: transform, opacity;
    }

    .inside-firelight {
      position: absolute;
      left: var(--firelight-x, 50%);
      top: var(--firelight-y, 50%);
      width: var(--firelight-width, 8%);
      height: var(--firelight-height, 12%);
      transform: translate3d(-50%, -50%, 0);
    }

    .inside-firelight::before,
    .inside-firelight::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 50%;
      pointer-events: none;
    }

    .inside-firelight::before {
      background:
        radial-gradient(ellipse at 50% 56%, rgba(255, 166, 46, 0.64) 0%, rgba(255, 122, 18, 0.26) 34%, transparent 72%);
      filter: blur(var(--firelight-blur, 12px));
      opacity: var(--firelight-intensity, 0.5);
      animation: firelightFlicker 3.8s steps(5, end) infinite;
    }

    .inside-firelight::after {
      width: 38%;
      height: 42%;
      left: 31%;
      top: 31%;
      background:
        radial-gradient(circle at 50% 50%, rgba(255, 238, 150, 0.76) 0%, rgba(255, 150, 30, 0.28) 38%, transparent 72%);
      filter: blur(5px);
      opacity: var(--firelight-core-intensity, 0.42);
      animation: flamePointFlicker 1.7s steps(4, end) infinite;
    }

    .stage.is-inside.inside-visible .inside-firelight-layer {
      opacity: 1;
    }

    .inside-view::before {
      content: "";
      position: absolute;
      inset: 0;
      background: #000000;
      opacity: 1;
      transition: opacity 1500ms ease;
      z-index: 2;
      pointer-events: none;
    }

    .dog-eye-layer {
      position: absolute;
      top: var(--inside-frame-top, 0px);
      right: var(--inside-frame-right, 0px);
      bottom: var(--inside-frame-bottom, 0px);
      left: var(--inside-frame-left, 0px);
      z-index: 4;
      pointer-events: none;
      opacity: 0;
      transform: translate3d(0, 0, 0);
      transform-origin: center;
      transition: opacity 700ms ease;
      will-change: transform, opacity;
    }

    .stage.is-inside.inside-visible .dog-eye-layer {
      opacity: 1;
    }

    .dog-eye {
      position: absolute;
      left: var(--eye-x, 50%);
      top: var(--eye-y, 50%);
      width: var(--eye-size, 14px);
      aspect-ratio: 1;
      border-radius: 50%;
      overflow: hidden;
      transform: translate3d(-50%, -50%, 0);
      will-change: transform;
    }

    .dog-eye::before {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: var(--pupil-size, 12px);
      aspect-ratio: 1;
      border-radius: 50%;
      background:
        radial-gradient(circle at 68% 28%, rgba(255, 255, 255, 0.95) 0 10%, transparent 12%),
        radial-gradient(circle at 50% 50%, #150d08 0 62%, #2b170d 100%);
      box-shadow:
        inset 0 0 2px rgba(255, 255, 255, 0.25),
        0 1px 2px rgba(0, 0, 0, 0.3);
      transform: translate3d(calc(-50% + var(--pupil-x, 0px)), calc(-50% + var(--pupil-y, 0px)), 0);
      will-change: transform;
    }

    .scene-sign-layer {
      position: absolute;
      inset: 0;
      z-index: 4;
      pointer-events: none;
      opacity: 0;
      transition: opacity 750ms ease 260ms;
    }

    .stage.is-inside.inside-visible .scene-sign-layer {
      opacity: 1;
    }

    .scene-sign {
      position: absolute;
      left: var(--sign-x, 50%);
      top: var(--sign-y, 50%);
      min-width: 142px;
      max-width: min(210px, 32vw);
      padding: var(--sign-padding, 12px 15px);
      border: 1px solid rgba(255, 255, 255, 0.48);
      border-radius: var(--sign-radius, 18px);
      color: rgba(58, 38, 18, 0.94);
      font: 700 15px/1.15 Georgia, "Times New Roman", serif;
      letter-spacing: 0;
      text-align: left;
      background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.58), rgba(255, 246, 218, 0.24)),
        rgba(255, 255, 255, 0.18);
      box-shadow:
        0 16px 36px rgba(48, 25, 8, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.52),
        inset 0 -1px 0 rgba(88, 50, 16, 0.12);
      backdrop-filter: blur(6px) saturate(1.08);
      -webkit-backdrop-filter: blur(6px) saturate(1.08);
      transform:
        translate3d(-50%, -50%, 0)
        perspective(var(--sign-perspective, 900px))
        translateZ(var(--sign-depth, 60px))
        rotateX(var(--sign-rotate-x, 0deg))
        rotateY(var(--sign-rotate-y, 0deg))
        rotate(var(--sign-rotate, 0deg))
        skew(var(--sign-skew-x, 0deg), var(--sign-skew-y, 0deg))
        scale(var(--sign-scale, 1))
        scaleX(var(--sign-scale-x, 1))
        scaleY(var(--sign-scale-y, 1));
      transform-origin: var(--sign-origin, 50% 50%);
      pointer-events: auto;
      cursor: pointer;
      appearance: none;
    }

    .scene-sign--table,
    .scene-sign--notebook {
      text-align: center;
      background:
        linear-gradient(155deg, rgba(255, 255, 255, 0.52), rgba(255, 242, 205, 0.2)),
        rgba(239, 205, 144, 0.18);
    }

    .scene-sign--door {
      text-align: center;
      color: rgba(46, 29, 14, 0.96);
      background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.5), rgba(219, 181, 115, 0.2)),
        rgba(255, 245, 219, 0.18);
    }

    .scene-sign::before {
      content: "";
      position: absolute;
      inset: 5px;
      border-radius: 13px;
      border: 1px solid rgba(255, 255, 255, 0.28);
      pointer-events: none;
    }

    .scene-sign:hover,
    .scene-sign:focus-visible {
      background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.68), rgba(255, 248, 225, 0.3)),
        rgba(255, 255, 255, 0.22);
      box-shadow:
        0 18px 42px rgba(48, 25, 8, 0.23),
        0 0 28px rgba(255, 234, 172, 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
    }

    .scene-sign:focus-visible {
      outline: 3px solid var(--focus-ring);
      outline-offset: 3px;
    }

    .scene-sign:hover .scene-sign__title,
    .scene-sign:focus-visible .scene-sign__title {
      text-decoration: underline;
      text-decoration-thickness: 2px;
      text-underline-offset: 4px;
    }

    .scene-sign.is-debug-selected {
      outline: 3px solid rgba(46, 100, 142, 0.78);
      outline-offset: 5px;
      box-shadow:
        0 0 0 8px rgba(255, 255, 255, 0.48),
        0 18px 42px rgba(31, 68, 101, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
    }

    .scene-sign__title {
      display: block;
      white-space: normal;
    }

    .debug-panel {
      display: none;
      min-height: 270px;
      padding: 18px clamp(16px, 3vw, 34px) 24px;
      border-top: 1px solid rgba(54, 48, 39, 0.18);
      color: #302a22;
      background: #f7f2e9;
      font: 14px/1.45 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    body.debug-mode .debug-panel:not([hidden]) {
      display: block;
    }

    .debug-panel__inner {
      width: min(1180px, 100%);
      margin: 0 auto;
    }

    .debug-panel__header {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 18px;
      margin-bottom: 14px;
    }

    .debug-panel__summary {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 18px;
      border-radius: 6px;
      padding: 4px 0;
      cursor: pointer;
      list-style-position: inside;
    }

    .debug-panel__summary::marker {
      color: #375f78;
      font-size: 14px;
    }

    .debug-panel__summary:focus-visible {
      outline: 2px solid #375f78;
      outline-offset: 4px;
    }

    .debug-panel__title {
      margin: 0;
      font: 700 18px/1.2 Georgia, "Times New Roman", serif;
    }

    .debug-panel__status {
      min-height: 20px;
      margin: 0;
      color: #5f5242;
      text-align: right;
    }

    .debug-panel__row {
      display: grid;
      grid-template-columns: minmax(190px, 260px) 1fr auto;
      gap: 16px;
      align-items: end;
    }

    .debug-panel__section {
      margin-top: 18px;
      border-top: 1px solid rgba(54, 48, 39, 0.16);
      padding-top: 16px;
    }

    .debug-panel__section--button-debugger {
      margin-top: 0;
      border-top: 0;
      padding-top: 0;
    }

    .debug-panel__collapsible-body {
      margin-top: 14px;
    }

    .debug-panel__field {
      display: grid;
      gap: 6px;
      font-weight: 700;
    }

    .debug-panel__select,
    .debug-panel__number {
      width: 100%;
      border: 1px solid rgba(69, 58, 43, 0.28);
      border-radius: 6px;
      padding: 8px 9px;
      color: #2c261f;
      background: #fffdf8;
      font: inherit;
    }

    .debug-panel__controls {
      display: grid;
      grid-template-columns: repeat(3, minmax(190px, 1fr));
      gap: 12px 16px;
    }

    .debug-control {
      display: grid;
      grid-template-columns: 1fr 82px;
      gap: 7px 10px;
      align-items: center;
    }

    .debug-control__label {
      grid-column: 1 / -1;
      display: flex;
      justify-content: space-between;
      gap: 12px;
      color: #4a4034;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .debug-control__range {
      width: 100%;
      accent-color: #4b7796;
    }

    .debug-panel__button {
      min-width: 150px;
      border: 1px solid rgba(45, 66, 79, 0.26);
      border-radius: 6px;
      padding: 10px 14px;
      color: #fffdf8;
      background: #375f78;
      font: 800 13px/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      cursor: pointer;
    }

    .debug-panel__actions {
      display: grid;
      gap: 8px;
    }

    .debug-panel__button--secondary {
      color: #2f4050;
      background: #fffdf8;
    }

    .debug-panel__button:hover,
    .debug-panel__button:focus-visible {
      background: #2e526a;
    }

    .debug-panel__button--secondary:hover,
    .debug-panel__button--secondary:focus-visible {
      background: #e7f0f5;
    }

    .debug-panel__output {
      margin-top: 12px;
    }

    .debug-panel__output summary {
      cursor: pointer;
      font-weight: 800;
    }

    .debug-panel__json {
      max-height: 180px;
      margin: 10px 0 0;
      overflow: auto;
      border: 1px solid rgba(69, 58, 43, 0.18);
      border-radius: 6px;
      padding: 10px;
      background: #fffdf8;
      font: 12px/1.45 Consolas, "Liberation Mono", monospace;
      white-space: pre;
    }

    .team-carousel {
      position: absolute;
      inset: 0;
      z-index: 8;
      display: grid;
      place-items: center;
      padding: clamp(14px, 3vw, 34px);
      background:
        radial-gradient(circle at 50% 42%, rgba(255, 246, 224, 0.16), transparent 44%),
        rgba(34, 21, 10, 0.38);
      opacity: 0;
      pointer-events: none;
      transition: opacity 260ms ease;
    }

    .team-carousel.is-open {
      opacity: 1;
      pointer-events: auto;
    }

    .team-carousel:not(.is-open) *,
    .philosophy-modal:not(.is-open) *,
    .contact-modal:not(.is-open) * {
      pointer-events: none !important;
    }

    .team-carousel__panel {
      position: relative;
      width: min(1180px, 100%);
      min-height: min(650px, calc(100vh - 28px));
      display: grid;
      grid-template-rows: 1fr auto;
      align-items: center;
      justify-items: center;
      gap: 18px;
      overflow: visible;
      perspective: 1400px;
    }

    .team-carousel__deck {
      position: relative;
      width: min(100%, 1080px);
      height: min(500px, calc(100vh - 150px));
      min-height: 390px;
      transform-style: preserve-3d;
      touch-action: pan-y;
    }

    .team-card {
      position: absolute;
      left: 50%;
      top: 50%;
      width: min(840px, 74vw);
      height: min(440px, calc(100vh - 170px));
      min-height: 380px;
      display: grid;
      grid-template-columns: minmax(260px, 0.9fr) minmax(320px, 1.1fr);
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, 0.62);
      border-radius: 24px;
      background:
        radial-gradient(circle at 16% 8%, rgba(255, 255, 255, 0.58), transparent 26%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.38), rgba(255, 244, 218, 0.14)),
        rgba(255, 255, 255, 0.06);
      box-shadow:
        0 28px 72px rgba(33, 18, 6, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.82),
        inset 0 -1px 0 rgba(255, 255, 255, 0.22);
      isolation: isolate;
      opacity: 0;
      pointer-events: none;
      touch-action: pan-y;
      transform: translate3d(-50%, -50%, -360px) scale(0.62);
      transform-style: preserve-3d;
      transition:
        transform 520ms cubic-bezier(0.2, 0.72, 0.2, 1),
        opacity 320ms ease,
        filter 320ms ease;
      will-change: transform, opacity;
    }

    .team-card::before,
    .philosophy-modal__panel::before,
    .contact-modal__panel::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background:
        linear-gradient(118deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.07) 28%, transparent 44%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 36%);
      opacity: 0.78;
      pointer-events: none;
      z-index: 0;
    }

    .team-card::before {
      backdrop-filter: blur(10px) saturate(1.08);
      -webkit-backdrop-filter: blur(10px) saturate(1.08);
    }

    .team-card > *,
    .philosophy-modal__panel > *,
    .contact-modal__panel > * {
      position: relative;
      z-index: 1;
    }

    .team-card.is-active {
      z-index: 5;
      opacity: 1;
      pointer-events: auto;
      filter: none;
      transform: translate3d(-50%, -50%, 150px) rotateY(0deg) scale(1);
    }

    .team-card.is-prev {
      z-index: 3;
      opacity: 0.32;
      pointer-events: auto;
      cursor: pointer;
      filter: none;
      transform: translate3d(-78%, -50%, -180px) rotateY(32deg) scale(0.78);
    }

    .team-card.is-next {
      z-index: 3;
      opacity: 0.32;
      pointer-events: auto;
      cursor: pointer;
      filter: none;
      transform: translate3d(-22%, -50%, -180px) rotateY(-32deg) scale(0.78);
    }

    .team-card.is-far-prev {
      z-index: 1;
      opacity: 0.08;
      filter: none;
      transform: translate3d(-102%, -50%, -300px) rotateY(42deg) scale(0.62);
    }

    .team-card.is-far-next {
      z-index: 1;
      opacity: 0.08;
      filter: none;
      transform: translate3d(2%, -50%, -300px) rotateY(-42deg) scale(0.62);
    }

    .team-card__media {
      min-height: 0;
      background:
        linear-gradient(180deg, rgba(98, 66, 24, 0.07), rgba(45, 26, 8, 0.04)),
        rgba(255, 255, 255, 0.88);
    }

    .team-card__photo {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      object-position: center top;
      opacity: 1;
      filter: none;
      mix-blend-mode: normal;
      -webkit-user-drag: none;
    }

    .team-card__body {
      display: grid;
      grid-template-rows: auto minmax(0, 1fr) auto;
      gap: 12px;
      min-height: 0;
      padding: clamp(18px, 2.5vw, 28px);
      background:
        linear-gradient(145deg, rgba(255, 252, 244, 0.88), rgba(255, 242, 218, 0.78)),
        rgba(255, 255, 255, 0.82);
      color: rgba(46, 30, 14, 0.96);
    }

    .team-carousel__close {
      position: absolute;
      top: 4px;
      right: 4px;
      z-index: 7;
      width: 38px;
      height: 38px;
      border: 1px solid rgba(88, 59, 22, 0.22);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.58);
      color: rgba(48, 30, 12, 0.92);
      font: 700 19px/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      cursor: pointer;
    }

    .team-card__eyebrow {
      margin: 0 0 7px;
      color: rgba(117, 78, 28, 0.74);
      font: 800 11px/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .team-card__name {
      margin: 0;
      font: 700 clamp(24px, 3.1vw, 38px)/1.02 Georgia, "Times New Roman", serif;
      letter-spacing: 0;
    }

    .team-card__role {
      margin: 8px 0 0;
      color: rgba(76, 51, 22, 0.88);
      font: 700 clamp(13px, 1.45vw, 16px)/1.35 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    .team-card__summary,
    .team-card__bio {
      margin: 0;
      color: rgba(55, 36, 18, 0.9);
      font: 500 14px/1.48 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    .team-card__bio {
      display: block;
      max-height: none;
      overflow: visible;
      padding: 12px 14px;
      border-radius: 16px;
      background: rgba(255, 255, 255, 0.14);
      border: 1px solid rgba(255, 255, 255, 0.42);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.48);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }

    .team-card__content {
      display: grid;
      align-content: start;
      gap: 10px;
      min-height: 0;
      overflow: auto;
      padding-right: 2px;
    }

    .team-carousel__nav {
      display: grid;
      justify-items: center;
      gap: 8px;
      justify-content: center;
      width: 100%;
      align-self: end;
    }

    .team-carousel__actions {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      width: auto;
      padding: 6px;
      border: 1px solid rgba(255, 255, 255, 0.42);
      border-radius: 999px;
      background: rgba(255, 252, 244, 0.84);
      box-shadow:
        0 12px 26px rgba(38, 22, 8, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
      filter: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }

    .team-carousel__button {
      display: inline-grid;
      place-items: center;
      width: 42px;
      min-height: 42px;
      border: 1px solid rgba(88, 59, 22, 0.22);
      border-radius: 999px;
      padding: 0;
      background: rgba(255, 255, 255, 0.88);
      color: rgba(48, 30, 12, 0.96);
      font: 900 22px/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      cursor: pointer;
      white-space: nowrap;
      text-shadow: none;
      filter: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }

    .team-carousel__button:hover,
    .team-carousel__button:focus-visible,
    .team-carousel__close:hover,
    .team-carousel__close:focus-visible {
      background: rgba(255, 255, 255, 0.72);
      outline: 3px solid var(--focus-ring);
      outline-offset: 2px;
    }

    .team-carousel__count {
      color: rgba(76, 51, 22, 0.78);
      font: 800 12px/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      text-align: center;
      min-height: 18px;
    }

    .philosophy-modal,
    .content-modal {
      position: absolute;
      box-sizing: border-box;
      inset: 0;
      z-index: 9;
      display: grid;
      place-items: center;
      padding: clamp(16px, 4vw, 46px);
      background:
        radial-gradient(circle at 30% 22%, rgba(255, 241, 196, 0.18), transparent 36%),
        rgba(29, 18, 9, 0.42);
      opacity: 0;
      pointer-events: none;
      transition: opacity 260ms ease;
    }

    .philosophy-modal.is-open,
    .content-modal.is-open {
      opacity: 1;
      pointer-events: auto;
    }

    .philosophy-modal__panel,
    .content-modal__panel {
      position: relative;
      box-sizing: border-box;
      width: min(880px, 100%);
      max-height: min(760px, calc(100vh - 32px));
      overflow: auto;
      padding: clamp(28px, 4.2vw, 46px);
      border: 1px solid rgba(255, 255, 255, 0.66);
      border-radius: 24px;
      background:
        radial-gradient(circle at 18% 9%, rgba(255, 255, 255, 0.56), transparent 28%),
        linear-gradient(145deg, rgba(255, 247, 225, 0.42), rgba(255, 236, 201, 0.2)),
        rgba(255, 255, 255, 0.08);
      box-shadow:
        0 30px 72px rgba(25, 13, 5, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.86),
        inset 0 -1px 0 rgba(255, 255, 255, 0.24);
      backdrop-filter: blur(10px) saturate(1.08);
      -webkit-backdrop-filter: blur(10px) saturate(1.08);
      color: rgba(42, 55, 22, 0.96);
    }

    .philosophy-modal__close,
    .content-modal__close {
      position: absolute;
      top: 16px;
      right: 16px;
      z-index: 2;
      width: 42px;
      height: 42px;
      border: 1px solid rgba(88, 59, 22, 0.24);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.62);
      color: rgba(48, 30, 12, 0.92);
      font: 700 24px/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      cursor: pointer;
    }

    .philosophy-modal__eyebrow,
    .content-modal__eyebrow {
      margin: 0 0 10px;
      color: rgba(92, 58, 24, 0.78);
      font: 800 12px/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      text-align: center;
    }

    .philosophy-modal__title,
    .content-modal__title {
      margin: 0;
      color: rgba(32, 57, 20, 0.98);
      font: 700 clamp(38px, 6vw, 64px)/0.95 Georgia, "Times New Roman", serif;
      letter-spacing: 0;
      text-align: center;
      text-transform: uppercase;
    }

    .philosophy-modal__rule,
    .content-modal__rule {
      display: flex;
      align-items: center;
      gap: 14px;
      margin: 18px auto 16px;
      width: min(440px, 78%);
      color: rgba(124, 75, 39, 0.82);
      font: 700 18px/1 Georgia, "Times New Roman", serif;
    }

    .philosophy-modal__rule::before,
    .philosophy-modal__rule::after,
    .content-modal__rule::before,
    .content-modal__rule::after {
      content: "";
      flex: 1;
      height: 1px;
      background: rgba(124, 75, 39, 0.42);
    }

    .philosophy-modal__image {
      display: block;
      width: clamp(150px, 22vw, 224px);
      max-width: 100%;
      height: auto;
      margin: -2px auto 16px;
      filter: drop-shadow(0 14px 18px rgba(68, 39, 12, 0.18));
    }

    .philosophy-modal__intro,
    .philosophy-modal__closing {
      margin: 0 auto;
      max-width: 680px;
      color: rgba(54, 39, 22, 0.92);
      font: 500 clamp(15px, 1.6vw, 17px)/1.55 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      text-align: center;
    }

    .philosophy-modal__subheading {
      margin: 22px 0 14px;
      color: rgba(67, 42, 19, 0.88);
      font: 800 13px/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      text-align: center;
    }

    .philosophy-modal__list {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      margin: 0 0 18px;
      padding: 0;
      list-style: none;
    }

    .philosophy-modal__item {
      min-height: 96px;
      padding: 13px 16px;
      border: 1px solid rgba(255, 255, 255, 0.56);
      border-radius: 16px;
      background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.06)),
        rgba(255, 255, 255, 0.08);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.56),
        0 10px 22px rgba(60, 35, 12, 0.08);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }

    .philosophy-modal__item:last-child:nth-child(odd) {
      grid-column: 1 / -1;
      min-height: 0;
    }

    .philosophy-modal__item h3 {
      margin: 0 0 7px;
      color: rgba(35, 58, 22, 0.96);
      font: 800 16px/1.2 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    .philosophy-modal__item p {
      margin: 0;
      color: rgba(55, 36, 18, 0.9);
      font: 500 14px/1.48 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    .philosophy-modal__close:hover,
    .philosophy-modal__close:focus-visible,
    .content-modal__close:hover,
    .content-modal__close:focus-visible {
      background: rgba(255, 255, 255, 0.78);
      outline: 3px solid var(--focus-ring);
      outline-offset: 2px;
    }

    .content-modal__panel {
      width: min(920px, 100%);
      padding-bottom: clamp(30px, 5vw, 54px);
    }

    .content-modal__body {
      display: grid;
      gap: 14px;
      margin: 0 auto;
      max-width: 760px;
      color: rgba(54, 39, 22, 0.94);
      font: 500 clamp(15px, 1.6vw, 17px)/1.56 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      overflow-wrap: anywhere;
    }

    .content-modal__body p {
      margin: 0;
    }

    .content-modal__body ul,
    .content-modal__body ol {
      display: grid;
      gap: 9px;
      margin: 0;
      padding-left: 1.18rem;
    }

    .content-modal__section {
      display: grid;
      gap: 10px;
      padding: 14px 16px;
      border: 1px solid rgba(255, 255, 255, 0.54);
      border-radius: 16px;
      background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.07)),
        rgba(255, 255, 255, 0.1);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.48),
        0 10px 22px rgba(60, 35, 12, 0.08);
    }

    .content-modal__section-title {
      margin: 0;
      color: rgba(35, 58, 22, 0.96);
      font: 800 16px/1.22 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    .content-modal__meta {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: 0;
    }

    .content-modal__meta div {
      display: inline-grid;
      grid-template-columns: auto auto;
      gap: 6px;
      align-items: baseline;
      padding: 7px 10px;
      border-radius: 999px;
      background: rgba(255, 252, 244, 0.78);
      color: rgba(66, 43, 22, 0.92);
      font: 700 13px/1.2 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    .content-modal__meta dt {
      color: rgba(92, 58, 24, 0.72);
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    .content-modal__meta dd {
      margin: 0;
    }

    .content-modal__link-list {
      list-style: none;
      padding: 0;
    }

    .content-modal__button {
      display: inline-flex;
      width: fit-content;
      align-items: center;
      justify-content: center;
      min-height: 42px;
      padding: 10px 16px;
      border: 1px solid rgba(67, 74, 30, 0.26);
      border-radius: 999px;
      background: rgba(255, 253, 246, 0.78);
      color: rgba(46, 72, 28, 0.98);
      font: 800 14px/1.2 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      text-decoration: none;
      box-shadow: 0 8px 20px rgba(64, 40, 14, 0.1);
    }

    .content-modal__button:hover,
    .content-modal__button:focus-visible {
      background: rgba(255, 255, 255, 0.9);
      outline: 3px solid var(--focus-ring);
      outline-offset: 2px;
    }

    .contact-modal {
      position: absolute;
      inset: 0;
      z-index: 9;
      display: grid;
      place-items: center;
      padding: clamp(16px, 4vw, 46px);
      background:
        radial-gradient(circle at 70% 18%, rgba(255, 207, 122, 0.16), transparent 34%),
        rgba(29, 18, 9, 0.42);
      opacity: 0;
      pointer-events: none;
      transition: opacity 260ms ease;
    }

    .contact-modal.is-open {
      opacity: 1;
      pointer-events: auto;
    }

    .contact-modal__panel {
      position: relative;
      width: min(980px, 100%);
      max-height: min(760px, calc(100vh - 32px));
      display: grid;
      grid-template-columns: minmax(260px, 0.85fr) minmax(330px, 1.15fr);
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, 0.66);
      border-radius: 24px;
      background:
        radial-gradient(circle at 18% 10%, rgba(255, 255, 255, 0.56), transparent 28%),
        linear-gradient(145deg, rgba(255, 248, 229, 0.42), rgba(255, 237, 205, 0.2)),
        rgba(255, 255, 255, 0.08);
      box-shadow:
        0 30px 72px rgba(25, 13, 5, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.86),
        inset 0 -1px 0 rgba(255, 255, 255, 0.24);
      backdrop-filter: blur(10px) saturate(1.08);
      -webkit-backdrop-filter: blur(10px) saturate(1.08);
      color: rgba(42, 55, 22, 0.96);
    }

    .contact-modal__close {
      position: absolute;
      top: 16px;
      right: 16px;
      z-index: 2;
      width: 42px;
      height: 42px;
      border: 1px solid rgba(88, 59, 22, 0.24);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.66);
      color: rgba(48, 30, 12, 0.92);
      font: 700 24px/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      cursor: pointer;
    }

    .contact-modal__art {
      display: grid;
      place-items: center;
      min-height: 480px;
      padding: clamp(24px, 4vw, 42px);
      background:
        radial-gradient(circle at 50% 46%, rgba(255, 197, 92, 0.14), transparent 52%),
        rgba(255, 255, 255, 0.04);
    }

    .contact-modal__art img {
      width: min(330px, 100%);
      height: auto;
      display: block;
      filter: drop-shadow(0 14px 18px rgba(80, 43, 10, 0.14));
    }

    .contact-modal__body {
      display: grid;
      align-content: center;
      gap: 18px;
      min-height: 0;
      overflow: auto;
      padding: clamp(30px, 4.8vw, 54px);
    }

    .contact-modal__eyebrow {
      margin: 0;
      color: rgba(92, 58, 24, 0.78);
      font: 800 12px/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }

    .contact-modal__title {
      margin: 0;
      color: rgba(32, 57, 20, 0.98);
      font: 700 clamp(38px, 5.2vw, 62px)/0.96 Georgia, "Times New Roman", serif;
      letter-spacing: 0;
      text-transform: uppercase;
    }

    .contact-modal__intro {
      margin: 0;
      color: rgba(54, 39, 22, 0.92);
      font: 500 clamp(15px, 1.5vw, 17px)/1.58 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    .contact-modal__actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .contact-modal__button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 44px;
      border: 2px solid #17391f;
      border-radius: 999px;
      padding: 0 18px;
      background: var(--button-primary);
      color: var(--button-text);
      font: 800 13px/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      text-decoration: underline;
      text-decoration-thickness: 2px;
      text-underline-offset: 4px;
      white-space: nowrap;
    }

    .contact-modal__button--secondary {
      border-style: dashed;
      background: rgba(255, 255, 255, 0.72);
      color: #2b2118;
    }

    .contact-modal__details {
      display: grid;
      gap: 10px;
      margin: 0;
    }

    .contact-modal__detail {
      display: grid;
      grid-template-columns: 78px 1fr;
      gap: 12px;
      padding: 12px 14px;
      border: 1px solid rgba(255, 255, 255, 0.56);
      border-radius: 16px;
      background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.06)),
        rgba(255, 255, 255, 0.08);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.56),
        0 10px 22px rgba(60, 35, 12, 0.08);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }

    .contact-modal__detail dt {
      color: rgba(67, 42, 19, 0.82);
      font: 800 12px/1.4 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .contact-modal__detail dd {
      margin: 0;
      color: rgba(35, 58, 22, 0.96);
      font: 700 15px/1.4 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    .contact-modal__detail a {
      color: var(--link-text);
      text-decoration: underline;
      text-decoration-thickness: 2px;
      text-underline-offset: 4px;
    }

    .contact-modal__detail a:hover,
    .contact-modal__detail a:focus-visible {
      color: var(--link-hover);
      outline: 3px solid var(--focus-ring);
      outline-offset: 3px;
    }

    .contact-modal__close:hover,
    .contact-modal__close:focus-visible,
    .contact-modal__button:hover,
    .contact-modal__button:focus-visible {
      background: rgba(255, 255, 255, 0.78);
      color: rgba(48, 30, 12, 0.96);
      outline: 3px solid var(--focus-ring);
      outline-offset: 2px;
    }

    .cursor-sparkle-layer {
      position: absolute;
      inset: 0;
      z-index: 5;
      overflow: hidden;
      pointer-events: none;
      opacity: 0;
      transition: opacity 650ms ease;
    }

    .stage.is-inside.inside-visible .cursor-sparkle-layer {
      opacity: 1;
    }

    .cursor-sparkle {
      position: absolute;
      left: var(--sparkle-x, 50%);
      top: var(--sparkle-y, 50%);
      width: var(--sparkle-size, 9px);
      height: var(--sparkle-size, 9px);
      border-radius: 50%;
      background: rgba(255, 246, 184, 0.95);
      box-shadow:
        0 0 8px rgba(255, 246, 184, 0.92),
        0 0 18px rgba(255, 196, 82, 0.62),
        0 0 30px rgba(166, 226, 255, 0.34);
      transform: translate3d(-50%, -50%, 0) scale(0.4);
      animation: cursorSparkle 920ms ease-out forwards;
    }

    .cursor-sparkle::before,
    .cursor-sparkle::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: 165%;
      height: 1px;
      border-radius: 999px;
      background: rgba(255, 248, 207, 0.85);
      transform: translate3d(-50%, -50%, 0) rotate(var(--sparkle-rotate, 0deg));
    }

    .cursor-sparkle::after {
      transform: translate3d(-50%, -50%, 0) rotate(calc(var(--sparkle-rotate, 0deg) + 90deg));
    }

    /* The exterior doors belong to the exterior. Left standing while a room is
       open they keep their hit areas over the artwork — invisible rectangles that
       swallow the pointer, light a label for a room you are already standing in,
       and answer the Tab key from behind the scene. `display: none` is what takes
       them out of the tab order too. */
    .stage.is-inside canvas,
    .stage.is-inside .door-hotspot,
    .stage.is-inside .exterior-hotspot-layer,
    .stage.is-inside .transition-video {
      display: none;
    }

    .stage.is-inside .inside-view {
      display: block;
    }

    .stage.is-inside.inside-visible .inside-view {
      opacity: 1;
    }

    .stage.is-inside.inside-visible .inside-view::before {
      opacity: 0;
    }

    @media (max-width: 720px) {
      body.debug-mode .stage {
        height: 56vh;
        min-height: 330px;
      }

      .scene-sign {
        min-width: 112px;
        max-width: 154px;
        padding: 9px 11px;
        border-radius: 15px;
        font-size: 13px;
      }

      .debug-panel__header,
      .debug-panel__summary,
      .debug-panel__row {
        display: grid;
        grid-template-columns: 1fr;
      }

      .debug-panel__status {
        text-align: left;
      }

      .debug-panel__controls {
        grid-template-columns: 1fr;
      }

      .team-carousel {
        padding: 10px;
      }

      .team-carousel__panel {
        width: 100%;
        min-height: 0;
        height: calc(100vh - 20px);
        height: calc(100svh - 20px);
        grid-template-rows: minmax(0, 1fr) auto;
        gap: 12px;
      }

      .team-carousel__deck {
        width: 100%;
        height: calc(100vh - 108px);
        height: calc(100svh - 108px);
        min-height: 0;
      }

      .team-card {
        width: min(330px, calc(100vw - 46px));
        height: min(560px, calc(100vh - 120px));
        height: min(560px, calc(100svh - 120px));
        min-height: 0;
        grid-template-columns: 1fr;
        grid-template-rows: 38% 62%;
        border-radius: 20px;
      }

      .team-card.is-active {
        transform: translate3d(-50%, -50%, 0) rotateY(0deg) scale(1);
      }

      .team-card.is-prev {
        opacity: 0.48;
        transform: translate3d(-84%, -50%, -180px) rotateY(34deg) scale(0.74);
      }

      .team-card.is-next {
        opacity: 0.48;
        transform: translate3d(-16%, -50%, -180px) rotateY(-34deg) scale(0.74);
      }

      .team-card.is-far-prev,
      .team-card.is-far-next {
        opacity: 0;
      }

      .team-card__body {
        padding: 16px;
      }

      .team-carousel__actions {
        gap: 6px;
        padding: 5px;
      }

      .team-carousel__button {
        width: 38px;
        min-height: 38px;
        font-size: 20px;
      }

      .philosophy-modal,
      .content-modal {
        padding: 10px;
      }

      .philosophy-modal__panel,
      .content-modal__panel {
        width: min(760px, calc(100vw - 32px));
        max-width: calc(100vw - 32px);
        max-height: calc(100vh - 20px);
        padding: 48px 20px 24px;
        border-radius: 18px;
      }

      .philosophy-modal__title,
      .content-modal__title {
        font-size: clamp(30px, 10vw, 40px);
        max-width: 11ch;
        margin-inline: auto;
      }

      .content-modal__body {
        font-size: 14px;
      }

      .philosophy-modal__image {
        width: clamp(136px, 48vw, 190px);
        margin-bottom: 14px;
      }

      .philosophy-modal__list {
        grid-template-columns: 1fr;
      }

      .philosophy-modal__item:last-child:nth-child(odd) {
        grid-column: auto;
      }

      .contact-modal {
        padding: 10px;
      }

      .contact-modal__panel {
        grid-template-columns: 1fr;
        max-height: calc(100vh - 20px);
        overflow: auto;
        border-radius: 18px;
      }

      .contact-modal__art {
        min-height: 0;
        padding: 42px 20px 10px;
      }

      .contact-modal__art img {
        width: min(210px, 72vw);
      }

      .contact-modal__body {
        padding: 18px 20px 24px;
      }

      .contact-modal__title {
        font-size: clamp(34px, 12vw, 48px);
      }

      .contact-modal__actions,
      .contact-modal__button {
        width: 100%;
      }

      .contact-modal__detail {
        grid-template-columns: 1fr;
        gap: 5px;
      }
    }

    @media (max-height: 520px) and (orientation: landscape) {
      html,
      body,
      .stage {
        height: var(--app-viewport-height, 100vh);
      }

      .inside-view {
        overflow: hidden;
      }

      .scene-sign {
        min-width: 116px;
        max-width: 164px;
        padding: 8px 11px;
        border-radius: 14px;
        font-size: 13px;
      }

      .scene-sign::before {
        inset: 4px;
        border-radius: 10px;
      }

      .team-carousel,
      .philosophy-modal,
      .content-modal,
      .contact-modal {
        place-items: start center;
        align-items: start;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        padding: 8px 10px max(10px, env(safe-area-inset-bottom));
      }

      .team-carousel {
        background: rgba(34, 21, 10, 0.28);
      }

      .team-carousel__panel {
        width: min(100%, 760px);
        min-height: 0;
        height: calc(var(--app-viewport-height, 100vh) - 16px);
        grid-template-rows: minmax(0, 1fr);
        gap: 0;
      }

      .team-carousel__deck {
        width: 100%;
        height: 100%;
        min-height: 0;
      }

      .team-card {
        width: min(620px, calc(100vw - 96px));
        height: min(300px, calc(var(--app-viewport-height, 100vh) - 22px));
        max-height: calc(var(--app-viewport-height, 100vh) - 22px);
        min-height: 0;
        grid-template-columns: minmax(126px, 0.72fr) minmax(0, 1.28fr);
        grid-template-rows: 1fr;
        border-radius: 18px;
        background:
          linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(255, 246, 224, 0.9)),
          rgba(255, 255, 255, 0.92);
        box-shadow:
          0 18px 42px rgba(33, 18, 6, 0.2),
          inset 0 1px 0 rgba(255, 255, 255, 0.84);
        transition: none;
      }

      .team-card::before,
      .philosophy-modal__panel::before,
      .content-modal__panel::before,
      .contact-modal__panel::before {
        opacity: 0.24;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
      }

      .team-card.is-active {
        transform: translate3d(-50%, -50%, 0) rotateY(0deg) scale(1);
      }

      .team-card.is-prev,
      .team-card.is-next,
      .team-card.is-far-prev,
      .team-card.is-far-next {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
      }

      .team-card__media,
      .team-card__body {
        background: rgba(255, 251, 242, 0.96);
      }

      .team-card__photo {
        opacity: 1;
      }

      .team-card__body {
        gap: 7px;
        padding: 11px 12px;
      }

      .team-card__eyebrow {
        margin-bottom: 4px;
        font-size: 9px;
      }

      .team-card__name {
        font-size: clamp(20px, 4.8vh, 26px);
      }

      .team-card__role {
        margin-top: 4px;
        font-size: 11.5px;
        line-height: 1.22;
      }

      .team-card__summary,
      .team-card__bio {
        font-size: 11.5px;
        line-height: 1.3;
      }

      .team-card__bio {
        padding: 8px 9px;
        border-radius: 10px;
      }

      .team-card__content {
        gap: 7px;
      }

      .team-carousel__close {
        top: 2px;
        right: 2px;
        width: 34px;
        height: 34px;
        font-size: 17px;
      }

      .team-carousel__nav {
        gap: 4px;
      }

      .team-carousel__actions {
        gap: 6px;
        padding: 4px;
      }

      .team-carousel__button {
        width: 34px;
        min-height: 34px;
        font-size: 18px;
      }

      .team-carousel__count {
        min-height: 14px;
        font-size: 10px;
      }

      .philosophy-modal__panel,
      .content-modal__panel,
      .contact-modal__panel {
        width: min(760px, calc(100vw - 32px));
        max-width: calc(100vw - 32px);
        max-height: none;
        margin: 0 auto 12px;
        border-radius: 18px;
        background:
          linear-gradient(145deg, rgba(255, 252, 244, 0.94), rgba(255, 239, 211, 0.9)),
          rgba(255, 255, 255, 0.9);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
      }

      .philosophy-modal__panel,
      .content-modal__panel {
        padding: 34px 16px 18px;
        overflow: visible;
      }

      .philosophy-modal__close,
      .content-modal__close,
      .contact-modal__close {
        top: 10px;
        right: 10px;
        width: 36px;
        height: 36px;
        font-size: 22px;
      }

      .philosophy-modal__eyebrow,
      .philosophy-modal__rule,
      .content-modal__eyebrow,
      .content-modal__rule,
      .philosophy-modal__image {
        display: none;
      }

      .philosophy-modal__title,
      .content-modal__title {
        font-size: clamp(26px, 7vh, 34px);
        max-width: none;
      }

      .content-modal__body {
        gap: 8px;
        max-width: 700px;
        font-size: 12.5px;
        line-height: 1.38;
      }

      .content-modal__section {
        gap: 7px;
        padding: 8px 10px;
        border-radius: 12px;
      }

      .content-modal__section-title {
        font-size: 13px;
      }

      .content-modal__button {
        min-height: 34px;
        padding: 8px 12px;
        font-size: 11px;
      }

      .philosophy-modal__intro,
      .philosophy-modal__closing {
        max-width: 680px;
        font-size: 12.5px;
        line-height: 1.38;
      }

      .philosophy-modal__subheading {
        margin: 10px 0 9px;
        font-size: 11px;
      }

      .philosophy-modal__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-bottom: 12px;
      }

      .philosophy-modal__item {
        min-height: 0;
        padding: 8px 10px;
        border-radius: 12px;
      }

      .philosophy-modal__item:last-child:nth-child(odd) {
        grid-column: 1 / -1;
      }

      .philosophy-modal__item h3 {
        margin-bottom: 4px;
        font-size: 13px;
      }

      .philosophy-modal__item p {
        font-size: 12px;
        line-height: 1.3;
      }

      .contact-modal__panel {
        grid-template-columns: minmax(128px, 0.55fr) minmax(0, 1.45fr);
        overflow: visible;
      }

      .contact-modal__art {
        min-height: 0;
        padding: 24px 12px;
      }

      .contact-modal__art img {
        width: min(150px, 100%);
      }

      .contact-modal__body {
        align-content: start;
        gap: 9px;
        overflow: visible;
        padding: 24px 52px 18px 18px;
      }

      .contact-modal__eyebrow {
        font-size: 10px;
      }

      .contact-modal__title {
        font-size: clamp(30px, 8.2vh, 42px);
      }

      .contact-modal__intro {
        font-size: 12px;
        line-height: 1.38;
      }

      .contact-modal__actions {
        gap: 8px;
      }

      .contact-modal__button {
        min-height: 34px;
        padding: 0 12px;
        font-size: 11px;
      }

      .contact-modal__details {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
      }

      .contact-modal__detail {
        grid-template-columns: 1fr;
        gap: 3px;
        padding: 8px 10px;
        border-radius: 12px;
      }

      .contact-modal__detail dt {
        font-size: 10px;
      }

      .contact-modal__detail dd {
        font-size: 12px;
        line-height: 1.25;
      }
    }

    @media (max-width: 820px) and (orientation: portrait) {
      .orientation-lock {
        display: grid;
      }
    }

    @keyframes rotatePromptLogo {
      0%,
      12% {
        transform: rotate(0deg) scale(0.9);
      }

      42%,
      68% {
        transform: rotate(90deg) scale(0.82);
      }

      100% {
        transform: rotate(0deg) scale(0.9);
      }
    }

    @keyframes doorGlow {
      0%,
      100% {
        transform: scale(0.88);
        opacity: 0.38;
      }

      50% {
        transform: scale(1.08);
        opacity: 0.68;
      }
    }

    @keyframes doorPulse {
      0% {
        transform: scale(0.72);
        opacity: 0;
      }

      28% {
        opacity: 0.5;
      }

      100% {
        transform: scale(1.22);
        opacity: 0;
      }
    }

    @keyframes sparkleFloat {
      0%,
      100% {
        opacity: 0;
        transform: translate3d(0, 8px, 0) scale(0.55);
      }

      35% {
        opacity: 0.95;
      }

      60% {
        opacity: 0.55;
        transform: translate3d(7px, -7px, 0) scale(1);
      }

      82% {
        opacity: 0;
        transform: translate3d(12px, -18px, 0) scale(0.65);
      }
    }

    @keyframes firelightFlicker {
      0%,
      100% {
        opacity: 0.72;
        transform: scale(1);
      }

      22% {
        opacity: 0.92;
        transform: scale(1.018, 0.986);
      }

      47% {
        opacity: 0.64;
        transform: scale(0.99, 1.012);
      }

      68% {
        opacity: 0.86;
        transform: scale(1.012);
      }

      83% {
        opacity: 0.76;
        transform: scale(0.996, 1.006);
      }
    }

    @keyframes flamePointFlicker {
      0%,
      100% {
        opacity: 0.62;
        transform: translate3d(0, 0, 0) scale(1);
      }

      32% {
        opacity: 0.95;
        transform: translate3d(0.3%, -0.2%, 0) scale(1.04, 0.96);
      }

      58% {
        opacity: 0.48;
        transform: translate3d(-0.2%, 0.2%, 0) scale(0.97, 1.03);
      }

      78% {
        opacity: 0.82;
        transform: translate3d(0.1%, -0.1%, 0) scale(1.02);
      }
    }

    @keyframes cursorSparkle {
      0% {
        opacity: 0;
        transform:
          translate3d(-50%, -50%, 0)
          translate3d(0, 0, 0)
          rotate(var(--sparkle-rotate, 0deg))
          scale(0.35);
      }

      18% {
        opacity: 1;
      }

      100% {
        opacity: 0;
        transform:
          translate3d(-50%, -50%, 0)
          translate3d(var(--sparkle-drift-x, 0px), var(--sparkle-drift-y, -24px), 0)
          rotate(calc(var(--sparkle-rotate, 0deg) + 65deg))
          scale(1.15);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .door-hotspot::before,
      .door-hotspot::after,
      .sparkle,
      .inside-firelight::before,
      .inside-firelight::after {
        animation: none;
      }

      .door-hotspot::before {
        opacity: 0.46;
      }

      .sparkle {
        opacity: 0.5;
      }

      .cursor-sparkle-layer {
        transition: none;
      }

      .cursor-sparkle {
        animation-duration: 1ms;
      }

      .inside-firelight::before {
        opacity: 0.68;
      }

      .inside-firelight::after {
        opacity: 0.52;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .inside-parallax__layer,
      .inside-firelight-layer,
      .dog-eye-layer {
        transform: translate3d(0, 0, 0) !important;
      }
    }