/* built by tools/build.php: shared/theme/tokens.css + sites/www/front.src.css */
/* GlirOS design tokens (phase D1).
   One source of truth for colour, glass, type, spacing and motion, shared by
   the desktop app, LAN browsers and (later) the gliros.com web app. Dark is
   the default; light follows the system, or data-theme on <html> forces one.
   The values come from the gliros-web layout pass. See docs/DESIGN.md. */

:root {
  /* colour */
  --bg: #0e1719;               /* page base; also the window frame colour */
  --surface: rgba(18, 28, 30, 0.86);       /* cards, menus, assistant messages */
  --surface-solid: #142023;
  --glass: rgba(16, 26, 28, 0.55);         /* frosted panels (sidebar, output) */
  --glass-strong: rgba(14, 23, 25, 0.76);  /* composer, overlays on narrow screens */
  --glass-border: rgba(210, 235, 225, 0.10);
  --inset: rgba(8, 15, 17, 0.55);          /* inputs, code blocks */
  --border: rgba(190, 225, 210, 0.12);
  --text: #e3ece7;
  --text-dim: #9db2a9;
  --text-faint: #7a8f86;
  /* 0.1.81zzz31: the design chat's chart colours (claude/gliros-portal-b25-reply.md §2.4), shared with office */
  --chart-1: #3987e5; --chart-2: #d95926; --chart-3: #199e70; --chart-4: #c98500; --chart-5: #d55181; --chart-6: #6b7a73;
  --accent: #8cc4a3;
  --accent-hover: #a1d3b5;
  --accent-soft: rgba(140, 196, 163, 0.16);
  --on-accent: #0c1a14;
  --on-danger: #2a0e0e;        /* 0.1.49: text on a danger fill, 6.7:1 (white was 2.7:1) */
  --user-bg: rgba(94, 150, 120, 0.30);
  --user-border: rgba(140, 196, 163, 0.35);
  --good: #6fd3a0;
  --warn: #e2b35e;
  --danger: #ef7b7b;
  --danger-soft: rgba(239, 123, 123, 0.14);
  --tint: linear-gradient(180deg, rgba(5, 10, 12, 0.40) 0%, rgba(5, 10, 12, 0.62) 100%);
  --tint-top: rgba(5, 10, 12, 0.40);       /* what the window frame colour is mixed with */
  --shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
  --shadow-soft: 0 4px 18px rgba(0, 0, 0, 0.14);
  --focus: 0 0 0 2px rgba(140, 196, 163, 0.55);
  /* code: see-through dark panels and colours that sit with the green accent */
  --code-bg: rgba(4, 10, 12, 0.42);
  --hl-keyword: #7fcfa4;
  --hl-string: #e2c28a;
  --hl-number: #e6a57a;
  --hl-comment: #6f857c;
  --hl-title: #9fd0e6;
  --hl-attr: #b7c6f0;
  --hl-builtin: #c7b4ef;
  --hl-meta: #d7a8c8;
  --hl-deleted: rgba(239, 123, 123, 0.16);
  --hl-added: rgba(111, 211, 160, 0.14);

  /* glass */
  --blur: 18px;
  --bg-blur: 22px;

  /* type */
  --font: "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
  --mono: "Cascadia Code", "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
  --text-2xs: 0.68rem;          /* DESIGN-1 B: badges, tags and the timeline's dense labels */
  --text-xs: 0.72rem;
  --text-sm: 0.82rem;
  --text-md: 0.94rem;
  --text-lg: 1.15rem;
  --text-xl: 1.6rem;
  --line: 1.6;

  /* space and shape */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  /* layout */
  --sidebar-w: 272px;
  --rail-w: 64px;
  --output-w: 460px;
  --chat-max-w: 820px;
  --topbar-h: 56px;

  /* motion */
  --fast: 0.15s ease;
  --medium: 0.22s ease;
  --bg-fade: 2.8s ease;
  --pulse: 1.2s;         /* 0.1.81zzz37: the sidebar's "writing" mark */

  color-scheme: dark;
}

