:root {
  --bg:#17171B;
  --fg:#ECEAE4;
  --mute:#8F8D96;
  --line:#2A2A31;
  --panel:#1E1E23;
  --grid:#202026;
  --outer:#131316;
  --accent:oklch(0.78 0.14 300);
}

body {
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:'Hanken Grotesk',system-ui,sans-serif;
  transition:background-color .35s,color .35s;
}

a {
  color:var(--fg);
}

a:hover {
  color:var(--mute);
}

::selection {
  background:var(--fg);
  color:var(--bg);
}

.nav {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:22px 0;
}

.brand {
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:var(--fg);
}

.brand-mark {
  width:38px;
  height:38px;
}

.wordmark {
  font-family:'Source Code Pro',ui-monospace,monospace;
  display:flex;
  font-weight:900;
  font-style:italic;
  font-size:30px;
  line-height:1;
}

.letter-l {
  margin-left:-0.1em;
}

.letter-o1 {
  margin-left:-0.06em;
}

.letter-o2 {
  margin-left:-0.01em;
}

.letter-m {
  margin-left:0.01em;
}

.nav-actions {
  display:flex;
  align-items:center;
  gap:22px;
}

.github-link {
  font-size:15px;
  font-weight:700;
  text-decoration:none;
  display:flex;
  align-items:center;
  gap:8px;
}

.icon {
  display:block;
}

.theme-toggle {
  display:flex;
  align-items:center;
  gap:10px;
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
  color:var(--fg);
  font-family:inherit;
  font-size:13px;
  font-weight:700;
}

.candle {
  display:block;
  overflow:visible;
}

.flame {
  transform-origin:16px 10px;
  transition:opacity .3s;
  opacity:0;
}

.smoke {
  transition:opacity .3s;
  opacity:0.9;
}

.hero {
  display: flex;
  flex-wrap: wrap-reverse;
  gap:40px;
  align-items:center;
  padding:72px 0 56px;
}

.hero-copy {
  flex: 1 1 420px;
  align-items: flex-start;
  text-align: left;
  display:flex;
  flex-direction:column;
  gap:28px;
}

.headline {
  font-family:'Source Code Pro',ui-monospace,monospace;
  margin:0;
  font-size:clamp(48px,7.4vw,104px);
  line-height:0.92;
  font-weight:900;
  font-style:italic;
  letter-spacing:-0.045em;
  text-wrap:balance;
}

.intro {
  margin:0;
  font-size:19px;
  line-height:1.55;
  max-width:34em;
  color:var(--fg);
  text-wrap:pretty;
}

.install {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:stretch;
}

.install-box {
  display:flex;
  align-items:center;
  gap:14px;
  border:1px solid var(--line);
  background:var(--panel);
  border-radius:12px;
  padding:0 6px 0 16px;
  min-height:54px;
  max-width:100%;
  box-sizing:border-box;
}

.prompt {
  color:#6c99f8;
  font-weight:700;
}

.install-command {
  font-family:'Source Code Pro',ui-monospace,monospace;
  font-size:15px;
  font-weight:500;
  overflow-wrap:anywhere;
  min-width:0;
}

.copy-button {
  background:var(--fg);
  color:var(--bg);
  border:none;
  border-radius:8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  flex-shrink: 0;
  font-family:inherit;
  font-weight:700;
  font-size:13px;
  cursor:pointer;
  min-width: 40px;
  min-height: 40px;
  transition:transform .15s;
}

.github-cta {
  align-self:flex-start;
  display:flex;
  align-items:center;
  gap:10px;
  background:var(--fg);
  color:var(--bg);
  text-decoration:none;
  border-radius:12px;
  padding:0 22px;
  min-height:54px;
  box-sizing:border-box;
  font-weight:900;
  font-style:italic;
  font-size:18px;
  box-shadow:4px 4px 0 var(--mute);
  transition:transform .18s cubic-bezier(.5,1.8,.4,1),box-shadow .18s;
}

.icon {
  display:block;
}

.hero-art {
  flex: 1 1 420px;
  min-width: 0;
  display:flex;
  justify-content:center;
  align-items:center;
}

