/* ============================================================================
   FreeGen design system
   Light-first; dark is an equal peer, not an afterthought.
   Deliberately distinct from ShareMyAI (near-black + lime, technical/infra):
   FreeGen is warm paper and electric indigo: consumer, generous, legible.
   ========================================================================= */

/* ---------- Typefaces (self-hosted; CSP allows font-src 'self' only) ------- */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/fonts/bricolage-latin.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/fonts/bricolage-latin-ext.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/fonts/instrument-latin.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/fonts/instrument-latin-ext.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/jetbrains-latin.woff2") format("woff2");
  font-weight: 400 600; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/jetbrains-latin-ext.woff2") format("woff2");
  font-weight: 400 600; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens: light (default) --------------------------------------- */
:root {
  --paper:      #FCFBF9;
  --surface:    #FFFFFF;
  --sunken:     #F4F1EC;
  --overlay:    rgba(22, 19, 15, .45);

  --ink:        #16130F;
  --ink-2:      #4C463D;
  /* 5.0:1 on paper, 5.2:1 on surface, 4.6:1 on sunken. The previous value
     (#7C746A) sat at 4.45:1 and missed WCAG AA for small text. */
  --ink-3:      #746C61;
  --ink-4:      #A69E93;

  --line:       #E6E1D9;
  --line-2:     #D2CBBF;

  --brand:      #4B2EF0;
  --brand-hi:   #3A1FD6;
  --brand-on:   #FFFFFF;
  --brand-soft: #ECE8FE;
  --brand-line: #C6BAFB;

  --heat:       #D93E14;
  --heat-soft:  #FDEDE7;
  --heat-line:  #F5C4B2;

  --ok:         #0E7F58;
  --ok-soft:    #E2F4EC;
  --ok-line:    #A9DCC7;

  --warn:       #A6690A;
  --warn-soft:  #FBF0DA;
  --warn-line:  #E7CD97;

  --bad:        #C22C1B;
  --bad-soft:   #FCEBE8;
  --bad-line:   #F1BCB3;

  --shadow-1: 0 1px 2px rgba(22,19,15,.05), 0 1px 1px rgba(22,19,15,.04);
  --shadow-2: 0 2px 4px rgba(22,19,15,.05), 0 6px 16px -6px rgba(22,19,15,.10);
  --shadow-3: 0 4px 8px rgba(22,19,15,.06), 0 18px 40px -12px rgba(22,19,15,.16);

  --display: "Bricolage Grotesque", "Segoe UI", system-ui, -apple-system, sans-serif;
  --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Code", "SF Mono", Consolas, monospace;

  --r-xs: 6px; --r-sm: 9px; --r: 13px; --r-lg: 20px; --r-pill: 999px;
  --shell: min(1180px, 100% - 3rem);
  --wide:  min(1400px, 100% - 3rem);
  --header-h: 60px;

  color-scheme: light;
}

/* ---------- Tokens: dark -------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:      #100E15;
    --surface:    #191622;
    --sunken:     #0B0911;
    --overlay:    rgba(6, 5, 10, .64);

    --ink:        #F7F5FA;
    --ink-2:      #B8B1C6;
    --ink-3:      #857D96;
    --ink-4:      #635B73;

    --line:       #2A2436;
    --line-2:     #3B3449;

    --brand:      #A492FF;
    --brand-hi:   #BCAEFF;
    --brand-on:   #16102F;
    --brand-soft: #251D44;
    --brand-line: #43376E;

    --heat:       #FF8A63;
    --heat-soft:  #3A1D14;
    --heat-line:  #63301F;

    --ok:         #4FD3A0;
    --ok-soft:    #102C23;
    --ok-line:    #1D5642;

    --warn:       #E7B25B;
    --warn-soft:  #33240E;
    --warn-line:  #5C441A;

    --bad:        #FF8577;
    --bad-soft:   #371714;
    --bad-line:   #632B24;

    --shadow-1: 0 1px 2px rgba(0,0,0,.40);
    --shadow-2: 0 2px 6px rgba(0,0,0,.42), 0 8px 20px -8px rgba(0,0,0,.50);
    --shadow-3: 0 6px 14px rgba(0,0,0,.45), 0 22px 48px -14px rgba(0,0,0,.62);

    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper:      #100E15;
  --surface:    #191622;
  --sunken:     #0B0911;
  --overlay:    rgba(6, 5, 10, .64);
  --ink:        #F7F5FA;
  --ink-2:      #B8B1C6;
  --ink-3:      #857D96;
  --ink-4:      #635B73;
  --line:       #2A2436;
  --line-2:     #3B3449;
  --brand:      #A492FF;
  --brand-hi:   #BCAEFF;
  --brand-on:   #16102F;
  --brand-soft: #251D44;
  --brand-line: #43376E;
  --heat:       #FF8A63;
  --heat-soft:  #3A1D14;
  --heat-line:  #63301F;
  --ok:         #4FD3A0;
  --ok-soft:    #102C23;
  --ok-line:    #1D5642;
  --warn:       #E7B25B;
  --warn-soft:  #33240E;
  --warn-line:  #5C441A;
  --bad:        #FF8577;
  --bad-soft:   #371714;
  --bad-line:   #632B24;
  --shadow-1: 0 1px 2px rgba(0,0,0,.40);
  --shadow-2: 0 2px 6px rgba(0,0,0,.42), 0 8px 20px -8px rgba(0,0,0,.50);
  --shadow-3: 0 6px 14px rgba(0,0,0,.45), 0 22px 48px -14px rgba(0,0,0,.62);
  color-scheme: dark;
}

/* ---------- Reset --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
/* The clip has to be on the scroll container itself. Setting it only on <body>
   leaves <html> scrolling, so the hero glow still widens the document. */
