/* Fonts used by the website. */
@import url("https://fonts.googleapis.com/css2?family=Cormorant:wght@500;600;700&family=JetBrains+Mono:wght@400;500;800&family=Newsreader:ital,wght@0,400;0,600;1,400;1,500&family=Nunito+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap");
@font-face { font-family: "Gadey"; src: url("/assets/fonts/Gadey.woff2") format("woff2"); font-display: swap; unicode-range: U+0000-002F, U+003A-10FFFF; }

/* Site foundation: tokens, semantic HTML, controls and navigation. */
:root, [data-mode="light"] {
  --background: #FBFCFD;
  --surface: #FFFFFF;
  --surface-hover: #F8F9FA;
  --surface-active: #F1F3F5;
  --border-subtle: #ECEEF0;
  --border: #DFE3E6;
  --border-strong: #C1C8CD;
  --text: #11181C;
  --text-muted: #687076;
  --text-subtle: #889199;
  --accent-1: #11181C;
  --accent-1-hover: #0A0F12;
  --accent-1-pressed: #05080A;
  --on-accent-1: #FFFFFF;
  --accent-2: #F1F3F5;
  --accent-2-hover: #ECEEF0;
  --accent-2-pressed: #DFE3E6;
  --on-accent-2: #11181C;
  --accent-3: #11181C;
  --accent-3-hover: #0A0F12;
  --accent-3-pressed: #05080A;
  --on-accent-3: #FFFFFF;
  --accent-1-text: var(--accent-1);
  --accent-1-tint: color-mix(in srgb, var(--accent-1) 12%, var(--surface));
  --accent-2-text: var(--text-muted);
  --accent-2-tint: color-mix(in srgb, var(--accent-2-text) 12%, var(--surface));
  --accent-3-text: var(--accent-3);
  --accent-3-tint: color-mix(in srgb, var(--accent-3) 14%, var(--surface));
  --accent-3-wash: color-mix(in srgb, var(--accent-3) 6%, var(--background));
  --accent-1-edge: color-mix(in srgb, var(--accent-1) 42%, var(--surface));
  --accent-2-edge: color-mix(in srgb, var(--accent-2-text) 38%, var(--surface));
  --accent-3-edge: color-mix(in srgb, var(--accent-3) 42%, var(--surface));
  --fill: var(--surface-active);
  --fill-hover: var(--border-subtle);
  --fill-strong: var(--border);
  --os-accent: #0A84FF;
  --os-accent-hover: color-mix(in srgb, #0A84FF 86%, black);
  --os-accent-pressed: color-mix(in srgb, #0A84FF 74%, black);
  --on-os-accent: #FFFFFF;
  --success: #187C3D;
  --warning: #8A5A00;
  --error: #B3261E;
  --info: #295FA6;
  --success-tint: color-mix(in srgb, var(--success) 14%, var(--background));
  --success-edge: color-mix(in srgb, var(--success) 38%, var(--background));
  --warning-tint: color-mix(in srgb, var(--warning) 14%, var(--background));
  --warning-edge: color-mix(in srgb, var(--warning) 38%, var(--background));
  --error-tint: color-mix(in srgb, var(--error) 14%, var(--background));
  --error-edge: color-mix(in srgb, var(--error) 38%, var(--background));
  --info-tint: color-mix(in srgb, var(--info) 14%, var(--background));
  --info-edge: color-mix(in srgb, var(--info) 38%, var(--background));
  --skeleton: color-mix(in srgb, var(--text) 9%, var(--background));
  --color-1: #FF3B30;
  --color-2: #FFCC00;
  --color-3: #34C759;
  --color-4: #007AFF;
  --color-5: #AF52DE;
  --color-1-text: color-mix(in srgb, var(--color-1) 78%, black);
  --color-2-text: color-mix(in srgb, color-mix(in srgb, var(--color-2) 90%, var(--color-1)) 92%, black);
  --color-3-text: color-mix(in srgb, var(--color-3) 58%, black);
  --color-4-text: color-mix(in srgb, var(--color-4) 84%, black);
  --color-5-text: color-mix(in srgb, var(--color-5) 82%, black);
  --font-heading: "Cormorant", Georgia, "Times New Roman", serif;
  --font-body: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-quote: "Newsreader", Georgia, "Times New Roman", serif;
  --font-reading: "Newsreader", Georgia, "Times New Roman", serif;
  --font-hand: "Caveat", "Segoe Print", "Bradley Hand", cursive;
  --font-hero: "Gadey", "Arial Black", sans-serif;
  --font-signature: "Great Vibes", "Snell Roundhand", "Apple Chancery", cursive;
  --font-typewriter: "Special Elite", "American Typewriter", "Courier New", monospace;
  --font-receipt: "Doto", "Courier New", monospace;
  --font-barcode: "Libre Barcode 128 Text", monospace;
  --font-pixel: "Pixelify Sans", "Courier New", monospace;
  --font-children: "Chewy", "Comic Sans MS", sans-serif;
  --font-japanese: "Yuji Syuku", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-chinese: "Ma Shan Zheng", "Kaiti SC", "KaiTi", serif;
  --font-korean: "Nanum Brush Script", "Apple SD Gothic Neo", sans-serif;
  --font-devanagari: "Tiro Devanagari Hindi", "Kohinoor Devanagari", serif;
  --font-numeric: "Playfair Display", Georgia, "Times New Roman", serif;
  --text-scale: 1;
  --text-display:  calc(clamp(2.5rem, 6vw, 3.5rem) * var(--text-scale));
  --text-h1:       calc(clamp(1.875rem, 4vw, 2.25rem) * var(--text-scale));
  --text-h2:       calc(1.5rem   * var(--text-scale));
  --text-h3:       calc(1.25rem  * var(--text-scale));
  --text-h4:       calc(1.125rem * var(--text-scale));
  --text-body:     calc(1rem     * var(--text-scale));
  --text-quote:    calc(1.125rem * var(--text-scale));
  --text-footnote: calc(0.875rem * var(--text-scale));
  --text-caption:  calc(0.75rem  * var(--text-scale));
  --weight-body: 400;
  --weight-medium: 500;
  --weight-strong: 600;
  --weight-heading: 600;
  --weight-eyebrow: 800;
  --leading-display: 1.05;
  --leading-heading: 1.15;
  --leading-snug: 1.3;
  --leading-body: 1.6;
  --leading-ui: 1.4;
  --tracking-display: -0.03em;
  --tracking-heading: -0.02em;
  --tracking-snug: -0.01em;
  --tracking-body: 0em;
  --tracking-label: 0.02em;
  --tracking-caps: 0.06em;
  --tracking-wide: 0.14em;
  --measure: 66ch;
  --measure-narrow: 54ch;
  --flow-heading-above: 1.5em;
  --flow-heading-below: 0.5em;
  --flow-paragraph: 1em;
  --flow-tight: 0.5em;
  --density-scale: 1;
  --space-tight:   calc(0.25rem * var(--density-scale));
  --space-control: calc(0.5rem  * var(--density-scale));
  --space-inline:  calc(0.75rem * var(--density-scale));
  --space-stack:   calc(1rem    * var(--density-scale));
  --space-card:    calc(1.5rem  * var(--density-scale));
  --space-page:    calc(2rem    * var(--density-scale));
  --space-section: calc(3rem    * var(--density-scale));
  --space-hero:    calc(4rem    * var(--density-scale));
  --space-xl:      calc(6rem    * var(--density-scale));
  --space-2xl:     calc(8rem    * var(--density-scale));
  --space-pin:     20px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --width-narrow: 40rem;
  --width-default: 64rem;
  --width-wide: 80rem;
  --width-xwide: 96rem;
  --radius-control: 8px;
  --radius-panel: 12px;
  --radius-card: 16px;
  --radius-pill: 999px;
  --border-hairline: 1px;
  --border-element: 1px;
  --border-focus: 2px;
  --border-highlight: 2px;
  --shadow-flat: none;
  --shadow-raised: 0 1px 2px rgb(16 24 40 / 0.04), 0 1px 3px rgb(16 24 40 / 0.06);
  --shadow-floating: 0 2px 4px rgb(16 24 40 / 0.05), 0 4px 8px rgb(16 24 40 / 0.06);
  --shadow-overlay: 0 8px 16px rgb(16 24 40 / 0.06), 0 16px 32px rgb(16 24 40 / 0.08);
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 600ms;
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --focus-ring: var(--border-focus) solid var(--accent-3);
  --focus-offset: 2px;
}
[data-mode="dark"] {
  --background: #0F1011;
  --surface: #141516;
  --surface-hover: #18191A;
  --surface-active: #202425;
  --border-subtle: #202123;
  --border: #2C2E31;
  --border-strong: #4C5155;
  --text: #ECEDEE;
  --text-muted: #889096;
  --text-subtle: #63676B;
  --accent-1: #ECEDEE;
  --accent-1-hover: #FFFFFF;
  --accent-1-pressed: #D4D6D8;
  --on-accent-1: #11181C;
  --accent-2: #202425;
  --accent-2-hover: #262B2C;
  --accent-2-pressed: #2E3335;
  --on-accent-2: #ECEDEE;
  --accent-3: #ECEDEE;
  --accent-3-hover: #FFFFFF;
  --accent-3-pressed: #D4D6D8;
  --on-accent-3: #11181C;
  --color-1-text: color-mix(in srgb, var(--color-1) 88%, white);
  --color-2-text: color-mix(in srgb, color-mix(in srgb, var(--color-2) 95%, var(--color-1)) 90%, white);
  --color-3-text: color-mix(in srgb, var(--color-3) 88%, white);
  --color-4-text: color-mix(in srgb, var(--color-4) 88%, white);
  --color-5-text: color-mix(in srgb, var(--color-5) 88%, white);
  --success: #56B87A;
  --warning: #D8A23E;
  --error: #E5766A;
  --info: #7AA7DC;
  --shadow-raised: inset 0 1px 0 rgb(255 255 255 / 0.04), 0 1px 2px rgb(0 0 0 / 0.40);
  --shadow-floating: inset 0 1px 0 rgb(255 255 255 / 0.05), 0 4px 12px rgb(0 0 0 / 0.50);
  --shadow-overlay: inset 0 1px 0 rgb(255 255 255 / 0.05), 0 16px 40px rgb(0 0 0 / 0.60);
}
@supports (color: AccentColor) {
:root {
  --os-accent: AccentColor;
  --os-accent-hover: color-mix(in srgb, AccentColor 86%, black);
  --os-accent-pressed: color-mix(in srgb, AccentColor 74%, black);
  --on-os-accent: AccentColorText;
}
}
@media (prefers-contrast: more) {
:root, [data-mode] {
  --text-muted: var(--text);
  --border: color-mix(in srgb, var(--text) 55%, var(--background));
  --focus-ring: calc(var(--border-focus) + 1px) solid var(--accent-3);
}
}
@media (forced-colors: active) {
.tab-indicator, .scroll-gauge, .scroll-gauge-thumb, .sheet { border: 1px solid ButtonText; }
[data-tip]::after { border: 1px solid CanvasText; }
}
[data-density="small"] { --density-scale: 0.75; }
[data-density="large"] { --density-scale: 1.3; }
[data-text-size="small"] { --text-scale: 0.92; }
[data-text-size="large"] { --text-scale: 1.12; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.text-display { font-family: var(--font-heading); font-size: var(--text-display); font-weight: var(--weight-heading); line-height: var(--leading-display); letter-spacing: var(--tracking-display); }
.text-h4 { font-family: var(--font-heading); font-size: var(--text-h4); font-weight: var(--weight-strong); line-height: var(--leading-snug); letter-spacing: var(--tracking-snug); }
.text-body { font-size: var(--text-body);    line-height: var(--leading-body); }
.text-footnote { font-size: var(--text-footnote);   line-height: var(--leading-ui); }
.text-caption { font-size: var(--text-caption); line-height: var(--leading-ui); color: var(--text-muted); }
@supports (transition-timing-function: linear(0, 1)) {
:root {
  --ease-spring: linear( 0, 0.06 2.5%, 0.235 6.3%, 0.575 12.6%, 0.819 17.6%, 1.003 22.6%, 1.071 26.2%, 1.104 30%, 1.106 33.9%, 1.084 38.7%, 1.032 47.3%, 1.003 54.5%, 0.995 62.5%, 1 );
}
}
[data-motion="calm"] { --duration-fast: 100ms; --duration-normal: 160ms; --duration-slow: 240ms; --ease-out: cubic-bezier(0.33, 0, 0.67, 1); --ease-in-out: cubic-bezier(0.33, 0, 0.67, 1); --ease-spring: cubic-bezier(0.33, 0, 0.67, 1); }
[data-motion="off"], [data-motion="off"] *, [data-motion="off"] *::before, [data-motion="off"] *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; }
html[data-mode="dark"] { color-scheme: dark; }
html { color-scheme: light; }
body [data-mode] { background: var(--background); color: var(--text); }
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
:where(a, button, summary, label, select, [role="button"], [tabindex]) { -webkit-tap-highlight-color: transparent; }
button, input, select, textarea { font: inherit; color: inherit; }
img, video, svg, canvas { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; }
html { background: var(--background); color: var(--text); font-family: var(--font-body); font-weight: var(--weight-body); line-height: var(--leading-body); -webkit-text-size-adjust: 100%; interpolate-size: allow-keywords; }
body { font-size: var(--text-body); }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: var(--weight-heading); text-wrap: balance; margin: var(--flow-heading-above) 0 var(--flow-heading-below); }
h1 { font-size: var(--text-h1); line-height: var(--leading-heading); letter-spacing: var(--tracking-display); }
h2 { font-size: var(--text-h2); line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); }
h3 { font-size: var(--text-h3); line-height: var(--leading-snug);    letter-spacing: var(--tracking-heading); }
h4, h5, h6 { font-size: var(--text-h4); line-height: var(--leading-snug); letter-spacing: var(--tracking-snug); }
h1, h2, .text-display { color: var(--accent-1-text); }
p { max-width: var(--measure); margin: 0 0 var(--flow-paragraph); text-wrap: pretty; }
small { font-size: var(--text-footnote); }
strong, b { font-weight: var(--weight-strong); }
a { color: var(--accent-1-text); text-decoration: underline; text-underline-offset: 0.15em; text-decoration-color: var(--border); transition: text-decoration-color var(--duration-fast) var(--ease-out); }
a:hover { text-decoration-color: currentColor; }
ul, ol { margin: 0 0 var(--flow-paragraph); padding-left: var(--space-card); }
li + li { margin-top: var(--flow-tight); }
blockquote { margin: 0 0 var(--flow-paragraph); padding-left: var(--space-stack); border-left: var(--border-highlight) solid var(--accent-3); font-family: var(--font-quote); font-size: var(--text-quote); font-style: italic; color: var(--text-muted); }
figure, table, pre { margin: 0 0 var(--flow-paragraph); }
:where(h1, h2, h3, h4, h5, h6, p, ul, ol, blockquote, pre, table, figure):first-child { margin-top: 0; }
:where(h1, h2, h3, h4, h5, h6, p, ul, ol, blockquote, pre, table, figure):last-child { margin-bottom: 0; }
.stack > *, .stack-tight > *, .stack-loose > *, .row > *, .row-tight > *, .row-loose > * { margin-block: 0; }
hr { border: none; border-top: var(--border-hairline) solid var(--border); }
code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.9em; }
code { background: var(--surface); border: var(--border-element) solid var(--border); border-radius: var(--radius-control); padding: 0.1em 0.35em; }
kbd { display: inline-block; background: var(--surface); border: var(--border-element) solid var(--border); border-bottom-width: 2px; border-radius: 5px; padding: 0.05em 0.4em; box-shadow: var(--shadow-raised); line-height: 1.4; }
mark { background: var(--accent-3-tint); color: var(--accent-3-text); padding: 0.05em 0.25em; border-radius: 3px; }
del { color: var(--text-muted); }
ins { text-decoration: none; border-bottom: var(--border-highlight) solid var(--accent-3); }
abbr[title] { text-decoration: underline dotted; text-underline-offset: 0.15em; cursor: help; }
sub, sup { font-size: 0.75em; line-height: 0; }
meter { appearance: none; -webkit-appearance: none; width: 100%; height: 0.5rem; border: none; border-radius: var(--radius-pill); background: var(--fill-strong); overflow: hidden; }
meter::-webkit-meter-bar { background: var(--fill-strong); border: none; border-radius: var(--radius-pill); }
meter::-webkit-meter-optimum-value { background: var(--success); border-radius: var(--radius-pill); }
meter::-webkit-meter-suboptimum-value { background: var(--warning); border-radius: var(--radius-pill); }
meter::-webkit-meter-even-less-good-value { background: var(--error); border-radius: var(--radius-pill); }
meter::-moz-meter-bar { background: var(--success); border-radius: var(--radius-pill); }
meter:-moz-meter-sub-optimum::-moz-meter-bar { background: var(--warning); }
meter:-moz-meter-sub-sub-optimum::-moz-meter-bar { background: var(--error); }
pre { background: var(--surface); border: var(--border-element) solid var(--border); border-radius: var(--radius-panel); padding: var(--space-stack); overflow-x: auto; }
pre code { background: none; border: none; border-radius: 0; padding: 0; }
label { display: block; font-size: var(--text-footnote); font-weight: var(--weight-medium); letter-spacing: var(--tracking-label); }
input, textarea, select { width: 100%; min-height: 44px; padding: var(--space-control) var(--space-inline); background: var(--surface); border: var(--border-element) solid var(--border); border-radius: var(--radius-control); transition: border-color var(--duration-fast) var(--ease-out); }
input:hover, textarea:hover, select:hover { border-color: var(--text-muted); }
input:disabled, textarea:disabled, select:disabled, button:disabled { opacity: 0.5; cursor: not-allowed; }
::placeholder { color: var(--text-muted); opacity: 1; }
textarea { min-height: calc(var(--space-hero) * 2); resize: vertical; }
fieldset { border: var(--border-element) solid var(--border); border-radius: var(--radius-panel); padding: var(--space-stack); }
legend { font-size: var(--text-footnote); font-weight: var(--weight-strong); padding-inline: var(--space-control); }
button { cursor: pointer; }
table { width: 100%; border-collapse: collapse; font-size: var(--text-footnote); }
th, td { text-align: left; padding: var(--space-control) var(--space-inline); border-bottom: var(--border-hairline) solid var(--border); }
th { font-weight: var(--weight-medium); color: var(--text-muted); font-size: var(--text-caption); text-transform: uppercase; letter-spacing: var(--tracking-caps); }
tbody tr:hover { background: var(--surface); }
figure img, figure video { border-radius: var(--radius-panel); }
figcaption { margin-top: var(--space-control); font-size: var(--text-caption); color: var(--text-muted); }
:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); border-radius: var(--radius-control); }
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; }
::selection { background: var(--accent-3); color: var(--on-accent-3); }
* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.tab-bar, .scroll-gauge, .sheet, .sheet-scrim, .toast-rack { user-select: none; -webkit-user-select: none; }
button, label, .btn, [role="button"], [role="tab"], [role="tablist"], .chip, .menu-item, .menu-label { user-select: none; -webkit-user-select: none; }
input, textarea, [contenteditable] { user-select: auto; -webkit-user-select: auto; }
@media print {
:root, [data-mode="dark"] {
  --background: #FFFFFF;
  --surface: #FFFFFF;
  --surface-hover: #FFFFFF;
  --surface-active: #F2F2F2;
  --text: #111111;
  --text-muted: #444444;
  --text-subtle: #666666;
  --border: #BBBBBB;
  --border-subtle: #CCCCCC;
  --border-strong: #999999;
  --shadow-flat: none;
  --shadow-raised: none;
  --shadow-floating: none;
  --shadow-overlay: none;
}
* { box-shadow: none !important; text-shadow: none !important; backdrop-filter: none !important; }
nav, .tab-bar, .sheet, .sheet-scrim, .scroll-gauge, .toast-rack { display: none !important; }
[data-tip]::before, [data-tip]::after { display: none !important; }
.card, tr, figure, pre, .field { break-inside: avoid; }
h1, h2, h3, h4, h5, h6 { break-after: avoid; }
a { color: inherit; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}
[data-width="narrow"] { --width-page: var(--width-narrow); }
[data-width="wide"] { --width-page: var(--width-wide); }
[data-width="xwide"] { --width-page: var(--width-xwide); }
[data-width="full"] { --width-page: none; }
.stack, .stack-tight, .stack-loose { display: flex; flex-direction: column; gap: var(--space-stack); }
.stack-tight { gap: var(--space-control); }
.stack-loose { gap: var(--space-section); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-control); min-height: 44px; padding: var(--space-control) var(--space-card); border: var(--border-element) solid var(--border); border-radius: var(--radius-control); background: var(--fill); color: var(--text); font-weight: var(--weight-medium); line-height: var(--leading-ui); letter-spacing: var(--tracking-label); text-decoration: none; transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), transform var(--duration-normal) var(--ease-spring); }
.btn:active { transform: translateY(1px) scale(0.97); }
.btn-primary { background: var(--accent-1); border-color: var(--accent-1); color: var(--on-accent-1); box-shadow: var(--shadow-raised); }
.btn-primary:hover { background: var(--accent-1-hover); border-color: var(--accent-1-hover); }
.btn-primary:active { background: var(--accent-1-pressed); border-color: var(--accent-1-pressed); }
.btn-secondary:hover, .btn:not(.btn-primary):not(.btn-ghost):hover { background: var(--fill-hover); border-color: var(--text-muted); }
.btn-secondary:active, .btn:not(.btn-primary):not(.btn-ghost):active { background: var(--fill-strong); }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-ghost:hover { background: var(--fill); border-color: var(--border); }
.btn-ghost:active { background: var(--fill-hover); }
.btn-danger { background: var(--error); border-color: var(--error); color: var(--background); box-shadow: var(--shadow-raised); }
.btn-danger:hover { filter: brightness(1.08); }
.btn-danger:active { filter: brightness(0.92); }
.btn-small { padding: var(--space-tight) var(--space-inline); font-size: var(--text-footnote); min-height: 36px; }
.btn-large { padding: var(--space-inline) var(--space-page); font-size: var(--text-h4); }
@media (pointer: coarse) {
.btn-small { min-height: 44px; }
}
.btn-pill { border-radius: var(--radius-pill); }
.btn-icon { width: 44px; min-width: 44px; padding: 0; }
.btn-icon.btn-small { width: 36px; min-width: 36px; }
.btn-icon.btn-large { width: 56px; min-width: 56px; }
.field { display: flex; flex-direction: column; gap: var(--space-tight); }
.field-label { font-size: var(--text-footnote); font-weight: var(--weight-strong); }
.field-hint { font-size: var(--text-caption); color: var(--text-muted); font-weight: var(--weight-body); }
.field-error { font-size: var(--text-caption); color: var(--error); font-weight: var(--weight-body); animation: site-reveal var(--duration-normal) var(--ease-out); }
.field-invalid input, .field-invalid textarea, .field-invalid select { border-color: var(--error); }
select { appearance: none; padding-right: var(--space-section); background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%); background-position: calc(100% - 1.15rem) 50%, calc(100% - 0.8rem) 50%; background-size: 0.35rem 0.35rem; background-repeat: no-repeat; }
input[type="search"] { border-radius: var(--radius-pill); }
input[type="file"] { border: none; background: none; padding: var(--space-tight) 0; font-size: var(--text-footnote); color: var(--text-muted); cursor: pointer; }
input[type="file"]::file-selector-button { margin-right: var(--space-inline); padding: var(--space-control) var(--space-stack); border: var(--border-element) solid var(--border); border-radius: var(--radius-panel); background: var(--fill); color: var(--text); font: inherit; font-weight: var(--weight-strong); cursor: pointer; transition: background var(--duration-fast) var(--ease-out); }
input[type="file"]:hover::file-selector-button { background: var(--fill-hover); }
input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"] { accent-color: var(--accent-1); }
.field output { float: right; font-variant-numeric: tabular-nums; color: var(--text-muted); }
[data-tip] { position: relative; }
[data-tip]::after { content: attr(data-tip); position: absolute; bottom: calc(100% + var(--space-control)); left: 50%; translate: -50% 2px; z-index: 10; width: max-content; max-width: 16rem; padding: var(--space-tight) var(--space-inline); background: var(--text); color: var(--background); font-size: var(--text-caption); font-weight: var(--weight-body); text-align: center; border-radius: var(--radius-control); box-shadow: var(--shadow-floating); display: none; opacity: 0; pointer-events: none; transition: opacity var(--duration-fast) var(--ease-out), translate var(--duration-normal) var(--ease-spring); }
[data-tip]:hover::after, [data-tip]:focus-visible::after { display: block; opacity: 1; translate: -50% 0; }
@media (pointer: coarse) {
[data-tip]:hover::after, [data-tip]:focus-visible::after, [data-tip]:hover::before, [data-tip]:focus-visible::before { display: none; }
}
html[data-tip-float] [data-tip]:hover::after, html[data-tip-float] [data-tip]:focus-visible::after, html[data-tip-float] [data-tip]:hover::before, html[data-tip-float] [data-tip]:focus-visible::before { display: none; }
.tip-bubble { position: fixed; z-index: 80; width: max-content; max-width: 16rem; padding: var(--space-tight) var(--space-inline); background: var(--text); color: var(--background); font-size: var(--text-caption); font-weight: var(--weight-body); text-align: center; border-radius: var(--radius-control); box-shadow: var(--shadow-floating); pointer-events: none; opacity: 0; translate: 0 2px; transition: opacity var(--duration-fast) var(--ease-out), translate var(--duration-normal) var(--ease-spring); }
.tip-bubble::after { content: ""; position: absolute; width: 0; height: 0; border: 6px solid transparent; }
.tip-bubble[data-place="above"]::after { top: 100%; left: 50%; translate: -50% 0; border-top-color: var(--text); }
.tip-bubble[data-place="below"]::after { bottom: 100%; left: 50%; translate: -50% 0; border-bottom-color: var(--text); }
.tip-bubble[data-place="left"]::after { left: 100%; top: 50%; translate: 0 -50%; border-left-color: var(--text); }
.tip-bubble[data-place="right"]::after { right: 100%; top: 50%; translate: 0 -50%; border-right-color: var(--text); }
[data-tip][data-tip-below]::after { bottom: auto; top: calc(100% + var(--space-control)); }
[data-tip]::before { content: ""; position: absolute; bottom: calc(100% + var(--space-control) - 5px); left: 50%; translate: -50% 2px; z-index: 10; border: 5px solid transparent; border-top-color: var(--text); display: none; opacity: 0; pointer-events: none; transition: opacity var(--duration-fast) var(--ease-out), translate var(--duration-fast) var(--ease-out); }
[data-tip][data-tip-below]::before { bottom: auto; top: calc(100% + var(--space-control) - 5px); border-top-color: transparent; border-bottom-color: var(--text); }
[data-tip]:hover::before, [data-tip]:focus-visible::before { display: block; opacity: 1; translate: -50% 0; }
@media (hover: none) {
[data-tip]:hover::after, [data-tip]:hover::before { display: none; opacity: 0; }
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent-1); width: 1.15rem; height: 1.15rem; flex: none; }
dialog:not([open]) { display: none; }
dialog.modal { border: var(--border-hairline) solid var(--border); background: var(--surface); color: var(--text); box-shadow: var(--shadow-overlay); }
dialog.modal { width: min(92vw, 30rem); max-height: min(85dvh, 44rem); overflow-y: auto; padding: var(--space-card); border-radius: var(--radius-card); margin: auto; }
dialog.modal.modal-sm { width: min(92vw, 22rem); }
dialog.modal.modal-lg { width: min(94vw, 40rem); }
.dialog-head { display: flex; align-items: center; gap: var(--space-inline); }
.dialog-head > :is(h1, h2, h3, h4, h5) { margin: 0; margin-inline-end: auto; font-family: var(--font-body); font-size: var(--text-h4); font-weight: var(--weight-heading); line-height: var(--leading-snug); letter-spacing: var(--tracking-snug); }
.dialog-head form { display: inline-flex; }
.dialog-head .btn-icon { color: var(--text-muted); margin-block: calc(var(--space-tight) * -1); margin-inline-end: calc(var(--space-tight) * -1); }
.dialog-head .btn-icon:hover { color: var(--text); }
.dialog-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-pill); background: var(--surface-active); color: var(--text); }
.dialog-icon svg { width: 1.15rem; height: 1.15rem; }
.dialog-icon[data-status="success"] { background: var(--success-tint); color: var(--success); }
.dialog-icon[data-status="warning"] { background: var(--warning-tint); color: var(--warning); }
.dialog-icon[data-status="error"] { background: var(--error-tint);   color: var(--error); }
.dialog-icon[data-status="info"] { background: var(--info-tint);    color: var(--info); }
.dialog-actions { display: flex; gap: var(--space-control); justify-content: flex-start; flex-wrap: wrap; }
dialog.modal[open]:has(> .dialog-body) { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
dialog:has(> .dialog-body) > .dialog-head { padding: var(--space-card) var(--space-card) var(--space-inline); border-bottom: var(--border-hairline) solid var(--border); }
dialog:has(> .dialog-body) > .dialog-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--space-card); }
dialog:has(> .dialog-body) > .dialog-actions { padding: var(--space-inline) var(--space-card) var(--space-card); border-top: var(--border-hairline) solid var(--border); }
@media (max-width: 30rem) {
.dialog-actions { flex-direction: column-reverse; align-items: stretch; }
.dialog-actions .btn { width: 100%; }
}
dialog.modal::backdrop { background: rgb(0 0 0 / 0.5); backdrop-filter: blur(3px); }
dialog.modal[open] { animation: site-modal-in        var(--duration-normal) var(--ease-spring); }
dialog.modal[open]::backdrop { animation: site-fade-in var(--duration-normal) var(--ease-out); }
[popover] { margin: auto; border: var(--border-element) solid var(--border); border-radius: var(--radius-panel); padding: var(--space-stack); background: var(--surface); color: var(--text); box-shadow: var(--shadow-floating); }
[popover]:popover-open { animation: site-pop-in var(--duration-fast) var(--ease-out); }
[popover]:popover-open::backdrop { animation: site-fade-in var(--duration-fast) var(--ease-out); }
[popover]:not(:popover-open) { display: none; }
.heading-bar::after { content: ""; display: block; width: 2.6rem; height: 0.3rem; margin-top: calc(var(--space-tight) + 4px); background: var(--accent-1); border-radius: var(--radius-pill); }
.heading-bar-center { text-align: center; }
.heading-bar-center::after { margin-inline: auto; }
.btn[aria-disabled="true"], .chip:disabled, .chip[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }
.card[aria-selected="true"], .card[aria-pressed="true"], .card[aria-current="true"] { border-color: var(--accent-1); box-shadow: 0 0 0 1px var(--accent-1), var(--shadow-raised); }
tbody tr[aria-selected="true"] { background: color-mix(in srgb, var(--accent-1) 7%, var(--surface)); }
.card[data-status="success"] { border-inline-start: 3px solid var(--success); }
.card[data-status="warning"] { border-inline-start: 3px solid var(--warning); }
.card[data-status="error"] { border-inline-start: 3px solid var(--error); }
.card[data-status="info"] { border-inline-start: 3px solid var(--info); }
:is(input, textarea, select)[aria-invalid="true"], :is(input, textarea, select):user-invalid, .field[data-status="error"] :is(input, textarea, select) { border-color: var(--error); }
.field[data-status="warning"] :is(input, textarea, select) { border-color: var(--warning); }
.field[data-status="success"] :is(input, textarea, select) { border-color: var(--success); }
input[readonly], textarea[readonly] { background: var(--background); color: var(--text-muted); cursor: default; }
progress:not([value]) { background: var(--fill-strong); background-image: linear-gradient(90deg, transparent, var(--accent-1) 50%, transparent); background-size: 40% 100%; background-repeat: no-repeat; animation: site-slide 1.4s ease-in-out infinite; }
progress:not([value])::-webkit-progress-bar { background: transparent; }
progress:not([value])::-moz-progress-bar { background: transparent; }
.btn[aria-busy="true"] { position: relative; color: transparent; text-shadow: none; pointer-events: none; }
.btn[aria-busy="true"]::after { content: ""; position: absolute; inset: 0; translate: none; margin: auto; width: 1.1em; height: 1.1em; max-width: none; padding: 0; display: block; opacity: 1; background: transparent; box-shadow: none; border: 2px solid color-mix(in srgb, var(--text) 25%, transparent); border-top-color: var(--text); border-radius: var(--radius-pill); animation: site-spin 0.8s linear infinite; }
.btn-primary[aria-busy="true"]::after { border-color: color-mix(in srgb, var(--on-accent-1) 30%, transparent); border-top-color: var(--on-accent-1); }
.btn-ghost[aria-busy="true"]::after { border-color: color-mix(in srgb, var(--text) 25%, transparent); border-top-color: var(--text); }
[aria-busy="true"] { cursor: progress; }
[aria-busy="true"]:not([data-busy]) :is(span, a, strong, em, small, time, code, .badge):not([data-static], [data-static] *) { color: transparent; text-shadow: none; background: var(--skeleton); border-color: transparent; border-radius: 0.4em; box-decoration-break: clone; -webkit-box-decoration-break: clone; animation: site-pulse 1.3s ease-in-out infinite; user-select: none; }
[aria-busy="true"] :is(.btn, .chip, input, select, textarea):not([data-static], [data-static] *) { color: transparent; text-shadow: none; background: var(--skeleton); border-color: transparent; box-shadow: none; animation: site-pulse 1.3s ease-in-out infinite; }
[aria-busy="true"] :is(input, textarea)::placeholder { color: transparent; }
.badge { display: inline-flex; align-items: center; padding: 1px var(--space-control); border-radius: var(--radius-pill); font-size: var(--text-caption); font-weight: var(--weight-strong); background: var(--accent-3-tint); color: var(--accent-3-text); border: var(--border-element) solid var(--accent-3-edge); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-tight); max-width: none; }
.chip { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-tight); min-height: 36px; padding: var(--space-tight) var(--space-inline); background: var(--surface); border: var(--border-element) solid var(--border); border-radius: var(--radius-pill); font: inherit; font-size: var(--text-footnote); color: var(--text); cursor: pointer; touch-action: manipulation; transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), transform var(--duration-normal) var(--ease-spring); }
.chip:hover { border-color: var(--text-muted); }
.chip:active { transform: scale(0.92); }
.chip[aria-pressed="true"] { background: var(--accent-3-tint); border-color: var(--accent-3-edge); color: var(--accent-3-text); }
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: var(--radius-pill); background: var(--fill-strong); color: var(--text); font-size: var(--text-footnote); font-weight: var(--weight-strong); overflow: hidden; flex: none; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-small { width: 1.75rem; height: 1.75rem; font-size: var(--text-caption); }
.avatar-large { width: 3.5rem; height: 3.5rem; font-size: var(--text-body); }
.avatar-group { display: inline-flex; }
.avatar-group > .avatar { border: 2px solid var(--background); margin-inline-start: -0.6rem; }
.avatar-group > .avatar:first-child { margin-inline-start: 0; }
progress { appearance: none; width: 100%; height: 0.5rem; border: none; border-radius: var(--radius-pill); background: var(--fill-strong); overflow: hidden; }
progress::-webkit-progress-bar { background: var(--fill-strong); border-radius: var(--radius-pill); }
progress::-webkit-progress-value { background: var(--accent-1); border-radius: var(--radius-pill); transition: width var(--duration-normal) var(--ease-out); }
progress::-moz-progress-bar { background: var(--accent-1); border-radius: var(--radius-pill); }
.toast-rack { position: fixed; bottom: calc(var(--space-card) + var(--safe-bottom)); left: 50%; translate: -50% 0; display: flex; flex-direction: column; align-items: center; gap: var(--space-control); z-index: 60; pointer-events: none; }
.toast { display: flex; align-items: center; gap: var(--space-control); max-width: min(92vw, 28rem); padding: var(--space-control) var(--space-card); border-radius: var(--radius-pill); background: var(--text); color: var(--background); font-size: var(--text-footnote); box-shadow: var(--shadow-overlay); pointer-events: auto; animation: site-toast-in var(--duration-normal) var(--ease-spring); transition: opacity var(--duration-normal) var(--ease-out), translate var(--duration-normal) var(--ease-out); }
.toast-out { opacity: 0; translate: 0 8px; }
.toast[data-kind]::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: var(--radius-pill); flex: none; }
.toast[data-kind="success"]::before { background: var(--success); }
.toast[data-kind="warning"]::before { background: var(--warning); }
.toast[data-kind="error"]::before { background: var(--error); }
.toast[data-kind="info"]::before { background: var(--info); }
.card, .card-outlined { display: block; background: var(--surface); border: var(--border-element) solid var(--border); border-radius: var(--radius-card); padding: var(--space-card); box-shadow: var(--shadow-raised); color: inherit; }
.card-outlined { background: var(--background); box-shadow: none; }
.card.stack, .card.stack-tight, .card.stack-loose, .card-outlined.stack, .card-outlined.stack-tight, .card-outlined.stack-loose { display: flex; }
.card-clickable { text-decoration: none; cursor: pointer; transition: translate var(--duration-normal) var(--ease-spring), box-shadow var(--duration-normal) var(--ease-out); }
.card-clickable:hover { translate: 0 -2px; box-shadow: var(--shadow-floating); }
.card-clickable:active { translate: 0 0; box-shadow: var(--shadow-raised); }

