@font-face {
  font-family: 'Geist';
  src: url('/fonts/geist-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
:root {
  color-scheme: light dark;
  --bg: #f6f7f9; --surface: #ffffff; --surface-2: #eef0f3; --fg: #14161a; --muted: #596070; --line: #dde1e7;
  --accent: #b24609; --accent-solid: #c2510a; --on-accent: #ffffff; --accent-soft: rgba(194, 81, 10, 0.1);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e0f12; --surface: #16181d; --surface-2: #1f2229; --fg: #eceef2; --muted: #9aa1ae; --line: #2b2f38;
    --accent: #f08a4b; --accent-soft: rgba(240, 138, 75, 0.14);
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif; line-height: 1.6; font-size: 17px; }
a { color: var(--accent); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.wrap { width: 100%; max-width: 62rem; margin: 0 auto; padding: 0 1.25rem; }
.skip { position: absolute; left: -999px; top: 0; background: var(--surface); padding: .75rem 1rem; z-index: 10; }
.skip:focus { left: .5rem; top: .5rem; }

header.top { border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 92%, transparent); position: sticky; top: 0; backdrop-filter: blur(8px); z-index: 5; }
header.top .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 4rem; gap: 1rem; }
.brand { display: flex; align-items: center; gap: .6rem; color: var(--fg); text-decoration: none; font-weight: 650; font-size: 1.4rem; letter-spacing: -0.02em; }
.brand svg { width: 2.4rem; height: 2.4rem; }
nav.links { display: flex; align-items: center; gap: .25rem; }
nav.links a.plain { color: var(--muted); text-decoration: none; padding: .75rem .6rem; min-height: 2.75rem; display: inline-flex; align-items: center; }
nav.links a.plain:hover { color: var(--fg); }
@media (max-width: 34rem) { nav.links a.plain { display: none; } }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: 0 1.4rem; border-radius: 999px; font-weight: 650; text-decoration: none; background: var(--accent-solid); color: var(--on-accent); border: 1px solid transparent; }
.btn:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; color: var(--fg); border-color: var(--line); }
.btn.ghost:hover { background: var(--surface-2); }
.btn.small { min-height: 2.5rem; padding: 0 1.1rem; font-size: .95rem; }

.hero { padding-block: 3.5rem 2.5rem; display: grid; gap: 2rem; align-items: center; }
@media (min-width: 52rem) { .hero { grid-template-columns: 1.3fr 1fr; padding-block: 5.5rem 4rem; } }
h1 { font-size: clamp(2.2rem, 7vw, 3.6rem); line-height: 1.08; letter-spacing: -0.03em; margin: 0 0 1rem; }
.lead { font-size: 1.2rem; color: var(--muted); max-width: 34rem; margin: 0 0 1.75rem; }
.cta { display: flex; flex-wrap: wrap; gap: .75rem; }
.hero .art { display: flex; justify-content: center; }
.fox-btn { background: none; border: 0; padding: 0; cursor: pointer; border-radius: 1.5rem; -webkit-tap-highlight-color: transparent; }
.eye-wink, .mouth-wink { display: none; }
.fox-wink .eye-wink, .fox-wink .mouth-wink { display: inline; }
.fox-wink .eye-open, .fox-wink .mouth-smile { display: none; }
.fox-wink .fox-ear { transform-box: fill-box; transform-origin: 50% 100%; animation: fox-wiggle .42s ease-in-out 2; }
.fox-wink svg > g:not(.fox-ear) .fox-ear { animation-delay: .12s; }
@keyframes fox-wiggle { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-9deg); } 70% { transform: rotate(7deg); } }
@media (prefers-reduced-motion: reduce) { .fox-wink .fox-ear { animation: none; } }
.hero .art svg { width: min(15rem, 60vw); height: auto; filter: drop-shadow(0 18px 30px rgba(194, 81, 10, .25)); }

