:root {
  --ink: #060814;
  --ink-2: #0b0f1f;
  --paper: #f4f1ea;
  --accent:   #a3e635;
  --accent-2: #d4d42b;
  --accent-3: #22d3ee;
  --edge: rgba(255,255,255,0.08);
  --edge-strong: rgba(255,255,255,0.16);
  --accent-hot: #fb923c;
}

html, body { background: var(--ink); color: #e6e8ef; }
body {
  font-family: 'Geist', system-ui, sans-serif;
  font-feature-settings: "ss01","cv11";
  -webkit-font-smoothing: antialiased;
}
.display { font-family: 'Fraunces', serif; font-optical-sizing: auto; letter-spacing: -0.02em; }
.mono    { font-family: 'JetBrains Mono', ui-monospace, monospace; }

.aurora-bg {
  position: fixed; inset: 0; z-index: 0; overflow: hidden;
  background:
    radial-gradient(60% 50% at 10% 0%,  rgba(163,230,53,.22) 0%, transparent 60%),
    radial-gradient(55% 45% at 95% 10%, rgba(212,212,43,.22) 0%, transparent 62%),
    radial-gradient(50% 40% at 50% 100%, rgba(34,211,238,.15) 0%, transparent 60%),
    linear-gradient(180deg, #060814 0%, #080a1a 40%, #05070f 100%);
}
.aurora-bg::before {
  content: "";
  position: absolute; inset: -20%;
  background:
    conic-gradient(from 220deg at 30% 20%,
      rgba(163,230,53,.16), rgba(212,212,43,.16), rgba(34,211,238,.10), rgba(163,230,53,.16));
  filter: blur(80px);
  animation: drift 28s linear infinite;
  mix-blend-mode: screen;
  opacity: .75;
}
@keyframes drift {
  0%   { transform: translate3d(0,0,0) rotate(0deg); }
  50%  { transform: translate3d(-4%, 2%, 0) rotate(180deg); }
  100% { transform: translate3d(0,0,0) rotate(360deg); }
}

.grain::after {
  content:"";
  position: fixed; inset: 0; z-index: 1; pointer-events:none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .05 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: .55;
  mix-blend-mode: overlay;
}

.glass {
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 1px solid var(--edge);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 30px 60px -30px rgba(0,0,0,.6),
    0 0 0 1px rgba(255,255,255,.02);
}
.glass-strong {
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
  border: 1px solid var(--edge-strong);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
}
.glass-hover { transition: transform .4s cubic-bezier(.2,.7,.2,1), border-color .3s, box-shadow .3s; }
.glass-hover:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.22); }

.hair { border-top: 1px solid rgba(255,255,255,.08); }

.accent-text {
  background: linear-gradient(92deg, var(--accent) 0%, var(--accent-2) 55%, var(--accent-3) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.dots {
  background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 18px 18px;
}

.btn-primary {
  background: linear-gradient(180deg, var(--accent) 0%, #8dd015 100%);
  color: #0a1500;
  border: 1px solid rgba(255,255,255,.4);
  box-shadow: 0 10px 30px -10px rgba(163,230,53,.5), inset 0 1px 0 rgba(255,255,255,.5);
  transition: transform .2s ease, box-shadow .3s ease, filter .2s;
  font-weight: 600;
}
.btn-primary:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow: 0 14px 34px -10px rgba(163,230,53,.55), 0 6px 20px -6px rgba(251,146,60,.3), inset 0 1px 0 rgba(255,255,255,.6);
}

.btn-ghost {
  border: 1px solid var(--edge-strong); color: #e6e8ef;
  transition: background .2s ease, border-color .3s;
}
.btn-ghost:hover { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.28); }

.tab { transition: color .2s, background .2s; }
.tab[data-active="true"] {
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 8px 24px -12px rgba(0,0,0,.5);
  border-color: rgba(255,255,255,.22);
}
.tab[data-active="false"] { color: #b9bdcc; }
.tab[data-active="false"]:hover { color: #f0f2fa; }

.code-shell { background: rgba(7,9,20,.55); border: 1px solid var(--edge); }
.code-shell pre { overflow-x: auto; }

@keyframes pulse-dot {
  0%, 100% { opacity: .4; transform: scale(1); }
  50%      { opacity: 1;  transform: scale(1.15); }
}
.pulse-dot { animation: pulse-dot 2.4s ease-in-out infinite; }

@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.rise { opacity: 0; animation: rise .8s cubic-bezier(.2,.7,.2,1) forwards; }
.d1 { animation-delay: .05s; }
.d2 { animation-delay: .18s; }
.d3 { animation-delay: .30s; }
.d4 { animation-delay: .42s; }
.d5 { animation-delay: .54s; }

.marquee { mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent); }
.marquee-track { animation: slide 40s linear infinite; }
@keyframes slide { to { transform: translateX(-50%); } }

[data-mobile-menu]:not(.hidden) {
  animation: menu-in .2s ease-out;
}
@keyframes menu-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 639px) {
  .code-shell pre { font-size: 11px; }
}

::selection { background: rgba(163,230,53,.4); color: #0a1500; }
html { scrollbar-gutter: stable; }

.wordmark {
  font-family: 'Fraunces', serif;
  font-weight: 300;
  letter-spacing: -0.08em;
  font-size: clamp(120px, 22vw, 340px);
  line-height: .8;
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.02));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  user-select: none;
}

.meter-fill {
  background: linear-gradient(90deg, var(--accent), var(--accent-2) 60%, var(--accent-3));
  box-shadow: 0 0 24px rgba(163,230,53,.35);
}

.chorizo { transition: all .3s ease; }
.chorizo:hover { color: #fb923c; transform: rotate(-4deg) scale(1.05); cursor: help; }

.lang-menu {
  transition: opacity .15s, transform .15s;
  transform-origin: top right;
}
.lang-menu[data-open="false"] {
  opacity: 0;
  transform: scale(.95) translateY(-4px);
  pointer-events: none;
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }