/* Frustrated Labs components: plain HTML + fl- classes. Load after tokens.css (it declares every var() used here).
   Values are tokens, or exact measures from the Motion Mark page that have no token of their own. */

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 15px/1.55 var(--font-body); -webkit-font-smoothing: antialiased; overflow-x: clip; }
:root { color-scheme: light; }
[data-theme="dark"] { color-scheme: dark; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
::selection { background: var(--fume); color: var(--on-fume); }

/* ── layout ─────────────────────────────────────────── */
.fl-wrap { max-width: var(--size-container); margin: 0 auto; padding-inline: var(--space-24); }
.fl-section { padding-block: var(--space-40); border-top: 1px solid var(--line); }
.fl-section--roomy { padding-block: var(--space-64); }

/* ── type ───────────────────────────────────────────── */
.fl-display { font: 600 clamp(40px, 7vw, 64px)/1.02 var(--font-head); letter-spacing: -0.02em; margin: 0 0 var(--space-20); text-wrap: balance; }
.fl-h1 { font: 600 clamp(28px, 4.2vw, 44px)/1.08 var(--font-head); letter-spacing: -0.02em; margin: 0 0 var(--space-16); text-wrap: balance; }
.fl-h2 { font: 600 21px/1.25 var(--font-head); letter-spacing: -0.02em; margin: 0 0 6px; text-wrap: balance; }
.fl-h3 { font: 600 17px/1.3 var(--font-head); letter-spacing: -0.01em; margin: 0 0 6px; }
.fl-lead { font-size: 18px; line-height: 1.5; color: var(--muted); max-width: var(--size-measure); margin: 0 0 var(--space-14); }
.fl-p { margin: 0 0 var(--space-14); color: var(--muted); max-width: var(--size-measure); }
.fl-tag { font: 500 11px/1.4 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.fl-tag--sm { font-size: 10px; }
.fl-caption { font: 500 11px/1.3 var(--font-mono); color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.fl-word { font: 500 17px/1 var(--font-word); letter-spacing: -0.02em; white-space: nowrap; }
.fl-word--lg { font-size: clamp(16px, 2.3vw, 23px); }
.fl-red { color: var(--fume-text); }

/* ── the mark, inline ───────────────────────────────── */
.fl-mark { display: block; width: var(--fl-size, 48px); height: var(--fl-size, 48px); flex: none; }
.fl-mark .ink { fill: currentColor; }
.fl-mark .dead { fill: currentColor; fill-opacity: var(--opacity-dead); }
.fl-mark .red { fill: var(--fume); }
/* until the script runs, each logo keeps the box it will have, so nothing shifts; then its size attribute takes over */
frustrated-logo:not(:defined) { display: inline-block; width: var(--fl-size, 48px); height: var(--fl-size, 48px); }
frustrated-logo:not(:defined) > img { display: block; width: 100%; height: 100%; }
.fl-brand frustrated-logo:not(:defined) { --fl-size: var(--size-mark-header); }
.fl-chip frustrated-logo:not(:defined), .fl-tile--feature frustrated-logo:not(:defined) { --fl-size: var(--size-mark-chip); }
.fl-chip--static frustrated-logo:not(:defined) { --fl-size: 56px; }
.fl-lockup { display: inline-flex; align-items: center; gap: var(--space-12); color: inherit; text-decoration: none; }
.fl-lockup--lg { gap: 18px; }
.fl-plate { display: flex; align-items: center; justify-content: center; gap: var(--space-16); min-height: 220px; padding: var(--space-24); border: 1px solid var(--line); min-width: 0; }
.fl-plate--paper { background: var(--paper); color: var(--ink); }
.fl-plate--ink { background: var(--ink); color: var(--paper); }
.fl-appicon { width: 92px; height: 92px; border-radius: var(--radius-icon); background: var(--ink); color: var(--paper); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-icon); flex: none; }
.fl-appicon .fl-mark { --fl-size: 60px; }

/* ── buttons ────────────────────────────────────────── */
.fl-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-10); font: 500 12px/1 var(--font-mono); color: var(--fg); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-0); padding: 11px var(--space-14); cursor: pointer; text-decoration: none; white-space: nowrap; transition: border-color var(--duration-fast) var(--ease-standard); }
.fl-btn:hover { border-color: var(--muted); }
.fl-btn--primary { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.fl-btn--primary:hover { border-color: var(--fg); }
.fl-btn--lg { font-size: 13px; height: 44px; padding: 0 18px; }
.fl-btn svg { flex: none; display: block; }
.fl-btn[disabled], .fl-btn[aria-disabled="true"] { color: var(--muted); cursor: not-allowed; }
.fl-ctrl { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-10); }