.feed-post:has(.feed-post-link):hover { box-shadow: var(--shadow-floating); }
.feed-post:has(.feed-post-link):active { translate: 0 0; box-shadow: var(--shadow-raised); }

.feed-author-name { font-weight: var(--weight-strong); }
.feed-date { white-space: nowrap; }

.feed-tag:hover { text-decoration: underline; }
.feed-tag[aria-pressed="true"] { text-decoration: underline; }

.entry-logo { flex: none; width: 2.5rem; height: 2.5rem; display: inline-flex; align-items: center; justify-content: center; font-size: 1.3rem; border: var(--border-hairline) solid var(--border); border-radius: var(--radius-panel); background: var(--surface); overflow: hidden; }
.entry-logo img { width: 100%; height: 100%; object-fit: cover; }
.entry-title { font-weight: var(--weight-strong); }
.entry-date { margin-left: auto; text-align: right; white-space: nowrap; color: var(--text-muted); font-size: var(--text-caption); }
.row, .row-tight, .row-loose { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-stack); }
.row-tight { gap: var(--space-control); }
.row-loose { gap: var(--space-page); }
.tab-bar, .tab-set { background: color-mix(in srgb, var(--surface) 62%, transparent); -webkit-backdrop-filter: blur(5px) saturate(1.4); backdrop-filter: blur(5px) saturate(1.4); border: var(--border-element) solid color-mix(in srgb, var(--border) 65%, transparent); border-radius: var(--radius-pill); box-shadow: inset 0 2px 5px color-mix(in srgb, var(--text) 22%, transparent), inset 0 -1px 3px color-mix(in srgb, var(--text) 9%, transparent), 0 1px 0 color-mix(in srgb, var(--surface) 55%, transparent); }
.tab-bar { position: fixed; bottom: calc(var(--space-inline) + var(--safe-bottom)); left: 50%; transform: translateX(-50%); z-index: auto; display: flex; align-items: center; padding: var(--space-tight); white-space: nowrap; max-width: calc(100vw - 2 * var(--space-inline)); }
:root {
  --bar-height: 48px;
  --bar-clearance-top: calc(var(--space-pin) + var(--safe-top) + var(--bar-height) + var(--space-card));
  --bar-clearance-bottom: calc(var(--space-inline) + var(--safe-bottom) + var(--bar-height) + var(--space-card));
}
@media (max-width: 40rem) {
.tab-set { overflow-x: auto; scrollbar-width: none; }
.tab-set::-webkit-scrollbar { display: none; }
}
.tab-bar:has(.tab-set) { padding: 0; gap: var(--space-inline); background: none; -webkit-backdrop-filter: none; backdrop-filter: none; border: none; box-shadow: none; }

