@layer art{:root{--a-primary:#2563eb;--a-danger:#dc2626;--a-success:#16a34a;--a-bg:#fafafa;--a-fg:#1a1a1a;--a-surface:#fff;--a-border:#e5e5e5;--a-input:#d4d4d4;--a-muted:#737373;--a-radius:8px;--a-font:system-ui,sans-serif}@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--a-bg:#111;--a-fg:#eee;--a-surface:#1a1a1a;--a-border:#333;--a-input:#444;--a-muted:#999;color-scheme:dark}}:root[data-theme=light]{color-scheme:light}:root[data-theme=dark]{--a-bg:#111;--a-fg:#eee;--a-surface:#1a1a1a;--a-border:#333;--a-input:#444;--a-muted:#999;color-scheme:dark}*{box-sizing:border-box}body{margin:0;font:16px/1.5 var(--a-font);color:var(--a-fg);background:var(--a-bg)}#app{padding:24px;max-width:960px;margin:0 auto}.a-row{display:flex;align-items:center}.a-column{display:flex;flex-direction:column}.a-grid{display:grid}.a-wrap{flex-wrap:wrap}.a-card{display:flex;flex-direction:column;padding:16px;border:1px solid var(--a-border);border-radius:calc(var(--a-radius) * 1.5);background:var(--a-surface)}button{font:inherit;padding:6px 14px;border-radius:var(--a-radius);border:1px solid var(--a-input);background:var(--a-surface);color:inherit;cursor:pointer}button.a-primary{background:var(--a-primary);border-color:var(--a-primary);color:#fff}button.a-danger{color:var(--a-danger);border-color:var(--a-danger)}button.a-small{padding:2px 8px;font-size:.875em}span.a-danger,h2.a-danger{color:var(--a-danger)}span.a-primary,h2.a-primary{color:var(--a-primary)}span.a-success,h2.a-success{color:var(--a-success)}input,textarea,select{font:inherit;color:inherit}input:not([type=checkbox]):not([type=radio]):not([type=file]),textarea,select{padding:6px 10px;border:1px solid var(--a-input);border-radius:var(--a-radius);background:inherit}.a-title{font-size:1.5em;font-weight:bold}.a-bold{font-weight:600}.a-muted{color:var(--a-muted)}.a-small{font-size:.875em}.a-large{font-size:1.25em}h1,h2,h3,h4,h5,h6,p{margin:0}a{color:var(--a-primary)}.a-field{display:flex;flex-direction:column;gap:4px}.a-check{display:flex;flex-direction:row;align-items:center;gap:8px}.a-radio{display:flex;flex-direction:column;gap:4px}.a-tabs{display:flex;gap:4px;border-bottom:1px solid var(--a-border)}.a-tabs button{border:0;border-radius:var(--a-radius) var(--a-radius) 0 0;background:none}.a-tabs .a-active{box-shadow:inset 0 -2px var(--a-primary);font-weight:600}.a-modal{border:0;border-radius:calc(var(--a-radius) * 1.5);padding:20px;min-width:min(420px,90vw);background:var(--a-surface);color:inherit}.a-modal::backdrop{background:#0006}.a-modal:not([open]){display:none}.a-badge{display:inline-block;padding:0 8px;border-radius:999px;font-size:.75em;background:var(--a-border)}.a-badge.a-primary{background:color-mix(in srgb,var(--a-primary) 15%,transparent);color:var(--a-primary)}.a-badge.a-success{background:color-mix(in srgb,var(--a-success) 15%,transparent);color:var(--a-success)}.a-badge.a-danger{background:color-mix(in srgb,var(--a-danger) 15%,transparent);color:var(--a-danger)}.a-spinner{display:inline-block;width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:a-spin .7s linear infinite}@keyframes a-spin{to{transform:rotate(360deg)}}hr{border:0;border-top:1px solid var(--a-border);margin:8px 0;width:100%}.a-toasts{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;z-index:100}.a-toast{padding:10px 16px;border-radius:var(--a-radius);background:var(--a-fg);color:var(--a-bg);box-shadow:0 4px 12px #0003}.a-toast.a-success{background:var(--a-success);color:#fff}.a-toast.a-danger{background:var(--a-danger);color:#fff}.a-list{margin:0;padding-left:20px}.a-icon{display:inline-flex;vertical-align:middle;line-height:0}.a-scroll{overflow-x:auto}.a-table{border-collapse:collapse;width:100%}.a-table th,.a-table td{text-align:left;padding:8px;border-bottom:1px solid var(--a-border)}video,img{max-width:100%}}
/* site.css */
/* The ArtScript website theme. ArtScript elements read the --a-* variables; the rest are the site's. */
:root {
  --a-primary: #111111;
  --a-radius: 10px;
  --a-font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --a-bg: #ffffff;
  --a-fg: #111111;
  --a-surface: #ffffff;
  --a-border: #e6e6e6;
  --a-muted: #6b6b6b;
  --brand: #111111;
  --brand-2: #4a4a4a;
  --brand-soft: #f2f2f2;
  --soft: #f7f7f7;
  --code-bg: #121212;
  --code-fg: #ededed;
  --header: rgba(255, 255, 255, 0.84);
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --a-bg: #0b0b0b;
    --a-fg: #f2f2f2;
    --a-surface: #141414;
    --a-border: #262626;
    --a-muted: #9a9a9a;
    --brand: #ffffff;
    --brand-2: #b3b3b3;
    --brand-soft: #1c1c1c;
    --soft: #111111;
    --code-bg: #0a0a0a;
    --header: rgba(11, 11, 11, 0.8);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35);
  }
}
:root[data-theme="dark"] {
  --a-bg: #0b0b0b;
  --a-fg: #f2f2f2;
  --a-surface: #141414;
  --a-border: #262626;
  --a-muted: #9a9a9a;
  --brand: #ffffff;
  --brand-2: #b3b3b3;
  --brand-soft: #1c1c1c;
  --soft: #111111;
  --code-bg: #0a0a0a;
  --header: rgba(11, 11, 11, 0.8);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35);
}

