/* ============================================================
   MÉRIDIEN · DECK TEMPLATE v2 — masters on roles and grid v1
   Colour   — roles of Brand · Roles (../tokens.css): var(--bg-page), var(--text-primary), var(--accent-primary)…
   Type     — the 14 roles of the type scale: .t-<role> (base) and .a-<role> (brand accent, Ayer at Méridien)
   Layout   — .g24 areas of grid v1 (../grid.css): --gc / --gr, .to-bottom, .to-right, .bleed-*
   Brand and theme are attributes: <html data-brand="zain">, <section class="slide" data-theme="light">.
   No hex in this file. The only literal colours are the hardware of the devices (block DEVICES) —
   a phone is graphite in any brand, like a photograph it is not recoloured.
   ============================================================ */

/* ---------- FONTS (licensed, local — never substitute on hosting: Elis 24.09.2026) ---------- */
@font-face { font-family: 'Struve'; src: url('fonts/Struve-Light.woff2') format('woff2'); font-weight: 300; font-display: block; }
@font-face { font-family: 'Struve'; src: url('fonts/Struve-Regular.woff2') format('woff2'); font-weight: 400; font-display: block; }
@font-face { font-family: 'Struve'; src: url('fonts/Struve-Medium.woff2') format('woff2'); font-weight: 500; font-display: block; }
@font-face { font-family: 'Struve'; src: url('fonts/Struve-Semibold.woff2') format('woff2'); font-weight: 600; font-display: block; }
@font-face { font-family: 'Struve'; src: url('fonts/Struve-Bold.woff2') format('woff2'); font-weight: 700; font-display: block; }
@font-face { font-family: 'Ayer Poster Cursive'; src: url('fonts/AyerPosterCursive-BlackItalic-Web.woff2') format('woff2'); font-weight: 900; font-style: italic; font-display: block; }

/* geometry of the canon cover 400:1127 — tile radius 16, logo and stat tiles 36; inner padding of a tile 28 */
:root { --r-tile: 16px; --r-logo: 36px; --tile-pad: 28px; }

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--base-700); }

/* ---------- SLIDE ---------- */
.slide {
  position: relative; width: 1920px; height: 1080px; overflow: hidden; isolation: isolate; flex: none;
  background: var(--bg-page); color: var(--text-primary);
  font-family: var(--font-base); font-weight: 400; font-kerning: normal;
  -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision;
}
.slide p, .slide h1, .slide h2, .slide h3, .slide h4, .slide ul, .slide ol, .slide figure, .slide blockquote { margin: 0; padding: 0; }
.slide ul, .slide ol { list-style: none; }
.slide .g24 { z-index: 2; }
.slide .g24 > *, .sub > * { position: relative; }   /* children paint in DOM order: a slot never covers the text after it */
.slide .g24 > .dev { position: absolute; }

/* the brand plane: the whole slide or a block. Text on it is text/on-accent (Méridien black, Zain light) */
.on-accent { background: var(--bg-accent); color: var(--text-on-accent);
  --text-primary: var(--text-on-accent); --text-secondary: var(--text-on-accent); --marker-bg: var(--text-on-accent); --marker-text: var(--bg-accent); }
/* blueprint — the only page of the colour accent2 (colours.md → Accent - 2: «фоном страницы — кроме blueprint-схем») */
.on-blueprint { background: var(--accent2-900); color: var(--base-50);
  --text-primary: var(--base-50); --text-secondary: var(--accent2-200); --line-graphic: var(--accent2-200); --line-grid: var(--accent2-800); }

/* ---------- TYPE — the scale (references/typography.md): text tier base only; in the display tier a title (any large words) is
   the accent .a-*, numbers stay base .t-number-* / .t-title-* (Elis 05.10.2026) ---------- */
.t-label    { font: 500 var(--fs-label)/var(--lh-label) var(--font-base);       letter-spacing: var(--tr-label); }
.t-caption  { font: 400 var(--fs-caption)/var(--lh-caption) var(--font-base);   letter-spacing: var(--tr-caption); }
.t-body     { font: 400 var(--fs-body)/var(--lh-body) var(--font-base);         letter-spacing: var(--tr-body); }
.t-lead     { font: 400 var(--fs-lead)/var(--lh-lead) var(--font-base);         letter-spacing: var(--tr-lead); }
.t-subhead  { font: 500 var(--fs-subhead)/var(--lh-subhead) var(--font-base);   letter-spacing: var(--tr-subhead); }
.t-title-s  { font: 500 var(--fs-title-s)/var(--lh-title-s) var(--font-base);   letter-spacing: var(--tr-title-s); }
.t-title-m  { font: 500 var(--fs-title-m)/var(--lh-title-m) var(--font-base);   letter-spacing: var(--tr-title-m); }
.t-title-l  { font: 500 var(--fs-title-l)/var(--lh-title-l) var(--font-base);   letter-spacing: var(--tr-title-l); }
.t-headline { font: 500 var(--fs-headline)/var(--lh-headline) var(--font-base); letter-spacing: var(--tr-headline); }
.t-display  { font: 500 var(--fs-display)/var(--lh-display) var(--font-base);   letter-spacing: var(--tr-display); }
.t-word     { font: 700 var(--fs-word)/var(--lh-word) var(--font-base);         letter-spacing: var(--tr-word); }
.t-cover    { font: 700 var(--fs-cover)/var(--lh-cover) var(--font-base);       letter-spacing: var(--tr-cover); }
.t-number-l { font: 400 var(--fs-number-l)/var(--lh-number-l) var(--font-base); letter-spacing: var(--tr-number-l); }
.t-number-xl{ font: 400 var(--fs-number-xl)/var(--lh-number-xl) var(--font-base); letter-spacing: var(--tr-number-xl); }

/* the brand accent: every title — headline, statement, divider, contents, quote, a word array; a whole line, never inside a base
   line; not smaller than title-m (Ayer 92) */
.a-title-m, .a-title-l, .a-headline, .a-display, .a-word, .a-cover {
  font-family: var(--font-accent); font-weight: var(--font-accent-weight); font-style: var(--font-accent-style); letter-spacing: var(--tr-accent); }
.a-title-m  { font-size: var(--fs-title-m-accent);  line-height: var(--lh-title-m-accent); }
.a-title-l  { font-size: var(--fs-title-l-accent);  line-height: var(--lh-title-l-accent); }
.a-headline { font-size: var(--fs-headline-accent); line-height: var(--lh-headline-accent); }
.a-display  { font-size: var(--fs-display-accent);  line-height: var(--lh-display-accent); }
.a-word     { font-size: var(--fs-word-accent);     line-height: var(--lh-word-accent); }
.a-cover    { font-size: var(--fs-cover-accent);    line-height: var(--lh-cover-accent); }
/* the accent has no glyphs for the script (Ayer: no Cyrillic, no Arabic) → base Bold of the same role; deck.js sets .fb */
.a-title-m.fb  { font: 700 var(--fs-title-m)/var(--lh-title-m) var(--font-base);   letter-spacing: var(--tr-title-m); }
.a-title-l.fb  { font: 700 var(--fs-title-l)/var(--lh-title-l) var(--font-base);   letter-spacing: var(--tr-title-l); }
.a-headline.fb { font: 700 var(--fs-headline)/var(--lh-headline) var(--font-base); letter-spacing: var(--tr-headline); }
.a-display.fb  { font: 700 var(--fs-display)/var(--lh-display) var(--font-base);   letter-spacing: var(--tr-display); }
.a-word.fb     { font: 700 var(--fs-word)/var(--lh-word) var(--font-base);         letter-spacing: var(--tr-word); }
.a-cover.fb    { font: 700 var(--fs-cover)/var(--lh-cover) var(--font-base);       letter-spacing: var(--tr-cover); }

.w-bold { font-weight: 700; }
.tnum { font-variant-numeric: tabular-nums; }
.c-2 { color: var(--text-secondary); }  /* grey is a solid step of the scale, never opacity (canon) */
.c-mute { color: var(--text-muted); }   /* only the inactive */
.c-data { color: var(--data-1); }       /* a number in the brand colour: data/1 keeps ≥ 3 : 1 in both themes */
.nowrap { white-space: nowrap; }
.br { display: block; }

/* ---------- SERVICE LAYER — the same on every slide (layout-grid.md §3.6): label row 1, footer row 16 ---------- */
.svc-label  { --gc: 1 / span 8;  --gr: 1;  font: 500 var(--fs-label)/var(--lh-label) var(--font-base); letter-spacing: var(--tr-label); color: var(--text-secondary); }
.svc-sender { --gc: 1 / span 6;  --gr: 16; font: 500 var(--fs-label)/var(--lh-label) var(--font-base); letter-spacing: var(--tr-label); color: var(--text-secondary); align-self: end; }
.svc-pn     { --gc: 22 / span 3; --gr: 16; font: 500 var(--fs-label)/var(--lh-label) var(--font-base); letter-spacing: var(--tr-label); color: var(--text-secondary); align-self: end; justify-self: end; text-align: right; }
.svc-right  { --gc: 17 / span 8; --gr: 1;  font: 500 var(--fs-label)/var(--lh-label) var(--font-base); letter-spacing: var(--tr-label); color: var(--text-secondary); justify-self: end; text-align: right; }

/* subgrid: a block that spans columns/rows and places its children on the same lines (rows of a list, cells of a table) */
.sub { display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; }
.sub > * { grid-column: var(--gc, auto); grid-row: var(--gr, auto); min-width: 0; margin: 0; }
.sub > .mid { align-self: center; }
.sub > .to-bottom { align-self: end; } .sub > .to-right { justify-self: end; text-align: right; }

/* ---------- TILES — bento: neutral, almost one with the page; no borders, no shadows ---------- */
.tile { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--r-tile); background: var(--bg-surface); color: var(--text-primary); }
.tile.s2 { background: var(--bg-surface-2); }
.tile.page { background: var(--bg-page); }
.tile.hot { background: var(--bg-accent); color: var(--text-on-accent); --text-primary: var(--text-on-accent); --text-secondary: var(--text-on-accent); }
.tile.r36 { border-radius: var(--r-logo); }
.tile > .in { position: absolute; inset: 0; padding: var(--tile-pad); display: flex; flex-direction: column; justify-content: space-between; z-index: 3; }
.tile > .in.end { justify-content: flex-end; }
.tile > .in.start { justify-content: flex-start; }
.tile .num { font: 400 var(--fs-title-l)/var(--lh-title-l) var(--font-base); letter-spacing: var(--tr-title-l); font-variant-numeric: tabular-nums; }
/* tonal bento of statistics (templates.md archetype 9): tiles in brand tints, text of the light theme on them */
.tile.tone-1 { background: var(--brand-100); } .tile.tone-2 { background: var(--brand-200); } .tile.tone-3 { background: var(--brand-300); } .tile.tone-4 { background: var(--brand-400); }
.tile[class*="tone-"] { color: var(--base-950); --text-primary: var(--base-950); --text-secondary: var(--base-800); }
/* a highlighted row of a table or list: one row in the brand, text by the marker contrast rule */
.rowhot { background: var(--bg-accent); margin: -8px -20px; border-radius: 12px; z-index: 0; }
.sub > .on { color: var(--text-on-accent); z-index: 1; }
/* quotes: the marks stand on their own lines, in the same font and size as the quote */
.qm { display: block; }
.author { display: flex; align-items: center; gap: 20px; }
.author > .ph { width: 72px; height: 72px; border-radius: 50%; flex: none; }
.author > .ph > .ph-plus { display: none; }
.on-plane { color: var(--text-on-accent); }   /* text standing on a sibling brand plane (L17) */
.plane { background: var(--bg-accent); color: var(--text-on-accent); --text-primary: var(--text-on-accent); --text-secondary: var(--text-on-accent); }
.surface { background: var(--bg-surface); }

/* ---------- MARKER — the only effect that works with type: a solid plate on a key word of the title. Large text is a title,
   a title is in the brand accent (Elis 05.10.2026) — so the plate sits on the accent headline; in a fallback (.fb) on base Bold ---------- */
/* the marker switched off by the editor (<html data-fx-off="marker">, Elis 21.10.2026): the title highlight is a line or a word
   in the accent colour (.hl-accent) or a word in base Bold inside the accent title (.hl-base) — never together with the marker */
.hl-accent { color: var(--accent-primary); }
.hl-base { font-family: var(--font-base); font-weight: 700; font-style: normal; }
.a-title-m .hl-base { font-size: var(--fs-title-m); } .a-title-l .hl-base { font-size: var(--fs-title-l); }
.a-headline .hl-base { font-size: var(--fs-headline); } .a-display .hl-base { font-size: var(--fs-display); }
.a-word .hl-base { font-size: var(--fs-word); } .a-cover .hl-base { font-size: var(--fs-cover); }
.mk { position: relative; background: var(--marker-bg); color: var(--marker-text); padding: 0 .1em; margin: 0 -.02em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.mk[data-tag]::after { content: attr(data-tag); position: absolute; right: 0; bottom: 100%; padding: 2px 8px 0;
  font: 500 var(--fs-label)/var(--lh-label) var(--font-base); letter-spacing: var(--tr-label); white-space: nowrap;
  background: var(--marker-bg); color: var(--marker-text); }
.mk-lines { line-height: 1.12; }        /* a line with the marker: line-height ≥ 1.1 or the plates stick */

/* ---------- EFFECT HOSTS — a generator of ../brand.js draws into the host (data-g + data-o) ---------- */
.fx { position: relative; overflow: hidden; }
.fx > canvas, .fx > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.fx.fill { position: absolute; inset: 0; z-index: 0; }

/* ---------- PHOTO SLOTS — a labelled stand-in, replaced by a real photograph (prompt id → scripts/prompt.mjs) ---------- */
.ph { position: relative; overflow: hidden; isolation: isolate; background: var(--bg-surface); color: var(--text-secondary); }
.ph > svg.ph-art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
.ph > .ph-cap { position: absolute; left: var(--tile-pad); right: var(--tile-pad); bottom: 24px; z-index: 2;
  font: 400 var(--fs-caption)/var(--lh-caption) var(--font-base); color: var(--ph-ink, var(--text-secondary)); max-width: 30em; }
.ph > .ph-cap b { display: block; font-weight: 500; color: var(--ph-ink, var(--text-primary)); }
.ph > .ph-cap.top { bottom: auto; top: 24px; }
.ph > .ph-cap.right { left: auto; right: 68px; text-align: right; }   /* clear of the + in the corner */
.ph > .ph-plus { position: absolute; right: 20px; top: 20px; width: 32px; height: 32px; border-radius: 50%; z-index: 2;
  background: var(--ph-plus, var(--bg-surface-2)); }
.ph > .ph-plus::before, .ph > .ph-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; background: var(--ph-ink, var(--text-primary)); }
.ph > .ph-plus::after { transform: rotate(90deg); }
.ph.r { border-radius: var(--r-tile); }
/* stand-ins in the base scale (deck.js → ART): a portrait against a light studio, a small figure in space, ridges, one object */
.ph { --ph-fig: var(--base-950); --ph-ground: var(--bg-surface-2); --ph-far: var(--base-800); --ph-mid: var(--base-900); --ph-near: var(--base-950); }
.ph[data-ph="person"] { background: linear-gradient(180deg, var(--base-300) 0, var(--base-500) 100%); --ph-ink: var(--base-950); --ph-plus: var(--base-200); }
.ph[data-ph="person"].hot { background: var(--bg-accent); --ph-ink: var(--text-on-accent); --ph-plus: var(--brand-300); }
.ph[data-ph="figure"] { background: linear-gradient(180deg, var(--base-900) 0, var(--base-700) 70%, var(--base-600) 78%); --ph-ground: var(--base-900); --ph-ink: var(--base-50); }
.ph[data-ph="landscape"] { background: linear-gradient(180deg, var(--base-950) 0, var(--base-800) 40%, var(--base-600) 62%); --ph-far: var(--base-700); --ph-mid: var(--base-800); --ph-near: var(--base-900); --ph-ink: var(--base-50); }
.ph[data-ph="object"] { background: radial-gradient(70% 70% at 50% 40%, var(--base-700) 0, var(--base-900) 100%); --ph-fig: var(--base-500); --ph-ground: var(--base-950); --ph-ink: var(--base-50); }
.ph[data-ph="plain"] { background: var(--bg-surface); }
/* two flat zones (no blend) under a picture whose text stands in its light part: the greydient divider */
.ph[data-ph="split"] { background: linear-gradient(180deg, var(--base-950) 0 58%, var(--base-100) 58% 100%); }
[data-theme="light"] .ph[data-ph="landscape"], .ph[data-ph="landscape"][data-theme="light"] { background: linear-gradient(180deg, var(--base-50) 0, var(--base-100) 45%, var(--base-200) 62%); --ph-far: var(--base-200); --ph-mid: var(--base-300); --ph-near: var(--base-400); --ph-ink: var(--base-950); }
[data-theme="light"] .ph[data-ph="figure"], .ph[data-ph="figure"][data-theme="light"] { background: linear-gradient(180deg, var(--base-100) 0, var(--base-200) 78%); --ph-ground: var(--base-300); --ph-fig: var(--base-950); --ph-ink: var(--base-950); }
[data-theme="light"] .ph[data-ph="object"], .ph[data-ph="object"][data-theme="light"] { background: radial-gradient(70% 70% at 50% 40%, var(--base-50) 0, var(--base-200) 100%); --ph-fig: var(--base-400); --ph-ground: var(--base-300); --ph-ink: var(--base-950); }
/* prompt slot ◇ 05.10.2026 (Elis): the picture place shows the whole prompt for the neighbour AI (../prompt-slots.js — it
   brings the card styles itself, so longreads get them too). The stand-in stays under the card as a sketch of the composition.
   A filled slot holds the picture: <img> as its child covers it. ?ph=art — stand-ins without cards */
.has-prompt > .ph-plus { display: none; }
.ph > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; display: block; }
/* a mockup slot laid over the CSS devices of the layout: they stay as the sketch of the composition (the slot reads where
   they stand into the prompt); the slot is transparent and lets clicks through, its card catches them */
.ph[data-ph="none"] { background: transparent; pointer-events: none; }
.ph[data-ph="none"] > .ph-plus { display: none; }
.ph[data-ph="none"] > .ph-card { pointer-events: auto; }

/* ---------- THE MARK — canon: Ayer Poster Cursive Black Italic, white on a dark tile; letter, size, position never change ---------- */
.icon-m { position: relative; width: 180px; height: 180px; border-radius: var(--r-logo); overflow: hidden; isolation: isolate; display: grid; place-items: center; background: var(--base-950); flex: none; }
.icon-m > b { position: relative; z-index: 3; font: italic 900 146px/1 'Ayer Poster Cursive', serif; color: var(--base-50); transform: translate(-.024em, .098em); }
.icon-m > .fx { position: absolute; inset: 0; z-index: 0; }
.icon-m.s120 { width: 120px; height: 120px; border-radius: 24px; } .icon-m.s120 > b { font-size: 97px; }
.icon-m.s107 { width: 107px; height: 107px; border-radius: 21px; } .icon-m.s107 > b { font-size: 87px; }
.wordmark { font: italic 900 146px/1 'Ayer Poster Cursive', serif; color: var(--base-50); white-space: nowrap; }
.mark-tile { position: relative; overflow: hidden; isolation: isolate; display: grid; place-items: center; background: var(--base-950); border-radius: var(--r-logo); }
.mark-tile > .mark-m { position: relative; z-index: 3; font: italic 900 146px/1 'Ayer Poster Cursive', serif; color: var(--base-50); transform: translate(-.024em, .098em); }
.mark-tile > .wordmark { position: relative; z-index: 3; }

/* ---------- LISTS AND TABLES — no rules: rhythm by spacing, groups by a neutral tile (canon 24.09) ---------- */
.rows { display: grid; grid-auto-rows: 61.5px; align-content: start; }   /* one row = one grid row (pitch 61.5) */
.rows > * { display: grid; align-items: center; }
.tbl { width: 100%; border-collapse: collapse; font: 400 var(--fs-body)/var(--lh-body) var(--font-base); font-variant-numeric: tabular-nums; }
.tbl th { font: 500 var(--fs-label)/var(--lh-label) var(--font-base); letter-spacing: var(--tr-label); color: var(--text-secondary); text-align: left; height: 45.5px; vertical-align: bottom; padding: 0 0 6px; }
.tbl td { height: 61.5px; padding: 0; vertical-align: middle; }
.tbl .r, .tbl th.r { text-align: right; }
.tbl tr.hot td { background: var(--bg-accent); color: var(--text-on-accent); }
.tbl tr.hot td:first-child { border-radius: 12px 0 0 12px; padding-left: 20px; } .tbl tr.hot td:last-child { border-radius: 0 12px 12px 0; padding-right: 20px; }
.tbl tr.hot + tr td, .tbl tr td { transition: none; }

/* ---------- CHARTS AND SCHEMES — drawn by deck.js into .chart (SVG, 1 unit = 1 px) ---------- */
.chart { position: relative; }
.chart > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; display: block; }
.chart text { font-family: var(--font-base); fill: var(--text-secondary); font-variant-numeric: tabular-nums; }
.chart .lbl { font-size: 16px; font-weight: 500; letter-spacing: .01em; }
.chart .cap { font-size: 18px; }
.chart .val { font-size: 40px; font-weight: 500; letter-spacing: -.02em; fill: var(--text-primary); }
.chart .val-s { font-size: 24px; fill: var(--text-primary); }
.chart .ink { fill: var(--text-primary); }
.chart .hotink { fill: var(--data-1); }
.chart .grid { stroke: var(--line-grid); stroke-width: 1; fill: none; }
.chart .axis { stroke: var(--line-graphic); stroke-width: 1.5; fill: none; }
.chart .line { stroke: var(--line-graphic); stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.chart .line.hot { stroke: var(--data-1); stroke-width: 3; }
.chart .line.d2 { stroke: var(--data-2); } .chart .line.d3 { stroke: var(--data-3); }
.chart .dash { stroke-dasharray: 2 8; }
.chart .bar { fill: var(--data-neutral); } .chart .bar.hot { fill: var(--data-1); }
.chart .area { fill: var(--bg-surface-2); } .chart .area.hot { fill: var(--accent-subtle); }
.chart .node { fill: var(--bg-page); stroke: var(--line-graphic); stroke-width: 2; }
.chart .node.hot { fill: var(--accent-primary); stroke: var(--accent-primary); }
.chart .node.fill { fill: var(--bg-surface-2); stroke: none; }
.chart .link { stroke: var(--line-graphic); stroke-width: 1.5; fill: none; }
.chart .link.hot { stroke: var(--accent-fine); stroke-width: 2.5; }
.chart .dot { fill: var(--text-primary); } .chart .dot.off { fill: var(--line-graphic); } .chart .dot.hot { fill: var(--data-1); }
.chart .frame { stroke: var(--accent-fine); stroke-width: 2; fill: none; }
.chart .hair { stroke: var(--line-graphic); stroke-width: 1; fill: none; }
.chart .node-t { font-size: 24px; fill: var(--text-primary); }
.chart .node-t.on { fill: var(--text-on-accent); }

/* legend of a heat scale: one even ramp, 3–5 ticks with units */
.legend-heat { display: grid; grid-template-columns: repeat(6, 1fr); height: 16px; border-radius: 8px; overflow: hidden; }
.legend-heat > i { display: block; }
.legend-ticks { display: flex; justify-content: space-between; font: 500 var(--fs-label)/var(--lh-label) var(--font-base); letter-spacing: var(--tr-label); color: var(--text-secondary); margin-top: 10px; font-variant-numeric: tabular-nums; }

/* a node of a scheme in HTML: an outlined capsule; the key one is filled with the brand */
.cap-node { display: inline-flex; align-items: center; height: 56px; padding: 0 26px; border-radius: 28px; border: 2px solid var(--line-graphic);
  font: 500 var(--fs-body)/1 var(--font-base); color: var(--text-primary); background: var(--bg-page); white-space: nowrap; }
.cap-node.hot { background: var(--accent-primary); border-color: var(--accent-primary); color: var(--text-on-accent); }

/* a key of a legend: a dot in the role of its series */
.key { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--line-graphic); margin-right: 10px; vertical-align: 1px; }
.key.hot { background: var(--data-1); }
/* a leader line from a note to a device or a drawing: a hairline with a dot on the device end */
.lead-line { align-self: center; height: 2px; background: var(--line-graphic); }
.lead-line::after { content: ""; position: absolute; right: -6px; top: -5px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent-primary); }
.lead-line.to-left::after { right: auto; left: -6px; }
/* heat in the interface: metaball blobs of the heat roles around a dial (Heat maps → «Тепло в интерфейсе») */
.heat-widget { position: relative; width: 168px; height: 168px; border-radius: 40px; background: var(--bg-page); overflow: hidden; isolation: isolate; }
.heat-widget::before { content: ""; position: absolute; inset: -20%; filter: blur(14px);
  background: radial-gradient(28% 28% at 34% 38%, var(--heat-6) 0, var(--heat-5) 30%, transparent 72%), radial-gradient(30% 26% at 66% 64%, var(--heat-4) 0, var(--heat-3) 40%, transparent 75%), radial-gradient(50% 50% at 50% 50%, var(--heat-2) 0, transparent 80%); }
