/* TKSavr v10.7.0 — Fluid Design System
   Architecture: tokens → primitives → components → containers → accessibility.
   Rule: components size themselves from available space; no device-specific markup.
*/

@layer tokens, reset, base, components, containers, utilities, accessibility, surface-contract;

@layer tokens {
  :root {
    color-scheme: dark;

    /* Responsive geometry. The baseline uses broadly supported viewport units;
       container units are layered on later where supported. */
    --page-gutter: clamp(0.875rem, 2.2vi, 2.5rem);
    --touch-target: clamp(2.75rem, 2.5rem + 0.5vi, 3rem);
    --content-max: 88rem;
    --hero-max: 80rem;
    --panel-max: 68rem;
    --legal-max: var(--content-max);
    --hero-copy-max: 56rem;
    --preview-grid-min: 22rem;

    /* Fluid type baseline. */
    --fs-2xs: clamp(0.6875rem, 0.60rem + 0.45vi, 0.75rem);
    --fs-xs: clamp(0.75rem, 0.66rem + 0.55vi, 0.8125rem);
    --fs-sm: clamp(0.75rem, 0.66rem + 0.82vi, 0.9375rem);
    --fs-md: clamp(0.875rem, 0.76rem + 0.95vi, 1.0625rem);
    --fs-lg: clamp(1rem, 0.82rem + 1.4vi, 1.25rem);
    --fs-hero: clamp(2.05rem, 0.65rem + 4.1vi, 4.25rem);

    /* Fluid spacing baseline. */
    --space-1: clamp(0.375rem, 0.28rem + 0.45vi, 0.625rem);
    --space-2: clamp(0.625rem, 0.46rem + 0.62vi, 0.875rem);
    --space-3: clamp(0.875rem, 0.62rem + 0.95vi, 1.25rem);
    --space-4: clamp(1.125rem, 0.76rem + 1.35vi, 1.75rem);
    --space-5: clamp(1.5rem, 0.95rem + 2.05vi, 2.5rem);
    --space-6: clamp(1.5rem, 1rem + 2.15vi, 3.25rem);
    --space-7: clamp(2rem, 0.8rem + 3.3vi, 5rem);

    /* Component geometry baseline. */
    --control-h: clamp(3rem, 2.75rem + 1.1vi, 3.55rem);
    --icon-control: clamp(2.5rem, 2.35rem + 0.5vi, 2.75rem);
    --radius-sm: clamp(0.55rem, 0.45rem + 0.24vi, 0.75rem);
    --radius-md: clamp(0.75rem, 0.58rem + 0.42vi, 1rem);
    --radius-lg: clamp(1rem, 0.8rem + 0.55vi, 1.375rem);

    /* Brand lockup geometry. The mark stays square; the wordmark preserves
       its native 390:108 ratio so the logo never looks stretched. */
    --brand-mark-size: clamp(1.5rem, 1.28rem + 0.72vi, 2rem);
    --brand-wordmark-size: clamp(1.12rem, 0.94rem + 0.62vi, 1.5rem);
    --brand-lockup-gap: clamp(0.45rem, 0.34rem + 0.28vi, 0.7rem);
    --footer-mark-size: clamp(1rem, 0.9rem + 0.28vi, 1.2rem);
    --brand-inline-gap: clamp(0.42rem, 0.34rem + 0.22vi, 0.62rem);

    --stage-max-inline: 76rem;
    --stage-max-block: 78svh;
    --stage-gap: clamp(0.75rem, 1.15vmin, 1.5rem);

    /* Theme */
    --bg: #0C0C0D;
    --bg-2: #111113;
    --surface: rgba(20, 20, 22, 0.84);
    --surface-solid: #151517;
    --input: #111113;
    --soft: #1B1B1E;
    --text: #F3F3F1;
    --muted: #A3A3A7;
    --muted-2: #7A7B81;
    --line: rgba(255, 255, 255, 0.075);
    --line-strong: rgba(255, 255, 255, 0.145);
    --button: #F1F1EF;
    --button-text: #0D0D0F;
    --danger: #C66B74;
    --overlay: rgba(0, 0, 0, 0.52);
    --focus-ring: color-mix(in srgb, var(--text) 9%, transparent);
    --shadow: 0 1.25rem 4rem rgba(0, 0, 0, 0.22);

    /* Motion */
    --ease: cubic-bezier(.2, .75, .2, 1);
    --fast: 140ms;
    --normal: 220ms;
    --slow: 360ms;
  }

  :root[data-theme="light"] {
    color-scheme: light;
    --bg: #F5F5F2;
    --bg-2: #F0F0EC;
    --surface: rgba(255, 255, 255, 0.90);
    --surface-solid: #FFFFFF;
    --input: #EAEAE5;
    --soft: #E4E4DF;
    --text: #161618;
    --muted: #66666C;
    --muted-2: #707076;
    --line: rgba(18, 18, 20, 0.075);
    --line-strong: rgba(18, 18, 20, 0.14);
    --button: #171719;
    --button-text: #FFFFFF;
    --overlay: rgba(0, 0, 0, 0.52);
    --focus-ring: color-mix(in srgb, var(--text) 10%, transparent);
    --shadow: 0 1.2rem 3.8rem rgba(0, 0, 0, 0.07);
  }

  /* cqi is intentionally used on descendants of named size containers.
     Root-level sizing stays viewport/orientation-based so component units remain
     genuinely local to the component that owns the layout. */

}

@supports (height: 1svh) {
  :root {
    --stage-max-block: 78svh;
  }

  .language-menu {
    max-block-size: min(70svh, 20rem);
  }
}

@layer reset {
  *,
  *::before,
  *::after { box-sizing: border-box; }

  html {
    inline-size: 100%;
    min-block-size: 100%;
    overflow-x: visible;
    background: var(--bg);
    scroll-behavior: smooth;
  }

  body {
    inline-size: 100%;
    min-block-size: 100vh;
    min-block-size: 100svh;
    margin: 0;
    overflow-x: visible;
    color: var(--text);
    background:
      linear-gradient(180deg, var(--bg), var(--bg-2));
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  img, video, canvas, svg { max-inline-size: 100%; }

  img, video { display: block; }

  button, input, select, textarea { font: inherit; }

  button { border: 0; }

  a { color: inherit; text-decoration: none; }

  h1, h2, h3, p { margin-block: 0; }

  h1, h2, h3, p, a, button, label, span {
    min-inline-size: 0;
  }

  svg {
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.75;
  }
}

@layer base {
  /* The page itself participates in the viewport: header stays intrinsic,
     main consumes the remaining visual height, and the footer rests at the bottom.
     Dynamic viewport units prevent browser chrome/mobile address bars from creating
     false overflow while still allowing natural page growth when content needs it. */
  body.site-page {
    display: flex;
    flex-direction: column;
    min-block-size: 100vh;
    min-block-size: 100svh;
    min-block-size: 100dvh;
  }

  body.site-page .site-main {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-block-size: 0;
  }

  /* Page frame owns minimum viewport height; the hero owns content height. */
  body.site-page .site-main > .hero {
    flex: 0 0 auto;
    min-block-size: 0;
    justify-content: flex-start;
  }

  body.site-page .site-main > .footer {
    margin-block-start: auto;
  }

  body.legal-page {
    min-block-size: 100vh;
    min-block-size: 100svh;
    min-block-size: 100dvh;
  }

  body.legal-page .legal-shell {
    min-block-size: 100%;
    display: flex;
    flex-direction: column;
  }

  body.legal-page .legal-shell > .footer {
    margin-block-start: auto;
  }

  body::before {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    content: "";
    background:
      radial-gradient(760px 360px at 50% -120px, rgba(255, 255, 255, 0.030), transparent 72%),
      radial-gradient(420px 320px at 100% 100%, rgba(255, 255, 255, 0.014), transparent 72%);
  }

  :root[data-theme="light"] body::before {
    background:
      radial-gradient(760px 360px at 50% -120px, rgba(10, 10, 11, 0.018), transparent 72%),
      radial-gradient(420px 320px at 100% 100%, rgba(10, 10, 11, 0.008), transparent 72%);
  }

  .shell {
    position: relative;
    z-index: 1;
    inline-size: min(100%, var(--content-max));
    max-inline-size: 100%;
    margin-inline: auto;
    padding-inline-start: max(var(--page-gutter), env(safe-area-inset-left));
    padding-inline-end: max(var(--page-gutter), env(safe-area-inset-right));
    container-type: inline-size;
  }

  .site-header.shell { container-name: header; z-index: 10; }
  .site-main.shell { container-name: main; }
  .legal-shell.shell { container-name: legal; }
  .policy-shell.shell { container-name: policy; }

  .site-main {
    container: main / inline-size;
  }

  .site-main,
  .hero,
  .download-panel,
  .preview,
  .footer,
  .legal-shell,
  .legal-card,
  .legal-notice {
    min-inline-size: 0;
  }

  .ambient {
    position: fixed;
    z-index: 0;
    pointer-events: none;
    border-radius: 999px;
    filter: blur(5rem);
    opacity: 0.18;
  }

  .ambient-a {
    inline-size: min(clamp(12rem, 35vi, 26rem), calc(100vi - 1rem));
    block-size: min(clamp(7rem, 18vmin, 14rem), calc(100vb - 1rem));
    inset-block-start: -9rem;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(255, 255, 255, 0.040), transparent 68%);
  }

  .ambient-b {
    inline-size: min(clamp(12rem, 30vi, 22rem), calc(100vi - 1rem));
    block-size: min(clamp(8rem, 20vmin, 16rem), calc(100vb - 1rem));
    inset-inline-end: 0;
    inset-block-end: 0;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.018), transparent 67%);
    opacity: 0.12;
  }

  :root[data-theme="light"] .ambient-a {
    background: radial-gradient(circle, rgba(10, 10, 11, 0.018), transparent 68%);
    opacity: 0.12;
  }

  :root[data-theme="light"] .ambient-b {
    background: radial-gradient(circle, rgba(10, 10, 11, 0.010), transparent 67%);
    opacity: 0.08;
  }
}

