/* Shared design system of confluencetomarkdown.com (redesign of 2026-09-28): the landing (/) and the
   Markdown Preview tool (/tools/markdown-preview/) both load this file, the look of rendered Markdown
   (.md-doc) included; the tool keeps the rules of its editor in its page. Base: the Call Copilot landing (colour bands, floating tilted cards, big type) and maxg.agency
   (plates without frames that brighten under the pointer, wide Archivo). The screenshots stay the
   hero's main picture. No dividers, no eyebrow labels, no number badges, no framed boxes.
   One theme, paper, with the lime accent (Max 28.09). Layout rules: docs/MOBILE_DESIGN_RULES.md. */

/* ---------- fonts: served from the site (Latin subset of Google Fonts; a character outside it falls back to a system font) ---------- */
@font-face { font-family: "Archivo"; src: url("/assets/fonts/archivo-v25-latin.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/assets/fonts/jetbrains-mono-v24-latin.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; }

/* ---------- tokens ---------- */
:root {
  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --wide: 114%;
  --w: 1240px;
  --gutter: clamp(16px, 4vw, 48px);
  --out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --blue: #1a52e6;
  --blue-deep: #1542bd;
  /* the accent next to the brand blue: a fill (marks, the Markdown token, "ready" states) and the same hue
     dark enough for text on light surfaces */
  --acc: #c4f25e;
  --acc-ink: #3b6d00;
  --coral: #e8502f;
  --bg: #f3f0e8;
  --bg-2: #e9e5da;
  --bg-3: #ddd8ca;
  --plate: #e9e5da;
  --plate-hover: #efebe2;
  --card: #fffdf8;
  --ink: #121316;
  --text: #2a2c31;
  --muted: #5f626a;
  --shadow-hard: 6px 8px 0 #121316;
  --shadow-soft: 0 30px 60px -28px rgba(30, 28, 20, 0.45);
  --hl: color-mix(in oklab, var(--acc) 78%, var(--card));
  /* rendered Markdown (.md-doc) and the buttons of the tool */
  --tb: rgba(18, 19, 22, 0.06);
  --tb-hover: rgba(18, 19, 22, 0.11);
  --tbl: #f3f0e8;
  --quote: color-mix(in oklab, var(--acc) 30%, #fffdf9);
  color-scheme: light;
  interpolate-size: allow-keywords;
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
html, body { overflow-x: clip; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 17px/1.55 var(--font); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 8px; }
::selection { background: var(--acc); color: #121316; }
.wrap { width: min(100% - 2 * var(--gutter), var(--w)); margin-inline: auto; }

.display { font-weight: 650; font-stretch: var(--wide); letter-spacing: -0.045em; line-height: 0.98; color: var(--ink); text-wrap: balance; }
h2.display { font-size: clamp(36px, 4.5vw, 64px); }
.lead { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; color: var(--muted); max-width: 50ch; text-wrap: pretty; }
/* the page reads like a Markdown file: a section heading starts with its own marker; the second content
   gives it empty alternative text, so screen readers skip it (browsers without the syntax keep the first) */
.md-h2::before { content: "##"; content: "##" / ""; position: relative; top: -0.62em; margin-right: 0.42em; font: 500 0.36em/1 var(--mono); font-stretch: 100%; letter-spacing: 0; color: var(--orn, var(--blue)); }
mark { background: var(--acc); color: #121316; padding: 0 0.14em; border-radius: 5px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

.pill { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 24px; border-radius: 999px; font: 600 16px/1 var(--font); font-stretch: 106%; letter-spacing: -0.01em; white-space: nowrap; transition: transform 0.3s var(--out), background-color 0.3s; }
.pill:hover { transform: translateY(-2px); }
.pill:active { transform: translateY(0) scale(0.98); }
.pill-blue { background: var(--blue); color: #fff; }
.pill-blue:hover { background: var(--blue-deep); }
.pill-white { background: #fff; color: #121316; }
.pill-lg { min-height: 62px; padding: 0 34px; font-size: 18px; }

/* scroll reveal: CSS scroll-driven animations, no script; without support everything simply stands */
@keyframes rise { from { opacity: 0; translate: 0 36px; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .rise { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
  }
}

/* ---------- header ---------- */
.hdr { position: sticky; top: 0; z-index: 50; }
.hdr-in { display: flex; align-items: center; gap: 24px; height: 76px; }
.brand { display: inline-flex; align-items: center; min-height: 44px; gap: 10px; font: 650 18px/1 var(--font); font-stretch: 108%; letter-spacing: -0.025em; color: var(--ink); white-space: nowrap; }
.brand img { width: 34px; height: 34px; flex: none; }
.nav { display: flex; gap: 2px; margin-left: auto; }
.nav a { padding: 12px 14px; border-radius: 999px; font-size: 15px; color: var(--muted); transition: background-color 0.25s, color 0.25s; }
.nav a:hover { background: var(--bg-2); color: var(--ink); }
.hdr .pill { min-height: 44px; padding: 0 20px; font-size: 15px; flex: none; }
.hdr.scrolled { background: color-mix(in oklab, var(--bg) 86%, transparent); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); }
@supports (animation-timeline: scroll()) {
  .hdr { animation: hdr-fill linear both; animation-timeline: scroll(root); animation-range: 0 120px; }
  @keyframes hdr-fill { to { background: color-mix(in oklab, var(--bg) 86%, transparent); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); } }
}

/* ---------- hero ---------- */
.hero { padding-block: clamp(24px, 5vh, 56px) clamp(40px, 6vw, 88px); }
.h1 { font-size: clamp(44px, 6.4vw, 96px); max-width: 22ch; }
.h1 .conf { color: var(--blue); }
.tok { font: 600 0.84em/1 var(--mono); font-stretch: 100%; letter-spacing: -0.04em; background: var(--acc); color: #121316; padding: 0.02em 0.14em 0.06em; border-radius: 0.14em; white-space: nowrap; }
.hero-row { display: grid; grid-template-columns: minmax(0, 4.4fr) minmax(0, 7.6fr); gap: clamp(32px, 5vw, 80px); align-items: start; margin-top: clamp(28px, 4vw, 52px); }
.hero-copy { padding-top: 6px; }
.hero-cta { margin-top: 36px; display: grid; gap: 18px; justify-items: start; }
.hero-note { font-size: 14px; line-height: 1.6; color: var(--muted); }
/* Chrome Web Store stats: the markup between the cws-stats markers in index.html is written by
   scripts/update-cws-stats.mjs twice a month; the look is here. Each block keeps to one line, so a narrow
   screen breaks the line only between the rating and the users. */
.cws-line { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; }
.cws-item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.cws-num { color: var(--ink); font-weight: 600; }
.cws-stars { position: relative; display: inline-block; line-height: 1; letter-spacing: 2px; }
.cws-stars-off { color: color-mix(in oklab, var(--ink) 18%, transparent); }
.cws-stars-on { position: absolute; top: 0; left: 0; overflow: hidden; white-space: nowrap; color: var(--ink); }
.hero-note-sub { display: block; }

.hero-art { position: relative; }
.deck { position: relative; aspect-ratio: 1392 / 912; cursor: pointer; }
.shot { position: absolute; margin: 0; transition: transform 0.9s var(--out), filter 0.9s, z-index 0s 0.35s; will-change: transform; }
.shot-a { inset: 0; }
.shot-a img { width: 100%; height: 100%; object-fit: contain; }
/* promo-2 is a bare editor screenshot; it gets the window size of promo-1's baked frame */
.shot-b { inset: 4% 4% 8% 4%; }
.shot-b img { width: 100%; height: 100%; object-fit: cover; object-position: left top; border-radius: 12px; box-shadow: 0 30px 50px -22px rgba(0, 0, 0, 0.5); }
.deck[data-front="0"] .shot-a { transform: rotate(-1.5deg); z-index: 2; }
.deck[data-front="0"] .shot-b { transform: translate(13%, 12%) rotate(4deg) scale(0.86); z-index: 1; filter: saturate(0.7) brightness(0.96); }
.deck[data-front="1"] .shot-a { transform: translate(-10%, 12%) rotate(-5deg) scale(0.86); z-index: 1; filter: saturate(0.7) brightness(0.96); }
.deck[data-front="1"] .shot-b { transform: rotate(1.2deg); z-index: 2; }
/* two toggle buttons, not tabs: both screenshots stay on the page, the buttons only choose the front one */
.deck-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--bg-2); margin-top: 36px; }
.deck-tabs button { min-height: 40px; padding: 0 16px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--muted); transition: background-color 0.3s, color 0.3s; }
.deck-tabs button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }

.float { position: absolute; z-index: 3; pointer-events: none; animation: drift 7s ease-in-out infinite; }
@keyframes drift { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
.float-zip { left: -40px; bottom: 64px; width: 292px; rotate: -3deg; background: var(--card); color: var(--text); border-radius: 20px; padding: 18px 18px 16px; box-shadow: var(--shadow-hard); }
.fz-top { display: flex; align-items: center; gap: 12px; }
.fz-ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--blue); color: #fff; font: 600 10px/1 var(--mono); flex: none; }
.fz-top b { display: block; font-size: 14px; font-weight: 600; color: var(--ink); }
.fz-top small { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.fz-bar { height: 8px; border-radius: 99px; background: var(--bg-2); overflow: hidden; margin-top: 16px; }
.fz-bar i { display: block; height: 100%; background: var(--acc); transform-origin: left; animation: fz-bar 7s linear infinite; }
.fz-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; font: 500 12px/1 var(--mono); color: var(--muted); }
@property --n { syntax: "<integer>"; inherits: false; initial-value: 0; }
.fz-count { animation: fz-count 7s linear infinite; counter-reset: n var(--n); font-variant-numeric: tabular-nums; }
.fz-count::before { content: counter(n); }
.fz-done { font-family: var(--font); font-weight: 600; font-size: 12px; color: #121316; background: var(--acc); padding: 5px 9px; border-radius: 99px; animation: fz-done 7s linear infinite; }
@keyframes fz-bar { 0%, 8% { transform: scaleX(0); } 62%, 100% { transform: scaleX(1); } }
@keyframes fz-count { 0%, 8% { --n: 0; } 62%, 100% { --n: 128; } }
@keyframes fz-done { 0%, 62% { opacity: 0; } 66%, 96% { opacity: 1; } 100% { opacity: 0; } }
.float-md { right: -22px; top: -30px; rotate: 4deg; display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 12px; border-radius: 16px; background: var(--acc); color: #121316; box-shadow: var(--shadow-hard); animation-delay: -3.5s; }
.fm-ico { display: grid; place-items: center; width: 36px; height: 44px; border-radius: 8px; background: #121316; color: var(--acc); font: 600 11px/1 var(--mono); flex: none; }
.float-md b { display: block; font: 600 13px/1.2 var(--mono); letter-spacing: -0.02em; }
.float-md small { display: block; font-size: 12px; margin-top: 4px; opacity: 0.75; }

/* ---------- sections ---------- */
.sec { padding-block: clamp(60px, 7.5vw, 108px); }
.sec-head { display: grid; gap: 20px; }
.sec-head.two { max-width: none; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: end; gap: 20px 72px; }
.sec-head.two .lead { padding-bottom: 6px; }

/* plates: filled, no frame; under the pointer they lift and brighten */
.plate { background: var(--plate); border-radius: 28px; transition: transform 0.35s var(--out), background 0.35s; }
@media (hover: hover) { .plate:hover { transform: translateY(-4px); background: var(--plate-hover); } }

/* ---------- how it works ---------- */
#how-it-works { --orn: var(--blue); }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 56px; }
.step { padding: 14px 14px 30px; }
.step h3 { margin: 26px 16px 0; font-size: 24px; font-weight: 600; font-stretch: 108%; letter-spacing: -0.03em; line-height: 1.1; color: var(--ink); }
.step p { margin: 10px 16px 0; color: var(--muted); font-size: 16px; max-width: 34ch; }

.scene { position: relative; height: 212px; border-radius: 20px; background: var(--card); overflow: hidden; }
.scene * { animation-duration: 5.2s; animation-iteration-count: infinite; animation-timing-function: var(--out); }
.cursor { position: absolute; width: 22px; height: 22px; z-index: 2; fill: var(--ink); stroke: var(--card); stroke-width: 1.4; stroke-linejoin: round; }
/* scene 1: open a page */
.mini-win { position: absolute; inset: 24px 24px 0 24px; border-radius: 14px 14px 0 0; background: var(--bg); display: grid; grid-template-columns: 32% 1fr; gap: 14px; padding: 16px; }
.mini-side { display: grid; gap: 10px; align-content: start; }
.mini-side i { height: 9px; border-radius: 5px; background: var(--bg-3); }
.mini-side i.on { animation-name: side-on; }
.mini-doc { display: grid; gap: 10px; align-content: start; }
.mini-doc b { height: 16px; width: 72%; border-radius: 6px; background: var(--ink); }
.mini-doc i { height: 8px; border-radius: 4px; background: var(--bg-3); }
.mini-doc i:nth-child(4) { width: 58%; }
.mini-doc > * { animation-name: doc-in; }
.sc-open .cursor { animation-name: cur-open; }
@keyframes side-on { 0%, 30% { background: var(--bg-3); } 36%, 100% { background: var(--blue); } }
@keyframes doc-in { 0%, 34% { opacity: 0; translate: 0 6px; } 46%, 90% { opacity: 1; translate: 0 0; } 100% { opacity: 0; } }
@keyframes cur-open { 0% { left: 78%; top: 82%; } 28% { left: 20%; top: 67px; scale: 1; } 32% { scale: 0.82; } 36% { scale: 1; } 70% { left: 20%; top: 67px; } 100% { left: 78%; top: 82%; } }
/* scene 2: click the extension */
.mini-bar { position: absolute; left: 22px; right: 22px; top: 24px; height: 44px; border-radius: 999px; background: var(--bg); display: flex; align-items: center; gap: 10px; padding: 0 8px 0 18px; }
.mini-bar .addr { height: 8px; width: 46%; border-radius: 4px; background: var(--bg-3); }
.mini-bar img { width: 28px; height: 28px; margin-left: auto; animation-name: ext-press; }
.mini-pop { position: absolute; right: 22px; top: 80px; width: min(66%, 250px); border-radius: 14px; background: var(--bg); padding: 12px; display: grid; gap: 8px; transform-origin: top right; box-shadow: 0 16px 32px -18px rgba(0, 0, 0, 0.45); animation-name: pop-in; }
.mini-pop span { font: 500 12px/1 var(--font); padding: 11px 12px; border-radius: 9px; background: var(--bg-2); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-pop .pri { background: var(--blue); color: #fff; animation-name: pri-press; }
.sc-click .cursor { animation-name: cur-click; }
@keyframes ext-press { 0%, 22% { scale: 1; } 25% { scale: 0.84; } 29%, 100% { scale: 1; } }
@keyframes pop-in { 0%, 27% { opacity: 0; transform: scale(0.92) translateY(-6px); } 35%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes pri-press { 0%, 60% { scale: 1; filter: none; } 63% { scale: 0.96; filter: brightness(1.2); } 68%, 100% { scale: 1; filter: none; } }
@keyframes cur-click { 0% { left: 36%; top: 84%; } 22% { left: calc(100% - 46px); top: 40px; } 42% { left: calc(100% - 46px); top: 40px; } 60% { left: 64%; top: 140px; } 82% { left: 64%; top: 140px; } 100% { left: 36%; top: 84%; } }
/* scene 3: get your Markdown */
.files { position: absolute; left: 50%; top: 28px; }
.file { position: absolute; left: -40px; top: 0; width: 80px; height: 96px; border-radius: 14px; background: var(--bg); box-shadow: 0 14px 26px -14px rgba(0, 0, 0, 0.45); padding: 14px 12px; display: flex; flex-direction: column; justify-content: flex-end; font: 600 13px/1 var(--mono); color: var(--ink); }
.file::before { content: ""; position: absolute; left: 12px; right: 18px; top: 16px; height: 6px; border-radius: 3px; background: var(--bg-3); box-shadow: 0 12px 0 var(--bg-3), 0 24px 0 var(--bg-3); }
.file.f1 { animation-name: fan-l; }
.file.f2 { animation-name: fan-c; z-index: 1; }
.file.f3 { animation-name: fan-r; background: var(--acc); color: #121316; z-index: 2; }
.file.f3::before { background: rgba(18, 19, 22, 0.25); box-shadow: 0 12px 0 rgba(18, 19, 22, 0.25), 0 24px 0 rgba(18, 19, 22, 0.25); }
.dest { position: absolute; left: 14px; right: 14px; bottom: 18px; display: flex; justify-content: center; gap: 8px; }
.dest span { padding: 10px 13px; border-radius: 999px; font: 600 12px/1 var(--font); background: var(--bg); color: var(--muted); animation-name: dest-on; }
.dest span:nth-child(2) { animation-delay: 0.22s; }
.dest span:nth-child(3) { animation-delay: 0.44s; }
@keyframes fan-l { 0%, 14% { transform: none; } 34%, 84% { transform: translateX(-88px) rotate(-10deg); } 100% { transform: none; } }
@keyframes fan-c { 0%, 14% { transform: none; } 34%, 84% { transform: translateY(-4px); } 100% { transform: none; } }
@keyframes fan-r { 0%, 14% { transform: none; } 34%, 84% { transform: translateX(88px) rotate(10deg); } 100% { transform: none; } }
@keyframes dest-on { 0%, 40% { background: var(--bg); color: var(--muted); } 48%, 86% { background: var(--ink); color: var(--bg); } 100% { background: var(--bg); color: var(--muted); } }

/* ---------- export modes ---------- */
#export-modes { --orn: var(--coral); }
.modes { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(20px, 3.5vw, 48px); margin-top: 56px; }
.mode-list { display: grid; gap: 8px; align-content: start; }
.mode { position: relative; padding: 22px 26px 24px; border-radius: 24px; cursor: pointer; transition: background-color 0.35s, box-shadow 0.35s; }
.mode h3 { font-size: 25px; font-weight: 600; font-stretch: 108%; letter-spacing: -0.03em; line-height: 1.1; color: var(--muted); transition: color 0.3s; }
.mode h3 button { text-align: left; }
/* the whole card is the button's target */
.mode h3 button::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.mode p { margin-top: 8px; font-size: 16px; color: var(--muted); max-width: 46ch; }
.mode.on { background: var(--card); box-shadow: var(--shadow-soft); }
.mode.on h3 { color: var(--ink); }
@media (hover: hover) { .mode:not(.on):hover { background: var(--bg-2); } }
.stage { position: relative; min-height: 480px; padding: clamp(20px, 3vw, 36px); border-radius: 30px; background: var(--plate); }
.tree-card { width: min(100%, 440px); background: var(--card); border-radius: 22px; padding: 14px; }
.tree-head, .tree li { display: flex; align-items: center; gap: 12px; border-radius: 12px; transition: background-color 0.5s var(--out), color 0.5s; }
.tree-head { padding: 12px 12px 12px; font-weight: 600; font-stretch: 106%; color: var(--ink); }
.tree-head small { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--muted); }
.tree li { padding: 9px 12px 9px calc(12px + (var(--d) - 1) * 26px); font-size: 15px; color: var(--muted); transition-delay: calc(var(--i) * 45ms); }
.ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sp { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--blue); color: #fff; font: 600 11px/1 var(--mono); }
.modes[data-scope="page"] .tree li[data-in~="page"],
.modes[data-scope="folder"] .tree li[data-in~="folder"],
.modes[data-scope="space"] .tree li,
.modes[data-scope="space"] .tree-head { background: var(--hl); color: #121316; }
.modes[data-scope="space"] .tree-head small { color: #121316; }
.out-card { display: grid; position: absolute; right: clamp(18px, 3vw, 36px); bottom: clamp(18px, 3vw, 36px); width: min(58%, 330px); padding: 20px 22px; border-radius: 22px; background: var(--ink); color: var(--bg); rotate: 2.5deg; box-shadow: var(--shadow-soft); }
.out-card > div { grid-area: 1 / 1; display: none; grid-template-columns: auto 1fr; gap: 4px 14px; align-items: center; opacity: 0; transition: opacity 0.45s, display 0.45s allow-discrete; }
.modes[data-scope="page"] .out-card [data-for="page"],
.modes[data-scope="folder"] .out-card [data-for="folder"],
.modes[data-scope="space"] .out-card [data-for="space"] { display: grid; opacity: 1; @starting-style { opacity: 0; } }
.oc-ico { grid-row: span 2; display: grid; place-items: center; width: 46px; height: 54px; border-radius: 10px; background: var(--acc); color: #121316; font: 600 12px/1 var(--mono); }
.out-card b { font: 600 15px/1.25 var(--mono); letter-spacing: -0.02em; word-break: break-word; }
.out-card small { font-size: 13px; opacity: 0.7; }

/* ---------- demo: a white sheet with a light editor (Max 28.09: "try it white") ---------- */
.band { position: relative; }
.sheet { margin-inline: clamp(8px, 1.4vw, 20px); border-radius: clamp(28px, 3.4vw, 48px); background: #ffffff; --ink: #121316; --text: #2a2c31; --muted: #62656c; --bg-2: #f1eee6; --orn: var(--blue); color: var(--text); }
.win { margin-top: 56px; border-radius: 26px; background: #f5f3ed; overflow: hidden; view-transition-name: md-win; }
.win-bar { display: flex; align-items: center; gap: 14px; padding: 12px 12px 12px 22px; background: #ece9e1; }
.win-file { display: flex; align-items: center; gap: 12px; min-width: 0; font: 500 14px/1 var(--mono); color: #2a2c31; }
.win-file span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-badge { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--acc); color: #121316; font: 600 10px/1 var(--mono); flex: none; }
.seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(18, 19, 22, 0.06); margin-left: auto; }
.seg button { min-height: 36px; padding: 0 16px; border-radius: 999px; font-size: 14px; font-weight: 500; color: #62656c; transition: background-color 0.3s, color 0.3s; }
.seg button[aria-selected="true"] { background: #121316; color: #ffffff; }
.seg button.flash { animation: tab-flash 1.6s ease-in-out; }
.copy { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; background: rgba(18, 19, 22, 0.07); color: #121316; font-size: 14px; font-weight: 500; transition: background-color 0.3s, color 0.3s; }
.copy:hover { background: rgba(18, 19, 22, 0.12); }
.copy.copied { background: var(--acc); color: #121316; }
.copy svg { width: 16px; height: 16px; }
.win-body { position: relative; height: 480px; }
.raw-wrap { position: absolute; inset: 0; }
.raw-hl, .raw { position: absolute; inset: 0; margin: 0; padding: 26px 30px; font: 400 14px/1.75 var(--mono); white-space: pre-wrap; overflow-wrap: break-word; overflow: auto; tab-size: 4; }
.raw-hl { display: none; color: #2a2c31; pointer-events: none; overflow: hidden; }
.raw { color: #2a2c31; caret-color: var(--blue); background: transparent; border: 0; resize: none; outline: none; }
/* the script paints the colour layer (.hl-on); only then the textarea's own text turns transparent */
.hl-on .raw-hl { display: block; }
.hl-on .raw { color: transparent; }
.hl-on .raw::selection { background: rgba(26, 82, 230, 0.18); color: transparent; }
.hl-c { color: #6b6e76; }
.hl-h1 { color: var(--blue); font-weight: 600; }
.hl-h2 { color: var(--blue); font-weight: 600; }
.hl-h3 { color: var(--acc-ink); font-weight: 600; }
.hl-li { color: #c2410c; }
.hl-b { color: #121316; font-weight: 600; }
.rendered { position: absolute; inset: 0; overflow: auto; padding: 34px clamp(24px, 5vw, 64px); background: #ffffff; }
.rendered[hidden] { display: none; }
/* a paste moves the focus here without a ring (focus({ focusVisible: false })); Tab shows the ring, inside:
   the window clips anything outside to a stray line under the bar */
.rendered:focus-visible { outline-offset: -6px; border-radius: 0 0 22px 22px; }
.md-note { color: var(--muted); font-size: 15px; }
/* ---------- rendered Markdown: one look for the demo on the landing and for the tool.
   The markup comes from assets/markdown-render.js ---------- */
.md-doc { max-width: 920px; margin-inline: auto; color: var(--text); font-size: 16px; line-height: 1.65; }
.md-doc h1, .md-doc h2, .md-doc h3, .md-doc h4, .md-doc h5, .md-doc h6 { color: var(--ink); font-weight: 650; font-stretch: 106%; letter-spacing: -0.02em; line-height: 1.2; margin: 1.5em 0 0.5em; }
.md-doc > :first-child { margin-top: 0.3em; }
.md-doc h1 { font-size: 32px; letter-spacing: -0.035em; font-stretch: 110%; }
.md-doc h2 { font-size: 24px; }
.md-doc h3 { font-size: 19px; }
.md-doc h4 { font-size: 17px; }
.md-doc p { margin: 0.8em 0; }
.md-doc strong { color: var(--ink); font-weight: 650; }
.md-doc a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.md-doc ul, .md-doc ol { padding-left: 1.4em; margin: 0.7em 0; }
.md-doc ul { list-style: disc; }
.md-doc ol { list-style: decimal; }
.md-doc li { margin: 0.3em 0; }
.md-doc li::marker { color: var(--blue); }
.md-doc li > ul, .md-doc li > ol { margin: 0.2em 0; }
/* a task: marked puts the checkbox first in the item and gives the item no class */
.md-doc li:has(> input[type="checkbox"], > p:first-child > input[type="checkbox"]) { list-style: none; margin-left: -1.2em; }
.md-doc li input[type="checkbox"] { accent-color: var(--blue); width: 16px; height: 16px; margin: 0 10px 0 0; vertical-align: -2px; }
.md-doc blockquote { margin: 1.1em 0; padding: 14px 20px; border-radius: 16px; background: var(--quote); color: var(--text); }
.md-doc blockquote p { margin: 0; }
.md-doc table { display: block; overflow-x: auto; width: 100%; margin: 1.1em 0; border-collapse: separate; border-spacing: 0 6px; font-size: 15px; }
.md-doc th { padding: 4px 16px; font-size: 13px; font-weight: 500; color: var(--muted); }
/* a header without its own alignment reads left; :--: and --: columns keep theirs, as their cells do */
.md-doc th:not([align]) { text-align: left; }
.md-doc tr { --row: var(--tbl); }
.md-doc td { padding: 12px 16px; background: var(--row); vertical-align: top; }
.md-doc td + td { box-shadow: -2px 0 0 var(--row); }
.md-doc td:first-child { border-radius: 12px 0 0 12px; font-weight: 600; color: var(--ink); }
.md-doc td:last-child { border-radius: 0 12px 12px 0; }
.md-doc code { font: 500 0.86em/1.5 var(--mono); background: var(--tb); color: var(--ink); padding: 0.12em 0.4em; border-radius: 6px; font-variant-ligatures: none; }
.md-doc pre { margin: 1.1em 0; border-radius: 18px; overflow: hidden; position: relative; background: #16181d; }
/* the colour is the base colour of the github-dark theme (.hljs): the rule above would paint plain code dark on dark */
.md-doc pre code { display: block; overflow-x: auto; padding: 0; background: transparent; color: #c9d1d9; border-radius: 0; font-size: 13.5px; }
.md-doc pre .hljs { padding: 38px 22px 20px; line-height: 1.7; background: #16181d; }
.md-doc hr { height: 3px; border: 0; border-radius: 3px; background: var(--tb-hover); margin: 1.8em 0; }
.md-doc img { max-width: 100%; border-radius: 14px; }
.md-doc del { color: var(--muted); }
.code-block-wrap { position: relative; }
.code-copy-btn, .code-lang-label { user-select: none; -webkit-user-select: none; }
.code-copy-btn { position: absolute; top: 8px; right: 8px; z-index: 2; min-height: 30px; padding: 0 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.8); font: 500 12px/1 var(--font); transition: background-color 0.2s, color 0.2s; }
.code-copy-btn:hover { background: rgba(255, 255, 255, 0.18); color: #fff; }
.code-copy-btn.copied { background: var(--acc); color: #121316; }
.code-lang-label { position: absolute; top: 14px; left: 22px; font: 500 11px/1 var(--mono); color: rgba(255, 255, 255, 0.45); text-transform: lowercase; }
/* the switch announces itself after the page has changed the tab by itself: the tab turns lime,
   holds, fades back to its own colours; once, 1.6s. Three hard blinks read as an alarm (Max 28.09).
   No start or end frame: they are the tab as it is */
@keyframes tab-flash { 15%, 55% { background-color: var(--acc); color: #121316; } }
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
::view-transition-old(md-win), ::view-transition-new(md-win) { animation-duration: 0.35s; animation-timing-function: var(--out); }

.syntax { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }
.syntax li { display: flex; align-items: center; gap: 16px; padding: 18px 22px; border-radius: 20px; background: #f3f0e8; color: #2a2c31; font-size: 16px; transition: background-color 0.3s; }
.syntax li:hover { background: #ebe7dd; }
.syntax code { min-width: 74px; font: 600 15px/1 var(--mono); color: var(--acc-ink); }

/* ---------- sound familiar: blue like the final call (Max 28.09, picked over lime) ---------- */
.band-accent { background: #1a52e6; --ink: #ffffff; --text: #eef3ff; --muted: #d8e2ff; --orn: var(--acc); color: var(--text); }
.kicker { font-size: clamp(20px, 1.8vw, 24px); font-weight: 600; font-stretch: 106%; letter-spacing: -0.02em; color: var(--ink); }
.notes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px; margin-top: 60px; }
.note { grid-column: span 2; padding: 30px 30px 34px; border-radius: 24px; background: #fffdf8; color: #2a2c31; font-size: 19px; line-height: 1.45; box-shadow: 6px 8px 0 #121316; rotate: var(--tilt, 0deg); transition: rotate 0.4s var(--out), translate 0.4s var(--out); }
.note:nth-child(-n+2) { grid-column: span 3; }
.note strong { font-weight: 600; color: #121316; }
@media (hover: hover) { .note:hover { rotate: 0deg; translate: 0 -4px; } }
@keyframes note-in { from { opacity: 0; translate: 0 60px; rotate: calc(var(--tilt, 0deg) * 4); } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .note { animation: note-in linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
  }
}

/* ---------- FAQ ---------- */
#faq { --orn: var(--blue); }
.faq { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.35fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.faq-side { position: sticky; top: 112px; display: grid; gap: 22px; justify-items: start; }
.faq-list { display: grid; gap: 10px; }
.qa { border-radius: 22px; background: var(--plate); transition: background 0.35s, box-shadow 0.35s; }
.qa[open] { background: var(--card); box-shadow: var(--shadow-soft); }
.qa summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 20px 20px 26px; cursor: pointer; list-style: none; }
.qa summary::-webkit-details-marker { display: none; }
.qa h3 { font-size: 18px; font-weight: 600; font-stretch: 102%; letter-spacing: -0.015em; line-height: 1.35; color: var(--ink); }
.tgl { position: relative; width: 36px; height: 36px; border-radius: 50%; background: var(--bg); flex: none; transition: rotate 0.4s var(--out), background-color 0.3s; }
.tgl::before, .tgl::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; border-radius: 2px; background: var(--ink); translate: -50% -50%; }
.tgl::after { rotate: 90deg; }
.qa[open] .tgl { rotate: 45deg; background: var(--acc); }
.qa[open] .tgl::before, .qa[open] .tgl::after { background: #121316; }
.qa .a { padding: 0 26px 26px; color: var(--muted); max-width: 66ch; }
.qa::details-content { block-size: 0; overflow-y: clip; transition: block-size 0.45s var(--out), content-visibility 0.45s allow-discrete; }
.qa[open]::details-content { block-size: auto; }

/* ---------- alternatives ---------- */
#alternatives { --orn: var(--coral); }
.alts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 56px; }
.alt { display: flex; flex-direction: column; gap: 14px; padding: 30px 30px 32px; }
.alt h3 { font-size: 26px; font-weight: 600; font-stretch: 108%; letter-spacing: -0.03em; line-height: 1.1; color: var(--ink); }
.alt p { color: var(--muted); }
.alt .verdict { margin-top: auto; padding-top: 8px; font-weight: 600; color: var(--ink); }
.verdict span { background: var(--acc); color: #121316; padding: 0.1em 0.3em; border-radius: 6px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.cmp-wrap { margin-top: 48px; overflow-x: auto; }
.cmp { width: 100%; min-width: 860px; border-collapse: separate; border-spacing: 0 8px; font-size: 15px; }
.cmp caption { caption-side: top; text-align: left; padding-bottom: 12px; font-size: 14px; color: var(--muted); max-width: 80ch; }
.cmp th { padding: 0 18px 2px; text-align: left; font-size: 13px; font-weight: 500; color: var(--muted); }
.cmp tr { --row: var(--bg-2); }
.cmp td { padding: 17px 18px; background: var(--row); color: var(--text); }
.cmp td + td { box-shadow: -2px 0 0 var(--row); }
.cmp td:first-child { border-radius: 16px 0 0 16px; font-weight: 600; color: var(--ink); }
.cmp td:last-child { border-radius: 0 16px 16px 0; }
.cmp tr.us { --row: var(--blue); }
.cmp tr.us td { color: #fff; }
.cmp .free { display: inline-block; padding: 5px 12px; border-radius: 999px; background: var(--acc); color: #121316; font-weight: 600; }

/* ---------- final call (blue band) ---------- */
.band-blue { background: var(--blue); --ink: #fff; --text: #eef3ff; --muted: #d8e2ff; color: var(--text); overflow: hidden; }
.cta-in { padding-block: clamp(84px, 12vw, 160px) clamp(40px, 5vw, 64px); display: grid; gap: 26px; justify-items: start; }
.cta-h { font-size: clamp(44px, 8vw, 120px); max-width: 15ch; }
.nw { white-space: nowrap; }
.band-blue .lead { color: var(--muted); }
.trust { display: flex; flex-wrap: wrap; gap: 12px 30px; margin-top: 10px; font-size: 15px; color: var(--muted); }
.trust li { display: inline-flex; align-items: center; gap: 10px; }
.trust svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.marquee { padding-block: 26px 34px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.track { display: flex; width: max-content; animation: marquee 46s linear infinite; }
.track span { display: inline-flex; align-items: center; gap: 44px; padding-right: 44px; font-size: clamp(22px, 2.4vw, 34px); font-weight: 600; font-stretch: 112%; letter-spacing: -0.03em; color: #fff; white-space: nowrap; }
.track span::after { content: "#"; font: 500 0.8em/1 var(--mono); color: var(--acc); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- footer (variant A, approved 2026-09-28) ---------- */
.ftr-in { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 24px 48px; padding-block: 44px 40px; font-size: 14px; color: var(--muted); }
.ftr-name { font-size: 15px; font-weight: 600; font-stretch: 106%; color: var(--ink); margin-bottom: 4px; }
.ftr-tools { display: flex; align-items: baseline; gap: 10px; margin-top: 14px; }
.ftr-tools span { font-size: 13px; color: var(--muted); }
.ftr-tools a { color: var(--text); font-weight: 500; }
.ftr-tools a:hover { color: var(--blue); }
.maker-credit { margin: 0; line-height: 1.5; text-align: right; }
.maker-credit a { color: var(--text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.maker-credit a:hover { color: var(--ink); }
.maker-credit-note { display: block; }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .nav { display: none; }
  .hdr .pill { margin-left: auto; }
  .hero-row { grid-template-columns: minmax(0, 1fr); }
  .hero-art { margin-top: 12px; }
  .steps { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
  .modes { grid-template-columns: minmax(0, 1fr); }
  .sec-head.two { grid-template-columns: minmax(0, 1fr); }
  .syntax { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .notes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .note, .note:nth-child(-n+2) { grid-column: span 1; }
  .note:last-child { grid-column: span 2; }
  .faq { grid-template-columns: minmax(0, 1fr); }
  .faq-side { position: static; }
  .alts { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
  .hdr-in { height: 64px; gap: 12px; }
  .brand { font-size: 15px; gap: 8px; }
  .brand img { width: 28px; height: 28px; }
  .hdr .pill { min-height: 44px; padding: 0 16px; font-size: 14px; }
  .float-zip { left: 4px; bottom: 64px; width: 230px; padding: 12px 14px; }
  .float-md { display: none; }
  .deck-tabs { margin-top: 54px; }
  .deck-tabs button { min-height: 44px; }
  .stage { min-height: 0; padding-bottom: 24px; }
  .out-card { position: relative; right: auto; bottom: auto; width: auto; margin: -18px 10px 0 auto; max-width: 320px; }
  .win-bar { flex-wrap: wrap; padding: 12px; }
  .win-file { flex: 1 1 100%; padding: 4px 6px; }
  .seg { margin-left: 0; }
  .seg button { min-height: 44px; }
  .copy { margin-left: auto; }
  .win-body { height: 420px; }
  .raw-hl, .raw { padding: 20px 18px; font-size: 13px; }
  .syntax { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .syntax li { flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px 18px; font-size: 15px; }
  .notes { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .note, .note:nth-child(-n+2), .note:last-child { grid-column: span 1; font-size: 17px; padding: 24px; }
  .qa summary { padding: 16px 16px 16px 20px; }
  .qa .a { padding: 0 20px 22px; }
  .cmp { min-width: 0; border-spacing: 0; }
  .cmp thead { display: none; }
  .cmp caption { display: block; }
  .cmp tbody, .cmp tr, .cmp td { display: block; }
  .cmp tr { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; padding: 18px 20px; margin-bottom: 10px; border-radius: 20px; background: var(--bg-2); }
  .cmp tr.us { background: var(--blue); }
  .cmp td + td { box-shadow: none; }
  .cmp td, .cmp td:first-child, .cmp td:last-child, .cmp tr.us td { padding: 0; background: none; border-radius: 0; }
  .cmp td:first-child { grid-column: 1 / -1; font-size: 18px; }
  .cmp td:not(:first-child)::before { content: attr(data-label); display: block; font-size: 12px; font-weight: 500; opacity: 0.65; margin-bottom: 2px; }
  .ftr-in { flex-direction: column; gap: 22px; padding-block: 36px 88px; }
  .maker-credit { text-align: left; }
  .ftr-tools a, .ftr-name a, .maker-credit a { display: inline-block; padding: 0.85rem 0; margin: -0.85rem 0; }
}
@media (max-width: 420px) {
  .hdr-in { gap: 8px; }
  .brand { font-size: 14px; gap: 7px; }
  .brand span { letter-spacing: -0.035em; }
  .hdr .pill { padding: 0 14px; }
  .scene { height: 200px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; }
  .fz-count::before { content: "128"; }
  .fz-bar i { transform: none; }
  /* no blinking: the tab is lime while the class is on, the script takes the class off */
  .seg button.flash { background-color: var(--acc); color: #121316; }
}
/* Markdown shown as it is: no ligatures turning <!-- or -> into arrows. Last in the sheet, because
   the font shorthand of these rules resets the ligatures */
.raw, .raw-hl, .syntax code, .tok, .fm-ico, .fz-meta, .float-md b, .out-card b, .oc-ico, .win-file, .file { font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0; }