.floating-ghost {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  aspect-ratio: 1;
  color:var(--fg);
}

.hero-mark {
  width:100%;
  height:100%;
}


@font-face {
  font-family: 'Source Code Pro';
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url('/fonts/SourceCodePro-BlackIt.ttf') format('truetype');
}

:root { color-scheme: dark; }
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #EEEBE4;
  --fg: #161514;
  --mute: #66625A;
  --line: #D9D4C9;
  --panel: #E6E2D9;
  --grid: #E2DED5;
  --outer: #E9E6DE;
  --accent: oklch(0.5 0.2 300);
}

[hidden] { display: none !important; }
.page { container-type: inline-size; min-height: 100svh; padding: 0 clamp(20px, 4vw, 64px); }
.hero-copy, .install-box { min-width: 0; }
.icon, .brand-mark, .hero-mark { display: block; flex-shrink: 0; }
.ghost-middle, .ghost-inner, .ghost-eyes {
  transform-origin: 100px 100px;
}
.ghost-middle { transform: scale(.76); animation: chat-middle 3.4s infinite; }
.ghost-inner { transform: scale(.56); animation: chat-inner 3.4s infinite; }
.ghost-eyes { animation: blink 4.6s infinite; }
.floating-ghost { animation: float 6.9s ease-in-out infinite; }
.flame { animation: flicker .23s ease-in-out infinite alternate; }
:root[data-theme="light"] .flame { opacity: 1; }
:root[data-theme="light"] .smoke { opacity: 0; }
.github-link:hover { opacity: .7; }
.github-cta:hover {
  color: var(--bg);
  transform: translate(-3px, -3px);
  box-shadow: 10px 10px 0 var(--mute);
}
.copy-button:active { transform: scale(.94); }
.install-note { margin: -14px 0 0; color: var(--mute); font-size: 13px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
.visually-hidden, .skip-link:not(:focus) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip-link:focus { position: absolute; z-index: 1; padding: 12px; background: var(--bg); }
@keyframes float { 50% { transform: translateY(-16px); } }
@keyframes blink { 0%, 5%, 100% { transform: scaleY(1); } 2.5% { transform: scaleY(.08); } }
@keyframes flicker { to { transform: scale(1.04, 1.07) rotate(4deg); } }
@keyframes chat-middle {
  0%, 15%, 32%, 100% { transform: scale(.76); }
  7% { transform: scale(.778); }
  24% { transform: scale(.772); }
}
@keyframes chat-inner {
  0%, 19%, 36%, 100% { transform: scale(.56); }
  11% { transform: scale(.582); }
  28% { transform: scale(.574); }
}
@media (max-width: 480px) {
  .hero { padding-top: 40px; gap: 24px; }
  .install-box { flex-wrap: wrap; padding: 12px; gap: 10px; }
  .install-command { flex: 1; }
  .copy-button { margin-left: auto; }
  .github-cta { font-size: 15px; padding: 0 14px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@font-face {
  font-family: 'Hanken Grotesk';
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url(/fonts/HankenGrotesk-0.ttf) format('truetype');
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/HankenGrotesk-1.ttf) format('truetype');
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/HankenGrotesk-2.ttf) format('truetype');
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/HankenGrotesk-3.ttf) format('truetype');
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/fonts/HankenGrotesk-4.ttf) format('truetype');
}

.ghost-frame { position: relative; width: min(100%, 380px); aspect-ratio: 1; }
.brand-mark .ghost-middle, .brand-mark .ghost-inner, .brand-mark .ghost-eyes {
  animation: none;
}
@container (max-width: 879px) {
  .hero-copy { align-items: center; text-align: center; }
  .install { justify-content: center; }
  .github-cta { align-self: center; }
}

@font-face {
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/SourceCodePro-Medium.ttf) format('truetype');
}

.copy-success, .copy-error { display: none; }
.copy-button[data-state] .copy-icon { display: none; }
.copy-button[data-state="copied"] .copy-success,
.copy-button[data-state="error"] .copy-error { display: inline; }