html { min-width: 320px; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--paper);
  color: var(--ink);
  font: 400 1rem/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  /* The hero glow bleeds past the viewport by design. `clip` trims it without
     creating a scroll container, so the sticky header keeps working;
     `overflow-x: hidden` would break it. */
  overflow-x: clip;
}
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -.022em;
  line-height: 1.1;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }
img, svg, canvas, audio, video { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: var(--brand); text-underline-offset: 3px; }
:where(button, a, input, textarea, select, [tabindex], summary):focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
::selection { background: var(--brand); color: var(--brand-on); }
[hidden] { display: none !important; }

/* The router moves focus to the new view's heading so screen readers land in
   the right place. That heading is not tab-reachable, so it does not need a
   focus ring, and drawing one puts a stray box around every page title. */
h1[tabindex="-1"]:focus, h1[tabindex="-1"]:focus-visible { outline: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; z-index: 90; inset-block-start: .75rem; inset-inline-start: .75rem;
  padding: .625rem 1rem; border-radius: var(--r-sm);
  background: var(--brand); color: var(--brand-on);
  font-weight: 600; text-decoration: none;
  transform: translateY(calc(-100% - 1.5rem));
}
.skip-link:focus-visible { transform: none; }

/* ---------- Layout primitives --------------------------------------------- */
.shell { width: var(--shell); margin-inline: auto; }
.wide  { width: var(--wide);  margin-inline: auto; }

/* ---------- Type scale ---------------------------------------------------- */
.t-display { font-family: var(--display); font-weight: 700; font-size: clamp(2.6rem, 6.4vw, 5.15rem); line-height: 1.02; letter-spacing: -.036em; }
.t-h1      { font-family: var(--display); font-weight: 700; font-size: clamp(1.95rem, 3.8vw, 2.85rem); line-height: 1.08; letter-spacing: -.03em; }
.t-h2      { font-family: var(--display); font-weight: 700; font-size: clamp(1.45rem, 2.4vw, 1.9rem); letter-spacing: -.024em; }
.t-h3      { font-family: var(--display); font-weight: 700; font-size: 1.175rem; letter-spacing: -.018em; }
.t-lead    { font-size: clamp(1.0625rem, 1.35vw, 1.1875rem); line-height: 1.58; color: var(--ink-2); }
.t-body    { font-size: 1rem; line-height: 1.62; color: var(--ink-2); }
.t-sm      { font-size: .9375rem; line-height: 1.55; color: var(--ink-2); }
.t-xs      { font-size: .8125rem; line-height: 1.5; color: var(--ink-3); }
.t-eyebrow { font: 600 .75rem/1.3 var(--mono); letter-spacing: .085em; text-transform: uppercase; color: var(--brand); }
.t-num     { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ---------- Buttons ------------------------------------------------------- */
.btn {
  --btn-bg: var(--surface);
  --btn-fg: var(--ink);
  --btn-bd: var(--line-2);
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 2.75rem; padding: 0 1.05rem;
  border: 1px solid var(--btn-bd); border-radius: var(--r-sm);
  background: var(--btn-bg); color: var(--btn-fg);
  font-size: .9375rem; font-weight: 600; letter-spacing: -.006em;
  text-decoration: none; white-space: nowrap;
  box-shadow: var(--shadow-1);
  transition: background-color .16s ease, border-color .16s ease, transform .1s ease, box-shadow .16s ease, color .16s ease;
}
.btn:hover:not(:disabled) { background: var(--sunken); }
.btn:active:not(:disabled) { transform: translateY(1px); box-shadow: none; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; box-shadow: none; }

.btn-primary { --btn-bg: var(--brand); --btn-fg: var(--brand-on); --btn-bd: var(--brand); }
.btn-primary:hover:not(:disabled) { background: var(--brand-hi); border-color: var(--brand-hi); }

.btn-ghost { --btn-bg: transparent; --btn-bd: transparent; --btn-fg: var(--ink-2); box-shadow: none; }
.btn-ghost:hover:not(:disabled) { background: var(--sunken); color: var(--ink); }

.btn-danger { --btn-fg: var(--bad); --btn-bd: var(--bad-line); --btn-bg: var(--surface); }
.btn-danger:hover:not(:disabled) { background: var(--bad-soft); }

.btn-lg { min-height: 3.25rem; padding: 0 1.5rem; font-size: 1.0625rem; border-radius: var(--r); }
.btn-sm { min-height: 2.125rem; padding: 0 .7rem; font-size: .8125rem; }
.btn-icon { min-height: 2.375rem; width: 2.375rem; padding: 0; }
.btn-block { width: 100%; }
.btn svg { width: 1.05em; height: 1.05em; flex: none; }

/* ---------- Fields -------------------------------------------------------- */
.field { display: grid; gap: .4rem; }
.field > label, .label {
  font-size: .8125rem; font-weight: 600; color: var(--ink-2); letter-spacing: -.004em;
}
.input, .textarea, .select {
  width: 100%; min-height: 2.75rem; padding: .6rem .8rem;
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink);
  font-size: .9375rem; line-height: 1.5;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.textarea { min-height: 6rem; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--ink-4); }
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent);
}
.select {
  appearance: none; padding-inline-end: 2.25rem; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 1.05rem) 1.2rem, calc(100% - .75rem) 1.2rem;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.hint { font-size: .8125rem; line-height: 1.45; color: var(--ink-3); }
.range { width: 100%; accent-color: var(--brand); cursor: pointer; }