/* ── segmented control ──────────────────────────────── */
.fl-seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius-pill); padding: var(--space-3); gap: var(--space-2); background: var(--panel); }
.fl-seg button { font: 500 12px/1 var(--font-mono); color: var(--muted); background: none; border: 0; border-radius: var(--radius-pill); padding: 9px var(--space-12); cursor: pointer; }
.fl-seg button[aria-pressed="true"] { background: var(--fg); color: var(--bg); }

/* ── header: frosted paper, sticky, full width ─────── */
/* The one translucent surface in the system: the page tints it 66%, a 4px dot screen gives it a grain,
   and whatever scrolls under it blurs. In dark it becomes frosted ink with no extra rules. */
.fl-header { position: sticky; top: 0; z-index: 20; background-color: color-mix(in srgb, var(--bg) 66%, transparent); background-image: radial-gradient(color-mix(in srgb, var(--fg) 9%, transparent) 0.7px, transparent 0.9px); background-size: 4px 4px; -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); border-bottom: 1px solid color-mix(in srgb, var(--fg) 10%, transparent); }
.fl-header__bar { max-width: var(--size-container); margin: 0 auto; padding: var(--space-14) var(--space-24); display: flex; align-items: center; justify-content: space-between; gap: var(--space-16) var(--space-28); flex-wrap: wrap; }
.fl-header__end { display: flex; align-items: center; gap: var(--space-10); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .fl-header { background-color: var(--bg); } }
@media (prefers-reduced-transparency: reduce) { .fl-header { background-color: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* ── footer ─────────────────────────────────────────── */
.fl-brand { display: flex; align-items: center; gap: var(--space-12); font: 500 17px/1 var(--font-word); letter-spacing: -0.02em; white-space: nowrap; color: inherit; text-decoration: none; }
.fl-nav { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-22); font: 500 12px/1 var(--font-mono); }
.fl-nav a { color: var(--muted); text-decoration: none; padding-block: 6px; transition: color var(--duration-fast) var(--ease-standard); }
.fl-nav a:hover, .fl-nav a[aria-current="page"] { color: var(--fg); }
.fl-footer { padding-block: var(--space-28) var(--space-48); border-top: 1px solid var(--line); color: var(--muted); font: 12px/1.5 var(--font-mono); }
.fl-footer a { color: inherit; }

/* ── hero and the logo stage ────────────────────────── */
.fl-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-40); align-items: center; padding-block: var(--space-48) var(--space-40); }
.fl-stage { display: flex; flex-direction: column; align-items: center; gap: var(--space-22); padding: var(--space-44) var(--space-20) var(--space-28); background: var(--panel); border: 1px solid var(--line); min-width: 0; }
.fl-stage frustrated-logo { --fl-size: min(var(--size-mark-hero), 64vw); }
.fl-now { display: flex; align-items: center; gap: var(--space-10); font: 500 12px/1 var(--font-mono); color: var(--muted); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.fl-now b { color: var(--fg); font-weight: 500; }
.fl-track { display: flex; gap: var(--space-4); width: min(var(--size-mark-hero), 64vw); }
.fl-track i { flex: 1; height: 3px; background: var(--line); transition: background var(--duration-base) var(--ease-standard); }
.fl-track i.on { background: var(--fume); }

/* ── the board hero (homepage) ─────────────────────── */
/* Words on the left; on the right the mark's 3 × 3 grid at twice the scale, a 9 × 8 board with the looping
   logo in it, rising under the frosted header so the blur has something to show. */
.fl-hero--board { position: relative; display: block; min-height: 520px; padding-block: 72px 88px; }
.fl-hero__copy { position: relative; z-index: 1; max-width: 540px; display: flex; flex-direction: column; gap: var(--space-20); }
.fl-hero__copy > * { margin: 0; }
.fl-hero__copy > .fl-lead { max-width: 46ch; }
.fl-hero__copy > .fl-ctrl { margin-top: 6px; }
.fl-board { position: absolute; top: calc(-1 * var(--space-96)); right: calc(-1 * min(var(--space-96), max(var(--space-24), (100vw - var(--size-container)) / 2 + var(--space-24)))); display: grid; grid-template-columns: repeat(9, 56px); grid-auto-rows: 56px; gap: 6px; pointer-events: none; }
.fl-board > i { border-radius: 3px; background: color-mix(in srgb, var(--fg) 12%, transparent); }
.fl-board > .is-ink { grid-area: 2 / 2 / span 4 / span 3; background: var(--fg); }
.fl-board > .is-fume { grid-area: 1 / 6 / span 3 / span 1; background: var(--fume); }
.fl-board > .is-line { grid-area: 1 / 8 / span 2 / span 2; background: var(--line); }
.fl-board__logo { grid-area: 5 / 6 / span 3 / span 3; display: grid; place-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 3px; pointer-events: auto; }
.fl-board__logo frustrated-logo { --fl-size: 150px; }

/* ── statement band: reverse video, ink on a light page and paper on a dark one ── */
.fl-band { --bg: var(--ink); --fg: var(--paper); --muted: var(--ink-muted); --panel: var(--ink); --line: color-mix(in srgb, var(--paper) 14%, transparent); margin-top: var(--space-40); background: var(--bg); color: var(--fg); }
[data-theme="dark"] .fl-band { --bg: var(--paper); --fg: var(--ink); --muted: var(--paper-muted); --panel: var(--paper); --line: color-mix(in srgb, var(--ink) 14%, transparent); }
.fl-band__inner { max-width: var(--size-container); margin: 0 auto; padding: 88px var(--space-24); display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-40); align-items: end; }
.fl-band__line { margin: var(--space-18) 0 0; font: 600 clamp(34px, 5.2vw, 56px)/1.04 var(--font-head); letter-spacing: -0.02em; text-wrap: balance; }
.fl-band__mark { display: flex; justify-content: flex-end; }
.fl-band__mark frustrated-logo { --fl-size: 140px; }
.fl-band + .fl-wrap > .fl-section:first-child { border-top: 0; padding-top: var(--space-64); }

/* ── sections ───────────────────────────────────────── */
.fl-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-16); flex-wrap: wrap; margin-bottom: var(--space-22); }
.fl-head .fl-p { margin: 0; }

/* ── chips and tiles ────────────────────────────────── */
.fl-chips { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-10); }
.fl-chip { display: flex; flex-direction: column; align-items: center; gap: var(--space-10); padding: var(--space-18) var(--space-8) var(--space-14); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-0); cursor: pointer; color: var(--fg); font: 500 11px/1.25 var(--font-mono); text-align: center; transition: border-color var(--duration-fast) var(--ease-standard); }
.fl-chip:hover { border-color: var(--muted); }
.fl-chip[aria-current="true"] { border-color: var(--fume); box-shadow: var(--ring-current); }
.fl-chip span { color: var(--muted); }
.fl-chip[aria-current="true"] span { color: var(--fg); }
.fl-chip--ghost { background: none; border-style: dashed; }
.fl-chip--static { cursor: default; }
.fl-chip--static:hover { border-color: var(--line); }
.fl-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-10); }
.fl-tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fl-tile { margin: 0; display: flex; flex-direction: column; align-items: center; gap: var(--space-12); padding: 22px var(--space-10) 16px; background: var(--panel); border: 1px solid var(--line); min-width: 0; }
.fl-tile--feature { align-items: flex-start; gap: var(--space-10); padding: var(--space-24); }
.fl-tile--feature .fl-h3 { margin: 6px 0 0; }
.fl-tile--feature .fl-p { margin: 0; }
.fl-well { background: var(--card); padding: var(--space-10); }
.fl-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-16); }
.fl-sizes { display: flex; align-items: flex-end; gap: var(--space-26); flex-wrap: wrap; padding: var(--space-26); background: var(--panel); border: 1px solid var(--line); }
.fl-sizes figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: var(--space-8); }