.heat-widget::after { content: ""; position: absolute; left: 50%; top: 50%; width: 46%; height: 46%; margin: -23% 0 0 -23%; border-radius: 50%; border: 2px solid var(--base-50); }
/* a capsule with a gradient inside (interface accent): the Brand palette only on the screen of the product */
.capsule { position: relative; width: 96px; height: 168px; border-radius: 48px; overflow: hidden; isolation: isolate; }
/* a high-key silhouette: the figure dark on the light page (Silhouettes, light) */
.ph[data-ph="person"][data-key="high"] { background: linear-gradient(180deg, var(--base-50) 0, var(--base-200) 100%); --ph-plus: var(--base-100); }

/* a round index: number in a circle (positions of a drawing, steps) */
.idx { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--line-graphic);
  font: 500 var(--fs-label)/1 var(--font-base); color: var(--text-primary); font-variant-numeric: tabular-nums; }
.idx.hot { background: var(--accent-primary); border-color: var(--accent-primary); color: var(--text-on-accent); }

/* ---------- INTERFACE ACCENTS — fragments of the product as graphics (templates.md §8) ---------- */
.ui-card { border-radius: 24px; padding: 22px 24px; background: var(--bg-surface); color: var(--text-primary); }
.ui-card .k { font: 500 var(--fs-label)/var(--lh-label) var(--font-base); color: var(--text-secondary); letter-spacing: var(--tr-label); }
.ui-card .v { font: 400 var(--fs-title-s)/var(--lh-title-s) var(--font-base); letter-spacing: var(--tr-title-s); font-variant-numeric: tabular-nums; }
.ui-card.hot { background: var(--bg-accent); color: var(--text-on-accent); --text-secondary: var(--text-on-accent); }
.ui-card.float { box-shadow: 0 24px 60px color-mix(in srgb, var(--base-950) 40%, transparent); }
.pill { display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 20px; background: var(--bg-surface-2); color: var(--text-primary);
  font: 500 var(--fs-label)/1 var(--font-base); letter-spacing: var(--tr-label); white-space: nowrap; }
.pill.hot { background: var(--accent-primary); color: var(--text-on-accent); }
.detect { position: absolute; border: 2px solid var(--accent-fine); }
.detect > span { position: absolute; left: -2px; bottom: 100%; padding: 2px 8px 0; background: var(--bg-accent); color: var(--text-on-accent);
  font: 500 var(--fs-label)/var(--lh-label) var(--font-base); white-space: nowrap; }
.callout { position: absolute; display: flex; align-items: center; gap: 0; }
.callout > i { display: block; height: 2px; background: var(--line-graphic); }
.callout > i.dot { width: 12px; height: 12px; border-radius: 50%; background: var(--accent-primary); flex: none; }

/* ---------- DEVICES — CSS drawn with real proportions; size from one variable --w; the screen is a slot ---------- */
/* hardware is not brand colour: a device keeps its metal in any brand (like a photograph) */
:root {
  --hw-ink: oklch(0.13 0.003 260); --hw-black: oklch(0.08 0 0); --hw-edge-1: oklch(0.45 0.004 260); --hw-edge-2: oklch(0.21 0.003 260);
  --hw-alu-1: oklch(0.94 0.003 260); --hw-alu-2: oklch(0.84 0.004 260); --hw-alu-3: oklch(0.7 0.005 260); --hw-alu-4: oklch(0.52 0.005 260);
  --hw-glare: oklch(1 0 0 / .11); --hw-shadow: oklch(0 0 0 / .5); --hw-shadow-soft: oklch(0 0 0 / .26);
}
.dev { position: absolute; isolation: isolate; }   /* own stacking context: floating cards declared later sit on top */
.dev-phone { --w: 330px; width: var(--w); height: calc(var(--w) * 2.06); border-radius: calc(var(--w) * .165);
  background: linear-gradient(140deg, var(--hw-edge-1) 0, var(--hw-edge-2) 18%, var(--hw-black) 46%, var(--hw-edge-2) 74%, var(--hw-edge-1) 100%);
  box-shadow: calc(var(--w) * -.06) calc(var(--w) * .12) calc(var(--w) * .26) var(--hw-shadow); }
.dev-phone::after { content: ""; position: absolute; inset: calc(var(--w) * .011); border-radius: calc(var(--w) * .156); background: var(--hw-black); }
.dev-phone > .scr { position: absolute; inset: calc(var(--w) * .036); border-radius: calc(var(--w) * .132); overflow: hidden; z-index: 1; container-type: size; background: var(--hw-ink) center / cover no-repeat; }
.dev-phone > .isl { position: absolute; left: 50%; top: calc(var(--w) * .064); width: calc(var(--w) * .28); height: calc(var(--w) * .08); margin-left: calc(var(--w) * -.14); border-radius: 99px; background: var(--hw-black); z-index: 3; }
.dev-phone > .gl { position: absolute; inset: calc(var(--w) * .036); border-radius: calc(var(--w) * .132); z-index: 2; pointer-events: none;
  background: linear-gradient(116deg, var(--hw-glare) 0, transparent 24.3%); }
.dev-phone > .bt { position: absolute; width: calc(var(--w) * .012); background: linear-gradient(180deg, var(--hw-edge-1), var(--hw-edge-2)); border-radius: 2px; }
.dev-phone > .bt.a { left: calc(var(--w) * -.009); top: 19%; height: 4.2%; } .dev-phone > .bt.b { left: calc(var(--w) * -.009); top: 27%; height: 7.6%; }
.dev-phone > .bt.c { left: calc(var(--w) * -.009); top: 36.5%; height: 7.6%; } .dev-phone > .bt.d { right: calc(var(--w) * -.009); top: 30%; height: 11.5%; }
.soft .dev-phone, .dev-phone.soft { box-shadow: calc(var(--w) * -.05) calc(var(--w) * .1) calc(var(--w) * .2) var(--hw-shadow-soft); }