/* Light: same names, light values. Kept in two blocks (system setting, or
   forced with data-theme="light") because CSS can't share one block. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #eef3ef;
    --surface: rgba(255, 255, 255, 0.88);
    --surface-solid: #ffffff;
    --glass: rgba(248, 251, 249, 0.58);
    --glass-strong: rgba(250, 252, 251, 0.80);
    --glass-border: rgba(255, 255, 255, 0.65);
    --inset: rgba(240, 245, 242, 0.75);
    --border: rgba(40, 70, 58, 0.14);
    --text: #1c2a25;
    --text-dim: #56675f;
    --text-faint: #627069;
    /* the chart colours, light */
    --chart-1: #2a78d6; --chart-2: #eb6834; --chart-3: #1baf7a; --chart-4: #eda100; --chart-5: #e87ba4; --chart-6: #9aa5a0;
    --accent: #3f6f56;
    --accent-hover: #335d48;
    --accent-soft: rgba(63, 111, 86, 0.13);
    --on-accent: #ffffff;
    --on-danger: #ffffff;
    --user-bg: rgba(63, 111, 86, 0.16);
    --user-border: rgba(63, 111, 86, 0.28);
    --good: #287a52;      /* 0.1.49: small text 4.7:1 on bg (was 3.8) */
    --warn: #8a5f12;      /* 0.1.49: 5.0:1 (was 3.3) */
    --danger: #b23c3c;    /* 0.1.49: 5.2:1 (was 4.4) */
    --danger-soft: rgba(178, 60, 60, 0.10);
    --tint: linear-gradient(180deg, rgba(240, 245, 242, 0.50) 0%, rgba(232, 239, 235, 0.68) 100%);
    --tint-top: rgba(240, 245, 242, 0.50);
    --shadow: 0 10px 34px rgba(30, 50, 40, 0.14);
    --shadow-soft: 0 4px 16px rgba(30, 50, 40, 0.08);
    --focus: 0 0 0 2px rgba(63, 111, 86, 0.45);
    --code-bg: rgba(255, 255, 255, 0.55);
    --hl-keyword: #2f7a54;
    --hl-string: #9a6212;
    --hl-number: #b0521f;
    --hl-comment: #627069;  /* 0.1.49: 5.0:1 on code-bg (was 3.3) */
    --hl-title: #1f6f8b;
    --hl-attr: #4a5bb0;
    --hl-builtin: #7a4fb3;
    --hl-meta: #a0457a;
    --hl-deleted: rgba(192, 72, 72, 0.12);
    --hl-added: rgba(47, 138, 94, 0.12);
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --bg: #eef3ef;
  --surface: rgba(255, 255, 255, 0.88);
  --surface-solid: #ffffff;
  --glass: rgba(248, 251, 249, 0.58);
  --glass-strong: rgba(250, 252, 251, 0.80);
  --glass-border: rgba(255, 255, 255, 0.65);
  --inset: rgba(240, 245, 242, 0.75);
  --border: rgba(40, 70, 58, 0.14);
  --text: #1c2a25;
  --text-dim: #56675f;
  --text-faint: #627069;
  /* the chart colours, light */
  --chart-1: #2a78d6; --chart-2: #eb6834; --chart-3: #1baf7a; --chart-4: #eda100; --chart-5: #e87ba4; --chart-6: #9aa5a0;
  --accent: #3f6f56;
  --accent-hover: #335d48;
  --accent-soft: rgba(63, 111, 86, 0.13);
  --on-accent: #ffffff;
  --on-danger: #ffffff;
  --user-bg: rgba(63, 111, 86, 0.16);
  --user-border: rgba(63, 111, 86, 0.28);
  --good: #287a52;      /* 0.1.49: small text 4.7:1 on bg (was 3.8) */
  --warn: #8a5f12;      /* 0.1.49: 5.0:1 (was 3.3) */
  --danger: #b23c3c;    /* 0.1.49: 5.2:1 (was 4.4) */
  --danger-soft: rgba(178, 60, 60, 0.10);
  --tint: linear-gradient(180deg, rgba(240, 245, 242, 0.50) 0%, rgba(232, 239, 235, 0.68) 100%);
  --tint-top: rgba(240, 245, 242, 0.50);
  --shadow: 0 10px 34px rgba(30, 50, 40, 0.14);
  --shadow-soft: 0 4px 16px rgba(30, 50, 40, 0.08);
  --focus: 0 0 0 2px rgba(63, 111, 86, 0.45);
  --code-bg: rgba(255, 255, 255, 0.55);
  --hl-keyword: #2f7a54;
  --hl-string: #9a6212;
  --hl-number: #b0521f;
  --hl-comment: #627069;  /* 0.1.49: 5.0:1 on code-bg (was 3.3) */
  --hl-title: #1f6f8b;
  --hl-attr: #4a5bb0;
  --hl-builtin: #7a4fb3;
  --hl-meta: #a0457a;
  --hl-deleted: rgba(192, 72, 72, 0.12);
  --hl-added: rgba(47, 138, 94, 0.12);
  color-scheme: light;
}
/* www.gliros.com front page + legal pages. tools/build.php puts shared/theme/tokens.css in front of this file
   (same colours, type and spacing as the portal and the app) and writes the result to public/front/front.css. */

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); color: var(--text); font: 400 var(--text-md)/var(--line) var(--font); -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }
a:focus-visible, .btn:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--radius-sm); }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.2; margin: 0 0 var(--space-3); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
p { margin: 0 0 var(--space-3); }
.dim { color: var(--text-dim); }
img { max-width: 100%; height: auto; }
.skip { position: absolute; left: -9999px; top: 8px; background: var(--surface-solid); padding: 8px 12px; z-index: 10; }
.skip:focus { left: 8px; }
mark.todo { background: color-mix(in srgb, var(--warn) 25%, transparent); color: var(--warn); padding: 0 4px; border-radius: 4px; }

/* top bar */
.top { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-5); position: sticky; top: 0; z-index: 5;
  background: var(--glass-strong); backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur)); border-bottom: 1px solid var(--glass-border); }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); font-size: 1.1rem; }
.brand:hover { text-decoration: none; color: var(--text); }
.top nav { display: flex; gap: var(--space-4); margin-left: auto; }
.top nav a { color: var(--text-dim); }
.top nav a:hover { color: var(--text); }

.btn { display: inline-block; font: inherit; font-weight: 600; color: var(--text); background: var(--accent-soft); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 9px 16px; text-decoration: none; transition: background var(--fast); }
.btn:hover { background: color-mix(in srgb, var(--accent) 28%, transparent); color: var(--text); text-decoration: none; }
.btn.primary { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.btn.primary:hover { background: var(--accent-hover); color: var(--on-accent); }
.btn.secondary { background: transparent; border-color: var(--border); font-weight: 500; }   /* outlined, as the portal sites' quiet .btn (round 233) */
.btn.secondary:hover { background: var(--accent-soft); }
.btn.small { padding: 5px 12px; font-size: var(--text-sm); }
.btn.big { padding: 13px 22px; font-size: 1rem; border-radius: var(--radius); }

main { flex: 1; width: 100%; }
.front main > section, .legalpage main > * { max-width: 1120px; margin-left: auto; margin-right: auto; padding-left: var(--space-5); padding-right: var(--space-5); }

/* hero */
.hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--space-6); align-items: center; padding-top: 72px; padding-bottom: 56px; position: relative; }
/* the landscape (16:9, so 56.25vw tall) fades into the page at its foot, so what follows the hero (the films band, round
   184) never sits on the lake (the look check measured "GlirOS på 25 sekunder" on it in light at wide screens) */
.front main { background: linear-gradient(to bottom, transparent calc(56.25vw - 240px), var(--bg) 56.25vw) center top / 100% 56.25vw no-repeat, url("bg-dark.svg") center top / 100% auto no-repeat var(--bg); }
.front main::before { content: ""; display: block; }
.kicker { color: var(--accent); font-weight: 600; letter-spacing: 0.04em; font-size: var(--text-sm); text-transform: uppercase; }
.hero h1 { font-size: clamp(2rem, 4.2vw, 3.1rem); letter-spacing: -0.01em; }
.lead { font-size: 1.08rem; color: var(--text-dim); max-width: 38em; }
.cta { display: flex; gap: var(--space-3); flex-wrap: wrap; margin: var(--space-5) 0 var(--space-3); }
.note { color: var(--text-dim); font-size: var(--text-sm); }
.hero-in { background: var(--glass-strong); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid var(--glass-border); border-radius: var(--radius-xl); padding: var(--space-6); }

