:root {
      color-scheme: dark;
      --aqua: #48b8bd;
      --aqua-soft: rgba(72, 184, 189, 0.36);
      --amber: #e7c98d;
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      min-height: 100vh;
      display: grid;
      place-items: center;
      background: #020607;
      font-family: "Avenir Next", Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      text-rendering: geometricPrecision;
    }

    .phone {
      position: relative;
      width: min(100vw, 460px);
      aspect-ratio: 941 / 1672;
      overflow: hidden;
      background: #020607 url("assets/bridge-mobile-hands-console-v1.png") center / cover no-repeat;
      box-shadow: 0 0 44px rgba(0, 0, 0, 0.75);
    }

    .micro,
    .pass {
      position: absolute;
      overflow: hidden;
      border: 1px solid rgba(72, 184, 189, 0.22);
      border-radius: 7px;
      background:
        linear-gradient(180deg, rgba(72, 184, 189, 0.055), rgba(5, 28, 34, 0.24) 50%, rgba(2, 12, 17, 0.38)),
        rgba(2, 15, 21, 0.30);
      color: rgba(183, 200, 203, 0.73);
      letter-spacing: 0.18em;
      text-transform: uppercase;
      text-align: left;
      text-shadow: 0 0 4px rgba(72, 184, 189, 0.18);
      box-shadow:
        inset 0 0 8px rgba(72, 184, 189, 0.045),
        0 0 4px rgba(72, 184, 189, 0.035);
      backdrop-filter: blur(5px) saturate(0.95);
      z-index: 2;
      animation: none;
    }

    .micro::before,
    .pass::before {
      content: "";
      position: absolute;
      left: 10px;
      top: 11px;
      width: 6px;
      height: 6px;
      border-radius: 999px;
      background: var(--aqua);
      box-shadow: 0 0 6px rgba(72, 184, 189, 0.36);
      opacity: 0.55;
      animation: none;
    }

    .micro::after,
    .pass::after {
      display: none;
    }

    .micro {
      width: 20.7%;
      height: 3.85%;
      min-height: 0;
      padding: 6px 10px 6px 28px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .label,
    .sublabel {
      position: relative;
      z-index: 3;
      display: block;
      line-height: 1;
      white-space: nowrap;
    }

    .label {
      font-family: "SF Mono", "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
      font-size: clamp(10px, 2.55vw, 13px);
      font-weight: 500;
      transform: none;
      animation: letterDrift 9.6s ease-in-out infinite;
    }

    .sublabel {
      margin-top: 5px;
      color: rgba(72, 184, 189, 0.62);
      font-family: "SF Mono", "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
      font-size: clamp(7px, 1.75vw, 9px);
      font-weight: 470;
      letter-spacing: 0.20em;
      line-height: 1;
      animation: letterDrift 11.2s ease-in-out infinite;
    }

    .log { left: 2.85%; top: 75.90%; }
    .route { right: 3.55%; top: 75.90%; }
    .object { left: 2.85%; top: 81.08%; }
    .comms { right: 3.55%; top: 81.08%; }
    .notes { left: 2.85%; top: 86.18%; }
    .system { right: 3.55%; top: 86.18%; }

    .log .label { animation-delay: -0.9s; }
    .log .sublabel { animation-delay: -3.8s; }
    .route .label { animation-delay: -2.4s; animation-duration: 10.4s; }
    .route .sublabel { animation-delay: -6.1s; animation-duration: 12.2s; }
    .object .label { animation-delay: -4.2s; animation-duration: 8.8s; }
    .object .sublabel { animation-delay: -1.7s; animation-duration: 10.8s; }
    .comms .label { animation-delay: -6.3s; animation-duration: 11.1s; }
    .comms .sublabel { animation-delay: -4.9s; animation-duration: 9.9s; }
    .notes .label { animation-delay: -1.8s; animation-duration: 9.2s; }
    .notes .sublabel { animation-delay: -7.4s; animation-duration: 12.8s; }
    .system .label { animation-delay: -5.1s; animation-duration: 10.9s; }
    .system .sublabel { animation-delay: -2.6s; animation-duration: 11.6s; }

    .start-hit {
      position: absolute;
      left: 50%;
      top: 82.8%;
      width: 20%;
      aspect-ratio: 1;
      translate: -50% -50%;
      border-radius: 50%;
      border: 1px solid rgba(72, 184, 189, 0.20);
      background:
        radial-gradient(circle, rgba(72, 184, 189, 0.055), transparent 47%),
        conic-gradient(from 26deg, rgba(72, 184, 189, 0.25) 0 62deg, transparent 62deg 150deg, rgba(72, 184, 189, 0.14) 150deg 232deg, transparent 232deg);
      box-shadow: 0 0 16px rgba(72, 184, 189, 0.08), inset 0 0 13px rgba(72, 184, 189, 0.07);
      opacity: 0.64;
      animation: none;
      z-index: 3;
    }

    .start-hit::before {
      content: "";
      position: absolute;
      inset: 28%;
      border: 1px solid rgba(72, 184, 189, 0.30);
      border-radius: inherit;
      background: rgba(2, 18, 20, 0.12);
    }

    .start-hit::after {
      content: "";
      position: absolute;
      left: 52%;
      top: 50%;
      translate: -35% -50%;
      border-left: clamp(13px, 4vw, 19px) solid rgba(72, 184, 189, 0.70);
      border-top: clamp(9px, 2.8vw, 13px) solid transparent;
      border-bottom: clamp(9px, 2.8vw, 13px) solid transparent;
      filter: drop-shadow(0 0 8px rgba(72, 184, 189, 0.34));
    }

    .pass {
      left: 50%;
      bottom: 3.85%;
      width: 28.5%;
      height: 3.15%;
      min-height: 0;
      padding: 6px 12px 6px 28px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      transform: translateX(-50%);
      border-color: rgba(231, 201, 141, 0.18);
      background:
        linear-gradient(180deg, rgba(72, 184, 189, 0.04), rgba(25, 33, 32, 0.27) 52%, rgba(13, 18, 18, 0.40)),
        rgba(19, 25, 25, 0.32);
    }

    .pass .label {
      color: rgba(231, 201, 141, 0.72);
      font-size: clamp(8px, 2vw, 10px);
      font-weight: 520;
      animation-delay: -3.2s;
      animation-duration: 10.6s;
    }

    .pass .sublabel {
      display: block;
      color: rgba(72, 184, 189, 0.50);
      animation-delay: -6.8s;
      animation-duration: 12.4s;
    }

    .pass::before {
      left: 9px;
      top: 11px;
      width: 5px;
      height: 5px;
      background: var(--aqua);
    }

    .phone.is-playing .start-hit {
      opacity: 0.78;
      box-shadow: 0 0 22px rgba(72, 184, 189, 0.13), inset 0 0 16px rgba(72, 184, 189, 0.10);
    }

    .phone.is-playing .start-hit::after {
      left: 50%;
      width: clamp(14px, 4vw, 20px);
      height: clamp(16px, 4.6vw, 24px);
      translate: -50% -50%;
      border: 0;
      background:
        linear-gradient(90deg, rgba(72, 184, 189, 0.76) 0 34%, transparent 34% 66%, rgba(72, 184, 189, 0.76) 66% 100%);
      filter: drop-shadow(0 0 8px rgba(72, 184, 189, 0.34));
    }

    .copyright {
      position: absolute;
      left: 50%;
      bottom: 2.15%;
      transform: translateX(-50%);
      color: rgba(135, 158, 160, 0.42);
      font-family: "SF Mono", "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
      font-size: clamp(5px, 1.25vw, 7px);
      font-weight: 400;
      letter-spacing: 0.16em;
      line-height: 1;
      text-transform: uppercase;
      white-space: nowrap;
      z-index: 2;
    }

    .holo-backdrop {
      position: absolute;
      inset: 0;
      z-index: 7;
      display: none;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.24));
    }

    .holo-panel {
      position: absolute;
      left: 7.2%;
      right: 7.2%;
      top: 17.5%;
      z-index: 8;
      display: none;
      max-height: 46%;
      overflow: auto;
      padding: 15px 16px 17px;
      border: 1px solid rgba(72, 184, 189, 0.22);
      border-radius: 10px;
      background:
        linear-gradient(180deg, rgba(6, 28, 36, 0.55), rgba(2, 11, 17, 0.76)),
        rgba(2, 9, 14, 0.62);
      box-shadow:
        inset 0 0 20px rgba(72, 184, 189, 0.055),
        0 18px 48px rgba(0, 0, 0, 0.42);
      backdrop-filter: blur(8px) saturate(0.95);
      color: rgba(196, 220, 222, 0.82);
      font-family: "SF Mono", "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .phone.panel-open .holo-backdrop,
    .phone.panel-open .holo-panel {
      display: block;
    }

    .holo-close {
      position: absolute;
      right: 10px;
      top: 9px;
      width: 27px;
      height: 27px;
      border: 1px solid rgba(72, 184, 189, 0.18);
      border-radius: 999px;
      background: rgba(2, 15, 21, 0.36);
      color: rgba(196, 220, 222, 0.66);
      font-size: 16px;
      line-height: 1;
      font-family: inherit;
    }

    .holo-kicker {
      margin: 1px 34px 8px 0;
      color: rgba(72, 184, 189, 0.62);
      font-size: clamp(7px, 1.8vw, 10px);
      line-height: 1.35;
    }

    .holo-title {
      margin: 0 34px 13px 0;
      color: rgba(216, 230, 230, 0.82);
      font-size: clamp(15px, 4.2vw, 20px);
      font-weight: 520;
      line-height: 1.12;
      letter-spacing: 0.16em;
    }

    .holo-lines {
      display: grid;
      gap: 9px;
      margin: 0;
      padding: 0;
      list-style: none;
      color: rgba(155, 184, 187, 0.72);
      font-size: clamp(8px, 2.15vw, 11px);
      line-height: 1.55;
      letter-spacing: 0.09em;
      text-transform: none;
    }

    .holo-lines li {
      border-left: 1px solid rgba(72, 184, 189, 0.20);
      padding-left: 9px;
    }

    @keyframes letterDrift {
      0%, 100% {
        opacity: 0.66;
        filter: brightness(0.95);
        text-shadow: 0 0 3px rgba(72, 184, 189, 0.12);
      }
      46% {
        opacity: 0.82;
        filter: brightness(1.06);
        text-shadow: 0 0 6px rgba(72, 184, 189, 0.26);
      }
      57% {
        opacity: 0.72;
        filter: brightness(0.98);
      }
    }