.dev-laptop { --w: 1200px; width: var(--w); height: calc(var(--w) * .592); }
.dev-laptop > .lid { position: absolute; left: 8.4%; right: 8.4%; top: 0; height: calc(var(--w) * .558); border-radius: calc(var(--w) * .017) calc(var(--w) * .017) calc(var(--w) * .004) calc(var(--w) * .004);
  background: var(--hw-black); box-shadow: inset 0 0 0 calc(var(--w) * .0016) var(--hw-edge-2); }
.dev-laptop > .lid > .scr { position: absolute; left: 1.5%; right: 1.5%; top: 2.7%; bottom: 3.4%; border-radius: calc(var(--w) * .005); overflow: hidden; container-type: size; background: var(--hw-ink) center / cover no-repeat; }
.dev-laptop > .lid > .cam { position: absolute; left: 50%; top: 0; width: 9.4%; height: 3.1%; margin-left: -4.7%; border-radius: 0 0 calc(var(--w) * .006) calc(var(--w) * .006); background: var(--hw-black); z-index: 3; }
.dev-laptop > .lid > .gl { position: absolute; left: 1.5%; right: 1.5%; top: 2.7%; bottom: 3.4%; z-index: 2; pointer-events: none; background: linear-gradient(112deg, var(--hw-glare) 0, transparent 30.2%); }
.dev-laptop > .base { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--w) * .034); border-radius: calc(var(--w) * .003) calc(var(--w) * .003) calc(var(--w) * .022) calc(var(--w) * .022);
  background: linear-gradient(180deg, var(--hw-alu-1) 0, var(--hw-alu-2) 22%, var(--hw-alu-3) 58%, var(--hw-alu-4) 100%); }
.dev-laptop > .base::before { content: ""; position: absolute; left: 50%; top: 0; width: 15%; height: 36%; margin-left: -7.5%; border-radius: 0 0 calc(var(--w) * .008) calc(var(--w) * .008); background: linear-gradient(180deg, var(--hw-alu-4), var(--hw-alu-3)); }
.dev-laptop > .sh { position: absolute; left: 3%; right: 3%; top: 97.5%; height: 9%; border-radius: 50%; background: var(--hw-shadow); filter: blur(calc(var(--w) * .016)); z-index: -1; }
.dev-laptop.is-dark > .base { background: linear-gradient(180deg, var(--hw-edge-1) 0, var(--hw-edge-2) 30%, var(--hw-black) 100%); }
.dev-laptop.is-dark > .base::before { background: linear-gradient(180deg, var(--hw-black), var(--hw-edge-2)); }
.soft .dev-laptop > .sh, .dev-laptop.soft > .sh { background: var(--hw-shadow-soft); }

.dev-monitor { border-radius: 24px; background: var(--hw-black); box-shadow: 0 60px 110px var(--hw-shadow-soft), inset 0 0 0 2px var(--hw-edge-2); }
.dev-monitor > .scr { position: absolute; inset: 16px; border-radius: 10px; overflow: hidden; container-type: size; background: var(--hw-ink) center / cover no-repeat; }
.dev-stand { position: absolute; background: linear-gradient(180deg, var(--hw-alu-3) 0, var(--hw-alu-1) 40%, var(--hw-alu-2) 100%); border-radius: 0 0 6px 6px; }
.dev-stand::after { content: ""; position: absolute; left: -46%; right: -46%; top: 100%; height: 12px; border-radius: 4px; background: linear-gradient(180deg, var(--hw-alu-1), var(--hw-alu-3)); }

/* edge glow (Luminous Minimalism): the shape + three copies behind it without offset — blur 10/0 100 %, 36/8 78 %, 130/32 60 % */
.glow-edge { --glow: var(--base-50); }
.glow-edge.warm { --glow: var(--brand-300); }
.glow-edge::before { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1;
  box-shadow: 0 0 10px 0 var(--glow), 0 0 36px 8px color-mix(in srgb, var(--glow) 78%, transparent), 0 0 130px 32px color-mix(in srgb, var(--glow) 60%, transparent); }

/* ---------- SAMPLE SCREENS — injected by deck.js into .scr; sized in container units, they scale with the device.
   Each screen carries its own theme (data-theme) and paints with roles: the product follows the brand. ---------- */
