:root {
        --bg: #050a06;
        --panel: #08150b;
        --scan: rgba(0, 0, 0, 0.25);
        --green: #00ff66;
        --green-dim: rgba(0, 255, 102, 0.35);
        --glow: rgba(0, 255, 120, 0.25);
        --hud: rgba(0, 255, 120, 0.85);
      }

      * {
        box-sizing: border-box;
      }

      body {
        margin: 0;
        min-height: 100vh;
        background: radial-gradient(circle at 20% 10%, #0b1e12, var(--bg) 55%);
        color: var(--green);
        font-family: "Courier New", "Cascadia Mono", "SF Mono", ui-monospace, monospace;
        overflow-x: hidden;
      }

      .globe-panel,
      .globe-panel * {
        user-select: none;
        -webkit-user-select: none;
        -webkit-touch-callout: none;
      }

      .wrap {
        width: min(1100px, 96vw);
        display: grid;
        gap: 28px;
        padding: 28px 0 40px;
        margin: 0 auto;
      }

      .header {
        position: sticky;
        top: 0;
        z-index: 10;
        display: grid;
        gap: 10px;
        padding: 18px 0 10px;
        background: linear-gradient(to bottom, rgba(5, 10, 6, 0.95), rgba(5, 10, 6, 0));
        backdrop-filter: blur(4px);
      }

      a,
      a:visited {
        color: rgba(0, 255, 120, 0.85);
      }

      a:hover {
        color: rgba(0, 255, 120, 1);
      }

      .nav {
        display: flex;
        justify-content: center;
        gap: 12px;
        flex-wrap: wrap;
      }

      .nav a {
        background: transparent;
        border: 1px solid rgba(0, 255, 120, 0.35);
        color: var(--green);
        padding: 6px 12px;
        font-family: inherit;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        font-size: 12px;
        cursor: pointer;
        box-shadow: inset 0 0 10px rgba(0, 255, 120, 0.12);
        text-decoration: none;
        display: inline-block;
      }

      .nav a.active {
        background: rgba(0, 255, 120, 0.12);
        border-color: rgba(0, 255, 120, 0.8);
        box-shadow: 0 0 12px rgba(0, 255, 120, 0.35);
      }

      .page {
        background: var(--panel);
        border: 1px solid rgba(0, 255, 102, 0.12);
        padding: 16px 18px;
        box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.6);
        display: block;
      }

      .page h2 {
        margin: 0 0 10px;
        font-size: 14px;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: var(--green);
      }

      .page p {
        margin: 0 0 8px;
        font-size: 13px;
        line-height: 1.35em;
        color: rgba(0, 255, 120, 0.7);
      }

      .page-actions {
        margin-top: 10px;
      }

      .terminal-toggle {
        background: transparent;
        border: 1px solid rgba(0, 255, 120, 0.35);
        color: var(--hud);
        padding: 6px 10px;
        font-family: inherit;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        font-size: 10px;
        cursor: pointer;
        box-shadow: inset 0 0 10px rgba(0, 255, 120, 0.12);
      }

      .terminal {
        position: relative;
        display: flex;
        justify-content: center;
        max-width: 100%;
      }

      .terminal.is-hidden {
        display: none;
      }

      .terminal::before {
        content: "";
        position: absolute;
        inset: 0;
        background: repeating-linear-gradient(
          to bottom,
          transparent 0px,
          transparent 3px,
          var(--scan) 4px,
          transparent 5px
        );
        pointer-events: none;
        mix-blend-mode: multiply;
      }

      .screen-frame {
        position: relative;
        padding: 32px 22px 40px;
        border-radius: 18px;
        background:
          linear-gradient(145deg, #d7dad7 0%, #b9bebb 45%, #a8b0ad 100%);
        border: 2px solid #8c948f;
        box-shadow:
          inset 0 0 0 2px rgba(255, 255, 255, 0.35),
          inset 0 -12px 24px rgba(0, 0, 0, 0.25),
          0 18px 40px rgba(0, 0, 0, 0.55);
        min-width: 80ch;
        display: inline-block;
        max-width: 100%;
        box-sizing: border-box;
      }

      .screen-frame::before {
        content: "";
        position: absolute;
        inset: 12px 6px 22px;
        border-radius: 14px;
        background: #1b1f1d;
        box-shadow:
          inset 0 0 0 2px rgba(0, 0, 0, 0.6),
          inset 0 12px 18px rgba(0, 0, 0, 0.85);
      }

      .screen-frame::after {
        content: "IBM";
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 12px;
        letter-spacing: 0.4em;
        color: #4a514c;
      }

      .bezel-controls {
        position: absolute;
        right: 18px;
        bottom: 10px;
        display: flex;
        gap: 8px;
        align-items: center;
        color: #3d433f;
        font-size: 12px;
      }

      .bezel-button {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        border: 1px solid #6f7772;
        background: radial-gradient(circle at 30% 30%, #f2f4f2, #9aa19d 70%);
        box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.35);
      }

      .bezel-led {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: radial-gradient(circle, #7bff6a 0%, #2f7d3b 70%);
        box-shadow: 0 0 6px rgba(123, 255, 106, 0.6);
      }

      .screen-text {
        position: relative;
        z-index: 1;
        margin: 0 auto;
        width: 80ch;
        max-width: 100%;
        --screen-height: calc(80ch * 0.75);
        height: var(--screen-height);
        font-size: 14px;
        box-sizing: content-box;
        line-height: calc(var(--screen-height) / 25);
        white-space: pre;
        overflow: hidden;
        text-shadow: 0 0 8px var(--glow);
        background: #030703;
        border: 1px solid rgba(0, 255, 102, 0.25);
        padding: 4px 6px;
        border-radius: 6px;
        box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.85);
        aspect-ratio: 4 / 3;
      }

      .title {
        text-align: center;
        letter-spacing: 0.2em;
        font-size: clamp(16px, 2.2vw, 22px);
        color: var(--green);
        text-shadow: 0 0 10px var(--glow);
        margin: 0;
      }

      .globe-panel {
        position: relative;
        background: #020704;
        border: 1px solid rgba(0, 255, 102, 0.12);
        box-shadow: 0 0 40px rgba(0, 255, 120, 0.18);
        padding: 12px;
      }

      #globe {
        width: 100%;
        height: min(70vh, 620px);
        display: block;
      }

      #globe canvas {
        touch-action: none;
      }

      .globe-label {
        position: absolute;
        top: 10px;
        left: 14px;
        z-index: 5;
        font-size: 11px;
        letter-spacing: 0.08em;
        color: var(--hud);
        text-transform: uppercase;
        text-shadow: 0 0 8px rgba(0, 255, 120, 0.4);
      }

      .zoom-readout {
        position: absolute;
        top: 10px;
        right: 14px;
        z-index: 5;
        font-size: 11px;
        letter-spacing: 0.08em;
        color: var(--hud);
        text-transform: uppercase;
        text-shadow: 0 0 8px rgba(0, 255, 120, 0.4);
      }

      .latlon-readout {
        position: absolute;
        bottom: 12px;
        right: 14px;
        z-index: 5;
        font-size: 11px;
        letter-spacing: 0.08em;
        color: var(--hud);
        text-transform: uppercase;
        pointer-events: none;
        text-shadow: 0 0 8px rgba(0, 255, 120, 0.4);
      }

      .target-readout {
        position: absolute;
        bottom: 30px;
        right: 14px;
        z-index: 5;
        font-size: 11px;
        letter-spacing: 0.08em;
        color: var(--hud);
        text-transform: uppercase;
        pointer-events: none;
        text-shadow: 0 0 8px rgba(0, 255, 120, 0.4);
      }

      #waterReadout {
        bottom: 102px;
      }

      #poiReadout {
        bottom: 84px;
      }

      #countyReadout {
        bottom: 66px;
      }

      #stateReadout {
        bottom: 48px;
      }

      #countryReadout {
        bottom: 30px;
      }

      .hud-controls {
        position: absolute;
        bottom: 12px;
        left: 14px;
        z-index: 5;
        display: flex;
        flex-direction: column;
        gap: 6px;
      }

      .crosshair-toggle,
      .vector-toggle {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 10px;
        letter-spacing: 0.08em;
        color: var(--hud);
        text-transform: uppercase;
        user-select: none;
      }

      .terrain-toggle {
        background: transparent;
        border: 1px solid rgba(0, 255, 120, 0.35);
        color: var(--hud);
        padding: 5px 8px;
        font-family: inherit;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        font-size: 10px;
        cursor: pointer;
        box-shadow: inset 0 0 10px rgba(0, 255, 120, 0.12);
      }

      .poi-select-wrap {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        font-size: 10px;
        letter-spacing: 0.08em;
        color: var(--hud);
        text-transform: uppercase;
      }

      .poi-select-wrap select {
        background: #06130b;
        color: var(--hud);
        border: 1px solid rgba(0, 255, 120, 0.35);
        font-family: inherit;
        font-size: 11px;
        padding: 4px 6px;
        min-width: 155px;
      }

      .terrain-toggle.is-hidden {
        display: none;
      }

      .crosshair-toggle input,
      .vector-toggle input {
        accent-color: #00ff78;
      }

      .vector-budget {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 10px;
        letter-spacing: 0.08em;
        color: var(--hud);
        text-transform: uppercase;
        user-select: none;
      }

      .vector-budget.is-hidden {
        display: none;
      }

      .vector-budget input[type="range"] {
        width: 180px;
        accent-color: #00ff78;
      }

      @media (min-width: 900px) {
        .vector-budget input[type="range"] {
          width: 280px;
        }
      }

      .crosshair {
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 4;
      }

      .crosshair::before,
      .crosshair::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        background: var(--hud);
        box-shadow: 0 0 8px rgba(0, 255, 120, 0.4);
      }

      .crosshair::before {
        width: 22px;
        height: 1px;
        transform: translate(-50%, -50%);
      }

      .crosshair::after {
        width: 1px;
        height: 22px;
        transform: translate(-50%, -50%);
      }

      .crosshair.is-hidden {
        opacity: 0;
      }

      #vectorCanvas {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        display: none;
        pointer-events: none;
        z-index: 3;
      }

      .terrain-view {
        position: absolute;
        inset: 0;
        display: none;
        z-index: 6;
        background: #010402;
        touch-action: none;
      }

      #terrainCanvas {
        width: 100%;
        height: 100%;
        display: block;
        cursor: grab;
        touch-action: none;
      }

      .terrain-meta {
        position: absolute;
        top: 10px;
        left: 14px;
        right: 14px;
        font-size: 11px;
        letter-spacing: 0.08em;
        color: var(--hud);
        text-transform: uppercase;
        text-shadow: 0 0 8px rgba(0, 255, 120, 0.4);
        pointer-events: none;
      }

      .terrain-nav {
        position: absolute;
        inset: 0;
        z-index: 7;
        pointer-events: none;
      }

      .terrain-nav-btn {
        position: absolute;
        width: 34px;
        height: 34px;
        border: 1px solid rgba(0, 255, 120, 0.45);
        background: rgba(3, 15, 9, 0.7);
        color: rgba(0, 255, 120, 0.9);
        font-family: inherit;
        font-size: 12px;
        letter-spacing: 0.1em;
        cursor: pointer;
        pointer-events: auto;
        box-shadow: inset 0 0 8px rgba(0, 255, 120, 0.15);
      }

      .terrain-nav-btn:active {
        background: rgba(0, 255, 120, 0.18);
      }

      .terrain-nav-up {
        top: 44px;
        left: 50%;
        transform: translateX(-50%);
      }

      .terrain-nav-down {
        bottom: 18px;
        left: 50%;
        transform: translateX(-50%);
      }

      .terrain-nav-left {
        left: 14px;
        top: 50%;
        transform: translateY(-50%);
      }

      .terrain-nav-right {
        right: 14px;
        top: 50%;
        transform: translateY(-50%);
      }

      .globe-panel.vector-active .globe-label,
      .globe-panel.vector-active .zoom-readout,
      .globe-panel.vector-active .latlon-readout,
      .globe-panel.vector-active .target-readout,
      .globe-panel.vector-active .crosshair,
      .globe-panel.vector-active .hud-controls {
        opacity: 0;
      }

      .globe-panel.terrain-active .globe-label,
      .globe-panel.terrain-active .zoom-readout,
      .globe-panel.terrain-active .latlon-readout,
      .globe-panel.terrain-active .target-readout,
      .globe-panel.terrain-active .crosshair,
      .globe-panel.terrain-active .hud-controls,
      .globe-panel.terrain-active #vectorCanvas {
        display: none;
      }

      .globe-panel.terrain-active #globe {
        visibility: hidden;
      }

      .globe-panel.terrain-active .terrain-view {
        display: block;
      }

      .vector-panel {
        display: flex;
        justify-content: center;
        margin-top: -8px;
        gap: 14px;
        align-items: center;
        flex-wrap: wrap;
      }

      .vector-exit {
        display: none;
        background: transparent;
        border: 1px solid rgba(0, 255, 120, 0.35);
        color: var(--hud);
        padding: 6px 10px;
        font-family: inherit;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        font-size: 11px;
        cursor: pointer;
        box-shadow: inset 0 0 10px rgba(0, 255, 120, 0.12);
      }

      .vector-exit.is-visible {
        display: inline-block;
      }

      .terrain-panel {
        display: flex;
        align-items: center;
        gap: 12px;
      }

      .terrain-panel.is-hidden {
        display: none;
      }

      .terrain-size {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 10px;
        letter-spacing: 0.08em;
        color: var(--hud);
        text-transform: uppercase;
      }

      .terrain-size select {
        background: #06130b;
        color: var(--hud);
        border: 1px solid rgba(0, 255, 120, 0.35);
        font-family: inherit;
        font-size: 11px;
        padding: 4px 6px;
      }

      .terrain-exit {
        background: transparent;
        border: 1px solid rgba(0, 255, 120, 0.35);
        color: var(--hud);
        padding: 6px 10px;
        font-family: inherit;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        font-size: 11px;
        cursor: pointer;
        box-shadow: inset 0 0 10px rgba(0, 255, 120, 0.12);
      }

      @media (max-width: 900px) {
        .screen-text {
          width: 100%;
          height: var(--screen-height);
          line-height: calc(var(--screen-height) / 25);
        }
      }

      @media (max-width: 700px) {
        .terminal {
          padding: 0 4px;
        }

        .screen-frame {
          padding: 4px 3px 8px;
          border-radius: 12px;
          min-width: 0;
          width: max-content;
          max-width: 100%;
        }

        .screen-frame::before {
          inset: 6px 4px 12px;
          border-radius: 10px;
        }

        .screen-text {
          padding: 1px 1px;
          font-size: clamp(8.5px, calc((100vw - 24px) / 80), 11.5px);
          --screen-height: calc(80ch * 0.75);
          height: var(--screen-height);
          line-height: calc(var(--screen-height) / 25);
        }
      }

      @media (max-width: 420px) {
        .terminal {
          padding: 0 4px;
        }

        .screen-frame {
          padding: 2px 1px 5px;
          border-radius: 10px;
          border-width: 1px;
          width: 100%;
          max-width: 100%;
        }

        .screen-frame::before {
          inset: 4px 2px 8px;
          border-radius: 9px;
        }

        .screen-text {
          width: calc(100% - 4px);
          font-size: clamp(8px, calc((100vw - 40px) / 80), 11px);
          --screen-height: calc(80ch * 0.75);
          height: var(--screen-height);
          line-height: calc(var(--screen-height) / 25);
        }
        .bezel-controls {
          right: 10px;
          bottom: 8px;
          gap: 6px;
        }
      }