/* ---------- Chips / badges ------------------------------------------------ */
.chip {
  display: inline-flex; align-items: center; gap: .375rem;
  padding: .175rem .5rem;
  border: 1px solid var(--line-2); border-radius: var(--r-xs);
  background: var(--surface); color: var(--ink-2);
  font: 600 .75rem/1.5 var(--sans); white-space: nowrap;
}
.chip-brand { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand); }
.chip-ok    { background: var(--ok-soft);    border-color: var(--ok-line);    color: var(--ok); }
.chip-warn  { background: var(--warn-soft);  border-color: var(--warn-line);  color: var(--warn); }
.chip-bad   { background: var(--bad-soft);   border-color: var(--bad-line);   color: var(--bad); }
.chip-heat  { background: var(--heat-soft);  border-color: var(--heat-line);  color: var(--heat); }
.chip .dot { width: .4rem; height: .4rem; border-radius: 50%; background: currentColor; flex: none; }

/* ---------- Cards --------------------------------------------------------- */
.card {
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}
.card-pad { padding: 1.25rem; }

/* ---------- Segmented control --------------------------------------------- */
.segmented {
  display: inline-flex; padding: .1875rem; gap: .1875rem;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--sunken);
}
.segmented button {
  min-height: 2rem; padding: 0 .75rem;
  border-radius: var(--r-xs);
  color: var(--ink-3); font-size: .8125rem; font-weight: 600;
  transition: background-color .14s ease, color .14s ease;
}
.segmented button:hover { color: var(--ink); }
.segmented button[aria-pressed="true"], .segmented button.is-active {
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1);
}

/* ---------- Meter / progress ---------------------------------------------- */
.meter {
  position: relative; height: .5rem; overflow: hidden;
  border-radius: var(--r-pill); background: var(--sunken);
  border: 1px solid var(--line);
}
.meter > i {
  display: block; height: 100%; width: 0;
  border-radius: inherit; background: var(--brand);
  transition: width .3s cubic-bezier(.25, 1, .4, 1);
}
.meter[data-indeterminate="true"] > i {
  width: 35% !important;
  animation: fg-slide 1.15s ease-in-out infinite;
}
@keyframes fg-slide { 0% { transform: translateX(-110%); } 100% { transform: translateX(320%); } }

/* ---------- Notices ------------------------------------------------------- */
.notice {
  display: flex; gap: .75rem; align-items: flex-start;
  padding: .85rem 1rem;
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--sunken); color: var(--ink-2);
  font-size: .9375rem; line-height: 1.5;
}
.notice strong { color: var(--ink); font-weight: 600; }
.notice-warn { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn); }
.notice-warn strong { color: inherit; }
.notice-bad  { background: var(--bad-soft);  border-color: var(--bad-line);  color: var(--bad); }
.notice-bad strong { color: inherit; }
.notice-brand { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand); }
.notice-brand strong { color: inherit; }
.notice svg { width: 1.15rem; height: 1.15rem; flex: none; margin-top: .125rem; }

/* ---------- Skeleton ------------------------------------------------------ */
.skeleton {
  border-radius: var(--r-xs);
  background: linear-gradient(90deg, var(--sunken) 25%, color-mix(in srgb, var(--sunken) 55%, var(--surface)) 50%, var(--sunken) 75%);
  background-size: 240% 100%;
  animation: fg-shimmer 1.4s linear infinite;
}
@keyframes fg-shimmer { to { background-position: -240% 0; } }

/* ============================================================================
   Header
   ========================================================================= */
.fg-header {
  position: sticky; top: 0; z-index: 40;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(14px) saturate(150%);
}
.fg-header-inner {
  height: var(--header-h);
  display: flex; align-items: center; gap: 1.25rem;
}
.wordmark {
  display: inline-flex; align-items: center; gap: .5rem;
  color: var(--ink); text-decoration: none; flex: none;
}
.wordmark svg { width: 1.5rem; height: 1.5rem; border-radius: .45rem; }
.wordmark span {
  font-family: var(--display); font-weight: 700; font-size: 1.15rem;
  letter-spacing: -.032em;
}
.wordmark span i { font-style: normal; color: var(--brand); }

.fg-nav { display: flex; align-items: center; gap: .125rem; margin-inline-start: .5rem; flex: 1; min-width: 0; }
.fg-nav a {
  padding: .4rem .625rem; border-radius: var(--r-xs);
  color: var(--ink-3); font-size: .875rem; font-weight: 600; text-decoration: none;
  transition: background-color .14s ease, color .14s ease;
}
.fg-nav a:hover { background: var(--sunken); color: var(--ink); }
.fg-nav a[aria-current="page"] { color: var(--ink); background: var(--sunken); }

.fg-header-actions { display: flex; align-items: center; gap: .5rem; flex: none; }

.device-pill {
  display: inline-flex; align-items: center; gap: .4rem;
  height: 2rem; padding: 0 .625rem;
  border: 1px solid var(--line-2); border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink-2);
  font-size: .8125rem; font-weight: 600;
}
.device-pill .dot { width: .45rem; height: .45rem; border-radius: 50%; background: var(--ink-4); flex: none; }
.device-pill[data-state="ready"]    { color: var(--ok);   border-color: var(--ok-line);   background: var(--ok-soft); }
.device-pill[data-state="ready"] .dot { background: var(--ok); }
.device-pill[data-state="busy"]     { color: var(--heat); border-color: var(--heat-line); background: var(--heat-soft); }
.device-pill[data-state="busy"] .dot { background: var(--heat); animation: fg-pulse 1s ease-in-out infinite; }
.device-pill[data-state="blocked"]  { color: var(--bad);  border-color: var(--bad-line);  background: var(--bad-soft); }
.device-pill[data-state="blocked"] .dot { background: var(--bad); }
@keyframes fg-pulse { 50% { opacity: .35; } }

.theme-toggle { color: var(--ink-3); border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface); }
.theme-toggle:hover { background: var(--sunken); color: var(--ink); }
.theme-toggle svg { width: 1.05rem; height: 1.05rem; margin-inline: auto; }
/* The button shows the mode it will switch *to*: a moon while light, a sun
   while dark. Explicit [data-theme] rules come last so the toggle beats the
   system preference in both directions. */
.theme-toggle .i-sun { display: none; }
.theme-toggle .i-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .i-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .i-moon { display: none; }
}
:root[data-theme="dark"] .theme-toggle .i-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .i-moon { display: none; }
:root[data-theme="light"] .theme-toggle .i-sun { display: none; }
:root[data-theme="light"] .theme-toggle .i-moon { display: block; }

.nav-toggle { display: none; }

/* ============================================================================
   Home
   ========================================================================= */

/* Motion. Every animation below is opt-out via prefers-reduced-motion, and
   nothing load-bearing depends on it: the page is complete and readable with
   all of it disabled. */
@keyframes fg-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@keyframes fg-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fg-sweep {
  from { transform: translate3d(-12%, -6%, 0) scale(1); }
  to { transform: translate3d(12%, 6%, 0) scale(1.15); }
}
@keyframes fg-draw { to { stroke-dashoffset: 0; } }

/* Staggered entrance for anything marked as revealing. */
.reveal { animation: fg-rise .62s cubic-bezier(.22, 1, .36, 1) both; }
.reveal[data-delay="1"] { animation-delay: .06s; }
.reveal[data-delay="2"] { animation-delay: .12s; }
.reveal[data-delay="3"] { animation-delay: .18s; }
.reveal[data-delay="4"] { animation-delay: .24s; }
.reveal[data-delay="5"] { animation-delay: .30s; }
.reveal[data-delay="6"] { animation-delay: .36s; }

/* Sections animate in as they are scrolled to, not all at once on load. */
.on-scroll { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s cubic-bezier(.22, 1, .36, 1); }
.on-scroll.is-visible { opacity: 1; transform: none; }

.hero {
  position: relative;
  padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(2rem, 4vw, 3rem);
  isolation: isolate;
}

/* A soft, slow-drifting wash behind the headline. Purely atmospheric, drawn
   with gradients rather than an image so it costs nothing to load. */
.hero-glow {
  position: absolute; z-index: -1; inset: -18% -12% auto -22%;
  height: 130%;
  pointer-events: none;
  background:
    radial-gradient(38% 46% at 22% 32%, color-mix(in srgb, var(--brand) 26%, transparent), transparent 70%),
    radial-gradient(32% 40% at 68% 24%, color-mix(in srgb, var(--heat) 16%, transparent), transparent 72%),
    radial-gradient(30% 34% at 48% 68%, color-mix(in srgb, var(--brand) 14%, transparent), transparent 70%);
  filter: blur(14px);
  opacity: .55;
  animation: fg-sweep 24s ease-in-out infinite alternate;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero-glow { opacity: .42; }
}
:root[data-theme="dark"] .hero-glow { opacity: .42; }
.hero-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .3rem .7rem .3rem .45rem;
  border: 1px solid var(--brand-line); border-radius: var(--r-pill);
  background: var(--brand-soft); color: var(--brand);
  font-size: .8125rem; font-weight: 600;
}
.hero-badge b { font-weight: 700; }
.hero h1 { margin-block: 1.25rem 1rem; max-width: 19ch; }
.hero h1 em { font-style: normal; color: var(--brand); }
.hero > .t-lead { max-width: 54ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.hero-proof {
  display: flex; flex-wrap: wrap; gap: 1.25rem 1.75rem;
  margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line);
}
.hero-proof div { display: grid; gap: .1rem; }
.hero-proof dt { font-size: .8125rem; color: var(--ink-3); }
.hero-proof dd { font-family: var(--display); font-weight: 700; font-size: 1.05rem; letter-spacing: -.02em; }

.section { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section-head {
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.5rem;
}
.section-head > div { display: grid; gap: .5rem; }
.section-head p.t-sm { max-width: 52ch; }

/* Six studios, so the track width is tuned to land on three across at the shell
   width: two even rows rather than a row of five and a lone orphan. */
.studio-grid {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
}
.studio-card {
  position: relative; display: flex; flex-direction: column; gap: .75rem;
  padding: 1.25rem;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface); color: inherit; text-decoration: none;
  box-shadow: var(--shadow-1);
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.studio-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(24rem 24rem at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--brand) 12%, transparent), transparent 60%);
  opacity: 0; transition: opacity .25s ease; pointer-events: none;
}
.studio-card:hover { border-color: var(--brand-line); box-shadow: var(--shadow-2); transform: translateY(-3px); }
.studio-card:hover::after { opacity: 1; }
.studio-card .studio-icon { transition: transform .25s cubic-bezier(.22, 1, .36, 1), background-color .2s ease; }
.studio-card:hover .studio-icon { transform: scale(1.08) rotate(-4deg); }
.studio-card footer .go { transition: transform .2s ease; display: inline-block; }
.studio-card:hover footer .go { transform: translateX(3px); }
.studio-card-top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.studio-icon {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem; flex: none;
  border-radius: var(--r-sm); background: var(--brand-soft); color: var(--brand);
}
.studio-icon svg { width: 1.3rem; height: 1.3rem; }
.studio-card h3 { font-size: 1.125rem; }
.studio-card p { font-size: .9375rem; line-height: 1.5; color: var(--ink-2); flex: 1; }
.studio-card footer {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding-top: .75rem; border-top: 1px solid var(--line);
  font-size: .8125rem; color: var(--ink-3);
}
.studio-card footer .go { color: var(--brand); font-weight: 600; }

/* How it works */
.steps {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  counter-reset: step;
}
.step {
  position: relative;
  display: grid; gap: .65rem;
  padding-top: 1.25rem;
  border-top: 2px solid var(--line-2);
}
/* The rule above each step fills with brand colour on the way in, so the row
   reads left to right as a sequence rather than three separate cards. */
.step::before {
  content: ""; position: absolute; inset-block-start: -2px; inset-inline-start: 0;
  width: 0; height: 2px; background: var(--brand);
  transition: width .85s cubic-bezier(.22, 1, .36, 1);
}
.on-scroll.is-visible .step::before { width: 100%; }
.on-scroll.is-visible .step:nth-child(2)::before { transition-delay: .16s; }
.on-scroll.is-visible .step:nth-child(3)::before { transition-delay: .32s; }
.step-number { font-size: .8125rem; font-weight: 600; color: var(--brand); }
.step h3 { font-size: 1.125rem; }
.step p { max-width: 34ch; }

/* Built on */
.runs-on {
  display: grid; gap: 1rem;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--sunken);
}
.runs-on ul {
  display: grid; gap: .85rem 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}
.runs-on li { display: grid; gap: .2rem; }
.runs-on strong { font-family: var(--display); font-weight: 700; font-size: 1.0625rem; letter-spacing: -.018em; }
.runs-on span { font-size: .875rem; line-height: 1.5; color: var(--ink-2); }

/* Closing block */
.closing {
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.5rem;
  padding-top: 2rem; border-top: 1px solid var(--line);
}
.closing > div:first-child { display: grid; gap: .6rem; max-width: 44ch; }

/* Device panel */
.device-panel {
  display: grid; gap: 1.5rem;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); box-shadow: var(--shadow-2);
}
.device-copy { display: grid; gap: .85rem; align-content: start; }
.device-copy h2 { max-width: 18ch; }
.device-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: .35rem; }

.device-readout { display: grid; gap: .85rem; align-content: start; }
.tier-gauge { display: grid; gap: .5rem; }
.tier-scale { display: flex; justify-content: space-between; font: 500 .75rem/1 var(--mono); color: var(--ink-3); }
.tier-bar { position: relative; height: 2.5rem; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--sunken); overflow: hidden; }
.tier-bar > i {
  position: absolute; inset: 0 auto 0 0; width: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--brand) 22%, transparent), color-mix(in srgb, var(--brand) 45%, transparent));
  border-right: 2px solid var(--brand);
  transition: width .55s cubic-bezier(.25, 1, .4, 1);
}
.tier-bar > b {
  position: absolute; inset-block: 0; inset-inline-start: .7rem;
  display: flex; align-items: center;
  font: 600 .8125rem/1 var(--sans); color: var(--ink-2);
}
.facts { display: grid; gap: 0; border-top: 1px solid var(--line); }
.facts > div {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .55rem 0; border-bottom: 1px solid var(--line);
}
.facts dt { font-size: .8125rem; color: var(--ink-3); }
.facts dd { font: 500 .8125rem/1.4 var(--mono); color: var(--ink); text-align: right; }

/* ============================================================================
   Studio shell
   ========================================================================= */
.studio {
  display: grid;
  grid-template-columns: 19rem minmax(0, 1fr);
  gap: 1.25rem;
  padding-block: 1.5rem 3rem;
  align-items: start;
}
.studio-side { display: grid; gap: 1rem; position: sticky; top: calc(var(--header-h) + 1.25rem); }
.studio-main { min-width: 0; display: grid; gap: 1rem; }

.studio-head { display: grid; gap: .5rem; padding-block: 1.75rem 0; }
.studio-head .breadcrumb {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .8125rem; color: var(--ink-3);
}
.studio-head .breadcrumb a { color: var(--ink-3); text-decoration: none; font-weight: 600; }
.studio-head .breadcrumb a:hover { color: var(--brand); }
.studio-head h1 { font-size: clamp(1.6rem, 3vw, 2.1rem); }

.panel {
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface); box-shadow: var(--shadow-1);
}
.panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .8rem 1rem; border-bottom: 1px solid var(--line);
}
.panel-head h2, .panel-head h3 { font-size: .9375rem; letter-spacing: -.01em; }
.panel-body { padding: 1rem; display: grid; gap: .9rem; }

