:root {
      color-scheme: dark;
      --void: #05050e;
      --signal: #00ff66;
      --signal-dim: rgba(0, 255, 102, .58);
      --ice: #efffff;
    }

    * { box-sizing: border-box; }

    html,
    body {
      width: 100%;
      height: 100%;
      margin: 0;
      overflow: hidden;
      background: var(--void);
    }

    body {
      position: relative;
      color: var(--ice);
      font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
      -webkit-font-smoothing: antialiased;
    }

    #scene {
      display: block;
      width: 100vw;
      height: 100vh;
      outline: none;
      touch-action: none;
      cursor: default;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 180ms ease-out;
    }

    #scene.is-visible {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }

    .terminal-header {
      position: fixed;
      z-index: 2;
      top: max(18px, env(safe-area-inset-top));
      left: 50%;
      transform: translateX(-50%);
      padding: 8px 13px 9px;
      color: rgba(0, 255, 102, .82);
      background: rgba(8, 8, 12, .48);
      border: 1px solid rgba(0, 255, 102, .11);
      box-shadow: 0 0 18px rgba(0, 255, 102, .045);
      font-size: clamp(11px, 1.2vw, 13px);
      line-height: 1;
      letter-spacing: .16em;
      white-space: nowrap;
      user-select: none;
      pointer-events: none;
      appearance: none;
      border-radius: 0;
      font: inherit;
      transition:
        top 680ms cubic-bezier(.22, .8, .2, 1),
        transform 680ms cubic-bezier(.22, .8, .2, 1),
        padding 680ms cubic-bezier(.22, .8, .2, 1),
        font-size 680ms cubic-bezier(.22, .8, .2, 1),
        letter-spacing 680ms cubic-bezier(.22, .8, .2, 1),
        background 260ms ease,
        border-color 260ms ease,
        box-shadow 260ms ease,
        color 260ms ease;
    }

    .boot-launch {
      top: 50%;
      transform: translate(-50%, -50%);
      z-index: 4;
      padding: 17px 24px 18px;
      color: rgba(0, 255, 102, .94);
      background: rgba(5, 12, 17, .72);
      border-color: rgba(0, 255, 102, .66);
      box-shadow:
        0 0 12px rgba(0, 255, 102, .18),
        inset 0 0 20px rgba(0, 255, 102, .035);
      font-size: clamp(18px, 2.2vw, 24px);
      letter-spacing: .13em;
      cursor: pointer;
      pointer-events: auto;
      text-shadow: 0 0 10px rgba(0, 255, 102, .72);
    }

    .boot-launch::before,
    .boot-launch::after {
      position: absolute;
      width: 8px;
      height: 8px;
      content: "";
      border-color: rgba(0, 255, 102, .9);
      pointer-events: none;
    }

    .boot-launch::before {
      top: -1px;
      left: -1px;
      border-top: 2px solid;
      border-left: 2px solid;
    }

    .boot-launch::after {
      right: -1px;
      bottom: -1px;
      border-right: 2px solid;
      border-bottom: 2px solid;
    }

    .boot-launch:hover,
    .boot-launch:focus-visible {
      color: #ffffff;
      border-color: rgba(0, 255, 102, .98);
      background: rgba(0, 38, 30, .72);
      box-shadow:
        0 0 20px rgba(0, 255, 102, .3),
        inset 0 0 24px rgba(0, 255, 102, .09);
      outline: none;
    }

    .boot-launch.is-docking {
      top: max(18px, env(safe-area-inset-top));
      transform: translateX(-50%);
      padding: 8px 13px 9px;
      color: rgba(0, 255, 102, .82);
      background: rgba(8, 8, 12, .48);
      border-color: rgba(0, 255, 102, .11);
      box-shadow: 0 0 18px rgba(0, 255, 102, .045);
      font-size: clamp(11px, 1.2vw, 13px);
      letter-spacing: .16em;
      cursor: default;
      pointer-events: none;
      text-shadow: none;
    }

    .boot-prompt {
      position: fixed;
      z-index: 3;
      top: calc(50% - 78px);
      left: 50%;
      display: grid;
      gap: 8px;
      justify-items: center;
      color: rgba(197, 255, 229, .65);
      font-size: clamp(11px, 1.2vw, 14px);
      letter-spacing: .24em;
      line-height: 1;
      pointer-events: none;
      transform: translateX(-50%);
      transition: opacity 130ms ease, transform 180ms ease;
      user-select: none;
    }

    .boot-prompt.is-hidden {
      opacity: 0;
      transform: translate(-50%, -10px);
      visibility: hidden;
    }

    .boot-arrow {
      color: #00ff66;
      font-size: 20px;
      line-height: .7;
      text-shadow: 0 0 10px rgba(0, 255, 102, .8);
      animation: boot-arrow-pulse 1.15s ease-in-out infinite;
    }

    @keyframes boot-arrow-pulse {
      0%, 100% { opacity: .48; transform: translateY(-1px); }
      50% { opacity: 1; transform: translateY(4px); }
    }

    .terminal-header .prompt {
      color: var(--signal);
      text-shadow: 0 0 8px rgba(0, 255, 102, .7);
    }

    .hud {
      position: fixed;
      z-index: 2;
      right: max(20px, env(safe-area-inset-right));
      bottom: max(19px, env(safe-area-inset-bottom));
      color: rgba(222, 255, 243, .38);
      font-size: 9px;
      line-height: 1.55;
      letter-spacing: .15em;
      text-align: right;
      text-transform: uppercase;
      pointer-events: none;
      user-select: none;
      transition: opacity 240ms ease;
    }

    .hud .accent { color: rgba(0, 255, 102, .66); }

    .corner-mark {
      position: fixed;
      z-index: 2;
      left: max(20px, env(safe-area-inset-left));
      bottom: max(19px, env(safe-area-inset-bottom));
      color: rgba(255, 255, 255, .2);
      font-size: 9px;
      letter-spacing: .14em;
      pointer-events: none;
      user-select: none;
      transition: opacity 240ms ease;
    }

    body.booting .hud,
    body.booting .corner-mark {
      opacity: 0;
    }

    @media (max-width: 560px) {
      .terminal-header { letter-spacing: .1em; }
      .hud,
      .corner-mark { font-size: 8px; }
      .boot-prompt { letter-spacing: .16em; }
    }