/* screenshots and their placeholder */
.shot { display: block; width: 100%; border-radius: var(--radius-lg); border: 1px solid var(--glass-border); box-shadow: var(--shadow); background: var(--surface-solid); }
.shot.ph { aspect-ratio: 16 / 10; position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--surface-solid) 0%, var(--inset) 100%); }
.shot.ph::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 28px; background: var(--glass-strong); border-bottom: 1px solid var(--border); }
.shot.ph i { position: absolute; left: 8%; height: 12px; border-radius: 6px; background: var(--accent-soft); }
.shot.ph i:nth-child(1) { top: 26%; width: 55%; }
.shot.ph i:nth-child(2) { top: 40%; width: 70%; background: var(--user-bg); left: 22%; }
.shot.ph i:nth-child(3) { top: 54%; width: 45%; }
.ph-media i:nth-child(2), .ph-3d i:nth-child(2) { height: 38%; width: 60%; top: 32%; border-radius: var(--radius); }
.ph-desktop, .ph-remote { background: linear-gradient(135deg, color-mix(in srgb, var(--hl-title) 10%, transparent), var(--inset)); }

/* feature rows */
.feature { display: grid; grid-template-columns: 1fr 1.15fr; gap: var(--space-6); align-items: center; padding-top: 48px; padding-bottom: 48px; }
.feature.flip .txt { order: 2; }
.feature p { color: var(--text-dim); font-size: 1.02rem; }
.badge { display: inline-block; vertical-align: middle; font-size: var(--text-xs); font-weight: 600; padding: 2px 10px; border-radius: var(--radius-pill);
  color: var(--hl-title); background: color-mix(in srgb, var(--hl-title) 10%, transparent); border: 1px solid color-mix(in srgb, var(--hl-title) 25%, transparent); }

.card { background: var(--surface); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-soft); }
.card.link { display: block; color: var(--text); transition: border-color var(--fast); }
.card.link:hover { text-decoration: none; border-color: var(--user-border); }
.card.link p { color: var(--text-dim); margin: 0; }
.two, .three { display: grid; gap: var(--space-4); }
.two { grid-template-columns: 1fr 1fr; }
.three { grid-template-columns: repeat(3, 1fr); }
.four { display: grid; gap: var(--space-4); grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .four { grid-template-columns: 1fr 1fr; } }
.versions, .more { padding-top: 48px; padding-bottom: 24px; }
/* a text-only page (the security page): the hero alone, then the cards in one grid */
.hero.solo { grid-template-columns: 1fr; padding-bottom: 24px; }
.hero.solo .hero-in { max-width: 860px; }
.cards { padding-top: 24px; padding-bottom: 24px; }
.cards .two { align-items: stretch; }
.cards h3 { margin-top: 0; }
.versions ul { padding-left: 1.2em; color: var(--text-dim); margin: 0 0 var(--space-4); }
.versions li { margin-bottom: 6px; }
.free { margin-top: 32px; margin-bottom: 16px; }
.front main > section.free { padding: var(--space-6); max-width: 1072px; }

/* legal pages */
.legalpage main { padding-top: 40px; padding-bottom: 48px; }
.legal { max-width: 780px !important; }
/* the one error card (the site review §3.2, round 232): one calm card, one line, one way back */
.legalpage main > .errcard { max-width: min(520px, calc(100% - 2 * var(--space-4))); margin-top: var(--space-6); padding: var(--space-6) var(--space-5); text-align: center; }
.errcard h1 { margin: 0 0 var(--space-2); font-size: var(--text-xl); }
.errcard p { color: var(--text-dim); }
.errcard p:last-child { margin-bottom: 0; }
.legal h1 { font-size: clamp(1.7rem, 3vw, 2.3rem); }
.legal h2 { font-size: 1.25rem; margin-top: var(--space-6); }
.legal h3 { font-size: 1.05rem; margin-top: var(--space-5); }
.legal p, .legal li { color: var(--text-dim); }
.legal b, .legal strong { color: var(--text); }
.legal ul { padding-left: 1.3em; }
.legal li { margin-bottom: 6px; }
.legal table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); margin: var(--space-3) 0 var(--space-4); }
.legal th, .legal td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.legal th { color: var(--text-dim); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.04em; }
.tablewrap { overflow-x: auto; }
.updated { color: var(--text-faint); font-size: var(--text-sm); }
.legalpage main > .draft { max-width: 780px; margin: 0 auto var(--space-5); padding: 12px 16px; border-radius: var(--radius); border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent);
  background: color-mix(in srgb, var(--warn) 10%, transparent); color: var(--warn); }
.legal .toc { display: flex; flex-direction: column; gap: var(--space-3); }

