* {
      font-family: monospace;
      box-sizing: border-box;
      user-select: none;
      -webkit-user-select: none;
    }
    body {
      background: radial-gradient(circle, #094781 0%, #07345E 80%);
      margin: 0;
      padding: 0;
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
    }
    .display {
      position: relative;
      background-color: #181818;
      width: 100vw;
      height: 100vh;
      height: 100dvh;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    #game-container {
      /* Fixed and centered so the unscaled 980px box never widens the page on phones */
      position: fixed;
      left: 50%;
      top: 50%;
      margin: -310px 0 0 -490px;
      width: 980px;
      height: 620px;
      transform-origin: center center;
      animation: fadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }
    @keyframes fadeIn {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }
    #screen {
      position: absolute;
      top: 10px;
      left: 10px;
      background-color: #181818;
      width: 960px;
      height: 600px;
      padding: 8px;
      font-size: 11px;
      color: white;
    }
    #terminal {
      position: absolute;
      top: 10px;
      left: 10px;
      background-color: #181818;
      width: 960px;
      height: 600px;
      padding: 8px;
      font-size: 11px;
      line-height: 15px;
      color: white;
      overflow: hidden;
    }
    #cursor::before {
      content: '\0275A';
      display: inline-block;
      color: white;
      animation: cursor 1s step-end infinite;
    }
    @keyframes cursor {
      from, to {
        color: white;
      }
      50% {
        color: #181818;
      }
    }
    #info {
      position: absolute;
      width: 150px;
      top: 34px;
      right: 8px;
      text-align: right;
      font-size: 11px;
      background-color: rgba(24,24,24,0.8);
    }
    .decrypt {
      animation: decrypt 2s forwards;
    }
    @keyframes decrypt {
      from {
        color: #0073b1;
      }
      to {
        color: white;
      }
    }
    #email {
      padding-left: 10px;
      width: 320px;
      white-space: normal;
    }
    .hide {
      display: none !important;
    }
    .fade-out {
      animation: fade-out 0.5s forwards;
    }
    @keyframes fade-out {
      to {
        opacity: 0;
        pointer-events: none;
      }
    }
    #crash {
      position: absolute;
      top: 10px;
      left: 10px;
      width: 960px;
      height: 600px;
      padding: 8px;
      overflow: hidden;
      color: white;
      letter-spacing: 3px;
      line-height: 22px;
      word-break: break-all;
      white-space: pre-wrap;
      opacity: 0.5;
      animation: crashing 0.5s linear;
    }
    @keyframes crashing {
      from {
        height: 0;
      }
      to {
        height: 95%;
      }
    }
    #offline {
      position: absolute;
      top: 10px;
      left: 10px;
      width: 960px;
      height: 600px;
      padding: 8px;
      animation: offline-fade 0.3s;
    }
    #offline-banner {
      position: absolute;
      display: inline-block;
      border: 8px solid rgba(255,0,0,0.5);
      border-radius: 16px;
      font-size: 60px;
      font-weight: 700;
      padding: 20px 20px 20px 40px;
      color: white;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      letter-spacing: 32px;
    }
    #offline-banner::before {
      content: '';
      position: absolute;
      top: 20px;
      left: 20px;
      background-color: rgba(255,0,0,0.3);
      width: 550px;
      height: 125px;
      z-index: -1;
    }
    .failed {
      border-color: #F47E1B !important;
    }
    .failed:hover {
      color: #F47E1B !important;
    }
    .failed::before {
      background-color: rgba(244,126,27,0.3) !important;
    }
    #continue {
      position: absolute;
      top: 410px;
      left: 640px;
      color: white;
      font-size: 16px;
      line-height: 20px;
      cursor: pointer;
      padding: 8px;
      background-color: #181818;
      border-radius: 5px;
      border: 4px solid rgba(255,0,0,0.5);
    }
    #continue:hover {
      color: #F00;
    }
    @keyframes offline-fade {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }
    #console {
      position: absolute;
      top: 530px;
      height: 60px;
      width: 944px;
      overflow: hidden;
      color: white;
      font-size: 12px;
    }
    #retry {
      position: absolute;
      top: 540px;
      right: 10px;
      color: white;
      font-size: 20px;
      cursor: pointer;
      display: flex;
      align-items: center;
    }
    #retry-text {
      font-size: 12px;
      padding-right: 8px;
    }
    #quit {
      position: absolute;
      top: 570px;
      right: 10px;
      color: white;
      font-size: 20px;
      cursor: pointer;
      display: flex;
      align-items: center;
    }
    #quit-text {
      font-size: 12px;
      padding-right: 8px;
    }

    .title {
      letter-spacing: 3px;
      background-image: -webkit-linear-gradient(left, #094781 0%, #181818 40%);
      border-radius: 5px;
      padding: 4px 0 4px 8px;
    }
    .banner {
      background-image: -webkit-linear-gradient(left, #094781 0%, #181818 60%);
      border-radius: 5px;
      padding: 4px 0 4px 8px;
      font-weight: 700;
    }
    #mesh {
      position: absolute;
      top: 30px;
      left: 34px;
      width: 926px;
      height: 510px;
    }
    #mesh circle, #mesh line {
      cursor: pointer;
    }
    .mesh-id {
      position: absolute;
      top: 12px;
      left: 370px;
      width: 230px;
      text-align: center;
    }
    .spinner {
      display: inline-block;
      animation: spinner .8s ease infinite;
    }
    @keyframes spinner {
      to {
        transform: rotate(360deg);
      }
    }
    .blink {
      animation: blink 2s ease-in-out infinite alternate
    }
    @keyframes blink {
      to {
        opacity: 0.6;
      }
    }
    .health {
      position: absolute;
      top: 12px;
      right: 12px;
    }
    #coins {
      position: absolute;
      top: 30px;
      right: 12px;
    }
    #data {
      position: absolute;
      top: 11px;
      right: 175px;
    }
    #toolbar {
      position: absolute;
      top: 34px;
      left: 0px;
      width: 32px;
      height: 400px;
      font-size: 28px;
      line-height: 42px;
      text-align: center;
    }
    [data-tool] {
      border-left: 2px solid transparent;
      cursor: pointer;
    }
    [data-tool] > div {
      font-size: 10px;
      line-height: 10px;
      padding-bottom: 10px;
    }
    [data-tool="info"] {
      padding-top: 10px;
      font-size: 20px;
      font-weight: 700;
      padding-left: 6px;
    }
    [data-tool="info"]:hover, [data-tool="info"].selected {
      border-left: 2px solid #FFF;
    }
    [data-tool="crash"]:hover, [data-tool="crash"].selected {
      border-left: 2px solid #D34E53;
    }
    [data-tool="cut"]:hover, [data-tool="cut"].selected {
      border-left: 2px solid #F89100;
    }
    [data-tool="slow"]:hover, [data-tool="slow"].selected {
      border-left: 2px solid #FCC700;
    }
    [data-tool="corrupt"] {
      font-size: 20px;
    }
    [data-tool="corrupt"]:hover, [data-tool="corrupt"].selected {
      border-left: 2px solid #535C8E;
    }
    [data-tool="reroute"]:hover, [data-tool="reroute"].selected {
      border-left: 2px solid #9E379F;
    }
    [data-tool="intercept"] {
      font-size: 26px;
    }
    [data-tool="intercept"]:hover, [data-tool="intercept"].selected {
      border-left: 2px solid #1375F7;
    }
    [data-tool="mine"] {
      font-size: 26px;
    }
    [data-tool="mine"]:hover, [data-tool="mine"].selected {
      border-left: 2px solid #080;
    }
    .node {
      fill: #5691DC;
    }
    .node:hover {
      stroke: #5691DC;
      stroke-width: 7px;
    }
    .node-effect {
      stroke: transparent;
      stroke-width: 2px;
      fill: transparent;
      pointer-events: none;
    }
    .node:hover + .node-effect {
      stroke-width: 4px;
      stroke-dasharray: none;
      animation: none;
    }
    .node-effect-animate {
      stroke-dasharray: 5 2;
      animation: progress 3s linear infinite reverse;
    }
    .node-effect-corrupt {
      stroke: #535C8E;
    }
    .node-effect-reroute {
      stroke: #9E379F;
    }
    .node-effect-intercept {
      stroke: #1375F7;
    }
    .node-effect-mine {
      stroke: #080;
    }
    .node-effect-firewall {
      stroke: #FFF;
    }
    .node-packet {
      fill: #8BBF50;
    }
    .node-packet:hover {
      stroke: #8BBF50 !important;
    }
    .node-offline {
      fill: #D34E53 !important;
    }
    .node-offline:hover {
      stroke: #D34E53 !important;
    }
    .edge-interact {
      stroke: transparent;
      stroke-width: 4px;
    }
    .edge-interact:hover {
      stroke: rgba(153,153,153,0.3);
    }
    .edge-empty {
      stroke: rgba(255, 255, 255, 0.2);
    }
    .edge-forward {
      stroke: transparent;
    }
    .edge-reverse {
      stroke: transparent;
    }
    .edge-slow {
      stroke: #FCC700 !important;
    }
    .edge-cut {
      stroke: #D34E53 !important;
    }
    .edge-empty-slow {
      stroke: rgba(252, 199, 0, 0.3);
    }
    .edge-offline-empty {
      stroke: #D34E53;
    }
    .edge-packet-empty {
      stroke: transparent !important;
    }
    .edge-packet-forward {
      stroke: #8BBF50;
      stroke-dasharray: 5;
      animation: progress 3s linear infinite;
    }
    .edge-packet-reverse {
      stroke: #3B6D3D;
      stroke-dasharray: 5;
      animation: progress 3s linear infinite reverse;
    }
    @keyframes progress {
      to {
        stroke-dashoffset: 100;
      }
    }
    .github-link {
      position: fixed;
      bottom: 20px;
      right: 20px;
      width: 40px;
      height: 40px;
      background-color: rgba(24, 24, 24, 0.8);
      border: 1px solid #333;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(4px);
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      z-index: 9999;
      text-decoration: none;
    }
    .github-link:hover {
      background-color: rgba(35, 35, 35, 0.95);
      border-color: #4f9ED8;
      transform: scale(1.1) translateY(-2px);
      box-shadow: 0 6px 16px rgba(79, 158, 216, 0.3);
    }
    .github-icon {
      width: 20px;
      height: 20px;
      filter: invert(0.5);
      transition: filter 0.3s ease;
    }
    .github-link:hover .github-icon {
      filter: invert(1);
    }

    .logo {
      color: #005b96;
      line-height: 8px;
      letter-spacing: -1px;
    }

    /* Sound toggle */
    #sound {
      position: fixed;
      top: max(8px, env(safe-area-inset-top));
      right: max(8px, env(safe-area-inset-right));
      width: 40px;
      height: 40px;
      border-radius: 8px;
      border: 1px solid #333;
      background-color: rgba(24, 24, 24, 0.8);
      color: #4f9ED8;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 9999;
    }
    #sound svg {
      width: 20px;
      height: 20px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    #sound .slash,
    #sound.muted .wave {
      display: none;
    }
    #sound.muted .slash {
      display: inline;
    }
    #sound.muted {
      color: #D34E53;
    }
    #sound:focus-visible, #touchbar button:focus-visible, #cmd-input:focus-visible {
      outline: 2px solid #4f9ED8;
      outline-offset: 2px;
    }

    /* Touch controls under the terminal */
    #touchbar {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 9000;
      display: flex;
      flex-direction: column;
      gap: 6px;
      padding: 8px max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
      background-color: #101010;
      border-top: 1px solid #333;
    }
    #touchbar.idle,
    body.mode-mesh #touchbar {
      display: none;
    }
    #quick {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    #touchbar button {
      min-height: 44px;
      min-width: 44px;
      padding: 0 14px;
      border-radius: 6px;
      border: 1px solid #4B86B4;
      background-color: #0b2740;
      color: white;
      font-size: 14px;
      cursor: pointer;
    }
    #cmd-form {
      display: flex;
      gap: 6px;
      align-items: center;
    }
    #cmd-form .prompt {
      color: #4B86B4;
      font-weight: 700;
      font-size: 13px;
    }
    #cmd-input {
      flex: 1;
      min-width: 0;
      min-height: 44px;
      padding: 0 10px;
      border-radius: 6px;
      border: 1px solid #333;
      background-color: #181818;
      color: white;
      font-size: 16px;
      user-select: text;
      -webkit-user-select: text;
    }
    #continue-btn {
      width: 100%;
    }

    /* Mesh view on touch screens: bigger hit areas for nodes and connections */
    @media (pointer: coarse) {
      #mesh {
        touch-action: none;
      }
      #mesh .node {
        stroke: transparent;
        stroke-width: 14px;
      }
      #mesh .edge-interact {
        stroke-width: 14px;
      }
    }

    /* Phones: the terminal fills the screen above the touch controls */
    body.phone:not(.mode-mesh) #game-container {
      margin: 0;
      top: 0;
      left: 0;
      right: 0;
      bottom: var(--touchbar, 0px);
      width: auto;
      height: auto;
    }
    body.phone:not(.mode-mesh) #terminal {
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      padding: max(60px, env(safe-area-inset-top)) 10px 10px;
      font-size: 12px;
      line-height: 1.4;
      white-space: pre-wrap;
      word-break: break-word;
      overflow-y: auto;
    }
    body.phone:not(.mode-mesh) .logo {
      font-size: min(11px, 1.9vw);
      line-height: 0.75em;
      white-space: pre;
    }
    body.phone .github-link {
      display: none;
    }

    /* Phones: the email wraps to the screen */
    body.phone:not(.mode-mesh) #email {
      width: auto;
      max-width: 100%;
      padding-left: 6px;
    }

    /* ---------- Phones: mesh view at real size ----------
       script.js sets --mesh-w / --mesh-h (the screen in the view's orientation)
       and only rotates the box when the phone is upright. Layout:
       top bar (mesh, health, coins), tool grid on the left, console and
       restart / quit along the bottom, the mesh in the rest. The corner under
       the sound button (top-right of the screen) is kept clear. */
    body.phone.mode-mesh {
      overscroll-behavior: none;
    }
    body.phone.mode-mesh #game-container {
      width: var(--mesh-w);
      height: var(--mesh-h);
      margin: calc(var(--mesh-h) / -2) 0 0 calc(var(--mesh-w) / -2);
    }
    body.phone.mode-mesh #screen {
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      padding: 0;
      font-size: 12px;
    }
    body.phone.mode-mesh .title {
      display: none;
    }
    body.phone.mode-mesh .mesh-id {
      top: 6px;
      left: 56px;
      width: auto;
      text-align: left;
      white-space: nowrap;
    }
    body.phone.mode-mesh .health {
      top: 6px;
      right: 56px;
    }
    body.phone.mode-mesh #coins {
      top: 22px;
      right: 56px;
    }
    body.phone.mode-mesh #data {
      top: 22px;
      left: 56px;
      right: auto;
    }
    body.phone.mode-mesh #toolbar {
      top: 52px;
      left: max(4px, env(safe-area-inset-left));
      width: 96px;
      height: auto;
      display: grid;
      grid-template-columns: repeat(2, 46px);
      grid-auto-rows: 50px;
      gap: 2px;
      font-size: 24px;
      line-height: 30px;
    }
    body.phone.mode-mesh [data-tool] {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 0;
      border-left: 0;
      border: 2px solid transparent;
      border-radius: 6px;
      background-color: rgba(255, 255, 255, 0.04);
    }
    body.phone.mode-mesh [data-tool="info"],
    body.phone.mode-mesh [data-tool="corrupt"] {
      font-size: 20px;
    }
    body.phone.mode-mesh [data-tool] > div {
      font-size: 12px;
      line-height: 14px;
      padding: 0;
    }
    body.phone.mode-mesh [data-tool="info"].selected { border-color: #FFF; }
    body.phone.mode-mesh [data-tool="crash"].selected { border-color: #D34E53; }
    body.phone.mode-mesh [data-tool="cut"].selected { border-color: #F89100; }
    body.phone.mode-mesh [data-tool="slow"].selected { border-color: #FCC700; }
    body.phone.mode-mesh [data-tool="corrupt"].selected { border-color: #535C8E; }
    body.phone.mode-mesh [data-tool="reroute"].selected { border-color: #9E379F; }
    body.phone.mode-mesh [data-tool="intercept"].selected { border-color: #1375F7; }
    body.phone.mode-mesh [data-tool="mine"].selected { border-color: #080; }
    body.phone.mode-mesh #mesh {
      top: 40px;
      left: 104px;
      width: calc(100% - 112px);
      height: calc(100% - 40px - 52px);
    }
    body.phone.mode-mesh #info {
      top: 52px;
      right: 8px;
      width: 160px;
      font-size: 12px;
      white-space: pre-wrap;
      pointer-events: none; /* never blocks a tap on the node under it */
    }
    body.phone.mode-mesh #console {
      top: auto;
      bottom: max(4px, env(safe-area-inset-bottom));
      left: 104px;
      width: auto;
      right: 108px;
      height: 44px;
      font-size: 12px;
      line-height: 14px;
      white-space: pre-wrap;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
    }
    body.phone.mode-mesh #retry,
    body.phone.mode-mesh #quit {
      top: auto;
      bottom: max(4px, env(safe-area-inset-bottom));
      min-width: 48px;
      min-height: 44px;
      justify-content: center;
      font-size: 22px;
      border: 1px solid #333;
      border-radius: 6px;
      background-color: rgba(24, 24, 24, 0.9);
    }
    body.phone.mode-mesh #retry {
      right: 56px;
    }
    body.phone.mode-mesh #quit {
      right: 4px;
    }
    body.phone.mode-mesh #retry-text:not(:empty),
    body.phone.mode-mesh #quit-text:not(:empty) {
      padding: 0 6px;
    }
    /* The "You sure?" label sits above its button instead of pushing it */
    body.phone.mode-mesh #retry-text,
    body.phone.mode-mesh #quit-text {
      position: absolute;
      right: 0;
      bottom: 100%;
      margin-bottom: 4px;
      white-space: nowrap;
      background-color: #181818;
      border-radius: 4px;
    }
    body.phone.mode-mesh #crash,
    body.phone.mode-mesh #offline {
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    body.phone.mode-mesh #offline-banner {
      font-size: 34px;
      letter-spacing: 14px;
      padding: 12px 6px 12px 20px;
      border-width: 5px;
    }
    body.phone.mode-mesh #offline-banner::before {
      top: 10px;
      left: 10px;
      width: calc(100% - 20px);
      height: calc(100% - 20px);
    }
    body.phone.mode-mesh #continue {
      top: auto;
      left: auto;
      right: 12px;
      bottom: max(12px, env(safe-area-inset-bottom));
      min-height: 44px;
      display: flex;
      align-items: center;
    }