/* nitrateX — tokens from design/out/DESIGN_SPEC.md */
:root {
  --canvas: #090E18; --surface: #101827; --raised: #162235;
  --border: #243044; --border-hover: #42536D;
  --text: #F3F6FC; --text-2: #A7B3C7; --muted: #8392AA;
  --cyan: #22D3EE; --link: #22D3EE; --magenta: #E879F9; --amber: #F5BD56; --neutral-mark: #CBD5E1;
  --pos: #5EE0AE; --neg: #FF8797;
  --pill-live: #12392F; --pill-progress: #1D2B40; --pill-contrib: #33203E;
  --grid-line: rgba(36, 48, 68, .22);
}
/* light tokens, opt-in only via <html data-theme="light"> */
@media all {
  :root[data-theme="light"] {
    --canvas: #F7F9FC; --surface: #FFFFFF; --raised: #EEF2F7;
    --border: #D8E0EB; --border-hover: #A7B6CA;
    --text: #111827; --text-2: #4B5D73; --muted: #596A80;
    --cyan: #0891B2; --link: #087E96; --magenta: #A128B5; --amber: #986000; --neutral-mark: #4B5D73;
    --pos: #087A50; --neg: #B42343;
    --pill-live: #E0F4EA; --pill-progress: #E8EEF7; --pill-contrib: #F6E7FA;
    --grid-line: rgba(17, 24, 39, .04);
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
section[id], footer[id] { scroll-margin-top: 88px; }
body {
  background: var(--canvas); color: var(--text);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px; line-height: 24px; -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 4px; }
.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.num { font-variant-numeric: tabular-nums lining-nums; }

/* header */
.site-header { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--canvas) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid transparent; }
.site-header.scrolled { border-bottom-color: var(--border); }
.site-header .wrap { height: 80px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.wordmark { font-weight: 700; font-size: 28px; line-height: 32px; letter-spacing: -0.02em; text-decoration: none; }
.wordmark span { background: linear-gradient(90deg, var(--cyan), #E879F9); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nav { display: flex; align-items: center; gap: 32px; }
.nav a { font-size: 14px; font-weight: 500; color: var(--text-2); text-decoration: none; padding: 12px 0; }
.nav a:hover { color: var(--text); }
.lang { display: flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.lang a { font-size: 13px; font-weight: 500; color: var(--text-2); text-decoration: none; padding: 8px 12px; min-width: 44px; text-align: center; }
.lang a[aria-current="true"] { background: var(--raised); color: var(--link); }
.menu-btn { display: none; background: none; border: 1px solid var(--border); border-radius: 8px; color: var(--text); width: 44px; height: 44px; cursor: pointer; }

/* hero */
.hero .wrap { display: grid; grid-template-columns: 1.15fr 1fr; gap: 48px; align-items: center; padding-top: 80px; padding-bottom: 96px; }
.eyebrow { font-size: 12px; line-height: 18px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); }
.hero h1 { font-size: 64px; line-height: 70px; font-weight: 700; letter-spacing: -0.035em; margin: 20px 0 24px; }
.hero p.lead { font-size: 18px; line-height: 28px; color: var(--text-2); max-width: 540px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 20px; border-radius: 8px; font-size: 14px; font-weight: 600; text-decoration: none; transition: background .15s, border-color .15s; }
.btn-primary { background: #22D3EE; color: #08131D; }
.btn-primary:hover { background: #4ADEF2; }
.btn-secondary { background: var(--surface); color: var(--text); border: 1px solid var(--border); }
.btn-secondary:hover { border-color: var(--border-hover); }

/* Ten-second task flow; fixed SVG coordinates keep all motion in transforms. */
.stack { display: grid; grid-template-columns: 160px minmax(0, 1fr); align-items: center; gap: 16px; width: 100%; max-width: 460px; min-width: 0; justify-self: end; }
.stack svg { display: block; width: 160px; height: 360px; }
.stack ol { list-style: none; display: grid; grid-template-rows: repeat(4, 90px); }
.stack li { position: relative; display: grid; align-content: center; grid-template-columns: 22px minmax(0, 1fr); column-gap: 8px; font-size: 12px; line-height: 18px; color: var(--muted); }
.stack li b { font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--c); }
.stack li span:last-child { grid-column: 2; color: var(--text-2); }
.stack li::before { content: ""; position: absolute; left: -9px; top: 28px; bottom: 28px; width: 2px; border-radius: 2px; background: var(--c); opacity: 0; animation: pipe-stage 10s linear infinite; }
.pipe-track { stroke: var(--border-hover); }
.pipe-worker { fill: var(--raised); stroke: var(--border-hover); }
.pipe-node-base { fill: var(--surface); stroke: var(--border); }
.pipe-icon { stroke: var(--c); }
.pipe-halo { stroke: var(--c); opacity: 0; animation: pipe-stage 10s linear infinite; }
.pipe-stage-1 .pipe-halo, .stack li:nth-child(2)::before { animation-name: pipe-agents; }
.pipe-stage-2 .pipe-halo, .stack li:nth-child(3)::before { animation-name: pipe-verify; }
.pipe-stage-3 .pipe-halo, .stack li:nth-child(4)::before { animation-name: pipe-ship; }
.pipe-packet { fill: var(--cyan); stroke: var(--canvas); opacity: 0; animation: pipe-center 10s linear infinite; }
.pipe-packet-left { fill: var(--amber); animation-name: pipe-left; }
.pipe-packet-right { fill: var(--amber); animation-name: pipe-right; }
.pipe-complete { opacity: 0; animation: pipe-ship 10s linear infinite; }
.pipe-complete circle { fill: var(--surface); stroke: var(--pos); }
.pipe-complete path { stroke: var(--pos); }
@keyframes pipe-stage { 0%, 3%, 22%, 100% { opacity: 0; } 6%, 18% { opacity: 1; } }
@keyframes pipe-agents { 0%, 22%, 53%, 100% { opacity: 0; } 27%, 48% { opacity: 1; } }
@keyframes pipe-verify { 0%, 53%, 75%, 100% { opacity: 0; } 58%, 70% { opacity: 1; } }
@keyframes pipe-ship { 0%, 75%, 98%, 100% { opacity: 0; } 80%, 94% { opacity: 1; } }
@keyframes pipe-center {
  0%, 6% { transform: translate(80px, 44px); opacity: 0; }
  10% { transform: translate(80px, 44px); opacity: 1; }
  22% { transform: translate(80px, 80px); }
  34% { transform: translate(80px, 134px); }
  48% { transform: translate(80px, 202px); }
  58%, 68% { transform: translate(80px, 224px); opacity: 1; }
  81% { transform: translate(80px, 314px); opacity: 1; }
  85%, 100% { transform: translate(80px, 314px); opacity: 0; }
}
@keyframes pipe-left {
  0%, 22% { transform: translate(80px, 80px); opacity: 0; }
  25% { opacity: 1; }
  30% { transform: translate(32px, 112px); }
  40% { transform: translate(32px, 158px); }
  48% { transform: translate(80px, 202px); opacity: 1; }
  52%, 100% { transform: translate(80px, 202px); opacity: 0; }
}
@keyframes pipe-right {
  0%, 22% { transform: translate(80px, 80px); opacity: 0; }
  25% { opacity: 1; }
  30% { transform: translate(128px, 112px); }
  40% { transform: translate(128px, 158px); }
  48% { transform: translate(80px, 202px); opacity: 1; }
  52%, 100% { transform: translate(80px, 202px); opacity: 0; }
}
.stack[data-paused] *, .stack[data-paused] li::before { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .stack *, .stack li::before { animation: none !important; }
  .stack .pipe-halo, .stack li::before, .stack .pipe-complete { opacity: 1; }
  .stack .pipe-packet { opacity: 0; }
}


/* sections */
section.block { padding: 80px 0 0; }
.section-head { margin-bottom: 32px; }
.section-head h2 { font-size: 28px; line-height: 36px; font-weight: 600; letter-spacing: -0.02em; margin-top: 12px; }

.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 28px; display: flex; flex-direction: column; gap: 20px; min-height: 224px; transition: border-color .15s; }
.card:hover { border-color: var(--border-hover); }
.card-top { display: flex; gap: 20px; align-items: flex-start; }
.tile { flex: none; width: 56px; height: 56px; border-radius: 10px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); background: color-mix(in srgb, var(--c) 8%, transparent); color: var(--c); }
.tile svg { width: 32px; height: 32px; }
.pill { display: inline-block; font-size: 12px; line-height: 18px; font-weight: 500; padding: 3px 10px; border-radius: 999px; margin-bottom: 8px; }
.pill.live { background: var(--pill-live); color: var(--pos); }
.pill.progress { background: var(--pill-progress); color: var(--text-2); }
.pill.contrib { background: var(--pill-contrib); color: var(--magenta); }
.card h3 { font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -0.02em; }
.card p { color: var(--text-2); margin-top: 6px; }
.card-foot { margin-top: auto; padding-top: 20px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; font-size: 14px; }
.card-foot a { color: var(--link); font-weight: 500; text-decoration: none; }
.card-foot a:hover { text-decoration: underline; }
.card-foot .soon { color: var(--muted); }

.work { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.work > div { padding-right: 24px; border-right: 1px solid var(--border); }
.work > div:last-child { border-right: 0; }
.work .n { font-size: 28px; line-height: 36px; font-weight: 600; color: var(--muted); }
.work h3 { font-size: 28px; line-height: 36px; font-weight: 600; letter-spacing: -0.02em; margin: 4px 0 8px; }
.work p { color: var(--text-2); }

.markets-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 16px; }
.updated { font-size: 12px; color: var(--muted); }
.ticker { display: grid; grid-template-columns: repeat(6, 1fr) auto; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.tick { padding: 20px 24px; border-right: 1px solid var(--border); text-decoration: none; color: inherit; }
a.tick:hover { background: var(--raised); }
.tick .sym { font-size: 12px; line-height: 18px; font-weight: 600; color: var(--text-2); }
.tick .px { font-size: 16px; font-weight: 600; margin-top: 2px; }
.tick .ch { font-size: 13px; font-weight: 500; color: var(--muted); }
.tick .ch.up { color: var(--pos); } .tick .ch.down { color: var(--neg); }
.tick .px.loading { color: var(--muted); }
.ticker .more { display: flex; align-items: center; padding: 0 24px; font-size: 14px; font-weight: 500; color: var(--link); text-decoration: none; white-space: nowrap; }
.disclaimer { font-size: 12px; color: var(--muted); margin-top: 10px; }

.chips { display: flex; flex-wrap: wrap; gap: 12px; }
.chip { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border: 1px solid var(--border); border-radius: 999px; font-size: 14px; color: var(--text-2); }
.chip svg { width: 20px; height: 20px; color: var(--c, var(--text-2)); }

.site-footer { margin-top: 96px; border-top: 1px solid var(--border); }
.site-footer .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; padding-top: 32px; padding-bottom: 40px; }
.site-footer .left { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.site-footer .wordmark { font-size: 24px; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 10px 20px; font-size: 14px; }
.site-footer nav a { color: var(--text-2); text-decoration: none; }
.site-footer nav a:hover { color: var(--link); }
.site-footer small { font-size: 13px; color: var(--muted); }

/* tablet */
@media (max-width: 1023px) {
  .hero .wrap { grid-template-columns: 1fr; padding-top: 56px; padding-bottom: 64px; }
  .stack { justify-self: start; }
  .ticker { grid-template-columns: repeat(3, 1fr); }
  .tick { border-bottom: 1px solid var(--border); }
  .ticker .more { grid-column: 1 / -1; padding: 16px 24px; }
}
/* mobile */
@media (max-width: 767px) {
  .site-header .wrap { height: 64px; }
  .wordmark { font-size: 24px; line-height: 28px; }
  .menu-btn { display: inline-grid; place-items: center; }
  .nav { display: none; position: absolute; top: 64px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--canvas); border-bottom: 1px solid var(--border); padding: 8px 20px 16px; }
  .nav.open { display: flex; }
  .nav a { padding: 12px 0; font-size: 16px; }
  .nav .lang { align-self: flex-start; margin-top: 8px; }
  .hero .wrap { padding-top: 40px; padding-bottom: 48px; gap: 32px; }
  .hero h1 { font-size: 38px; line-height: 42px; }
  .hero p.lead { font-size: 16px; line-height: 25px; }
  .actions .btn { flex: 1 1 100%; }
  .stack { grid-template-columns: 120px minmax(0, 1fr); gap: 12px; max-width: 400px; justify-self: center; }
  .stack svg { width: 120px; height: 270px; }
  .stack ol { grid-template-rows: repeat(4, 67.5px); }
  .stack li { font-size: 11px; line-height: 16px; column-gap: 4px; }
  .stack li::before { top: 18px; bottom: 18px; }
  section.block { padding-top: 48px; }
  .section-head h2 { font-size: 22px; line-height: 28px; }
  .cards { grid-template-columns: 1fr; gap: 16px; }
  .card { padding: 20px; min-height: 0; }
  .work { grid-template-columns: 1fr; gap: 16px; }
  .work > div { border-right: 0; padding: 0 0 16px; border-bottom: 1px solid var(--border); }
  .work h3, .work .n { font-size: 22px; line-height: 28px; }
  .ticker { grid-template-columns: repeat(2, 1fr); }
  .tick { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* inner pages: /now, /uses (design/pages/out/PAGES_SPEC.md) */
.nav a[aria-current="page"] { color: var(--text); box-shadow: inset 0 -2px 0 var(--cyan); }
.eyebrow.accent { color: var(--link); }
.page-head-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: center; padding-top: 72px; padding-bottom: 40px; }
.page-head h1 { font-size: 56px; line-height: 62px; font-weight: 700; letter-spacing: -0.035em; margin: 16px 0; }
.page-head .lead { font-size: 18px; line-height: 28px; color: var(--text-2); max-width: 560px; }
.page-head .meta { margin-top: 20px; font-size: 13px; color: var(--muted); }
.page-art { justify-self: end; color: color-mix(in srgb, var(--cyan) 75%, var(--text-2)); }
.hero-art { width: 300px; height: auto; display: block; }

.status-strip { display: grid; grid-template-columns: 1fr 1fr 1.4fr; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 20px 0; margin-bottom: 24px; }
.status-strip > span { padding: 0 32px; color: var(--text-2); }
.status-strip > span + span { border-left: 1px solid var(--border); }
.status-month { font-weight: 600; color: var(--text) !important; font-size: 18px; }
.status-strip b { color: var(--text); font-weight: 600; }
.status-names { text-align: right; }

.focus-list { display: grid; gap: 24px; }
.focus-card { display: grid; grid-template-columns: 240px 1fr; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.focus-label { padding: 32px; border-right: 1px solid var(--border); }
.focus-n { display: block; font-size: 48px; line-height: 52px; font-weight: 700; color: var(--c); letter-spacing: -0.02em; }
.focus-label i { display: block; width: 32px; height: 3px; border-radius: 2px; background: var(--c); margin: 16px 0; }
.focus-label h2 { font-size: 22px; line-height: 28px; font-weight: 600; }
.dots { list-style: none; display: grid; gap: 14px; padding: 32px; align-content: center; }
.dots li { position: relative; padding-left: 24px; color: var(--text-2); }
.dots li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.page-foot { margin-top: 24px; color: var(--text-2); }
.page-foot a { color: var(--link); text-decoration: none; }

.tool-group { padding-top: 48px; }
.tool-group h2 { font-size: 24px; line-height: 32px; font-weight: 600; letter-spacing: -0.02em; }
.group-intro { color: var(--text-2); margin: 4px 0 20px; }
.tool-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.tool-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 24px; }
.tool-icon { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--raised); color: var(--cyan); margin-bottom: 16px; }
.tool-card h3 { font-size: 16px; line-height: 24px; font-weight: 600; }
.tool-card p { color: var(--text-2); font-size: 14px; line-height: 21px; margin-top: 8px; }

@media (max-width: 1199px) { .tool-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 1023px) {
  .page-head-grid { grid-template-columns: 1fr; }
  .page-art { justify-self: start; }
  .hero-art { width: 220px; }
  .status-strip { grid-template-columns: 1fr 1fr; row-gap: 12px; }
  .status-names { grid-column: 1 / -1; text-align: left; border-left: 0 !important; }
}
@media (max-width: 767px) {
  .nav a[aria-current="page"] { box-shadow: none; color: var(--cyan); }
  .page-head-grid { padding-top: 40px; padding-bottom: 24px; gap: 24px; }
  .page-head h1 { font-size: 34px; line-height: 40px; }
  .page-head .lead { font-size: 16px; line-height: 25px; }
  .page-art { display: none; }
  .status-strip > span { padding: 0 20px; }
  .focus-list { gap: 16px; }
  .focus-card { grid-template-columns: 1fr; }
  .focus-label { border-right: 0; border-bottom: 1px solid var(--border); padding: 20px; display: flex; align-items: center; gap: 16px; }
  .focus-n { font-size: 32px; line-height: 36px; }
  .focus-label i { width: 3px; height: 24px; margin: 0; }
  .dots { padding: 20px; }
  .tool-group { padding-top: 40px; }
  .tool-grid { grid-template-columns: 1fr; gap: 16px; }
  .tool-card { padding: 20px; display: grid; grid-template-columns: 40px 1fr; column-gap: 12px; align-items: center; }
  .tool-icon { margin: 0; }
  .tool-card p { grid-column: 1 / -1; margin-top: 12px; }
}
.tool-card h3 a { color: inherit; text-decoration: none; }
.tool-card h3 a:hover { color: var(--link); }
.tool-card h3 a span { color: var(--link); font-size: 14px; }

/* contact (design/contact/out/CONTACT_SPEC.md) */
.avail { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 999px; font-size: 12px; line-height: 18px; color: var(--text-2); }
.avail i { width: 8px; height: 8px; border-radius: 50%; background: var(--pos); }
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 32px; align-items: start; padding-top: 16px; }
.contact-left { display: grid; gap: 16px; }
.channel { position: relative; display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 20px 24px; }
.ch-icon { width: 56px; height: 56px; border-radius: 10px; display: grid; place-items: center; background: var(--raised); color: var(--text); }
.ch-icon svg { width: 26px; height: 26px; }
.ch-name { font-weight: 600; }
.ch-value { color: var(--link); text-decoration: none; font-size: 16px; }
.ch-value:hover { text-decoration: underline; }
.ch-value::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }
.channel:has(.ch-value:hover) { border-color: var(--border-hover); }
.ch-sub { font-size: 14px; color: var(--text-2); margin-top: 2px; }
.copy-btn { position: relative; z-index: 1; width: 44px; height: 44px; border-radius: 8px; border: 1px solid var(--border); background: var(--raised); color: var(--text-2); cursor: pointer; display: grid; place-items: center; }
.copy-btn:hover { border-color: var(--border-hover); color: var(--text); }
.copy-btn .i-check, .copy-btn.copied .i-copy { display: none; }
.copy-btn.copied .i-check { display: block; color: var(--pos); }
.copy-note { position: absolute; right: 16px; bottom: 6px; font-size: 12px; color: var(--pos); }
.talk { margin-top: 16px; padding-top: 24px; border-top: 1px solid var(--border); }
.talk h2 { font-size: 20px; line-height: 28px; font-weight: 600; margin-bottom: 16px; }
.talk .chip { padding: 8px 14px; }

.contact-form { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 28px; }
.contact-form h2 { font-size: 24px; line-height: 32px; font-weight: 600; }
.form-sub { color: var(--text-2); }
.form-req { font-size: 12px; color: var(--muted); margin: 16px 0 8px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { margin-top: 12px; }
.field label { display: block; font-size: 14px; line-height: 20px; font-weight: 500; margin-bottom: 8px; }
.field input, .field select, .field textarea { width: 100%; font: inherit; font-size: 16px; color: var(--text); background: var(--canvas); border: 1px solid var(--border); border-radius: 8px; padding: 0 12px; height: 48px; }
.field textarea { height: auto; min-height: 144px; padding: 12px; line-height: 24px; resize: vertical; }
.field select { appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23A7B3C7' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.field select:invalid { color: var(--muted); }
.field ::placeholder { color: var(--muted); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--border-hover); }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--cyan); outline-offset: 1px; border-color: var(--cyan); }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--neg); }
.field-err { min-height: 0; font-size: 13px; color: var(--neg); margin-top: 4px; }
.field-err:empty { display: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.send-btn { width: 100%; margin-top: 24px; border: 0; cursor: pointer; font-family: inherit; }
.send-btn svg { width: 20px; height: 20px; }
.send-btn:disabled { background: var(--raised); color: var(--muted); cursor: progress; }
.privacy { text-align: center; font-size: 12px; color: var(--muted); margin-top: 12px; }
.form-result { margin-top: 16px; border-radius: 12px; padding: 16px 20px; display: grid; gap: 4px; border: 1px solid; }
.form-result strong { font-weight: 600; }
.form-result span { color: var(--text-2); }
.form-result.ok { border-color: color-mix(in srgb, var(--pos) 55%, transparent); background: color-mix(in srgb, var(--pos) 8%, transparent); }
.form-result.ok strong { color: var(--pos); }
.form-result.err { border-color: color-mix(in srgb, var(--neg) 55%, transparent); background: color-mix(in srgb, var(--neg) 8%, transparent); }
.form-result.err strong { color: var(--neg); }

@media (max-width: 1023px) { .contact-grid { grid-template-columns: 1fr; } .contact-form { max-width: 640px; } }
@media (max-width: 767px) {
  .channel { grid-template-columns: 44px 1fr auto; gap: 14px; padding: 16px; }
  .ch-icon { width: 44px; height: 44px; }
  .contact-form { padding: 20px; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
}
.form-result[hidden] { display: none; }

/* /salvor metrics (design/salvor/out/SALVOR_PAGE_SPEC.md) */
:root { --arm-a: #A7B3C7; --arm-b: #E879F9; --arm-c: #22D3EE; }
.sal { display: grid; gap: 32px; padding-top: 8px; }
.sal h2, .sal-h { font-size: 24px; line-height: 32px; font-weight: 600; letter-spacing: -0.02em; }
.sal-meta code, .gtable code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.sal-meta .ext { color: var(--link); text-decoration: none; margin-left: 8px; white-space: nowrap; }
.muted { color: var(--muted); } .small { font-size: 13px; line-height: 20px; }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.kpi { display: grid; gap: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 24px; }
.kpi-i { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--raised); color: var(--cyan); }
.kpi-l { color: var(--text-2); font-size: 14px; margin-top: 6px; }
.kpi-v { font-size: 22px; line-height: 30px; font-weight: 600; }
.sal-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 24px; }
.tbl-wrap { overflow-x: auto; margin-top: 12px; }
.gtable { width: 100%; border-collapse: collapse; font-size: 14px; }
.gtable th { text-align: left; font-weight: 500; color: var(--text-2); padding: 10px 12px; border-bottom: 1px solid var(--border); }
.gtable td { padding: 9px 12px; border-bottom: 1px solid var(--border); }
.gtable tr:last-child td { border-bottom: 0; }
.gtable .r { text-align: right; }
.gtable td:last-child { display: flex; align-items: center; gap: 12px; }
.dur { flex: 0 0 200px; height: 6px; border-radius: 3px; background: var(--raised); overflow: hidden; }
.dur i { display: block; height: 100%; background: var(--cyan); border-radius: 3px; }
.brw { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 12px; }
.brw summary { cursor: pointer; display: flex; align-items: center; gap: 10px; min-height: 44px; list-style: none; color: var(--text-2); }
.brw summary::-webkit-details-marker { display: none; }
.chev { width: 20px; height: 20px; transition: transform .2s; }
.brw[open] .chev { transform: rotate(180deg); }
.blist { list-style: none; display: grid; gap: 2px; margin-top: 8px; }
.blist li { display: grid; grid-template-columns: 110px 1fr auto; gap: 12px; align-items: center; padding: 8px 12px; border-radius: 8px; font-size: 14px; }
.blist li:nth-child(odd) { background: color-mix(in srgb, var(--raised) 50%, transparent); }
.st { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: .02em; white-space: nowrap; border: 1px solid; }
.st b { font-weight: 700; }
.st-pass, .st-passed { color: var(--pos); background: color-mix(in srgb, var(--pos) 10%, transparent); border-color: color-mix(in srgb, var(--pos) 35%, transparent); }
.st-fail { color: var(--neg); background: color-mix(in srgb, var(--neg) 10%, transparent); border-color: color-mix(in srgb, var(--neg) 35%, transparent); }
.st-partial { color: var(--magenta); background: color-mix(in srgb, var(--magenta) 10%, transparent); border-color: color-mix(in srgb, var(--magenta) 35%, transparent); }
.st-skipped { color: var(--text-2); background: color-mix(in srgb, var(--text-2) 10%, transparent); border-color: color-mix(in srgb, var(--text-2) 35%, transparent); }
.st-invalid { color: var(--text); background: var(--raised); border: 1px dashed var(--text-2); }
.sal-trials { display: grid; gap: 24px; }
.trials-head { display: flex; justify-content: space-between; align-items: center; gap: 16px 24px; flex-wrap: wrap; }
.legend { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 13px; color: var(--text-2); }
.legend li { display: flex; align-items: center; gap: 8px; }
.arm { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; font-size: 12px; font-weight: 700; color: #08131D; flex: none; }
.arm-a { background: var(--arm-a); } .arm-b { background: var(--arm-b); } .arm-c { background: var(--arm-c); }
.trial header { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 16px; flex-wrap: wrap; }
.trial h3 { font-size: 20px; line-height: 26px; font-weight: 600; }
.sbars { display: grid; gap: 8px; margin: 16px 0 20px; max-width: 640px; }
.sbar, .cbar { display: grid; grid-template-columns: 22px 1fr 72px; gap: 12px; align-items: center; }
.sbar .track, .cbar .track { position: relative; height: 12px; border-radius: 6px; background: var(--raised); overflow: hidden; }
.cbar .track { height: 8px; }
.track i { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 6px; }
.track .pt { width: 8px; margin-left: -4px; border-radius: 50%; }
.sbar .num, .cbar .num { text-align: right; font-size: 14px; }
.mx-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; }
.mx { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 14px; }
.mx th, .mx td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border); }
.mx tbody tr:last-child th, .mx tbody tr:last-child td { border-bottom: 0; }
.mx thead th { color: var(--text-2); font-weight: 500; background: var(--raised); }
.mx tbody th { font-weight: 500; min-width: 200px; }
.scroll-hint { display: none; font-size: 12px; color: var(--muted); margin-top: 6px; }
.cost { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 20px; }
.cost > div { background: var(--canvas); border: 1px solid var(--border); border-radius: 10px; padding: 16px; display: grid; gap: 8px; align-content: start; }
.cost h4 { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.findings { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 16px; }
.finding { display: flex; gap: 16px; align-items: flex-start; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 20px 24px; }
.finding p { color: var(--text); }
.method h2 { display: flex; align-items: center; gap: 10px; font-size: 20px; }
.method .mi { width: 22px; height: 22px; color: var(--cyan); }
.method ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 12px; color: var(--text-2); font-size: 14px; }
.method li::before { content: "·"; margin-right: 8px; color: var(--muted); }
@media (max-width: 1199px) { .kpis { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) {
  .kpis { gap: 16px; } .kpi { padding: 16px; } .kpi-v { font-size: 18px; line-height: 26px; }
  .sal-card { padding: 20px; }
  .dur { flex-basis: 80px; }
  .blist li { grid-template-columns: 1fr auto; } .blist li .bt { grid-column: 1 / -1; order: -1; }
  .scroll-hint { display: block; }
  .cost, .findings { grid-template-columns: 1fr; gap: 16px; }
}
.sal > *, .sal-trials > *, .kpis > * { min-width: 0; }
.kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1199px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.brw summary > span { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 767px) { .gtable th, .gtable td { padding: 8px 6px; } .gtable code { font-size: 12px; } }
@media (max-width: 767px) { .gtable .dur { display: none; } .gtable td:last-child { white-space: nowrap; justify-content: flex-end; } .gtable th:last-child { text-align: right; } }

/* articles — design/articles/out/ARTICLES_SPEC.md */
.accent { color: var(--link); }
.art-head .wrap { padding-top: 80px; padding-bottom: 32px; }
.art-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.art-head h1 { font-size: 48px; line-height: 56px; font-weight: 650; letter-spacing: -0.025em; }
.art-head .lead { font-size: 18px; line-height: 28px; color: var(--text-2); max-width: 680px; margin-top: 12px; }
.rss { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; line-height: 20px; color: var(--text-2); text-decoration: none; }
.rss:hover { color: var(--text); }
.rss svg { width: 20px; height: 20px; }
.art-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; line-height: 18px; color: var(--muted); }
.art-feature { position: relative; display: grid; grid-template-columns: 608fr 384fr; gap: 64px; align-items: center; padding: 32px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); transition: border-color .15s; }
.art-feature:hover { border-color: var(--border-hover); }
.art-feature h2 { font-size: 32px; line-height: 40px; font-weight: 600; letter-spacing: -0.02em; margin: 16px 0 12px; }
.art-feature h2 a, .art-row h3 a { text-decoration: none; }
.art-feature h2 a::after, .art-row h3 a::after { content: ""; position: absolute; inset: 0; }
.art-feature-text > p:not(.art-meta) { font-size: 16px; line-height: 26px; color: var(--text-2); margin-bottom: 16px; }
.art-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; font-size: 14px; font-weight: 600; color: var(--link); }
.art-cta svg { width: 16px; height: 16px; }
.art-cover { color: var(--cyan); aspect-ratio: 2 / 1; display: flex; align-items: center; justify-content: center; }
.art-cover svg { width: 100%; height: 100%; }
.art-more { margin-top: 48px; }
.art-more h2 { font-size: 28px; line-height: 36px; font-weight: 600; letter-spacing: -0.02em; }
.art-more ul { list-style: none; margin-top: 8px; }
.art-row { position: relative; display: grid; grid-template-columns: 160px 1fr; gap: 24px; align-items: center; padding: 24px 0; border-bottom: 1px solid var(--border); }
.art-thumb { width: 160px; height: 80px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--cyan); padding: 6px; }
.art-thumb svg { width: 100%; height: 100%; }
.art-row h3 { font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -0.02em; }
.art-row h3 a:hover { color: var(--link); }
.art-row-text > p:not(.art-meta) { font-size: 16px; line-height: 24px; color: var(--text-2); margin: 6px 0 8px; }