/* footer */
.foot { border-top: 1px solid var(--border); padding: var(--space-6) var(--space-5) var(--space-5); background: var(--glass-strong); }
.foot .cols { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--space-5); }
.foot .cols > div { display: flex; flex-direction: column; gap: 6px; }
.foot .cols a { color: var(--text-dim); }
.foot .cols p { color: var(--text-dim); font-size: var(--text-sm); margin: 0; }
.langs { display: flex; gap: var(--space-3); margin-top: var(--space-3) !important; }
.langs b { color: var(--text); font-weight: 600; }
.fine { max-width: 1120px; margin: var(--space-5) auto 0; color: var(--text-dim); font-size: var(--text-xs); }

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .front main { background-image: linear-gradient(to bottom, transparent calc(56.25vw - 240px), var(--bg) 56.25vw), url("bg-light.svg"); }
}
:root[data-theme="light"] .front main { background-image: linear-gradient(to bottom, transparent calc(56.25vw - 240px), var(--bg) 56.25vw), url("bg-light.svg"); }
@media (max-width: 860px) {
  .hero, .feature { grid-template-columns: 1fr; gap: var(--space-5); }
  .feature.flip .txt { order: 0; }
  .hero { padding-top: 32px; }
  .hero-in { padding: var(--space-5); }
  .two, .three, .four, .foot .cols { grid-template-columns: 1fr; }
  .top { padding: var(--space-3) var(--space-4); gap: var(--space-3); flex-wrap: wrap; }
  .top nav { order: 3; flex-basis: 100%; margin-left: 0; gap: var(--space-4); }
  .signin { margin-left: auto; }
  .front main > section, .legalpage main > * { padding-left: var(--space-4); padding-right: var(--space-4); }
  .front main > section.free { padding: var(--space-5); margin-left: var(--space-4); margin-right: var(--space-4); }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* the What's new line under the two versions (support.gliros.com/whats-new) */
.news-line { text-align: center; color: var(--text-dim); margin: 1.25rem 0 0; }

/* videos (the Animation page and its row on the front page) */
.vid { margin: 0; }
.vid video { display: block; width: 100%; height: auto; background: var(--inset); }
.vid figcaption { margin-top: var(--space-2); font-size: var(--text-sm); color: var(--text-dim); text-align: center; }
/* the films (round 184; the design chat's films.css, claude/gliros-design-www-films.md; the owner's B: an 11.5rem
   thumbnail, round 185): a calm row of cards, each opening
   large with its text beside it. A card is a link to #film-<name>, the large view is its :target; films.js adds the keys. */
.films { padding-top: 56px; padding-bottom: 24px; }
.films-head { margin-bottom: var(--space-4); }
.films-head h2 { margin: 0 0 var(--space-1); }
.films-head p { margin: 0; color: var(--text-dim); }
.films-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.film { display: grid; grid-template-columns: 11.5rem minmax(0, 1fr); gap: var(--space-3); align-items: center; padding: var(--space-3);
  border-radius: var(--radius-lg); border: 1px solid var(--glass-border); background: var(--glass);
  -webkit-backdrop-filter: blur(var(--blur)); backdrop-filter: blur(var(--blur)); color: var(--text); text-decoration: none;
  transition: border-color var(--fast); }
.film:hover { border-color: var(--accent); }
.film:focus-visible { outline: none; box-shadow: var(--focus); }
.film-thumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: var(--inset); }
.film-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.film-play { position: absolute; inset: 0; margin: auto; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--surface-solid); color: var(--text); box-shadow: var(--shadow-soft); padding-left: 2px; }
.film:hover .film-play { color: var(--accent); }
.film-len { position: absolute; right: 6px; bottom: 6px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--surface-solid);
  color: var(--text-dim); font-size: var(--text-xs); line-height: 1.5; font-variant-numeric: tabular-nums; }
.film-txt { display: grid; gap: 2px; min-width: 0; }
.film-title { font-weight: 600; font-size: var(--text-sm); }
.film-text { font-size: var(--text-xs); color: var(--text-dim); line-height: 1.45; }
@media (max-width: 1100px) { .films-row { grid-template-columns: minmax(0, 1fr); max-width: 40rem; } }
@media (max-width: 480px) { .film { grid-template-columns: 7.5rem minmax(0, 1fr); } }