.sc { position: absolute; inset: 0; overflow: hidden; font-family: var(--font-base); line-height: 1.2; background: var(--bg-page); color: var(--text-primary); }
.sc small { display: block; font-size: 3.5cqw; color: var(--text-secondary); letter-spacing: .01em; }
.sc .bar { display: block; height: 1.9cqw; border-radius: 1cqw; background: var(--bg-surface-2); margin-top: 2.3cqw; }
.sc .bar.s { width: 62%; } .sc .bar.hl { background: var(--accent-primary); width: 74%; }
.sc-status { position: absolute; left: 8cqw; right: 8cqw; top: 5.6cqw; display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: 4cqw; z-index: 4; }
.sc-status i { width: 7cqw; height: 3.4cqw; border-radius: 1cqw; border: .4cqw solid currentColor; position: relative; }
.sc-status i::after { content: ""; position: absolute; inset: .5cqw; right: 1.6cqw; border-radius: .4cqw; background: currentColor; }
.sc-pad { position: absolute; left: 6.5cqw; right: 6.5cqw; top: 19cqw; bottom: 24cqw; }
.sc h5 { margin: 1.5cqw 0 5cqw; font-weight: 500; font-size: 10.6cqw; line-height: .98; letter-spacing: -.03em; }
.sc .acc { font-family: var(--font-accent); font-weight: var(--font-accent-weight); font-style: var(--font-accent-style); letter-spacing: 0; font-size: 13cqw; line-height: .93; }
.sc-fig { position: relative; height: 50cqw; border-radius: 5cqw; overflow: hidden; }
.sc-fig em { position: absolute; left: 4cqw; bottom: 3cqw; font-style: normal; font-weight: 500; font-size: 9cqw; letter-spacing: -.03em; z-index: 3; color: var(--base-50); }
.sc-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 3cqw; margin-top: 3cqw; }
.sc-2 > div { border-radius: 5cqw; padding: 4cqw; background: var(--bg-surface); height: 30cqw; display: flex; flex-direction: column; justify-content: space-between; }
.sc-2 > div.hot { background: var(--bg-accent); color: var(--text-on-accent); }
.sc-2 > div.hot small { color: var(--text-on-accent); }
.sc-2 b { font-weight: 400; font-size: 11cqw; line-height: .9; letter-spacing: -.04em; }
.sc-tab { position: absolute; left: 6.5cqw; right: 6.5cqw; bottom: 6cqw; height: 14cqw; border-radius: 7cqw; background: var(--bg-surface); display: flex; align-items: center; justify-content: space-around; }
.sc-tab i { width: 6cqw; height: 6cqw; border-radius: 50%; background: var(--line-graphic); } .sc-tab i.on { background: var(--accent-primary); }
.sc-q { margin: 4cqw 0 0 18%; padding: 3.6cqw 4.4cqw; border-radius: 5cqw 5cqw 1.4cqw 5cqw; background: var(--bg-inverse); color: var(--bg-page); font-size: 4.3cqw; line-height: 1.25; }
.sc-a { margin-top: 4cqw; padding: 4.6cqw; border-radius: 5cqw; background: var(--bg-surface); }
.sc-a b { display: block; font-weight: 500; font-size: 6.4cqw; line-height: 1.05; letter-spacing: -.02em; margin-bottom: 1cqw; }
.sc-a u { display: inline-block; margin-top: 4cqw; text-decoration: none; font-size: 3.4cqw; padding: 1cqw 2.6cqw; border-radius: 9cqw; background: var(--bg-surface-2); }
.sc-chips { display: flex; flex-wrap: wrap; gap: 2cqw; margin-top: 4cqw; }
.sc-chips i { font-style: normal; font-size: 3.6cqw; padding: 2cqw 3.4cqw; border-radius: 9cqw; background: var(--accent-primary); color: var(--text-on-accent); }
.sc-input { position: absolute; left: 6.5cqw; right: 6.5cqw; bottom: 6cqw; height: 14cqw; border-radius: 7cqw; background: var(--bg-surface); display: flex; align-items: center; justify-content: space-between; padding: 0 2.4cqw 0 5cqw; font-size: 4cqw; }
.sc-input span { color: var(--text-secondary); } .sc-input i { width: 9.4cqw; height: 9.4cqw; border-radius: 50%; background: var(--accent-primary); }
.sc-sheet { position: absolute; left: 3cqw; right: 3cqw; bottom: 3cqw; border-radius: 8cqw; padding: 6cqw 6cqw 7cqw; background: var(--bg-page); z-index: 3; }
.sc-sheet h6 { margin: 1cqw 0 3cqw; font-weight: 500; font-size: 7.4cqw; line-height: 1; letter-spacing: -.025em; }
.sc-sheet .row { display: grid; grid-template-columns: 5cqw 1fr auto; gap: 3cqw; align-items: center; padding: 2.6cqw 0; font-size: 4.3cqw; }
.sc-sheet .row i { width: 3.4cqw; height: 3.4cqw; border-radius: 50%; background: var(--heat-6); } .sc-sheet .row:nth-of-type(2) i { background: var(--heat-4); } .sc-sheet .row:nth-of-type(3) i { background: var(--heat-2); }
.sc-sheet .row b { font-weight: 500; }
.sc-player { position: absolute; left: 6.5cqw; right: 6.5cqw; bottom: 8cqw; z-index: 3; }
.sc-prog { height: 1.4cqw; border-radius: 1cqw; background: var(--bg-surface-2); margin: 6cqw 0 5cqw; position: relative; }
.sc-prog i { position: absolute; left: 0; top: 0; bottom: 0; width: 38%; border-radius: 1cqw; background: var(--accent-primary); }
.sc-ctrl { display: flex; justify-content: center; align-items: center; gap: 7cqw; }
.sc-ctrl i { width: 10cqw; height: 10cqw; border-radius: 50%; background: var(--bg-surface-2); } .sc-ctrl i.on { width: 16cqw; height: 16cqw; background: var(--text-primary); }
.sc-hero { position: absolute; left: 8cqw; right: 8cqw; bottom: 30cqw; z-index: 3; }
.sc-btn { position: absolute; left: 6.5cqw; right: 6.5cqw; bottom: 8cqw; height: 14cqw; border-radius: 7cqw; background: var(--bg-inverse); color: var(--bg-page); display: grid; place-items: center; font-size: 4.4cqw; font-weight: 500; z-index: 3; }
/* desktop screens: type sized from the much wider container */
.sc-d small { font-size: 1.15cqw; } .sc-d .bar { height: .7cqw; border-radius: .4cqw; margin-top: .9cqw; }
.sc-side { position: absolute; left: 0; top: 0; bottom: 0; width: 5.2cqw; background: var(--bg-surface); display: flex; flex-direction: column; align-items: center; gap: 1.5cqw; padding-top: 1.6cqw; }
.sc-side b { font: italic 900 2.6cqw/1 'Ayer Poster Cursive', serif; margin-bottom: 1.4cqw; }
.sc-side i { width: 2.2cqw; height: 2.2cqw; border-radius: .7cqw; background: var(--bg-surface-2); } .sc-side i.on { background: var(--accent-primary); }
.sc-main { position: absolute; left: 5.2cqw; right: 0; top: 0; bottom: 0; padding: 1.8cqw 2cqw 2cqw; display: flex; flex-direction: column; gap: 1.5cqw; }
.sc-head { display: flex; align-items: center; gap: 1cqw; } .sc-head h5 { margin: 0 auto 0 0; font-size: 2.5cqw; letter-spacing: -.02em; line-height: 1; }
.sc .pl { font-size: 1.1cqw; padding: .55cqw 1.2cqw; border-radius: 9cqw; background: var(--bg-surface-2); } .sc .pl.on { background: var(--bg-inverse); color: var(--bg-page); }
.sc-grid { flex: 1; display: grid; grid-template-columns: 1.25fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 1cqw; min-height: 0; }
.sc-grid .t { position: relative; border-radius: 1.1cqw; overflow: hidden; background: var(--bg-surface); padding: 1.5cqw; display: flex; flex-direction: column; justify-content: flex-end; }
.sc-grid .t.big { grid-row: span 2; } .sc-grid .t.big em { position: relative; z-index: 3; font-style: normal; font-weight: 500; font-size: 2.7cqw; line-height: 1; letter-spacing: -.025em; color: var(--base-50); }
.sc-grid .t.hot { background: var(--bg-accent); color: var(--text-on-accent); justify-content: space-between; } .sc-grid .t.hot small { color: var(--text-on-accent); }
.sc-grid .t.hot b { font-weight: 400; font-size: 7cqw; line-height: .86; letter-spacing: -.04em; }
.sc-grid .t.blk { background: var(--base-950); padding: 0; }
.sc-mini { display: flex; align-items: flex-end; gap: .8cqw; height: 70%; } .sc-mini i { flex: 1; border-radius: 9cqw; background: var(--bg-surface-2); } .sc-mini i.on { background: var(--accent-primary); }
.sc-nav { position: absolute; left: 2.4cqw; right: 2.4cqw; top: 1.6cqw; display: flex; align-items: center; gap: 2cqw; font-size: 1.2cqw; z-index: 3; }
.sc-nav b { font-weight: 600; font-size: 1.5cqw; margin-right: auto; }
.sc-art { position: absolute; left: 2.4cqw; top: 8cqw; width: 56%; }
.sc-art h4 { margin: .8cqw 0 2cqw; font-weight: 500; font-size: 6.2cqw; line-height: .94; letter-spacing: -.035em; }
.sc-art p { margin: 0 0 1.6cqw; width: 86%; }
.sc-panel { position: absolute; right: 2cqw; top: 6.6cqw; bottom: 2cqw; width: 33%; border-radius: 1.4cqw; background: var(--bg-inverse); color: var(--bg-page); padding: 1.6cqw; }
.sc-panel small { color: var(--bg-surface-2); }
.sc-panel .q { margin: 1.2cqw 0 0 16%; padding: 1cqw 1.3cqw; border-radius: 1.3cqw 1.3cqw .4cqw 1.3cqw; background: var(--text-secondary); color: var(--bg-page); font-size: 1.25cqw; line-height: 1.25; }
.sc-panel .a { margin-top: 1.2cqw; padding: 1.4cqw; border-radius: 1.3cqw; background: var(--bg-page); color: var(--text-primary); } .sc-panel .a b { display: block; font-weight: 500; font-size: 1.9cqw; line-height: 1.05; letter-spacing: -.02em; }
.sc-panel .in { position: absolute; left: 1.6cqw; right: 1.6cqw; bottom: 1.6cqw; height: 3.6cqw; border-radius: 9cqw; background: var(--text-primary); display: flex; align-items: center; justify-content: space-between; padding: 0 .6cqw 0 1.4cqw; font-size: 1.15cqw; color: var(--bg-surface-2); }
.sc-panel .in i { width: 2.5cqw; height: 2.5cqw; border-radius: 50%; background: var(--accent-primary); }
.sc-over { position: absolute; left: 2cqw; top: 6.4cqw; width: 27%; border-radius: 1.4cqw; background: var(--bg-page); padding: 1.6cqw; z-index: 3; }
.sc-over h5 { margin: .6cqw 0 1.4cqw; font-size: 2.7cqw; line-height: .98; letter-spacing: -.025em; }
.sc-over .row { display: grid; grid-template-columns: 1.4cqw 1fr auto; gap: .9cqw; align-items: center; padding: .8cqw 0; font-size: 1.2cqw; }
.sc-over .row i { width: 1cqw; height: 1cqw; border-radius: 50%; background: var(--heat-6); } .sc-over .row:nth-of-type(2) i { background: var(--heat-4); } .sc-over .row:nth-of-type(3) i { background: var(--heat-2); }
.sc .g-host { position: absolute; inset: 0; } .sc .g-host > canvas, .sc .g-host > svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---------- MODES: present (one slide fits the window) · all (every master with its name) · print ---------- */
body.present { overflow: hidden; height: 100vh; display: grid; place-items: center; background: var(--base-950); }
body.present .slide { display: none; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(var(--s, 1)); }
body.present .slide.active { display: block; }
body.all { padding: 80px 0 120px; }
body.all .deck { display: flex; flex-direction: column; align-items: center; gap: 24px; }
body.all .slide-wrap { width: calc(1920px * var(--z, .5)); height: calc(1080px * var(--z, .5)); position: relative; }
body.all .slide-wrap > .slide { position: absolute; left: 0; top: 0; transform: scale(var(--z, .5)); transform-origin: 0 0; cursor: pointer; }
body.all .mcap { width: calc(1920px * var(--z, .5)); margin-top: 32px; display: flex; gap: 12px; align-items: baseline;
  font: 500 15px/20px var(--font-base); color: var(--base-50); }