.art { max-width: 744px; margin: 0 auto; padding: 48px 20px 0; }
.art-back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; line-height: 20px; color: var(--text-2); text-decoration: none; }
.art-back:hover { color: var(--text); }
.art-back svg { width: 16px; height: 16px; }
.art h1 { font-size: 48px; line-height: 56px; font-weight: 650; letter-spacing: -0.025em; margin-top: 24px; }
.art > .art-meta { font-size: 13px; line-height: 20px; margin-top: 16px; }
.art-author { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; line-height: 20px; color: var(--text-2); }
.avatar { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--border); display: inline-grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--magenta); }
.art > .art-cover { margin-top: 32px; height: 240px; aspect-ratio: auto; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); padding: 16px; }
.art-lead { font-size: 20px; line-height: 32px; margin-top: 32px; }
.prose { font-size: 18px; line-height: 30px; margin-top: 32px; }
.prose > * + * { margin-top: 24px; }
.prose h2 { font-size: 28px; line-height: 36px; font-weight: 600; letter-spacing: -0.02em; margin-top: 48px; }
.prose h3 { font-size: 22px; line-height: 30px; font-weight: 600; letter-spacing: -0.02em; margin-top: 32px; }
.prose h2 + *, .prose h3 + * { margin-top: 16px; }
.prose a { color: var(--link); }
.prose ul, .prose ol { padding-left: 24px; }
.prose li + li { margin-top: 8px; }
.prose li::marker { color: var(--cyan); }
.prose blockquote { border-left: 2px solid var(--cyan); padding-left: 20px; color: var(--text-2); font-size: 20px; line-height: 32px; margin: 32px 0; }
.prose code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .88em; background: var(--raised); padding: 2px 6px; border-radius: 4px; overflow-wrap: anywhere; }
.prose pre.code { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 24px; overflow-x: auto; font-size: 14px; line-height: 24px; }
.prose pre.code code { background: none; padding: 0; font-size: inherit; overflow-wrap: normal; white-space: pre; }
.callout { background: var(--raised); border: 1px solid var(--border); border-left: 3px solid var(--cyan); border-radius: 8px; padding: 20px; margin: 32px 0 !important; }
.callout-label { font-size: 12px; line-height: 18px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--link); }
.callout p { font-size: 16px; line-height: 26px; margin-top: 8px; }
.art-share { margin-top: 40px; }
.art-share a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; color: var(--link); text-decoration: none; }
.art-share svg { width: 18px; height: 18px; }
.art-share + .art-author { margin-top: 16px; }
.art-pn { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--border); }
.art-pn a { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 16px; align-items: center; padding: 16px 20px; border: 1px solid var(--border); border-radius: 8px; text-decoration: none; }
.art-pn a:hover { border-color: var(--border-hover); }
.art-pn .lbl { font-size: 12px; line-height: 18px; color: var(--muted); }
.art-pn .t { font-size: 16px; line-height: 24px; font-weight: 500; }
.art-pn .pn-i { width: 20px; height: 20px; grid-row: 1 / 3; color: var(--text-2); }
.pn-prev .pn-i { grid-column: 1; } .pn-prev .lbl, .pn-prev .t { grid-column: 2; }
.pn-next { grid-template-columns: 1fr auto !important; text-align: right; }
.pn-next .pn-i { grid-column: 2; grid-row: 1 / 3; } .pn-next .lbl, .pn-next .t { grid-column: 1; }
main:has(.art) + .site-footer { margin-top: 64px; }
main:has(.art-head) + .site-footer { margin-top: 64px; }