/* Model loader */
.loader-state { display: grid; gap: .6rem; }
.loader-line { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
.loader-line span:last-child { white-space: nowrap; }
.error-detail { margin-top: .5rem; }
.error-detail summary { cursor: pointer; font-size: .8125rem; font-weight: 600; }
.error-detail code {
  display: block; margin-top: .4rem; padding: .5rem .6rem;
  border-radius: var(--r-xs); background: color-mix(in srgb, var(--ink) 8%, transparent);
  font: 500 .75rem/1.5 var(--mono); overflow-wrap: anywhere;
}
.loader-line span:first-child { font-size: .875rem; font-weight: 600; }
.loader-line span:last-child { font: 500 .8125rem/1 var(--mono); color: var(--ink-3); }
.loader-files { display: grid; gap: .4rem; max-height: 9rem; overflow-y: auto; }
.loader-file { display: grid; gap: .25rem; }
.loader-file-top { display: flex; justify-content: space-between; gap: .5rem; font: 500 .75rem/1.3 var(--mono); color: var(--ink-3); }
.loader-file-top b { font-weight: 500; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Chat ---------------------------------------------------------- */
.chat-log {
  display: grid; gap: 1rem; align-content: start;
  min-height: min(52vh, 30rem); max-height: min(62vh, 40rem);
  overflow-y: auto; padding: 1.25rem;
  scroll-behavior: smooth;
}
.chat-empty {
  display: grid; gap: 1rem; place-content: center; justify-items: center;
  text-align: center; padding: 2.5rem 1rem; color: var(--ink-3);
}
.chat-empty .studio-icon { width: 3rem; height: 3rem; }
.chat-empty h3 { color: var(--ink); }
.chat-starters { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; max-width: 34rem; }

.msg { display: grid; gap: .375rem; max-width: 46rem; }
.msg-role { font: 600 .75rem/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.msg-body { font-size: .96875rem; line-height: 1.65; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-user { justify-self: end; }
.msg-user .msg-role { text-align: right; color: var(--brand); }
/* Rendered model output. `white-space: pre-wrap` is dropped here because the
   Markdown pass has already turned the layout into real elements. */
.md { white-space: normal; }
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md p { margin-block: .6em; }
.md h3, .md h4, .md h5, .md h6 {
  margin-block: 1em .45em;
  font-family: var(--display); letter-spacing: -.015em;
}
.md h3 { font-size: 1.0625rem; }
.md h4, .md h5, .md h6 { font-size: .96875rem; }
.md ul, .md ol { margin-block: .6em; padding-inline-start: 1.35rem; display: grid; gap: .3em; }
.md ul li { list-style: disc; }
.md ol li { list-style: decimal; }
.md li::marker { color: var(--ink-3); }
.md strong { font-weight: 700; }
.md code {
  padding: .1em .35em; border-radius: var(--r-xs);
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  font: 500 .875em/1.4 var(--mono);
}
.md pre {
  margin-block: .75em; padding: .8rem .9rem; overflow-x: auto;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--sunken);
}
.md pre code { padding: 0; background: none; font-size: .8125rem; line-height: 1.6; }
.md blockquote {
  margin-block: .75em; padding: .1em 0 .1em .9rem;
  border-inline-start: 2px solid var(--brand-line); color: var(--ink-2);
}
.md hr { margin-block: 1em; border: 0; border-top: 1px solid var(--line); }
.md a { text-decoration: underline; }

.msg-user .msg-body {
  padding: .7rem .9rem; border-radius: var(--r) var(--r) var(--r-xs) var(--r);
  background: var(--brand-soft); border: 1px solid var(--brand-line); color: var(--ink);
}
.msg-think {
  margin-bottom: .5rem; padding: .6rem .75rem;
  border-inline-start: 2px solid var(--line-2);
  color: var(--ink-3); font-size: .875rem; line-height: 1.55; white-space: pre-wrap;
}
.msg-meta { font: 500 .75rem/1 var(--mono); color: var(--ink-4); }
.caret::after {
  content: ""; display: inline-block; width: .5rem; height: 1.05em;
  margin-inline-start: .15rem; vertical-align: text-bottom;
  background: var(--brand); animation: fg-blink 1s steps(2, start) infinite;
}
@keyframes fg-blink { 50% { opacity: 0; } }

/* Saved conversations */
.thread-list { display: grid; max-height: 22rem; overflow-y: auto; }
.thread-row { display: flex; align-items: center; gap: .25rem; border-bottom: 1px solid var(--line); }
.thread-list .thread-row:last-child { border-bottom: 0; }
.thread-row.is-current { background: var(--brand-soft); border-radius: var(--r-xs); }
.thread-open {
  flex: 1; min-width: 0; display: grid; gap: .1rem; padding: .55rem .5rem;
  border-radius: var(--r-xs); text-align: left;
}
.thread-open:hover { background: var(--sunken); }
.thread-open strong {
  font-size: .875rem; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.thread-row .btn { flex: none; }

.composer { display: grid; gap: .625rem; padding: 1rem; border-top: 1px solid var(--line); }
.composer-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; align-items: end; }
.composer textarea {
  min-height: 2.75rem; max-height: 12rem; resize: none; overflow-y: auto;
}
.composer-foot { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }

/* ---------- Dropzone / media --------------------------------------------- */
.dropzone {
  display: grid; gap: .75rem; place-items: center; text-align: center;
  padding: 2.25rem 1.25rem;
  border: 1.5px dashed var(--line-2); border-radius: var(--r);
  background: var(--sunken); color: var(--ink-3);
  transition: border-color .16s ease, background-color .16s ease, color .16s ease;
}
.dropzone:hover, .dropzone.is-over { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
.dropzone svg { width: 1.75rem; height: 1.75rem; }
.dropzone strong { color: var(--ink); font-weight: 600; }
.dropzone.is-over strong { color: inherit; }

.media-stage {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}
.media-slot { display: grid; gap: .5rem; }
.media-slot h3 { font-size: .875rem; font-family: var(--sans); font-weight: 600; color: var(--ink-2); }
.media-frame {
  position: relative; display: grid; place-items: center;
  min-height: 12rem; padding: .5rem; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background-color: var(--sunken);
  background-image:
    linear-gradient(45deg, color-mix(in srgb, var(--ink) 6%, transparent) 25%, transparent 25%, transparent 75%, color-mix(in srgb, var(--ink) 6%, transparent) 75%),
    linear-gradient(45deg, color-mix(in srgb, var(--ink) 6%, transparent) 25%, transparent 25%, transparent 75%, color-mix(in srgb, var(--ink) 6%, transparent) 75%);
  background-size: 18px 18px;
  background-position: 0 0, 9px 9px;
}
.media-frame img, .media-frame canvas { max-height: 26rem; width: auto; border-radius: var(--r-xs); }

/* Click-to-select: markers are positioned as a percentage of the image box, so
   they stay put no matter what size the browser renders the picture at. */
.click-layer { position: relative; display: inline-block; max-width: 100%; line-height: 0; }
.click-layer.is-armed { cursor: crosshair; }
.click-layer.is-armed img { outline: 2px dashed var(--brand-line); outline-offset: 2px; border-radius: var(--r-xs); }
.click-dot {
  position: absolute; width: .75rem; height: .75rem;
  margin: -.375rem 0 0 -.375rem;
  border: 2px solid #fff; border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 1px rgba(0,0,0,.35);
  pointer-events: none;
}
.click-dot.is-exclude { background: var(--bad); }
.media-frame .placeholder { color: var(--ink-3); font-size: .875rem; }

.waveform {
  width: 100%; height: 4.5rem; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--sunken);
}
.transcript {
  padding: 1rem; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--sunken);
  font-size: .96875rem; line-height: 1.7; color: var(--ink);
  white-space: pre-wrap; min-height: 6rem;
}
.transcript:empty::before { content: attr(data-placeholder); color: var(--ink-4); }

.rec-button {
  display: inline-flex; align-items: center; gap: .55rem;
  min-height: 2.75rem; padding: 0 1.05rem;
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--surface); font-size: .9375rem; font-weight: 600;
  box-shadow: var(--shadow-1);
}
.rec-button .dot { width: .6rem; height: .6rem; border-radius: 50%; background: var(--bad); flex: none; }
.rec-button[data-recording="true"] { border-color: var(--bad-line); background: var(--bad-soft); color: var(--bad); }
.rec-button[data-recording="true"] .dot { animation: fg-pulse .9s ease-in-out infinite; }

/* ---------- Imagine ------------------------------------------------------- */
.chip-row { display: flex; flex-wrap: wrap; gap: .4rem; }
/* The checkerboard means "transparent here". Generated and source images are
   opaque, so they get a plain ground; only the cutouts in Edit keep the pattern. */
.media-frame.is-opaque { background-image: none; }
.imagine-stage { min-height: 20rem; }
.imagine-stage canvas, .imagine-stage img { image-rendering: auto; max-height: 30rem; }
.imagine-working { display: grid; gap: .75rem; justify-items: center; width: min(22rem, 80%); text-align: center; }
.imagine-working .meter { width: 100%; }

/* ---------- Storage ------------------------------------------------------- */
.quota-panel .panel-body { gap: .75rem; }

/* One bar for the whole origin, split by what is taking the room. */
.quota-bar {
  display: flex; height: .875rem; overflow: hidden;
  border-radius: var(--r-pill); background: var(--sunken);
  border: 1px solid var(--line);
}
.quota-bar .seg { display: block; height: 100%; }
.seg-models { background: var(--brand); }
.seg-work   { background: var(--heat); }
.seg-other  { background: var(--ink-4); }

.quota-legend { display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; font-size: .8125rem; color: var(--ink-2); }
.quota-key { display: inline-flex; align-items: center; gap: .4rem; }
.quota-key i { width: .625rem; height: .625rem; border-radius: 3px; }
.quota-key .seg-free { background: var(--sunken); border: 1px solid var(--line-2); }

.data-tabs { margin-block: 1.25rem .875rem; flex-wrap: wrap; }
.data-tabs button { display: inline-flex; align-items: center; gap: .4rem; }
.data-panel { display: grid; gap: 1rem; }

/* Model rows */
.model-list { display: grid; }
.model-row {
  display: grid; align-items: center; gap: .875rem;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  padding: .7rem 0; border-bottom: 1px solid var(--line);
}
.model-list .model-row:last-child { border-bottom: 0; }
.model-icon {
  display: grid; place-items: center; width: 2.125rem; height: 2.125rem;
  border-radius: var(--r-sm); background: var(--sunken); color: var(--ink-3);
}
.model-row.is-cached .model-icon { background: var(--brand-soft); color: var(--brand); }
.model-size { display: grid; justify-items: end; gap: .1rem; text-align: right; }
.model-size strong { font-size: .875rem; font-weight: 600; }
.model-row:not(.is-cached) .model-size strong { color: var(--ink-3); font-weight: 500; }

/* Gallery */
.gallery {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
}
.gallery-card {
  margin: 0; display: grid; gap: .6rem;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface); overflow: hidden;
}
.gallery-card img {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  background: var(--sunken); border-bottom: 1px solid var(--line);
}
.gallery-missing {
  display: grid; place-items: center; aspect-ratio: 1;
  background: var(--sunken); color: var(--ink-3); font-size: .8125rem;
}
.gallery-card figcaption { display: grid; gap: .3rem; padding: 0 .75rem .75rem; }
.gallery-card figcaption strong {
  font-size: .875rem; font-weight: 600;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.audio-row { align-items: start; }
.data-excerpt {
  margin-top: .35rem; font-size: .8125rem; line-height: 1.5; color: var(--ink-2);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

.danger-panel .panel-body {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
}
.danger-panel .panel-body > div { display: grid; gap: .2rem; max-width: 46ch; }

/* The label is an inline-flex row; without nowrap the checkbox drops onto its
   own line once the description wraps, which reads as a broken control. */
.toggle-row { align-items: flex-start; gap: .65rem; flex-wrap: nowrap; }
.toggle-row input { margin-top: .25rem; flex: none; }
.toggle-row > span { display: grid; gap: .15rem; min-width: 0; }
.toggle-row strong { font-size: .9375rem; color: var(--ink); }

.data-list { display: grid; }
.data-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .75rem; padding: .7rem 0; border-bottom: 1px solid var(--line);
}
.data-list .data-row:last-child { border-bottom: 0; }
.data-row-main { display: grid; gap: .15rem; min-width: 0; flex: 1; }
.data-row-main strong { font-size: .9375rem; font-weight: 600; overflow-wrap: anywhere; }
.data-row-actions { display: flex; gap: .4rem; flex: none; }

.btn.is-armed { background: var(--bad); border-color: var(--bad); color: #fff; }

/* ---------- Library ------------------------------------------------------- */
.library-controls {
  display: grid; gap: .75rem;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; margin-bottom: 1.25rem;
}
.filter-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.checkbox { display: inline-flex; align-items: center; gap: .45rem; font-size: .875rem; color: var(--ink-2); cursor: pointer; }
.checkbox input { width: 1rem; height: 1rem; accent-color: var(--brand); cursor: pointer; }

.library-meta { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; margin-bottom: .9rem; }
.library-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20.5rem), 1fr)); }
.tool-card { display: flex; flex-direction: column; gap: .7rem; padding: 1.1rem; }
.tool-card-top { display: flex; align-items: start; justify-content: space-between; gap: .75rem; }
.tool-card h3 { font-size: 1.05rem; }
.tool-card p { font-size: .9063rem; line-height: 1.5; color: var(--ink-2); flex: 1; }
.tool-tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.tool-card footer { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding-top: .75rem; border-top: 1px solid var(--line); }
.save-btn { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .5rem; border-radius: var(--r-xs); color: var(--ink-3); font-size: .8125rem; font-weight: 600; }
.save-btn:hover { background: var(--sunken); color: var(--ink); }
.save-btn[aria-pressed="true"] { color: var(--brand); }
.save-btn svg { width: .95rem; height: .95rem; }