@layer components {
  .site-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-3);
    min-block-size: clamp(3.25rem, 4.5vi, 4.5rem);
    padding-block: var(--space-2);
    border-block-end: 1px solid var(--line);
  }

  .brand {
    display: inline-flex;
    flex: 0 1 auto;
    align-items: center;
    min-inline-size: 0;
    max-inline-size: 100%;
  }

  .brand-lockup {
    display: inline-flex;
    align-items: center;
    gap: var(--brand-lockup-gap);
    min-inline-size: 0;
    max-inline-size: 100%;
  }

  .brand-mark,
   .brand-wordmark {
    display: none;
    object-fit: contain;
    flex: 0 0 auto;
  }

  .brand-mark {
    inline-size: var(--brand-mark-size);
    block-size: var(--brand-mark-size);
  }

  @supports (width: 1cqi) {
    .brand-wordmark-unused {
      inline-size: min(var(--brand-wordmark-width), 48cqi);
    }
  }

  .brand-wordmark {
    display: inline-flex;
    align-items: baseline;
    min-inline-size: 0;
    max-inline-size: 100%;
    color: var(--text);
    font-family: Inter, "Helvetica Neue", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
    font-size: var(--brand-wordmark-size);
    font-weight: 820;
    letter-spacing: -0.055em;
    line-height: 0.9;
    white-space: nowrap;
    text-rendering: geometricPrecision;
    font-feature-settings: "kern" 1, "liga" 1;
  }

  .brand-wordmark-tks {
    font-weight: 900;
    color: var(--text);
  }

  .brand-wordmark-avr {
    font-weight: 740;
    color: var(--muted);
  }

  .brand-wordmark::after {
    content: "";
    inline-size: 0.18em;
    block-size: 0.18em;
    margin-inline-start: 0.10em;
    margin-block-end: 0.06em;
    border-radius: 50%;
    background: var(--muted-2);
    opacity: 0.72;
  }

  :root[data-theme="dark"] .brand-mark-dark,
  :root[data-theme="dark"] .brand-wordmark-dark,
  :root[data-theme="light"] .brand-mark-light,
  :root[data-theme="light"] .brand-wordmark-light { display: block; }

  .header-tools {
    display: flex;
    flex: 0 1 auto;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-1);
    min-inline-size: 0;
    max-inline-size: 100%;
  }

  .theme-toggle,
  .language-trigger {
    min-block-size: var(--touch-target);
    border: 1px solid var(--line);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: border-color var(--fast) var(--ease), color var(--fast) var(--ease),
      background var(--fast) var(--ease), transform var(--fast) var(--ease);
  }

  .theme-toggle:hover,
  .language-trigger:hover,
  .language-trigger:focus-visible {
    color: var(--text);
    border-color: var(--line-strong);
    background: color-mix(in srgb, var(--text) 3%, transparent);
  }

  .theme-toggle {
    inline-size: var(--icon-control);
    flex: 0 0 var(--icon-control);
    display: grid;
    place-items: center;
    border-radius: var(--radius-sm);
  }

  .theme-icon { inline-size: 0.95rem; block-size: 0.95rem; }
  .theme-icon-sun { display: none; }

  :root[data-theme="light"] .theme-icon-moon { display: none; }
  :root[data-theme="light"] .theme-icon-sun { display: block; }

  .language-picker {
    position: relative;
    flex: 0 1 auto;
    min-inline-size: 0;
  }

  .language-picker summary {
    list-style: none;
    cursor: pointer;
  }

  .language-picker summary::-webkit-details-marker { display: none; }

  .language-trigger {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.4rem;
    inline-size: min(100%, 11rem);
    min-inline-size: 0;
    max-inline-size: 11rem;
    min-block-size: 2.35rem;
    padding: 0.28rem 0.5rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--muted);
    transition: border-color var(--fast) var(--ease), color var(--fast) var(--ease), background var(--fast) var(--ease);
  }

  .language-trigger:hover,
  .language-trigger:focus-visible {
    color: var(--text);
    border-color: var(--line-strong);
    background: color-mix(in srgb, var(--text) 4%, transparent);
  }

  .language-globe {
    display: grid;
    place-items: center;
    inline-size: 1.4rem;
    block-size: 1.4rem;
    border-radius: 0.48rem;
    background: var(--soft);
    color: var(--muted);
  }

  .language-globe svg { inline-size: 0.78rem; block-size: 0.78rem; }

  .language-trigger-copy {
    display: flex;
    align-items: baseline;
    gap: 0.32rem;
    min-inline-size: 0;
    text-align: start;
  }

  .language-trigger-code {
    flex: 0 0 auto;
    font-size: 0.5rem;
    font-weight: 900;
    letter-spacing: 0.12em;
  }

  .language-trigger-name {
    min-inline-size: 0;
    overflow: hidden;
    color: var(--muted);
    font-size: var(--fs-2xs);
    font-weight: 760;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .language-chevron {
    inline-size: 0.7rem;
    block-size: 0.7rem;
    transition: transform var(--fast) var(--ease);
  }

  .language-picker[open] .language-chevron { transform: rotate(180deg); }

  .language-menu {
    position: absolute;
    z-index: 50;
    inset-block-start: calc(100% + 0.4rem);
    inset-inline-end: 0;
    inline-size: min(15rem, calc(100vw - 1rem));
    max-inline-size: calc(100vw - 1rem);
    padding: 0.35rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(8rem, 100%), 1fr));
    gap: 0.2rem;
    overflow: auto;
    max-block-size: min(70svh, 20rem);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--surface-solid) 97%, transparent);
    box-shadow: var(--shadow);
    backdrop-filter: blur(1rem);
  }

  .language-option {
    display: grid;
    grid-template-columns: 1.45rem minmax(0, 1fr) 0.8rem;
    align-items: center;
    gap: 0.28rem;
    min-inline-size: 0;
    min-block-size: var(--touch-target);
    padding: 0.3rem;
    border-radius: 0.58rem;
    color: var(--muted);
    transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
  }

  .language-option:hover,
  .language-option:focus-visible,
  .language-option.active {
    color: var(--text);
    background: var(--soft);
  }

  .language-option-code {
    font-size: 0.48rem;
    font-weight: 900;
    letter-spacing: 0.08em;
  }

  .language-option-copy { min-inline-size: 0; }

  .language-option-copy strong {
    display: block;
    min-inline-size: 0;
    overflow-wrap: anywhere;
    font-size: var(--fs-2xs);
    line-height: 1.15;
  }

  .language-check {
    display: none;
    color: var(--text);
    font-size: 0.7rem;
    justify-self: end;
  }

  .language-option.active .language-check { display: block; }

  .hero {
    container-type: inline-size;
    container-name: hero;
    display: flex;
    flex-direction: column;
    align-items: center;
    inline-size: min(100%, var(--hero-max));
    max-inline-size: 100%;
    margin-inline: auto;
    padding-inline: clamp(0.25rem, 1.25vi, 1.5rem);
    padding-block: clamp(2rem, 7vmin, 5rem) clamp(1.75rem, 4vmin, 3rem);
    text-align: center;
  }

  .hero-copy {
    inline-size: min(100%, var(--hero-copy-max));
    max-inline-size: 100%;
    min-inline-size: 0;
    container-type: inline-size;
  }

  .hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    max-inline-size: 100%;
    color: var(--muted);
    font-size: var(--fs-2xs);
    font-weight: 900;
    letter-spacing: clamp(0.1em, 0.12em + 0.08vi, 0.18em);
    text-transform: uppercase;
    text-wrap: balance;
  }

  .hero-kicker > span:first-child {
    flex: 0 0 auto;
    inline-size: 0.3rem;
    block-size: 0.3rem;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.68;
  }

  .hero h1 {
    inline-size: 100%;
    max-inline-size: 100%;
    margin-block-start: var(--space-3);
    font-size: var(--fs-hero);
    line-height: 0.98;
    letter-spacing: -0.065em;
    font-weight: 840;
    text-wrap: balance;
  }

  .hero-lead {
    max-inline-size: min(100%, 42rem);
    margin-inline: auto;
    margin-block-start: var(--space-2);
    color: var(--muted);
    font-size: var(--fs-sm);
    line-height: 1.6;
    text-wrap: pretty;
  }

  .download-panel {
    container-type: inline-size;
    container-name: downloader;
    inline-size: 100%;
    max-inline-size: var(--panel-max);
    min-inline-size: 0;
    margin-block-start: clamp(1rem, 2.25vmin, 1.75rem);
    padding: clamp(0.8rem, 1.2vi, 1.25rem);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow);
    backdrop-filter: blur(1.1rem);
    text-align: start;
    transition: border-color var(--normal) var(--ease), box-shadow var(--normal) var(--ease),
      background var(--normal) var(--ease);
  }

  .download-panel:focus-within {
    border-color: var(--line-strong);
  }

  .panel-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-2);
    min-inline-size: 0;
    margin-inline: 0.25rem;
    margin-block-end: var(--space-2);
  }

  .panel-heading h2 {
    min-inline-size: 0;
    font-size: var(--fs-md);
    line-height: 1.2;
    letter-spacing: -0.025em;
  }

  .input-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(8rem, max-content);
    align-items: stretch;
    gap: clamp(0.5rem, 0.9cqi, 0.75rem);
    min-inline-size: 0;
  }

  .input-row > .input-shell,
  .input-row > .primary-btn {
    min-inline-size: 0;
    max-inline-size: 100%;
    inline-size: 100%;
  }

  .input-shell {
    display: grid;
    grid-template-columns: 1rem minmax(0, 1fr) var(--icon-control) var(--icon-control);
    align-items: center;
    gap: 0;
    min-inline-size: 0;
    min-block-size: var(--control-h);
    padding-inline-start: clamp(0.5rem, 0.9cqi, 0.75rem);
    padding-inline-end: 0.2rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--input);
    transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease),
      background var(--fast) var(--ease);
  }

  .input-shell:focus-within {
    border-color: var(--line-strong);
    box-shadow: 0 0 0 3px var(--focus-ring);
  }

  .input-leading {
    inline-size: 1rem;
    block-size: 1rem;
    color: var(--muted-2);
  }

  .input-shell input {
    inline-size: 100%;
    min-inline-size: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text);
    font-size: max(1rem, var(--fs-sm));
    font-weight: 650;
    overflow-x: auto;
    overflow-y: hidden;
    text-overflow: clip;
    white-space: nowrap;
    scrollbar-width: none;
  }

  .input-shell input::-webkit-scrollbar { display: none; }

  .input-shell input::placeholder { color: var(--muted-2); }
  .input-shell input::-webkit-search-cancel-button { display: none; }

  .icon-btn {
    inline-size: var(--icon-control);
    block-size: var(--icon-control);
    display: grid;
    place-items: center;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: background var(--fast) var(--ease), color var(--fast) var(--ease),
      transform var(--fast) var(--ease);
  }

  .icon-btn:hover:not(:disabled) {
    color: var(--text);
    background: var(--soft);
    transform: translateY(-1px);
  }

  .icon-btn svg { inline-size: 0.92rem; block-size: 0.92rem; }

  .primary-btn,
  .download-btn {
    min-inline-size: 0;
    max-inline-size: 100%;
    min-block-size: var(--control-h);
    padding-inline: clamp(0.7rem, 0.55rem + 0.55vi, 1.15rem);
    border-radius: var(--radius-md);
    background: var(--button);
    color: var(--button-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.4rem, 0.3rem + 0.2vi, 0.6rem);
    font-size: var(--fs-xs);
    font-weight: 900;
    letter-spacing: 0.01em;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 0.75rem 1.6rem color-mix(in srgb, var(--button) 10%, transparent);
    transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease),
      opacity var(--fast) var(--ease);
  }

  .primary-btn:hover:not(:disabled),
  .download-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 0.95rem 1.9rem color-mix(in srgb, var(--button) 13%, transparent);
  }

  .primary-btn svg,
  .download-btn svg {
    inline-size: 1.05rem;
    block-size: 1.05rem;
    flex: 0 0 auto;
  }

  .action-label {
    min-inline-size: 0;
    overflow-wrap: break-word;
  }

  .panel-foot {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-2);
    min-inline-size: 0;
    margin-block-start: var(--space-1);
    margin-inline: 0.2rem;
    color: var(--muted-2);
    font-size: var(--fs-2xs);
    font-weight: 700;
  }

  .panel-foot > span { min-inline-size: 0; }

  .panel-foot-token {
    flex: 0 1 auto;
    font-size: inherit;
    letter-spacing: 0.1em;
    text-align: end;
  }

  .status {
    min-inline-size: 0;
    margin-block-start: var(--space-1);
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--muted);
    font-size: var(--fs-2xs);
    line-height: 1.5;
    font-weight: 750;
  }

  .status.info { background: color-mix(in srgb, var(--text) 2.5%, transparent); }
  .status.success {
    color: var(--text);
    background: color-mix(in srgb, var(--text) 3.5%, transparent);
  }

  .status.error {
    color: var(--danger);
    background: rgba(170, 50, 65, 0.06);
    border-color: rgba(170, 50, 65, 0.16);
  }

  .preview {
    container-type: inline-size;
    container-name: preview;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(var(--preview-grid-min), 100%), 1fr));
    gap: clamp(0.9rem, 1.5cqi, 1.35rem);
    min-inline-size: 0;
    margin-block-start: var(--space-2);
    padding-block-start: var(--space-2);
    border-block-start: 1px solid var(--line);
    animation: previewIn 0.34s var(--ease) both;
  }

  .preview-media {
    container-type: inline-size;
    container-name: media;
    position: relative;
    inline-size: 100%;
    min-inline-size: 0;
    block-size: auto;
    aspect-ratio: var(--media-ratio, 16 / 10);
    max-block-size: min(var(--stage-max-block), 46rem);
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--input);
  }

  .thumb,
  .video-preview {
    inline-size: 100%;
    block-size: 100%;
    min-inline-size: 0;
    min-block-size: 0;
    object-fit: contain;
    object-position: center;
    background: var(--input);
  }

  .duration {
    position: absolute;
    inset-inline-end: var(--space-1);
    inset-block-end: var(--space-1);
    padding: 0.25rem 0.4rem;
    border-radius: 0.45rem;
    background: var(--overlay);
    color: #fff;
    font-size: var(--fs-2xs);
    font-weight: 900;
  }

  .preview-body {
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
    min-block-size: 0;
    padding: 0.2rem;
  }

  .preview-topline {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-inline-size: 0;
    color: var(--muted-2);
    font-size: var(--fs-2xs);
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .kind-dot {
    flex: 0 0 auto;
    inline-size: 0.35rem;
    block-size: 0.35rem;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.6;
  }

  .preview-body h2 {
    margin-block: var(--space-1);
    min-inline-size: 0;
    font-size: clamp(1.05rem, 0.85rem + 0.75vi, 1.5rem);
    font-size: clamp(1.05rem, 0.85rem + 0.75cqi, 1.5rem);
    line-height: 1.15;
    letter-spacing: -0.035em;
    text-wrap: pretty;
    overflow-wrap: break-word;
  }

  .meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    min-inline-size: 0;
    color: var(--muted-2);
    font-size: var(--fs-2xs);
    font-weight: 750;
  }

  .meta-row > span { min-inline-size: 0; }

  .meta-separator {
    flex: 0 0 auto;
    inline-size: 0.2rem;
    block-size: 0.2rem;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.5;
  }

  .preview-body .download-btn {
    inline-size: 100%;
    margin-block-start: auto;
  }

  .image-grid {
    inline-size: 100%;
    min-inline-size: 0;
    max-block-size: 100%;
    overflow: auto;
    padding: var(--space-1);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
    gap: var(--space-1);
  }

  .image-choice {
    position: relative;
    display: block;
    inline-size: 100%;
    min-inline-size: 0;
    aspect-ratio: 1;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--input);
    cursor: pointer;
    transition: box-shadow var(--fast) var(--ease), transform var(--fast) var(--ease);
  }

  .image-choice:hover {
    transform: translateY(-1px);
  }

  .image-choice img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
    object-position: center;
    background: var(--input);
    pointer-events: none;
  }

  .image-choice-input {
    position: absolute;
    inset: 0;
    z-index: 3;
    inline-size: 100%;
    block-size: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
  }

  .image-choice:focus-within {
    outline: 2px solid var(--text);
    outline-offset: 2px;
  }

  .image-choice:has(.image-choice-input:checked),
  .image-choice.selected,
  .image-choice[data-selected="true"] {
    box-shadow: 0 0 0 2px var(--text);
  }

  .image-choice-check {
    position: absolute;
    inset-block-start: var(--space-1);
    inset-inline-end: var(--space-1);
    z-index: 2;
    inline-size: clamp(1.2rem, 1rem + 0.3vi, 1.4rem);
    block-size: clamp(1.2rem, 1rem + 0.3vi, 1.4rem);
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--button);
    color: var(--button-text);
    font-size: var(--fs-2xs);
    font-weight: 900;
    pointer-events: none;
    transform: scale(0.82);
    transition: transform var(--fast) var(--ease);
  }

  .image-choice-input:checked ~ .image-choice-check {
    display: flex;
    transform: scale(1);
  }

  .image-choice-number {
    position: absolute;
    inset-inline-start: var(--space-1);
    inset-block-end: var(--space-1);
    max-inline-size: calc(100% - 1rem);
    overflow-wrap: break-word;
    padding: 0.12rem 0.3rem;
    border-radius: 0.4rem;
    background: var(--overlay);
    color: #fff;
    font-size: var(--fs-2xs);
    font-weight: 900;
  }

  .image-actions {
    inline-size: 100%;
    max-inline-size: 100%;
    min-inline-size: 0;
    box-sizing: border-box;
    margin-block-start: var(--space-2);
    padding: var(--space-1);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--text) 2.5%, transparent);
  }

  .image-actions-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-1);
    flex-wrap: wrap;
    min-inline-size: 0;
  }

  .image-selection-count,
  .image-selection-hint {
    min-inline-size: 0;
    overflow-wrap: break-word;
  }

  .image-selection-count {
    color: var(--text);
    font-size: var(--fs-2xs);
    font-weight: 850;
  }

  .select-all-btn {
    flex: 0 0 auto;
    margin-inline-start: auto;
    inline-size: max-content;
    max-inline-size: 100%;
    min-inline-size: max-content;
    min-block-size: var(--touch-target);
    padding-inline: clamp(0.7rem, 0.55rem + 0.2vi, 0.9rem);
    border: 1px solid var(--line-strong);
    border-radius: 0.6rem;
    background: var(--soft);
    color: var(--text);
    font-size: var(--fs-2xs);
    font-weight: 850;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    overflow: visible;
    transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease),
      color var(--fast) var(--ease), transform var(--fast) var(--ease);
  }

  .select-all-btn:hover {
    color: var(--text);
    background: var(--input);
    border-color: var(--line-strong);
    transform: translateY(-1px);
  }

  .select-all-btn:focus-visible {
    outline: 2px solid var(--text);
    outline-offset: 2px;
  }

  .image-selection-hint {
    display: block;
    margin-block-start: 0.3rem;
    color: var(--muted-2);
    font-size: var(--fs-2xs);
    line-height: 1.45;
  }

  .footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-2);
    min-inline-size: 0;
    padding-block: var(--space-3) var(--space-4);
    border-block-start: 1px solid var(--line);
    color: var(--muted-2);
    font-size: var(--fs-2xs);
  }

  .footer-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--brand-inline-gap);
    min-inline-size: 0;
    color: var(--text);
    font-size: var(--fs-xs);
    font-weight: 850;
  }

  .footer-mark {
    inline-size: var(--footer-mark-size);
    block-size: var(--footer-mark-size);
    flex: 0 0 auto;
  }

  .footer-mark img { display: none; }

  .footer-mark-dark { display: block !important; }
  :root[data-theme="light"] .footer-mark-dark { display: none !important; }
  :root[data-theme="light"] .footer-mark-light { display: block !important; }

  .footer-wordmark {
    display: inline-flex;
    align-items: baseline;
    min-inline-size: 0;
    max-inline-size: 100%;
    color: var(--text);
    font-family: Inter, "Helvetica Neue", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
    font-size: clamp(0.72rem, 0.65rem + 0.24vi, 0.86rem);
    font-weight: 820;
    letter-spacing: -0.045em;
    line-height: 0.95;
    white-space: nowrap;
  }

  .footer-wordmark-tks { font-weight: 900; }
  .footer-wordmark-avr { color: var(--muted); font-weight: 740; }

  .footer-wordmark::after {
    content: "";
    inline-size: 0.18em;
    block-size: 0.18em;
    margin-inline-start: 0.10em;
    margin-block-end: 0.05em;
    border-radius: 50%;
    background: var(--muted-2);
    opacity: 0.72;
  }

  .footer-links {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-2);
    min-inline-size: 0;
  }

  .footer-links a:hover { color: var(--text); }

  .policy-shell {
    container: policy / inline-size;
    inline-size: 100%;
    max-inline-size: var(--legal-max);
    padding-block: clamp(1.5rem, 4vi, 3.25rem) var(--space-4);
  }

  body.policy-page {
    min-block-size: 100svh;
    min-block-size: 100dvh;
  }

  body.policy-page .policy-shell {
    min-block-size: 100%;
    display: flex;
    flex-direction: column;
  }

  body.policy-page .policy-shell > .footer {
    margin-block-start: auto;
  }

  .policy-top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3) var(--space-4);
    min-inline-size: 0;
    margin-block-end: var(--space-3);
  }

  .policy-top-copy {
    flex: 1 1 auto;
    min-inline-size: 0;
  }

  .policy-top .policy-back {
    display: inline-block;
    margin-block-end: var(--space-2);
    font-size: var(--fs-xs);
    color: var(--muted);
  }

  .legal-brand {
    margin-block-end: var(--space-3);
  }

  .legal-brand .brand-lockup {
    gap: var(--brand-lockup-gap);
  }

  .policy-lang {
    flex: 0 0 auto;
    min-inline-size: 0;
  }

  .policy-intro {
    max-inline-size: 72ch;
    margin-block: 0 var(--space-3);
    color: var(--muted);
    font-size: var(--fs-sm);
    line-height: 1.7;
    overflow-wrap: break-word;
  }

  .policy-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    max-inline-size: 100%;
    margin-block-end: var(--space-3);
    padding-block: 0.35rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }

  .policy-nav a {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 0.5rem 0.7rem;
    border-radius: 0.55rem;
    color: var(--muted);
    font-size: var(--fs-xs);
  }

  .policy-nav a:hover,
  .policy-nav a:focus-visible {
    color: var(--text);
    background: var(--soft);
  }

  .policy-card {
    max-inline-size: 100%;
    margin-block: var(--space-2);
    padding: var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--input) 72%, transparent);
    scroll-margin-block-start: 4.5rem;
    overflow-wrap: break-word;
  }

  .policy-card h2 {
    margin-block-end: var(--space-2);
    color: var(--text);
    font-size: clamp(1.08rem, 0.96rem + 0.45vi, 1.35rem);
    line-height: 1.2;
  }

  .policy-card p {
    color: var(--muted);
    font-size: var(--fs-sm);
    line-height: 1.75;
    overflow-wrap: break-word;
  }

  .policy-note {
    margin-block: var(--space-3) var(--space-4);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--input);
    color: var(--muted);
    font-size: var(--fs-xs);
    line-height: 1.7;
    overflow-wrap: break-word;
  }

  .policy-note strong { color: var(--text); }

  .policy-page .footer {
    margin-block-start: var(--space-4);
  }

  .legal-shell {
    container: legal / inline-size;
    inline-size: 100%;
    max-inline-size: var(--legal-max);
    padding-block: clamp(1.15rem, 3vi, 2.5rem) var(--space-4);
  }

  .legal-content {
    inline-size: min(100%, var(--hero-max));
    max-inline-size: 100%;
    margin-inline: auto;
    min-inline-size: 0;
  }

  body.legal-page .site-main {
    min-block-size: 0;
  }

  .legal-top { margin-block-end: var(--space-2); }

  .legal-top .policy-back {
    display: inline-block;
    margin-block-end: var(--space-2);
    font-size: var(--fs-xs);
    color: var(--muted);
  }

  .policy-title {
    font-size: clamp(1.5rem, 1.1rem + 1.25vi, 2.15rem);
    font-size: clamp(1.5rem, 1.1rem + 1.25cqi, 2.15rem);
    line-height: 1.05;
    letter-spacing: -0.045em;
  }

  .policy-updated {
    margin-block-start: 0.35rem;
    color: var(--muted-2);
    font-size: var(--fs-xs);
  }

  .legal-notice {
    max-inline-size: 100%;
    margin-block: var(--space-2) var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--input);
    color: var(--muted);
    font-size: var(--fs-xs);
    line-height: 1.7;
    overflow-wrap: break-word;
  }

  .legal-nav {
    position: static;
    z-index: auto;
    display: flex;
    gap: 0.25rem;
    max-inline-size: 100%;
    margin-block-end: var(--space-2);
    padding-block: 0.35rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    background: transparent;
    scrollbar-width: thin;
    backdrop-filter: none;
  }

  .legal-nav a {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 0.5rem 0.7rem;
    border-radius: 0.55rem;
    color: var(--muted);
    font-size: var(--fs-xs);
  }

  .legal-nav a:hover,
  .legal-nav a:focus-visible {
    color: var(--text);
    background: var(--soft);
  }

  .legal-card {
    max-inline-size: 100%;
    margin-block: var(--space-2);
    padding: var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--input) 72%, transparent);
    scroll-margin-block-start: 4.5rem;
    overflow-wrap: break-word;
  }

  .legal-card h2 {
    margin-block-end: var(--space-2);
    color: var(--text);
    font-size: clamp(1.1rem, 0.95rem + 0.45vi, 1.35rem);
  }

  .legal-card h3 {
    margin-block: var(--space-4) var(--space-1);
    color: var(--text);
    font-size: var(--fs-sm);
  }

  .legal-card p {
    margin-block-end: var(--space-2);
    color: var(--muted);
    font-size: var(--fs-sm);
    line-height: 1.8;
    overflow-wrap: break-word;
  }

  .legal-small { font-size: var(--fs-xs) !important; }

  .legal-consent {
    container-type: inline-size;
    container-name: consent;
    position: fixed;
    z-index: 20;
    inset-inline: max(var(--page-gutter), env(safe-area-inset-left)) max(var(--page-gutter), env(safe-area-inset-right));
    inset-block-end: max(0.65rem, env(safe-area-inset-bottom));
    display: none;
    max-block-size: min(calc(100svh - 1.25rem - env(safe-area-inset-bottom)), 20rem);
    overflow: auto;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-lg);
    background: var(--input);
    box-shadow: 0 0.85rem 3rem rgba(0, 0, 0, 0.16);
  }

  .legal-consent.show { display: flex; }

  .legal-consent-copy {
    min-inline-size: 0;
    color: var(--muted);
    font-size: var(--fs-xs);
    line-height: 1.6;
    overflow-wrap: break-word;
  }

  .legal-consent-actions {
    display: flex;
    flex: 0 0 auto;
    gap: var(--space-1);
    min-inline-size: min-content;
  }

  .legal-consent-btn {
    min-block-size: 2.35rem;
    padding-inline: 0.7rem;
    border: 1px solid var(--line);
    border-radius: 0.6rem;
    background: transparent;
    color: var(--text);
    font-size: var(--fs-2xs);
    font-weight: 800;
    cursor: pointer;
  }

  .legal-consent-btn.primary {
    border-color: var(--text);
    background: var(--text);
    color: var(--bg);
  }

  .policy-top h1,
  .policy-title,
  .legal-card h2,
  .legal-card h3,
  .legal-card p {
    max-inline-size: 100%;
  }
}