html { scroll-padding-top: 80px; }
body { -webkit-font-smoothing: antialiased; }
#app { padding: 0; max-width: none; }
a { color: var(--brand); }
h1, h2, h3 { letter-spacing: -0.02em; }

.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 20; background: var(--header); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--a-border); }
.site-header .bar { height: 64px; }
.logo { font-weight: 800; font-size: 19px; color: var(--a-fg); text-decoration: none; letter-spacing: -0.03em; display: inline-flex; align-items: center; gap: 10px; }
.logo::before { content: ""; width: 28px; height: 28px; border-radius: 8px; background: #111 url("/favicon.png") center / 100% no-repeat; }
.nav a { color: var(--a-muted); text-decoration: none; font-weight: 500; font-size: 15px; padding: 6px 10px; border-radius: 8px; }
.nav a:hover { color: var(--a-fg); background: var(--soft); }
.ghost { background: transparent !important; border: 1px solid var(--a-border) !important; color: var(--a-fg) !important; }
.menu-btn { display: none !important; }
.badge-built { font-size: 12px; font-weight: 600; color: var(--brand); background: var(--brand-soft); border-radius: 999px; padding: 3px 10px; text-decoration: none; white-space: nowrap; }
@media (max-width: 900px) {
  .menu-btn { display: inline-flex !important; }
  .nav { display: none !important; }
  .nav.open { display: flex !important; position: absolute; top: 64px; left: 0; right: 0; flex-direction: column; align-items: stretch; background: var(--a-bg); border-bottom: 1px solid var(--a-border); padding: 12px 24px 20px; }
  .badge-built { display: none; }
}

/* ---------- home ---------- */
.hero { padding: 96px 0 56px; text-align: center; position: relative; overflow: hidden; }
/* The hero's background: three soft lights that drift (a monochrome mesh), a sweeping sheen, and a
   fine grid that fades towards the edges. All of it is a few gradients: no images, no scripts. */
@property --sheen { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(closest-side, color-mix(in srgb, var(--a-fg) 11%, transparent), transparent 72%) 0% 0% / 70% 90% no-repeat,
    radial-gradient(closest-side, color-mix(in srgb, var(--a-fg) 8%, transparent), transparent 72%) 100% 10% / 60% 80% no-repeat,
    radial-gradient(closest-side, color-mix(in srgb, var(--a-fg) 7%, transparent), transparent 72%) 50% 100% / 80% 70% no-repeat,
    conic-gradient(from var(--sheen) at 50% 40%, transparent 0deg, color-mix(in srgb, var(--a-fg) 4%, transparent) 30deg, transparent 60deg, transparent 360deg);
  animation: mesh 26s ease-in-out infinite alternate, sheen 40s linear infinite;
}
.eyebrow { display: inline-block; font-size: 13px; font-weight: 600; color: var(--brand); background: var(--brand-soft); border: 1px solid color-mix(in srgb, var(--brand) 25%, transparent); border-radius: 999px; padding: 5px 14px; text-decoration: none; }
.hero-title { font-size: clamp(40px, 7vw, 76px) !important; line-height: 1.02; font-weight: 800; margin: 22px auto 0; max-width: 900px; letter-spacing: -0.045em; }
.grad { color: var(--brand); }
.lead { font-size: clamp(17px, 2.2vw, 21px); color: var(--a-muted); max-width: 720px; margin: 22px auto 0; line-height: 1.55; display: block; }
.cta { margin-top: 34px; }
.btn { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 16px; padding: 12px 22px; border-radius: 12px; text-decoration: none; border: 1px solid var(--a-border); color: var(--a-fg); background: var(--a-surface); box-shadow: var(--shadow); }
.btn:hover { border-color: var(--brand); }
.btn.primary { background: var(--brand); color: var(--a-bg); border: 0; }
.btn.primary:hover { background: var(--brand-2); }
.install { margin: 28px auto 0; display: inline-flex; align-items: center; gap: 12px; font: 14px var(--mono); background: var(--soft); border: 1px solid var(--a-border); border-radius: 12px; padding: 10px 10px 10px 16px; }
.install .prompt { color: var(--brand); }

.section { padding: 80px 0; }
.section.alt { background: var(--soft); border-top: 1px solid var(--a-border); border-bottom: 1px solid var(--a-border); }
.section-title { font-size: clamp(28px, 4vw, 42px) !important; font-weight: 800; text-align: center; margin: 0; }
.section-lead { color: var(--a-muted); text-align: center; max-width: 680px; margin: 14px auto 44px; font-size: 18px; display: block; }

.feature { padding: 26px !important; border-radius: 16px !important; box-shadow: var(--shadow); align-items: flex-start !important; }
.feature-icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); }
.feature h3, .feature .h3 { font-size: 18px; margin: 4px 0 0; font-weight: 700; }
.feature .body { color: var(--a-muted); font-size: 15px; line-height: 1.6; }