.empty-state { display: grid; gap: .6rem; justify-items: center; text-align: center; padding: 3rem 1rem; color: var(--ink-3); }
.empty-state h3 { color: var(--ink); }

/* ---------- Latest -------------------------------------------------------- */
.release-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.release-card { display: grid; gap: .5rem; padding: 1.1rem; }
.release-card h3 { font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.release-card p { font-size: .9063rem; color: var(--ink-2); }
.release-card a { font-size: .875rem; font-weight: 600; text-decoration: none; }
.release-card a:hover { text-decoration: underline; }

.recent-list { display: grid; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); overflow: hidden; }
.recent-item {
  display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) auto;
  gap: .75rem; align-items: center;
  padding: .85rem 1rem; border-bottom: 1px solid var(--line);
}
.recent-item:last-child { border-bottom: 0; }
.recent-item:hover { background: var(--sunken); }
.recent-index { font: 500 .8125rem/1 var(--mono); color: var(--ink-4); }
.recent-item h3 { font-size: .96875rem; }
.recent-item h3 a { color: inherit; text-decoration: none; }
.recent-item h3 a:hover { color: var(--brand); }
.recent-item p { font-size: .8125rem; color: var(--ink-3); }
.recent-side { display: flex; align-items: center; gap: .9rem; font: 500 .75rem/1 var(--mono); color: var(--ink-3); white-space: nowrap; }