/* the large view: the film on the left, its title and text beside it; under 900 px the text goes under the film */
.film-view { position: fixed; inset: 0; z-index: 60; display: none; place-items: center; padding: var(--space-5); }
.film-view:target { display: grid; }
/* a film's dark scrim in both themes, as a player's is: the one literal colour left (round 243) */
.film-scrim { position: absolute; inset: 0; background: rgba(4, 10, 12, 0.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.film-box { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: var(--space-5); align-items: center;
  width: min(1240px, 100%); padding: var(--space-5); border-radius: var(--radius-lg); border: 1px solid var(--glass-border);
  background: var(--glass-strong); -webkit-backdrop-filter: blur(var(--blur)); backdrop-filter: blur(var(--blur)); box-shadow: var(--shadow); }
.film-box video { display: block; width: 100%; height: auto; border-radius: var(--radius); background: var(--inset); }
.film-side h3 { margin: 0 0 var(--space-2); font-size: var(--text-lg); }
.film-side p { margin: 0 0 var(--space-3); color: var(--text-dim); }
.film-side .film-note { font-size: var(--text-xs); }
.film-next { font-size: var(--text-sm); }
.film-close { position: absolute; top: var(--space-2); right: var(--space-2); display: grid; place-items: center; width: 36px; height: 36px;
  border-radius: var(--radius); color: var(--text-dim); }
.film-close:hover { background: var(--accent-soft); color: var(--text); }
@media (max-width: 900px) {
  .film-view { padding: var(--space-3); align-items: start; overflow-y: auto; }
  .film-box { grid-template-columns: minmax(0, 1fr); padding: var(--space-4); gap: var(--space-3); }
  .film-side { padding-right: var(--space-6); }
}
@media (prefers-reduced-motion: reduce) { .film { transition: none; } }

/* the feature rows: the picture the same size on both sides (the flipped rows gave it the narrower column) */
.feature.flip { grid-template-columns: 1.15fr 1fr; }
@media (max-width: 860px) { .feature.flip { grid-template-columns: 1fr; } }   /* the rows' own breakpoint */
/* Animation's row: its film as a framed picture with a play mark, the same size as the rows' screenshots (round 184) */
.film.film-frame { display: block; padding: 0; border: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.film-frame .film-thumb { border-radius: var(--radius-lg); border: 1px solid var(--glass-border); box-shadow: var(--shadow); }
.film-frame:hover .film-thumb { border-color: var(--accent); }
.film-frame .film-play { width: 56px; height: 56px; }
.film-frame .film-play svg { width: 24px; height: 24px; }
/* a row without its picture yet: its text alone, at the reading width (round 184) */
.feature.solo { grid-template-columns: minmax(0, 44rem); justify-content: center; }
/* while a film is open (films.js): the page behind doesn't scroll */
html.film-open { overflow: hidden; }
/* a feature page: the plain page colour (the landscape belongs to the front page's tall hero) */
.front.featurepage main { background-image: none !important; }
.vid.plain figcaption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* light / dark for this visit (?theme=; W::themeSwitch) */
.theme-switch { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--border); border-radius: var(--radius-pill); }
.theme-switch a { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 26px; border-radius: var(--radius-pill); color: var(--text-dim); }
.theme-switch a:hover { color: var(--text); background: var(--accent-soft); text-decoration: none; }
.theme-switch a.on { color: var(--on-accent); background: var(--accent); }
.theme-switch svg { width: 16px; height: 16px; }
@media (max-width: 860px) { .top .theme-switch { margin-left: auto; } .top .signin { margin-left: 0; } }
/* the Media Studio and Test your models pages (round 41) */
.addons > h2 { margin: 0 0 var(--space-2); }
.addons > .lead { margin: 0 0 var(--space-4); }
.addons > .card { margin-top: var(--space-4); }
.card.addon .shot { margin: 0 0 var(--space-3); }
.card.join .cta { margin: var(--space-3) 0 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* the Security page (/security/): three sections with a heading and a short lead each (round 89, docs/ARTICLES.md) */
.secpage main > section.sc-sec { padding-top: 40px; padding-bottom: 8px; }
.secpage .sc-sec > h2 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); margin: 0 0 var(--space-2); }
.secpage .sc-sec > .lead { max-width: 660px; margin: 0 0 var(--space-5); }

/* the Requirements page (/requirements/, round 103): the Security page's sections, the model table, and the answers of
   "Check this browser" (a mark before each line, so the answer never rests on colour alone) */
/* the front page's Windows card: the link under Download */
.versions .rq-link { margin: var(--space-3) 0 0; font-size: var(--text-sm); }
.rq-table { padding: var(--space-3) var(--space-5); }
.rq-table table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.rq-table th, .rq-table td { text-align: left; padding: 10px 10px 10px 0; border-bottom: 1px solid var(--border); vertical-align: top; }
.rq-table tr:last-child td { border-bottom: 0; }
.rq-table th { color: var(--text-dim); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
.rq-table td:last-child, .rq-table th:last-child { white-space: nowrap; text-align: right; padding-right: 0; }
.rq-more { max-width: 780px; color: var(--text-dim); margin: var(--space-4) 0 0; }
.rq-check h2 { margin-top: 0; }
.rq-out { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; gap: var(--space-2); }
.rq-out li { position: relative; padding-left: 1.6em; }
.rq-out li::before { position: absolute; left: 0; top: 0; font-weight: 700; }
.rq-out li.ok::before { content: "✓"; color: var(--good); }
.rq-out li.no::before { content: "✕"; color: var(--danger); }
.rq-out li.info::before { content: "·"; color: var(--text-dim); }
.rq-out li:last-child { color: var(--text-dim); font-size: var(--text-sm); }
@media (max-width: 640px) {
  .rq-table { padding: var(--space-2) var(--space-4); }
  .rq-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .rq-table tr { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--space-3); padding: 10px 0; border-bottom: 1px solid var(--border); }
  .rq-table tr:last-child { border-bottom: 0; }
  .rq-table td { padding: 0; border: 0; }
  .rq-table td:first-child { grid-column: 1 / -1; font-weight: 600; }
  .rq-table td:last-child { text-align: right; }
}

/* the How AI works page (/how-ai-works/): the drawing is HTML, so it is translated with the text */
.aipage main > section.ai-sec { padding-top: 40px; padding-bottom: 16px; }
.aipage h2 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); margin-top: 0; }
.aipage .cards .card h2 { font-size: 1.25rem; }
.ai-fig { margin: var(--space-5) 0 0; }
.ai-path { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-5); }
.ai-step { position: relative; display: flex; flex-direction: column; gap: var(--space-2); background: var(--surface); border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg); padding: var(--space-4); box-shadow: var(--shadow-soft); animation: ai-glow 7.5s ease-in-out infinite; }
.ai-step + .ai-step::before { content: "→"; position: absolute; left: calc(-1 * var(--space-5)); width: var(--space-5); top: 42px; text-align: center;
  color: var(--accent); font-weight: 700; }