.tab-set { position: relative; display: flex; align-items: center; padding: var(--space-tight); }
@media (min-width: 40rem) {
.tab-bar-top { top: calc(var(--space-pin) + var(--safe-top)); bottom: auto; left: var(--space-pin); right: var(--space-pin); transform: none; justify-content: center; }
.tab-bar-top .tab-set { flex: 1 1 auto; max-width: 48rem; justify-content: center; }
}
.tab-indicator { position: absolute; top: var(--space-tight); left: 0; height: calc(100% - var(--space-tight) * 2); width: 0; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--surface) 92%, transparent); box-shadow: 0 2px 5px color-mix(in srgb, var(--text) 25%, transparent), inset 0 1px 0 color-mix(in srgb, var(--background) 85%, transparent); pointer-events: none; }
.tab-seg { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; cursor: pointer; min-height: 40px; padding: 0 var(--space-stack); text-shadow: 0 0 2px var(--surface), 0 0 6px color-mix(in srgb, var(--surface) 85%, transparent); border: none; border-radius: var(--radius-pill); background: transparent; color: var(--text-muted); font-size: var(--text-footnote); font-weight: var(--weight-strong); text-shadow: 0 1px 0 color-mix(in srgb, var(--background) 65%, transparent); transition: color var(--duration-fast) var(--ease-out); }
.tab-seg[aria-current="true"], .tab-seg[aria-current="page"] { color: var(--accent-pressed); text-shadow: 0 1px 0 color-mix(in srgb, var(--background) 40%, transparent); }
.sheet-left { left: var(--space-inline); right: auto; transform: translate(calc(-100% - var(--space-stack)), -50%); }
.sheet.sheet-rise, .sheet.sheet-rise.sheet-left { height: auto; max-height: 50dvh; transform: none; overflow: hidden; background: color-mix(in srgb, var(--surface) 85%, transparent); -webkit-backdrop-filter: blur(5px) saturate(1.4); backdrop-filter: blur(5px) saturate(1.4); border: var(--border-element) solid color-mix(in srgb, var(--border) 65%, transparent); border-radius: var(--radius-card); box-shadow: inset 0 2px 5px color-mix(in srgb, var(--text) 22%, transparent), inset 0 -1px 3px color-mix(in srgb, var(--text) 9%, transparent), 0 1px 0 color-mix(in srgb, var(--surface) 55%, transparent); }
.sheet.sheet-rise .sheet-scroll, .sheet.sheet-rise .sheet-foot { width: 100%; margin-left: 0; }
.sheet.sheet-rise .sheet-scroll { overflow-y: auto; gap: 0; padding-top: var(--space-inline); }
.sheet.sheet-rise .sheet-scroll .sheet-group { gap: 0; }
.sheet-rise .menu-label { font-family: var(--font-mono); font-size: var(--text-caption); text-transform: uppercase; letter-spacing: var(--tracking-caps); font-weight: var(--weight-eyebrow); color: var(--text-muted); padding-bottom: var(--space-control); border-bottom: var(--border-hairline) solid color-mix(in srgb, var(--border) 70%, transparent); }
.sheet-rise .menu-item svg { color: currentColor; }
@media (max-width: 40rem) {
.sheet.sheet-rise, .sheet.sheet-rise.sheet-left { top: auto; bottom: calc(48px + 2 * var(--space-inline) + var(--safe-bottom)); }
.sheet.sheet-rise { left: auto; right: var(--space-inline); width: min(19rem, calc(100vw - 2 * var(--space-inline))); }
.sheet.sheet-rise.sheet-left { left: var(--space-inline); right: auto; width: min(17rem, calc(100vw - 2 * var(--space-inline))); }
}
.sheet.sheet-rise .scroll-gauge { top: var(--space-card); height: 30%; }
.sheet.sheet-rise.sheet-left .scroll-gauge { left: var(--space-control); right: auto; }
.sheet.sheet-rise.sheet-left .sheet-scroll { padding-left: calc(var(--space-control) + 8px + var(--space-tight)); }
.sheet-rise .sheet-foot { border-top: var(--border-hairline) solid color-mix(in srgb, var(--border) 70%, transparent); padding: var(--space-control) var(--space-inline); }
.sheet-rise .menu-icon-btn { flex-direction: row; gap: var(--space-tight); min-height: 40px; padding: var(--space-tight) var(--space-control); border-radius: var(--radius-pill); font-size: var(--text-caption); font-weight: var(--weight-strong); white-space: nowrap; }
.sheet-rise .menu-icon-btn svg { flex: none; width: 16px; height: 16px; stroke-width: 2; }
@media (min-width: 40rem) {
.sheet.sheet-rise, .sheet.sheet-rise.sheet-left { top: calc(var(--space-pin) + var(--safe-top) + 48px + var(--space-inline)); bottom: auto; }
.sheet.sheet-rise { left: auto; right: max(var(--space-pin), calc(50vw - 24rem - 48px - var(--space-inline))); width: 24rem; }
.sheet.sheet-rise.sheet-left { left: max(var(--space-pin), calc(50vw - 24rem - 48px - var(--space-inline))); right: auto; width: 16rem; }
.sheet-scrim:has(+ .sheet.sheet-rise) { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.sheet-scrim { position: fixed; inset: 0; z-index: 40; background: rgb(0 0 0 / 0.6); opacity: 0; pointer-events: none; transition: opacity var(--duration-slow) var(--ease-in-out); }
.sheet-scrim[data-open="true"] { opacity: 1; pointer-events: auto; }
.sheet { position: fixed; top: 50%; right: var(--space-inline); z-index: 41; width: min(80vw, 20rem); height: 80dvh; max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 2 * var(--space-inline)); display: flex; flex-direction: column; background: var(--surface); border: var(--border-element) solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-overlay); transform: translate(calc(100% + var(--space-stack)), -50%); visibility: hidden; }
.sheet-scroll { flex: 1; min-height: 0; width: min(80vw, 20rem); margin-left: auto; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-card) var(--space-inline) var(--space-control); display: flex; flex-direction: column; justify-content: flex-start; gap: var(--space-stack); }
.sheet-foot { width: min(80vw, 20rem); margin-left: auto; padding: var(--space-control) var(--space-inline) var(--space-inline); }
.sheet-group { display: flex; flex-direction: column; }
.sheet-scroll .sheet-group { gap: var(--space-tight); }
.sheet-scroll { scrollbar-width: none; }
.sheet-scroll::-webkit-scrollbar { display: none; }
.scroll-gauge { position: absolute; top: var(--space-stack); right: var(--space-control); height: 25%; width: 8px; padding: 2px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--text) 8%, transparent); box-shadow: inset 0 1px 2px color-mix(in srgb, var(--text) 20%, transparent), inset 0 -1px 1px color-mix(in srgb, var(--text) 8%, transparent), 0 1px 0 color-mix(in srgb, var(--surface) 60%, transparent); overflow: hidden; pointer-events: none; }
.scroll-gauge-thumb { width: 100%; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--surface) 96%, transparent); box-shadow: 0 1px 2px color-mix(in srgb, var(--text) 30%, transparent), inset 0 1px 0 color-mix(in srgb, var(--background) 85%, transparent); transition: height var(--duration-fast) var(--ease-out); }
@supports (corner-shape: squircle) {
.sheet, .menu-item, .menu-icon-btn, .btn, input { corner-shape: squircle; }
}
.menu-item { display: flex; align-items: center; gap: var(--space-inline); width: 100%; min-height: 40px; padding: var(--space-control) var(--space-inline); border: none; border-radius: var(--radius-panel); background: transparent; color: var(--text); font-size: var(--text-footnote); font-weight: var(--weight-strong); text-align: left; text-decoration: none; transition: background var(--duration-fast) var(--ease-out); }
.menu-item:hover { background: color-mix(in srgb, var(--background) 55%, transparent); }
.menu-item svg { flex: none; color: var(--text-muted); }
.menu-value { margin-left: auto; color: var(--accent-pressed); font-weight: var(--weight-strong); }
.menu-value[data-off="true"] { color: var(--text-muted); }
.menu-label { padding: var(--space-control) var(--space-inline) 0; margin-bottom: var(--space-control); font-family: var(--font-mono); font-size: var(--text-caption); font-weight: var(--weight-eyebrow); color: var(--text-muted); text-transform: uppercase; letter-spacing: var(--tracking-caps); }

