/* MD Editor website.
 *
 * The build target is the owner's approved full-page draft A2 (_design/drafts/2026-11-06-website/
 * edit-20261106-162902-f656e8-A2-paper-interactive.png, 1024 x 3072). Sizes are A2's, measured in the
 * 1024 px wide draft, in --u: one draft pixel. --u grows with the window up to 1440 px wide (1.40625 px)
 * and stops there, so from 960 px to 1440 px the page is the draft, scaled. Below 960 px the page stacks
 * and --u is one pixel.
 *
 * Colours: the draft's warm gray desk and near-white bands in light; in dark, the app's dark window
 * (Resources/preview.css .md-app: backdrop #0f1113, page #17191c) and privacy.html's text colours. The
 * editor colours are the Windows editor's (desktop/src/renderer/editor/theme.ts). System fonts only, with each
 * language's own CJK faces named so the right glyphs are drawn (the pages carry <html lang>).
 *
 * The demo window wears the chrome of the visitor's system (site.js): Windows (the default, also without script),
 * the Mac window of the approved Apple design (draft C), the iOS top bar (iPhone, or the iPad's wider bar) or the
 * Android app bar, each copied from the apps' own screenshots.
 */

:root {
  color-scheme: light dark;
  --u: min(calc(100vw / 1024), 1.40625px);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  --mono: "Cascadia Mono", Consolas, "SF Mono", Menlo, ui-monospace, monospace;

  --desk: #F6F5F4;
  --band: #FCFCFB;
  --card: #FCFCFB;
  --card-line: #E9EBEE;
  --sheet: #FFFFFF;
  --page: #FDFDFC;
  --line: #E3E6EA;
  --ink: #0E151B;
  --text: #1C1F23;
  --muted: #535B67;
  --dim: #5F6873;
  --green: #34C06F;
  --green-deep: #1F9D59;
  --green-text: #157A45;
  --button: #16804A;
  --button-hover: #126B3E;
  --button-text: #FFFFFF;
  --tint: #EAF8F0;
  --pill: #C9F0D9;
  --pill-text: #0D5530;
  --focus: #1F9D59;
  --faq-q: #3D4550;
  --quote-bg: #E9F8F0;
  --quote-line: #C7ECD6;
  --quote-text: #1F6B45;
  --paper-shadow: 0 1px 2px rgba(20, 24, 28, .06), 0 10px 28px rgba(20, 24, 28, .09), 0 26px 50px rgba(20, 24, 28, .06);
  --window-shadow: 0 1px 2px rgba(20, 24, 28, .07), 0 12px 34px rgba(20, 24, 28, .11);
  --soft-shadow: 0 1px 2px rgba(20, 24, 28, .05);

  /* The Windows editor (theme.ts LIGHT) */
  --ed-bg: #FFFFFF;
  --ed-text: #2F3640;
  --ed-heading: #16804A;
  --ed-strong: #16191D;
  --ed-em: #6B5BB8;
  --ed-marker: #8A929C;
  --ed-link: #16804A;
  --ed-code: #0B7A43;
  --ed-quote: #1F6B45;
  --ed-table: #3A4250;
  --ed-mark-text: #5C4100;
  --ed-mark-bg: rgba(255, 211, 61, .32);
  --ed-sup: #157A45;
  --ed-dim: #5F6873;
  --ed-caret: #34C06F;
  --ed-selection: rgba(52, 192, 111, .28);

  /* The Windows window around the editor (the Store screenshots) */
  --win-title: #F3F3F3;
  --win-menu: #FFFFFF;
  --win-tools: #F6F7F9;
  --win-track: #ECEEF1;
  --win-pick: #FFFFFF;
  --win-pick-text: #157A45;
  --win-text: #1C1F23;
  --win-line: #E3E6EA;
  --win-split: #157A45;
}

@media (prefers-color-scheme: dark) {
  :root {
    --desk: #0F1113;
    --band: #17191C;
    --card: #17191C;
    --card-line: rgba(255, 255, 255, .09);
    --sheet: #17191C;
    --page: #17191C;
    --line: #2A323C;
    --ink: #E9EEF4;
    --text: #D5DBE2;
    --muted: #AEB7C2;
    --dim: #8B949E;
    --green: #46D384;
    --green-deep: #46D384;
    --green-text: #5FD998;
    --button: #5FD998;
    --button-hover: #7FE0A8;
    --button-text: #0D1117;
    --tint: rgba(70, 211, 132, .12);
    --pill: rgba(70, 211, 132, .17);
    --pill-text: #7FE0A8;
    --focus: #5FD998;
    --faq-q: #D5DBE2;
    --quote-bg: rgba(52, 192, 111, .10);
    --quote-line: rgba(52, 192, 111, .28);
    --quote-text: #7FE0A8;
    --paper-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 14px 36px rgba(0, 0, 0, .5);
    --window-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 14px 40px rgba(0, 0, 0, .55);
    --soft-shadow: none;

    --ed-bg: #0D1117;
    --ed-text: #C9D1D9;
    --ed-heading: #46D384;
    --ed-strong: #F0F3F6;
    --ed-em: #A898E8;
    --ed-marker: #6E7781;
    --ed-link: #46D384;
    --ed-code: #5FD998;
    --ed-quote: #7FE0A8;
    --ed-table: #AEB7C2;
    --ed-mark-text: #F2CC60;
    --ed-sup: #5FD998;
    --ed-dim: #8B949E;
    --ed-selection: rgba(70, 211, 132, .30);

    --win-title: #202020;
    --win-menu: #1F1F1F;
    --win-tools: #161B22;
    --win-track: #10151B;
    --win-pick: #1F2630;
    --win-pick-text: #5FD998;
    --win-text: #E9EEF4;
    --win-line: #2A323C;
    --win-split: #46D384;
  }
}

/* Each language names its own system faces (no web fonts). -apple-system draws Latin and Cyrillic on Apple
   systems and hands CJK to the face named next; on Windows Segoe UI does the same. Code and the demo's source keep
   their monospaced faces and name the language's sans-serif for CJK (Windows' CJK monospace fallback is a serif). */
:root:lang(ko) {
  --font: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Segoe UI", "Malgun Gothic", "Noto Sans KR", "Noto Sans CJK KR", system-ui, sans-serif;
  --mono: "Cascadia Mono", Consolas, "SF Mono", Menlo, ui-monospace, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans Mono CJK KR", monospace;
}
:root:lang(ja) {
  --font: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Segoe UI", "Yu Gothic UI", Meiryo, "Noto Sans JP", "Noto Sans CJK JP", system-ui, sans-serif;
  --mono: "Cascadia Mono", Consolas, "SF Mono", Menlo, ui-monospace, "Hiragino Sans", "Yu Gothic UI", Meiryo, "Noto Sans Mono CJK JP", monospace;
}
:root:lang(zh-Hans) {
  --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Segoe UI", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC", system-ui, sans-serif;
  --mono: "Cascadia Mono", Consolas, "SF Mono", Menlo, ui-monospace, "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans Mono CJK SC", monospace;
}
:root:lang(zh-Hant) {
  --font: -apple-system, BlinkMacSystemFont, "PingFang TC", "Segoe UI", "Microsoft JhengHei UI", "Microsoft JhengHei", "Noto Sans TC", "Noto Sans CJK TC", system-ui, sans-serif;
  --mono: "Cascadia Mono", Consolas, "SF Mono", Menlo, ui-monospace, "PingFang TC", "Microsoft JhengHei UI", "Microsoft JhengHei", "Noto Sans Mono CJK TC", monospace;
}
/* Korean breaks between words, as Korean is set; Japanese keeps small kana and closing marks off a line's start. */
:root:lang(ko) body { word-break: keep-all; overflow-wrap: break-word; }
:root:lang(ja) body { line-break: strict; }
/* The headings' tight tracking is for Latin letters; CJK glyphs need their own space. */
:root:is(:lang(ja), :lang(zh)) :is(h1, h2, h3, .brand, .doc-h1, .doc-h2, .soon-name) { letter-spacing: 0; }
:root:lang(ko) :is(h1, h2, h3, .doc-h1, .doc-h2) { letter-spacing: -.012em; }

/* ---- Scroll bars in the brand colours -------------------------------------------------------------- */

:root {
  --sb-thumb: rgba(31, 157, 89, .5);
  --sb-hover: #34C06F;
  --sb-active: #1F9D59;
  --sb-track: transparent;
  --sb-page-track: #EFEEEC;
}
@media (prefers-color-scheme: dark) {
  :root {
    --sb-thumb: rgba(70, 211, 132, .42);
    --sb-hover: #46D384;
    --sb-active: #5FD998;
    --sb-page-track: #15171A;
  }
}
/* Chromium and Firefox: scrollbar-color, inherited by every scroll box on the page. */
:root { scrollbar-color: var(--sb-thumb) var(--sb-page-track); }
.pane-source { scrollbar-width: thin; scrollbar-color: var(--sb-thumb) var(--sb-track); }
.pane-source:hover { scrollbar-color: var(--sb-hover) var(--sb-track); }
/* WebKit (Safari) understands scrollbar-color too, and then ignores the pseudo-elements below and draws its own
   overlay scroll bars. It is switched off there so the pseudo-elements draw the bars in the brand colours, with a
   hover state. `font: -apple-system-body` is a WebKit feature; Chromium and Firefox do not have it. */