@layer components {

  /* Reusable layout primitives for future features. Prefer these over one-off
     width/margin hacks so new sections inherit the same responsive contract. */
  .flow > * + * {
    margin-block-start: var(--flow-space, var(--space-2));
  }

  .cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cluster-gap, var(--space-2));
    min-inline-size: 0;
  }

  .stack {
    display: flex;
    flex-direction: column;
    gap: var(--stack-gap, var(--space-2));
    min-inline-size: 0;
  }

  .auto-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-min, 12rem), 100%), 1fr));
    gap: var(--grid-gap, var(--space-3));
    min-inline-size: 0;
  }

  .content-frame {
    inline-size: min(100%, var(--frame-max, 60rem));
    margin-inline: auto;
    min-inline-size: 0;
  }

  .media-frame {
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: var(--media-ratio, auto);
    overflow: hidden;
    min-inline-size: 0;
  }

}

@layer containers {
  /* Intrinsic reflow rules. No device classes, no mobile/desktop copies.
     A component changes shape only when the space it receives can no longer satisfy
     its own minimums. */
  .download-panel {
  }

  .panel-heading,
  .panel-foot,
  .image-actions-row,
  .footer {
    flex-wrap: wrap;
  }

  .panel-foot > * {
    flex: 1 1 auto;
  }

  .panel-foot-token {
    text-align: end;
  }

  .legal-consent {
    flex-wrap: wrap;
  }
}