.menu-icon-row { flex-direction: row; align-items: stretch; gap: var(--space-control); }
.menu-icon-btn { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-tight); min-height: 56px; padding: var(--space-control) var(--space-tight); border: var(--border-element) solid color-mix(in srgb, var(--border) 70%, transparent); border-radius: var(--radius-panel); background: color-mix(in srgb, var(--surface) 82%, transparent); box-shadow: 0 2px 4px color-mix(in srgb, var(--text) 16%, transparent), inset 0 1px 0 color-mix(in srgb, var(--background) 85%, transparent); color: var(--text); transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); }
.menu-icon-btn:hover { background: color-mix(in srgb, var(--surface) 95%, transparent); border-color: var(--text-muted); }
.menu-icon-btn:active { transform: translateY(1px); }
.menu-icon-btn:has(.menu-value[data-off="true"]), .menu-icon-btn[data-off="true"] { background: color-mix(in srgb, var(--text) 7%, transparent); border-color: color-mix(in srgb, var(--border) 50%, transparent); box-shadow: inset 0 2px 4px color-mix(in srgb, var(--text) 20%, transparent), inset 0 -1px 2px color-mix(in srgb, var(--text) 8%, transparent), 0 1px 0 color-mix(in srgb, var(--surface) 60%, transparent); color: var(--text-muted); }
.menu-icon-btn .menu-value { margin-left: 0; font-size: var(--text-caption); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
:root {
  --nav-menu-clearance: calc(2.75rem + var(--space-stack));
}
.eyebrow { font-family: var(--font-mono); font-size: var(--text-caption); font-weight: var(--weight-eyebrow); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--accent-2-text); display: block; }
@keyframes site-reveal {
from { opacity: 0; max-block-size: 0; }
  to   { opacity: 1; max-block-size: 4rem; }
}
@keyframes site-modal-in {
from { opacity: 0; translate: 0 20px; scale: 0.97; }
}
@keyframes site-fade-in {
from { opacity: 0; }
}
@keyframes site-pop-in {
from { opacity: 0; translate: 0 6px; scale: 0.97; }
}
@keyframes site-spin {
to { rotate: 360deg; }
}
@keyframes site-slide {
from { background-position: -66% 0; }
  to   { background-position: 166% 0; }
}
@keyframes site-pulse {
50% { opacity: 0.45; }
}
@keyframes site-toast-in {
from { opacity: 0; translate: 0 12px; }
}

/* Shared site styles. Edit this file; page styles contain exceptions only. */

/* Viewport. */
:root { --page-height: 100svh; --visible-height: 100dvh; }
body { min-height: var(--page-height); }
.view-stack.is-stacked { height: var(--page-height); }

