:root { color-scheme: dark; }
  html { scroll-behavior: smooth; }
  body { background-color: #0D1117; }

  /* subtle grid + glow backdrop */
  .bg-grid {
    background-image:
      linear-gradient(rgba(124,134,255,0.06) 1px, transparent 1px),
      linear-gradient(90deg, rgba(124,134,255,0.06) 1px, transparent 1px);
    background-size: 40px 40px;
  }
  .glow-amber { box-shadow: 0 0 0 1px rgba(255,176,32,0.25), 0 0 60px -20px rgba(255,176,32,0.35); }
  .glow-peri  { box-shadow: 0 0 0 1px rgba(124,134,255,0.25), 0 0 60px -20px rgba(124,134,255,0.4); }

  .editor-window {
    background: #141C26;
    border: 1px solid #26323F;
    border-radius: 10px;
    overflow: hidden;
  }
  .editor-titlebar {
    background: #1B2531;
    border-bottom: 1px solid #26323F;
  }
  .dot { width: 10px; height: 10px; border-radius: 999px; display:inline-block; }

  .chip {
    font-family: 'JetBrains Mono', monospace;
    border: 1px solid #26323F;
    background: #1B2531;
    transition: transform .15s ease, border-color .15s ease, background .15s ease;
  }
  .chip:hover { transform: translateY(-2px); border-color: #FFB020; background:#20293480; }

  .card-hover { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
  .card-hover:hover { transform: translateY(-4px); border-color: rgba(124,134,255,0.45); }

  ::-webkit-scrollbar { width: 10px; }
  ::-webkit-scrollbar-track { background: #0D1117; }
  ::-webkit-scrollbar-thumb { background: #26323F; border-radius: 999px; }
  ::-webkit-scrollbar-thumb:hover { background: #35455a; }

  [x-cloak] { display: none !important; }

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

  @keyframes floaty { 0%,100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } }
  .float { animation: floaty 5s ease-in-out infinite; }
  .float-delay { animation: floaty 6s ease-in-out infinite; animation-delay: 1.2s; }

  .blink { animation: blink 1.1s steps(1) infinite; }
  @keyframes blink { 50% { opacity: 0; } }

/* Accessibility */
.skip-link {
  position: fixed;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  padding: .75rem 1rem;
  border-radius: .5rem;
  background: #FFB020;
  color: #0D1117;
  font-weight: 700;
  transition: top .2s ease;
}
.skip-link:focus { top: 1rem; }