.feed-status { display: inline-flex; align-items: center; gap: .5rem; font-size: .8125rem; color: var(--ink-3); }

/* ---------- Footer -------------------------------------------------------- */
.fg-footer { border-top: 1px solid var(--line); margin-top: 2rem; padding-block: 2.5rem 3rem; }
.fg-footer-inner { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr)); }
.fg-footer h2 { font-size: .8125rem; font-family: var(--sans); font-weight: 600; color: var(--ink-3); letter-spacing: .02em; margin-bottom: .75rem; }
.fg-footer nav { display: grid; gap: .45rem; }
.fg-footer nav a { color: var(--ink-2); font-size: .9063rem; text-decoration: none; width: fit-content; }
.fg-footer nav a:hover { color: var(--brand); }
.fg-footer-brand { display: grid; gap: .75rem; max-width: 30ch; }
.fg-footer-legal {
  display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; justify-content: space-between;
  margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--line);
  font-size: .8125rem; color: var(--ink-3);
}

/* ---------- Responsive ---------------------------------------------------- */
@media (max-width: 60rem) {
  .device-panel { grid-template-columns: minmax(0, 1fr); }
  .studio { grid-template-columns: minmax(0, 1fr); }
  .studio-side { position: static; }
  .fg-footer-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .fg-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 48rem) {
  :root { --shell: min(1180px, 100% - 2rem); --wide: min(1400px, 100% - 2rem); }
  .nav-toggle { display: inline-flex; }
  .fg-nav {
    position: absolute; inset-inline: 0; top: var(--header-h);
    flex-direction: column; align-items: stretch; gap: .125rem;
    margin: 0; padding: .625rem;
    border-bottom: 1px solid var(--line);
    background: var(--paper); box-shadow: var(--shadow-2);
  }
  .fg-nav:not(.is-open) { display: none; }
  .fg-nav a { padding: .65rem .75rem; font-size: .9375rem; }
  .device-pill span { display: none; }
  .device-pill { padding-inline: .55rem; }
  .library-controls { grid-template-columns: minmax(0, 1fr); }
  .composer-row { grid-template-columns: minmax(0, 1fr); }
  .hero-proof { gap: 1rem 1.25rem; }
}
@media (max-width: 34rem) {
  .fg-footer-inner { grid-template-columns: minmax(0, 1fr); }
  .recent-item { grid-template-columns: 1.75rem minmax(0, 1fr); }
  .recent-side { grid-column: 2; }

  /* Four columns of model metadata do not fit a phone. The size and the
     controls move under the name rather than being squeezed to nothing. */
  .model-row { grid-template-columns: auto minmax(0, 1fr); row-gap: .5rem; }
  .model-size { grid-column: 2; justify-items: start; text-align: left; flex-direction: row; }
  .model-row .data-row-actions { grid-column: 2; }
  .gallery { grid-template-columns: minmax(0, 1fr); }
  .danger-panel .panel-body { flex-direction: column; align-items: stretch; }
}

/* ---------- Motion / print ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  /* Entrance animations start from opacity 0, so they must land visible rather
     than simply running instantly from an invisible state. */
  .reveal, .on-scroll { opacity: 1 !important; transform: none !important; }
  .hero-glow { animation: none; }
}
@media print {
  .fg-header, .fg-footer, .composer, .studio-side { display: none !important; }
  body { background: #fff; color: #000; }
}