:root{
    --spot-x: 50%;
    --spot-y: 30%;
  }
  html { scroll-behavior: smooth; }
  body{
    background: #0E0E10;
    font-family: 'Inter', sans-serif;
    overflow-x: clip;
    overscroll-behavior-x: none;
  }

  .skip-link{
    position:absolute; left:-9999px; top:0; z-index:100;
    background:#F5A623; color:#0E0E10; padding:.6rem 1rem; font-weight:600; border-radius:0 0 .5rem 0;
  }
  .skip-link:focus{ left:0; }

  .grid-bg{
    position:absolute; inset:0;
    background-image:
      linear-gradient(to right, rgba(255,255,255,0.035) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(255,255,255,0.035) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 20%, black 40%, transparent 90%);
            mask-image: radial-gradient(ellipse 80% 60% at 50% 20%, black 40%, transparent 90%);
  }

  .spotlight{
    position:absolute; inset:0; pointer-events:none;
    background: radial-gradient(600px circle at var(--spot-x) var(--spot-y), rgba(245,166,35,0.10), transparent 60%);
    transition: background .15s ease-out;
  }

  .noise-vignette{
    position:absolute; inset:0; pointer-events:none;
    background: radial-gradient(ellipse 90% 70% at 50% 0%, transparent 30%, #0E0E10 92%);
  }

  .eyebrow{
    display:inline-flex; align-items:center; gap:.55rem;
    font-family:'IBM Plex Mono', monospace;
    font-size:.8rem; letter-spacing:.02em;
    color:#34D0C4;
    background: rgba(52,208,196,0.08);
    border:1px solid rgba(52,208,196,0.25);
    padding:.4rem .75rem; border-radius:999px;
  }
  .eyebrow::before{
    content:''; width:6px; height:6px; border-radius:50%;
    background:#34D0C4; box-shadow:0 0 0 3px rgba(52,208,196,0.18);
    animation: pulse-dot 2s ease-in-out infinite;
  }
  @keyframes pulse-dot{
    0%,100%{ opacity:1; } 50%{ opacity:.4; }
  }

  .btn-primary{
    background:#F5A623; color:#171009;
    font-weight:600; padding:.85rem 1.6rem; border-radius:.65rem;
    display:inline-flex; align-items:center; gap:.5rem;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
    box-shadow: 0 0 0 0 rgba(245,166,35,0.0);
  }
  .btn-primary:hover{ background:#FFB84D; transform: translateY(-2px); box-shadow: 0 10px 30px -8px rgba(245,166,35,0.45); }
  .btn-primary:focus-visible{ outline: 2px solid #F5A623; outline-offset: 3px; }
  .btn-primary:active{ transform: translateY(0); }

  .btn-secondary{
    color:#F3F1EA; font-weight:500; padding:.85rem 1.4rem; border-radius:.65rem;
    border:1px solid #2A2A30; background: rgba(255,255,255,0.02);
    display:inline-flex; align-items:center; gap:.55rem;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
  }
  .btn-secondary:hover{ border-color:#8D8D97; background: rgba(255,255,255,0.05); transform: translateY(-2px); }
  .btn-secondary:focus-visible{ outline: 2px solid #34D0C4; outline-offset: 3px; }

  .nav-link{
    color:#8D8D97; font-size:.925rem; transition: color .15s ease;
  }
  .nav-link:hover{ color:#F3F1EA; }
  .nav-link:focus-visible{ outline: 2px solid #34D0C4; outline-offset: 4px; border-radius: 2px; }

  /* Editor window */
  .editor-window{
    background:#17171B; border:1px solid #2A2A30; border-radius:1rem;
    box-shadow: 0 30px 80px -30px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.02) inset;
    overflow:hidden;
  }
  .editor-titlebar{
    display:flex; align-items:center; justify-content:space-between;
    background:#1D1D22; border-bottom:1px solid #2A2A30;
    padding:.65rem .9rem;
  }
  .dot{ width:.6rem; height:.6rem; border-radius:50%; display:inline-block; }
  .editor-tab{
    font-family:'IBM Plex Mono', monospace; font-size:.78rem; color:#C9C9CF;
    background:#17171B; border:1px solid #2A2A30; border-bottom:none;
    padding:.35rem .75rem; border-radius:.4rem .4rem 0 0;
    display:inline-flex; align-items:center; gap:.4rem;
  }
  .code-area{
    font-family:'IBM Plex Mono', monospace; font-size:.82rem; line-height:1.75;
    padding:1.1rem 1.2rem; min-height:230px;
  }
  .code-line{ display:flex; gap:1rem; opacity:0; transform: translateY(4px); }
  .ln{ color:#4B4B54; user-select:none; width:1.1rem; text-align:right; flex-shrink:0; }
  .tok-kw{ color:#F5A623; }
  .tok-str{ color:#34D0C4; }
  .tok-fn{ color:#E4C88A; }
  .tok-com{ color:#5C5C66; font-style:italic; }
  .tok-plain{ color:#DADAE0; }
  .cursor{
    display:inline-block; width:2px; height:1em; background:#F5A623;
    margin-left:2px; vertical-align:-2px;
    animation: blink 1s step-end infinite;
  }
  @keyframes blink{ 50%{ opacity:0; } }

  .status-bar{
    border-top:1px solid #2A2A30; background:#1D1D22;
    padding:.9rem 1.2rem; display:flex; flex-direction:column; gap:.6rem;
  }
  .status-item{ display:flex; align-items:center; gap:.6rem; font-size:.8rem; color:#8D8D97; opacity:.35; transition: opacity .3s ease; }
  .status-item.is-active{ opacity:1; color:#DADAE0; }
  .status-icon{
    width:1rem; height:1rem; border-radius:50%; border:1.5px solid #4B4B54; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
  }
  .status-item.is-done .status-icon{ border-color:#34D0C4; background:rgba(52,208,196,0.12); }
  .status-item.is-done .status-icon svg{ display:block; }
  .status-icon svg{ display:none; width:.6rem; height:.6rem; }

  .float-badge{
    position:absolute; font-family:'IBM Plex Mono', monospace; font-size:.72rem;
    background:#17171B; border:1px solid #2A2A30; color:#DADAE0;
    padding:.4rem .65rem; border-radius:.55rem; box-shadow: 0 12px 30px -12px rgba(0,0,0,0.6);
    display:flex; align-items:center; gap:.4rem;
  }

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