@supports (font: -apple-system-body) {
  :root, .pane-source, .pane-source:hover { scrollbar-color: auto; scrollbar-width: auto; }
}
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--sb-track); }
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb {
  min-height: 36px; border: 3px solid transparent; border-radius: 999px; background: var(--sb-thumb) padding-box;
}
::-webkit-scrollbar-thumb:hover { border-width: 2px; background-color: var(--sb-hover); }
::-webkit-scrollbar-thumb:active { border-width: 2px; background-color: var(--sb-active); }
html::-webkit-scrollbar-track { background: var(--sb-page-track); }

/* ---- Base ------------------------------------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--desk); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--desk); color: var(--text); font-family: var(--font); line-height: 1.5;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip;
}
h1, h2, h3, p, ul, ol, pre, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--green-text); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
[id] { scroll-margin-top: 16px; }

.skip {
  position: absolute; left: 12px; top: -80px; z-index: 10; padding: 10px 16px; border-radius: 8px;
  background: var(--ink); color: var(--desk); font-weight: 600; text-decoration: none;
}
.skip:focus { top: 12px; }

.wrap { width: calc(964 * var(--u)); margin-inline: auto; }

h2 {
  font-size: calc(38 * var(--u)); line-height: 1.06; font-weight: 800; letter-spacing: -.032em; color: var(--ink);
  text-wrap: balance;
}
.lead { font-size: calc(16.5 * var(--u)); line-height: 1.6; color: var(--muted); }

/* Icons: the draft's line icons in a pale green disc. */
.i { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.i .fill { fill: currentColor; stroke: none; }
.icon {
  display: grid; place-items: center; flex: none; width: calc(68 * var(--u)); height: calc(68 * var(--u));
  border-radius: 50%; background: var(--tint); color: var(--green-deep);
}
.icon .i { width: calc(38 * var(--u)); height: calc(38 * var(--u)); }

/* ---- Navigation ------------------------------------------------------------------------------------ */

.nav-in {
  display: flex; align-items: center; justify-content: space-between; height: calc(85 * var(--u));
  padding: 0 calc(36 * var(--u)) 0 calc(37 * var(--u));
}
.brand {
  display: inline-flex; align-items: center; gap: calc(13 * var(--u)); color: var(--ink); text-decoration: none;
  font-size: calc(21 * var(--u)); font-weight: 700; letter-spacing: -.015em; border-radius: 8px;
}
.brand img {
  width: calc(41 * var(--u)); height: calc(41 * var(--u)); border-radius: calc(9 * var(--u)); background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 3px 10px rgba(0, 0, 0, .07);
}
.brand span { white-space: nowrap; }
.nav-links { display: flex; align-items: center; gap: calc(42 * var(--u)); }
.nav-links a { color: var(--muted); text-decoration: none; font-size: calc(15 * var(--u)); border-radius: 6px; white-space: nowrap; }
.nav-links a:hover { color: var(--ink); }
.button {
  display: inline-flex; align-items: center; justify-content: center; height: calc(41 * var(--u));
  padding: 0 calc(26 * var(--u)); border-radius: calc(12 * var(--u)); background: var(--button);
  color: var(--button-text) !important; font-size: calc(15.5 * var(--u)) !important; font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}
.button:hover { background: var(--button-hover); }

/* ---- Hero ------------------------------------------------------------------------------------------ */

.hero-in { position: relative; height: calc(560 * var(--u)); }
.hero-copy { position: absolute; left: calc(37 * var(--u)); top: calc(77 * var(--u)); width: calc(400 * var(--u)); z-index: 1; }
.hero h1 {
  font-size: calc(56 * var(--u)); line-height: 1.02; font-weight: 800; letter-spacing: -.034em; color: var(--ink);
}
.hero h1 span { display: block; white-space: nowrap; }
.promise { max-width: calc(384 * var(--u)); margin-top: calc(23 * var(--u)); font-size: calc(17.3 * var(--u)); line-height: calc(28.5 * var(--u)); color: var(--muted); }
.promise-first { display: block; }
.trust { margin-top: calc(26 * var(--u)); font-size: calc(16 * var(--u)); color: var(--muted); }

/* The two sheets: raw Markdown tucked behind the rendered page, as on the Play feature graphic. */
.hero-art { position: absolute; inset: 0; pointer-events: none; }
.paper { position: absolute; border-radius: calc(5 * var(--u)); box-shadow: var(--paper-shadow); overflow: hidden; }
.paper-in { width: 100%; height: 100%; }
.paper--raw {
  left: calc(456 * var(--u)); top: calc(21 * var(--u)); width: calc(207 * var(--u)); height: calc(448 * var(--u));
  rotate: -6deg; background: var(--ed-bg);
}
.paper--sheet {
  left: calc(631 * var(--u)); top: calc(6 * var(--u)); width: calc(318 * var(--u)); height: calc(549 * var(--u));
  rotate: 3.6deg; background: var(--page);
}
.src-text {
  padding: calc(20 * var(--u)) calc(16 * var(--u)) calc(20 * var(--u)) calc(20 * var(--u));
  font: calc(10.6 * var(--u)) / 1.52 var(--mono); color: var(--ed-text); white-space: pre-wrap; overflow-wrap: anywhere;
  width: calc(206 * var(--u));
}
.doc { padding: calc(40 * var(--u)) calc(45 * var(--u)) 0 calc(26 * var(--u)); font-size: calc(13.6 * var(--u)); line-height: 1.6; color: var(--text); }
.doc p { margin: calc(8 * var(--u)) 0; }
.doc b { color: var(--ink); }
.doc-h1 { font-size: calc(27 * var(--u)) !important; font-weight: 800; line-height: 1.2; letter-spacing: -.025em; color: var(--ink); margin: 0 0 calc(12 * var(--u)) !important; }
.doc-h2 { font-size: calc(19 * var(--u)); font-weight: 800; letter-spacing: -.015em; color: var(--ink); margin-top: calc(16 * var(--u)) !important; }
.doc ul, .doc ol { margin: calc(12 * var(--u)) 0 calc(14 * var(--u)); padding-left: calc(12 * var(--u)); }
.doc li { margin: calc(3 * var(--u)) 0; }
.doc ul li { position: relative; }
.doc ul li::before {
  content: ""; position: absolute; left: calc(-12 * var(--u)); top: calc(.8em - 3 * var(--u));
  width: calc(6 * var(--u)); height: calc(6 * var(--u)); border-radius: 50%; background: var(--green-deep);
}
.doc ol { list-style: decimal; padding-left: calc(17 * var(--u)); }
.doc ol li::marker { color: var(--green-deep); }
.doc-link { color: var(--green-text); border-bottom: 1px solid color-mix(in srgb, var(--green-text) 35%, transparent); }
.doc-quote {
  margin: calc(14 * var(--u)) 0 !important; padding: calc(9 * var(--u)) calc(12 * var(--u)); border: 1px solid var(--quote-line);
  border-radius: calc(7 * var(--u)); background: var(--quote-bg); color: var(--quote-text);
}
.doc-table { display: grid; grid-template-columns: 1fr 1fr; margin-top: calc(16 * var(--u)); font-size: calc(11.5 * var(--u)); }
.doc-table span { padding: calc(5 * var(--u)) calc(8 * var(--u)); border-bottom: 1px solid var(--line); }
.doc-table span:nth-child(-n + 2) { font-weight: 650; color: var(--ink); border-top: 1px solid var(--line); }

/* ---- Store badges and "coming" labels (site/tools/links.mjs writes the items) --------------------- */

.stores { display: flex; gap: calc(14 * var(--u)); }
.stores--hero { display: grid; grid-template-columns: repeat(2, calc(186 * var(--u))); gap: calc(13 * var(--u)) calc(14 * var(--u)); margin-top: calc(19 * var(--u)); }
.store { display: flex; }
.stores--hero .store, .stores--hero .soon { width: 100%; }
.soon {
  display: inline-flex; align-items: center; gap: calc(11 * var(--u)); height: calc(58 * var(--u)); min-width: calc(186 * var(--u));
  padding: 0 calc(16 * var(--u)) 0 calc(15 * var(--u)); border: 1px solid var(--card-line); border-radius: calc(11 * var(--u));
  background: var(--sheet); color: var(--ink); box-shadow: var(--soft-shadow);
}
.soon-icon { flex: none; width: calc(22 * var(--u)); height: calc(22 * var(--u)); fill: none; stroke: var(--green-deep); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.soon-text { display: flex; flex-direction: column; text-align: left; line-height: 1.2; }
.soon-lead { font-size: calc(12 * var(--u)); color: var(--muted); }
.soon-name { font-size: calc(17 * var(--u)); font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.badge { display: inline-flex; border-radius: calc(8 * var(--u)); }
.badge img { width: auto; height: calc(50 * var(--u)); }
.stores--card { flex-direction: column; align-items: center; align-self: center; gap: calc(12 * var(--u)); margin-top: calc(14 * var(--u)); }
.stores--card .badge img { height: calc(48 * var(--u)); }
.stores--row { justify-content: center; flex-wrap: wrap; gap: calc(16 * var(--u)); margin-top: calc(17 * var(--u)); }
.stores--row .soon { height: calc(54 * var(--u)); min-width: calc(178 * var(--u)); }
.stores--row .badge img { height: calc(48 * var(--u)); }

/* ---- Bands ----------------------------------------------------------------------------------------- */

.band { width: calc(964 * var(--u)); margin: calc(17 * var(--u)) auto 0; background: var(--band); border-radius: calc(14 * var(--u)); }
.band-in { padding: calc(22 * var(--u)) calc(37 * var(--u)) calc(30 * var(--u)); }

/* Markdown that's a pleasure to read: the live demo */
.band--demo { margin-top: 0; }
.band--demo .band-in { text-align: center; padding-top: calc(28 * var(--u)); padding-bottom: calc(22 * var(--u)); }
.band--demo .lead { max-width: calc(600 * var(--u)); margin: calc(12 * var(--u)) auto 0; }
.pill {
  display: inline-block; margin-top: calc(20 * var(--u)); padding: calc(7 * var(--u)) calc(24 * var(--u));
  border-radius: 999px; background: var(--pill); color: var(--pill-text); font-size: calc(16 * var(--u)); font-weight: 600; letter-spacing: -.005em;
}
html:not(.js) .pill { display: none; }
.window {
  width: calc(669 * var(--u)); margin: calc(8 * var(--u)) auto 0; text-align: left; overflow: hidden;
  border-radius: calc(8 * var(--u)); background: var(--ed-bg); box-shadow: var(--window-shadow);
  outline: 1px solid rgba(0, 0, 0, .07); outline-offset: -1px; color: var(--win-text);
}
.win-title { display: flex; align-items: center; height: calc(30 * var(--u)); padding-left: calc(10 * var(--u)); background: var(--win-title); font-size: calc(12.5 * var(--u)); }
.win-icon { margin-right: calc(8 * var(--u)); color: var(--green); font-size: calc(8 * var(--u)); font-weight: 800; letter-spacing: -.02em; }
.win-controls { display: flex; margin-left: auto; height: 100%; }
.win-controls svg { width: calc(44 * var(--u)); height: 100%; fill: none; stroke: currentColor; stroke-width: 1; opacity: .8; }
.win-menu { display: flex; align-items: center; gap: calc(13 * var(--u)); height: calc(25 * var(--u)); padding: 0 calc(10 * var(--u)); background: var(--win-menu); font-size: calc(12.5 * var(--u)); }
.win-tools {
  display: flex; align-items: center; gap: calc(18 * var(--u)); height: calc(36 * var(--u)); padding: 0 calc(8 * var(--u));
  background: var(--win-tools); border-bottom: 1px solid var(--win-line); font-size: calc(12.5 * var(--u));
}
.views { display: flex; padding: calc(3 * var(--u)); border-radius: calc(7 * var(--u)); background: var(--win-track); }
.views button {
  padding: calc(3 * var(--u)) calc(12 * var(--u)); border: 0; border-radius: calc(5 * var(--u)); background: none; cursor: pointer;
  font-size: calc(12.5 * var(--u)); color: var(--win-text);
}
.views button:hover { color: var(--win-pick-text); }
.views button[aria-pressed="true"] { background: var(--win-pick); color: var(--win-pick-text); box-shadow: 0 1px 2px rgba(0, 0, 0, .07); }
.views button:focus-visible { outline-offset: 0; }
html:not(.js) .views { visibility: hidden; }
.win-format { display: inline-flex; align-items: center; gap: calc(5 * var(--u)); }
.win-format svg { width: calc(9 * var(--u)); height: calc(6 * var(--u)); fill: none; stroke: currentColor; stroke-width: 1.4; }

.panes { display: grid; grid-template-columns: 1fr 1fr; height: calc(443 * var(--u)); }
.panes[data-view="editor"], .panes[data-view="preview"], .panes[data-view="write"] { grid-template-columns: 1fr; }
.panes[data-view="editor"] .pane-preview, .panes[data-view="preview"] .pane-source, .panes[data-view="write"] .pane-source { display: none; }
.pane-source {
  position: relative; min-width: 0; overflow: auto; background: var(--ed-bg); color: var(--ed-text);
  font-family: var(--mono); font-size: calc(13.5 * var(--u)); line-height: 1.45;
  border-right: max(2px, calc(2 * var(--u))) solid var(--win-split);
}
.panes[data-view="editor"] .pane-source { border-right: 0; }
.pane-source:focus-within { box-shadow: inset 0 0 0 2px var(--focus); }
.pane-preview { min-width: 0; background: var(--page); }
.pane-preview iframe { display: block; width: 100%; height: 100%; border: 0; background: var(--page); color-scheme: normal; }

.src-stack { position: relative; min-height: 100%; }
.src-layer {
  display: block; width: 100%; margin: 0; border: 0; padding: calc(14 * var(--u)) calc(24 * var(--u)) calc(28 * var(--u));
  font: inherit; line-height: inherit; letter-spacing: 0; color: inherit; background: transparent;
  white-space: pre-wrap; overflow-wrap: anywhere; word-break: normal; tab-size: 4; font-variant-ligatures: none;
}
.src-stack textarea {
  position: absolute; inset: 0; height: 100%; resize: none; overflow: hidden; outline: none; border-radius: 0;
  caret-color: var(--ed-caret);
}
.js .src-stack textarea { color: transparent; -webkit-text-fill-color: transparent; }
html:not(.js) .src-stack textarea { overflow: auto; }
.src-stack textarea::selection { background: var(--ed-selection); }

/* Markdown roles, in the Windows editor's precedence order (theme.ts): a later rule wins where roles nest. */
.t-quote { color: var(--ed-quote); }
.t-table { color: var(--ed-table); }
.t-th { font-weight: 600; }
.t-em { color: var(--ed-em); }
.t-strong { color: var(--ed-strong); font-weight: 700; }
.t-strike { text-decoration: line-through; }
.t-mark { color: var(--ed-mark-text); background: var(--ed-mark-bg); border-radius: 3px; }
.t-sup { color: var(--ed-sup); }
.t-code { color: var(--ed-code); }
.t-link { color: var(--ed-link); }
.t-fn { color: var(--ed-dim); }
.t-html { color: var(--ed-dim); }
.t-marker { color: var(--ed-marker); }
.t-heading { color: var(--ed-heading); font-weight: 700; }
/* One block per source line (site.js), so Split scroll sync can measure where each line is. */
.src-layer .ln { display: block; }

/* ---- The demo window on the visitor's system (site.js sets data-os; Windows without script) ---------- */

.window {
  --doc-dot: #0F9A45;
  --seg-track: #EAEBEF; --seg-text: #56606C; --seg-sep: #D7DAE0; --seg-pick: #FFFFFF; --seg-pick-text: #1F9D59;
  --mac-bar: #F5F6F7; --mac-line: #E2E3E7; --mac-title: #3C434C; --pane-line: #E5E5E5;
  --bar-bg: #FFFFFF; --bar-line: #C6C6C8; --bar-title: #16191D; --bar-icon: #C5C5C7; --bar-icon-strong: #8A8A8E;
  --pill-line: #B8E9CD; --pill-text: #34C06F; --back: #34C06F;
  --menu-bg: rgba(250, 250, 250, .97); --menu-line: rgba(0, 0, 0, .08); --menu-hover: rgba(0, 0, 0, .05);
}
.window[data-os="android"] { --bar-line: #E6E6EB; --bar-icon: #D8D8D9; --pill-line: #85D9A9; --pill-text: #1F9D59; --back: #1F9D59; --doc-dot: #34C06F; }
@media (prefers-color-scheme: dark) {
  .window {
    --doc-dot: #5FD998;
    --seg-track: #0B1015; --seg-text: #8993A0; --seg-sep: #2B2F36; --seg-pick: #22303F; --seg-pick-text: #60D998;
    --mac-bar: #1C1D20; --mac-line: #2A2C31; --mac-title: #D5DBE2; --pane-line: #2A2C31;
    --bar-bg: #000000; --bar-line: #323235; --bar-title: #F0F3F6; --bar-icon: #48484A; --bar-icon-strong: #8A8A8E;
    --pill-line: #124327; --pill-text: #34C06F; --back: #34C06F;
    --menu-bg: rgba(38, 40, 44, .97); --menu-line: rgba(255, 255, 255, .1); --menu-hover: rgba(255, 255, 255, .07);
  }
  .window[data-os="android"] { --bar-bg: #161718; --bar-line: #2B2B2D; --bar-icon: #3D3F42; --pill-line: #2C5A41; --pill-text: #5FD998; --back: #5FD998; --doc-dot: #34C06F; }
}

.doc-title { display: inline-flex; align-items: center; min-width: 0; gap: calc(8 * var(--u)); }
.doc-dot { flex: none; width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-radius: 50%; background: var(--doc-dot); }
.doc-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The Mac and iPad segmented control (the real apps' Write | Source | Split | Preview, without Write: in the demo
   only the Android window writes on the rendered page). */
.seg { display: flex; flex: none; padding: calc(2.5 * var(--u)); border-radius: calc(8 * var(--u)); background: var(--seg-track); }
.seg button {
  position: relative; padding: calc(3.5 * var(--u)) calc(14 * var(--u)); border: 0; border-radius: calc(6 * var(--u));
  background: none; color: var(--seg-text); font-size: calc(12.5 * var(--u)); line-height: 1.3; cursor: pointer; white-space: nowrap;
}
.seg button + button::before { content: ""; position: absolute; left: 0; top: 28%; bottom: 28%; width: 1px; background: var(--seg-sep); }
.seg button[aria-pressed="true"] { background: var(--seg-pick); color: var(--seg-pick-text); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, .1); }
.seg button[aria-pressed="true"]::before, .seg button[aria-pressed="true"] + button::before { display: none; }
.seg button:hover { color: var(--seg-pick-text); }
.seg button:focus-visible { outline-offset: 0; }
html:not(.js) .seg, html:not(.js) .mode-picker { visibility: hidden; }

/* macOS: the window of the approved Apple design (draft C), title bar and toolbar in one. */
.window[data-os="mac"] { border-radius: calc(11 * var(--u)); outline-color: rgba(0, 0, 0, .12); }
.chrome--mac {
  display: flex; align-items: center; height: calc(40 * var(--u)); padding: 0 calc(8 * var(--u)) 0 calc(14 * var(--u));
  background: var(--mac-bar); border-bottom: 1px solid var(--mac-line);
}
.mac-lights { display: flex; flex: none; gap: calc(8 * var(--u)); }
.mac-lights i { width: calc(12 * var(--u)); height: calc(12 * var(--u)); border-radius: 50%; background: #FF5F57; box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .14); }
.mac-lights i:nth-child(2) { background: #FEBC2E; }
.mac-lights i:nth-child(3) { background: #28C840; }
.chrome--mac .doc-title { margin: 0 calc(14 * var(--u)) 0 calc(78 * var(--u)); font-size: calc(13 * var(--u)); font-weight: 600; color: var(--mac-title); }
.chrome--mac .seg { margin-left: auto; }
.window[data-os="mac"] .pane-source, .window[data-os="ios"] .pane-source { border-right: 1px solid var(--pane-line); }

/* iOS and Android: the app's own top bar. */
.chrome--ios .bar, .chrome--android .bar {
  display: flex; align-items: center; gap: calc(10 * var(--u)); background: var(--bar-bg); border-bottom: 1px solid var(--bar-line);
}
.bar--compact { height: calc(50 * var(--u)); padding: 0 calc(10 * var(--u)) 0 calc(8 * var(--u)); }
.bar-back { display: flex; flex: none; }
.bar-back svg { width: calc(24 * var(--u)); height: calc(24 * var(--u)); fill: none; stroke: var(--back); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.bar .doc-title { flex: 1; font-size: calc(16 * var(--u)); color: var(--bar-title); }
.chrome--ios .bar .doc-title { font-weight: 600; }
.bar-icons { display: flex; flex: none; gap: calc(14 * var(--u)); }
.bar-icons svg { width: calc(22 * var(--u)); height: calc(22 * var(--u)); fill: none; stroke: var(--bar-icon); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bar--regular { grid-template-columns: 1fr auto 1fr; height: calc(46 * var(--u)); padding: 0 calc(16 * var(--u)); }
.bar--regular .bar-icons { justify-self: end; gap: calc(20 * var(--u)); }
.bar--regular .bar-icons svg { stroke: var(--bar-icon-strong); }
.doc-more { display: grid; flex: none; place-items: center; width: calc(18 * var(--u)); height: calc(18 * var(--u)); border-radius: 50%; background: var(--seg-track); }
.doc-more svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); fill: none; stroke: var(--seg-text); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.window[data-os="ios"], .window[data-os="android"] { border-radius: calc(14 * var(--u)); }
/* The iPhone's bar on a narrow window, the iPad's on a wide one, as the iOS app does. */
.chrome--ios .bar--regular { display: none; }
@media (min-width: 700px) {
  .chrome--ios .bar--compact { display: none; }
  .chrome--ios .bar--regular { display: grid; }
}

/* Android 1.1: Write · Source · Preview under the top bar, as the app's SegmentedControl draws it (draft A1:
   40 dp high, 16 dp from the sides, 15 sp labels, 18 dp icons; the picked part in icon_box and green_deep). */
.window[data-os="android"] { --aseg-line: #D1D1D6; --aseg-ink: #3A4250; --aseg-pick: #E6F6EC; --aseg-pick-ink: #1F9D59; }
@media (prefers-color-scheme: dark) {
  .window[data-os="android"] { --aseg-line: #3A3A3C; --aseg-ink: #D5DBE2; --aseg-pick: #1D3326; --aseg-pick-ink: #5FD998; }
}
.aseg-row { padding: calc(8 * var(--u)) calc(16 * var(--u)); background: var(--bar-bg); border-bottom: 1px solid var(--bar-line); }
.aseg { display: flex; height: calc(40 * var(--u)); border: 1px solid var(--aseg-line); border-radius: 999px; overflow: hidden; }
.aseg button {
  display: inline-flex; flex: 1 1 0; align-items: center; justify-content: center; gap: calc(8 * var(--u)); min-width: 0;
  padding: 0 calc(8 * var(--u)); border: 0; background: none; color: var(--aseg-ink); font-size: calc(15 * var(--u)); cursor: pointer;
}
.aseg button + button { border-left: 1px solid var(--aseg-line); }
.aseg button[aria-pressed="true"] { background: var(--aseg-pick); color: var(--aseg-pick-ink); }
.aseg button:focus-visible { outline-offset: -3px; }
.aseg svg { flex: none; width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
.aseg .i-fill { fill: currentColor; }
.aseg .i-line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.aseg span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aseg--bare svg { display: none; }
html:not(.js) .aseg { visibility: hidden; }

/* The mode pill and its menu (iPhone: Source and Preview). */
.mode-picker { position: relative; flex: none; }
.mode-pill {
  display: inline-flex; align-items: center; gap: calc(3 * var(--u)); height: calc(32 * var(--u)); padding: 0 calc(10 * var(--u)) 0 calc(13 * var(--u));
  border: 1.5px solid var(--pill-line); border-radius: 999px; background: none; color: var(--pill-text);
  font-size: calc(15.5 * var(--u)); font-weight: 600; cursor: pointer; white-space: nowrap;
}
.mode-pill svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.mode-menu {
  position: absolute; z-index: 5; top: calc(100% + 6px); right: 0; min-width: 168px; padding: 5px;
  border-radius: 14px; background: var(--menu-bg); box-shadow: 0 10px 34px rgba(0, 0, 0, .2), 0 0 0 1px var(--menu-line);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
}
.chrome--android .mode-menu { border-radius: 8px; }
.mode-menu[hidden] { display: none; }
.mode-menu button {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; width: 100%; padding: 10px 12px;
  border: 0; border-radius: 9px; background: none; color: var(--text); font-size: 16px; text-align: left; cursor: pointer;
}
.mode-menu button:hover, .mode-menu button:focus-visible { background: var(--menu-hover); outline: none; }
.mode-menu button[aria-checked="true"] { color: var(--green-text); font-weight: 600; }
.mode-menu button[aria-checked="true"]::after {
  content: ""; width: 6px; height: 11px; margin: -3px 4px 0 0; border: solid currentColor; border-width: 0 2px 2px 0; rotate: 45deg;
}

/* Your AI writes. You read, edit and decide. */
.ai-head { display: flex; align-items: flex-end; justify-content: space-between; gap: calc(40 * var(--u)); }
.band--ai h2 { font-size: calc(42 * var(--u)); line-height: 1.02; }
.band--ai h2 span { display: block; white-space: nowrap; }
.ai-head .lead { max-width: calc(418 * var(--u)); font-size: calc(14.5 * var(--u)); line-height: 1.55; padding-bottom: calc(3 * var(--u)); }
.points { display: grid; grid-template-columns: 1fr 1.08fr 1fr; gap: calc(28 * var(--u)); margin-top: calc(26 * var(--u)); }
.point { display: flex; align-items: flex-start; gap: calc(22 * var(--u)); }
.point p { padding-top: calc(4 * var(--u)); font-size: calc(15 * var(--u)); line-height: 1.5; color: var(--muted); }
.point strong { display: block; margin-bottom: calc(8 * var(--u)); font-size: calc(16.5 * var(--u)); line-height: 1.38; font-weight: 600; color: var(--ink); letter-spacing: -.008em; }

/* Longer languages: the heading's two lines may wrap within themselves beside the lead. */
html:not(:lang(en)) .band--ai h2 { flex: 1 1 auto; min-width: 0; }
html:not(:lang(en)) .band--ai h2 span { white-space: normal; }

/* Open a file. Start writing. */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(16 * var(--u)) calc(17 * var(--u)); margin-top: calc(17 * var(--u)); }
.card {
  display: flex; align-items: flex-start; gap: calc(20 * var(--u)); min-height: calc(110 * var(--u));
  padding: calc(15 * var(--u)) calc(14 * var(--u)) calc(14 * var(--u)) calc(15 * var(--u));
  border: 1px solid var(--card-line); border-radius: calc(12 * var(--u)); background: var(--card);
}
.card .icon { width: calc(62 * var(--u)); height: calc(62 * var(--u)); }
.card .icon .i { width: calc(35 * var(--u)); height: calc(35 * var(--u)); }
.card h3 { margin-top: calc(9 * var(--u)); font-size: calc(15.5 * var(--u)); font-weight: 600; color: var(--ink); letter-spacing: -.008em; }
.card p { margin-top: calc(5 * var(--u)); font-size: calc(14.5 * var(--u)); line-height: 1.52; color: var(--muted); }

/* On your devices. */
.devices { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(18 * var(--u)); margin-top: calc(17 * var(--u)); }
.device {
  display: flex; flex-direction: column; min-height: calc(410 * var(--u)); padding: calc(20 * var(--u)) calc(20 * var(--u)) calc(24 * var(--u));
  border: 1px solid var(--card-line); border-radius: calc(12 * var(--u)); background: var(--card);
}
.device h3 { font-size: calc(22.5 * var(--u)); font-weight: 700; color: var(--ink); letter-spacing: -.015em; }
.device > p { margin-top: calc(8 * var(--u)); min-height: calc(68 * var(--u)); font-size: calc(15 * var(--u)); line-height: 1.5; color: var(--muted); }
.device-art { display: flex; justify-content: center; align-items: flex-start; height: calc(214 * var(--u)); margin-top: calc(14 * var(--u)); overflow: hidden; }
.device--windows .device-art { align-items: center; }
.shot-window img {
  width: calc(244 * var(--u)); border-radius: calc(4 * var(--u));
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 6px 18px rgba(0, 0, 0, .10); outline: 1px solid rgba(0, 0, 0, .08);
}
.phone {
  position: relative; width: calc(132 * var(--u)); margin-top: calc(2 * var(--u)); padding: calc(5 * var(--u));
  border-radius: calc(21 * var(--u)); background: #0B0B0C;
  box-shadow: inset 0 0 0 1px #2A2A2D, 0 2px 6px rgba(0, 0, 0, .14), 0 14px 30px rgba(0, 0, 0, .12);
}
.phone img { border-radius: calc(16 * var(--u)); }
.phone::after { content: ""; position: absolute; left: 50%; translate: -50% 0; background: #050506; }
.phone--android::after { top: calc(9 * var(--u)); width: calc(6 * var(--u)); height: calc(6 * var(--u)); border-radius: 50%; }
.phone--iphone { width: calc(196 * var(--u)); padding: calc(7 * var(--u)); border-radius: calc(32 * var(--u)); }
.phone--iphone img { border-radius: calc(26 * var(--u)); }
.phone--iphone::after { top: calc(15 * var(--u)); width: calc(54 * var(--u)); height: calc(15 * var(--u)); border-radius: 99px; }
.device--apple .device-art { height: calc(176 * var(--u)); }

/* Your words stay yours. */
.private-in { display: flex; align-items: center; gap: calc(38 * var(--u)); padding: calc(9 * var(--u)) calc(37 * var(--u)) calc(9 * var(--u)) calc(52 * var(--u)); }
.icon--big { width: calc(90 * var(--u)); height: calc(90 * var(--u)); }
.icon--big .i { width: calc(50 * var(--u)); height: calc(50 * var(--u)); }
.band--private h2 { font-size: calc(36 * var(--u)); }
.band--private p { margin-top: calc(6 * var(--u)); font-size: calc(18.5 * var(--u)); line-height: 1.45; color: var(--muted); }

/* Questions, answered. */
.band--faq .band-in { padding-top: calc(20 * var(--u)); }
.faq { margin-top: calc(10 * var(--u)); border: 1px solid var(--card-line); border-radius: calc(12 * var(--u)); background: var(--card); overflow: hidden; }
.faq details + details { border-top: 1px solid var(--card-line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: calc(16 * var(--u));
  min-height: calc(34 * var(--u)); padding: calc(6 * var(--u)) calc(20 * var(--u)); cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover h3 { color: var(--ink); }
.faq summary:focus-visible { outline-offset: -3px; border-radius: calc(10 * var(--u)); }
.faq h3 { font-size: calc(14.5 * var(--u)); line-height: 1.4; font-weight: 400; color: var(--faq-q); }
.faq details[open] h3 { font-weight: 600; color: var(--ink); }
.chev { flex: none; width: calc(18 * var(--u)); height: calc(18 * var(--u)); fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.faq details[open] .chev { rotate: 180deg; }
.answer { padding: 0 calc(20 * var(--u)) calc(14 * var(--u)); }
.answer p { max-width: calc(760 * var(--u)); font-size: calc(14.5 * var(--u)); line-height: 1.6; color: var(--muted); }

/* Make your Markdown beautiful. */
.band--close .band-in { text-align: center; padding: calc(21 * var(--u)) calc(37 * var(--u)) calc(17 * var(--u)); }
.band--close h2 { font-size: calc(31 * var(--u)); }
.free { margin-top: calc(14 * var(--u)); font-size: calc(15 * var(--u)); color: var(--muted); }

/* ---- Footer ---------------------------------------------------------------------------------------- */

.foot { padding: calc(26 * var(--u)) 0 calc(30 * var(--u)); }
.foot-in { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; padding: 0 calc(37 * var(--u)); font-size: calc(14.5 * var(--u)); color: var(--muted); }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px calc(40 * var(--u)); }
.foot-links a { color: var(--muted); text-decoration: none; border-radius: 4px; }
.foot-links a:hover { color: var(--ink); text-decoration: underline; }
.legal { margin-top: calc(18 * var(--u)); padding: 0 calc(37 * var(--u)); font-size: calc(11.5 * var(--u)); line-height: 1.55; color: var(--dim); }

/* The language list: each language in its own name. site.js remembers the choice in the "lang" cookie, which
   vercel.json reads before following the browser's language. */
.langs {
  display: flex; align-items: flex-start; gap: calc(9 * var(--u)); margin-top: calc(16 * var(--u)); padding: 0 calc(37 * var(--u));
  font-size: calc(13.5 * var(--u)); line-height: 1.5; color: var(--muted);
}
.langs-icon { flex: none; width: calc(16 * var(--u)); height: calc(16 * var(--u)); margin-top: calc(2.5 * var(--u)); fill: none; stroke: var(--dim); stroke-width: 1.6; }
.langs ul { display: flex; flex-wrap: wrap; gap: 6px calc(20 * var(--u)); }
.langs a { color: var(--muted); text-decoration: none; border-radius: 4px; }
.langs a:hover { color: var(--ink); text-decoration: underline; }
.langs a[aria-current="page"] { color: var(--ink); font-weight: 600; }

/* ---- The support dialog after a store click (approved draft S1: one of the site's sheets) ---------- */

.support {
  width: min(calc(100vw - 32px), max(330px, calc(343 * var(--u)))); max-width: none; max-height: calc(100dvh - 32px);
  padding: 0; border: 0; background: transparent; color: var(--text); overflow: visible;
}
.support::backdrop { background: rgba(10, 12, 14, .56); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.support-sheet {
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
  max-height: calc(100dvh - 32px); overflow: auto;
  padding: calc(37 * var(--u)) calc(21 * var(--u)) calc(19 * var(--u)); border-radius: calc(13 * var(--u));
  background: var(--page); box-shadow: 0 2px 6px rgba(20, 24, 28, .08), 0 24px 60px rgba(20, 24, 28, .24);
}
.support-close {
  position: absolute; top: calc(10 * var(--u)); right: calc(10 * var(--u)); display: grid; place-items: center;
  width: max(32px, calc(26 * var(--u))); height: max(32px, calc(26 * var(--u))); padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--muted); cursor: pointer;
}
.support-close:hover { color: var(--ink); background: var(--tint); }
.support-close svg { width: max(18px, calc(15 * var(--u))); height: max(18px, calc(15 * var(--u))); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.support-icon {
  width: max(52px, calc(53 * var(--u))); height: max(52px, calc(53 * var(--u))); border-radius: calc(12 * var(--u)); background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 4px 14px rgba(0, 0, 0, .09);
}
.support h2 { margin-top: calc(19 * var(--u)); font-size: max(21px, calc(21.3 * var(--u))); line-height: 1.18; letter-spacing: -.02em; }
.support #support-text { margin-top: calc(11 * var(--u)); font-size: max(15px, calc(12.7 * var(--u))); line-height: 1.55; color: var(--muted); text-wrap: pretty; }
.support-kofi {
  display: flex; align-items: center; justify-content: center; align-self: stretch; min-height: max(46px, calc(38 * var(--u)));
  margin-top: calc(17 * var(--u)); padding: 0 16px; border-radius: calc(8 * var(--u)); background: var(--button); color: var(--button-text);
  font-size: max(16px, calc(13.3 * var(--u))); font-weight: 600; text-decoration: none;
}
.support-kofi:hover { background: var(--button-hover); }
.support-later {
  margin-top: calc(9 * var(--u)); padding: calc(6 * var(--u)) calc(14 * var(--u)); border: 0; border-radius: 8px; background: none;
  color: var(--muted); font-size: max(15px, calc(12.7 * var(--u))); cursor: pointer;
}
.support-later:hover { color: var(--ink); }
.support-note { margin-top: calc(8 * var(--u)); font-size: max(12.5px, calc(9.5 * var(--u))); color: var(--dim); }
@media (prefers-color-scheme: dark) {
  .support-sheet { box-shadow: 0 0 0 1px var(--card-line), 0 24px 60px rgba(0, 0, 0, .6); }
  .support::backdrop { background: rgba(0, 0, 0, .62); }
}
@media (prefers-reduced-motion: no-preference) {
  .support[open] { animation: support-in .24s cubic-bezier(.2, .7, .2, 1); }
  .support[open]::backdrop { animation: support-fade .24s ease-out; }
}
@keyframes support-in { from { opacity: 0; transform: translateY(10px) scale(.985); } }
@keyframes support-fade { from { opacity: 0; } }

/* ---- Motion: sections rise in as they scroll into view (site.js); the hero's sheets settle on load. --- */

@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(calc(26 * var(--u))); transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1); }
  .js .reveal.is-in { opacity: 1; transform: none; }
  .js .paper { animation: paper-in 1.1s cubic-bezier(.2, .7, .2, 1) both; }
  .js .paper--sheet { animation-delay: .12s; }
  .chev { transition: rotate .25s ease; }
  @supports selector(::details-content) {
    :root { interpolate-size: allow-keywords; }
    .faq details::details-content { height: 0; overflow: clip; transition: height .32s ease, content-visibility .32s allow-discrete; }
    .faq details[open]::details-content { height: auto; }
  }
}
@keyframes paper-in { from { opacity: 0; transform: translateY(calc(34 * var(--u))); } }

/* ---- Below 960 px: one column ---------------------------------------------------------------------- */

@media (max-width: 959px) {
  :root { --u: 1px; }
  .wrap, .band { width: auto; margin-inline: 14px; }
  .band { margin-top: 14px; }
  .nav-in { height: 68px; padding: 0 6px; }
  .nav-links { gap: 22px; }

  .hero-in { height: auto; padding: 22px 10px 0; }
  .hero-copy { position: static; width: auto; max-width: 560px; }
  .hero h1 { font-size: clamp(42px, 11.4vw, 58px); }
  .promise { font-size: 17px; line-height: 1.62; }
  .stores--hero { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 400px; }
  .stores--hero .soon { min-width: 0; padding: 0 10px; gap: 9px; height: 56px; }
  .soon-name { font-size: 15.5px; }
  .hero-art { position: relative; height: 400px; margin: 26px auto 8px; max-width: 520px; }
  .paper--raw { left: 2%; top: 30px; width: 46%; height: 340px; }
  .paper--sheet { left: 36%; top: 8px; width: 62%; height: 380px; }
  .src-text { width: 200px; font-size: 9px; padding: 16px 12px; }
  .doc { padding: 24px 14px 0 18px; font-size: 10.5px; }
  .doc-h1 { font-size: 21px !important; }
  .doc-h2 { font-size: 15px; }
  .doc ul, .doc ol { margin: 8px 0 10px; }
  .doc-quote { margin: 10px 0 !important; }
  .doc-table { font-size: 9.5px; margin-top: 10px; }

  .band-in { padding: 24px 18px 24px; }
  h2 { font-size: 32px; }
  .band--ai h2 { font-size: 34px; }
  .band--ai h2 span, .hero h1 span { white-space: normal; }
  .band--private h2 { font-size: 30px; }
  .band--close h2 { font-size: 28px; }
  .lead { font-size: 16.5px; }

  .window { width: 100%; }
  .win-menu { display: none; }
  .panes { height: 520px; }

  .ai-head { display: block; }
  .ai-head .lead { max-width: none; margin-top: 14px; font-size: 16.5px; }
  .points { grid-template-columns: 1fr; gap: 22px; }
  .point strong { font-size: 17px; }
  .point p { font-size: 15.5px; }

  .cards { grid-template-columns: repeat(2, 1fr); }
  .card p { font-size: 15px; }
  .devices { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .device { padding: 18px 14px 20px; }
  .device h3 { font-size: 20px; }
  .device > p { font-size: 15px; min-height: 68px; }
  .stores--card .soon { min-width: 0; }

  .private-in { padding: 20px 18px; gap: 20px; }
  .icon--big { width: 72px; height: 72px; }
  .band--private p { font-size: 17px; }
  .faq h3, .answer p { font-size: 15.5px; }
  .faq summary { padding: 10px 16px; min-height: 48px; }
  .answer { padding: 0 16px 14px; }
  .foot-in { padding: 0 6px; font-size: 14.5px; }
  .legal { padding: 0 6px; font-size: 12px; }
}

@media (max-width: 759px) {
  .devices { grid-template-columns: 1fr; }
  .device { min-height: 0; }
  .device > p { min-height: 0; }
  .device-art { height: 230px; }
  .device--apple .device-art { height: 230px; }
}

@media (max-width: 699px) {
  .nav-optional { display: none; }
  .cards { grid-template-columns: 1fr; }
  .card { min-height: 0; }
  .panes { grid-template-columns: 1fr; grid-template-rows: 250px 420px; height: auto; }
  .panes[data-view="editor"] { grid-template-rows: 520px; }
  .panes[data-view="preview"], .panes[data-view="write"] { grid-template-rows: 560px; }
  .pane-source { border-right: 0; border-bottom: 2px solid var(--win-split); font-size: 16px; }
  .panes[data-view="editor"] .pane-source { border-bottom: 0; }
  .src-layer { padding: 12px 14px 20px; }
  .win-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .win-controls svg { width: 34px; }
  .win-format { display: none; }
  .stores--row { flex-direction: column; align-items: center; gap: 10px; }
  .stores--row .soon { width: 250px; }
  .foot-in { flex-direction: column; align-items: flex-start; }
}

/* Phones: the header keeps the name and the download button on one line in every language. Measured
   needs without the FAQ link: Ukrainian 381 px, Japanese 355 px at full size; these sizes fit 320 px. */
@media (max-width: 519px) {
  .nav-faq { display: none; }
  .nav-in { padding: 0 2px; gap: 10px; }
  .brand { gap: 10px; font-size: clamp(16px, 5vw, 21px); }
  .brand img { width: clamp(32px, 10vw, 41px); height: clamp(32px, 10vw, 41px); }
  .nav-links .button { padding: 0 clamp(12px, 4.4vw, 26px); font-size: clamp(14px, 4vw, 15.5px) !important; }
  /* The demo window is narrower than the phone it shows on: Write · Source · Preview a little tighter than the
     app's, so the labels stay whole (Ukrainian at 360 px). */
  .aseg-row { padding: 8px 10px; }
  .aseg button { gap: 6px; padding: 0 4px; font-size: 14px; }
}

/* Fold-phone cover screens (280 px): narrower margins, one store badge per row. */
@media (max-width: 339px) {
  .wrap, .band { margin-inline: 8px; }
  .nav-in { padding: 0; }
  .brand { gap: 8px; font-size: 15px; }
  .nav-links .button { padding: 0 10px; }
  .private-in { flex-direction: column; align-items: flex-start; }
  .stores--hero { grid-template-columns: 1fr; }
  .stores--row .soon { width: 100%; }
}

/* ---- Guides: one question, one page (approved draft A: one sheet, the answer first) ------------------ */

.guide-sheet {
  width: calc(824 * var(--u)); margin: calc(4 * var(--u)) auto 0; padding: calc(30 * var(--u)) calc(34 * var(--u)) 0;
  background: var(--sheet); border: 1px solid var(--card-line); border-radius: calc(14 * var(--u)); box-shadow: var(--soft-shadow);
  overflow: hidden;
}
.crumbs { display: flex; flex-wrap: wrap; gap: calc(8 * var(--u)); font-size: calc(13.5 * var(--u)); color: var(--muted); }
.crumbs a { color: var(--muted); text-decoration: none; border-radius: 4px; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.guide-sheet h1 {
  margin-top: calc(16 * var(--u)); font-size: calc(40 * var(--u)); line-height: 1.1; font-weight: 800; letter-spacing: -.03em;
  color: var(--ink); text-wrap: balance;
}
.quick { margin-top: calc(22 * var(--u)); padding: calc(17 * var(--u)) calc(22 * var(--u)) calc(19 * var(--u)); border-radius: calc(12 * var(--u)); background: var(--tint); }
.guide-sheet .quick h2 {
  font-size: calc(12.5 * var(--u)); line-height: 1.2; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--green-text);
}
.quick p { margin-top: calc(8 * var(--u)); font-size: calc(16.5 * var(--u)); line-height: 1.6; color: var(--text); text-wrap: pretty; }
.guide-part { margin-top: calc(38 * var(--u)); }
.guide-sheet h2 { font-size: calc(26 * var(--u)); line-height: 1.15; font-weight: 800; letter-spacing: -.022em; }

.steps { display: grid; gap: calc(20 * var(--u)); margin-top: calc(18 * var(--u)); }
.steps > li { display: grid; grid-template-columns: calc(38 * var(--u)) 1fr; gap: calc(16 * var(--u)); align-items: start; }
.step-n {
  display: grid; place-items: center; width: calc(38 * var(--u)); height: calc(38 * var(--u)); border-radius: 50%;
  background: var(--button); color: var(--button-text); font-size: calc(17 * var(--u)); font-weight: 700;
}
.step-body h3 { margin-top: calc(6 * var(--u)); font-size: calc(17 * var(--u)); line-height: 1.35; font-weight: 650; color: var(--ink); }
.step-body p { margin-top: calc(3 * var(--u)); font-size: calc(15 * var(--u)); line-height: 1.6; color: var(--muted); }
.stores--step { flex-wrap: wrap; gap: calc(12 * var(--u)); margin-top: calc(12 * var(--u)); }
.stores--step .soon { height: calc(52 * var(--u)); min-width: calc(178 * var(--u)); }
.stores--step .badge img { height: calc(46 * var(--u)); }

.guide-shot { display: flex; justify-content: center; margin-top: calc(26 * var(--u)); }
.guide-shot img { border: 1px solid var(--line); border-radius: calc(10 * var(--u)); box-shadow: var(--window-shadow); }
.guide-shot--windows img { width: min(100%, 740px); }
.guide-shot--android img { width: min(62%, 300px); border-radius: calc(18 * var(--u)); }

.guide-intro { margin-top: calc(12 * var(--u)); font-size: calc(15.5 * var(--u)); line-height: 1.65; color: var(--muted); }
.guide-lead { margin-top: calc(14 * var(--u)); font-size: calc(15.5 * var(--u)); font-weight: 600; color: var(--ink); }
.checks { margin-top: calc(12 * var(--u)); border: 1px solid var(--card-line); border-radius: calc(12 * var(--u)); background: var(--card); overflow: hidden; }
.checks li { display: flex; align-items: flex-start; gap: calc(12 * var(--u)); padding: calc(11 * var(--u)) calc(18 * var(--u)); font-size: calc(15 * var(--u)); line-height: 1.55; color: var(--text); }
.checks li + li { border-top: 1px solid var(--card-line); }
.check {
  flex: none; width: calc(20 * var(--u)); height: calc(20 * var(--u)); margin-top: calc(2 * var(--u)); padding: calc(3 * var(--u));
  border-radius: calc(5 * var(--u)); background: var(--button); fill: none; stroke: var(--button-text); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
}
.guide-sheet .faq { margin-top: calc(14 * var(--u)); }

.guide-more { margin-top: calc(34 * var(--u)); }
.guide-more ul { display: grid; gap: calc(8 * var(--u)); margin-top: calc(12 * var(--u)); }
.guide-more a { font-size: calc(15.5 * var(--u)); text-decoration: none; border-radius: 4px; }
.guide-more a::after { content: " →"; }
.guide-more a:hover { text-decoration: underline; }

.guide-get {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: calc(16 * var(--u)) calc(24 * var(--u));
  margin: calc(40 * var(--u)) calc(-34 * var(--u)) 0; padding: calc(22 * var(--u)) calc(34 * var(--u)); background: var(--tint);
}
.guide-get p { font-size: calc(21 * var(--u)); line-height: 1.3; font-weight: 750; letter-spacing: -.015em; color: var(--ink); }
.stores--get { flex-wrap: wrap; gap: calc(12 * var(--u)); }
.stores--get .soon { height: calc(54 * var(--u)); min-width: calc(178 * var(--u)); }
.stores--get .badge img { height: calc(48 * var(--u)); }

/* The list of guides */
.guide-intro--index { font-size: calc(16.5 * var(--u)); }
.guide-list { display: grid; gap: calc(12 * var(--u)); margin-top: calc(24 * var(--u)); }
.guide-list a {
  display: grid; gap: calc(4 * var(--u)); padding: calc(16 * var(--u)) calc(20 * var(--u)); border: 1px solid var(--card-line);
  border-radius: calc(12 * var(--u)); background: var(--card); text-decoration: none;
}
.guide-list a:hover { border-color: var(--green-deep); }
.guide-list strong { font-size: calc(18 * var(--u)); line-height: 1.35; color: var(--ink); }
.guide-list span { font-size: calc(15 * var(--u)); line-height: 1.55; color: var(--muted); }

@media (max-width: 959px) {
  .guide-sheet { width: auto; margin: 4px 14px 0; padding: 22px 18px 0; }
  .crumbs { font-size: 14px; }
  .guide-sheet h1 { font-size: clamp(28px, 7.6vw, 38px); }
  .quick { padding: 16px 18px 18px; }
  .guide-sheet .quick h2 { font-size: 12.5px; }
  .quick p { font-size: 16.5px; }
  .guide-sheet h2 { font-size: clamp(21px, 5.6vw, 26px); }
  .steps > li { grid-template-columns: 34px 1fr; gap: 14px; }
  .step-n { width: 34px; height: 34px; font-size: 16px; }
  .step-body h3 { margin-top: 5px; font-size: 17px; }
  .step-body p, .guide-intro, .guide-lead, .checks li { font-size: 15.5px; }
  .checks li { padding: 11px 14px; }
  .check { width: 20px; height: 20px; padding: 3px; }
  .guide-more a { font-size: 16px; }
  .guide-get { margin: 34px -18px 0; padding: 20px 18px; }
  .guide-get p { font-size: 19px; }
  .guide-list a { padding: 14px 16px; }
  .guide-list strong { font-size: 17px; }
  .guide-list span { font-size: 15.5px; }
}
@media (max-width: 519px) {
  .stores--step, .stores--get { flex-direction: column; align-items: flex-start; }
  .guide-shot--android img { width: min(72%, 300px); }
}
@media (max-width: 339px) {
  .guide-sheet { margin-inline: 8px; padding-inline: 14px; }
  .guide-get { margin-inline: -14px; padding-inline: 14px; }
}

/* ---- Guides: the Markdown cheat sheet (approved draft D: what you type next to what you see) ------------------- */
/* The "you see" column is MD Editor's own rendering of each row (the app's render.js, saved by tools/prerender-demo.mjs)
   in the app's preview look: Resources/preview.css's colours and shapes (the one sheet), at the table's size. Code is
   not coloured, as in the app. The rows' own selectors use ">" so the rendered table inside a cell keeps its look.
   Below 520 px each row stacks: what you type, then what you see. */
.sheet-wrap {
  --sheet-head: #F5F6F7; --sheet-code: #F1F3F5;
  margin-top: calc(26 * var(--u)); border: 1px solid var(--card-line); border-radius: calc(12 * var(--u)); overflow: hidden;
}
.sheet { width: 100%; border-collapse: collapse; }
.sheet > thead > tr > th {
  padding: calc(11 * var(--u)) calc(16 * var(--u)); background: var(--sheet-head); text-align: left;
  font-size: calc(15 * var(--u)); line-height: 1.3; font-weight: 700; color: var(--ink);
}
.sheet > thead > tr > th:first-child { width: 50%; }
.sheet > tbody > .sheet-group > th {
  padding: calc(8 * var(--u)) calc(16 * var(--u)); border-top: 1px solid var(--card-line); background: var(--sheet-head); text-align: left;
  font-size: calc(11.5 * var(--u)); line-height: 1.3; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
}
.sheet > tbody > tr > td { padding: calc(8 * var(--u)) calc(16 * var(--u)); border-top: 1px solid var(--card-line); vertical-align: middle; }
.sheet > thead > tr > th + th, .sheet > tbody > tr > td + td { border-left: 1px solid var(--card-line); }
.sheet-type pre {
  overflow-x: auto; padding: calc(7 * var(--u)) calc(11 * var(--u)); border-radius: calc(6 * var(--u)); background: var(--sheet-code);
  font-family: var(--mono); font-size: calc(13.5 * var(--u)); line-height: 1.6; color: var(--text);
}

.md-see {
  --see-text: #1C1F23; --see-dim: #5F6873; --see-accent: #1F9D59; --see-accent-text: #157A45; --see-check: #34C06F;
  --see-box: #8A929C; --see-box-bg: #FFFFFF; --see-line: #E3E6EA; --see-code-bg: #EEF1F3; --see-code-text: #157A45;
  --see-pre-bg: #F7F8FA; --see-pre-text: #3A4250; --see-quote-bg: #E9F8F0; --see-quote-line: #C7ECD6; --see-quote-text: #1F6B45;
  --see-mark-bg: rgba(255, 211, 61, .32); --see-mark-text: #5C4100;
  font-size: calc(15.5 * var(--u)); line-height: 1.6; color: var(--see-text); overflow-wrap: anywhere;
}
.md-see p { margin: 0; }
.md-see strong { font-weight: 700; }
.md-see em { font-style: italic; }
.md-see del { color: var(--see-dim); }
.md-see mark { padding: 0 3px; border-radius: 4px; background: var(--see-mark-bg); color: var(--see-mark-text); }
.md-see .md-h1 { font-size: calc(28 * var(--u)); line-height: 1.2; font-weight: 800; letter-spacing: -.02em; }
.md-see .md-h2 { font-size: calc(21 * var(--u)); line-height: 1.3; font-weight: 800; letter-spacing: -.01em; }
.md-see a { color: var(--see-accent-text); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--see-accent-text) 32%, transparent); }
.md-see a:hover { border-bottom-color: currentColor; }
.md-see ul, .md-see ol { padding-left: 22px; }
.md-see ol { list-style: decimal; }
.md-see ol > li::marker { color: var(--see-accent); }
.md-see li + li { margin-top: 2px; }
.md-see ul > li:not(.task-list-item) { position: relative; }
.md-see ul > li:not(.task-list-item)::before {
  content: ""; position: absolute; left: -19px; top: calc(.8em - 3.5px); width: 7px; height: 7px; border-radius: 50%; background: var(--see-accent);
}
.md-see .md-task-toggle {
  appearance: none; display: inline-block; width: 15px; height: 15px; margin: 0 .4em 0 -1.35em; vertical-align: -2px;
  border: 1.5px solid var(--see-box); border-radius: 3px; background: var(--see-box-bg);
}
.md-see .md-task-toggle:checked {
  border-color: var(--see-check);
  background: var(--see-check) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3.6 8.4 3 3 5.8-6.6' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.md-see img { width: calc(120 * var(--u)); border-radius: 8px; }
.md-see .md-table-wrap { overflow-x: auto; }
.md-see table { width: 100%; border-collapse: collapse; font-size: calc(15 * var(--u)); }
.md-see th {
  padding: 6px 9px; border-top: 1px solid var(--see-line); border-bottom: 1px solid var(--see-line); text-align: left;
  font-size: calc(14 * var(--u)); font-weight: 400; color: var(--see-dim);
}
.md-see td { padding: 7px 9px; border-bottom: 1px solid var(--see-line); }
.md-see code { padding: 1px 6px; border-radius: 5px; background: var(--see-code-bg); color: var(--see-code-text); font-family: var(--mono); font-size: .88em; }
.md-see pre { overflow-x: auto; padding: 12px 14px; border: 1px solid var(--see-line); border-radius: 10px; background: var(--see-pre-bg); }
.md-see pre code { padding: 0; border-radius: 0; background: none; color: var(--see-pre-text); font-size: calc(13.5 * var(--u)); line-height: 1.7; white-space: pre; }
.md-see blockquote {
  margin: 0; padding: calc(10 * var(--u)) calc(14 * var(--u)); border: 1px solid var(--see-quote-line); border-radius: 10px;
  background: var(--see-quote-bg); color: var(--see-quote-text); font-size: calc(15 * var(--u));
}
.md-see sup { line-height: 0; }
.md-see .footnote-ref a, .md-see .footnote-backref { border-bottom: 0; }
.md-see .footnotes { margin-top: calc(8 * var(--u)); font-size: calc(13.5 * var(--u)); color: var(--see-dim); }
.md-see .footnotes hr { margin: 0 0 calc(6 * var(--u)); border: 0; border-top: 1px solid var(--see-line); }
.md-see .footnotes ol { padding-left: 20px; }

@media (prefers-color-scheme: dark) {
  .sheet-wrap { --sheet-head: #1C1F23; --sheet-code: #22262B; }
  .md-see {
    --see-text: #E9EEF4; --see-dim: #8B949E; --see-accent: #46D384; --see-accent-text: #5FD998;
    --see-box: #6E7781; --see-box-bg: transparent; --see-line: #2A323C; --see-code-bg: #1B2530; --see-code-text: #5FD998;
    --see-pre-bg: #11161D; --see-pre-text: #C4CDD6; --see-quote-bg: rgba(52, 192, 111, .10); --see-quote-line: rgba(52, 192, 111, .28);
    --see-quote-text: #7FE0A8; --see-mark-text: #F2CC60;
  }
}
@media (max-width: 959px) {
  .sheet-wrap { margin-top: 24px; border-radius: 12px; }
  .sheet > thead > tr > th { padding: 10px 14px; font-size: 15px; }
  .sheet > tbody > .sheet-group > th { padding: 8px 14px; font-size: 11.5px; }
  .sheet > tbody > tr > td { padding: 8px 14px; }
  .sheet-type pre { padding: 7px 10px; border-radius: 6px; font-size: 13.5px; }
  .md-see { font-size: 15.5px; }
  .md-see .md-h1 { font-size: 26px; }
  .md-see .md-h2 { font-size: 20px; }
  .md-see img { width: 120px; }
  .md-see table { font-size: 15px; }
  .md-see th { font-size: 14px; }
  .md-see pre code { font-size: 13.5px; }
  .md-see blockquote { padding: 10px 14px; font-size: 15px; }
  .md-see .footnotes { margin-top: 8px; font-size: 13.5px; }
  .md-see .footnotes hr { margin-bottom: 6px; }
}
@media (max-width: 519px) {
  .sheet, .sheet > tbody, .sheet > tbody > tr, .sheet > tbody > tr > td, .sheet > tbody > .sheet-group > th { display: block; }
  .sheet > thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .sheet > tbody > tr:not(.sheet-group) { padding: 12px; border-top: 1px solid var(--card-line); }
  .sheet > tbody > .sheet-group > th { padding: 8px 12px; }
  .sheet > tbody > tr > td { padding: 0; border-top: 0; }
  /* The longest row, the link (35 characters in Ukrainian), fits on one line from 320 px up. */
  .sheet-type pre { padding: 7px 8px; font-size: clamp(10.5px, 3.1vw, 13px); }
  .sheet > tbody > tr > td + td { margin-top: 10px; border-left: 0; }
  .sheet > tbody:first-of-type > .sheet-group > th { border-top: 0; }
}
@media (max-width: 359px) {
  .sheet > tbody > tr:not(.sheet-group) { padding-inline: 10px; }
  .sheet > tbody > .sheet-group > th { padding-inline: 10px; }
  .sheet-type pre { padding-inline: 6px; }
}

/* ---- What's new (approved draft G): every version, newest first, on a timeline ----------------------------------- */
/* The platform filter is four radio buttons; :has() hides the other platforms' versions, so it works without script.
   Without :has() every version stays in sight. */
.news-lead { margin-top: calc(14 * var(--u)); font-size: calc(19 * var(--u)); line-height: 1.5; color: var(--muted); }
.news-filter { display: inline-flex; margin-top: calc(24 * var(--u)); padding: 0; border: 1px solid var(--card-line); border-radius: calc(10 * var(--u)); background: var(--card); overflow: hidden; }
.news-filter legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.news-filter input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.news-filter label { padding: calc(10 * var(--u)) calc(20 * var(--u)); font-size: calc(16 * var(--u)); line-height: 1.3; color: var(--text); cursor: pointer; white-space: nowrap; }
.news-filter label + input + label { border-left: 1px solid var(--card-line); }
.news-filter label:hover { background: var(--tint); }
.news-filter input:checked + label { background: var(--button); color: var(--button-text); }
.news-filter input:focus-visible + label { outline: 2px solid var(--focus); outline-offset: -4px; border-radius: calc(8 * var(--u)); }

.news { position: relative; margin-top: calc(34 * var(--u)); }
.news::before { content: ""; position: absolute; left: calc(9 * var(--u)); top: calc(14 * var(--u)); bottom: calc(14 * var(--u)); width: 2px; background: var(--line); }
.news-item { position: relative; padding-left: calc(62 * var(--u)); }
.news-item + .news-item { margin-top: calc(40 * var(--u)); }
.news-item::before {
  content: ""; position: absolute; left: calc(3 * var(--u)); top: calc(9 * var(--u)); width: calc(14 * var(--u)); height: calc(14 * var(--u));
  border-radius: 50%; background: var(--green-deep); box-shadow: 0 0 0 calc(4 * var(--u)) var(--sheet);
}
.news-item h2 { font-size: calc(26 * var(--u)); line-height: 1.2; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.news-meta { display: flex; flex-wrap: wrap; align-items: center; gap: calc(8 * var(--u)) calc(16 * var(--u)); margin-top: calc(12 * var(--u)); }
.news-chip { padding: calc(4 * var(--u)) calc(14 * var(--u)); border-radius: calc(8 * var(--u)); background: var(--tint); color: var(--green-text); font-size: calc(15 * var(--u)); line-height: 1.4; }
.news-when { font-size: calc(15.5 * var(--u)); color: var(--muted); }
.news-item ul { margin-top: calc(14 * var(--u)); padding-left: calc(24 * var(--u)); list-style: disc; }
.news-item ul li { font-size: calc(17 * var(--u)); line-height: 1.6; color: var(--text); }
.news-item ul li + li { margin-top: calc(5 * var(--u)); }
.news-item ul li::marker { color: var(--ink); }
.news-item.is-coming::before { background: var(--line); }
.news-item.is-coming h2 { color: var(--dim); }
.news-item.is-coming .news-chip { background: #EEF0F2; color: var(--muted); }
.news-note { margin-top: calc(14 * var(--u)); font-size: calc(17 * var(--u)); line-height: 1.6; color: var(--dim); }
.guide-sheet:has(#pf-windows:checked) .news-item:not([data-platform="windows"]),
.guide-sheet:has(#pf-android:checked) .news-item:not([data-platform="android"]),
.guide-sheet:has(#pf-apple:checked) .news-item:not([data-platform="apple"]) { display: none; }
.news + .guide-get { margin-top: calc(48 * var(--u)); }

@media (prefers-color-scheme: dark) {
  .news-item.is-coming .news-chip { background: rgba(255, 255, 255, .07); }
}
@media (max-width: 959px) {
  .news-lead { margin-top: 12px; font-size: 17.5px; }
  .news-filter { margin-top: 20px; border-radius: 10px; }
  .news-filter label { padding: 9px 16px; font-size: 15.5px; }
  .news-filter input:focus-visible + label { border-radius: 8px; }
  .news { margin-top: 28px; }
  .news::before { left: 8px; top: 12px; bottom: 12px; }
  .news-item { padding-left: 40px; }
  .news-item + .news-item { margin-top: 34px; }
  .news-item::before { left: 2px; top: 8px; width: 14px; height: 14px; box-shadow: 0 0 0 4px var(--sheet); }
  .news-item h2 { font-size: clamp(21px, 5.6vw, 26px); }
  .news-meta { gap: 8px 14px; margin-top: 10px; }
  .news-chip { padding: 3px 12px; border-radius: 8px; font-size: 14.5px; }
  .news-when { font-size: 15px; }
  .news-item ul { margin-top: 12px; padding-left: 22px; }
  .news-item ul li, .news-note { font-size: 16px; }
  .news-note { margin-top: 12px; }
  .news + .guide-get { margin-top: 40px; }
}
@media (max-width: 519px) {
  /* Four pills that wrap, instead of one bar wider than a phone. */
  .news-filter { display: flex; flex-wrap: wrap; gap: 8px; border: 0; border-radius: 0; background: none; overflow: visible; }
  .news-filter label, .news-filter label + input + label { border: 1px solid var(--card-line); border-radius: 999px; background: var(--card); }
  .news-filter input:checked + label { border-color: var(--button); background: var(--button); }
  .news-filter input:focus-visible + label { border-radius: 999px; outline-offset: 2px; }
}