/* ---------- The Drift landing page: only what is this page's own. The tokens, both themes, the glass
   surfaces (bar, card), Button and the halo are ui.css, the apps' shared components (mirrored, unchanged).
   The page is the apps' canvas, full bleed: the top bar's glass capsules, a hero, two glass cards (one
   per app, a drawing of it inside), and the policies at the foot. */

/* the glass as both apps bake it (glass-shared.js, which the apps apply in script): edges .68/.71, the
   frost's saturation 1.3, no global shadow; bars .35/.38, cards (the hero lens) .42/.47 with the shadow.
   (The light theme's own --frost and --depth still win.) */
:root { --edge-hi: 0.68; --edge-lo: 0.71; --frost: blur(21.5px) saturate(1.3) brightness(0.6); --depth: 0 0 #0000; --grid-dot: #34343c; }
:root[data-theme="light"] { --grid-dot: #c6c6ce; }
.surface--bar, .topbar-account { --edge-hi: 0.42; --edge-lo: 0.39; }   /* (the bars' lines, as the apps' bar glass) */
.site-account-anchor { display: none; }
.surface--card { --edge-hi: 0.42; --edge-lo: 0.47; --depth: 0 22px 60px rgba(0, 0, 0, 0.66), 0 6px 18px rgba(0, 0, 0, 0.42); }

/* ---------- the page: the canvas's dot grid, as both apps draw it, edge to edge. dots.js redraws the dots on a
   canvas (.site-dots) so they can react to the pointer; then the CSS dots go. */
html { background: var(--bg-page); }
body {
  min-height: 100vh; min-height: 100dvh;
  background: radial-gradient(circle, var(--grid-dot) 0.67px, transparent 1.17px) 0 0 / 13.2px 13.2px, var(--bg-page);
  background-attachment: fixed;
  overflow-x: hidden;
}
:root.fx-dots body { background: var(--bg-page); }
.site-dots { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.site { position: relative; z-index: 1; }
.site {
  min-height: 100vh; min-height: 100dvh;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  padding: 16px clamp(16px, 3vw, 32px) 10px;
  overflow-x: clip;   /* (the glow behind the cards spills past the edges) */
}

/* ---------- the top bar: the brand capsule on the left, the apps on the right (the apps' .brand and .topbar-right) */
.site-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-8); }
.site-brand { gap: 10px; padding: 5px 16px 5px 9px; color: var(--text-1); text-decoration: none; }
.site-brand .brand-name { padding: 0; }
.site-mark { width: 26px; height: 26px; display: block; flex: none; }
.site-mark rect { fill: #1c1c1c; }
.site-mark path { stroke: #f2f2f2; }
.site-mark circle { fill: #4b8ef5; }

/* ---------- the hero */
.site-main {
  width: min(1200px, 100%); margin: 0 auto;
  display: grid; align-content: center; gap: clamp(20px, 5vh, 56px);
  padding: clamp(28px, 7vh, 80px) 0 clamp(20px, 4vh, 44px);
}
.site-hero { display: grid; justify-items: center; gap: clamp(8px, 1.6vh, 16px); text-align: center; }
.site-title {
  margin: 0;
  font-size: clamp(48px, min(7.5vw, 12vh), 112px); font-weight: var(--weight-strong); line-height: 1; letter-spacing: -0.045em;
  color: var(--text-strong);
  background: linear-gradient(180deg, var(--text-strong) 30%, var(--text-2) 130%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  padding-bottom: 0.06em;   /* (room for the descender-less clip) */
}
.site-pitch { margin: 0; max-width: 34ch; font-size: clamp(17px, min(1.75vw, 2.7vh), 24px); line-height: 1.35; letter-spacing: -0.012em; color: var(--text-2); text-wrap: balance; }
/* soft clearings that hug the title and the line under it, each its own feathered ellipse just past its
   words: the page's own colour over the dots (the CSS ones and dots.js's canvas alike, so the pointer's ripple
   and lens fade out there too), so the words always read cleanly and the dots come close around them. Under
   the words (z-index -1 in .site's stacking context), over the canvas. */
.site-title, .site-pitch { position: relative; }
.site-title::before, .site-pitch::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side,
    var(--bg-page) 0%, var(--bg-page) 52%,
    color-mix(in srgb, var(--bg-page) 80%, transparent) 66%,
    color-mix(in srgb, var(--bg-page) 45%, transparent) 80%,
    color-mix(in srgb, var(--bg-page) 15%, transparent) 92%,
    transparent 100%);
}
.site-title::before { inset: -0.42em -0.5em -0.36em; }   /* (em: the title's size) */
.site-pitch::before { inset: -1.3em -1.6em; }

/* ---------- the two apps: card glass (the dots behind it, and the ripple, are what it frosts) */
.site-apps { position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
.site-app {
  display: grid; gap: var(--sp-12); min-width: 0; padding: 10px;
  color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent;
  transition: background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
  /* the lift (tilt.js, Flow's nodes' hover lift): the pop and the tilt toward the pointer, on its spring */
  transform: perspective(var(--lift-depth, 1400px)) rotateX(var(--lift-rx, 0deg)) rotateY(var(--lift-ry, 0deg)) scale(var(--lift-s, 1));
}
.site-app:hover { will-change: transform; }
/* pointing at one (or Tab to it): the chosen glass over the card's own */
.site-app:is(:hover, :focus-visible) { background: var(--chosen-fill), var(--glass-sheet), var(--bg-card); box-shadow: var(--chosen-rim), var(--depth); }
.site-app:focus-visible { box-shadow: var(--chosen-rim), var(--depth), var(--halo); }
.site-app-foot { display: flex; align-items: center; gap: var(--sp-16); padding: 2px 6px 4px; }
.site-app-text { display: grid; gap: 3px; min-width: 0; }
.site-app-name { font-size: clamp(17px, 1.6vw, 21px); font-weight: var(--weight-strong); letter-spacing: -0.015em; color: var(--text-1); }
.site-app-desc { font-size: clamp(13px, 1.05vw, 14px); line-height: 1.4; color: var(--text-2); }
.site-open { flex: none; margin-left: auto; padding: 0 14px; }
.site-app:is(:hover, :focus-visible) .site-open { background: var(--primary-fill-hover); --state-shadow: var(--primary-rim-hover); }
.site-arrow { display: inline-block; transition: transform 260ms var(--ease-jelly); }
.site-app:is(:hover, :focus-visible) .site-arrow { transform: translateX(3px); }
/* the halo on Tab (ui.css shows it once the apps' script marks keyboard use; this page has none) */
.site .btn:focus-visible { box-shadow: var(--state-shadow, 0 0 #0000), var(--halo); color: var(--text-1); }

/* the stage: a window onto the app (the page's colour, a hairline, r10) */
.site-stage {
  position: relative; display: block; height: clamp(190px, 38vh, 420px); overflow: hidden;
  border-radius: var(--r-md); background: var(--bg-page);
  box-shadow: inset 0 0 0 0.5px rgb(255 255 255 / 0.18);
  container-type: size;
}
:root[data-theme="light"] .site-stage { box-shadow: inset 0 0 0 0.5px rgb(0 0 0 / 0.14); }

/* ---------- the miniatures: Write and Flow as two screenshots of sibling apps, from ONE set of mini
   components. Each is the real component (ui.css, the apps' index.html) at one scale: the window is
   1000 real px wide, so --u (one real px) is 0.1cqw, and every size is "real px × u". Only each app's own
   content (Write's document; Flow's group, nodes and wires) is its own (.mw-*, .mf-*). */
.mini {
  --u: 0.1cqw;
  --mini-glass: rgb(11 11 13);   /* the bar and card glass at rest on black (the frost blurs the dots away) */
  --mini-ink: rgb(255 255 255 / 0.18);     /* text lines drawn as bars */
  background: radial-gradient(circle, var(--grid-dot) max(0.6px, calc(0.9 * var(--u))), transparent max(1px, calc(1.4 * var(--u)))) 0 0 / calc(13.2 * var(--u)) calc(13.2 * var(--u)), var(--bg-page);
  font-family: var(--font-ui); color: var(--text-1); white-space: nowrap; letter-spacing: -0.005em; line-height: 1.45;
}
:root[data-theme="light"] .mini { --mini-glass: rgb(251 251 252); --mini-ink: rgb(0 0 0 / 0.13); }
:where(.mini) > *, :where(.mini-top) > * { position: absolute; box-sizing: border-box; }
:where(.mini) :where(span, i) { display: block; }
/* the glass: a bar (r12) or a card (r14), the apps' rim */
.mini-cap, .mini-panel, .mini-hint, .mini-stats, .mini-strip { background: var(--mini-glass); box-shadow: var(--rim); }
:root[data-theme="light"] :is(.mini-cap, .mini-panel, .mini-hint, .mini-stats, .mini-strip) { box-shadow: var(--rim), 0 calc(10 * var(--u)) calc(28 * var(--u)) rgb(20 20 30 / 0.085); }
/* the top bar: 8 down, 14 in, capsules 44 tall, 10 apart (#topbar) */
.mini-top { position: absolute; left: calc(14 * var(--u)); right: calc(14 * var(--u)); top: calc(8 * var(--u)); height: calc(44 * var(--u)); display: flex; gap: calc(10 * var(--u)); }
.mini-top > * { position: relative; flex: none; }
.mini-cap { display: flex; align-items: center; gap: calc(8 * var(--u)); height: calc(44 * var(--u)); padding: 0 calc(5 * var(--u)); border-radius: calc(12 * var(--u)); }
.mini-right { margin-left: auto; }
.mini-brand { padding: 0 calc(8 * var(--u)) 0 calc(11 * var(--u)); font-size: calc(15 * var(--u)); font-weight: var(--weight-strong); letter-spacing: -0.01em; }
.mini-qbtn { display: flex; align-items: center; gap: calc(7 * var(--u)); height: calc(34 * var(--u)); padding: 0 calc(10 * var(--u)); border-radius: calc(8 * var(--u)); font-size: calc(13 * var(--u)); font-weight: var(--weight-medium); color: var(--text-2); }
.mini-status { display: flex; align-items: center; gap: calc(7 * var(--u)); padding: 0 calc(12 * var(--u)); font-size: calc(12 * var(--u)); font-weight: var(--weight-medium); color: var(--text-2); }
.mini-status::before { content: ''; width: calc(6 * var(--u)); height: calc(6 * var(--u)); border-radius: 50%; background: var(--ok); }
.mini-icon { display: grid; place-items: center; width: calc(34 * var(--u)); height: calc(34 * var(--u)); border-radius: calc(8 * var(--u)); color: var(--text-2); }
.mini-burger { width: calc(14 * var(--u)); height: calc(10 * var(--u)); background: linear-gradient(currentColor, currentColor) 0 0 / 100% calc(1.4 * var(--u)) no-repeat, linear-gradient(currentColor, currentColor) 0 50% / 100% calc(1.4 * var(--u)) no-repeat, linear-gradient(currentColor, currentColor) 0 100% / 100% calc(1.4 * var(--u)) no-repeat; }
/* the right panel: a card, 14 from the edges, under the top bar (#panel, --right-w narrowed to 280 for the small window) */
.mini-panel { top: calc(70 * var(--u)); right: calc(14 * var(--u)); bottom: calc(14 * var(--u)); width: calc(280 * var(--u)); padding: calc(24 * var(--u)) calc(22 * var(--u)); border-radius: calc(14 * var(--u)); white-space: normal; }
.mini-title { font-size: calc(19 * var(--u)); font-weight: var(--weight-strong); letter-spacing: -0.015em; }
.mini-sub { margin-top: calc(3 * var(--u)); font-size: calc(13 * var(--u)); color: var(--text-2); }
.mini-section { margin: calc(22 * var(--u)) 0 calc(8 * var(--u)); font-size: calc(13 * var(--u)); font-weight: var(--weight-strong); }
.mini-row { margin: 0 calc(-8 * var(--u)); padding: calc(5 * var(--u)) calc(8 * var(--u)); border-radius: calc(8 * var(--u)); font-size: calc(13 * var(--u)); color: var(--text-2); }
.mini-row--on { background: var(--hl-fill); box-shadow: var(--hl-rim); color: var(--text-strong); }
.mini-row--in { padding-left: calc(22 * var(--u)); }
.mini-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(8 * var(--u)); }
.mini-tile { padding: calc(12 * var(--u)) calc(12 * var(--u)); border-radius: calc(10 * var(--u)); background: var(--tile-fill); box-shadow: var(--rim-tile); font-size: calc(19 * var(--u)); font-weight: var(--weight-strong); }
.mini-tile small { display: block; margin-bottom: calc(4 * var(--u)); font-size: calc(12 * var(--u)); font-weight: 400; color: var(--text-2); }
/* the hint (bottom left) and the bottom-right bar (.hint, .stats: a bar, 44 tall, 12px words) */
.mini-hint, .mini-stats { bottom: calc(16 * var(--u)); height: calc(44 * var(--u)); padding: 0 calc(18 * var(--u)); display: flex; align-items: center; border-radius: calc(12 * var(--u)); font-size: calc(12 * var(--u)); color: var(--text-2); }
.mini-hint { left: calc(16 * var(--u)); }
.mini-stats { right: calc(304 * var(--u)); }   /* (--right-w + 10 + the panel's 14) */
/* the tool strip (#toolstrip: a bar column, 44 wide, 5 padding, 34 tools) */
.mini-strip { left: calc(14 * var(--u)); top: calc(90 * var(--u)); width: calc(44 * var(--u)); padding: calc(5 * var(--u)); display: flex; flex-direction: column; gap: calc(2 * var(--u)); border-radius: calc(12 * var(--u)); }
.mini-tool { height: calc(34 * var(--u)); border-radius: calc(8 * var(--u)); background: radial-gradient(closest-side, var(--text-3) 0 calc(5 * var(--u)), transparent calc(5.5 * var(--u))) center / calc(14 * var(--u)) calc(14 * var(--u)) no-repeat; }
.mini-tool--on { background-color: transparent; background-image: radial-gradient(closest-side, var(--text-strong) 0 calc(5 * var(--u)), transparent calc(5.5 * var(--u))), var(--chosen-fill); background-size: calc(14 * var(--u)) calc(14 * var(--u)), auto; background-position: center; background-repeat: no-repeat; box-shadow: var(--chosen-rim); }
.mini-sep { width: calc(20 * var(--u)); height: 1px; margin: calc(3 * var(--u)) auto; background: var(--line-soft); }

/* ---------- Write's own: the document sheet (a card under the top bar, the text at the editor's sizes) */
.mw-sheet {
  left: calc(54 * var(--u)); width: calc(600 * var(--u)); top: calc(70 * var(--u)); bottom: calc(-20 * var(--u));
  padding: calc(40 * var(--u)) calc(48 * var(--u)); display: flex; flex-direction: column; align-items: flex-start; gap: calc(6 * var(--u));
  border-radius: calc(14 * var(--u)); background: var(--mini-glass); box-shadow: var(--rim);
}
:root[data-theme="light"] .mw-sheet { box-shadow: var(--rim), 0 calc(10 * var(--u)) calc(28 * var(--u)) rgb(20 20 30 / 0.085); }
.mw-h1 { margin-bottom: calc(4 * var(--u)); font-size: calc(30 * var(--u)); font-weight: 700; letter-spacing: -0.02em; color: var(--text-strong); }
.mw-p { font-size: calc(16 * var(--u)); line-height: 1.6; }
.mw-p > * { display: inline; }
.mw-p b { font-weight: 700; color: var(--text-strong); }
.mw-mk { color: var(--text-3); }   /* (the line with the cursor shows its Markdown marks) */
/* Vim's block cursor: the chosen glass on the letter (Write's #editor .cm-fat-cursor) */
.mw-vim { padding: 0 calc(0.5 * var(--u)); border-radius: calc(5 * var(--u)); box-shadow: inset 0 0 0 1px var(--text-3); transition: background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }   /* (unfocused: hollow, as the app's) */
/* vague lines, drawn as bars (as Flow's node bodies) */
.mw-bars { align-self: stretch; display: grid; gap: calc(10 * var(--u)); margin: calc(4 * var(--u)) 0 calc(6 * var(--u)); }
.mw-bars i, .mw-bar { display: block; height: calc(5 * var(--u)); width: 92%; border-radius: calc(2.5 * var(--u)); background: var(--mini-ink); }
.mw-bars .mw-bar--m { width: 70%; }
.mw-bar { width: calc(160 * var(--u)); }
.mw-bar--s { width: calc(110 * var(--u)); }
/* a displayed equation, typeset as KaTeX sets it (its serif, italic variables, the integral's limits) */
.mw-math { align-self: center; display: flex !important; align-items: center; gap: calc(3 * var(--u)); margin: calc(10 * var(--u)) 0; font-family: 'Latin Modern Math', 'STIX Two Math', 'Cambria Math', 'Times New Roman', serif; font-size: calc(21 * var(--u)); color: var(--text-strong); line-height: 1; }
.mw-math span, .mw-math sup { display: inline-block; }
.mw-mi { font-style: italic; }
.mw-int { font-size: 2em; font-style: italic; margin-right: calc(-2 * var(--u)); transform: translateY(calc(-1 * var(--u))); }
.mw-lims { display: flex !important; flex-direction: column; justify-content: space-between; height: calc(48 * var(--u)); margin-right: calc(4 * var(--u)); font-size: 0.6em; }
.mw-lims span:last-child { margin-left: calc(-6 * var(--u)); }
.mw-sup { font-size: 0.7em; transform: translateY(-0.55em); margin-right: calc(4 * var(--u)); }
.mw-sup sup { font-size: 0.75em; transform: translateY(-0.4em); }
.mw-d .mw-mi { margin-left: calc(1 * var(--u)); }
.mw-eq { margin: 0 calc(8 * var(--u)); }
.mw-frac { display: inline-flex !important; flex-direction: column; align-items: center; font-size: 0.9em; }
.mw-frac > span:first-child { padding: 0 calc(3 * var(--u)) calc(3 * var(--u)); border-bottom: max(1px, calc(1.2 * var(--u))) solid currentColor; }
.mw-frac > span:last-child { padding-top: calc(3 * var(--u)); }
.mw-rad { border-top: max(1px, calc(1.2 * var(--u))) solid currentColor; padding: calc(1 * var(--u)) calc(1 * var(--u)) 0; margin-left: calc(-1 * var(--u)); }
.mw-h2 { margin-top: calc(6 * var(--u)); font-size: calc(21 * var(--u)); font-weight: 700; letter-spacing: -0.015em; color: var(--text-strong); }
.mw-task { display: flex; align-items: center; gap: calc(10 * var(--u)); height: calc(26 * var(--u)); }
.mw-task i { width: calc(14 * var(--u)); height: calc(14 * var(--u)); border-radius: calc(4 * var(--u)); box-shadow: inset 0 0 0 calc(1.5 * var(--u)) var(--text-3); }
.mw-done i { background: var(--text-strong); box-shadow: none; }
.mw-done .mw-bar { opacity: 0.55; }

/* ---------- Flow's own: a group (r28), nodes (r16, the node glass), wires (1.75, 70%) */
.mf-group { left: calc(86 * var(--u)); top: calc(100 * var(--u)); width: calc(390 * var(--u)); height: calc(300 * var(--u)); border-radius: calc(28 * var(--u)); background: color-mix(in srgb, #7d818c 5%, rgb(255 255 255 / 0.03)); box-shadow: inset 0 1px 0 rgb(255 255 255 / calc(0.3 * var(--edge-hi))), inset 0 0 0 1px rgb(255 255 255 / calc(0.07 * var(--edge-lo))); }
:root[data-theme="light"] .mf-group { background: rgb(255 255 255 / 0.55); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.1); }
.mf-glabel { position: absolute; left: calc(18 * var(--u)); top: calc(12 * var(--u)); display: flex; align-items: center; gap: calc(7 * var(--u)); font-size: calc(12.5 * var(--u)); font-weight: var(--weight-medium); color: var(--text-2); }
.mf-dot { width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: 50%; }
.mf-dot--a { background: #4b8ef5; } .mf-dot--b { background: #3ecf8e; } .mf-dot--c { background: #f0b54a; }
.mf-node { display: flex; flex-direction: column; gap: calc(8 * var(--u)); padding: calc(12 * var(--u)) calc(14 * var(--u)); border-radius: calc(16 * var(--u)); background: rgb(27 27 28); box-shadow: inset 0 1px 0 rgb(255 255 255 / calc(0.3 * var(--edge-hi))), inset 0 0 0 1px rgb(255 255 255 / calc(0.1 * var(--edge-lo))), 0 calc(3 * var(--u)) calc(10 * var(--u)) rgb(0 0 0 / 0.4); transition: box-shadow var(--t-fast) var(--ease); }
:root[data-theme="light"] .mf-node { background: #fff; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.12), 0 calc(3 * var(--u)) calc(10 * var(--u)) rgb(20 20 30 / 0.08); }
.mf-nt { display: flex; align-items: center; gap: calc(7 * var(--u)); margin-bottom: calc(2 * var(--u)); font-size: calc(12.5 * var(--u)); font-weight: var(--weight-strong); }
.mf-l { height: calc(4 * var(--u)); width: 100%; border-radius: calc(2 * var(--u)); background: var(--mini-ink); }
.mf-l--s { width: 62%; }
.mf-n1 { left: calc(102 * var(--u)); top: calc(150 * var(--u)); width: calc(160 * var(--u)); }
.mf-n2 { left: calc(290 * var(--u)); top: calc(285 * var(--u)); width: calc(160 * var(--u)); }
.mf-n3 { left: calc(520 * var(--u)); top: calc(205 * var(--u)); width: calc(160 * var(--u)); }
.mf-wires { left: 0; top: 0; width: calc(1000 * var(--u)); height: calc(1000 * var(--u)); overflow: visible; }
.mf-wires path { fill: none; stroke: var(--text-1); stroke-width: 1.75; stroke-linecap: round; opacity: 0.7; vector-effect: non-scaling-stroke; }
:root[data-theme="light"] .mf-wires path { stroke: #3a3a3a; }
.mf-wlabel { left: calc(368 * var(--u)); top: calc(208 * var(--u)); padding: 0 calc(11 * var(--u)); border-radius: 999px; font-size: calc(12 * var(--u)); font-weight: var(--weight-medium); line-height: calc(20 * var(--u)); background: linear-gradient(180deg, rgb(255 255 255 / 0.16), rgb(255 255 255 / 0.05)), rgb(24 24 30); box-shadow: inset 0 1px 0 rgb(255 255 255 / calc(0.4 * var(--edge-hi))), 0 calc(4 * var(--u)) calc(12 * var(--u)) rgb(0 0 0 / 0.35); }
:root[data-theme="light"] .mf-wlabel { background: rgb(255 255 255 / 0.95); box-shadow: inset 0 0 0 0.5px rgb(0 0 0 / 0.14), 0 2px 6px rgb(0 0 0 / 0.08); }

/* pointing at an app wakes its miniature: Write's editor takes the focus (Vim's block turns to glass, as the app's
   does when the text is focused), Flow's Ship node is selected (white, as the canvas's selection) */
.site-app:is(:hover, :focus-visible) .mw-vim { background: var(--chosen-fill); box-shadow: var(--chosen-rim); }
.site-app:is(:hover, :focus-visible) .mf-n3 { box-shadow: 0 0 0 calc(1.5 * var(--u)) var(--text-strong), 0 calc(3 * var(--u)) calc(10 * var(--u)) rgb(0 0 0 / 0.4); }

/* ---------- the foot: the name, and the policies as small quiet buttons */
.site-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-8); }
.site-foot-name { padding-left: 9px; font-size: var(--text-sm); color: var(--text-3); }
.site-links { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-right: -8px; }

/* ---------- narrow: the cards stack, the page scrolls */
@media (max-width: 760px) {
  .site-main { align-content: start; }
  .site-apps { grid-template-columns: minmax(0, 1fr); }
  .site-stage { height: min(58vw, 320px); }
}
@media (max-width: 480px) {
  .site { padding: 12px 16px 8px; }
  .site-app-foot { flex-wrap: wrap; gap: var(--sp-10); }
  .site-open { margin-left: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .site-app, .site-arrow, .mf-node, .mw-vim { transition: none; }
  .site-app { transform: none; }
  .site-app:is(:hover, :focus-visible) .site-arrow, .site .btn:active { transform: none; }
}
@media print {
  body { background: #fff; }
  .surface { -webkit-backdrop-filter: none; backdrop-filter: none; }
}