.ai-step:nth-child(2) { animation-delay: 1.5s; }
.ai-step:nth-child(3) { animation-delay: 3s; }
.ai-step:nth-child(4) { animation-delay: 4.5s; }
.ai-step:nth-child(5) { animation-delay: 6s; }
@keyframes ai-glow { 0%, 22%, 100% { border-color: var(--glass-border); } 8% { border-color: var(--accent); } }
.ai-n { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: var(--radius-pill);
  background: var(--accent-soft); color: var(--text); font-weight: 700; font-size: var(--text-sm); }
.ai-d { color: var(--text-dim); font-size: var(--text-md); }
.ai-x { display: block; margin-top: auto; font-family: var(--mono); font-size: var(--text-sm); color: var(--text); background: var(--inset);
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px 8px; overflow-wrap: anywhere; }
.ai-net { display: block; width: 100%; max-width: 160px; height: auto; margin: var(--space-1) 0; }
.ai-net line { stroke: var(--accent); stroke-opacity: 0.35; stroke-width: 1; }
.ai-net circle { fill: var(--accent); animation: ai-pulse 2.4s ease-in-out infinite; }
.ai-net circle.c1 { animation-delay: 0.4s; }
.ai-net circle.c2 { animation-delay: 0.8s; }
.ai-net circle.c3 { animation-delay: 1.2s; }
@keyframes ai-pulse { 0%, 100% { fill-opacity: 0.45; } 50% { fill-opacity: 1; } }
.ai-loop { margin: var(--space-4) 0 var(--space-2); color: var(--text); font-weight: 600; }
.ai-loop span { color: var(--accent); font-size: 1.2em; }
.ai-why { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-4); }
.ai-why h3 { margin: 0 0 var(--space-2); font-size: 1.05rem; }
.ai-ex { margin: var(--space-3) 0 0; padding-top: var(--space-3); border-top: 1px solid var(--border); font-size: var(--text-md); color: var(--text); }
.ai-do { padding-left: 1.2em; color: var(--text-dim); }
.ai-do li { margin-bottom: 8px; }
.ai-do b, .aipage .card .dim b { color: var(--text); }
sup.ref { font-size: 0.7em; line-height: 0; margin-left: 2px; }
sup.ref a { padding: 0 1px; }
.ai-sim-frame { display: block; width: 100%; height: 1560px; border: 1px solid var(--glass-border); border-radius: var(--radius-lg);
  background: var(--surface-solid); margin-top: var(--space-4); }
