:root{
    --void:#070b16;
    --night:#101a34;
    --smoke:#5c6270;
    --smoke-dim:#3a3f4b;
    --ember:#ff6a2b;
    --ember-dim:#a83f18;
    --flare:#fff3d6;
    --static:#e7ebf2;
    --mx:50%;
    --my:50%;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html,body{height:100%;}
  body{
    background:var(--void);
    color:var(--static);
    font-family:'JetBrains Mono', monospace;
    overflow:hidden;
    position:relative;
  }
  ::selection{background:var(--ember);color:var(--void);}

  body::before{
    content:'';
    position:fixed;
    inset:0;
    z-index:0;
    pointer-events:none;
    background:
      radial-gradient(ellipse at 50% 30%, rgba(16,26,52,0.4) 0%, rgba(7,11,22,0.9) 70%),
      radial-gradient(ellipse at 50% 100%, rgba(90,60,30,0.08) 0%, transparent 60%);
  }

  #noise-canvas{
    position:fixed;
    top:0;left:0;
    width:100%;height:100%;
    z-index:1;
    opacity:0.028;
    pointer-events:none;
    mix-blend-mode:screen;
  }
  #noise-canvas.grain-localized{
    /* on the Dark page, grain only lives inside the flashlight's reach —
       raised above the view content and masked to the same circle as the beam */
    z-index:15;
    opacity:0.11;
    -webkit-mask-image:radial-gradient(circle 150px at var(--mx) var(--my), black 0%, black 80%, transparent 100%);
    mask-image:radial-gradient(circle 150px at var(--mx) var(--my), black 0%, black 80%, transparent 100%);
  }

  #cursor-glow{
    position:fixed;
    top:0;left:0;
    width:420px;height:420px;
    margin-left:-210px;
    margin-top:-210px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(255,106,43,0.22) 0%, rgba(255,106,43,0.07) 35%, transparent 70%);
    mix-blend-mode:screen;
    pointer-events:none;
    z-index:3;
    transform:translate(var(--cx,50vw), var(--cy,50vh));
    transition:opacity 0.4s ease;
  }

  #event-flash{
    position:fixed;
    inset:0;
    z-index:80;
    pointer-events:none;
  }
  #event-flash span{
    position:absolute;
    color:var(--flare);
    text-shadow:0.04em 0 0 var(--ember), -0.04em 0 0 #2b4fff;
    text-transform:uppercase;
    opacity:0;
    white-space:nowrap;
  }
  #event-flash span.mode-pulse{ animation:flashPulse 1.7s ease-in-out; }
  #event-flash span.mode-blink{ animation:flashBlink 1.1s steps(1); }
  @keyframes flashPulse{
    0%{opacity:0;} 12%{opacity:1;} 32%{opacity:0.25;} 52%{opacity:1;} 78%{opacity:0.15;} 100%{opacity:0;}
  }
  @keyframes flashBlink{
    0%,8%,18%,28%,38%,48%,58%,68%,78%,88%{opacity:1;}
    4%,14%,24%,34%,44%,54%,64%,74%,84%,94%,100%{opacity:0.08;}
  }
  #flicker-overlay{
    position:fixed;
    inset:0;
    z-index:78;
    pointer-events:none;
    background:#000;
    opacity:0;
  }
  #screen-invert{
    position:fixed;
    inset:0;
    z-index:79;
    pointer-events:none;
    background:var(--static);
    mix-blend-mode:difference;
    opacity:0;
  }

  #rec-hud{
    position:fixed;
    top:1.4rem;
    right:1.6rem;
    z-index:70;
    font-size:0.68rem;
    letter-spacing:0.15em;
    color:var(--static);
    opacity:0.4;
    display:flex;
    align-items:center;
    gap:0.5rem;
    text-align:right;
    cursor:default;
    user-select:none;
  }
  #rec-hud .rec-dot{
    width:6px;height:6px;
    border-radius:50%;
    background:var(--ember);
    box-shadow:0 0 6px var(--ember);
    animation:recpulse 1.6s infinite;
  }
  @keyframes recpulse{0%,100%{opacity:1;}50%{opacity:0.25;}}

  /* ---------- VIEW SYSTEM ---------- */
  .view{
    position:fixed;
    inset:0;
    z-index:5;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    overflow-y:auto;
    transition:opacity 0.7s ease;
  }
  .view.active{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    z-index:10;
  }
  .view-inner{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:8vh 8vw;
    position:relative;
    z-index:2;
  }
  .back-link{
    position:fixed;
    bottom:1.6rem;
    left:1.8rem;
    font-size:0.7rem;
    letter-spacing:0.15em;
    color:var(--ember);
    opacity:0.75;
    text-decoration:none;
    z-index:20;
    padding:0.55rem 1rem;
    border:1px solid rgba(255,106,43,0.4);
    border-radius:2px;
    background:rgba(8,10,16,0.6);
    backdrop-filter:blur(2px);
    transition:opacity 0.2s, border-color 0.2s, background 0.2s;
  }
  .back-link:hover{
    opacity:1;
    border-color:rgba(255,106,43,0.8);
    background:rgba(255,106,43,0.1);
  }

  /* ---------- HERO ---------- */
  .eyebrow{
    margin-bottom:2rem;
    opacity:0.85;
    display:inline-block;
    width:fit-content;
  }
  .eyebrow.beacon{ animation:eyebrowPulse 2.6s ease-in-out infinite; }
  @keyframes eyebrowPulse{0%,100%{opacity:0.75;}50%{opacity:1;}}
  .eyebrow-mark{
    font-family:'Archivo Black', sans-serif;
    font-size:clamp(1.2rem, 3.2vw, 1.9rem);
    letter-spacing:0.02em;
    text-transform:uppercase;
    color:var(--static);
    margin-bottom:0.5rem;
  }
  .eyebrow-desc{
    font-size:0.75rem;
    letter-spacing:0.35em;
    text-transform:uppercase;
    color:var(--ember);
    white-space:nowrap;
  }
  .eyebrow-enter-link{
    display:inline-block;
    color:var(--flare);
    text-decoration:none;
    cursor:pointer;
    text-shadow:0 0 10px rgba(255,106,43,0.6);
    animation:logArrowNudge 1.7s ease-in-out infinite;
  }
  .eyebrow-enter-link:hover{ text-decoration:underline; }
  .transmission-word{
    color:var(--flare);
    text-shadow:0 0 10px rgba(255,106,43,0.75);
    animation:transmissionFlicker 3.4s infinite;
  }
  @keyframes transmissionFlicker{
    0%,90%,100%{opacity:1;}
    92%{opacity:0.25;}
    94%{opacity:1;}
    96%{opacity:0.35;}
  }
  .glitch-title{
    font-family:'Archivo Black', sans-serif;
    font-size:clamp(3rem, 13vw, 10rem);
    line-height:0.9;
    letter-spacing:-0.02em;
    position:relative;
    color:var(--static);
    user-select:none;
  }
  .glitch-title .gline{display:block;}
  .ch{
    display:inline-block;
    text-shadow:
      0.03em 0 0 rgba(255,106,43,0.55),
      -0.03em 0 0 rgba(43,79,255,0.45);
  }
  .glitch-title.tear{ animation:tear 0.16s steps(2,end) 1; }
  @keyframes tear{
    0%{clip-path:inset(0 0 0 0); transform:translate(0,0);}
    20%{clip-path:inset(10% 0 60% 0); transform:translate(-6px,0);}
    40%{clip-path:inset(60% 0 5% 0); transform:translate(6px,0);}
    60%{clip-path:inset(30% 0 40% 0); transform:translate(-3px,0);}
    100%{clip-path:inset(0 0 0 0); transform:translate(0,0);}
  }
  .glitch-title.font-swap .ch{
    font-family:'JetBrains Mono', monospace;
    font-weight:700;
    transform:skewX(-6deg);
  }
  .subtitle{
    margin-top:2.5rem;
    max-width:24ch;
    font-size:1.6rem;
    line-height:1.4;
    letter-spacing:0.01em;
    color:var(--static);
    opacity:0.75;
    text-transform:lowercase;
  }
  .enter-cue{
    margin-top:5rem;
    display:inline-flex;
    align-items:center;
    gap:0.8rem;
    background:none;
    border:none;
    color:var(--static);
    font-family:'JetBrains Mono', monospace;
    font-size:0.75rem;
    letter-spacing:0.25em;
    text-transform:uppercase;
    opacity:0.55;
    cursor:pointer;
    padding:0.4rem 0;
  }
  .enter-cue:hover{opacity:1;color:var(--ember);}
  .enter-cue .arrow{
    display:inline-block;
    animation:bob 1.8s ease-in-out infinite;
  }
  @keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(6px);}}

  /* ---------- TRANSMISSION LOG ---------- */
  #view-log .view-inner{ align-items:center; }
  .log-head{
    font-size:0.75rem;
    letter-spacing:0.35em;
    text-transform:uppercase;
    color:var(--ember);
    margin-bottom:3.5rem;
    text-align:center;
  }
  .log-list{
    display:flex;
    flex-direction:column;
    width:100%;
    max-width:460px;
  }
  .log-entry{
    display:flex;
    align-items:center;
    gap:1.6rem;
    width:100%;
    padding:1.5rem 0;
    border-bottom:1px solid rgba(231,235,242,0.08);
    transition:padding-left 0.3s ease, opacity 0.3s ease;
    opacity:0.65;
    position:relative;
  }
  .log-entry:hover{padding-left:1rem;opacity:1;}
  .log-entry.clickable{cursor:pointer;}
  .log-entry.placeholder{opacity:0.3;}
  .log-entry.placeholder:hover{padding-left:0;opacity:0.3;}
  .log-index{color:var(--smoke);font-size:0.85rem;min-width:2ch;}
  .log-title{font-size:1.05rem;color:var(--static);letter-spacing:0.08em;text-transform:uppercase;}
  .log-status{
    margin-left:auto;
    font-size:0.7rem;
    letter-spacing:0.15em;
    text-transform:uppercase;
    color:var(--static);
    opacity:0.5;
  }
  .log-entry.live{opacity:0.92;}
  .log-entry.live .log-status{color:var(--ember);opacity:1;}
  .log-entry.sealed{opacity:0.4;}
  .log-entry.final-transmission{opacity:0.6;}
  .log-entry.final-transmission .log-title{color:var(--ember); letter-spacing:0.1em;}
  .log-entry.final-transmission .log-index{color:var(--ember); opacity:0.7;}
  .log-status.blink-incoming{
    color:var(--flare);
    text-shadow:0 0 10px rgba(255,106,43,0.75);
    animation:transmissionFlicker 3.4s infinite;
    opacity:1;
  }
  /* live entry doubles as the only real "door" in the log — it needs to read
     as enterable at a glance, on touch devices too, not just on :hover */
  .log-entry.live::before{
    content:'';
    position:absolute;
    left:-14px; top:12%; bottom:12%;
    width:2px;
    background:var(--ember);
    box-shadow:0 0 10px 1px rgba(255,106,43,0.7);
    animation:logEdgePulse 2.6s ease-in-out infinite;
  }
  @keyframes logEdgePulse{
    0%,100%{opacity:0.15;}
    50%{opacity:0.9;}
  }
  .log-hint{
    display:block;
    font-size:0.6rem;
    letter-spacing:0.25em;
    text-transform:uppercase;
    color:var(--ember);
    opacity:0.7;
    margin-top:0.35rem;
    animation:transmissionFlicker 3.4s infinite;
  }
  .log-enter-arrow{
    color:var(--ember);
    font-size:1.1rem;
    line-height:1;
    text-shadow:0 0 8px rgba(255,106,43,0.65);
    animation:logArrowNudge 1.7s ease-in-out infinite;
  }
  @keyframes logArrowNudge{
    0%,100%{transform:translateX(0); opacity:0.45;}
    50%{transform:translateX(6px); opacity:1;}
  }

  /* ---------- FREQUENCY BLOOM ---------- */
  #view-frequency .view-inner{ padding:0; min-height:100vh; }
  .freq-window{
    position:fixed;
    inset:0;
    width:100vw;
    height:100vh;
  }
  .freq-labels{
    position:absolute;
    top:6vh;
    left:7vw;
    z-index:2;
  }
  .freq-head{
    font-size:0.75rem;
    letter-spacing:0.35em;
    text-transform:uppercase;
    color:var(--ember);
    margin-bottom:0.6rem;
  }
  .freq-tag{
    font-size:0.68rem;
    letter-spacing:0.2em;
    text-transform:uppercase;
    color:var(--smoke);
  }
  #freq-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0.9;}
  #freq-canvas.shake{ animation:freqShake 0.16s linear; }
  @keyframes freqShake{
    0%{transform:translate(0,0);}
    20%{transform:translate(-4px,3px);}
    40%{transform:translate(4px,-3px);}
    60%{transform:translate(-3px,-4px);}
    80%{transform:translate(3px,4px);}
    100%{transform:translate(0,0);}
  }
  .viewport-frame{
    position:absolute;
    inset:0;
    pointer-events:none;
    box-shadow:
      inset 0 0 0 14px #262b36,
      inset 0 0 0 19px #454c5c,
      inset 0 0 0 21px #1a1d24,
      inset 0 0 90px rgba(0,0,0,0.65);
  }
  .ignition{
    position:absolute;
    bottom:6vh;
    left:50%;
    transform:translateX(-50%);
    width:100px;height:100px;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:2;
    user-select:none;
    -webkit-user-select:none;
    -webkit-touch-callout:none;
  }
  .ignition-ring{
    position:absolute;
    inset:0;
    width:100%;height:100%;
    transform:rotate(-90deg);
    pointer-events:none;
  }
  .ignition-ring .ring-track{
    fill:none;
    stroke:rgba(231,235,242,0.15);
    stroke-width:2.5;
  }
  .ignition-ring .ring-fill{
    fill:none;
    stroke:var(--ember);
    stroke-width:2.5;
    stroke-linecap:round;
    filter:drop-shadow(0 0 4px rgba(255,106,43,0.7));
  }
  .ignition-burst{
    position:absolute;
    inset:-6px;
    border-radius:50%;
    border:2px solid var(--ember);
    opacity:0.9;
    animation:burstPulse 0.7s ease-out forwards;
    pointer-events:none;
  }
  @keyframes burstPulse{
    0%{transform:scale(0.7); opacity:0.9;}
    100%{transform:scale(2.4); opacity:0;}
  }
  .ignition-label{
    position:absolute;
    bottom:-2.1rem;
    left:50%;
    transform:translateX(-50%);
    font-size:0.74rem;
    font-weight:500;
    letter-spacing:0.22em;
    text-transform:uppercase;
    color:var(--static);
    white-space:nowrap;
    opacity:0.9;
    text-shadow:0 0 10px rgba(255,106,43,0.4);
    transition:opacity 0.3s, color 0.3s;
  }
  .ignition:active .ignition-label,
  .ignition.charging .ignition-label{ color:var(--ember); opacity:1; }
  .ignition.is-playing .ignition-label{ color:var(--ember); opacity:0.95; }

  /* transmission ending — a brief glitchy "breakdown" instead of a clean stop,
     so it reads as the signal giving out rather than a normal pause */
  @keyframes ignitionBreakdown{
    0%{ transform:translateX(-50%) translate(0,0); opacity:1; }
    10%{ transform:translateX(-50%) translate(-3px,2px); opacity:0.5; }
    22%{ transform:translateX(-50%) translate(2px,-2px); opacity:1; }
    34%{ transform:translateX(-50%) translate(-2px,0); opacity:0.35; }
    46%{ transform:translateX(-50%) translate(3px,1px); opacity:1; }
    58%{ transform:translateX(-50%) translate(-4px,-1px); opacity:0.3; }
    70%{ transform:translateX(-50%) translate(2px,2px); opacity:1; }
    85%{ transform:translateX(-50%) translate(-1px,0); opacity:0.6; }
    100%{ transform:translateX(-50%) translate(0,0); opacity:1; }
  }
  .ignition.breakdown{ animation:ignitionBreakdown 0.6s steps(2,end); }
  .ignition.breakdown .ring-fill{
    stroke:var(--ember);
    filter:drop-shadow(0 0 8px rgba(255,60,20,0.9));
  }
  .ignition.breakdown #play-toggle{ border-color:var(--ember); color:var(--ember); }
  #play-toggle{
    position:relative;
    width:64px;height:64px;
    border-radius:50%;
    border:1px solid rgba(231,235,242,0.35);
    background:rgba(7,11,22,0.55);
    color:var(--static);
    cursor:pointer;
    transition:border-color 0.25s, color 0.25s, transform 0.25s, box-shadow 0.25s;
    display:flex;
    align-items:center;
    justify-content:center;
    touch-action:manipulation;
    user-select:none;
    -webkit-user-select:none;
    -webkit-touch-callout:none;
  }
  #play-toggle:hover{border-color:var(--ember);color:var(--ember);transform:scale(1.06);}
  #play-toggle svg{overflow:visible;}
  #play-toggle .icon-play, #play-toggle .icon-pause{
    transform-origin:12px 12px;
    transition:opacity 0.3s ease, transform 0.3s ease;
  }
  #play-toggle .icon-pause{opacity:0; transform:scale(0.6) rotate(-90deg);}
  #play-toggle.is-playing .icon-play{opacity:0; transform:scale(0.6) rotate(90deg);}
  #play-toggle.is-playing .icon-pause{opacity:1; transform:scale(1) rotate(0deg);}

  /* ---------- SIGNAL FIELD ---------- */
  .field-head{
    font-size:0.75rem;
    letter-spacing:0.35em;
    text-transform:uppercase;
    color:var(--ember);
    margin-bottom:4rem;
    align-self:flex-start;
  }
  .node-field{
    position:relative;
    width:100%;
    max-width:1000px;
    height:56vh;
    min-height:380px;
    align-self:center;
  }
  #field-streaks{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    pointer-events:none;
  }
  .signal-core{
    position:absolute;
    top:50%; left:50%;
    width:32px; height:32px;
    transform:translate(-50%,-50%);
    border-radius:50%;
    overflow:hidden;
    background:
      radial-gradient(circle at 32% 28%, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0) 22%),
      radial-gradient(circle at 68% 66%, #3e7a45 0%, transparent 38%),
      radial-gradient(circle at 22% 62%, #5a8f4a 0%, transparent 32%),
      radial-gradient(circle at 72% 22%, #6ba05a 0%, transparent 26%),
      radial-gradient(circle at 40% 40%, #2f6fa8 0%, #1a3f66 65%, #0d2038 100%);
    box-shadow:
      inset -4px -4px 6px rgba(0,0,0,0.55),
      0 0 30px rgba(70,150,230,0.5), 0 0 70px rgba(70,150,230,0.22);
    animation:coreBreathe 3.6s ease-in-out infinite;
    pointer-events:none;
    z-index:1;
  }
  .signal-core .core-shadow{
    position:absolute;
    inset:-4px;
    border-radius:50%;
    background:linear-gradient(100deg, rgba(7,11,22,0) 42%, rgba(7,11,22,0.88) 50%, rgba(7,11,22,0) 58%);
    animation:coreRotate 16s linear infinite;
  }
  @keyframes coreRotate{
    from{ transform:rotate(0deg); }
    to{ transform:rotate(360deg); }
  }
  @keyframes coreBreathe{
    0%,100%{ box-shadow:inset -4px -4px 6px rgba(0,0,0,0.55), 0 0 30px rgba(70,150,230,0.45), 0 0 70px rgba(70,150,230,0.2); }
    50%{ box-shadow:inset -4px -4px 6px rgba(0,0,0,0.55), 0 0 42px rgba(70,150,230,0.65), 0 0 90px rgba(70,150,230,0.3); }
  }
  .asteroid{
    position:absolute;
    width:5px; height:3px;
    background:var(--smoke);
    border-radius:40% 60% 55% 45%;
    opacity:0.5;
    pointer-events:none;
  }
  .signal-ship{
    position:absolute;
    width:12px; height:12px;
    opacity:0;
    pointer-events:none;
    transition:opacity 0.6s ease;
    box-shadow:0 0 6px rgba(255,243,214,0.5);
    border-radius:50%;
  }
  .signal-ship.visible{ opacity:0.85; pointer-events:auto; cursor:pointer; }
  .signal-ship svg{ display:block; }
  .signal-ship .ship-label{
    position:absolute;
    top:16px; left:50%;
    transform:translateX(-50%);
    font-size:0.62rem;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--flare);
    white-space:nowrap;
    opacity:0;
    transition:opacity 0.25s ease;
  }
  .signal-ship:hover .ship-label{ opacity:0.9; }
  .node{
    position:absolute;
    display:inline-flex;
    align-items:center;
    gap:0.6rem;
    padding:0.9rem 1.4rem;
    border:1px solid rgba(231,235,242,0.22);
    background:rgba(7,11,22,0.82);
    text-decoration:none;
    color:var(--static);
    font-size:0.85rem;
    letter-spacing:0.05em;
    white-space:nowrap;
    transition:border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
    cursor:pointer;
    will-change:transform;
  }
  .node:hover{border-color:var(--ember);color:var(--ember);box-shadow:0 0 24px rgba(255,106,43,0.15);}
  .node .dot{
    width:6px;height:6px;
    border-radius:50%;
    background:var(--smoke);
    flex-shrink:0;
    animation:dotBreathe 4s ease-in-out infinite;
  }
  .node:nth-of-type(2) .dot{ animation-delay:1.1s; }
  .node:nth-of-type(3) .dot{ animation-delay:2.3s; }
  .node:nth-of-type(4) .dot{ animation-delay:3.4s; }
  @keyframes dotBreathe{
    0%,100%{ box-shadow:0 0 0 rgba(255,106,43,0); }
    50%{ box-shadow:0 0 6px rgba(255,106,43,0.6); }
  }
  .node:hover .dot{background:var(--ember);}

  .dust{
    position:absolute;
    width:2px;height:2px;
    border-radius:50%;
    background:var(--smoke);
    opacity:0.4;
    pointer-events:none;
    animation:dustTwinkle 3s ease-in-out infinite;
  }
  @keyframes dustTwinkle{
    0%,100%{ opacity:0.15; }
    50%{ opacity:0.55; }
  }

  .footer-strip{
    margin-top:6rem;
    padding-top:3rem;
    border-top:1px solid rgba(231,235,242,0.1);
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    flex-wrap:wrap;
    gap:2rem;
    width:100%;
    max-width:1000px;
    align-self:center;
  }
  .footer-mark{font-family:'Archivo Black', sans-serif;font-size:1.4rem;position:relative;}
  /* same glitch language as the hero's PSYLOCIDE title, scaled down for the footer mark */
  .footer-mark.tear{ animation:tear 0.16s steps(2,end) 1; }
  .footer-mark.font-swap .ch{
    font-family:'JetBrains Mono', monospace;
    font-weight:700;
    transform:skewX(-6deg);
  }
  .footer-links{display:flex;gap:2rem;font-size:0.8rem;letter-spacing:0.05em;}
  .footer-links a{color:var(--static);opacity:0.6;text-decoration:none;transition:opacity 0.2s, color 0.2s;}
  .footer-links a:hover{opacity:1;color:var(--ember);}
  .footer-note{font-size:0.7rem;opacity:0.35;max-width:40ch;}

  /* ---------- DARK / FLASHLIGHT VIEW ---------- */
  #view-dark .view-inner{padding:0;min-height:100vh;justify-content:center;align-items:center;}
  #dark-field{
    position:fixed;
    inset:0;
    width:100vw;
    height:100vh;
  }
  #starfield{position:absolute;inset:0;}
  #dark-cover{
    position:absolute;
    inset:0;
    background:#000;
    -webkit-mask-image:radial-gradient(circle 140px at var(--mx) var(--my), transparent 0%, transparent 92%, black 100%);
    mask-image:radial-gradient(circle 140px at var(--mx) var(--my), transparent 0%, transparent 92%, black 100%);
    /* never intercept clicks — this is a purely visual cover, so the hidden
       fragment link underneath stays tappable everywhere, including during
       the random reveal flash and on touch devices without a hover state */
    pointer-events:none;
  }
  .hidden-fragment{
    position:absolute;
    display:inline-flex;
    align-items:center;
    gap:0.5rem;
    padding:0.7rem 1.1rem;
    border:1px dashed rgba(231,235,242,0.3);
    background:rgba(7,11,22,0.5);
    color:var(--flare);
    font-size:0.72rem;
    letter-spacing:0.08em;
    text-decoration:none;
    white-space:nowrap;
  }

  #crt-overlay{
    position:fixed;
    inset:0;
    z-index:60;
    pointer-events:none;
    background:
      repeating-linear-gradient(rgba(0,0,0,0) 0px, rgba(0,0,0,0) 1px, rgba(0,0,0,0.12) 2px, rgba(0,0,0,0.12) 3px),
      radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(0,0,0,0.4) 100%);
    mix-blend-mode:multiply;
    animation:crtFlicker 6s infinite;
  }
  @keyframes crtFlicker{
    0%,100%{opacity:0.9;}
    50%{opacity:1;}
    52%{opacity:0.85;}
    53%{opacity:1;}
  }
  #whiteout-flash{
    position:fixed;
    inset:0;
    z-index:79;
    pointer-events:none;
    background:#fff;
    opacity:0;
  }

  @media (max-width:640px){
    .node-field{ height:60vh; min-height:320px; }
    .node{ padding:0.65rem 1rem; font-size:0.75rem; }
    .signal-core{ width:20px; height:20px; }
    .asteroid{ width:4px; height:2px; }
    #cursor-glow{display:none;}
  }
  @media (prefers-reduced-motion: reduce){
    *{animation:none !important;}
  }