/* Fonts, self-hosted. Licenses are next to the files (SIL Open Font License 1.1). Latin from Atkinson Hyperlegible, Persian from Vazirmatn. */
@font-face { font-family: "Atkinson Hyperlegible Next Variable"; font-style: normal; font-display: swap; font-weight: 200 800; src: url("fonts/atkinson-hyperlegible-next-latin-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Atkinson Hyperlegible Mono Variable"; font-style: normal; font-display: swap; font-weight: 200 800; src: url("fonts/atkinson-hyperlegible-mono-latin-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Vazirmatn Variable"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("fonts/vazirmatn-arabic-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
/* From the Veilway design system (veilway-ui, packages/ui/src/styles): tokens, both color schemes, the glass material and the base type. Keep in step with it by hand. */
/* Everything that is not a colour. Themes never touch this file: a theme only replaces the --c-* and --glass-* values in colors.css. */
:root {
	/* Latin letters and digits resolve to Atkinson Hyperlegible, Persian to Vazirmatn, in one stack for both languages, so mixed lines (a Persian label next to an address) look the same everywhere. */
	--font-sans: "Atkinson Hyperlegible Next Variable", "Vazirmatn Variable", system-ui, sans-serif;
	--font-mono: "Atkinson Hyperlegible Mono Variable", "Vazirmatn Variable", ui-monospace, monospace;
	--text-1: 0.75rem;
	--text-2: 0.8125rem;
	--text-3: 0.9375rem;
	--text-4: 1.0625rem;
	--text-5: 1.3125rem;
	--text-6: 1.75rem;
	--text-7: 2.5rem;
	--leading: 1.5;
	--leading-tight: 1.2;
	--weight-regular: 400;
	--weight-strong: 620;
	--weight-display: 680;
	--tracking-display: -0.018em;
	--s-1: 4px;
	--s-2: 8px;
	--s-3: 12px;
	--s-4: 16px;
	--s-5: 24px;
	--s-6: 32px;
	--s-7: 48px;
	--s-8: 64px;
	/* Three radii, nested: a control inside a surface inside a window. Nothing is ever fully rounded. */
	--r-1: 4px;
	--r-2: 10px;
	--r-3: 18px;
	--control-h: 36px;
	--dur-1: 110ms;
	--dur-2: 180ms;
	--dur-3: 280ms;
	/* The one slow duration: the light behind the glass coming up or going down with the connection. */
	--dur-4: 620ms;
	--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	/* The slant of the stroke in the app icon, used for the backdrop bands, the selected mark in navigation and the connect key. */
	--slant: 25.6deg;
}
/* Persian has no capitals to lean on and taller marks above and below the line: one step larger at small sizes, more leading, never any tracking. */
:lang(fa) {
	--text-1: 0.8125rem;
	--text-2: 0.875rem;
	--text-3: 0.96875rem;
	--leading: 1.8;
	--leading-tight: 1.45;
	--weight-strong: 650;
	--weight-display: 700;
	--tracking-display: 0;
}
@media (pointer: coarse) {
	:root { --control-h: 44px; }
}
:root, [data-scheme] {
	--shadow-ink: color-mix(in srgb, var(--c-bg) var(--shadow-ink-bg), black);
	/* One light from above, in three parts: a crisp contact line, a short mid shadow and a wide ambient one that grows with the height of the layer. */
	--shadow-1: 0 1px 1px color-mix(in srgb, var(--shadow-ink) 18%, transparent), 0 2px 6px -1px color-mix(in srgb, var(--shadow-ink) 20%, transparent), 0 10px 20px -10px color-mix(in srgb, var(--shadow-ink) 32%, transparent);
	--shadow-2: 0 1px 1px color-mix(in srgb, var(--shadow-ink) 18%, transparent), 0 4px 10px -2px color-mix(in srgb, var(--shadow-ink) 20%, transparent), 0 22px 44px -18px color-mix(in srgb, var(--shadow-ink) 50%, transparent);
	--shadow-3: 0 1px 2px color-mix(in srgb, var(--shadow-ink) 20%, transparent), 0 8px 20px -6px color-mix(in srgb, var(--shadow-ink) 26%, transparent), 0 32px 64px -20px color-mix(in srgb, var(--shadow-ink) 64%, transparent);
	--shadow-4: 0 2px 4px color-mix(in srgb, var(--shadow-ink) 22%, transparent), 0 12px 28px -8px color-mix(in srgb, var(--shadow-ink) 30%, transparent), 0 52px 110px -24px color-mix(in srgb, var(--shadow-ink) 80%, transparent);
	--wash-info: color-mix(in srgb, var(--c-info) var(--wash-strength), var(--c-surface));
	--wash-success: color-mix(in srgb, var(--c-success) var(--wash-strength), var(--c-surface));
	--wash-warning: color-mix(in srgb, var(--c-warning) var(--wash-strength), var(--c-surface));
	--wash-danger: color-mix(in srgb, var(--c-danger) var(--wash-strength), var(--c-surface));
	/* Hover and pressed fills. They sit under primary text only, which has contrast to spare. */
	--hover: color-mix(in srgb, var(--c-text) 7%, transparent);
	--pressed: color-mix(in srgb, var(--c-text) 12%, transparent);
}
@media (prefers-reduced-motion: reduce) {
	:root:not([data-motion="full"]) { --dur-1: 0.01ms; --dur-2: 0.01ms; --dur-3: 0.01ms; --dur-4: 0.01ms; }
}
[data-motion="reduced"] { --dur-1: 0.01ms; --dur-2: 0.01ms; --dur-3: 0.01ms; --dur-4: 0.01ms; }
:root {
	--wash-strength: 14%;
	--glow-1: 80%;
	--glow-2: 80%;
	--shaft: 20%;
	--shaft-white: 60%;
	--sheen: 6%;
	--shade: 5%;
	--well: 55%;
	--scrim: 50%;
	--shadow-ink-bg: 35%;
	--glass-saturate: 1.5;
}
:root, [data-scheme="dark"] {
	color-scheme: dark;
	--c-bg: #091c22;
	--c-field-1: #1a6652;
	--c-field-2: #283b88;
	--c-surface: #11282e;
	--c-sunken: #06161a;
	--c-text: #f0f7f4;
	--c-text-muted: #d3e2dd;
	--c-line: #274447;
	--c-line-strong: #a2bbb6;
	--c-accent: #22795a;
	--c-on-accent: #f1f8f4;
	--c-accent-ink: #9ae6c5;
	--c-info: #b7cbfc;
	--c-success: #9ae6c5;
	--c-warning: #f2cc78;
	--c-danger: #ffa086;
	--c-chart-1: #3ba87d;
	--c-chart-2: #6e8ce2;
	--c-focus: #c6d5ff;
	--glass-tint: 0.36;
	--glass-tint-float: 0.6;
	--glass-tint-thick: 0.76;
	--glass-blur: 28px;
}
@media (prefers-color-scheme: light) {
	:root:not([data-scheme]) {
		color-scheme: light;
		--c-bg: #caddd6;
		--c-field-1: #6fc4a4;
		--c-field-2: #67b6c4;
		--c-surface: #fbfdfc;
		--c-sunken: #edf3f0;
		--c-text: #0e1d1a;
		--c-text-muted: #2d3e39;
		--c-line: #c3d2cc;
		--c-line-strong: #50665f;
		--c-accent: #22795a;
		--c-on-accent: #f1f8f4;
		--c-accent-ink: #0f4e3a;
		--c-info: #244592;
		--c-success: #0f4e3a;
		--c-warning: #6b4400;
		--c-danger: #96221a;
		--c-chart-1: #1b8c63;
		--c-chart-2: #3b66c4;
		--c-focus: #244592;
		--glass-tint: 0.36;
		--glass-tint-float: 0.6;
		--glass-tint-thick: 0.76;
		--glass-blur: 28px;
	}
}
[data-scheme="light"] {
	color-scheme: light;
	--c-bg: #caddd6;
	--c-field-1: #6fc4a4;
	--c-field-2: #67b6c4;
	--c-surface: #fbfdfc;
	--c-sunken: #edf3f0;
	--c-text: #0e1d1a;
	--c-text-muted: #2d3e39;
	--c-line: #c3d2cc;
	--c-line-strong: #50665f;
	--c-accent: #22795a;
	--c-on-accent: #f1f8f4;
	--c-accent-ink: #0f4e3a;
	--c-info: #244592;
	--c-success: #0f4e3a;
	--c-warning: #6b4400;
	--c-danger: #96221a;
	--c-chart-1: #1b8c63;
	--c-chart-2: #3b66c4;
	--c-focus: #244592;
	--glass-tint: 0.36;
	--glass-tint-float: 0.6;
	--glass-tint-thick: 0.76;
	--glass-blur: 28px;
}
/* Liquid glass. A pane is a thin scrim of the theme's surface colour over a blurred, saturated copy of what is behind it, lit from above: a specular line on the top edge, a soft gradient down the surface, a darker lip at the bottom, a shadow underneath and a trace of grain against banding.
   The app paints its own backdrop, so a pane never sits over unknown content. src/theme/tokens.ts lists every colour that can be behind each kind of pane and test/contrast.test.ts fails when any text allowed on it drops under AA. The numbers the two share (--sheen, --shade, --well, --scrim, --glow-*, --shaft*) come from colors.css.
   Four layers, thinnest to thickest:
   sheet    rests on the backdrop and holds content. Nothing but the backdrop is ever behind it, so it can be the clearest.
   chrome   navigation and tooltips. Content scrolls under it, so it is denser and blurs wider.
   popover  menus and toasts. They can open over anything, the dimmed page included.
   dialog   the same density as a popover, the widest blur and the deepest shadow, over a scrim.
   A sheet inside a sheet does not blur again: glass is not stacked on glass. */
:root { --glass-on: 1; }
:root, [data-scheme], [data-material] {
	--glass-rim: light-dark(rgb(255 255 255 / 0.95), rgb(255 255 255 / 0.3));
	--glass-lip: light-dark(rgb(0 0 0 / 0.07), rgb(0 0 0 / 0.34));
	/* The edge of a pane of float glass is green. Here it is the accent, mixed into the border. */
	--glass-edge: light-dark(color-mix(in srgb, color-mix(in srgb, var(--c-accent-ink) 30%, white) 78%, transparent), color-mix(in srgb, color-mix(in srgb, var(--c-accent-ink) 40%, var(--c-text)) 17%, transparent));
	/* Light only ever helps dark text and shade only ever helps light text, so each scheme keeps the harmful one inside the checked amount and is free with the other. The grain takes the rest of that amount. */
	--glass-light: light-dark(rgb(255 255 255 / 0.2), rgb(255 255 255 / calc(var(--sheen) * 0.5)));
	--glass-dark: light-dark(rgb(0 0 0 / calc(var(--shade) * 0.5)), rgb(0 0 0 / 0.2));
	--glass-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .16 -.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	--well-bg: color-mix(in srgb, var(--c-sunken) calc(100% - (100% - var(--well)) * var(--glass-on)), transparent);
}
/* Solid fallbacks: the OS asks for less transparency, the browser cannot blur, or the user chose solid. Every pane keeps its edge, gradient and shadow and loses only what it lets through. data-material="glass" is the user overriding the OS. */
@media (prefers-reduced-transparency: reduce) {
	:root:not([data-material="glass"]) { --glass-on: 0; --glass-off: none; --glass-grain: none; }
}
[data-material="solid"] { --glass-on: 0; --glass-off: none; --glass-grain: none; }
[data-material="glass"] { --glass-on: 1; --glass-off: initial; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	:root, [data-scheme], [data-material] { --glass-on: 0; --glass-off: none; --glass-grain: none; }
}
.vw-glass {
	--g-tint: var(--glass-tint);
	--g-blur: 1;
	--g-shadow: var(--shadow-2);
	background-color: color-mix(in srgb, var(--c-surface) calc(100% - (1 - var(--g-tint)) * var(--glass-on) * 100%), transparent);
	background-image: var(--glass-grain), linear-gradient(to bottom, var(--glass-light), transparent 46%, transparent 58%, var(--glass-dark));
	/* The blur radius is fixed per layer and never animated. */
	-webkit-backdrop-filter: var(--glass-off, blur(calc(var(--glass-blur) * var(--g-blur))) saturate(var(--glass-saturate)));
	backdrop-filter: var(--glass-off, blur(calc(var(--glass-blur) * var(--g-blur))) saturate(var(--glass-saturate)));
	border: 1px solid var(--glass-edge);
	border-radius: var(--r-3);
	box-shadow: inset 0 1px 0 var(--glass-rim), inset 0 -1px 0 var(--glass-lip), 0 0 0 1px color-mix(in srgb, var(--shadow-ink) 16%, transparent), var(--g-shadow);
}
.vw-glass[data-depth="1"] { --g-shadow: var(--shadow-1); }
.vw-glass[data-layer="chrome"] { --g-tint: var(--glass-tint-float); --g-blur: 1.25; --g-shadow: var(--shadow-2); }
.vw-glass[data-layer="popover"] { --g-tint: var(--glass-tint-thick); --g-shadow: var(--shadow-3); }
.vw-glass[data-layer="dialog"] { --g-tint: var(--glass-tint-thick); --g-blur: 1.5; --g-shadow: var(--shadow-4); }
.vw-glass :where(.vw-glass:not([data-layer]), .vw-glass[data-layer="sheet"]) { --glass-off: none; --glass-grain: none; --g-shadow: none; }
/* A well is a recess cut into a pane: more of the sunken colour, a shadow under its top edge, no blur of its own. Status colours and chart marks, which a bare sheet cannot always hold at AA, go in a well or on a wash. */
.vw-well {
	background: var(--well-bg);
	border: 1px solid var(--c-line);
	border-radius: var(--r-2);
	box-shadow: inset 0 1px 3px color-mix(in srgb, var(--shadow-ink) 34%, transparent);
}
/* The page behind the glass: the background colour, two glows, and the strokes of the app icon as shafts of light at the icon's slant. The two glows sit in opposite corners and each has faded out before the other passes half strength; the two small ones stay under half. The contrast rules count on that. data-fixed pins the light to the viewport so content scrolls through it. data-lit="off" turns the light down; the client does that while it is not connected. */
.vw-backdrop { position: relative; isolation: isolate; background-color: var(--c-bg); }
.vw-backdrop::before, .vw-backdrop::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; transition: opacity var(--dur-4) var(--ease); }
.vw-backdrop[data-fixed]::before, .vw-backdrop[data-fixed]::after { position: fixed; }
.vw-backdrop::before {
	background-image:
		radial-gradient(ellipse 95% 85% at 8% -6%, color-mix(in srgb, var(--c-field-1) var(--glow-1), transparent), transparent 74%),
		radial-gradient(ellipse 100% 90% at 104% 104%, color-mix(in srgb, var(--c-field-2) var(--glow-2), transparent), transparent 72%),
		radial-gradient(ellipse 38% 34% at 96% 6%, color-mix(in srgb, var(--c-field-2) calc(var(--glow-2) * 0.4), transparent), transparent 76%),
		radial-gradient(ellipse 40% 36% at -2% 92%, color-mix(in srgb, var(--c-field-1) calc(var(--glow-1) * 0.36), transparent), transparent 76%);
}
.vw-backdrop::after {
	--shaft-ink: color-mix(in srgb, var(--c-field-1), white var(--shaft-white));
	inset-block-end: auto;
	block-size: min(100%, 1040px);
	background-image: linear-gradient(115.6deg, transparent 0 41%, color-mix(in srgb, var(--shaft-ink) var(--shaft), transparent) 41% 52.5%, transparent 52.5% 55.2%, color-mix(in srgb, var(--shaft-ink) calc(var(--shaft) * 0.66), transparent) 55.2% 57.9%, transparent 57.9% 59.8%, color-mix(in srgb, var(--shaft-ink) calc(var(--shaft) * 0.42), transparent) 59.8% 62.5%, transparent 62.5% 64.4%, color-mix(in srgb, var(--shaft-ink) calc(var(--shaft) * 0.22), transparent) 64.4% 67.1%, transparent 67.1%);
	-webkit-mask-image: linear-gradient(to bottom, #000 34%, transparent);
	mask-image: linear-gradient(to bottom, #000 34%, transparent);
}
.vw-backdrop[data-lit="off"]::before { opacity: 0.55; }
.vw-backdrop[data-lit="off"]::after { opacity: 0.14; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; }
.vw-root {
	font-family: var(--font-sans);
	font-size: var(--text-3);
	line-height: var(--leading);
	font-weight: var(--weight-regular);
	color: var(--c-text);
	font-synthesis: none;
	-webkit-font-smoothing: antialiased;
	accent-color: var(--c-accent);
}
.vw-root :where(h1, h2, h3, h4, p, ul, ol, dl, dd, figure) { margin: 0; }
.vw-root :where(ul, ol) { padding: 0; list-style: none; }
.vw-root :where(button, input, select, textarea) { font: inherit; color: inherit; letter-spacing: inherit; }
.vw-root :where(a) { color: var(--c-accent-ink); text-underline-offset: 0.2em; }
.vw-root :where(svg) { display: block; flex: none; }
.vw-root :focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.vw-root ::selection { background: color-mix(in srgb, var(--c-accent) 55%, transparent); color: var(--c-text); }
.vw-display { font-size: var(--text-7); line-height: 1.08; font-weight: var(--weight-display); letter-spacing: calc(var(--tracking-display) * 1.4); text-wrap: balance; }
:lang(fa) .vw-display { line-height: 1.4; }
.vw-h1 { font-size: var(--text-6); line-height: var(--leading-tight); font-weight: var(--weight-strong); letter-spacing: var(--tracking-display); text-wrap: balance; }
.vw-h2 { font-size: var(--text-5); line-height: var(--leading-tight); font-weight: var(--weight-strong); letter-spacing: var(--tracking-display); text-wrap: balance; }
.vw-h3 { font-size: var(--text-4); line-height: var(--leading-tight); font-weight: var(--weight-strong); }
.vw-muted { color: var(--c-text-muted); }
.vw-small { font-size: var(--text-2); }
/* Addresses, keys and identifiers. They read left to right in both languages and never take Persian digits. */
.vw-code { font-family: var(--font-mono); font-size: 0.94em; direction: ltr; unicode-bidi: isolate; overflow-wrap: anywhere; }
.vw-num { font-variant-numeric: tabular-nums; }
/* Latin digits at display size: Vazirmatn's, the face Persian digits are already set in, with a plain zero. Keys, addresses and running text keep the slashed zero of the text and mono faces. */
.vw-figure { font-family: "Vazirmatn Variable", var(--font-sans); font-variant-numeric: tabular-nums; }
.vw-sr { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.vw-icon { inline-size: 1.25em; block-size: 1.25em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* Icons that point along the reading direction turn around with it. */
[dir="rtl"] .vw-icon[data-flip] { transform: scaleX(-1); }
/* The page itself. Everything below uses the design system's tokens and nothing else. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}
body { min-block-size: 100vh; background-color: var(--c-bg); overflow-x: clip; }
.wrap { inline-size: 100%; max-inline-size: 1180px; margin-inline: auto; padding-inline: var(--s-4); }
@media (min-width: 720px) {
	.wrap { padding-inline: var(--s-6); }
}
.skip { position: absolute; inset-inline-start: var(--s-4); inset-block-start: -100px; z-index: 10; padding: var(--s-2) var(--s-3); border-radius: var(--r-2); background: var(--c-surface); color: var(--c-text); }
.skip:focus { inset-block-start: var(--s-3); }
.vw-root a:hover { text-decoration-thickness: 2px; }
/* Header: the panel's chrome layer, a bar of glass with the brand and the few places to go. */
.head { padding-block: var(--s-4) 0; }
.top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-2) var(--s-3); --g-shadow: var(--shadow-1); }
.brand { padding: var(--s-1); border-radius: var(--r-2); display: inline-flex; align-items: center; gap: var(--s-3); text-decoration: none; font-size: var(--text-4); font-weight: var(--weight-strong); }
.vw-root .brand { color: var(--c-text); }
.brand img { inline-size: 32px; block-size: 32px; }
.top nav ul { display: flex; align-items: center; gap: var(--s-1); }
.top nav a { display: inline-flex; align-items: center; min-block-size: var(--control-h); padding-inline: var(--s-3); border-radius: var(--r-2); color: var(--c-text); text-decoration: none; font-weight: var(--weight-strong); transition: background-color var(--dur-1) var(--ease); }
.vw-root .top nav a { color: var(--c-text); }
.top nav a:hover { background: var(--hover); }
.top nav .tg svg { margin-inline-end: var(--s-2); }
.top nav .lang { border: 1px solid color-mix(in srgb, var(--c-text) 30%, transparent); margin-inline-start: var(--s-2); }
@media (max-width: 480px) {
	.top nav .code-link { display: none; }
	.top nav .tg span { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
	.top nav .tg svg { margin-inline-end: 0; }
}
@media (max-width: 400px) {
	.top { gap: var(--s-2); padding-inline: var(--s-2); }
	.brand { gap: var(--s-2); }
	.top nav a { padding-inline: var(--s-2); }
	.top nav .lang { margin-inline-start: 0; }
}
/* Buttons, as in controls.css */
.vw-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-block-size: 44px; padding: var(--s-1) var(--s-5); border: 1px solid color-mix(in srgb, var(--c-text) 30%, transparent); border-radius: var(--r-2); background: color-mix(in srgb, var(--c-text) 4%, transparent); font-weight: var(--weight-strong); line-height: var(--leading-tight); text-decoration: none; transition: background-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease); }
.vw-root .vw-button { color: var(--c-text); }
.vw-button:hover { background: var(--hover); }
.vw-root .vw-button[data-variant="primary"] { background: var(--c-accent) linear-gradient(to bottom, rgb(255 255 255 / 0.09), transparent 42%); border-color: transparent; color: var(--c-on-accent); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.22), var(--shadow-1); }
.vw-button[data-variant="primary"]:hover { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.22), 0 0 0 3px color-mix(in srgb, var(--c-accent) 40%, transparent); }
/* Hero: what it is, who it is for, and the two buttons. The light of the backdrop does the rest. */
.hero { padding-block: var(--s-7) var(--s-7); }
@media (min-width: 900px) {
	.hero { padding-block: calc(var(--s-8) + var(--s-6)) var(--s-8); }
}
.hero h1 { font-size: clamp(2.5rem, 1.1rem + 4.4vw, 4.75rem); line-height: 1.02; font-weight: var(--weight-display); letter-spacing: -0.032em; text-wrap: balance; max-inline-size: 11em; }
:lang(fa) .hero h1 { font-size: clamp(2.25rem, 1.1rem + 3.8vw, 4.125rem); line-height: 1.4; letter-spacing: 0; }
.hero-body { display: grid; gap: var(--s-6); margin-block-start: var(--s-6); }
@media (min-width: 900px) {
	.hero-body { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--s-8); margin-block-start: var(--s-7); align-items: end; }
}
.lede { font-size: var(--text-4); max-inline-size: 34em; }
:lang(fa) .lede { font-size: 1.125rem; }
.actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-block-start: var(--s-5); }
/* Not a box: a sentence that carries its own sign, set apart by a rule in the warning color. */
.steps { display: grid; gap: var(--s-2); margin-block-start: var(--s-5); max-inline-size: 34em; counter-reset: step; }
.steps li { display: grid; grid-template-columns: 1.5em minmax(0, 1fr); gap: var(--s-2); counter-increment: step; }
.steps li::before { content: counter(step) "."; font-weight: var(--weight-strong); color: var(--c-accent-ink); font-variant-numeric: tabular-nums; }
.have-link { margin-block-start: var(--s-3); color: var(--c-text-muted); }
.done-list + .more { margin-block-start: var(--s-4); }
.caveat { padding-inline-start: var(--s-4); border-inline-start: 3px solid var(--c-warning); max-inline-size: 30em; }
.caveat strong { display: flex; align-items: center; gap: var(--s-2); color: var(--c-warning); font-size: var(--text-4); margin-block-end: var(--s-1); }
.caveat .vw-icon { stroke-width: 1.8; }
/* Sections */
.section { padding-block: var(--s-7); }
@media (min-width: 900px) {
	.section { padding-block: var(--s-8); }
}
.section h2 { font-size: var(--text-6); line-height: var(--leading-tight); font-weight: var(--weight-strong); letter-spacing: var(--tracking-display); text-wrap: balance; }
.intro { display: grid; gap: var(--s-3); }
@media (min-width: 900px) {
	.intro { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: var(--s-8); align-items: baseline; }
}
.intro p { max-inline-size: 38em; }
h3 { font-size: var(--text-4); line-height: var(--leading-tight); font-weight: var(--weight-strong); }
/* The mark of the app icon, a stroke at its slant: the bullet of a list, and the state of a row. */
.mark { display: inline-block; inline-size: 4px; block-size: 0.95em; border-radius: 1px; background: var(--c-accent-ink); transform: skewX(var(--slant)); }
.done-list { display: grid; gap: var(--s-3); }
.done-list li { position: relative; padding-inline-start: var(--s-5); max-inline-size: 42em; }
.done-list li::before { content: ""; position: absolute; inset-inline-start: 4px; inset-block-start: 0.35em; inline-size: 4px; block-size: 0.95em; border-radius: 1px; background: var(--c-accent-ink); transform: skewX(var(--slant)); }
:lang(fa) .done-list li::before { inset-block-start: 0.5em; }
/* What it does differently: the points as rows, the transports beside them on one sheet. */
.diff { display: grid; gap: var(--s-6); margin-block-start: var(--s-7); align-items: start; }
@media (min-width: 900px) {
	.diff { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--s-8); }
}
.points > li { padding-block: var(--s-4); border-block-start: 1px solid var(--c-line-strong); }
.points > li:first-child { padding-block-start: 0; border-block-start: 0; }
.points p { margin-block-start: var(--s-2); color: var(--c-text-muted); max-inline-size: 38em; }
.sheet { padding: var(--s-5); --g-shadow: var(--shadow-2); }
@media (min-width: 720px) {
	.sheet { padding: var(--s-6); }
}
.sheet > h3 { font-size: var(--text-5); letter-spacing: var(--tracking-display); }
.sheet > p, .sheet .lead { margin-block-start: var(--s-2); color: var(--c-text-muted); }
.transports { margin-block-start: var(--s-4); }
.transports li { display: grid; grid-template-columns: 1fr auto; gap: var(--s-2) var(--s-4); align-items: baseline; padding-block: var(--s-3); border-block-start: 1px solid var(--c-line); }
.transports .vw-code { font-size: var(--text-2); color: var(--c-text-muted); }
.rating { font-size: var(--text-2); color: var(--c-text-muted); }
/* Two ways in: a wide sheet for the node and a narrower one for the apps. They hold different things, so they are shaped differently. */
.ways { display: grid; gap: var(--s-5); align-items: start; }
@media (min-width: 900px) {
	.ways { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--s-6); }
}
.ways .sheet > h2 { font-size: var(--text-6); line-height: var(--leading-tight); font-weight: var(--weight-strong); letter-spacing: var(--tracking-display); text-wrap: balance; }
.ways .sheet > * + * { margin-block-start: var(--s-3); }
.ways .sheet > h2 + p { margin-block-start: var(--s-3); }
.ways p { max-inline-size: 38em; }
.cmd { padding: var(--s-4); direction: ltr; text-align: left; overflow-x: auto; margin-block-start: var(--s-4); }
.cmd .vw-code { display: block; font-size: var(--text-3); white-space: pre-wrap; overflow-wrap: anywhere; }
.rows > div { display: grid; gap: var(--s-1); padding-block: var(--s-3); border-block-start: 1px solid var(--c-line); }
.rows dt { font-weight: var(--weight-strong); }
.rows dd { margin: 0; color: var(--c-text-muted); }
@media (min-width: 720px) {
	.rows.wide > div { gap: var(--s-4); }
}
.ways .rows { margin-block-start: var(--s-4); }
.ways .actions { margin-block-start: var(--s-5); }
/* Where it stands */
.stand { display: grid; gap: var(--s-6); margin-block-start: var(--s-7); }
@media (min-width: 900px) {
	.stand { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--s-8); }
}
.stand h3 { margin-block-end: var(--s-2); }
.stand .rows > div:first-child { border-block-start: 0; }
.state dt { display: flex; align-items: baseline; gap: var(--s-3); }
.state .mark { inline-size: 6px; flex: none; }
.state[data-state="half"] .mark { background: linear-gradient(to top, var(--c-accent-ink) 50%, transparent 50%); box-shadow: inset 0 0 0 1.5px var(--c-accent-ink); }
.state[data-state="none"] .mark { background: transparent; box-shadow: inset 0 0 0 1.5px var(--c-accent-ink); }
.state dd { padding-inline-start: calc(6px + var(--s-3)); }
@media (min-width: 720px) {
	.rows.wide > .state { grid-template-columns: 12em minmax(0, 1fr); }
	.state dd { padding-inline-start: 0; }
}
.stand details { margin-block-start: var(--s-6); }
@media (min-width: 900px) {
	.stand details { margin-block-start: 0; }
}
summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-block-size: var(--control-h); cursor: pointer; font-size: var(--text-5); font-weight: var(--weight-strong); letter-spacing: var(--tracking-display); list-style: none; border-radius: var(--r-2); }
summary::-webkit-details-marker { display: none; }
summary .vw-icon { transition: transform var(--dur-2) var(--ease); }
details[open] > summary .vw-icon { transform: rotate(180deg); }
details .done-list { margin-block-start: var(--s-4); }
details .done-list + h3, details .lead + .done-list { margin-block-start: var(--s-4); }
.not-built { margin-block-start: var(--s-6); }
.not-built p { max-inline-size: 34em; }
/* Docs and links */
.links { margin-block-start: var(--s-7); }
.links > li { display: grid; gap: var(--s-1); padding-block: var(--s-4); border-block-start: 1px solid var(--c-line-strong); }
@media (min-width: 900px) {
	.links > li { grid-template-columns: 10em minmax(0, 1fr) max-content; gap: var(--s-6); align-items: baseline; }
	.links .vw-code { white-space: nowrap; }
}
.links a { font-weight: var(--weight-strong); font-size: var(--text-4); }
.links p { color: var(--c-text-muted); max-inline-size: 38em; }
.links .vw-code { font-size: var(--text-2); color: var(--c-text-muted); text-align: start; }
:lang(fa) .links .vw-code { text-align: end; }
/* Footer */
.foot { padding-block: var(--s-6) var(--s-7); border-block-start: 1px solid var(--c-line); font-size: var(--text-2); color: var(--c-text-muted); }
.foot .wrap { display: grid; gap: var(--s-2); }
.foot p { max-inline-size: 60em; }
.dir-pick select { margin-inline-start: var(--s-2); min-block-size: 32px; padding-inline: var(--s-2); border: 1px solid var(--c-line); border-radius: var(--r-1); background: var(--c-surface, transparent); color: var(--c-text); font: inherit; }
@media (pointer: coarse) {
	.dir-pick select { min-block-size: var(--control-h); }
	.links a { display: inline-block; padding-block: var(--s-2); }
}