section.entry { padding: 1.5rem 0; border-top: 1px solid var(--line); }
section.entry .wrap { display: grid; gap: .25rem; }
section.entry .def { max-width: 40rem; }
section.entry p { margin: 0; }
section.entry .word { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .75rem; }
section.entry .word strong { font-size: 1.5rem; letter-spacing: -0.02em; }
section.entry .say { color: var(--muted); font-size: 1rem; }
section.entry .def { color: var(--muted); }
section.entry .def em { font-style: italic; margin-right: .25rem; }
section.block { padding: 3rem 0; border-top: 1px solid var(--line); }
section.block h2 { font-size: clamp(1.6rem, 4.5vw, 2.1rem); letter-spacing: -0.02em; line-height: 1.2; margin: 0 0 .5rem; }
section.block > .wrap > p.sub { color: var(--muted); max-width: 40rem; margin: 0 0 2rem; }
.grid { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40rem) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60rem) { .grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 1.1rem; padding: 1.25rem; }
.card h3 { margin: 0 0 .35rem; font-size: 1.1rem; }
.card p { margin: 0; color: var(--muted); font-size: .98rem; }
.step { counter-increment: step; }
.step::before { content: counter(step); display: inline-flex; width: 2rem; height: 2rem; align-items: center; justify-content: center; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-weight: 700; margin-bottom: .6rem; }
.steps { counter-reset: step; }
ul.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
ul.ticks li { padding-left: 1.7rem; position: relative; }
ul.ticks li::before { content: ''; position: absolute; left: 0; top: .55em; width: .7rem; height: .7rem; border-radius: 50%; background: var(--accent-solid); }
ul.ticks.soon li::before { background: transparent; border: 2px solid var(--muted); }
.two { display: grid; gap: 1.25rem; }
@media (min-width: 46rem) { .two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.note { background: var(--accent-soft); border-radius: 1rem; padding: 1rem 1.25rem; }

footer { border-top: 1px solid var(--line); padding: 2rem 0 3rem; color: var(--muted); font-size: .95rem; }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; }
footer nav { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
footer a { color: var(--muted); display: inline-flex; min-height: 2.5rem; align-items: center; }
footer a:hover { color: var(--fg); }

main.doc { padding: 2.5rem 0 4rem; }
.doc .wrap { max-width: 46rem; }
.doc h1 { font-size: clamp(2rem, 6vw, 2.6rem); margin-top: 0; }
.doc h2 { font-size: 1.35rem; margin: 2.2rem 0 .4rem; letter-spacing: -0.01em; }
.doc p, .doc li { color: var(--fg); }
.doc ul, .doc ol { padding-left: 1.3rem; }
.doc li { margin: .3rem 0; }
.doc .meta { color: var(--muted); font-size: .95rem; }
.doc table { width: 100%; border-collapse: collapse; font-size: .95rem; display: block; overflow-x: auto; }
.doc th, .doc td { text-align: left; padding: .6rem .7rem; border-bottom: 1px solid var(--line); vertical-align: top; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* Contact form */
.form { display: grid; gap: 1rem; margin: 1.5rem 0; }
.form label { font-weight: 600; font-size: .95rem; display: block; margin-bottom: .3rem; }
.form input, .form textarea { width: 100%; font: inherit; color: var(--fg); background: var(--surface); border: 1px solid var(--line); border-radius: .8rem; padding: .8rem 1rem; min-height: 3rem; }
.form textarea { min-height: 9rem; resize: vertical; }
.form .trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.status { margin: 1rem 0; padding: .9rem 1.1rem; border-radius: .9rem; display: none; }
.status.ok { background: color-mix(in srgb, #138a55 16%, transparent); }
.status.err { background: color-mix(in srgb, #cc2f3f 14%, transparent); }
.status:target, .status.show { display: block; }

/* Brand guidelines page */
.brandpage .intro { padding-block: 3rem 2rem; }
.brandpage h1 { font-size: clamp(2rem, 6vw, 3rem); letter-spacing: -0.03em; line-height: 1.1; margin: 0 0 .75rem; }
.toc { display: flex; flex-wrap: wrap; gap: .25rem .5rem; margin-top: 1.25rem; }
.toc a { color: var(--muted); text-decoration: none; padding: .6rem .8rem; min-height: 2.75rem; display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; font-size: .95rem; }
.toc a:hover { color: var(--fg); }
.brandpage h3.label { font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 1.5rem 0 .6rem; }
.brandpage .note { color: var(--muted); font-size: .95rem; max-width: 40rem; margin: 1rem 0 0; }
.entry-inline { margin-bottom: 1.25rem; }
.entry-inline p { margin: 0; }
.entry-inline .word { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .75rem; }
.entry-inline .word strong { font-size: 1.5rem; letter-spacing: -0.02em; }
.entry-inline .say, .entry-inline .def { color: var(--muted); }
ul.ticks.tight { margin-top: 1.25rem; }
.tile { border-radius: 1.25rem; min-height: 9rem; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.tile.dark { background: #16181D; color: #ECEEF2; }
.tile.light { background: #FFFFFF; color: #14161A; border: 1px solid var(--line); }
.tile.cream { background: #FFF3E6; aspect-ratio: 1; padding: 1rem; }
.tile.cream svg { width: 70%; height: auto; }
.lockup { display: inline-flex; align-items: center; gap: .75rem; }
.lockup svg { width: 3.5rem; height: 3.5rem; }
.lockup b { font-size: 3rem; font-weight: 650; letter-spacing: -0.04em; line-height: 1; }
.grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 60rem) { .grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
figure { margin: 0; }
.face figcaption { display: grid; gap: .15rem; margin-top: .6rem; font-size: .95rem; }
.face figcaption span { color: var(--muted); }
.grid.icons { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.app-icon { text-align: center; }
.app-icon img { width: min(8rem, 100%); height: auto; border-radius: 22%; }
.app-icon figcaption { margin-top: .5rem; font-size: .95rem; color: var(--muted); }
ul.swatches { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 52rem) { ul.swatches { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); } }
.sw { min-height: 6.5rem; padding: .75rem .85rem; border-radius: 1rem; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; }
.sw.on-light { color: #14161A; }
.sw.ring { border: 1px solid rgba(128, 128, 128, .4); }
.sw strong { font-size: .95rem; }
.sw code { font-family: 'Geist Mono', ui-monospace, monospace; font-size: .75rem; }
.sw span { font-size: .75rem; opacity: .85; line-height: 1.3; }
.type-card { display: grid; gap: 1.25rem; }
@media (min-width: 40rem) { .type-card { grid-template-columns: auto 1fr; align-items: start; } }
.type-card .aa { font-size: 5.5rem; font-weight: 600; line-height: .9; letter-spacing: -0.04em; }
.type-card .scale p { margin: 0 0 .5rem; }
.type-card .mono { font-family: 'Geist Mono', ui-monospace, monospace; font-size: .85rem; color: var(--muted); }
ul.icon-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 40rem) { ul.icon-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 60rem) { ul.icon-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
ul.icon-grid li { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem; min-height: 5rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--surface); }
ul.icon-grid span { font-size: .75rem; color: var(--muted); }
.controls-demo { display: grid; gap: .75rem; max-width: 22rem; }
.demo-btn { display: flex; align-items: center; justify-content: center; min-height: 3.5rem; border-radius: 1.25rem; background: #C2510A; color: #fff; font-weight: 600; font-size: 1.06rem; }
.demo-chips { display: flex; gap: .5rem; }
.demo-chip { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1rem; border-radius: 1.4rem; border: 1px solid var(--line); background: var(--surface); color: var(--muted); font-weight: 500; font-size: .875rem; }
.demo-chip.on { border-color: #F08A4B; background: rgba(240, 138, 75, .14); color: #B24609; font-weight: 600; }
@media (prefers-color-scheme: dark) { .demo-chip.on { color: #F08A4B; } }
ul.dl { list-style: none; padding: 0; margin: 0; display: grid; gap: .25rem; }
ul.dl a { display: inline-flex; align-items: center; min-height: 2.75rem; }