:root{
  --background: oklch(0.115 0.01 85);
  --foreground: oklch(0.97 0.005 85);
  --card: oklch(0.16 0.01 85);
  --primary: oklch(0.88 0.19 96);
  --primary-foreground: oklch(0.16 0.03 90);
  --muted-foreground: oklch(0.58 0.01 85);
  --border: oklch(0.28 0.01 85);
  --input: oklch(0.25 0.01 85);
  --surface: oklch(0.145 0.008 85);
  --surface-raised: oklch(0.19 0.01 85);
}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:var(--background);color:var(--foreground);
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;overflow-x:hidden}
.glow{position:fixed;inset:0;pointer-events:none;
  background:radial-gradient(circle at 80% 0%, color-mix(in oklab,var(--primary) 8%,transparent), transparent 34%)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.mono,.crumbs,.counter,.status{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.bar{position:relative;margin:0 auto;width:min(94%,1184px);display:flex;align-items:center;
  justify-content:space-between;border-bottom:1px solid var(--border);padding:20px 0}
@media(min-width:768px){.bar{margin-top:28px;border:1px solid var(--border);border-radius:999px;
  background:var(--surface);padding:12px 20px}}
.logo{display:flex;align-items:center;gap:12px;color:var(--foreground);text-decoration:none;font-weight:600;letter-spacing:-.01em}
.mark{display:grid;place-items:center;width:36px;height:36px;border-radius:12px;background:var(--primary);
  color:var(--primary-foreground);font-weight:900}
.accent{color:var(--primary)}
nav{display:none;gap:4px;align-items:center;border:1px solid var(--border);border-radius:999px;
  padding:4px;font-size:14px;color:var(--muted-foreground)}
@media(min-width:768px){nav{display:flex}}
nav span{padding:8px 20px;border-radius:999px}
nav .active{border:1px solid color-mix(in oklab,var(--primary) 35%,transparent);background:var(--background);color:var(--foreground);font-weight:500}
.status{display:flex;align-items:center;gap:8px;font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted-foreground)}
.status i,.mono i{width:6px;height:6px;border-radius:999px;background:var(--primary);display:inline-block}
.wrap{position:relative;margin:0 auto;width:min(92%,872px);padding-top:96px;padding-bottom:80px}
@media(min-width:768px){.wrap{padding-top:128px}}
.crumbs{display:flex;gap:12px;font-size:11px;text-transform:uppercase;letter-spacing:.2em;color:var(--muted-foreground);margin-bottom:20px}
h1{margin:0;font-size:clamp(2.25rem,5vw,3rem);font-weight:700;letter-spacing:-.04em}
.lead{margin:16px 0 0;max-width:36rem;font-size:14px;line-height:1.6;color:var(--muted-foreground)}
.card{margin-top:36px;border:1px solid var(--border);background:var(--card);padding:20px;border-radius:24px;
  box-shadow:0 25px 50px -12px rgba(0,0,0,.6)}
textarea{width:100%;resize:none;border-radius:12px;border:1px solid var(--input);background:var(--surface-raised);
  padding:16px 20px;font:inherit;font-size:14px;color:var(--foreground);outline:none;transition:.15s}
textarea::placeholder{color:var(--muted-foreground)}
textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in oklab,var(--primary) 15%,transparent)}
.row{margin-top:12px;display:flex;flex-direction:column;gap:12px}
@media(min-width:640px){.row{flex-direction:row;align-items:center}}
button{flex:1;height:56px;border:0;border-radius:12px;background:var(--primary);color:var(--primary-foreground);
  font:inherit;font-size:16px;font-weight:700;cursor:pointer;transition:.15s;
  box-shadow:0 0 28px color-mix(in oklab,var(--primary) 30%,transparent)}
button:hover{filter:brightness(.95);box-shadow:0 0 38px color-mix(in oklab,var(--primary) 40%,transparent)}
.counter{font-size:10px;color:var(--muted-foreground);text-align:right}
.meta{margin-top:16px;display:flex;flex-direction:column;gap:12px;font-size:12px;color:var(--muted-foreground)}
@media(min-width:640px){.meta{flex-direction:row;align-items:center;justify-content:space-between}}
.mono{display:flex;align-items:center;gap:8px;text-transform:uppercase;letter-spacing:.06em}
.ok{margin-top:32px;border:1px solid color-mix(in oklab,var(--primary) 25%,transparent);
  background:color-mix(in oklab,var(--primary) 5%,transparent);border-radius:16px;padding:16px;font-size:14px}
@keyframes reveal-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.reveal-up{animation:reveal-up 600ms cubic-bezier(.2,.7,.2,1) both}
.delay{animation-delay:120ms}
@media(prefers-reduced-motion:reduce){.reveal-up{animation:none}}