.compare { align-items: stretch !important; }
.compare-col { min-width: 0; }
.compare-head { font-weight: 600; font-size: 14px; }
.compare-head .n { font: 12px var(--mono); color: var(--a-muted); }

.stat { padding: 24px !important; text-align: center; border-radius: 16px !important; }
.stat .num { font-size: 44px; font-weight: 800; letter-spacing: -0.04em; display: block; line-height: 1.1; }
.stat .label { color: var(--a-muted); font-size: 14px; display: block; }

.built { border-radius: 20px !important; padding: 36px !important; background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 10%, var(--a-surface)), color-mix(in srgb, var(--brand-2) 8%, var(--a-surface))) !important; }

/* ---------- code ---------- */
.code { background: var(--code-bg); color: var(--code-fg); border-radius: 14px; overflow: hidden; border: 1px solid #ffffff10; margin: 18px 0; box-shadow: var(--shadow); min-width: 0; }
.code-bar { display: flex; justify-content: space-between; align-items: center; padding: 8px 14px; font: 12px var(--mono); color: #a59fb5; border-bottom: 1px solid #ffffff12; }
.code-bar button { font: 12px var(--a-font); color: #d8d3e6; background: #ffffff12; border: 0; border-radius: 6px; padding: 3px 10px; cursor: pointer; }
.code-bar button:hover { background: #ffffff22; }
.code pre { margin: 0; padding: 16px 18px; overflow: auto; font: 13.5px/1.65 var(--mono); tab-size: 2; }
.code-box { display: block; }
.code-box .code { margin: 0; height: 100%; }
.hl-k { color: #c4a7ff; }
.hl-e { color: #7dd3fc; }
.hl-s { color: #a7f3d0; }
.hl-n { color: #fdba74; }
.hl-c { color: #8f89a3; font-style: italic; }
.hl-o { color: #f9a8d4; }
.hl-p { color: #fcd34d; }
.hl-t { color: #f0abfc; }

/* ---------- docs ---------- */
.docs { display: grid; grid-template-columns: 250px minmax(0, 1fr) 220px; gap: 48px; align-items: start; }
.docs-nav { position: sticky; top: 64px; align-self: start; }
.sidebar { max-height: calc(100vh - 64px); overflow: auto; padding: 28px 0 40px; }
.sidebar .group { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--a-muted); margin: 18px 0 6px 10px; display: block; }
.sidebar a { display: block; color: var(--a-fg); text-decoration: none; font-size: 14.5px; padding: 6px 10px; border-radius: 8px; }
.sidebar a:hover { background: var(--soft); }
.sidebar a[aria-current="page"] { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.toc { position: sticky; top: 64px; padding: 32px 0; font-size: 13.5px; }
.toc .group { font-weight: 600; margin-bottom: 8px; display: block; }
.toc a { display: block; color: var(--a-muted); text-decoration: none; padding: 4px 0; }
.toc a:hover { color: var(--brand); }
.toc a.sub { padding-left: 14px; }
.doc-main { padding: 32px 0 80px; min-width: 0; }
.doc-title { font-size: clamp(32px, 4vw, 44px) !important; font-weight: 800; margin: 6px 0 0; }
.crumb { font-size: 13px; font-weight: 600; color: var(--brand); text-transform: uppercase; letter-spacing: 0.06em; }
.doc-tools { margin: 18px 0 8px; }
.doc-tools a, .doc-tools button { font-size: 13px !important; }
.pill { font-size: 13px; color: var(--a-muted); border: 1px solid var(--a-border); border-radius: 999px; padding: 4px 12px; text-decoration: none; background: var(--a-surface); cursor: pointer; font-family: inherit; }
.pill:hover { color: var(--brand); border-color: var(--brand); }
.pager { margin-top: 56px; border-top: 1px solid var(--a-border); padding-top: 24px; }
.pager a { flex: 1; border: 1px solid var(--a-border); border-radius: 12px; padding: 14px 18px; text-decoration: none; color: var(--a-fg); font-weight: 600; }
.pager a:hover { border-color: var(--brand); }
.pager .next { text-align: right; }
.docs-toggle { display: none !important; }
@media (max-width: 1100px) { .docs { grid-template-columns: 230px minmax(0, 1fr); } .toc { display: none; } }
@media (max-width: 800px) {
  .docs { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .docs-nav { position: static; }
  .sidebar { display: none; max-height: none; padding: 8px 0; border-bottom: 1px solid var(--a-border); }
  .sidebar.open { display: block; }
  .docs-toggle { display: inline-flex !important; margin-top: 16px; }
}

/* ---------- prose (rendered Markdown and native prose) ---------- */
.prose { display: block !important; font-size: 16.5px; line-height: 1.75; }
.prose h2 { font-size: 27px; margin: 48px 0 12px; padding-top: 8px; }
.prose h3 { font-size: 20px; margin: 34px 0 8px; }
.prose h4 { font-size: 17px; margin: 26px 0 6px; }
.prose p { margin: 14px 0; }
.prose ul, .prose ol { padding-left: 22px; margin: 12px 0; }
.prose li { margin: 6px 0; }
.prose :not(pre) > code { font: 0.88em var(--mono); background: var(--soft); border: 1px solid var(--a-border); border-radius: 6px; padding: 1px 6px; }
.prose a { text-decoration: none; font-weight: 500; }
.prose a:hover { text-decoration: underline; }
.prose .anchor { opacity: 0; color: var(--a-muted); margin-left: 6px; font-weight: 400; }
.prose h2:hover .anchor, .prose h3:hover .anchor { opacity: 1; }
.prose blockquote { margin: 18px 0; padding: 12px 18px; border-left: 4px solid var(--brand); background: var(--brand-soft); border-radius: 0 10px 10px 0; }
.table { overflow-x: auto; margin: 18px 0; border: 1px solid var(--a-border); border-radius: 12px; }
.prose table, .ref-table { border-collapse: collapse; width: 100%; font-size: 14px; line-height: 1.5; }
.prose th, .prose td, .ref-table th, .ref-table td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--a-border); vertical-align: top; }
.prose th, .ref-table th { background: var(--soft); font-weight: 600; }
.prose tr:last-child td { border-bottom: 0; }

.callout { border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent) !important; background: var(--brand-soft) !important; border-radius: 14px !important; padding: 18px 20px !important; }

/* ---------- benchmarks ---------- */
.model { padding: 28px !important; border-radius: 18px !important; box-shadow: var(--shadow); }
.bar-row { display: grid !important; grid-template-columns: 120px minmax(0, 1fr) 90px; align-items: center; gap: 14px; }
.bar-track { height: 30px; background: var(--soft); border-radius: 8px; overflow: hidden; display: block; }
.bar-fill { display: block; height: 100%; border-radius: 8px; background: color-mix(in srgb, var(--a-muted) 45%, transparent); }
.bar-fill.ours { background: var(--brand); }
.bar-usd { font: 14px var(--mono); text-align: right; }
.big-pct { font-size: 56px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; }

/* ---------- playground ---------- */
.pg { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); height: calc(100vh - 64px); }
.pg-editor { width: 100%; height: 100%; border: 0 !important; border-radius: 0 !important; resize: none; padding: 18px 20px !important; font: 14px/1.65 var(--mono) !important; background: var(--code-bg) !important; color: var(--code-fg) !important; tab-size: 2; outline: none; }
.pg-side { min-width: 0; border-left: 1px solid var(--a-border); }
.pg-bar { padding: 10px 14px; border-bottom: 1px solid var(--a-border); }
.pg-frame { flex: 1; display: block; background: #fff; min-height: 300px; }
.pg-frame iframe { width: 100%; height: 100%; border: 0; display: block; background: #fafafa; }
.pg-errors { max-height: 40%; overflow: auto; border-top: 1px solid var(--a-border); }
.pg-error { font: 13px/1.5 var(--mono); padding: 10px 14px; border-bottom: 1px solid var(--a-border); white-space: pre-wrap; }
.pg-ok { font-size: 13px; }
@media (max-width: 860px) { .pg { grid-template-columns: 1fr; height: auto; } .pg-editor { min-height: 420px; } .pg-frame { min-height: 420px; } }

/* ---------- examples / source ---------- */
.example { padding: 24px !important; border-radius: 16px !important; box-shadow: var(--shadow); align-items: stretch !important; }
.tag { font: 12px var(--mono); color: var(--a-muted); background: var(--soft); border: 1px solid var(--a-border); border-radius: 6px; padding: 2px 8px; }
.file-row { padding: 14px 18px !important; border-radius: 12px !important; cursor: pointer; }
.file-row:hover, .file-row.active { border-color: var(--brand) !important; }
.mono { font-family: var(--mono); font-size: 14px; }

/* ---------- footer ---------- */
.footer { border-top: 1px solid var(--a-border); padding: 48px 0 56px; margin-top: 40px; font-size: 14px; }
.footer a { color: var(--a-muted); text-decoration: none; }
.footer a:hover { color: var(--brand); }
.footer .col-title { font-weight: 700; margin-bottom: 6px; display: block; }
.made { color: var(--a-muted); }
.page-pad { padding-top: 48px; padding-bottom: 32px; }
.page-title { font-size: clamp(34px, 5vw, 52px) !important; font-weight: 800; margin: 8px 0 0; }
.page-lead { color: var(--a-muted); font-size: 19px; max-width: 760px; margin-top: 12px; display: block; }
.src-view { min-width: 0; }
@media (min-width: 1024px) { .src-view { grid-column: span 2; } }
.hero-title, .section-title, .page-title { text-wrap: balance; }
.compare .code pre { max-height: 760px; }
.pg-bar button, .pg-bar select { height: 34px; }
.docs-toggle { align-self: flex-start; margin-bottom: 12px; }

/* Demo cards: a screenshot that opens the demo. */
.example.demo { padding: 0 !important; overflow: hidden; }
.demo > :not(.demo-shot) { margin-left: 20px; margin-right: 20px; }
.demo > .a-row { margin-bottom: 20px; margin-top: auto; }
.demo-shot { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-bottom: 1px solid var(--a-border); background: var(--a-bg); }
.demo-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .4s ease; }
.demo:hover .demo-shot img { transform: scale(1.03); }
.btn.small { font-size: 14px; padding: 8px 14px; border-radius: 10px; }

/* ---------- motion ----------
   Subtle and brief: things arrive from a little below and sharpen; nothing moves after that.
   The `motion` class is set by JavaScript, so without it (and without JS) everything is simply
   visible. --t0 is the time already elapsed when the live app replaced the static page, so the
   entrance picks up where it was instead of starting over. */
:root { --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1); --t0: 0ms; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes drift { to { background-position: 0 -48px; } }
@keyframes mesh {
  0% { background-position: 0% 0%, 100% 10%, 50% 100%, 0 0; }
  50% { background-position: 30% 20%, 70% 40%, 20% 80%, 0 0; }
  100% { background-position: 10% 60%, 90% 0%, 80% 70%, 0 0; }
}
@keyframes sheen { to { --sheen: 360deg; } }
.hero .eyebrow, .hero-title, .hero .lead, .hero .cta { animation: rise 0.9s var(--ease-out) both; animation-delay: calc(var(--t0) + var(--d, 0ms)); }
.hero-title { --d: 90ms; }
.hero .lead { --d: 180ms; }
.hero .cta { --d: 270ms; }
/* A faint dot grid that drifts, fading out towards the edges. */
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(color-mix(in srgb, var(--a-fg) 7%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--a-fg) 7%, transparent) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 30%, #000 10%, transparent 72%); mask-image: radial-gradient(ellipse 70% 80% at 50% 30%, #000 10%, transparent 72%); animation: drift 40s linear infinite; }
.motion .reveal { opacity: 0; transform: translateY(16px); filter: blur(4px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out), filter 0.8s var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
.motion .reveal.in { opacity: 1; transform: none; filter: blur(0); transition-delay: 0s; transition-duration: 0.3s; } /* once in, hovers answer quickly */
/* Hover: a small lift, a slide for the arrow. */
.btn { transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out), border-color 0.2s, background 0.2s; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1); }
.btn:active { transform: translateY(0); transition-duration: 0.08s; }
.feature, .stat, .example { transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), border-color 0.3s; }
.feature:hover, .stat:hover, .example:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04), 0 16px 36px rgba(0, 0, 0, 0.09); border-color: color-mix(in srgb, var(--a-fg) 18%, var(--a-border)); }
.eyebrow { transition: transform 0.25s var(--ease-out), background 0.2s; }
.eyebrow:hover { transform: translateY(-1px); }
.nav a { position: relative; transition: color 0.2s; }
.logo::before { transition: transform 0.4s var(--ease-out); }
.logo:hover::before { transform: rotate(-8deg) scale(1.06); }
.pill { transition: transform 0.2s var(--ease-out), border-color 0.2s, background 0.2s; }
.pill:hover { transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) {
  .hero .eyebrow, .hero-title, .hero .lead, .hero .cta, .hero::before, .hero::after { animation: none; }
  .motion .reveal { opacity: 1; transform: none; filter: none; transition: none; }
  .btn, .feature, .stat, .example, .eyebrow, .pill, .logo::before { transition: none; }
}