@media (max-width: 1199px) and (min-width: 768px) { .art-feature { gap: 32px; } }
@media (max-width: 767px) {
  .art-head .wrap { padding-top: 40px; }
  .art-head-row { flex-direction: column; align-items: flex-start; gap: 4px; }
  .art-head h1 { font-size: 32px; line-height: 38px; }
  .art-head .lead { font-size: 16px; line-height: 25px; }
  .art-feature { grid-template-columns: 1fr; gap: 24px; padding: 20px; }
  .art-feature .art-cover { order: -1; }
  .art-feature h2 { font-size: 26px; line-height: 34px; }
  .art-more { margin-top: 40px; } .art-more h2 { font-size: 22px; line-height: 28px; }
  .art-row { grid-template-columns: 1fr; padding: 20px 0; } .art-thumb { display: none; }
  .art { padding-top: 32px; }
  .art h1 { font-size: 32px; line-height: 40px; }
  .art > .art-cover { height: auto; aspect-ratio: 2 / 1; margin-top: 24px; padding: 8px; }
  .art-lead { font-size: 18px; line-height: 29px; }
  .prose { font-size: 17px; line-height: 28px; }
  .prose h2 { font-size: 24px; line-height: 32px; margin-top: 40px; }
  .prose h3 { font-size: 20px; line-height: 28px; }
  .prose blockquote { font-size: 18px; line-height: 29px; }
  .prose pre.code { padding: 16px; font-size: 13px; line-height: 22px; }
  .art-pn { grid-template-columns: 1fr; gap: 16px; }
  main:has(.art) + .site-footer, main:has(.art-head) + .site-footer { margin-top: 48px; }
}

/* theme toggle */
.theme-btn { display: inline-grid; place-items: center; width: 44px; height: 38px; border: 1px solid var(--border); border-radius: 8px; background: none; color: var(--text-2); cursor: pointer; }
.theme-btn:hover { color: var(--text); border-color: var(--border-hover); }
.theme-btn .i-moon, :root[data-theme="light"] .theme-btn .i-sun { display: none; }
:root[data-theme="light"] .theme-btn .i-moon { display: block; }
@media (max-width: 767px) { .nav .theme-btn { align-self: flex-start; margin-top: 8px; } }

/* light theme: more depth and contrast so it doesn't look washed out */
:root[data-theme="light"] {
  --canvas: #F3F6FA; --border: #D2DAE5; --border-hover: #9AAABF;
  --text: #0B1220; --text-2: #364559; --muted: #4F5F74;
  --cyan: #0E7490; --link: #0E7490; --magenta: #A21CAF; --amber: #9A5B00; --neutral-mark: #334155;
}
:root[data-theme="light"] body {
  background:
    radial-gradient(900px 420px at 85% -80px, rgba(34, 211, 238, .16), transparent 70%),
    radial-gradient(700px 380px at 10% -120px, rgba(232, 121, 249, .10), transparent 70%),
    linear-gradient(rgba(15, 23, 42, .045) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, rgba(15, 23, 42, .045) 1px, transparent 1px) 0 0 / 40px 40px,
    var(--canvas);
  background-repeat: no-repeat, no-repeat, repeat, repeat;
}
:root[data-theme="light"] { background: var(--canvas); }
:root[data-theme="light"] .site-header { background: color-mix(in srgb, #FFFFFF 82%, transparent); border-bottom-color: var(--border); }
:root[data-theme="light"] :is(.card, .ticker, .tape, .tool-card, .focus-card, .contact-form, .kpi, .sal-card, .art-feature, .channel, .status-strip, .btn-secondary, .art > .art-cover, .art-thumb, .art-pn a, .chip) {
  background-color: #FFFFFF;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 8px 24px rgba(15, 23, 42, .06);
}
:root[data-theme="light"] .hero h1, :root[data-theme="light"] .page-head h1, :root[data-theme="light"] .art-head h1, :root[data-theme="light"] .art h1 { color: #070D1A; }
:root[data-theme="light"] .eyebrow { color: #2B394C; }
:root[data-theme="light"] .prose pre.code { background: #0F172A; color: #E2E8F0; border-color: #0F172A; }
:root[data-theme="light"] .prose pre.code code { color: inherit; }
:root[data-theme="light"] .prose :not(pre) > code { background: #E6ECF4; color: #0B1220; }

/* raster covers (design/covers) */
.art-cover:has(img), .art-thumb:has(img) { padding: 0 !important; overflow: hidden; background: #090E18 !important; }
.art-cover img, .art-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.art-feature .art-cover:has(img) { border-radius: 10px; border: 1px solid var(--border); }
.art > .art-cover:has(img) { height: auto; aspect-ratio: 2 / 1; }

/* republished articles: source note, figures, tables */
.art-source { margin-top: 24px; font-size: 14px; line-height: 22px; color: var(--text-2); border-left: 2px solid var(--border-hover); padding-left: 14px; }
.art-source a, .art-author a { color: var(--link); }
.prose figure img { display: block; max-width: 100%; height: auto; margin: 0 auto; border-radius: 12px; border: 1px solid var(--border); }
.prose figure video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; margin: 0 auto; border-radius: 12px; border: 1px solid var(--border); background: #090e18; }
.prose figure video.vertical { aspect-ratio: 9 / 16; width: auto; max-width: 100%; height: min(80vh, 720px); }
.prose figure.anim-fig svg { display: block; width: 100%; height: auto; }
.prose figure.anim-fig[data-paused] svg * { animation-play-state: paused; }
.prose figcaption { margin-top: 12px; font-size: 13px; line-height: 20px; color: var(--muted); text-align: center; }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 22px; }
.prose th, .prose td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); }
.prose thead th { background: var(--surface); font-weight: 600; }
.prose tbody tr:last-child td { border-bottom: 0; }
@media (max-width: 767px) { .prose table { font-size: 14px; } .prose th, .prose td { padding: 10px; } }
.prose p, .prose li, .prose td { overflow-wrap: anywhere; }

/* ---- /markets ---- */
.mk { display: grid; gap: 24px; padding-bottom: 64px; }
.mk-sec h2 { font-size: 20px; line-height: 28px; }
.mk-table th[scope="row"] { font-weight: 400; padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; }
.mk-table tr:last-child th[scope="row"] { border-bottom: 0; }
.mk-table td { white-space: nowrap; }
.mk-table td:last-child { display: table-cell; }
.mk-sym { font-weight: 600; margin-right: 8px; }
.mk-name { color: var(--text-2); font-size: 13px; }
.mk-table td.up { color: var(--pos); } .mk-table td.down { color: var(--neg); }
.spark { display: block; margin-left: auto; color: var(--muted); }
.spark.up { color: var(--pos); } .spark.down { color: var(--neg); }
.err-head { min-height: 52vh; display: flex; align-items: center; }
.err-head .actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
@media (max-width: 767px) { .mk-name { display: block; } }
@media (max-width: 767px) {
  .mk-table:not(.mk-fx):not(.mk-radar) th:nth-child(4), .mk-table:not(.mk-fx):not(.mk-radar) td:nth-child(4),
  .mk-table:not(.mk-fx):not(.mk-radar) th:nth-child(6), .mk-table:not(.mk-fx):not(.mk-radar) td:nth-child(6),
  .mk-fx th:nth-child(5), .mk-fx td:nth-child(5), .mk-radar th:nth-child(5), .mk-radar td:nth-child(5) { display: none; }
  .mk-table th, .mk-table td { padding-left: 6px; padding-right: 6px; }
  .spark { width: 64px; height: 24px; }
  .mk-table { font-size: 13px; }
  .mk-radar th:nth-child(4), .mk-radar td:nth-child(4) { display: none; }
}

/* ---- newsletter ---- */
.nl { display: grid; gap: 24px; padding-bottom: 64px; }
.nl-form { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.nl-form input[type="email"] { flex: 1 1 240px; min-width: 0; font: inherit; font-size: 16px; color: var(--text); background: var(--canvas); border: 1px solid var(--border); border-radius: 8px; padding: 0 12px; height: 48px; }
.nl-form input[type="email"]:focus { outline: 2px solid var(--cyan); outline-offset: 1px; border-color: var(--cyan); }
.nl-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.nl-cols h2, .nl-box h2 { font-size: 20px; line-height: 28px; margin-bottom: 8px; }
.nl-box { display: grid; grid-template-columns: 1fr minmax(0, 420px); gap: 24px; align-items: center; }
.nl-box .nl-form { margin: 0; }
@media (max-width: 1023px) { .nl-box { grid-template-columns: 1fr; } }
@media (max-width: 767px) { .nl-cols { grid-template-columns: 1fr; } .nl-form .btn { flex: 1 1 100%; } }
.nl-cols .dots { padding: 4px 0 0; --c: var(--cyan); } .nl-cols section:last-child .dots { --c: var(--neg); }

/* ---- home quick converter ---- */
.conv { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px 32px; align-items: end; }
.conv-form { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.conv-form .field { margin: 0; }
.conv-out { display: grid; gap: 4px; padding-bottom: 4px; }
.conv-res { font-size: 28px; line-height: 36px; font-weight: 600; }
.conv .field-err, .conv .disclaimer { grid-column: 1 / -1; margin: 0; }
@media (max-width: 767px) { .conv { grid-template-columns: 1fr; } .conv-form { grid-template-columns: 1fr 1fr; } .conv-form .field:first-child { grid-column: 1 / -1; } .conv-res { font-size: 24px; } }
.art-nl { margin-top: 32px; margin-bottom: 64px; } .art .nl-box { margin: 32px 0; grid-template-columns: 1fr; }

/* Illustrative art: shared pipeline tokens, isolated transform/opacity timelines. */
[data-anim] { --art-color: var(--cyan); }
[data-anim] .art-detail { stroke: var(--art-color); animation: art-detail var(--art-duration, 6s) ease-in-out var(--art-delay, 0s) infinite; transform-box: fill-box; transform-origin: center; }
.art-rail { stroke: var(--border-hover); }
.art-surface { fill: var(--surface); stroke: var(--border-hover); }
.art-accent { stroke: var(--art-color, var(--cyan)); }
.art-positive { stroke: var(--pos); }
.art-tool { animation: art-dock 8s ease-in-out infinite; }
.art-tool-1 { animation-delay: -5.33s; }
.art-tool-2 { animation-delay: -2.66s; }
.art-tool path { stroke: var(--text-2); }
.art-hero-packet { fill: var(--cyan); stroke: var(--canvas); opacity: 0; }
.art-tool-packet { animation: art-tool-travel 8s linear infinite; }
.art-message-packet { animation: art-message-travel 8s linear infinite; }
.art-finish { animation: art-arrive 8s ease-in-out infinite; }
.art-radar { transform-origin: 160px 150px; animation: art-radar 8s linear infinite; }
.art-signal { stroke: var(--amber); animation: art-signal 8s ease-in-out infinite; }
.art-signal-two { stroke: var(--magenta); animation-delay: -4s; }
[data-anim][data-paused], [data-anim][data-paused] * { animation-play-state: paused !important; }
@keyframes art-detail { 0%, 12%, 65%, 100% { opacity: .55; transform: translateY(0); } 28%, 45% { opacity: 1; transform: translateY(-1px); } }
@keyframes art-dock { 0%, 12%, 100% { transform: translateX(0); opacity: 1; } 4% { transform: translateX(5px); opacity: .55; } }
@keyframes art-tool-travel { 0%, 4% { opacity: 0; transform: translateY(0); } 8% { opacity: 1; } 24% { transform: translateY(36px); } 45% { transform: translateY(102px); } 66% { transform: translateY(168px); opacity: 1; } 80%, 100% { transform: translateY(204px); opacity: 0; } }
@keyframes art-message-travel { 0%, 8% { opacity: 0; transform: translate(0, 0); } 12% { opacity: 1; } 32% { transform: translate(94px, 0); } 62% { transform: translate(94px, 150px); } 78% { transform: translate(178px, 150px); opacity: 1; } 82%, 100% { transform: translate(178px, 150px); opacity: 0; } }
@keyframes art-arrive { 0%, 65%, 100% { opacity: .3; } 80%, 94% { opacity: 1; } }
@keyframes art-radar { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes art-signal { 0%, 18%, 70%, 100% { opacity: .3; } 28%, 48% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  [data-anim], [data-anim] * { animation: none !important; }
  [data-anim] .art-detail, [data-anim] .art-tool, [data-anim] .art-signal, [data-anim] .art-finish { opacity: 1; transform: none; }
  [data-anim] .art-hero-packet { opacity: 0; }
}

/* Home market tape: scrolls under the header in the pipeline style (owner, 2026-10-15). Converter moved to /markets. */
.tape-wrap { padding-top: 16px; }
.tape { position: relative; display: flex; align-items: stretch; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); overflow: hidden; font-size: 13px; line-height: 20px; }
.tape-track { display: flex; flex: none; width: max-content; animation: tape-scroll 140s linear infinite; }
.tape:hover .tape-track, .tape:focus-within .tape-track, .tape[data-paused] .tape-track { animation-play-state: paused; }
.tape-run { display: flex; align-items: center; gap: 0; padding-right: 0; }
.tape .tick { display: inline-flex; align-items: center; gap: 8px; padding: 10px 22px; border-right: 1px solid var(--border); color: inherit; text-decoration: none; white-space: nowrap; }
.tape .tick .sym { font-size: 12px; font-weight: 600; letter-spacing: .06em; color: var(--text-2); }
.tape .tick .px { font-size: 13px; font-weight: 600; margin: 0; color: var(--text); }
.tape .tick .px.loading { color: var(--muted); }
.tape .tick .ch { font-size: 12px; font-weight: 500; color: var(--muted); }
.tape .tick .ch.up { color: var(--pos); } .tape .tick .ch.down { color: var(--neg); }
.tape .node { width: 8px; height: 8px; border-radius: 3px; border: 1.5px solid var(--border-hover); background: var(--raised); flex: none; animation: tape-node 6s ease-in-out infinite; }
.tape .tick.up .node { border-color: var(--pos); } .tape .tick.down .node { border-color: var(--neg); }
.tape .tick[data-topic="agents"] .node { border-color: var(--cyan); } .tape .tick[data-topic="notes"] .node { border-color: var(--amber); } .tape .tick[data-topic="workflow"] .node { border-color: var(--magenta); }
.tape .tick:nth-child(3n+2) .node { animation-delay: -2s; } .tape .tick:nth-child(3n) .node { animation-delay: -4s; }
.tape-nfa { padding: 10px 22px; border-right: 1px solid var(--border); color: var(--muted); font-size: 12px; white-space: nowrap; }
.tape-more { position: absolute; top: 0; right: 0; bottom: 0; z-index: 2; display: flex; align-items: center; padding: 0 16px; background: var(--surface); border-left: 1px solid var(--border); box-shadow: -18px 0 18px var(--surface); color: var(--link); font-weight: 500; text-decoration: none; white-space: nowrap; }
.tape-more:hover { text-decoration: underline; }
.tape::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 28px; z-index: 1; background: linear-gradient(90deg, var(--surface), transparent); pointer-events: none; }
@keyframes tape-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes tape-node { 0%, 70%, 100% { opacity: .55; transform: scale(1); } 80% { opacity: 1; transform: scale(1.25); } }
@media (max-width: 767px) { .tape .tick { padding: 9px 16px; } .tape-more { padding: 0 12px; font-size: 12px; } .tape-track { animation-duration: 110s; } }
@media (prefers-reduced-motion: reduce) {
  .tape { overflow-x: auto; }
  .tape-track { animation: none; } .tape .node { animation: none; opacity: 1; }
  .tape-run[aria-hidden="true"] { display: none; }
}
.mk #converter { padding: 0; margin-top: 32px; } .mk #converter > .wrap { padding: 0; max-width: none; }

/* Salvor V2: one 18-second narrative, one hundred sized primitives. */
.salvor-head .page-head-grid { grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: 24px; padding-top: 12px; padding-bottom: 4px; }
.salvor-head .page-head-grid > div { min-width: 0; }
.salvor-head h1 { font-size: 40px; line-height: 1.08; margin: 10px 0; }
.salvor-head .lead { font-size: 16px; line-height: 24px; }
.salvor-head .meta { margin-top: 10px; font-size: 11px; overflow-wrap: anywhere; }
.salvor-head .art-share { margin: 10px 0 0; }
.salvor-head .page-art { width: 100%; max-width: 640px; }
.salvor-hero { display: block; width: 100%; height: auto; color: var(--text-2); overflow: hidden; }
.sal-mobile-bridge { display: none; }
.sal-repository { transform: translate(320px, 0); }
.sal-type { font-family: var(--mono, monospace); font-size: 16px; fill: var(--text-2); }
.sal-counter { font-size: 19px; font-weight: 600; fill: var(--text); }
.sal-title { fill: var(--text); font-weight: 600; }
.sal-muted { fill: var(--muted); font-size: 13px; }
.sal-lines, .sal-nodes, .sal-git { fill: none; stroke: var(--neutral-mark); stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.sal-panel { fill: var(--surface); stroke: var(--border); stroke-width: 1.25; }
.sal-cohort-0 { --cohort: var(--cyan); }
.sal-cohort-1 { --cohort: var(--amber); }
.sal-cohort-2 { --cohort: var(--magenta); }
.sal-cohort > text:first-child { fill: var(--cohort); }
.sal-nodes { stroke: var(--cohort); }
.sal-l1, .sal-learning { fill: var(--cyan); }
.sal-l1-halo { fill: var(--cyan); opacity: 0; }
.sal-packet { fill: var(--cyan); opacity: 0; animation-duration: 18s; animation-timing-function: linear; animation-iteration-count: infinite; }
.sal-deflect, .sal-reject { fill: var(--magenta); }
.sal-capture, .sal-merge { fill: var(--pos); }
.sal-blocked { fill: var(--magenta); opacity: 0; animation: sal-blocked 18s ease-in-out infinite; }
.sal-no { fill: var(--magenta); opacity: .25; animation: sal-no 18s ease-in-out infinite; }
.sal-yes { fill: var(--pos); opacity: .25; animation: sal-yes 18s ease-in-out infinite; }
.sal-l1-halo { animation: sal-l1 18s ease-in-out infinite; }
.sal-update { fill: var(--pos); opacity: 0; animation: sal-update 18s ease-in-out infinite; }
.sal-pr { opacity: 0; animation: sal-pr 18s cubic-bezier(.22,1,.36,1) infinite; }
.sal-new-commit { stroke: var(--pos); opacity: 0; animation: sal-commit 18s ease-in-out infinite; }
/* Illuminate cohorts in three sweeps; no individual node carries a moving animation. */
.sal-nodes { animation: sal-wave 18s ease-in-out infinite; }
.sal-cohort-1 .sal-nodes { animation-delay: -.3s; }
.sal-cohort-2 .sal-nodes { animation-delay: -.6s; }
@keyframes sal-wave { 0%,3%,25%,84%,100% { opacity: .38; } 10%,18%,90%,96% { opacity: 1; } }
@keyframes sal-l1 { 0%,10%,26%,85%,100% { opacity: 0; } 16%,23%,90%,96% { opacity: .1; } }
@keyframes sal-blocked { 0%,33%,42%,100% { opacity: 0; } 35%,40% { opacity: 1; } }
@keyframes sal-no { 0%,46%,53%,100% { opacity: .25; } 48%,51% { opacity: 1; } }
@keyframes sal-yes { 0%,59%,74%,100% { opacity: .25; } 61%,72% { opacity: 1; } }
@keyframes sal-pr { 0%,72%,85%,100% { opacity: 0; transform: translateY(4px); } 75%,81% { opacity: 1; transform: translateY(0); } 83% { opacity: 0; transform: translate(24px,16px); } }
@keyframes sal-commit { 0%,81%,100% { opacity: 0; } 83%,97% { opacity: 1; } }
@keyframes sal-update { 0%,84%,99%,100% { opacity: 0; } 87%,95% { opacity: 1; } }
@media (max-width: 1000px) {
  .salvor-head .page-head-grid { grid-template-columns: 1fr; gap: 12px; }
  .salvor-head .page-art { display: block; justify-self: center; max-width: 720px; }
}
@media (max-width: 600px) {
  .salvor-head h1 { font-size: 34px; }
  .salvor-head .page-head-grid { padding-top: 28px; }
  .sal-cohorts { transform: translate(60px, 0); }
  .sal-cohorts .sal-cohort > text { font-size: 18px; }
  .sal-pr text { font-size: 16px; }
  .sal-repository { transform: translate(0, 285px); }
  .sal-bridge { display: none; }
  .sal-mobile-bridge { display: block; }
  .sal-repository .sal-type { font-size: 18px; }
  .sal-repository .sal-muted { font-size: 15px; }
  .sal-repository .sal-question { font-size: 16px; }
  .sal-blocked text { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .salvor-hero * { animation: none !important; }
  .salvor-hero .sal-packet, .salvor-hero .sal-blocked, .salvor-hero .sal-no { opacity: 0; }
  .salvor-hero .sal-nodes, .salvor-hero .sal-pr, .salvor-hero .sal-new-commit, .salvor-hero .sal-yes { opacity: 1; }
  .salvor-hero .sal-l1-halo { opacity: .1; }
}

/* AI use + briefs pages */
.ai-text { padding: 28px 32px; margin: 0; color: var(--text-2); line-height: 1.65; align-self: center; }
.briefs { display: grid; gap: 24px; padding-bottom: 48px; }
.brief-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 28px 32px; }
.brief-card header { display: flex; gap: 16px; align-items: baseline; margin-bottom: 8px; }
.brief-card h2 { margin: 0; font-size: 22px; }
.brief-card h3 { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--cyan); margin: 22px 0 10px; }
.brief-text { margin: 0; padding: 16px 20px; border-left: 3px solid var(--border-hover); background: var(--raised); border-radius: 0 10px 10px 0; font-family: var(--mono, monospace); font-size: 14px; line-height: 1.6; color: var(--text-2); }
.brief-card .dots { padding: 0; }
.brief-lesson { margin: 0; color: var(--text); line-height: 1.6; }
@media (max-width: 640px) { .brief-card { padding: 20px; } .ai-text { padding: 20px; } }

/* Page-specific stories share the hero surfaces, rails, packets and pause helper. */
[data-anim="ai-hero"] .ai-review, [data-anim="ai-hero"] .ai-live { opacity: .18; }
[data-anim="briefs-hero"] .brief-fail { opacity: 0; }
[data-anim="briefs-hero"] .brief-pass { opacity: 1; }
[data-anim="briefs-hero"] .brief-lesson { opacity: 1; }
[data-anim="ai-hero"] .ai-direction { animation: ai-direction 9s linear infinite; }
@keyframes ai-direction { 0%, 5% { opacity: 0; transform: translate(0,0); } 7% { opacity: 1; } 14% { transform: translate(40px,0); } 23%, 25% { opacity: 1; transform: translate(40px,75px); } 27%, 100% { opacity: 0; transform: translate(40px,75px); } }
[data-anim="ai-hero"] .ai-code { animation: ai-code 9s linear infinite; }
@keyframes ai-code { 0%, 27%, 46%, 100% { opacity: 0; } 29%, 44% { opacity: 1; } 28% { transform: translate(0,0); } 37% { transform: translate(0,88px); } 44% { transform: translate(-32px,88px); } }
[data-anim="ai-hero"] .ai-visual { animation: ai-visual 9s linear infinite; }
@keyframes ai-visual { 0%, 27%, 46%, 100% { opacity: 0; } 29%, 44% { opacity: 1; } 28% { transform: translate(0,0); } 37% { transform: translate(0,22px); } 44% { transform: translate(-32px,22px); } }
[data-anim="ai-hero"] .ai-writing { animation: ai-writing 9s linear infinite; }
@keyframes ai-writing { 0%, 27%, 46%, 100% { opacity: 0; } 29%, 44% { opacity: 1; } 28% { transform: translate(0,0); } 37% { transform: translate(0,-40px); } 44% { transform: translate(-32px,-40px); } }
[data-anim="ai-hero"] .ai-review { animation: ai-review 9s linear infinite; }
@keyframes ai-review { 0%, 49%, 100% { opacity: .18; } 55%, 94% { opacity: 1; } }
[data-anim="ai-hero"] .ai-ship { animation: ai-ship 9s linear infinite; }
@keyframes ai-ship { 0%, 58% { opacity: 0; transform: translate(0,0); } 60% { opacity: 1; } 75% { transform: translate(126px,0); } 79%, 81% { opacity: 1; transform: translate(126px,-12px); } 83%, 100% { opacity: 0; transform: translate(126px,-12px); } }
[data-anim="ai-hero"] .ai-live { animation: ai-live 9s linear infinite; }
@keyframes ai-live { 0%, 84%, 100% { opacity: .18; } 88%, 95% { opacity: 1; } }
[data-anim="briefs-hero"] .brief-attempt { animation: brief-attempt 11s linear infinite; }
@keyframes brief-attempt { 0%, 4% { opacity: 0; transform: translate(0,0); } 6% { opacity: 1; } 14% { transform: translate(52px,0); } 24%, 26% { opacity: 1; transform: translate(142px,0); } 28%, 100% { opacity: 0; transform: translate(142px,0); } }
[data-anim="briefs-hero"] .brief-fail { animation: brief-fail 11s linear infinite; }
@keyframes brief-fail { 0%, 27%, 57%, 100% { opacity: 0; } 30%, 52% { opacity: 1; } }
[data-anim="briefs-hero"] .brief-retry { animation: brief-retry 11s linear infinite; }
@keyframes brief-retry { 0%, 33% { opacity: 0; transform: translate(0,0); } 35% { opacity: 1; } 40% { transform: translate(0,66px); } 45% { transform: translate(-56px,66px); } 51% { transform: translate(-90px,66px); } 58% { transform: translate(-90px,-22px); } 68%, 70% { opacity: 1; transform: translate(-22px,-22px); } 72%, 100% { opacity: 0; transform: translate(-22px,-22px); } }
[data-anim="briefs-hero"] .brief-fix { animation: brief-fix 11s linear infinite; }
@keyframes brief-fix { 0%, 43%, 61%, 100% { opacity: .3; } 45%, 57% { opacity: 1; } }
[data-anim="briefs-hero"] .brief-pass { animation: brief-pass 11s linear infinite; }
@keyframes brief-pass { 0%, 72%, 100% { opacity: 0; } 76%, 96% { opacity: 1; } }
[data-anim="briefs-hero"] .brief-save { animation: brief-save 11s linear infinite; }
@keyframes brief-save { 0%, 78% { opacity: 0; transform: translate(0,0); } 80% { opacity: 1; } 86% { transform: translate(0,124px); } 91% { opacity: 1; transform: translate(-46px,124px); } 93%, 100% { opacity: 0; transform: translate(-46px,124px); } }
[data-anim="briefs-hero"] .brief-lesson { animation: brief-lesson 11s ease-in-out infinite; }
@keyframes brief-lesson { 0%, 90%, 100% { opacity: 0; transform: translate(8px,-5px); } 94%, 98% { opacity: 1; transform: translate(0,0); } }
@media (prefers-reduced-motion: reduce) {
  [data-anim="ai-hero"] .ai-review, [data-anim="ai-hero"] .ai-live, [data-anim="briefs-hero"] .brief-pass,
  [data-anim="briefs-hero"] .brief-fix, [data-anim="briefs-hero"] .brief-lesson { opacity: 1; transform: none; }
  [data-anim="briefs-hero"] .brief-fail, [data-anim="ai-hero"] .art-hero-packet,
  [data-anim="briefs-hero"] .art-hero-packet { opacity: 0; }
}

/* fixes hero */
[data-anim="fixes-hero"] .fixes-error,
[data-anim="fixes-hero"] .fixes-repeat { fill: var(--magenta); }
[data-anim="fixes-hero"] .fixes-caught { fill: var(--pos); }
[data-anim="fixes-hero"] .fixes-error { animation: fixes-error 11s linear infinite; }
[data-anim="fixes-hero"] .fixes-scan { animation: fixes-scan 11s ease-in-out infinite; }
[data-anim="fixes-hero"] .fixes-match { animation: fixes-match 11s ease-in-out infinite; }
[data-anim="fixes-hero"] .fixes-card { animation: fixes-card 11s ease-in-out infinite; }
[data-anim="fixes-hero"] .fixes-check { animation: fixes-check 11s ease-in-out infinite; }
[data-anim="fixes-hero"] .fixes-shield { animation: fixes-shield 11s ease-in-out infinite; }
[data-anim="fixes-hero"] .fixes-repeat { animation: fixes-repeat 11s linear infinite; }
[data-anim="fixes-hero"] .fixes-caught { animation: fixes-caught 11s linear infinite; }
@keyframes fixes-error {
  0%, 3% { opacity: 0; transform: translateX(0); }
  6% { opacity: 1; transform: translateX(0); }
  16% { opacity: 1; transform: translateX(52px); }
  18%, 100% { opacity: 0; transform: translateX(52px); }
}
@keyframes fixes-scan {
  0%, 17% { opacity: 0; transform: translateY(0); }
  20% { opacity: 1; transform: translateY(0); }
  25% { transform: translateY(28px); }
  30% { transform: translateY(56px); opacity: 1; }
  34%, 100% { transform: translateY(56px); opacity: 0; }
}
@keyframes fixes-match {
  0%, 29%, 100% { opacity: 0; }
  34%, 93% { opacity: 1; }
}
@keyframes fixes-card {
  0%, 35% { opacity: 0; transform: translateY(-14px); }
  45%, 94% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(0); }
}
@keyframes fixes-check {
  0%, 45%, 100% { opacity: 0; }
  51%, 94% { opacity: 1; }
}
@keyframes fixes-shield {
  0%, 52%, 100% { opacity: 0; transform: translateY(5px); }
  59%, 94% { opacity: 1; transform: translateY(0); }
}
@keyframes fixes-repeat {
  0%, 60% { opacity: 0; transform: translate(0, 0); }
  63% { opacity: 1; transform: translate(0, 0); }
  70% { transform: translate(0, 140px); }
  77% { transform: translate(106px, 140px); }
  83% { opacity: 1; transform: translate(106px, 64px); }
  84%, 100% { opacity: 0; transform: translate(106px, 64px); }
}
@keyframes fixes-caught {
  0%, 83% { opacity: 0; transform: translateY(0); }
  84% { opacity: 1; transform: translateY(0); }
  90% { opacity: 1; transform: translateY(-16px); }
  93%, 100% { opacity: 0; transform: translateY(-16px); }
}
@media (prefers-reduced-motion: reduce) {
  [data-anim="fixes-hero"] :is(.fixes-match, .fixes-card, .fixes-check, .fixes-shield) { opacity: 1; transform: none; }
  [data-anim="fixes-hero"] :is(.art-hero-packet, .fixes-scan) { opacity: 0; }
}

/* fixes page */
.fx { display: grid; gap: 24px; padding-bottom: 48px; }
.fx-search { display: grid; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 24px 28px; }
.fx-search label { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--cyan); }
.fx-search textarea { width: 100%; box-sizing: border-box; resize: vertical; min-height: 84px; padding: 14px 16px; border-radius: 10px; border: 1px solid var(--border); background: var(--raised); color: var(--text); font: 14px/1.5 var(--mono, ui-monospace, monospace); }
.fx-search textarea:focus { outline: none; border-color: var(--cyan); }
.fx-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fx-chip { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--text-2); font: inherit; font-size: 13px; cursor: pointer; }
.fx-chip:hover { border-color: var(--border-hover); }
.fx-chip[aria-pressed="true"] { border-color: var(--cyan); color: var(--text); background: color-mix(in srgb, var(--cyan) 12%, transparent); }
.fx-count { margin: 0; }
.fx-none { margin: 0; padding: 20px 24px; border: 1px dashed var(--border-hover); border-radius: 12px; color: var(--text-2); }
.fx-list { display: grid; gap: 20px; }
.fx-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 24px 28px; scroll-margin-top: 112px; }
.fx-card:target { border-color: var(--amber); }
.fx-card h2 { margin: 0; font-size: 20px; line-height: 1.35; }
.fx-card h2 a { color: inherit; text-decoration: none; }
.fx-card h2 a:hover { color: var(--cyan); }
.fx-card header p { margin: 6px 0 0; }
.fx-card dl { margin: 16px 0 0; display: grid; grid-template-columns: 180px 1fr; gap: 10px 20px; }
.fx-card dt { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--cyan); padding-top: 3px; }
.fx-card dt:nth-of-type(3) { color: var(--pos); }
.fx-card dd { margin: 0; color: var(--text-2); line-height: 1.6; min-width: 0; }
.fx-code { margin: 12px 0 0; padding: 14px 16px; background: var(--raised); border: 1px solid var(--border); border-radius: 10px; overflow-x: auto; font-size: 13px; line-height: 1.55; }
.fx-code code { font-family: var(--mono, ui-monospace, monospace); color: var(--text); white-space: pre; }
.fx-actions { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 14px; }
.fx-actions a, .fx-copy { color: var(--cyan); text-decoration: none; font-weight: 600; }
.fx-share { margin: 24px 0 0; }
.fx-actions a:hover, .fx-copy:hover { text-decoration: underline; }
.fx-copy { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.fx-from { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--magenta); border-radius: 16px; padding: 24px 28px; }
.fx-from h2 { margin: 0 0 12px; font-size: 20px; }
.fx-from p { color: var(--text-2); line-height: 1.6; margin: 0 0 10px; }
@media (max-width: 640px) {
  .fx-search, .fx-card, .fx-from { padding: 20px; }
  .fx-card dl { grid-template-columns: 1fr; gap: 4px; }
  .fx-card dd { margin-bottom: 10px; }
  .fx-chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 -20px; padding: 0 20px 4px; scrollbar-width: none; }
  .fx-chip { flex: none; }
}
@media (max-width: 767px) {
  /* /fixes keeps its hero on phones (owner, 2026-10-16) */
  .page-art:has([data-anim="fixes-hero"]) { display: block; justify-self: center; margin-top: 8px; }
  .page-art:has([data-anim="fixes-hero"]) .hero-art { width: 260px; }
}

/* studio hero */
[data-anim="studio-hero"] .studio-shape { transform-box: fill-box; transform-origin: center; animation: studio-shape 12s ease-in-out infinite; }
[data-anim="studio-hero"] .studio-core { transform-box: fill-box; transform-origin: center; animation: studio-cpu 12s ease-in-out infinite; }
[data-anim="studio-hero"] .studio-gpu { opacity: .38; }
[data-anim="studio-hero"] .studio-frame { fill: var(--surface); stroke: var(--cyan); animation: studio-capture 12s linear infinite; }
[data-anim="studio-hero"] .studio-frame-2 { animation-delay: 1.2s; }
[data-anim="studio-hero"] .studio-frame-3 { animation-delay: 2.4s; }
[data-anim="studio-hero"] .studio-encode { fill: var(--magenta); animation: studio-encode 12s linear infinite; }
[data-anim="studio-hero"] .studio-output { animation: studio-output 12s linear infinite; }
[data-anim="studio-hero"] .studio-film { animation: studio-film 12s ease-in-out infinite; }
[data-anim="studio-hero"] .studio-check { animation: studio-check 12s ease-in-out infinite; }
[data-anim="studio-hero"] .studio-save { fill: var(--amber); animation: studio-save 12s linear infinite; }
[data-anim="studio-hero"] .studio-memory { animation: studio-memory 12s ease-in-out infinite; }
@keyframes studio-shape { 0%, 6%, 42%, 100% { transform: translateY(0); } 16%, 26% { transform: translateY(-4px); } }
@keyframes studio-capture { 0%, 10% { opacity: 0; transform: translate(0, 0); } 13% { opacity: 1; } 24% { opacity: 1; transform: translate(128px, 0); } 26%, 100% { opacity: 0; transform: translate(142px, 0); } }
@keyframes studio-cpu { 0%, 22%, 29%, 32%, 39%, 42%, 49%, 100% { opacity: .45; transform: scale(1); } 25%, 35%, 45% { opacity: 1; transform: scale(1.08); } }
@keyframes studio-encode { 0%, 47% { opacity: 0; transform: translate(0, 0); } 49% { opacity: 1; } 53% { transform: translate(0, 38px); } 61% { transform: translate(-160px, 38px); } 66% { opacity: 1; transform: translate(-160px, 92px); } 68%, 100% { opacity: 0; transform: translate(-160px, 104px); } }
@keyframes studio-output { 0%, 67% { opacity: 0; transform: translateX(0); } 69% { opacity: 1; } 76% { opacity: 1; transform: translateX(80px); } 78%, 100% { opacity: 0; transform: translateX(92px); } }
@keyframes studio-film { 0%, 68%, 100% { opacity: .35; } 78%, 94% { opacity: 1; } }
@keyframes studio-check { 0%, 77%, 100% { opacity: 0; } 82%, 94% { opacity: 1; } }
@keyframes studio-save { 0%, 83% { opacity: 0; transform: translate(0, 0); } 85% { opacity: 1; } 87% { transform: translate(0, 20px); } 92% { opacity: 1; transform: translate(-96px, 20px); } 94%, 100% { opacity: 0; transform: translate(-108px, 20px); } }
@keyframes studio-memory { 0%, 88%, 100% { opacity: .4; } 94%, 97% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  [data-anim="studio-hero"] :is(.studio-shape, .studio-core, .studio-film, .studio-check, .studio-memory) { animation: none !important; opacity: 1; transform: none; }
  [data-anim="studio-hero"] .art-hero-packet { animation: none !important; opacity: 0; }
}