body.all .mcap b, body.all .mcap i { flex: none; }
body.all .mcap b { font-weight: 700; } body.all .mcap i { font-style: normal; color: var(--base-300); }
body.all .mcap span { color: var(--base-300); font-weight: 400; }
.bar-ui { position: fixed; left: 0; right: 0; top: 0; z-index: 100; height: 56px; display: flex; align-items: center; gap: 20px; padding: 0 20px;
  background: var(--base-950); color: var(--base-50); font: 500 14px/1 'Struve', sans-serif; white-space: nowrap; overflow-x: auto; }
.bar-ui b { font-weight: 700; margin-right: auto; flex: none; } .bar-ui .grp { display: flex; gap: 6px; align-items: center; flex: none; } .bar-ui .grp > span { color: var(--base-400); margin-right: 4px; }
.bar-ui a { color: var(--base-50); text-decoration: none; padding: 8px 12px; border-radius: 16px; background: var(--base-800); }
.bar-ui a.on { background: var(--brand-500); color: var(--base-950); }
@media print {
  @page { size: 1920px 1080px; margin: 0; }
  html, body { background: none !important; }
  body.all, body.present { padding: 0; display: block; height: auto; overflow: visible; }
  .bar-ui, body.all .mcap { display: none !important; }
  body.all .deck { display: block; gap: 0; }
  body.all .slide-wrap, body.present .slide-wrap { width: 1920px; height: 1080px; break-after: page; }
  body.all .slide-wrap > .slide, body.present .slide { display: block !important; position: relative; transform: none !important; left: 0; top: 0; }
}