.ai-src ol { padding-left: 1.6em; color: var(--text-dim); font-size: var(--text-sm); }
.ai-src li { margin-bottom: 6px; scroll-margin-top: 80px; }
.ai-src li:target { color: var(--text); }
@media (max-width: 960px) {
  .ai-path { grid-template-columns: 1fr; gap: var(--space-5); }
  .ai-step + .ai-step::before { content: "↓"; left: 0; right: 0; width: auto; top: calc(-1 * var(--space-5)); line-height: var(--space-5); }
  .ai-net { max-width: 200px; }
}
@media (max-width: 860px) {
  .ai-why { grid-template-columns: 1fr; }
}
/* on a phone the simulator opens on its own (a frame inside a long page scrolls badly there) */
.ai-sim .ai-open { display: none; }
@media (max-width: 700px) { .ai-sim-frame { display: none; } .ai-sim .ai-open { display: inline-block; } }
@media (prefers-reduced-motion: reduce) { .ai-step, .ai-net circle { animation: none; } .ai-net circle { fill-opacity: 0.9; } }

/* ---- /features/: the ten highlights (round 278) ---------------------------------------------------------------------- */
.ftpage .ft-toc { padding-top: var(--space-5); padding-bottom: var(--space-2); }
.ftpage .ft-toc ol { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: 0; padding: 0; list-style: none; counter-reset: ft; }
.ftpage .ft-toc li { counter-increment: ft; }
.ftpage .ft-toc li::before { content: counter(ft) ". "; color: var(--text-dim); }
.ftpage .feature .kicker { margin-bottom: var(--space-1); }
.ftpage .ft-list { margin: var(--space-3) 0; padding-left: 1.2em; color: var(--text-dim); }
.ftpage .ft-list li { margin: 0 0 var(--space-2); line-height: 1.5; }
.ftpage .feature.ft-text { grid-template-columns: minmax(0, 760px); }
.ftpage .ft-cards { padding-top: 48px; padding-bottom: 48px; }
.ftpage .ft-cards > h2 { margin: 0 0 var(--space-2); }
.ftpage .ft-cards > p:not(.kicker) { color: var(--text-dim); max-width: 660px; }
.ftpage .ft-cards .three { margin: var(--space-4) 0; }
.ftpage .ft-close { padding-top: 48px; padding-bottom: 64px; }
.ftpage .ft-close .card { max-width: 720px; margin: 0 auto; text-align: center; padding: var(--space-6); }
.ftpage .ft-close .ft-list { display: inline-block; text-align: left; }
.ftpage .ft-close .cta { justify-content: center; }
@media (max-width: 640px) {
  .ftpage .ft-toc ol { flex-direction: column; gap: var(--space-2); }
  .ftpage .ft-close .card { padding: var(--space-5); }
}
/* the design chat's three lines on round 279: one quiet number on every row, the closing card's lead dim like the
   others, and full-width stacked buttons on a phone */
.ftpage .ft-cards > .kicker, .ftpage .ft-close .kicker { color: var(--text-dim); font-size: 1.02rem; }
.ftpage .ft-close .card > p:not(.kicker):not(.cta) { color: var(--text-dim); }
@media (max-width: 640px) {
  .ftpage .cta { flex-direction: column; align-items: stretch; }
  .ftpage .cta .btn { width: 100%; text-align: center; justify-content: center; }
}
.ftpage .ft-fig { margin: 0; min-width: 0; }
.ftpage .ft-fig figcaption { margin-top: var(--space-2); font-size: var(--text-sm); color: var(--text-dim); }
.ftpage .ft-close .card > p.ft-note { font-size: var(--text-sm); color: var(--text-dim); max-width: 560px; margin: 0 auto var(--space-3); }