/* studio page (unlisted) */
.studio-specs { display: grid; grid-template-columns: max-content 1fr; gap: 12px 24px; padding: 32px; margin: 0; align-content: center; }
.studio-specs dt { color: var(--muted); }
.studio-specs dd { margin: 0; color: var(--text); min-width: 0; }
.studio-steps { display: grid; gap: 12px; padding: 32px 32px 32px 56px; margin: 0; color: var(--text-2); }
.studio-steps li::marker { color: var(--amber); font-variant-numeric: tabular-nums; }
.studio-body { padding: 24px 32px; min-width: 0; display: grid; gap: 12px; align-content: center; }
.table-scroll { overflow-x: auto; }
.studio-table td:last-child { display: table-cell; white-space: nowrap; }
.studio-lessons code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; color: var(--text); }
.studio-lessons a { color: var(--link); text-decoration: none; white-space: nowrap; }
@media (max-width: 767px) {
  .studio-specs { grid-template-columns: 1fr; gap: 4px; padding: 24px; }
  .studio-specs dd + dt { margin-top: 12px; }
  .studio-steps { padding: 24px 24px 24px 44px; }
  .studio-body { padding: 20px 16px; }
  .studio-table td:last-child { white-space: normal; }
}
@media (max-width: 767px) {
  .page-art:has([data-anim="studio-hero"]) { display: block; justify-self: center; margin-top: 8px; }
  .page-art:has([data-anim="studio-hero"]) .hero-art { width: 260px; }
}