@container downloader (max-width: 38rem) {
  .input-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .input-row > .primary-btn {
    min-block-size: var(--control-h);
    inline-size: 100%;
  }
}

@container main (max-width: 24rem) {
  .download-panel {
    padding: 0.7rem;
    border-radius: 0.9rem;
  }
}

@container downloader (max-width: 13rem) {
  .input-shell {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    padding-inline-start: 0.45rem;
    padding-block: 0.25rem;
  }

  .input-shell .input-leading {
    flex: 0 0 1rem;
  }

  .input-shell input {
    flex: 1 1 5rem;
    min-inline-size: 0;
  }

  .input-shell .icon-btn {
    flex: 0 0 var(--icon-control);
  }
}

@container downloader (max-width: 24rem) {
  .panel-heading {
    margin-inline: 0.1rem;
  }

  .input-shell {
    grid-template-columns: 0.95rem minmax(0, 1fr) var(--icon-control) var(--icon-control);
    padding-inline-start: 0.45rem;
  }

  .panel-foot {
    align-items: flex-start;
  }

  .panel-foot > * {
    flex-basis: 100%;
  }

  .panel-foot-token {
    text-align: start;
  }
}

@container policy (max-width: 30rem) {
  .policy-top {
    gap: var(--space-2);
  }

  .policy-lang {
    align-self: flex-start;
  }

  .policy-lang .language-trigger {
    grid-template-columns: 1.3rem minmax(0, 1fr) 0.65rem;
    min-inline-size: 4.6rem;
    max-inline-size: 4.6rem;
    padding-inline: 0.42rem;
  }

  .policy-lang .language-trigger-copy { justify-content: center; }
  .policy-lang .language-trigger-name { display: none; }

  .policy-lang .language-menu {
    inline-size: min(15rem, calc(100vw - 0.75rem));
  }
}