/* Document background. */
:root { --sky-ink: #ece8df; }
html[data-sky] { background: transparent; }
html[data-sky] body {
background-color: #050508;
background-image: url("/assets/sky-near.svg"),
  radial-gradient(ellipse at 12% 0%, rgb(61 255 176 / .2), transparent 60%),
  radial-gradient(ellipse at 88% 12%, rgb(160 110 255 / .22), transparent 65%),
  linear-gradient(142deg, transparent 30%, rgb(126 142 198 / .06) 50%, transparent 70%);
background-size: 512px 1024px, 100% 1100px, 100% 1500px, 100% 1800px;
background-repeat: repeat, no-repeat, no-repeat, no-repeat;
}
html[data-sky] body::before {
content: "";
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
background: url("/assets/sky-far.svg") repeat;
}
@media print { html[data-sky] body { background: none; } html[data-sky] body::before { display: none; } }

/* Header, navigation and page layout. */
.site-header { position: relative; z-index: 1; }
body > main, .site-footer { isolation: isolate; z-index: 0; }
.site-header > .tab-bar { z-index: auto; }
html.nav-locked { overflow: hidden; }
.page-heading-wrap { display: flex; justify-content: center; padding-block: clamp(48px, 8vw, 100px) clamp(32px, 5vw, 64px); }
.page-heading { flex: none; width: min(100vw, 600px); max-width: none; margin: 0; font-family: var(--font-hero, "Gadey", sans-serif); font-size: calc(min(100vw, 600px) / 3.7338867); color: #ece8df; font-weight: 400; line-height: 1; letter-spacing: 0; text-align: center; white-space: nowrap; text-box: trim-both cap alphabetic; }
@media (max-width: 40rem) { .page-heading { width: 78vw; font-size: calc(78vw / 3.7338867); } }
main.page-heading-page { padding-top: calc(var(--bar-clearance-top, 6rem) + var(--space-card)); }
@media (max-width: 40rem) { main.page-heading-page { padding-top: calc(var(--space-inline) + var(--safe-top, 0px) + var(--bar-height, 50px) + var(--space-card)); } }
.page-pills { display: flex; align-items: center; gap: .75rem; width: 100%; max-width: 100%; overflow-x: auto; padding: 4px 2px; scrollbar-width: none; }
.page-pills::-webkit-scrollbar { display: none; }
nav.page-pills { -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fade-l, 0px), #000 calc(100% - var(--fade-r, 0px)), transparent); mask-image: linear-gradient(to right, transparent, #000 var(--fade-l, 0px), #000 calc(100% - var(--fade-r, 0px)), transparent); }
.page-pills > :first-child { margin-left: auto; } .page-pills > :last-child { margin-right: auto; }
.page-pills > *, .page-pills .chip { flex: none; white-space: nowrap; }
.page-pills .chip { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 44px; text-decoration: none; border-radius: 999px; corner-shape: round; background: color-mix(in srgb, var(--surface) 62%, transparent); -webkit-backdrop-filter: blur(5px) saturate(1.4); backdrop-filter: blur(5px) saturate(1.4); }
nav.page-pills .chip { background: color-mix(in srgb, var(--surface) 62%, #0b1015); }
.sheet-tabs { position: static; transform: none; z-index: auto; max-width: none; padding: 0; justify-content: center; gap: var(--space-control); }
.sheet-tabs .tab-set { width: fit-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.sheet-tabs .tab-set::-webkit-scrollbar { display: none; }
.sheet-reset-row { min-height: 44px; margin-top: var(--space-stack); color: var(--text-muted); font-weight: var(--weight-body); }
.sheet-reset-row svg { color: inherit; }
.sheet-rise .sheet-scroll .sheet-group:not([hidden]) + .sheet-group:not([hidden]) { margin-top: var(--space-stack); }
.sheet-rise [data-settings-panel="account"] .menu-label, .sheet-rise [data-settings-panel="appearance"] .menu-label { margin-top: var(--space-stack); }
#nav-sheet.sheet-rise .sheet-scroll { padding-bottom: calc(3 * var(--space-control)); }
.dial-row { display: flex; flex-direction: column; gap: var(--space-inline); padding: var(--space-inline) var(--space-inline) calc(var(--space-inline) + 2px); cursor: ew-resize; }
.dial-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-control); font-size: var(--text-body); }
.dial-val { font-family: var(--font-mono); font-size: var(--text-caption); color: var(--text-muted); }
.dial-row input { width: 100%; height: 22px; margin: 0; background: none; -webkit-appearance: none; appearance: none; cursor: ew-resize; }
.dial-row input::-webkit-slider-runnable-track { height: 3px; border-radius: 2px; background: repeating-linear-gradient(90deg, var(--border-strong) 0 2px, transparent 2px 25%) , var(--fill-strong); }
.dial-row input::-moz-range-track { height: 3px; border-radius: 2px; background: var(--fill-strong); }
.dial-row input::-webkit-slider-thumb { -webkit-appearance: none; width: 15px; height: 15px; margin-top: -6px; border: 0; border-radius: var(--radius-pill); background: var(--accent-1); }
.dial-row input::-moz-range-thumb { width: 15px; height: 15px; border: 0; border-radius: var(--radius-pill); background: var(--accent-1); }
.swatch-block { display: flex; flex-direction: column; gap: var(--space-control); padding-top: var(--space-inline); }
.swatch-cap { font-size: var(--text-caption); color: var(--text-muted); padding: 0 var(--space-inline); }
.swatch-custom { width: 1.75rem; height: 1.75rem; border-radius: var(--radius-pill); border: var(--border-element) solid var(--border); background: conic-gradient(#f43, #fc0, #3c9, #08f, #a5e, #f43); position: relative; overflow: hidden; cursor: pointer; }
.swatch-custom input { position: absolute; inset: -25%; width: 150%; height: 150%; opacity: 0; cursor: pointer; }
.accent-swatches { display: flex; flex-wrap: wrap; gap: var(--space-control); padding: 0 var(--space-inline); }
.accent-swatches button { width: 1.75rem; height: 1.75rem; border-radius: var(--radius-pill); border: var(--border-element) solid var(--border); padding: 0; cursor: pointer; }
.accent-swatches button[aria-pressed="true"] { outline: var(--border-focus) solid var(--accent-3); outline-offset: 2px; }
.accent-swatches [data-accent=""] { background: var(--text); }
.site-main { width: 100%; max-width: var(--width-page, var(--width-default)); margin-inline: auto; padding: var(--space-card) var(--space-stack) var(--bar-clearance-bottom); color: var(--sky-ink, #ece8df); }
.site-main .card, .site-main .page-hero, .site-main .reading-sheet, .site-main .chip, .site-main .btn { color: var(--text); }
@media (min-width: 40rem) {
  .site-main { padding: var(--bar-clearance-top) var(--space-page) var(--space-section); }
}
.site-brand {
  position: fixed; top: calc(var(--space-pin) + var(--safe-top)); left: max(var(--space-page), calc((100% - 72rem) / 2 + var(--space-page))); display: inline-flex; align-items: center; user-select: none; -webkit-user-select: none;
  height: calc(40px + 2 * var(--space-tight) + 2 * var(--border-element)); padding: var(--space-tight);
  border: var(--border-element) solid color-mix(in srgb, var(--border) 65%, transparent); border-radius: 999px; corner-shape: round;
  background: color-mix(in srgb, var(--surface) 62%, transparent); filter: none;
  -webkit-backdrop-filter: blur(5px) saturate(1.4); backdrop-filter: blur(5px) saturate(1.4);
  box-shadow: inset 0 2px 5px color-mix(in srgb, var(--text) 22%, transparent), inset 0 -1px 3px color-mix(in srgb, var(--text) 9%, transparent), 0 1px 0 color-mix(in srgb, var(--surface) 55%, transparent), 0 8px 32px 10px rgb(0 0 0 / 0.22);
  color: var(--text); text-decoration: none; cursor: pointer; touch-action: manipulation;
}
.site-brand-indicator { display: inline-flex; align-items: center; gap: 0; height: 40px; padding: 0 16px 0 8px; border-radius: 999px; corner-shape: round;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow: 0 2px 5px color-mix(in srgb, var(--text) 25%, transparent), inset 0 1px 0 color-mix(in srgb, var(--background) 85%, transparent); }
.tab-bar button { -webkit-tap-highlight-color: transparent; }
.site-brand-mark { flex: none; display: block; width: 34px; height: 34px; }
.site-brand-mark .gem-front { opacity: 0.9; }
.site-brand-mark .gem-highlight { opacity: 0.22; }
.site-brand-mark .gem-sheen { filter: opacity(0.2); }
.site-brand-mark [fill="#ff2a00"] { fill: #ff527a; filter: drop-shadow(0 0 3px #ff527a); transition: none; }
.site-brand-mark [fill="#ffd000"] { fill: #f2ff5c; filter: drop-shadow(0 0 3px #f2ff5c); transition: none; }
.site-brand-mark [fill="#ff0048"] { fill: #ff57d6; filter: drop-shadow(0 0 3px #ff57d6); transition: none; }
.site-brand-mark [fill="#0091ff"] { fill: #4dc8ff; filter: drop-shadow(0 0 3px #4dc8ff); transition: none; }
.site-brand-mark [fill="#00e6a0"] { fill: #42ffae; filter: drop-shadow(0 0 3px #42ffae); transition: none; }
.site-brand-mark [fill="#a020ff"] { fill: #d77aff; filter: drop-shadow(0 0 3px #d77aff); transition: none; }
.site-brand-mark [fill="#ff7a00"] { fill: #ffbd4a; filter: drop-shadow(0 0 3px #ffbd4a); transition: none; }
.site-brand-mark [fill="#19e6ff"] { fill: #5cffff; filter: drop-shadow(0 0 3px #5cffff); transition: none; }
@media (max-width: 40rem) { .site-brand-mark { width: 28px; height: 28px; } }
.site-brand-text { font-family: var(--font-hero, "Gadey", "Arial Black", sans-serif); font-weight: 700; letter-spacing: -0.01em; font-size: 1.15rem; color: var(--text); }
.tab-bar-top > .tab-set { flex-direction: column; align-items: stretch; justify-content: flex-start;
  overflow: visible; border-radius: calc(20px + var(--space-tight)); }
.tab-row { display: flex; align-items: center; flex-wrap: nowrap; min-width: 0; }
.tab-scroll { position: relative; display: flex; align-items: center; flex-wrap: nowrap;
  flex: 0 1 auto; min-width: 0; overflow-x: auto; overflow-y: visible; scrollbar-width: none;
  --ind-room: 8px; padding: var(--ind-room) calc(var(--ind-room) + 4px);
  margin: calc(-1 * var(--ind-room)); }
.tab-scroll::-webkit-scrollbar { display: none; }
.tab-scroll > .tab-seg, .tab-row > .tab-more { flex: none; }
.tab-scroll > .tab-indicator { top: var(--ind-room); height: 100%; }
.tab-bar-top { align-items: flex-start; justify-content: flex-end; pointer-events: none; }
.tab-bar-top > .tab-set, .more-panel { pointer-events: auto; }
.tab-more { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; min-height: 40px; border: 0; font-family: inherit; font-size: var(--text-footnote); font-weight: var(--weight-strong); cursor: pointer; touch-action: manipulation; text-shadow: 0 1px 0 color-mix(in srgb, var(--background) 65%, transparent); }
.tab-row, .tab-scroll { gap: 12px; }
.tab-bar-top .tab-seg { margin-inline: -4px; padding-inline: calc(var(--space-stack) + 4px); }
.tab-more { width: 40px; min-width: 40px; padding: 0; border-radius: var(--radius-pill);
  background: var(--fill-strong); color: var(--text);
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); }
.tab-more svg { transition: rotate var(--duration) var(--ease-out); }
@media (hover: hover) { .tab-more:hover { background: var(--text); color: var(--background); } }
.tab-more[aria-expanded="true"] { background: var(--text); color: var(--background); }
.tab-more[aria-expanded="true"] svg { rotate: 180deg; }
.tab-more[data-here="true"]::after { content: ""; position: absolute; left: 50%; bottom: -1px; translate: -50%;
  width: 4px; height: 4px; border-radius: var(--radius-pill); background: var(--accent-1); }
.more-panel { position: absolute; top: calc(100% + var(--space-control));
  box-sizing: border-box; border-radius: calc(20px + var(--space-tight)); padding: var(--space-tight);
  background: color-mix(in srgb, var(--surface) 62%, transparent);
  -webkit-backdrop-filter: blur(5px) saturate(1.4); backdrop-filter: blur(5px) saturate(1.4);
  border: var(--border-element) solid color-mix(in srgb, var(--border) 65%, transparent);
  box-shadow: inset 0 2px 5px color-mix(in srgb, var(--text) 22%, transparent), inset 0 -1px 3px color-mix(in srgb, var(--text) 9%, transparent), 0 1px 0 color-mix(in srgb, var(--surface) 55%, transparent);
  transform-origin: 50% 0; transform: scale(0); visibility: hidden;
  transition: transform 320ms cubic-bezier(0.4, 0, 1, 1), visibility 0s linear 320ms; }
.more-panel[data-open="true"] { transform: scale(1); visibility: visible; transition: transform 320ms cubic-bezier(.2, 0, 0, 1), visibility 0s; }
.more-panel .more-in { opacity: 0; translate: 0 6px; transition: opacity 0.1s linear, translate 0.1s var(--ease-out), background var(--duration-fast) var(--ease-out), transform 0.1s var(--ease-out); }
.more-panel[data-open="true"] .more-in { opacity: 1; translate: none; transition: opacity 0.16s linear var(--d, 0ms), translate 0.22s var(--ease-out) var(--d, 0ms), background var(--duration-fast) var(--ease-out), transform 0.1s var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .more-panel, .more-panel[data-open="true"], .more-panel .more-in, .more-panel[data-open="true"] .more-in { transition: none; } .more-panel .more-in { opacity: 1; translate: none; } }
.more-panel .menu-label { text-align: center; }
.more-panel .menu-item { justify-content: center; text-align: center; }
.more-panel .menu-value { margin-left: 0; }
.more-panel [data-account-panel] { text-align: center; }
.more-panel [data-account-panel] > * { justify-content: center; }
.more-group.more-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-control); }
.more-group.more-row { grid-template-columns: repeat(4, 1fr); gap: 6px; }
.more-grid .menu-label { grid-column: 1 / -1; margin-bottom: 0; }
.more-grid .menu-item { justify-content: flex-start; text-align: left; gap: var(--space-control); padding: 6px var(--space-control); min-height: 36px;
  background: var(--surface); border: var(--border-element) solid var(--border); box-shadow: var(--shadow-raised);
  border-radius: var(--radius-control, 10px); white-space: nowrap; min-width: 0; }
.more-grid .menu-item:hover { background: var(--surface-hover); }
.more-key[data-scheme] svg { display: none; }
.more-key[data-scheme="light"] .if-light, .more-key[data-scheme="dark"] .if-dark, .more-key[data-scheme="auto"] .if-auto { display: block; }
.more-grid .menu-value { margin-left: auto; font-size: var(--text-caption); }
.more-key { transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), transform 0.1s var(--ease-out); }
.more-key:active { transform: scale(0.96); }
.more-key { color: var(--text-muted); }
.more-key .menu-value { color: var(--text); font-size: inherit; font-weight: var(--weight-strong); }
.more-row .menu-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 0; aspect-ratio: 1; text-align: center; white-space: normal; }
.more-row .menu-item { padding: 6px 3px; border-radius: 12px; }
.more-row .menu-item svg, .more-row .menu-dot { width: 18px; height: 18px; margin-bottom: 3px; }
.more-row .menu-value { grid-column: auto; margin: 0; line-height: 1.15; font-size: 11px; }
.more-row .menu-name { line-height: 1.15; font-size: 10.5px; font-weight: var(--weight-medium, 500); }
.menu-dot { display: block; border-radius: 50%; background: var(--dot, var(--theme-color)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 18%, transparent); }
.tab-bar-top .tab-indicator { view-transition-name: tab-highlight; }
.more-scroll { display: flex; flex-direction: column; gap: var(--space-stack);
  padding: var(--space-control);
  max-height: min(calc(var(--visible-height) * 0.54), 26rem); overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: none; }
.more-scroll::-webkit-scrollbar { display: none; }
.more-scroll { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fade-top, 0px),
    #000 calc(100% - var(--fade-bot, 18px)), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fade-top, 0px),
    #000 calc(100% - var(--fade-bot, 18px)), transparent 100%); }
.tab-scroll { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l, 0px),
    #000 calc(100% - var(--fade-r, 0px)), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l, 0px),
    #000 calc(100% - var(--fade-r, 0px)), transparent 100%); }
.more-group { display: flex; flex-direction: column; }
.tab-bar-top > .tab-set .tab-indicator { height: 40px; }
.site-brand .site-brand-mark { filter: drop-shadow(0 2px 1.5px rgb(43 70 100 / 0.32)); }
@media (min-width: 40rem) { .tab-bar-top > .tab-set { flex: 0 1 auto; max-width: none; } }
@media (min-width: 40rem) {
  .tab-bar.tab-bar-top:has(.tab-set) { left: 0; right: 0; transform: none; width: 100%; max-width: 72rem; margin-inline: auto; padding-inline: var(--space-page); }
}
@media (max-width: 40rem) {
  .tab-bar-top { position: fixed; top: auto; bottom: calc(var(--space-inline) + var(--safe-bottom)); left: var(--space-inline); right: var(--space-inline); transform: none; max-width: none; justify-content: center; }
  .site-brand { top: calc(var(--space-inline) + var(--safe-top)); left: 50%; transform: translateX(-50%); }
  .tab-bar-top > .tab-set { max-width: 100%; min-width: 0; }
  .tab-bar-top::before { content: ""; position: fixed; inset: 0; z-index: -1; border-radius: 0; background: rgb(0 0 0 / .65); opacity: 0; visibility: hidden; pointer-events: auto; transition: opacity 320ms ease, visibility 0s linear 320ms; }
  .tab-bar-top:has(.more-panel[data-open="true"])::before { opacity: 1; visibility: visible; transition-delay: 0s; }
  .more-panel { top: auto; bottom: calc(100% + var(--space-control)); transform-origin: 50% 100%; }
  .tab-more svg { rotate: 180deg; }
  .tab-more[aria-expanded="true"] svg { rotate: 0deg; }
}
@media (prefers-reduced-motion: reduce) { .site-brand, .tab-bar-top > .tab-set, .tab-bar-top::before { transition: none; } }
.tab-bubble { position: absolute; inset: var(--space-tight); border-radius: var(--radius-pill); background: transparent; pointer-events: none; transition: background var(--duration-fast) var(--ease-out); }
[aria-expanded="true"] > .tab-bubble { background: var(--surface); box-shadow: 0 2px 5px color-mix(in srgb, var(--text) 25%, transparent), inset 0 1px 0 color-mix(in srgb, var(--background) 85%, transparent); }
.tab-bar .tab-menu svg, .tab-bar .tab-settings svg, .tab-settings-face { position: relative; }
.tab-bar .tab-menu svg { stroke-width: 2; }
@media (min-width: 40rem) {
  #nav-sheet.sheet-rise { max-height: min(calc(var(--visible-height) * 0.78), 46rem); width: 20rem; right: max(var(--space-page), calc(50vw - 32rem + var(--space-page))); }
}
.page-hero { position: relative; padding: var(--space-card); border-radius: var(--radius-card); background-color: var(--surface); min-height: min(22rem, calc(var(--page-height) * 0.38)); justify-content: center; align-items: center; text-align: center; }
.page-hero::after { content: ""; position: absolute; inset: 0; border: var(--border-element) solid var(--border); border-radius: inherit; pointer-events: none; }
.hero-quote { margin: 0; font-style: italic; color: var(--text-muted); max-width: 34rem; }
.hero-rule { width: min(18rem, 60%); border: 0; border-top: var(--border-element) solid var(--border); margin: var(--space-tight) 0; }
.hero-stats { display: flex; flex-wrap: wrap; gap: var(--space-inline) var(--space-card); justify-content: center; }
.hero-stat { font-family: var(--font-heading); font-size: var(--text-h3); font-weight: var(--weight-heading); white-space: nowrap; }
.page-hero { border: var(--border-element) solid var(--border); }
@media print { .site-brand, .tab-bar, .sheet, .sheet-scrim { display: none; } }

/* Gem and motion controls. */
.wordmark-slot { font-family: var(--font-hero, 'Gadey', 'Arial Black', sans-serif); font-weight: 700; letter-spacing: -0.01em; text-decoration: none; color: var(--text); }
.brand-gem { display: inline-block; width: 2.25rem; height: 2.25rem; flex: none; padding: 0; border: 0; background: none; cursor: pointer; border-radius: var(--radius-pill, 9999px); }
.brand-gem:focus-visible { outline: 2px solid var(--accent-3, var(--theme-color, currentColor)); outline-offset: 2px; }
.fold-scrim { position: fixed; inset: 0; z-index: 39; background: rgb(0 0 0 / 0.45); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.gem-stage { position: fixed; inset: 0; margin: 0; width: 100%; max-width: none; height: 100%; max-height: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-card); padding: var(--space-card); box-sizing: border-box; border: 0; background: var(--background); color: var(--text); overflow: auto; overscroll-behavior: contain; }

.gem-stage-close { position: absolute; top: calc(var(--space-card) + env(safe-area-inset-top, 0px)); right: var(--space-card); width: 2.5rem; height: 2.5rem; display: inline-flex; align-items: center; justify-content: center; border: var(--border-hairline) solid var(--border); border-radius: var(--radius-pill, 9999px); background: var(--surface); color: var(--text); cursor: pointer; box-shadow: var(--shadow-raised); }
.gem-stage-caption { margin: 0; font-family: var(--font-heading), serif; font-weight: var(--weight-heading); font-size: var(--text-h3); text-transform: capitalize; letter-spacing: -0.01em; color: var(--text); }
.gem-stage-gem { width: min(62vw, calc(var(--page-height) * 0.38), 19rem); height: min(62vw, calc(var(--page-height) * 0.38), 19rem); }
.gem-stage-tray { display: flex; gap: var(--space-tight); max-width: 100%; padding: 0.35rem var(--space-inline); overflow-x: auto; scrollbar-width: none; touch-action: pan-x; -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--space-inline), #000 calc(100% - var(--space-inline)), transparent); mask-image: linear-gradient(90deg, transparent, #000 var(--space-inline), #000 calc(100% - var(--space-inline)), transparent); }
.gem-stage-tray::-webkit-scrollbar { display: none; }
.gem-stage-stone { flex: none; width: 2.75rem; height: 2.75rem; padding: 0.3rem; border: 2px solid transparent; border-radius: var(--radius-pill, 9999px); background: none; cursor: pointer; transition: transform var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out); }
.gem-stage-stone:hover { transform: translateY(-2px); }
.gem-stage-stone[aria-pressed="true"] { border-color: var(--text); }


@media (max-width: 40rem) { .toast-rack { bottom: calc(var(--bar-clearance-bottom, 6rem) + var(--safe-bottom, 0px)); } }



@media (max-width: 40rem) {  .gem-stage-gem { width: min(62vw, calc(var(--page-height) * 0.3), 19rem); height: min(62vw, calc(var(--page-height) * 0.3), 19rem); } }
.motion-ask { position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-end; justify-content: center; padding: var(--space-card); padding-bottom: calc(var(--space-card) + env(safe-area-inset-bottom, 0px)); background: rgb(0 0 0 / 0.45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity 0.22s ease; }
.motion-ask[data-open="true"] { opacity: 1; }
.motion-ask-card { width: min(26rem, 100%); padding: var(--space-card); border: var(--border-hairline) solid var(--border); border-radius: var(--radius-card); background: var(--surface); color: var(--text); box-shadow: var(--shadow-raised); translate: 0 12px; transition: translate 0.22s var(--ease-out, ease); }
.motion-ask[data-open="true"] .motion-ask-card { translate: 0 0; }
.motion-ask-icon { display: inline-flex; width: 2.6rem; height: 2.6rem; align-items: center; justify-content: center; border-radius: var(--radius-pill, 9999px); background: var(--accent-3-tint, color-mix(in srgb, var(--accent-3) 14%, transparent)); color: var(--accent-3); margin-bottom: var(--space-inline); }
.motion-ask h2 { margin: 0 0 var(--space-tight); font-family: var(--font-heading), serif; font-weight: var(--weight-heading); font-size: var(--text-h3); line-height: 1.15; text-wrap: balance; }
.motion-ask p { margin: 0 0 var(--space-card); color: var(--text-muted); }
.motion-ask-keys { display: flex; gap: var(--space-tight); }
.motion-ask-yes { flex: 1; min-height: 44px; padding: 0 1.2rem; border: 0; border-radius: var(--radius-pill, 9999px); background: var(--text); color: var(--background, #fff); font: inherit; font-weight: var(--weight-strong); cursor: pointer; }
.motion-ask-no { min-height: 44px; padding: 0 1.2rem; border: var(--border-hairline) solid var(--border); border-radius: var(--radius-pill, 9999px); background: none; color: var(--text); font: inherit; cursor: pointer; }
@media (min-width: 40rem) { .motion-ask { align-items: center; } }
@media (prefers-reduced-motion: reduce) { .motion-ask, .motion-ask-card { transition: none; } }
@media print { .brand-gem, .gem-stage, .motion-ask { display: none; } }

/* Accounts, comments and dialogs. */
.likes-modal .dialog-body { max-height: min(420px, calc(var(--visible-height) * 0.6)); overflow-y: auto; }
.like-row { display: flex; align-items: center; gap: var(--space-control); padding: var(--space-tight) 0; }
.like-row + .like-row { border-top: var(--border-hairline) solid var(--border); }
.like-avatar { width: 28px; height: 28px; border-radius: var(--radius-pill); border: var(--border-element) solid var(--border); object-fit: cover; flex: none; }
.like-avatar-blank { display: inline-flex; align-items: center; justify-content: center; background: var(--fill); color: var(--text-muted); font-size: var(--text-caption); line-height: 1; }
.like-name { flex: 1; min-width: 0; font-size: var(--text-footnote); font-weight: var(--weight-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.like-anon { color: var(--text-muted); }
.like-time { flex: none; color: var(--text-muted); font-size: var(--text-caption); white-space: nowrap; }
.like-more { justify-content: center; color: var(--text-muted); font-size: var(--text-caption); }
.like-row-btn { width: 100%; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.like-row-btn:hover .like-name { text-decoration: underline; }
.profile-card { display: flex; flex-direction: column; align-items: center; gap: var(--space-tight); padding: var(--space-stack) 0; text-align: center; }
.profile-avatar { width: 72px; height: 72px; border-radius: var(--radius-pill); border: var(--border-element) solid var(--border); object-fit: cover; }
.profile-avatar-blank { display: inline-flex; align-items: center; justify-content: center; background: var(--fill); color: var(--text-muted); font-size: var(--text-h3); line-height: 1; }
.profile-name { font-size: var(--text-h4); }
.profile-joined { color: var(--text-muted); font-size: var(--text-caption); }
.reading-likes, .like-pile-wrap { display: inline-flex; align-items: center; }
.like-pile { display: flex; align-items: center; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; }
.like-pile .face { position: relative; width: 24px; height: 24px; border-radius: var(--radius-pill); border: var(--border-element) solid var(--surface); object-fit: cover; flex: none; margin-right: -8px; }
.like-pile .face:last-child { margin-right: 0; }
.like-pile .face-blank { display: inline-flex; align-items: center; justify-content: center; background: var(--fill); color: var(--text-muted); font-size: var(--text-caption); line-height: 1; }
.like-none { margin: 0; color: var(--text-muted); font-size: var(--text-caption); }
.reading-comments { display: flex; flex-direction: column; gap: var(--space-stack); padding-top: var(--space-stack); border-top: var(--border-hairline) solid var(--border); }
.comment-list { display: flex; flex-direction: column; gap: var(--space-stack); }
.comment { display: flex; flex-direction: column; gap: var(--space-tight); }
.comment-head { display: flex; align-items: center; gap: var(--space-control); }
.comment-avatar { width: 2rem; height: 2rem; border-radius: var(--radius-pill); border: var(--border-element) solid var(--border); object-fit: cover; flex: none; }
.comment-avatar-blank { display: inline-flex; align-items: center; justify-content: center; background: var(--fill); color: var(--text-muted); font-size: var(--text-caption); line-height: 1; }
.comment > .comment-body, .comment > .comment-actions { margin-left: calc(2rem + var(--space-control)); }
.comment-reply > .comment-body, .comment-reply > .comment-actions { margin-left: calc(1.5rem + var(--space-control)); }
.comment-name { font-size: var(--text-footnote); }
.comment-gone { color: var(--text-muted); font-weight: var(--weight-body); }
.avatar-btn { flex: none; display: block; padding: 0; border: 0; background: none; cursor: pointer; position: relative; }
.avatar-btn::after { content: ""; position: absolute; inset: -6px 0; }
.name-btn { padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.avatar-btn:hover + .name-btn, .name-btn:hover { text-decoration: underline; }
.comment-when { color: var(--text-muted); font-size: var(--text-caption); }
.comment-body { margin: 0; white-space: pre-wrap; overflow-wrap: break-word; }
.comment-actions { display: flex; align-items: center; gap: var(--space-control); flex-wrap: wrap; margin-top: calc(-1 * var(--space-tight)); }
.comment-act { display: inline-flex; align-items: center; gap: var(--space-tight); min-height: 44px; padding: 0; border: 0; background: none; color: var(--text-muted); font: inherit; font-size: var(--text-caption); cursor: pointer; }
.comment-act:hover { color: var(--text); }
.comment-act svg { flex: none; }
.comment-act[aria-pressed="true"] { color: var(--accent-1); }
.comment-act[aria-pressed="true"] svg { fill: currentColor; }
.comment-act-n:empty { display: none; }
.comment-act-quiet { opacity: 0.62; }
.comment-act-quiet:hover { opacity: 1; }
.comment-thread { display: flex; flex-direction: column; gap: var(--space-control); }
.comment-thread + .comment-thread { padding-top: var(--space-stack); border-top: var(--border-hairline) solid var(--border); }
.comment-replies { display: flex; flex-direction: column; gap: var(--space-control); margin-left: calc(2rem + var(--space-control)); }
.comment-reply .comment-avatar { width: 1.5rem; height: 1.5rem; }
.reply-chip { display: flex; align-items: center; gap: var(--space-control); align-self: flex-start; padding: var(--space-tight) var(--space-control); border-radius: var(--radius-pill); background: var(--accent-3-tint); color: var(--text); font-size: var(--text-caption); }
.reply-chip button { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin: calc(-1 * var(--space-control)) calc(-1 * var(--space-control)) calc(-1 * var(--space-control)) 0; padding: 0; border: 0; background: none; color: var(--text-muted); cursor: pointer; }
.reply-chip button:hover { color: var(--text); }
.comment-del { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border: 0; background: none; color: var(--text-muted); cursor: pointer; }
.comment-del:hover { color: var(--text); }
.comment-compose { display: flex; align-items: flex-start; gap: var(--space-control); flex-wrap: wrap; }
.comment-invite { display: flex; align-items: center; gap: var(--space-control); width: 100%; min-height: 44px; padding: 0; border: 0; background: none; font: inherit; color: var(--text-muted); text-align: left; cursor: pointer; }
.comment-invite-line { flex: 1; min-width: 0; }
.comment-invite-key { display: inline-flex; align-items: center; gap: var(--space-tight); padding: var(--space-tight) var(--space-inline); border: var(--border-hairline) solid var(--border); border-radius: var(--radius-pill); font-size: var(--text-caption); font-weight: var(--weight-strong); color: var(--text); }
.comment-invite:hover .comment-invite-key { background: var(--fill); }
.comment-compose-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-control); }
.comment-compose textarea { width: 100%; }
.comment-compose-foot { display: flex; align-items: center; gap: var(--space-control); flex-wrap: wrap; }
.comment-who { color: var(--text-muted); font-size: var(--text-caption); }
.comment-signout { border: 0; background: none; padding: 0; font: inherit; color: var(--text-muted); text-decoration: underline; cursor: pointer; }
.comment-msg { margin: 0; min-height: 1.2em; color: var(--text-muted); font-size: var(--text-caption); }
button.feed-act-count:hover, a.feed-act-count:hover { text-decoration: underline; }
.feed-act-passive:hover, .feed-act-static:hover { text-decoration: none; }
.feed-act[aria-pressed="true"] svg { fill: currentColor; }
.tab-settings-face { display: block; width: 100%; height: 100%; border-radius: var(--radius-pill); object-fit: cover; }
html.social-locked, html.social-locked body { overflow: hidden; }
.account-cap { margin: 0; padding: 0 var(--space-inline) var(--space-control); color: var(--text-muted); font-size: var(--text-caption); }
.account-id { display: flex; align-items: center; gap: var(--space-control); padding: var(--space-control) var(--space-inline) var(--space-stack); }
.account-face { width: 40px; height: 40px; border-radius: var(--radius-pill); border: var(--border-element) solid var(--border); object-fit: cover; flex: none; }
.account-face-blank { display: inline-flex; align-items: center; justify-content: center; background: var(--fill); color: var(--text-muted); line-height: 1; }
.account-id-meta { min-width: 0; display: flex; flex-direction: column; }
.account-id-name { font-size: var(--text-footnote); font-weight: var(--weight-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-id-email { color: var(--text-muted); font-size: var(--text-caption); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-account-panel] .menu-item { min-height: 44px; }
dialog.modal.account-modal { width: min(34rem, 92vw); }
@media (max-width: 39.999rem) {
  dialog.modal.account-modal { width: calc(100vw - 2 * var(--space-card)); max-height: calc(var(--visible-height) - 2 * var(--space-section)); }
}
.account-modal .dialog-body { display: flex; flex-direction: column; gap: var(--space-stack); }
.account-modal .dialog-body > * { margin-block: 0; }
.account-sec { display: flex; flex-direction: column; gap: var(--space-tight); }
.account-sec-head { margin: 0; font-size: var(--text-footnote); color: var(--text-muted); }
.account-note { margin: 0; color: var(--text-muted); font-size: var(--text-caption); }
.act-row { display: flex; align-items: center; gap: var(--space-control); padding: var(--space-tight) 0; }
.act-row + .act-row { border-top: var(--border-hairline) solid var(--border); }
.act-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-tight); color: inherit; text-decoration: none; }
.act-main:hover .act-text { text-decoration: underline; }
.act-text { font-size: var(--text-footnote); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act-meta { color: var(--text-muted); font-size: var(--text-caption); }
.act-del { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border: 0; background: none; color: var(--text-muted); cursor: pointer; }
.act-del:hover { color: var(--text); }
.act-del[data-armed="true"] { color: var(--error); }
.account-danger { display: flex; flex-direction: column; gap: var(--space-control); }
.account-danger .btn { width: 100%; min-height: 44px; }
.account-form { display: flex; flex-direction: column; gap: var(--space-control); }
.account-form textarea { width: 100%; }

/* Footer. */
.site-footer {
  --f-bg: #0b0e11; --f-bg2: #10141a; --f-well: #151a21;
  --f-text: #e8ebef; --f-muted: rgb(232 235 239 / 0.58);
  --f-line: rgb(232 235 239 / 0.1);
  --f-accent: var(--accent-3, var(--theme-color, #8ab4ff));
  position: relative;
  margin-top: 144px;
  border-top: 1px solid var(--f-line);
  color: var(--f-text); font-size: 0.9rem; line-height: 1.6;
}
.site-footer { background: radial-gradient(110% 70% at 50% 0%, color-mix(in srgb, var(--f-accent) 6%, transparent), transparent 58%), linear-gradient(rgb(16 20 26 / .14), rgb(11 14 17 / .22)); }
.ftr-wrap { max-width: 72rem; margin-inline: auto; padding: 2.75rem 1.5rem calc(1rem + var(--bar-clearance-bottom, 6rem)); }
@media (min-width: 40rem) { .ftr-wrap { padding-bottom: 1.5rem; } }
.ftr-top { display: flex; flex-direction: column; gap: 2rem; padding-bottom: 2.4rem; border-bottom: 1px solid var(--f-line); }
.ftr-line { margin: 0; max-width: none; text-align: center; font-family: var(--font-hand, "Caveat"), cursive; font-weight: 600;
  font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1.2; color: var(--f-text); }
.ftr-id { display: flex; flex-direction: column; gap: 2rem; }
@media (min-width: 52rem) { .ftr-id { flex-direction: row; align-items: center; justify-content: space-between; gap: 3rem; } }
.ftr-me { flex: 1 1 auto; display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.ftr-name { margin: 0; font-size: 1.15rem; font-weight: 600; color: var(--f-text); }
.ftr-detail { margin: 0; max-width: none; color: var(--f-muted); }
.ftr-detail a { color: inherit; text-decoration: none; } .ftr-detail a:hover { color: var(--f-text); }
.ftr-me .ftr-social { margin-top: 0.7rem; }
.ftr-brand { flex: none; display: flex; align-items: center; gap: 0.5rem; }
@media (min-width: 52rem) { .ftr-brand { justify-content: flex-end; } }
.ftr-gem { display: block; width: clamp(80px, 19vw, 116px); height: clamp(80px, 19vw, 116px); flex: none; }
.ftr-wordmark { font-family: var(--font-hero, "Gadey", "Arial Black", sans-serif); font-weight: 700;
  letter-spacing: -0.01em; font-size: clamp(3.3rem, 8.8vw, 4.7rem); line-height: 1; color: var(--f-text); }
.ftr-bottom b { color: var(--f-text); font-weight: 600; }
.ftr-social { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.ftr-social-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  border: 1px solid var(--f-line); background: var(--f-well); color: var(--f-text); transition: border-color 0.15s ease, transform 0.15s ease; }
.ftr-social-btn:hover { border-color: var(--f-accent); transform: translateY(-2px); }
.ftr-social-btn:focus-visible, .ftr-sub-form :focus-visible, .ftr-msg :focus-visible, .site-footer a:focus-visible { outline: 2px solid var(--f-accent); outline-offset: 2px; }
.ftr-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ftr-msg { display: flex; flex-direction: column; gap: 0.55rem; }
.ftr-msg textarea, .ftr-msg input { width: 100%; padding: 0.6rem 0.85rem; border-radius: 12px;
  border: 1px solid var(--f-line); background: #0d1116; color: var(--f-text); font: inherit; font-size: 0.85rem; }
.ftr-msg textarea { resize: vertical; flex: 1 1 auto; min-height: 4.5rem; }
.ftr-msg textarea::placeholder, .ftr-msg input::placeholder { color: rgb(232 235 239 / 0.35); }
.ftr-msg-row { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.ftr-msg-row input { flex: 1 1 11rem; min-width: 0; width: auto; }
.ftr-msg-row button { flex: none; padding: 0.6rem 1.3rem; border: 0; border-radius: 999px;
  background: var(--f-text); color: #0b0e11; font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer; }
.ftr-msg-row button:hover { background: #fff; }
.ftr-msg-row button:disabled { opacity: 0.6; cursor: default; }
.ftr-msg-note { margin: 0; min-height: 0; font-size: 0.8rem; color: var(--f-muted); }
.ftr-msg-note[data-ok="true"] { color: var(--f-accent); }
.ftr-sub { display: flex; flex-direction: column; gap: 0.55rem; }
.ftr-sub-form input { width: 100%; padding: 0.5rem 1rem; border-radius: 999px;
  border: 1px solid var(--f-line); background: #0d1116; color: var(--f-text); font: inherit; font-size: 0.85rem; }
.ftr-sub-form input::placeholder { color: rgb(232 235 239 / 0.35); }
.ftr-sub-form button { flex: none; align-self: flex-start; padding: 0.5rem 1.1rem; border: 0; border-radius: 999px;
  background: var(--f-text); color: #0b0e11; font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer; }
.ftr-sub-form button:hover { background: #fff; }
.ftr-sub-form button:disabled { opacity: 0.6; cursor: default; }
.ftr-sub-msg { margin: 0; min-height: 0; font-size: 0.8rem; color: var(--f-muted); }
.ftr-sub-form input, .ftr-sub-form button, .ftr-msg-row input, .ftr-msg-row button { box-sizing: border-box; height: 2.75rem; min-height: 2.75rem; padding-block: 0; margin: 0; line-height: 1; -webkit-appearance: none; appearance: none; }
.ftr-sub-msg[data-ok="true"] { color: var(--f-accent); }
@media (pointer: coarse) { .ftr-sub-form input, .ftr-msg textarea, .ftr-msg input { font-size: 16px; } }
.ftr-cols { display: grid; gap: 0.9rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 2.4rem; }
@media (min-width: 40rem) { .ftr-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 60rem) { .ftr-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ftr-sub { grid-column: span 2; align-self: start; }
.ftr-msg { grid-column: 1 / -1; }
@media (min-width: 60rem) { .ftr-msg { grid-column: 2 / -1; } }
@media (max-width: 39.99rem) { .ftr-col-wide { grid-column: span 2; } }
.ftr-col { min-width: 0; padding: 1rem 1rem 1.1rem; border: 1px solid var(--f-line); border-radius: 16px; background: var(--f-well); }
.ftr-label { margin: 0 0 0.8rem; font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.72rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--f-muted); }
.ftr-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.ftr-list a, .ftr-plain { display: flex; align-items: center; gap: 0.55rem; color: var(--f-muted); text-decoration: none; transition: color 0.15s ease;
  min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ftr-mark { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem;
  border-radius: 8px; border: 1px solid var(--f-line); background: rgb(232 235 239 / 0.04); transition: border-color 0.15s ease, color 0.15s ease; }
.ftr-list a:hover .ftr-mark { border-color: var(--f-accent); color: var(--f-accent); }
.ftr-plain { opacity: 0.65; cursor: default; }
.ftr-list a:hover { color: var(--f-text); }
.ftr-project-pages { margin-top: 0.9rem; } .ftr-project-pages .ftr-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 0.5rem 1rem; } .ftr-project-pages .ftr-list a { min-height: 44px; white-space: normal; }
@media (max-width: 39.99rem) { .ftr-list a, .ftr-plain { white-space: normal; align-items: flex-start; } .ftr-list a .ftr-mark, .ftr-plain .ftr-mark { margin-top: 0.05rem; } }
.ftr-msg .ftr-label, .ftr-sub .ftr-label { margin-bottom: 0.15rem; }
.ftr-bottom { display: grid; gap: 0.4rem; text-align: center; align-items: baseline;
  margin-top: 2.4rem; padding-top: 1.4rem; border-top: 1px solid var(--f-line); font-size: 0.78rem; color: rgb(232 235 239 / 0.42); }
@media (min-width: 40rem) { .ftr-bottom { grid-template-columns: 1fr auto 1fr; gap: 1.5rem; }
  .ftr-bottom > :first-child { text-align: left; } .ftr-bottom > :last-child { text-align: right; } }
@media print { .site-footer { display: none; } }

/* Section dividers. */
.section-divider {
display: flex;
margin: 0;
align-items: center;
gap: var(--space-inline);
font-family: var(--font-mono);
font-size: var(--text-footnote);
font-weight: var(--weight-strong);
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
color: var(--sky-ink);
}
.section-divider::before,
.section-divider::after {
content: "";
flex: 1;
border-top: var(--border-hairline) solid color-mix(in srgb, var(--sky-ink) 30%, transparent);
}

/* Feed cards. */
.month-group > .masonry, .month-group > .feed-empty { margin-top: var(--space-section); }
.feed-post {
display: flex; flex-direction: column; gap: var(--space-stack);
position: relative;
isolation: isolate;
transition: box-shadow var(--duration-normal) var(--ease-out),
            translate var(--duration-normal) var(--ease-spring);
}
.feed-post-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.feed-post-link:focus-visible { outline: var(--border-focus) solid var(--accent-3); outline-offset: 2px; }
.feed-post:hover { box-shadow: var(--shadow-floating); }
.feed-post, .feed-empty, .reading-sheet, #list-controls .chip:not([aria-pressed="true"]), #applied-filters .chip {
background: color-mix(in srgb, var(--surface) 62%, transparent);
-webkit-backdrop-filter: blur(5px) saturate(1.4); backdrop-filter: blur(5px) saturate(1.4);
}
html:not([data-mode="dark"]) .feed-post, html:not([data-mode="dark"]) .feed-empty,
html:not([data-mode="dark"]) .reading-sheet {
background: var(--surface);
border-color: color-mix(in srgb, var(--surface) 92%, transparent);
}
html:not([data-mode="dark"]) .feed-embed {
background:
  radial-gradient(60% 55% at 12% 10%, rgb(255 190 120 / 0.16), transparent 70%),
  radial-gradient(55% 60% at 88% 20%, rgb(170 150 255 / 0.16), transparent 70%),
  radial-gradient(60% 55% at 50% 100%, rgb(120 210 200 / 0.16), transparent 70%),
  var(--fill);
}
.site-main .feed-empty { padding: var(--space-section) var(--space-card); text-align: center; color: var(--text-muted); }
.feed-empty strong { color: inherit; font-weight: var(--weight-medium); }
.feed-post:active { box-shadow: var(--shadow-raised); }
.feed-post:has(.feed-post-link):hover { translate: none; }
.feed-act, .feed-tag, .feed-link-preview { position: relative; z-index: 2; }
.feed-author { display: flex; align-items: center; gap: var(--space-control); }
.feed-avatar {
width: 2.25rem; height: 2.25rem;
border-radius: var(--radius-pill);
border: var(--border-element) solid var(--border);
object-fit: cover; flex: none;
}
.feed-author-meta { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.feed-author-name { white-space: nowrap; }
.feed-date { margin-left: auto; align-self: flex-start; text-align: right; max-width: 38%; }
.feed-media { position: relative; display: block; border-radius: var(--radius-panel); overflow: hidden; border: var(--border-element) solid var(--border); }
.feed-media img { width: 100%; height: auto; display: block; aspect-ratio: 16 / 9; object-fit: cover; }
.feed-post-body p, .feed-comment { color: color-mix(in srgb, var(--text) 76%, var(--background)); }
.feed-embed {
display: flex; flex-direction: column; gap: var(--space-control);
padding: var(--space-stack);
border: var(--border-element) solid var(--border);
border-radius: var(--radius-panel);
background: var(--background);
}
.feed-comment { margin: 0; }
.feed-link-preview { padding: 0; overflow: hidden; text-decoration: none; color: inherit; }
.feed-link-preview .feed-media { border: 0; border-radius: 0; }
.feed-link-meta {
display: flex; flex-direction: column; gap: 2px;
padding: var(--space-control) var(--space-stack);
border-top: var(--border-hairline) solid var(--border);
}
.feed-link-source {
font-family: var(--font-mono); font-size: var(--text-caption);
text-transform: uppercase; letter-spacing: var(--tracking-caps);
color: var(--text-muted);
}
.feed-link-title { font-size: var(--text-footnote); color: var(--text); }
.feed-tags { gap: var(--space-control); }
.feed-tag {
display: inline-flex; align-items: center;
padding: 0.25em 0.7em;
border-radius: var(--radius-pill);
background: var(--accent-3-tint);
border: var(--border-hairline) solid var(--accent-3-edge);
font-size: var(--text-caption);
color: var(--text-muted);
cursor: pointer;
user-select: none;
transition: background var(--duration-fast) var(--ease-out);
}
.feed-tag:hover { background: var(--accent-3-edge); }
.feed-tag[aria-pressed="true"] { background: var(--accent-3-edge); font-weight: var(--weight-strong); }
.feed-media-play {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
font-size: 2rem; color: #fff;
background: rgb(0 0 0 / 0.18);
transition: background var(--duration-fast) var(--ease-out);
}
.feed-media:hover .feed-media-play { background: rgb(0 0 0 / 0.3); }
.feed-post-body { display: block; text-decoration: none; color: inherit; }
.feed-actions {
display: flex; gap: var(--space-control);
padding-top: var(--space-control);
border-top: var(--border-hairline) solid var(--border);
}
.feed-act {
display: inline-flex; align-items: center; gap: 0.45em;
padding: var(--space-tight) 0;
min-height: 28px;
border: 0; background: none;
color: var(--text-muted);
font-size: var(--text-footnote);
font-variant-numeric: tabular-nums;
cursor: pointer;
}
.feed-act:hover { color: var(--text); }
.feed-act:active { transform: scale(0.94); }
.feed-act[aria-pressed="true"] { color: var(--accent-3); }
.feed-act svg { flex: none; display: inline-block; }
.feed-act-static { margin-left: auto; cursor: default; }
.feed-act-static:hover { color: var(--text-muted); }
a.feed-act { text-decoration: none; }
.feed-act-count { margin-left: calc(-1 * var(--space-stack) + var(--space-tight)); min-width: 1.5rem; position: relative; }
button.feed-act-count::after, a.feed-act-count::after { content: ""; position: absolute; inset: -8px 0; }
.feed-act-passive { cursor: default; }
.feed-act-passive:hover { color: var(--text-muted); }

/* Project cards share one surface, with a compact homepage variant. */
.project-tile { --project-tint: #ddd5f5; --project-colour: #a28bcc; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; padding: 22px; text-decoration: none; color: var(--text); background: radial-gradient(ellipse at 100% 0, color-mix(in srgb, var(--project-tint) 60%, transparent), transparent 65%), linear-gradient(145deg, color-mix(in srgb, var(--surface) 90%, var(--project-tint)), var(--surface)); box-shadow: inset 0 1px 0 rgb(255 255 255 / .7); transition: none; }
.project-tile::before { content: ""; position: absolute; inset: 0 0 auto; height: 6px; background: linear-gradient(90deg, var(--project-colour), var(--project-tint), var(--project-colour)); }
.project-tokyo-by-rail { --project-tint: #d7eddf; --project-colour: #6ba888; }
.project-space-jacket { --project-tint: #cfeaf3; --project-colour: #68adbf; }
.project-card-status { flex: none; font: 11px/1.4 var(--font-mono); color: var(--text-muted); }
.project-card-copy { display: flex; flex: none; flex-direction: column; gap: 12px; }
.project-card-title { display: flex; justify-content: space-between; gap: 12px; font: 400 clamp(24px, 3vw, 34px)/1.2 var(--font-heading); }
.project-card-title > span { color: var(--text-muted); }
.project-card-summary { max-width: 34ch; font: 13px/1.5 var(--font-body); color: var(--text-muted); }
.project-tile-compact { flex: 0 0 min(20rem, 85%); padding: 20px; justify-content: flex-start; }
.project-tile-compact .project-card-title { font: 600 18px/1.2 var(--font-body); }
.project-tile:focus-visible { outline: 3px solid var(--project-colour); outline-offset: -5px; }

/* White document surfaces. */
.paper { --text: #222522; --text-muted: #61665f; --border: #dde0da; color: var(--text); background: #fff; border-radius: var(--radius-panel); box-shadow: 0 12px 48px rgb(0 0 0 / .14); }

/* Native horizontal collections and their optional position control. */
.carousel { display: flex; align-items: stretch; gap: var(--space-inline); min-width: 0; overflow-x: auto; padding-block: 2px; scroll-snap-type: x proximity; scrollbar-width: none; }
.carousel > * { flex: none; min-width: 0; scroll-snap-align: start; }
.carousel::-webkit-scrollbar { display: none; }
.carousel-position { appearance: none; flex: none; align-self: flex-start; width: 33.333%; height: 16px; min-height: 0; margin: 4px 0 0; padding: 0; border: 0; background: transparent; border-radius: 999px; corner-shape: round; cursor: pointer; touch-action: pan-y; }
.carousel-position:disabled { visibility: hidden; } /* Keep tile height stable when every item fits. */
.carousel-position::-webkit-slider-runnable-track { height: 8px; border: 0 solid transparent; border-inline-width: 2px; border-radius: 999px; corner-shape: round; background: color-mix(in srgb, var(--text) 8%, transparent); box-shadow: inset 0 1px 2px color-mix(in srgb, var(--text) 14%, transparent); }
.carousel-position::-moz-range-track { height: 8px; border: 0 solid transparent; border-inline-width: 2px; border-radius: 999px; corner-shape: round; background: color-mix(in srgb, var(--text) 8%, transparent); box-shadow: inset 0 1px 2px color-mix(in srgb, var(--text) 14%, transparent); }
.carousel-position::-webkit-slider-thumb { appearance: none; margin-top: 2px; width: calc(var(--thumb-width, 40px) - 4px); height: 4px; border: 0; border-radius: 999px; corner-shape: round; background: color-mix(in srgb, var(--surface) 96%, transparent); box-shadow: 0 1px 1px color-mix(in srgb, var(--text) 14%, transparent); }
.carousel-position::-moz-range-thumb { width: calc(var(--thumb-width, 40px) - 4px); height: 4px; border: 0; border-radius: 999px; corner-shape: round; background: color-mix(in srgb, var(--surface) 96%, transparent); box-shadow: 0 1px 1px color-mix(in srgb, var(--text) 14%, transparent); }
.carousel-position:focus-visible { outline: 2px solid var(--accent-3); outline-offset: 2px; border-radius: 999px; corner-shape: round; }

/* Corners. */
:root { --radius-control: 10px; --radius-panel: 14px; --radius-card: 20px; }
*, *::before, *::after { corner-shape: squircle; }
input::-webkit-slider-thumb { corner-shape: squircle; }
input::-webkit-slider-runnable-track { corner-shape: squircle; }
input::-moz-range-thumb { corner-shape: squircle; }
input::-moz-range-track { corner-shape: squircle; }
:is(#unit, .tab-bar, .site-brand), :is(#unit, .tab-bar, .site-brand) *, :is(#unit, .tab-bar, .site-brand)::before, :is(#unit, .tab-bar, .site-brand)::after, :is(#unit, .tab-bar, .site-brand) *::before, :is(#unit, .tab-bar, .site-brand) *::after { corner-shape: round; }
.tab-bar .tab-set, .tab-bar .tab-pill { border-radius: 24px; }
.tab-bar :is(.tab, .tab-bubble) { border-radius: 18px; }

/* Section introductions and supporting links. */
.section-intro { display: flex; flex-direction: column; gap: 0.2em; margin: 0; text-align: center; font: var(--weight-heading) clamp(1.625rem, 4vw, 2.5rem)/1.25 var(--font-heading), serif; color: var(--text); }
.section-intro a { color: var(--accent-3); text-decoration: none; }
.section-label { margin: 0; font-family: var(--font-mono, monospace), monospace; font-size: 1rem; font-weight: var(--weight-strong); line-height: 1.2; letter-spacing: var(--tracking-caps, 0.06em); text-align: center; color: var(--text-subtle); }
.section-more { align-self: flex-end; color: var(--accent-3); font-size: var(--text-caption); line-height: 1.2; text-align: right; text-decoration: none; }
.section-more:hover { color: var(--accent-3-hover); }

/* Shared card copy and filter controls. */
.sec-head { display: flex; flex-direction: column; gap: var(--space-tight); }
.sec-title { margin: 0; font-size: var(--text-h2); }
.section-caption { margin: 0; color: var(--text-muted); font-size: var(--text-footnote); max-width: 36rem; }
.ctl-chip { display: inline-flex; align-items: center; gap: 0.5em; white-space: nowrap; }
.ctl-chip svg { display: inline-block; flex: none; }
.pill-badge { display: inline-flex; align-items: center; justify-content: center;
      min-width: 1.15rem; height: 1.15rem; padding: 0 0.3em;
      margin-left: 0.45em;
      border-radius: var(--radius-pill);
      
      background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text-muted);
      font-size: 0.66rem; font-weight: var(--weight-strong);
      font-variant-numeric: tabular-nums; }
.chip[aria-pressed="true"] .pill-badge { background: color-mix(in srgb, var(--background) 18%, transparent); color: inherit; opacity: 0.8; }
.filter-row { justify-content: center; gap: var(--space-control); flex-wrap: wrap; }
.card-excerpt { margin: 0;
      display: -webkit-box;
      -webkit-line-clamp: 6;
      -webkit-box-orient: vertical;
      overflow: hidden;
      color: var(--text-muted);
      -webkit-mask-image: linear-gradient(to bottom, black 45%, rgb(0 0 0 / 0.6) 75%, rgb(0 0 0 / 0.16));
      mask-image: linear-gradient(to bottom, black 45%, rgb(0 0 0 / 0.6) 75%, rgb(0 0 0 / 0.16)); }
.card .chips { flex-wrap: nowrap;
      overflow-x: auto;
      max-width: 100%;
      padding-bottom: 2px;
      scrollbar-width: none; }
.card .chips::-webkit-scrollbar { display: none; }
.card .chips .chip { flex: none; }

/* Shared text roles. */
.text-muted { color: var(--text-muted); }
.text-h2 { font-size: var(--text-h2); }

/* Responsive card groups and page titles. */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); gap: var(--space-stack); }
.page-title { margin: 0; }

/* Static gems and their native preview dialog. */
.site-stone { display: block; width: 100%; height: 100%; }
.gem-stage:not([open]) { display: none; }
.gem-stage::backdrop { background: rgb(0 0 0 / .7); }
body:has(.gem-stage[open]) { overflow: hidden; }

/* Shared excerpts and source labels. */
.share-title { display: block; margin-bottom: var(--space-tight); }
.preview-copy { margin: 0; display: -webkit-box; -webkit-line-clamp: 10; -webkit-box-orient: vertical; overflow: hidden; }
.muted-caption { margin: 0; color: var(--text-muted); }