:root{
    --bg-deep:#0a0c11;
    --ink:#e9e6dc;
    --muted:#7d8494;
    --screen-glow:#5fd6c2;
    --warm:#d9713a;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html,body{
    width:100%;height:100%;
    background:var(--bg-deep);
    overflow:hidden;
    font-family:'IBM Plex Mono', monospace;
    color:var(--ink);
  }
  #app{position:relative;width:100vw;height:100vh;transition:opacity 0.6s ease;}
  #app.fade-out{opacity:0;}
  #loadingOverlay{
    position:fixed;inset:0;z-index:999;
    background:var(--bg-deep);
    display:flex;align-items:center;justify-content:center;
    font-family:'IBM Plex Mono', monospace;
    color:var(--muted);font-size:13px;letter-spacing:0.08em;
    transition:opacity 0.5s ease;
  }
  #loadingOverlay.hidden{opacity:0;pointer-events:none;}
  #loadingOverlay .dot{
    display:inline-block;width:6px;height:6px;border-radius:50%;
    background:var(--screen-glow);margin-left:8px;
    animation:loadPulse 1s ease-in-out infinite;
  }
  @keyframes loadPulse{0%,100%{opacity:0.3;}50%{opacity:1;}}
  canvas{display:block;position:absolute;inset:0;}
  canvas:focus-visible{outline:2px solid var(--screen-glow);outline-offset:-4px;}
  .vignette{
    position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,0.55) 100%);
  }
  .ui-layer{position:absolute;inset:0;pointer-events:none;}
  .status-tl{
    position:absolute;top:28px;left:32px;
    font-size:11px;letter-spacing:0.08em;color:var(--muted);
    opacity:0.8;
  }
  .status-tl span{color:var(--screen-glow);}
  .hint{
    position:absolute;left:50%;bottom:64px;transform:translateX(-50%);
    font-size:13px;letter-spacing:0.06em;color:var(--ink);
    transition:opacity 0.6s ease;
    pointer-events:none;
    white-space:nowrap;
  }
  .hint.hidden{opacity:0;animation:none;}
  .hint{animation:flicker 4.5s ease-in-out infinite;}
  .hint .cursor{
    display:inline-block;margin-left:2px;
    animation:blink 1s step-end infinite;
  }
  @keyframes blink{0%,100%{opacity:1;}50%{opacity:0;}}
  @keyframes flicker{
    0%, 15%, 17%, 19%, 60%, 62%, 100%{opacity:1;}
    16%, 18%, 61%{opacity:0.25;}
    40%{opacity:0.85;}
  }
  .enter-link{
    position:absolute;left:50%;bottom:64px;transform:translateX(-50%);
    font-size:13px;letter-spacing:0.06em;color:var(--screen-glow);
    font-family:'IBM Plex Mono', monospace;text-decoration:none;
    opacity:0;transition:opacity 0.5s ease;
    pointer-events:none;
  }
  .enter-link.show{opacity:1;pointer-events:auto;}
  .enter-link:hover{color:var(--ink);}
  .social{
    position:absolute;top:28px;right:32px;
    display:flex;gap:12px;pointer-events:auto;
  }
  .social a{
    width:38px;height:38px;border-radius:50%;
    border:1px solid rgba(233,230,220,0.18);
    display:flex;align-items:center;justify-content:center;
    color:var(--muted);text-decoration:none;
    transition:all 0.25s ease;
    background:rgba(255,255,255,0.02);
  }
  .social a:hover, .social a:focus-visible{
    color:var(--screen-glow);
    border-color:var(--screen-glow);
    box-shadow:0 0 14px rgba(95,214,194,0.35);
  }
  .social a:focus-visible{outline:2px solid var(--screen-glow);outline-offset:2px;}
  .social svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6;}
  .identity{
    position:absolute;left:110px;bottom:70px;max-width:580px;
    pointer-events:none;
    opacity:1;transform:translateY(0);
    transition:opacity 0.9s ease, transform 0.9s ease;
  }
  .identity .eyebrow{
    font-size:13px;letter-spacing:0.12em;color:var(--warm);
    margin-bottom:12px;text-transform:uppercase;
  }
  .identity h1{
    font-family:'Space Grotesk', sans-serif;
    font-weight:600;font-size:clamp(34px,5vw,56px);
    letter-spacing:-0.01em;line-height:1.1;color:var(--ink);
    margin-bottom:14px;
  }
  .identity p{
    font-family:'Space Grotesk', sans-serif;
    font-size:17px;color:var(--muted);line-height:1.6;font-weight:400;
  }

  .sr-only{
    position:absolute;width:1px;height:1px;
    padding:0;margin:-1px;overflow:hidden;
    clip:rect(0,0,0,0);white-space:nowrap;border:0;
  }

  @media (prefers-reduced-motion: reduce){
    *, *::before, *::after{
      animation-duration:0.001ms !important;
      animation-iteration-count:1 !important;
      transition-duration:0.001ms !important;
    }
  }