@container header (max-width: 22rem) {
  .brand {
    flex: 0 1 auto;
    max-inline-size: 100%;
  }

  .brand-lockup {
    gap: clamp(0.3rem, 1.6cqi, 0.45rem);
  }

  .brand-mark {
    inline-size: clamp(1.4rem, 7cqi, 1.75rem);
    block-size: clamp(1.4rem, 7cqi, 1.75rem);
  }

  .brand-wordmark {
    display: inline-flex;
    font-size: clamp(0.88rem, 5.8cqi, 1.15rem);
    letter-spacing: -0.05em;
  }
}

@container header (max-width: 30rem) {
  .language-trigger {
    grid-template-columns: 1.3rem minmax(0, 1fr) 0.65rem;
    min-inline-size: 4.6rem;
    max-inline-size: 4.6rem;
    padding-inline: 0.42rem;
  }

  .language-trigger-copy { justify-content: center; }
  .language-trigger-name { display: none; }

  .language-menu {
    inline-size: min(15rem, calc(100vw - 0.75rem));
  }
}

@layer utilities {
  .hidden { display: none !important; }
  [hidden] { display: none !important; }

  .sr-only {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  button:disabled {
    cursor: not-allowed;
    opacity: 0.58;
  }

  [data-tooltip] { position: relative; }

  [data-tooltip]::after {
    position: absolute;
    z-index: 80;
    inset-inline-start: 50%;
    inset-block-start: calc(100% + 0.45rem);
    transform: translateX(-50%) translateY(-0.15rem);
    inline-size: max-content;
    max-inline-size: min(16rem, calc(100vi - 1rem));
    padding: 0.35rem 0.5rem;
    border-radius: 0.45rem;
    background: var(--surface-solid);
    border: 1px solid var(--line-strong);
    box-shadow: var(--shadow);
    color: var(--text);
    font-size: 0.62rem;
    opacity: 0;
    pointer-events: none;
    content: attr(data-tooltip);
    transition: opacity var(--fast) var(--ease), transform var(--fast) var(--ease);
  }

  [data-tooltip]:hover::after,
  [data-tooltip]:focus-visible::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }

  .spinner {
    inline-size: 0.95rem;
    block-size: 0.95rem;
    border: 2px solid color-mix(in srgb, var(--button-text) 24%, transparent);
    border-top-color: var(--button-text);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
  }
}

