/* Pyralysis website. Colours come from the logo: the deep indigo wordmark and the
   indigo → purple → rose → orange → yellow gradient of the mark. */

:root {
  --night: #0b0820;
  --night-2: #16113a;
  --indigo: #170b82;
  --purple: #8e3bd6;
  --rose: #d4566e;
  --orange: #ef9a4a;
  --yellow: #f2e85b;
  --grad: linear-gradient(90deg, #4a1fc4 0%, #8e1ba6 30%, #d4566e 62%, #ef9a4a 84%, #f2e85b 100%);

  --bg: #ffffff;
  --bg-alt: #f6f4fc;
  --text: #1c1a33;
  --muted: #5c5978;
  --line: #e5e1f3;
  --card: #ffffff;
  --link: #5b2bd0;
  --shadow: 0 1px 2px rgba(23, 11, 130, .06), 0 8px 24px rgba(23, 11, 130, .07);

  --code-bg: #120e2b;
  --code-text: #e8e6f5;
  --code-muted: #8d89ad;

  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-head: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --radius: 14px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e0c1d;
    --bg-alt: #131027;
    --text: #ecebf6;
    --muted: #a9a6c4;
    --line: #2a2546;
    --card: #17142e;
    --link: #b8a4ff;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.6 var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
code { font-family: var(--font-mono); font-size: .88em; background: var(--bg-alt); border: 1px solid var(--line); border-radius: 6px; padding: .05em .35em; }
h1, h2, h3 { font-family: var(--font-head); line-height: 1.15; letter-spacing: -.01em; margin: 0; }

.container { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* ---- navigation ---- */
.nav {
  position: sticky; top: 0; z-index: 10;
  background: rgba(11, 8, 32, .72);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.nav--solid { background: var(--night); }
.nav__inner { max-width: 1120px; margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; gap: 28px; }
.nav__brand { display: flex; align-items: center; gap: 10px; color: #fff; font: 700 1.15rem var(--font-head); }
.nav__brand:hover { text-decoration: none; }
.nav__links { display: flex; gap: 22px; margin-left: auto; }
.nav__actions { display: flex; gap: 10px; }
.nav__actions .btn { gap: 0; }
.nav__links a { color: rgba(255, 255, 255, .78); font-size: .93rem; font-weight: 500; }
.nav__links a:hover { color: #fff; text-decoration: none; }

/* ---- buttons (solid colours; the gradient is kept for thin accents) ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .72rem 1.25rem; border-radius: 999px; font-weight: 600; font-size: .96rem;
  border: 1px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn--small { padding: .42rem .95rem; font-size: .88rem; }
.btn__icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.btn--light { background: #fff; color: var(--indigo); box-shadow: 0 6px 22px rgba(0, 0, 0, .25); }
.btn--light:hover { box-shadow: 0 10px 28px rgba(0, 0, 0, .32); }
.btn--outline-light { color: #fff; border-color: rgba(255, 255, 255, .34); background: rgba(255, 255, 255, .05); }
.btn--outline-light:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .5); }
.btn--text-light { color: rgba(255, 255, 255, .85); padding-left: .4rem; padding-right: .4rem; }
.btn--text-light:hover { color: #fff; transform: none; text-decoration: underline; }
.btn--solid { background: var(--indigo); color: #fff; }
.btn--solid:hover { box-shadow: 0 8px 22px rgba(23, 11, 130, .3); }
.btn--outline { color: var(--link); border-color: var(--line); background: var(--card); }
.btn--outline:hover { border-color: var(--purple); }
@media (prefers-color-scheme: dark) {
  .btn--solid { background: #6d4ae8; }
}

/* ---- hero ---- */
.hero {
  position: relative; overflow: hidden; color: #fff;
  background:
    radial-gradient(900px 500px at 85% 20%, rgba(142, 27, 166, .35), transparent 60%),
    radial-gradient(700px 500px at 10% 90%, rgba(74, 31, 196, .35), transparent 60%),
    linear-gradient(180deg, var(--night) 0%, var(--night-2) 100%);
  margin-top: -57px; padding-top: 57px;
}
.hero__rings { position: absolute; width: 1100px; right: -260px; top: -180px; opacity: .9; pointer-events: none; }
.hero__inner {
  position: relative; max-width: 1120px; margin: 0 auto; padding: 96px 24px 104px;
  display: grid; grid-template-columns: .95fr 1.15fr; gap: 56px; align-items: center;
}
.lead em { color: var(--orange); font-style: normal; }
.eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; font-weight: 600; color: var(--orange); margin: 0 0 18px; }
.hero h1 { font-size: clamp(2.1rem, 3.6vw, 2.9rem); font-weight: 700; }
.hero h1::after { content: ""; display: block; width: 96px; height: 4px; border-radius: 4px; background: var(--grad); margin-top: 22px; }
.lead { font-size: 1.13rem; color: rgba(255, 255, 255, .8); margin: 22px 0 30px; max-width: 34em; }
.lead strong { color: #fff; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.install-line { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.install-line code { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); color: #fff; padding: .5rem .85rem; border-radius: 10px; font-size: .92rem; }
.install-line code::before { content: "$ "; color: var(--orange); }
.install-line__meta { color: rgba(255, 255, 255, .6); font-size: .88rem; }
.install-line__meta a { color: rgba(255, 255, 255, .85); }
.hero__figure { margin: 0; }
.hero__figure img {
  width: 100%; border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45), 0 0 0 6px rgba(255, 255, 255, .03);
  background: #fff;
}
.hero__figure figcaption { color: rgba(255, 255, 255, .55); font-size: .84rem; margin-top: 12px; text-align: center; }

/* ---- sections ---- */
.section { padding: 92px 0; }
.section--alt { background: var(--bg-alt); }
.section--first { padding-top: 64px; }
.section__title { font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 700; }
.section__title--small { font-size: 1.5rem; margin-top: 64px; }
.section__lead { color: var(--muted); font-size: 1.07rem; max-width: 46em; margin: 14px 0 40px; }
.page-title { font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom: 32px; }
.note { color: var(--muted); font-size: .93rem; margin-top: 22px; }

/* ---- feature cards ---- */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.card {
  position: relative; display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 22px 22px; color: var(--text); box-shadow: var(--shadow);
  transition: transform .18s ease, border-color .18s ease;
}
.card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; border-radius: var(--radius) var(--radius) 0 0; background: var(--grad); opacity: 0; transition: opacity .18s ease; }
.card:hover { transform: translateY(-3px); text-decoration: none; border-color: transparent; }
.card:hover::before { opacity: 1; }
.card__icon { width: 34px; height: 34px; fill: none; stroke: var(--purple); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 16px; }
.card__icon .fill { fill: var(--orange); stroke: none; }
.card h3 { font-size: 1.13rem; margin-bottom: 10px; }
.card p { color: var(--muted); font-size: .94rem; margin: 0 0 18px; flex: 1; }
.card__more { color: var(--link); font-weight: 600; font-size: .9rem; }

/* ---- contribute ---- */
.contribute { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 28px; }
.contribute__card { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; border-radius: var(--radius); background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); color: #fff; }
.contribute__card:hover { text-decoration: none; border-color: var(--orange); background: rgba(255, 255, 255, .08); }
.contribute__card b { font: 600 1.02rem var(--font-head); }
.contribute__card b::after { content: " →"; color: var(--orange); }
.contribute__card span { color: rgba(255, 255, 255, .72); font-size: .9rem; }
.contribute__card code, .note--light code { color: #fff; background: rgba(255, 255, 255, .12); }
.note--light { color: rgba(255, 255, 255, .66); }
.note--light a { color: #fff; }

/* ---- real-data gallery ---- */
.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.gallery-card { margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow); }
.gallery-card .compare { box-shadow: none; background: #000; }
.gallery-card figcaption { color: var(--muted); font-size: .9rem; line-height: 1.55; margin-top: 12px; padding: 0 4px; }
.gallery-card figcaption b { color: var(--text); font-family: var(--font-head); font-size: 1.02rem; }
.gallery-card__credit { font-size: .82rem; }
.gallery-card__views { display: inline-flex; gap: 4px; padding: 4px; margin-top: 12px; border-radius: 999px; background: var(--bg-alt); border: 1px solid var(--line); }
.gallery-card__views button { font: 600 .84rem var(--font-sans); color: var(--muted); background: none; border: 0; padding: .35rem .85rem; border-radius: 999px; cursor: pointer; }
.gallery-card__views button[aria-selected="true"] { background: var(--purple); color: #fff; }
/* ---- gallery ---- */
.shot { margin: 0 0 40px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); }
.shot:last-child { margin-bottom: 0; }
.shot img { border-radius: 8px; background: #fff; }
.shot figcaption { color: var(--muted); font-size: .93rem; margin-top: 14px; padding: 0 4px; }
.shot figcaption b { color: var(--text); }

/* ---- code ---- */
.principles { list-style: none; padding: 0; margin: 0 0 36px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.principles li { display: flex; flex-direction: column; padding: 14px 18px; border-left: 3px solid transparent; border-image: var(--grad) 1; background: var(--bg-alt); border-radius: 0 10px 10px 0; }
.principles a { font-weight: 600; font-family: var(--font-head); font-size: 1.05rem; }
.principles span { color: var(--muted); font-size: .9rem; }
.code-card { background: var(--code-bg); border-radius: var(--radius); box-shadow: 0 20px 50px rgba(11, 8, 32, .28); overflow: hidden; border: 1px solid rgba(255, 255, 255, .06); }
.code-card--single { max-width: 860px; }
.code-card__bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.code-card__bar span { width: 11px; height: 11px; border-radius: 50%; background: #3a3460; }
.code-card__bar span:nth-child(1) { background: var(--rose); }
.code-card__bar span:nth-child(2) { background: var(--orange); }
.code-card__bar span:nth-child(3) { background: var(--yellow); }
.code-card__bar em { color: var(--code-muted); font-style: normal; font-family: var(--font-mono); font-size: .8rem; margin-left: 8px; }
.copy { margin-left: auto; font: 500 .78rem var(--font-sans); color: var(--code-text); background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); border-radius: 7px; padding: .3rem .7rem; cursor: pointer; }
.copy:hover { background: rgba(255, 255, 255, .16); }
.code pre { margin: 0; padding: 20px 22px; overflow-x: auto; color: var(--code-text); font: 13.5px/1.65 var(--font-mono); }
/* Pygments tokens (build.py highlights with its HtmlFormatter, classes only). */
.code .k, .code .kn, .code .kc, .code .ow { color: #c792ea; }
.code .n, .code .nn { color: var(--code-text); }
.code .nf, .code .nc { color: #82aaff; }
.code .s, .code .s1, .code .s2, .code .sa, .code .se { color: #f2c27a; }
.code .mi, .code .mf, .code .m { color: #f78c6c; }
.code .o, .code .p { color: #a9a5c9; }
.code .c, .code .c1, .code .cm { color: var(--code-muted); font-style: italic; }
.code .nb, .code .bp { color: #ff9cac; }
.code .nv, .code .na { color: #9be3c9; }
.code .gp { color: var(--orange); }

/* ---- stack ---- */
.stack { margin-top: 56px; }
.stack__label { text-transform: uppercase; letter-spacing: .14em; font-size: .76rem; font-weight: 600; color: var(--muted); margin: 0 0 18px; }
.stack__logos { display: flex; flex-wrap: wrap; gap: 14px; }
.stack__logos a { display: flex; align-items: center; gap: 10px; padding: 9px 14px 9px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--text); font-size: .9rem; font-weight: 500; }
.stack__logos a:hover { text-decoration: none; border-color: var(--purple); }
.stack__logos img { width: 26px; height: 26px; object-fit: contain; }
.stack__logos .wordmark { padding: 9px 16px; }
.stack__logos .wordmark img { width: auto; height: 24px; }

/* ---- activity ---- */
.counters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 34px 0 30px; }
.counter { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; box-shadow: var(--shadow); }
.counter b { display: inline-block; margin-bottom: 6px; font: 700 2.4rem/1.05 var(--font-head); background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.counter span { display: block; color: var(--muted); font-size: .92rem; }
.charts { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.charts img { width: 100%; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.charts__wide { grid-column: 1 / -1; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.forks { width: 100%; border-collapse: collapse; font-size: .95rem; }
.forks th, .forks td { text-align: left; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.forks tr:last-child td { border-bottom: none; }
.forks th { color: var(--muted); font-weight: 600; font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; }
.forks td:last-child, .forks th:last-child { text-align: right; color: var(--muted); white-space: nowrap; }

/* ---- footer ---- */
.footer { background: var(--night); color: rgba(255, 255, 255, .7); padding: 48px 0 40px; }
.footer__inner { display: grid; grid-template-columns: auto 1fr; gap: 20px 40px; align-items: center; }
.footer__brand { display: flex; align-items: center; gap: 14px; }
.footer__brand b { display: block; color: #fff; font: 700 1.1rem var(--font-head); }
.footer__brand span { font-size: .84rem; }
.footer__links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 22px; }
.footer__links a, .footer__meta a { color: rgba(255, 255, 255, .85); }
.footer__meta { grid-column: 1 / -1; margin: 18px 0 0; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: .84rem; }
.footer__affiliations { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 32px; margin-top: 18px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .1); }
.footer__affiliations > span { font-size: .84rem; text-transform: uppercase; letter-spacing: .08em; }
.footer__logos { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 40px; }
.footer__logos img { display: block; height: 60px; width: auto; max-width: 240px; object-fit: contain; filter: brightness(0) invert(1); opacity: .75; transition: opacity .2s; }
.footer__logos a:hover img, .footer__logos a:focus-visible img { opacity: 1; }


/* ---- before/after slider ---- */
.compare { position: relative; aspect-ratio: 1; border-radius: var(--radius); overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5), 0 0 0 6px rgba(255, 255, 255, .03); user-select: none; }
.compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.compare__top { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.compare__handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px;
  background: #fff; box-shadow: 0 0 12px rgba(0, 0, 0, .5); pointer-events: none; }
.compare__handle::after { content: "⟷"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 42px; height: 42px; border-radius: 50%; background: #fff; color: var(--indigo);
  display: grid; place-items: center; font-weight: 700; box-shadow: 0 4px 16px rgba(0, 0, 0, .4); }
.compare__range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.compare__label { position: absolute; top: 14px; padding: .25rem .65rem; border-radius: 999px; font-size: .78rem; font-weight: 600;
  background: rgba(11, 8, 32, .72); color: #fff; backdrop-filter: blur(6px); pointer-events: none; }
.compare__label--left { left: 14px; }
.compare__label--right { right: 14px; }

/* ---- numbers band ---- */
.numbers { background: var(--night-2); color: #fff; border-top: 1px solid rgba(255, 255, 255, .06); }
.numbers__inner { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; padding-top: 34px; padding-bottom: 38px; }
.numbers b { display: block; font: 700 2.1rem/1.1 var(--font-head); color: #fff; }
.numbers b::after { content: ""; display: block; width: 28px; height: 3px; border-radius: 3px; background: var(--grad); margin: 10px 0 8px; }
.numbers span { color: rgba(255, 255, 255, .66); font-size: .9rem; }

/* ---- kicker, math ---- */
.kicker { text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; font-weight: 600; color: var(--purple); margin: 0 0 12px; }
.kicker--light { color: var(--orange); }
.math { font-family: "Space Grotesk", var(--font-sans); font-style: italic; white-space: nowrap; }

/* ---- why ---- */
.why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.why__item { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.why__glyph { font: 700 1.5rem/1 var(--font-head); color: var(--indigo); margin-bottom: 18px; letter-spacing: -.01em; }
.why__glyph i { font-style: normal; color: var(--rose); margin: 0 .15em; }
.why__glyph sub { font-size: .6em; }
.why__item h3 { font-size: 1.15rem; margin-bottom: 10px; }
.why__item p { color: var(--muted); font-size: .95rem; margin: 0 0 16px; flex: 1; }
.why__item a { font-weight: 600; font-size: .9rem; }
@media (prefers-color-scheme: dark) { .why__glyph { color: #c9bbff; } }

/* ---- dark section + M87 demo ---- */
.section--dark { background: radial-gradient(700px 400px at 80% 30%, rgba(142, 27, 166, .28), transparent 60%), var(--night); color: #fff; }
.section--dark .section__title { color: #fff; }
.section__lead--light { color: rgba(255, 255, 255, .72); }
.demo { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.demo > * { min-width: 0; }
.demo__tabs { display: inline-flex; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); margin-bottom: 18px; flex-wrap: wrap; }
.demo__tabs button { font: 600 .92rem var(--font-sans); color: rgba(255, 255, 255, .75); background: none; border: 0; padding: .5rem 1rem; border-radius: 999px; cursor: pointer; }
.demo__tabs button[aria-selected="true"] { background: #fff; color: var(--indigo); }
.switch { display: flex; align-items: center; gap: 10px; color: rgba(255, 255, 255, .85); font-weight: 500; margin-bottom: 20px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; }
.switch span { width: 40px; height: 22px; border-radius: 999px; background: rgba(255, 255, 255, .2); position: relative; transition: background .15s; }
.switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; }
.switch input:checked + span { background: var(--rose); }
.switch input:checked + span::after { transform: translateX(18px); }
.switch input:focus-visible + span { outline: 2px solid var(--orange); outline-offset: 2px; }
.prior { margin-bottom: 20px; padding: 16px 18px; border-radius: 12px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); }
.prior__objective { margin: 0 0 12px; color: #fff; font-size: 1.05rem; overflow-x: auto; overflow-y: hidden; }
/* KaTeX keeps the layout (fractions, sums, roots) but sets letters and numbers in the site's
   sans; only the large operators and delimiters keep KaTeX's own size fonts. */
.prior .katex,
.prior .katex .mathnormal, .prior .katex .mathit, .prior .katex .mathrm,
.prior .katex .mainrm, .prior .katex .textrm, .prior .katex .mop:not(.op-symbol) { font-family: var(--font-sans); }
.prior .katex { font-size: 1.12em; letter-spacing: .005em; }
.prior .katex .mathnormal { font-style: italic; }
.prior .katex-display { margin: 0; text-align: left; }
.prior .katex-display > .katex { text-align: left; }
.prior__terms { margin: 0; }
.prior__terms > div + div { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .1); }
.prior__terms dt { color: var(--orange); font-size: .98rem; overflow-x: auto; overflow-y: hidden; padding: 2px 0; margin-bottom: 6px; }
.prior__terms dd { margin: 0; color: rgba(255, 255, 255, .72); font-size: .9rem; line-height: 1.55; }
.code-card--demo .code pre { font-size: 14px; }
.demo__line { display: block; }
.demo__line.is-new { animation: flash .9s ease; }
@keyframes flash { from { background: rgba(239, 154, 74, .28); } to { background: transparent; } }
.demo__note { color: rgba(255, 255, 255, .55); font-size: .84rem; margin-top: 14px; }
.demo__note code { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .14); color: #fff; }
.demo__figure { margin: 0; }
.demo__figure img { width: 100%; aspect-ratio: 1; image-rendering: pixelated; border-radius: var(--radius); border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 30px 70px rgba(0, 0, 0, .5); background: #000; }
.demo__figure figcaption { text-align: center; color: rgba(255, 255, 255, .7); margin-top: 12px; font-weight: 500; }

/* ---- CLEAN comparison ---- */
.vs { width: 100%; border-collapse: collapse; font-size: .96rem; }
.vs th, .vs td { text-align: left; padding: 16px 20px; border-bottom: 1px solid var(--line); vertical-align: top; }
.vs tr:last-child th, .vs tr:last-child td { border-bottom: none; }
.vs thead th { font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.vs thead th:last-child { color: var(--purple); }
.vs tbody th { width: 18%; color: var(--text); font-weight: 600; }
.vs tbody td:nth-child(2) { color: var(--muted); width: 38%; }
.vs tbody td:last-child { color: var(--text); background: linear-gradient(90deg, rgba(142, 59, 214, .06), transparent); }

/* ---- steps ---- */
.steps { list-style: none; counter-reset: step; padding: 0; margin: 0 0 32px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.steps li { counter-increment: step; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; }
.steps li::before { content: counter(step); display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--indigo); color: #fff; font: 700 .85rem var(--font-head); margin-bottom: 10px; }
.steps b { display: block; font-family: var(--font-head); font-size: 1.05rem; }
.steps span { color: var(--muted); font-size: .9rem; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* ---- demo modes and chips ---- */
.demo-modes { display: inline-flex; gap: 6px; margin: 0 0 30px; padding: 5px; border-radius: 14px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); flex-wrap: wrap; }
.demo-modes button { font: 600 .95rem var(--font-head); color: rgba(255, 255, 255, .7); background: none; border: 0; padding: .6rem 1.1rem; border-radius: 10px; cursor: pointer; }
.demo-modes button[aria-selected="true"] { background: rgba(255, 255, 255, .14); color: #fff; box-shadow: inset 0 -2px 0 var(--orange); }
.demo[hidden] { display: none; }
.demo__label { text-transform: uppercase; letter-spacing: .12em; font-size: .74rem; font-weight: 600; color: rgba(255, 255, 255, .55); margin: 0 0 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.chips button { font: 500 .86rem var(--font-sans); color: rgba(255, 255, 255, .8); background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .16); padding: .38rem .8rem; border-radius: 999px; cursor: pointer; }
.chips button:hover { border-color: rgba(255, 255, 255, .4); }
.chips button[aria-pressed="true"] { background: #fff; color: var(--indigo); border-color: #fff; }

/* ---- where it fits ---- */
.fit { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.fit article { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; border-top: 3px solid transparent; border-image: var(--grad) 1 0 0 0; }
.fit h3 { font-size: 1.05rem; margin-bottom: 8px; }
.fit p { color: var(--muted); font-size: .93rem; margin: 0; }
.fitbox { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 26px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--card); }
.fitbox > div { padding: 24px 28px; }
.fitbox > div + div { border-left: 1px solid var(--line); background: var(--bg-alt); }
.fitbox h3 { font-size: 1.05rem; margin-bottom: 10px; }
.fitbox ul { margin: 0; padding-left: 1.1rem; color: var(--muted); }
.fitbox li { margin: 6px 0; }
.fitbox > div:first-child li::marker { color: var(--purple); }

/* ---- engineering ---- */
.patterns { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 34px; }
.patterns article { padding: 20px 22px; border-radius: var(--radius); background: var(--bg-alt); border: 1px solid var(--line); }
.patterns b { font: 700 1.1rem var(--font-head); color: var(--indigo); }
.patterns p { color: var(--muted); font-size: .93rem; margin: 8px 0 0; }
@media (prefers-color-scheme: dark) { .patterns b { color: #c9bbff; } }
.arch { display: grid; grid-template-columns: 1.3fr .7fr; gap: 28px; align-items: center; }
.arch .shot { margin: 0; }
.arch__facts { display: grid; gap: 16px; }
.arch__facts div { border-left: 3px solid var(--purple); padding: 4px 0 4px 16px; }
.arch__facts b { display: block; font: 700 1.5rem var(--font-head); }
.arch__facts span { color: var(--muted); font-size: .93rem; }

/* ---- heritage ---- */
.heritage { background: linear-gradient(120deg, var(--night) 0%, #241154 100%); color: #fff; padding: 64px 0; }
.heritage__text, .heritage__cite { max-width: 900px; }
.heritage__text { font: 500 1.3rem/1.55 var(--font-head); margin: 0 0 18px; color: rgba(255, 255, 255, .9); }
.heritage__text b { color: #fff; background: linear-gradient(transparent 62%, rgba(239, 154, 74, .45) 62%); }
.heritage__cite { color: rgba(255, 255, 255, .6); font-size: .88rem; margin: 0; }
.heritage__cite a { color: rgba(255, 255, 255, .85); }

/* ---- responsive ---- */
@media (max-width: 960px) {
  .hero__inner, .demo { grid-template-columns: 1fr; }
  .cards, .principles, .why, .steps, .fit, .patterns, .contribute { grid-template-columns: repeat(2, 1fr); }
  .arch, .fitbox { grid-template-columns: 1fr; }
  .fitbox > div + div { border-left: 0; border-top: 1px solid var(--line); }
  .numbers__inner { grid-template-columns: repeat(3, 1fr); }
  .nav__links { display: none; }
  .nav__actions { margin-left: auto; }
  .hero__inner { padding: 72px 24px 80px; }
}
@media (max-width: 680px) {
  .footer__logos img { height: 48px; }
  .nav__links, .hide-sm { display: none; }
  .nav__inner { justify-content: space-between; }
  .cards, .counters, .charts, .principles, .why, .steps, .fit, .patterns, .gallery, .contribute { grid-template-columns: 1fr; }
  .heritage__text { font-size: 1.1rem; }
  .numbers__inner { grid-template-columns: repeat(2, 1fr); }
  .vs th, .vs td { padding: 12px; }
  .code pre { font-size: 12px; padding: 16px; }
  .section { padding: 64px 0; }
  .container, .hero__inner, .nav__inner { padding-left: 16px; padding-right: 16px; }
  .footer__inner { grid-template-columns: 1fr; }
  .footer__links { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .card { transition: none; }
}