/* ── code and tables ────────────────────────────────── */
.fl-code { overflow-x: auto; background: var(--code); border: 1px solid var(--line); }
.fl-code pre { margin: 0; padding: var(--space-18) var(--space-20); font: 13px/1.65 var(--font-mono); color: var(--fg); width: max-content; min-width: 100%; }
.fl-code .c { color: var(--muted); }
.fl-code .k { color: var(--fume-text); }
.fl-table { overflow-x: auto; }
.fl-table table { width: 100%; border-collapse: collapse; font-size: 14px; }
.fl-table td { padding: 10px var(--space-12) 10px 0; border-top: 1px solid var(--line); vertical-align: top; }
.fl-table td:first-child { font-family: var(--font-mono); font-size: 13px; white-space: nowrap; width: 1%; padding-right: var(--space-22); }
.fl-table td:last-child { color: var(--muted); }
.fl-table td b { color: var(--fg); font-weight: 600; }

/* ── files ──────────────────────────────────────────── */
.fl-files { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-10); }
.fl-file { display: flex; align-items: center; gap: var(--space-14); padding: var(--space-14) var(--space-16); background: var(--panel); border: 1px solid var(--line); min-width: 0; color: inherit; text-decoration: none; }
a.fl-file { transition: border-color var(--duration-fast) var(--ease-standard); }
a.fl-file:hover { border-color: var(--muted); }
.fl-file .fl-mark, .fl-file img { --fl-size: 30px; width: 30px; height: 30px; flex: none; }
.fl-file div { min-width: 0; }
.fl-file b { display: block; font: 500 13px/1.3 var(--font-mono); overflow-wrap: anywhere; }
.fl-file span { font-size: 13px; color: var(--muted); }
.fl-file--paper { background: var(--paper); color: var(--ink); }
.fl-file--paper span { color: var(--paper-muted); }
.fl-file--ink { background: var(--ink); color: var(--paper); }
.fl-file--ink span { color: var(--ink-muted); }

/* ── responsive: the page's two breakpoints (860px, 560px), plus 1100px for the board hero and 960px for the header's nav ── */
@media (max-width: 1100px) {
  .fl-hero--board { min-height: 0; padding-block: var(--space-40) var(--space-48); }
  .fl-board { position: relative; top: auto; right: auto; width: min(100%, 552px); margin: var(--space-40) 0 0 auto; grid-template-columns: repeat(9, minmax(0, 1fr)); grid-auto-rows: auto; }
  .fl-board > i:not([class]) { aspect-ratio: 1; }
  .fl-board__logo frustrated-logo { --fl-size: min(150px, 26vw); }
}
@media (max-width: 960px) {
  .fl-header .fl-nav { order: 3; width: 100%; }
}
@media (max-width: 860px) {
  .fl-header .fl-seg { display: none; }
  .fl-hero { grid-template-columns: 1fr; padding-top: 32px; }
  .fl-band__inner { grid-template-columns: 1fr; padding-block: var(--space-64); }
  .fl-band__mark { justify-content: flex-start; }
  .fl-band__mark frustrated-logo { --fl-size: 96px; }
  .fl-chips, .fl-tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fl-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fl-files { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .fl-wrap { padding-inline: var(--space-16); }
  .fl-header__bar, .fl-band__inner { padding-inline: var(--space-16); }
  .fl-header__bar { padding-block: var(--space-10); row-gap: var(--space-10); }
  .fl-header__end { display: none; }
  .fl-duo, .fl-tiles--3 { grid-template-columns: 1fr; }
  .fl-plate { min-height: 160px; }
  .fl-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .fl-btn, .fl-chip, .fl-nav a, a.fl-file, .fl-track i { transition: none; }
}