@media (prefers-reduced-motion: reduce) {
  .image-choice,
  .image-choice-check,
  .select-all-btn {
    transition: none;
  }
}

@layer accessibility {
  :where(button, a, input, select):focus-visible {
    outline: 2px solid color-mix(in srgb, var(--text) 46%, transparent);
    outline-offset: 2px;
  }

  :where(button, .language-option, .icon-btn, .primary-btn, .download-btn, .select-all-btn, .legal-consent-btn) {
    touch-action: manipulation;
  }

  :where(h1, h2, h3, p, a, button, label, span) {
    overflow-wrap: break-word;
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }

  @media print {
    body { background: #fff; color: #000; }
    body::before, .ambient, .header-tools, .legal-consent { display: none !important; }
    .shell { inline-size: 100%; max-inline-size: none; padding-inline: 0; }
    .legal-card, .legal-notice { break-inside: avoid; }
  }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes previewIn {
  from { opacity: 0; transform: translateY(7px) scale(0.995); }
  to { opacity: 1; transform: none; }
}


@layer surface-contract {
  /*
   * SURFACE CONTRACT v2
   * --------------------
   * 1. Components own their minimum viable size.
   * 2. Containers decide when columns no longer fit using auto-fit/minmax or flex-wrap.
   * 3. Content keeps intrinsic aspect ratios; decorative FX may be clipped by their stage.
   * 4. No component is allowed to depend on a device class.
   * 5. Future dynamic DOM inherits the same contract automatically.
   */
  :where(.surface, [data-surface], .site-header, .site-main, .hero, .download-panel,
         .preview, .preview-media, .media-frame, .legal-shell, .legal-card, .legal-consent) {
    min-inline-size: 0;
    max-inline-size: 100%;
    box-sizing: border-box;
  }

  :where(.surface, [data-surface], .site-header, .site-main, .hero, .download-panel,
         .preview, .preview-media, .media-frame, .surface-media, [data-surface-media],
         .surface-stage, [data-surface-stage], .visual-stage) {
    container-type: inline-size;
  }

  :where(.surface > *, [data-surface] > *, .site-main > *, .hero > *,
         .download-panel > *, .preview > *, .legal-shell > *, .legal-card > *) {
    min-inline-size: 0;
    max-inline-size: 100%;
  }

  :where(img, video, canvas, svg, iframe, object, embed, picture) {
    max-inline-size: 100%;
  }

  :where(img, canvas) {
    block-size: auto;
  }

  :where(video, iframe) {
    max-block-size: 100%;
  }

  /* User-owned content media: intrinsic dimensions drive the box. */
  :where(.surface-media, [data-surface-media], .media-frame, .preview-media) {
    inline-size: 100%;
    max-inline-size: 100%;
    block-size: auto;
    aspect-ratio: var(--media-ratio, auto);
    overflow: hidden;
    position: relative;
  }

  :where(.surface-media > img, .surface-media > video, [data-surface-media] > img,
         [data-surface-media] > video, .media-frame > img, .media-frame > video,
         .preview-media > img, .preview-media > video) {
    inline-size: 100%;
    max-inline-size: 100%;
    block-size: 100%;
    max-block-size: 100%;
    object-fit: contain;
    object-position: center;
  }

  /* Text and links are allowed to wrap; nothing gets hidden just to fit. */
  :where(.surface-copy, [data-surface-copy], .adaptive-text) {
    inline-size: 100%;
    max-inline-size: 100%;
    min-inline-size: 0;
    overflow-wrap: anywhere;
    text-wrap: pretty;
  }

  :where(.surface a, [data-surface] a) {
    max-inline-size: 100%;
    min-inline-size: 0;
    overflow-wrap: anywhere;
    text-wrap: pretty;
  }

  :where(.surface button, [data-surface] button, .surface input, [data-surface] input,
         .surface textarea, [data-surface] textarea, .surface select, [data-surface] select) {
    min-inline-size: 0;
    max-inline-size: 100%;
  }

  :where(.surface button, [data-surface] button) {
    white-space: normal;
    overflow-wrap: anywhere;
    text-wrap: balance;
  }

  :where(.surface input, [data-surface] input, .surface textarea, [data-surface] textarea) {
    overflow-wrap: anywhere;
  }

  :where(.surface textarea, [data-surface] textarea) {
    resize: vertical;
    max-block-size: min(60svh, 32rem);
  }

  :where(.surface-row, [data-surface-row], .adaptive-row) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--surface-gap, var(--space-2));
    min-inline-size: 0;
  }

  :where(.surface-row > *, [data-surface-row] > *, .adaptive-row > *) {
    min-inline-size: 0;
    max-inline-size: 100%;
    flex: 1 1 12rem;
  }

  :where(.surface-grid, [data-surface-grid], .adaptive-grid, .auto-grid) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(var(--surface-grid-min, 14rem), 100%), 1fr));
    gap: var(--surface-gap, var(--space-3));
    min-inline-size: 0;
  }

  :where(.surface-link, [data-surface-link], .download-link, .file-link) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: fit-content;
    max-inline-size: 100%;
    min-inline-size: 0;
    overflow-wrap: anywhere;
    white-space: normal;
    text-align: center;
  }

  :where(.surface pre, [data-surface] pre, .surface code, [data-surface] code) {
    max-inline-size: 100%;
    min-inline-size: 0;
    overflow: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }

  :where(.surface table, [data-surface] table) {
    display: block;
    max-inline-size: 100%;
    overflow-x: auto;
    border-spacing: 0;
  }

  /* Future animation/canvas contract.
     The stage has a stable composition ratio, while the artwork inside it is measured in
     percentages/cqi. This makes the same animation composition usable from a tiny phone
     through an ultrawide display without resizing it per device. */
  :where(.surface-stage, [data-surface-stage], .visual-stage, .surface-animation, [data-surface-animation],
         .adaptive-animation) {
    inline-size: min(100%, var(--stage-max-inline));
    max-inline-size: 100%;
    block-size: auto;
    aspect-ratio: var(--stage-ratio, 16 / 9);
    max-block-size: var(--stage-max-block);
    margin-inline: auto;
    position: relative;
    overflow: clip;
    container-type: size;
    isolation: isolate;
  }

  :where(.surface-stage > *, [data-surface-stage] > *, .visual-stage > *,
         .surface-animation > *, [data-surface-animation] > *, .adaptive-animation > *) {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    max-inline-size: 100%;
    max-block-size: 100%;
  }

  :where(.surface-stage img, .surface-stage video, .surface-stage canvas,
         [data-surface-stage] img, [data-surface-stage] video, [data-surface-stage] canvas,
         .visual-stage img, .visual-stage video, .visual-stage canvas) {
    object-fit: contain;
    object-position: center;
  }

  /* Stable coordinate helpers for future animation artwork. */
  :where(.stage-art) {
    inline-size: 100%;
    block-size: 100%;
    display: grid;
    place-items: center;
    padding: clamp(0.5rem, 2vi, 2rem);
    padding: clamp(0.5rem, 2cqi, 2rem);
  }

  :where(.stage-copy) {
    max-inline-size: min(92%, 48rem);
    font-size: clamp(0.9rem, 1.8vi, 1.5rem);
    font-size: clamp(0.9rem, 1.8cqi, 1.5rem);
    text-wrap: balance;
  }

  /* Prevent long translated/generated tokens from forcing a surface wider. */
  :where(.surface h1, [data-surface] h1, .surface h2, [data-surface] h2, .surface h3, [data-surface] h3,
         .surface p, [data-surface] p, .surface li, [data-surface] li, .surface label, [data-surface] label,
         .surface span, [data-surface] span) {
    max-inline-size: 100%;
    overflow-wrap: anywhere;
  }
}

@container main (max-width: 50rem) {
  .hero {
    padding-block: clamp(2rem, 5svh, 3.5rem) clamp(1.5rem, 3.5svh, 2.5rem);
  }

  .hero h1 {
    font-size: clamp(2.25rem, 7cqi, 3.65rem);
    letter-spacing: -0.052em;
  }

  .hero-lead {
    max-inline-size: 36rem;
  }
}

@container main (max-width: 34rem) {
  .hero {
    padding-inline: 0.75rem;
    padding-block: 1.5rem 1.5rem;
  }

  .hero-kicker {
    max-inline-size: 24rem;
    letter-spacing: 0.105em;
  }

  .hero h1 {
    font-size: clamp(2rem, 9.5cqi, 2.9rem);
    line-height: 1.02;
  }

  .hero-lead {
    margin-block-start: 0.7rem;
    font-size: 0.95rem;
    line-height: 1.55;
  }

  .download-panel {
    margin-block-start: 1.25rem;
  }
}

@container main (max-width: 24rem) {
  .hero {
    padding-inline: 0.25rem;
  }

  .hero h1 {
    font-size: clamp(1.8rem, 10.5cqi, 2.45rem);
  }

  .hero-lead {
    font-size: 0.9rem;
  }
}

@container hero (max-width: 20rem) {
  .hero h1 {
    font-size: 1.72rem;
  }

  .hero-kicker {
    font-size: 0.58rem;
  }
}

@container header (max-width: 30rem) {
  .theme-toggle,
  .language-trigger {
    min-block-size: var(--touch-target);
  }

  .language-option {
    min-block-size: 2.75rem;
  }

  .header-tools {
    gap: 0.35rem;
  }
}

@container header (max-width: 24rem) {
  .theme-toggle {
    inline-size: var(--touch-target);
  }

  .language-trigger {
    min-inline-size: 0;
  }

  .language-trigger-name {
    display: none;
  }

  .header-tools {
    gap: 0.25rem;
  }
}

@container downloader (max-width: 56rem) {
  .preview {
    grid-template-columns: minmax(0, 1fr);
  }

  .preview-media {
    max-block-size: min(68svh, 36rem);
  }

  .preview-body {
    gap: 0.2rem;
  }

  .preview-body .download-btn {
    margin-block-start: var(--space-3);
  }
}

@container downloader (max-width: 28rem) {
  .preview {
    gap: 0.75rem;
  }

  .preview-media {
    aspect-ratio: var(--media-ratio, 4 / 3);
    max-block-size: min(60svh, 28rem);
  }

  .image-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(7rem, 100%), 1fr));
  }

  .image-actions-row {
    align-items: stretch;
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
  }

  .image-selection-count {
    min-inline-size: 0;
  }

  .select-all-btn {
    min-block-size: var(--touch-target);
    margin-inline-start: 0;
  }
}

@container consent (max-width: 40rem) {
  .legal-consent-copy,
  .legal-consent-actions {
    flex: 1 1 100%;
    min-inline-size: 0;
  }

  .legal-consent-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .legal-consent-btn {
    min-block-size: var(--touch-target);
  }
}

@container consent (max-width: 22rem) {
  .legal-consent-actions {
    grid-template-columns: minmax(0, 1fr);
  }
}

@container policy (max-width: 48rem) {
  .policy-card {
    padding: var(--space-4);
    border-radius: var(--radius-md);
  }

  .policy-note {
    padding: var(--space-3);
  }
}

@container policy (max-width: 28rem) {
  .policy-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }

  .policy-top-copy {
    min-inline-size: 0;
  }

  .policy-title {
    font-size: clamp(1.45rem, 7.5cqi, 2rem);
  }

  .policy-card {
    padding: 1rem;
  }
}

@container legal (max-width: 48rem) {
  .legal-card {
    padding: var(--space-4);
    border-radius: var(--radius-md);
  }

  .legal-notice {
    padding: var(--space-3);
  }
}

@container legal (max-width: 28rem) {
  .legal-top {
    display: block;
  }

  .policy-title {
    font-size: clamp(1.45rem, 7.5cqi, 2rem);
  }

  .legal-card {
    padding: 1rem;
  }
}