/* Generated from tokens.json by scripts/build-styles.mjs. Do not edit. */
:root, [data-theme="dark"], [data-theme="system"] {
  --surface: #111111;
  --surface-raised: #1f1f1f;
  --panel: #111111d9;
  --ink: #ffffff;
  --ink-strong: #ffffff;
  --text: #ffffffd4;
  --text-subtle: #ffffff99;
  --button-secondary: #00000094;
  --on-button-secondary: #ffffffd4;
  --control-track: #000000f2;
  --control-on: #ffffffd4;
  --highlight: #ffffff0d;
  --hairline: #000000bf;
  --selection-ring: #ffffff;
  --shadow-tint: #000000;
  --menu-surface: #1f1f1f;
  --menu-marker: #ffffff14;
  --menu-marker-active: #ffffff21;
  --field-surface: #000000a6;
  --chip-surface: #ffffff1a;
  --tab-selected: #ffffff1f;
  --danger: oklch(0.40 0.1 25); /* @kind color */
  --on-danger: #ffffff; /* @kind color */
  --band-broken: oklch(0.47 0.13 25); /* @kind color */
  --band-risk: oklch(0.47 0.13 80); /* @kind color */
  --band-kept: oklch(0.47 0.13 150); /* @kind color */
  --logo-gate: #b7b7b7;
  --raised: inset 0 0 0 1px #ffffff0a, 0 0 0 1px #00000073, 0 40px 11px #00000003, 0 26px 10px #00000006, 0 14px 9px #0000001a, 0 6px 6px #00000026, 0 2px 4px #00000040; /* @kind shadow */
  --pressed: inset 0 0 0 1px #ffffff0a, 0 0 0 1px #00000026, 0 20px 10px #00000003, 0 12px 10px #0000000d, 0 6px 9px #0000002b, 0 2px 4px #0000004a, 0 1px 2px #00000054; /* @kind shadow */
  --well: 0 1px 0 #ffffff26, inset 0 1px 0 #000000, inset 0 1px 4px #00000040;
  --floating: 0 0 0 2px #00000026, 0 68px 27px #0000000a, 0 38px 23px #00000021, 0 17px 17px #00000038, 0 4px 9px #00000042;
  --noise-opacity: 0.10; /* @kind other */
}
[data-theme="light"] {
  --surface: #b4b4b4;
  --surface-raised: #b4b4b4;
  --panel: #b4b4b4d9;
  --ink: #000000;
  --ink-strong: #000000;
  --text: #000000d9;
  --text-subtle: #000000b8;
  --button-secondary: #0000001a;
  --on-button-secondary: #000000d9;
  --control-track: #0000001a;
  --control-on: #000000d9;
  --highlight: #ffffff33;
  --hairline: #0000002d;
  --selection-ring: #ffffff;
  --shadow-tint: #000000;
  --menu-surface: #c4c4c4;
  --menu-marker: #00000014;
  --menu-marker-active: #0000001f;
  --field-surface: #00000014;
  --chip-surface: #00000014;
  --tab-selected: #0000001a;
  --band-broken: oklch(0.8 0.13 25); /* @kind color */
  --band-risk: oklch(0.8 0.13 80); /* @kind color */
  --band-kept: oklch(0.8 0.13 150); /* @kind color */
  --logo-gate: #171717;
  --raised: inset 0 0 0 1px #ffffff0a, 0 0 0 1px #00000026, 0 1px 1px -0.5px #0000001a, 0 4.5px 4.5px -2.25px #00000026, 0 18px 18px -9px #00000040; /* @kind shadow */
  --pressed: inset 0 0 0 1px #ffffff0a, 0 0 0 1px #00000026, 0 1px 1px -0.5px #0000001a, 0 2.5px 4.5px -2.25px #00000026, 0 8px 18px -9px #00000040; /* @kind shadow */
  --well: 0 1px 0 #ffffff33, inset 0 1px 0 #00000026, inset 0 1px 4px #0000001a;
  --floating: 0 0 0 1px #00000026, 0 38px 23px #0000001a, 0 17px 17px #00000026, 0 4px 9px #00000033;
  --noise-opacity: 0.15; /* @kind other */
}
[data-theme="gold"] {
  --surface: #ba965a;
  --surface-raised: #ba965a;
  --panel: #ba965ad9;
  --ink: #1a1209;
  --ink-strong: #101010;
  --text: #1a1209;
  --text-subtle: #35270f;
  --button-secondary: #947447c7;
  --on-button-secondary: #1a1209;
  --control-track: #10101042;
  --control-on: #101010;
  --highlight: #ffffff40;
  --hairline: #4b3f3440;
  --selection-ring: #ffffff;
  --shadow-tint: #88612e;
  --menu-surface: #c4a468;
  --menu-marker: #0000001a;
  --menu-marker-active: #00000029;
  --field-surface: #10101033;
  --chip-surface: #10101026;
  --tab-selected: #10101029;
  --band-broken: oklch(0.82 0.13 25); /* @kind color */
  --band-risk: oklch(0.82 0.13 80); /* @kind color */
  --band-kept: oklch(0.82 0.13 150); /* @kind color */
  --logo-gate: #b7b7b7;
  --raised: inset 0 0 0 1px #ffffff0a, 0 0 0 1px #00000026, 0 40px 11px #88612e03, 0 26px 10px #88612e0d, 0 14px 9px #88612e2b, 0 6px 6px #88612e4a, 0 2px 4px #88612e54; /* @kind shadow */
  --pressed: inset 0 0 0 1px #ffffff0a, 0 0 0 1px #00000026, 0 20px 10px #88612e03, 0 12px 10px #88612e0d, 0 6px 9px #88612e2b, 0 2px 4px #88612e4a, 0 1px 2px #88612e54; /* @kind shadow */
  --well: 0 1px 0 #ffffff33, inset 0 1px 0 #00000012, inset 0 1px 4px #00000014;
  --floating: 0 0 0 1px #00000026, 0 68px 27px #88612e0a, 0 38px 23px #88612e21, 0 17px 17px #88612e38, 0 4px 9px #88612e42;
  --noise-opacity: 0.15; /* @kind other */
}
@media (prefers-color-scheme: light) {
  [data-theme="system"] {
    --surface: #b4b4b4;
    --surface-raised: #b4b4b4;
    --panel: #b4b4b4d9;
    --ink: #000000;
    --ink-strong: #000000;
    --text: #000000d9;
    --text-subtle: #000000b8;
    --button-secondary: #0000001a;
    --on-button-secondary: #000000d9;
    --control-track: #0000001a;
    --control-on: #000000d9;
    --highlight: #ffffff33;
    --hairline: #0000002d;
    --selection-ring: #ffffff;
    --shadow-tint: #000000;
    --menu-surface: #c4c4c4;
    --menu-marker: #00000014;
    --menu-marker-active: #0000001f;
    --field-surface: #00000014;
    --chip-surface: #00000014;
    --tab-selected: #0000001a;
    --band-broken: oklch(0.8 0.13 25); /* @kind color */
    --band-risk: oklch(0.8 0.13 80); /* @kind color */
    --band-kept: oklch(0.8 0.13 150); /* @kind color */
    --logo-gate: #171717;
    --raised: inset 0 0 0 1px #ffffff0a, 0 0 0 1px #00000026, 0 1px 1px -0.5px #0000001a, 0 4.5px 4.5px -2.25px #00000026, 0 18px 18px -9px #00000040; /* @kind shadow */
    --pressed: inset 0 0 0 1px #ffffff0a, 0 0 0 1px #00000026, 0 1px 1px -0.5px #0000001a, 0 2.5px 4.5px -2.25px #00000026, 0 8px 18px -9px #00000040; /* @kind shadow */
    --well: 0 1px 0 #ffffff33, inset 0 1px 0 #00000026, inset 0 1px 4px #0000001a;
    --floating: 0 0 0 1px #00000026, 0 38px 23px #0000001a, 0 17px 17px #00000026, 0 4px 9px #00000033;
    --noise-opacity: 0.15; /* @kind other */
  }
}
:root {
  --space-1: 3px;
  --space-1\.5: 8px;
  --space-2: 12px;
  --space-3: 24px;
  --space-4: 30px;
  --button-height: 38px;
  --icon-button-size: 34px;
  --switch-width: 44px;
  --switch-height: 22px;
  --theme-tile-width: 124px;
  --panel-width: 444px;
  --panel-min-height: 440px;
  --menu-width: 210px;
  --menu-item-height: 34px;
  --row-height: 52px;
  --row-height-2line: 68px;
  --tap-target: 44px;
  --tabbar-height: 64px;
  --tabbar-icon: 24px;
  --radius-menu: 8px;
  --radius-item: 6px;
  --radius-control: 12px;
  --radius-tile: 15px;
  --radius-panel: 24px;
  --radius-pill: 9999px;
  --font-display: "Geist", system-ui, sans-serif;
  --font-mono: "Geist Mono", system-ui, monospace;
}

/* Tiltgate — component styles. Themes come from tokens.css via [data-theme] on <html>. */

.tg, .tg * , .tg *::before, .tg *::after { box-sizing: border-box; }
.tg { font-family: var(--font-mono); font-weight: 500; font-size: 13px; line-height: 1.5; color: var(--text); -webkit-font-smoothing: antialiased; }
:where(.tg) button, :where(.tg button) { font: inherit; color: inherit; margin: 0; padding: 0; border: 0; background: none; appearance: none; cursor: pointer; }
.tg img, .tg svg { display: block; max-width: 100%; }

/* ---- Text ---- */
.tg-title { font-family: var(--font-display); font-size: 20px; font-weight: 400; line-height: 1.5; letter-spacing: -0.025em; color: var(--text); margin: 0; }
.tg-text { color: var(--text); margin: 0; }
.tg-text-subtle { color: var(--text-subtle); margin: 0; }
[data-theme="light"] .tg-title, [data-theme="light"] .tg-text, [data-theme="light"] .tg-text-subtle { text-shadow: 0 1px 0 rgba(255,255,255,.2); }
@media (prefers-color-scheme: light) { [data-theme="system"] .tg-title, [data-theme="system"] .tg-text, [data-theme="system"] .tg-text-subtle { text-shadow: 0 1px 0 rgba(255,255,255,.2); } }
[data-theme="gold"] .tg-title { text-shadow: 0 1px 0 rgba(255,255,255,.2); }
[data-theme="gold"] .tg-text, [data-theme="gold"] .tg-text-subtle { text-shadow: 0 1px 0 rgba(255,255,255,.15); }

/* ---- Panel (glass) ---- */
.tg-panel { position: relative; z-index: 2; isolation: isolate; display: flex; flex-direction: column; width: var(--panel-width); min-height: var(--panel-min-height); max-width: 100%; border-radius: var(--radius-panel); background: var(--panel); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.tg-panel::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; border: 1.25px solid transparent;
  -webkit-mask: linear-gradient(#000,#000) padding-box, linear-gradient(#000,#000); mask: linear-gradient(#000,#000) padding-box, linear-gradient(#000,#000);
  -webkit-mask-composite: xor; mask-composite: exclude; }
[data-theme="dark"] .tg-panel::after { background: linear-gradient(160deg, rgba(255,255,255,.30), rgba(255,255,255,.02) 37%, rgba(255,255,255,.05) 70%, rgba(255,255,255,.10)) border-box; }
@media (prefers-color-scheme: dark) { [data-theme="system"] .tg-panel::after { background: linear-gradient(160deg, rgba(255,255,255,.30), rgba(255,255,255,.02) 37%, rgba(255,255,255,.05) 70%, rgba(255,255,255,.10)) border-box; } }
[data-theme="light"] .tg-panel::after { background: linear-gradient(160deg, rgba(255,255,255,.77), rgba(255,255,255,.2) 19%, rgba(255,255,255,.2) 70%, rgba(255,255,255,.3)) border-box; mix-blend-mode: overlay; }
@media (prefers-color-scheme: light) { [data-theme="system"] .tg-panel::after { background: linear-gradient(160deg, rgba(255,255,255,.77), rgba(255,255,255,.2) 19%, rgba(255,255,255,.2) 70%, rgba(255,255,255,.3)) border-box; mix-blend-mode: overlay; } }
[data-theme="gold"] .tg-panel::after { background: linear-gradient(160deg, rgba(255,227,143,.97), rgba(55,46,34,.46) 19%, #886c4a 70%, rgba(255,227,143,.37)) border-box; mix-blend-mode: overlay; }
.tg-panel-header { display: flex; justify-content: space-between; align-items: flex-start; padding: var(--space-3) var(--space-3) 0; }
.tg-panel-body { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-4) var(--space-3) 0; }
.tg-panel-footer { position: relative; margin-top: auto; padding: var(--space-3); display: flex; gap: var(--space-2); }
.tg-panel-footer > * { flex: 1 1 0; }
.tg-setting { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-2); }
.tg-setting-control { flex: none; padding-top: 2px; }

/* ---- Divider (a dark line with a light line under it) ---- */
.tg-divider { position: relative; height: 2px; margin: 0 var(--space-3); }
.tg-divider::before, .tg-divider::after { content: ''; position: absolute; left: 0; right: 0; height: 1px; mix-blend-mode: overlay; }
.tg-divider::before { top: 0; background: var(--hairline); }
.tg-divider::after { top: 1px; background: var(--highlight); }
.tg-panel-footer::before, .tg-panel-footer::after { content: ''; position: absolute; left: var(--space-3); right: var(--space-3); height: 1px; mix-blend-mode: overlay; }
.tg-panel-footer::before { top: -1px; background: var(--hairline); }
.tg-panel-footer::after { top: 0; background: var(--highlight); }

/* ---- Buttons ---- */
.tg-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; height: var(--button-height); padding: 0 var(--space-3); border-radius: var(--radius-control); transition: translate .1s; color: var(--text); }
.tg-btn:active { translate: 0 1px; }
.tg-btn:disabled, .tg-btn[aria-disabled="true"] { cursor: default; pointer-events: none; }
/* A busy button (Spinner + present-tense label) stays at full strength. */
.tg-btn:disabled:not(:has(.tg-spinner)) { opacity: .4; }
.tg-btn .tg-spinner { border-color: color-mix(in srgb, currentColor 20%, transparent); border-top-color: currentColor; }
.tg-btn { gap: var(--space-1\.5); }
.tg-btn svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.tg-btn:focus-visible, .tg-icon-btn:focus-visible { outline: 1.5px solid var(--ink-strong); outline-offset: 2px; transition: none; }
.tg-btn-primary { box-shadow: var(--raised); background: radial-gradient(ellipse at -20px top, var(--highlight), rgba(255,255,255,0)), var(--surface-raised); }
.tg-btn-danger { box-shadow: var(--raised); background: radial-gradient(ellipse at -20px top, #ffffff14, rgba(255,255,255,0)), var(--danger); color: var(--on-danger); text-shadow: 0 -1px 0 rgba(0,0,0,.35); }
.tg-btn-primary:active, .tg-btn-danger:active { box-shadow: var(--pressed); }
.tg-btn-primary::after, .tg-btn-danger::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; border: 1.5px solid transparent; mix-blend-mode: overlay;
  -webkit-mask: linear-gradient(#000,#000) padding-box, linear-gradient(#000,#000); mask: linear-gradient(#000,#000) padding-box, linear-gradient(#000,#000);
  -webkit-mask-composite: xor; mask-composite: exclude; }
[data-theme="dark"] .tg-btn-primary { text-shadow: 0 -1px 0 rgba(0,0,0,.5); }
@media (prefers-color-scheme: dark) { [data-theme="system"] .tg-btn-primary { text-shadow: 0 -1px 0 rgba(0,0,0,.5); } }
[data-theme="dark"] .tg-btn-primary::after, [data-theme="dark"] .tg-btn-danger::after { background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(0,0,0,.48) 41%, rgba(0,0,0,.26) 75%, rgba(255,255,255,.25)) border-box; }
@media (prefers-color-scheme: dark) { [data-theme="system"] .tg-btn-primary::after, [data-theme="system"] .tg-btn-danger::after { background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(0,0,0,.48) 41%, rgba(0,0,0,.26) 75%, rgba(255,255,255,.25)) border-box; } }
[data-theme="light"] .tg-btn-primary { text-shadow: 0 1px 0 rgba(255,255,255,.2); }
@media (prefers-color-scheme: light) { [data-theme="system"] .tg-btn-primary { text-shadow: 0 1px 0 rgba(255,255,255,.2); } }
[data-theme="light"] .tg-btn-primary::after, [data-theme="light"] .tg-btn-danger::after { background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(0,0,0,.25) 41%, rgba(0,0,0,.25) 75%, rgba(255,255,255,.35)) border-box; }
@media (prefers-color-scheme: light) { [data-theme="system"] .tg-btn-primary::after, [data-theme="system"] .tg-btn-danger::after { background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(0,0,0,.25) 41%, rgba(0,0,0,.25) 75%, rgba(255,255,255,.35)) border-box; } }
[data-theme="gold"] .tg-btn-primary { text-shadow: 0 1px 0 rgba(255,255,255,.3); background-blend-mode: overlay, normal; }
[data-theme="gold"] .tg-btn-primary::after, [data-theme="gold"] .tg-btn-danger::after { background: linear-gradient(180deg, rgba(255,255,255,.65), rgba(91,75,50,.68) 41%, rgba(127,104,69,.46) 75%, rgba(255,255,255,.25)) border-box; }
@media (hover: hover) { .tg-btn-primary:hover { background: radial-gradient(ellipse at -20px top, rgba(255,255,255,.3), rgba(255,255,255,0)), var(--surface-raised); } }
@media (hover: hover) { .tg-btn-danger:hover { background: radial-gradient(ellipse at -20px top, rgba(255,255,255,.2), rgba(255,255,255,0)), var(--danger); } }
.tg-btn-secondary { background: transparent; color: var(--on-button-secondary); isolation: isolate; }
.tg-btn-secondary::after { content: ''; position: absolute; z-index: -1; inset: 0; border-radius: inherit; pointer-events: none; background: var(--button-secondary); }
[data-theme="light"] .tg-btn-secondary { text-shadow: 0 1px 0 rgba(255,255,255,.2); }
@media (prefers-color-scheme: light) { [data-theme="system"] .tg-btn-secondary { text-shadow: 0 1px 0 rgba(255,255,255,.2); } }
[data-theme="gold"] .tg-btn-secondary { text-shadow: 0 -1px 0 rgba(0,0,0,.15); }

/* ---- Icon button ---- */
.tg-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: var(--icon-button-size); height: var(--icon-button-size); border-radius: var(--radius-pill); color: var(--text); box-shadow: var(--raised); background: radial-gradient(ellipse at -20px top, var(--highlight), rgba(255,255,255,0)), var(--surface-raised); transition: translate .1s; }
.tg-icon-btn:active { translate: 0 1px; box-shadow: var(--pressed); }
.tg-icon-btn svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.5; fill: none; stroke-linecap: round; }
[data-theme="dark"] .tg-icon-btn svg { filter: drop-shadow(0 -1px 0 rgba(0,0,0,.5)); }
@media (prefers-color-scheme: dark) { [data-theme="system"] .tg-icon-btn svg { filter: drop-shadow(0 -1px 0 rgba(0,0,0,.5)); } }
[data-theme="light"] .tg-icon-btn svg { filter: drop-shadow(0 1px 0 rgba(255,255,255,.4)); }
@media (prefers-color-scheme: light) { [data-theme="system"] .tg-icon-btn svg { filter: drop-shadow(0 1px 0 rgba(255,255,255,.4)); } }
[data-theme="gold"] .tg-icon-btn svg { filter: drop-shadow(0 1px 0 rgba(255,255,255,.5)); }

/* ---- Switch ---- */
.tg-switch { position: relative; isolation: isolate; display: block; width: var(--switch-width); height: var(--switch-height); padding: var(--space-1); border-radius: var(--radius-pill); cursor: pointer; }
.tg-switch::before { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1; background: var(--control-track); box-shadow: var(--well); }
[data-theme="gold"] .tg-switch::before { mix-blend-mode: overlay; }
/* The on-state fill sits above the track inside the switch's own stacking context. */
.tg-switch::after { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1; background: var(--control-on); opacity: 0; transition: opacity .2s; }
.tg-switch-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.tg-switch-knob { display: block; width: calc(var(--switch-height) - var(--space-1) * 2); height: calc(var(--switch-height) - var(--space-1) * 2); border-radius: var(--radius-pill); background: radial-gradient(ellipse at -20px top, var(--highlight), rgba(255,255,255,0)), var(--surface-raised); box-shadow: var(--raised); transition: transform .2s; }
[data-theme="light"] .tg-switch-knob { background: #ffffff; }
@media (prefers-color-scheme: light) { [data-theme="system"] .tg-switch-knob { background: #ffffff; } }
[data-theme="gold"] .tg-switch-knob { background: #f2e6cc; }
.tg-switch:has(.tg-switch-input:checked)::after { opacity: 1; }
[data-theme="dark"] .tg-switch:has(.tg-switch-input:checked) { box-shadow: 0 5.8px 5.5px -5px rgba(255,255,255,.08), 0 16px 15px -5px rgba(255,255,255,.12); }
@media (prefers-color-scheme: dark) { [data-theme="system"] .tg-switch:has(.tg-switch-input:checked) { box-shadow: 0 5.8px 5.5px -5px rgba(255,255,255,.08), 0 16px 15px -5px rgba(255,255,255,.12); } }
.tg-switch:has(.tg-switch-input:checked) .tg-switch-knob { transform: translateX(calc(var(--switch-width) - var(--switch-height))); }
[data-theme="dark"] .tg-switch:has(.tg-switch-input:checked) .tg-switch-knob { background: var(--surface-raised); box-shadow: 0 0 0 1px rgba(0,0,0,.85), 0 14px 9px rgba(0,0,0,.1), 0 6px 6px rgba(0,0,0,.15), 0 2px 4px rgba(0,0,0,.25); }
@media (prefers-color-scheme: dark) { [data-theme="system"] .tg-switch:has(.tg-switch-input:checked) .tg-switch-knob { background: var(--surface-raised); box-shadow: 0 0 0 1px rgba(0,0,0,.85), 0 14px 9px rgba(0,0,0,.1), 0 6px 6px rgba(0,0,0,.15), 0 2px 4px rgba(0,0,0,.25); } }
.tg-switch:has(.tg-switch-input:focus-visible) { outline: 1.5px solid var(--ink-strong); outline-offset: 1.5px; }
@media (prefers-reduced-motion) { .tg-switch::after, .tg-switch-knob, .tg-btn, .tg-icon-btn { transition: none; } }

/* ---- Theme picker ---- */
.tg-picker { display: flex; justify-content: space-between; gap: var(--space-2); border-radius: var(--radius-control); }
.tg-picker:has(input:focus-visible) { outline: 1.5px solid var(--ink-strong); outline-offset: 7.5px; }
.tg-picker-option { position: relative; isolation: isolate; cursor: pointer; }
.tg-picker-option input { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.tg-tile { position: relative; width: var(--theme-tile-width); aspect-ratio: 124 / 94; border-radius: var(--radius-control); overflow: hidden; }
.tg-tile-well { position: absolute; inset: -3px; border-radius: var(--radius-tile); z-index: 0; background: var(--control-track); box-shadow: var(--well); }
.tg-tile { z-index: 1; }
[data-theme="gold"] .tg-tile-well { mix-blend-mode: overlay; }
.tg-tile-ring { position: absolute; inset: -3px; border-radius: var(--radius-tile); box-shadow: 0 0 0 1.5px var(--selection-ring); display: none; pointer-events: none; z-index: 2; }
.tg-picker-option:has(input:checked) .tg-tile-ring { display: block; }
/* tile art: a tiny window mock in the theme's own colours */
.tg-tile-art { width: 100%; height: 100%; display: grid; grid-template-columns: 34% 1fr; }
.tg-tile-art i { display: block; border-radius: 2px; }
.tg-tile-art .s { padding: 9px 8px; display: flex; flex-direction: column; gap: 5px; }
.tg-tile-art .m { padding: 9px 8px; display: flex; flex-direction: column; gap: 5px; }
.tg-tile-art .m .row { display: flex; gap: 5px; margin-top: auto; }
.tg-tile-art .m .row i { height: 18px; flex: 1; border-radius: 4px; }
.tg-tile-dark { background: #1a1a1a; } .tg-tile-dark i { background: #3a3a3a; }
.tg-tile-light { background: #d8d8d8; } .tg-tile-light .m { background: #ffffff; border-radius: 6px 0 0 0; } .tg-tile-light i { background: #c4c4c4; }
.tg-tile-gold { background: #b48f52; } .tg-tile-gold .m { background: #e9d9a8; border-radius: 6px 0 0 0; } .tg-tile-gold i { background: #c9b077; }

/* ---- Menu (dropdown, from experiment-02) ---- */
.tg-menu { position: relative; z-index: 2; isolation: isolate; width: var(--menu-width); padding: 2px; border-radius: var(--radius-menu); background: var(--panel); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: var(--floating); }
.tg-menu::after { content: ''; position: absolute; z-index: 1; inset: 0; border-radius: inherit; border: 1px solid transparent; pointer-events: none; background: linear-gradient(135deg, var(--highlight), rgba(255,255,255,0)) border-box;
  -webkit-mask: linear-gradient(#000,#000) padding-box, linear-gradient(#000,#000); mask: linear-gradient(#000,#000) padding-box, linear-gradient(#000,#000); -webkit-mask-composite: xor; mask-composite: exclude; }
.tg-menu-list { list-style: none; margin: 0; padding: 0; position: relative; --btn-height: var(--menu-item-height); }
.tg-menu-item { position: relative; z-index: 1; display: flex; align-items: center; gap: var(--space-1\.5); width: 100%; height: var(--menu-item-height); padding: 0 10px 0 6px; border-radius: var(--radius-item); color: var(--text); user-select: none; text-align: left; }
.tg-menu-item:focus-visible { outline: 1.5px solid var(--ink-strong); outline-offset: -1.5px; }
.tg-menu-item svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; flex: none; margin: 0 4px; }
.tg-menu-hotkey { margin-left: auto; color: var(--text-subtle); }
.tg-menu-marker { position: absolute; left: 0; top: var(--marker-top, 0px); width: 100%; height: var(--marker-height, var(--menu-item-height)); border-radius: var(--radius-item); background: var(--menu-marker); opacity: 0; scale: .75; transition: top 0s .1s, opacity .1s, scale .1s; }
@media (hover: hover) { .tg-menu-list:hover .tg-menu-marker { opacity: 1; scale: 1; transition: opacity .1s, scale .1s, top .1s; } }
.tg-menu-list:has(.tg-menu-item:focus-visible) .tg-menu-marker { opacity: 0; }
.tg-menu-list:has(.tg-menu-item:active) .tg-menu-marker { background: var(--menu-marker-active); }
.tg-menu-item[aria-disabled="true"] { color: var(--text-subtle); pointer-events: none; }
.tg-menu-sep { height: 1px; margin: 4px 6px; background: var(--hairline); mix-blend-mode: overlay; }

/* ---- TextField ---- */
.tg-field { display: flex; flex-direction: column; gap: 6px; }
.tg-field-input { height: var(--button-height); padding: 0 var(--space-2); border-radius: var(--radius-control); background: var(--field-surface); color: var(--text); box-shadow: var(--well); font: inherit; border: 0; outline: 0; width: 100%; }
[data-theme="gold"] .tg-field-input { mix-blend-mode: normal; }
.tg-field-input::placeholder { color: var(--text-subtle); }
.tg-field-input:focus-visible { outline: 1.5px solid var(--ink-strong); outline-offset: 2px; }
.tg-field-input[aria-invalid="true"] { outline: 1.5px solid var(--ink-strong); outline-offset: 0; }
/* Grows with its content; `--tg-rows` (from `rows`) is the floor, since field-sizing ignores the rows attribute. */
.tg-field-area { height: auto; padding: 9px var(--space-2); line-height: 1.5; resize: none; display: block; field-sizing: content; min-height: calc(var(--tg-rows, 3) * 1.5em + 18px); }

/* ---- ListRow ---- */
.tg-list { display: flex; flex-direction: column; }
.tg-row { display: flex; align-items: center; gap: var(--space-2); min-height: var(--row-height); padding: 0 var(--space-1\.5); margin: 0 calc(var(--space-1\.5) * -1); border-radius: var(--radius-control); color: var(--text); text-align: left; width: calc(100% + var(--space-1\.5) * 2); }
.tg-row-2line { min-height: var(--row-height-2line); }
.tg-row:active { background: var(--menu-marker-active); }
.tg-row:focus-visible { outline: 1.5px solid var(--ink-strong); outline-offset: -1.5px; }
.tg-row-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.tg-row-value { color: var(--text-subtle); }
.tg-row-chevron { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.5; fill: none; color: var(--text-subtle); flex: none; }
/* Every row draws the hairline above it and the list's first row (or its host) drops it, so rows wrapped in host elements keep their dividers. */
.tg-list :where(.tg-row-swipe, .tg-row:not(.tg-row-swipe .tg-row)) { position: relative; }
.tg-list :where(.tg-row-swipe, .tg-row:not(.tg-row-swipe .tg-row))::before { content: ''; position: absolute; left: var(--space-1\.5); right: var(--space-1\.5); top: 0; height: 1px; background: var(--hairline); mix-blend-mode: overlay; }
.tg-list > :first-child:is(.tg-row, .tg-row-swipe)::before, .tg-list > :first-child :is(.tg-row-swipe, .tg-row)::before { content: none; }
/* Swipe row: the wrapper takes the row's bleed and clips; the track slides left by the action's width. */
.tg-row-swipe { position: relative; overflow: hidden; margin: 0 calc(var(--space-1\.5) * -1); border-radius: var(--radius-control); touch-action: pan-y; }
.tg-row-track { position: relative; translate: var(--reveal, 0px) 0; transition: translate .2s cubic-bezier(.3,.9,.3,1); }
.tg-row-swipe[data-dragging] > .tg-row-track { transition: none; }
.tg-row-swipe .tg-row { margin: 0; width: 100%; }
.tg-row-action { position: absolute; top: 0; bottom: 0; left: 100%; display: flex; align-items: center; gap: var(--space-1\.5); padding: 0 var(--space-3); background: var(--chip-surface); color: var(--text); white-space: nowrap; }
.tg-row-action[data-variant="danger"] { background: var(--danger); color: var(--on-danger); }
.tg-row-action svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.tg-row-action:focus-visible { outline: 1.5px solid var(--ink-strong); outline-offset: -3px; }
@media (prefers-reduced-motion) { .tg-row-track { transition: none; } }
/* In a List the swipe row runs edge to edge and slides off the screen edge; the action is a raised danger
   button on a transparent 120px area. Descendant selectors, so rows wrapped in a host element still match. */
.tg-list .tg-row-swipe { margin: 0 calc(var(--space-3) * -1); border-radius: 0; }
.tg-list .tg-row-swipe .tg-row { padding: 0 var(--space-3); border-radius: 0; }
.tg-list .tg-row-swipe::before { left: var(--space-3); right: var(--space-3); }
.tg-list .tg-row-swipe .tg-row-action { isolation: isolate; box-sizing: border-box; width: 120px; padding: 0 var(--space-3) 0 var(--space-2); justify-content: center; background: transparent; color: var(--on-danger); font-weight: 500; text-shadow: 0 -1px 0 rgba(0,0,0,.35); }
.tg-list .tg-row-swipe .tg-row-action::before, .tg-list .tg-row-swipe .tg-row-action::after { content: ''; position: absolute; left: var(--space-2); right: var(--space-3); top: 50%; height: var(--button-height); margin-top: calc(var(--button-height) / -2); border-radius: var(--radius-control); }
.tg-list .tg-row-swipe .tg-row-action::before { z-index: -1; box-shadow: var(--raised); background: radial-gradient(ellipse at -20px top, #ffffff14, rgba(255,255,255,0)), var(--danger); }
.tg-list .tg-row-swipe .tg-row-action::after { pointer-events: none; border: 1.5px solid transparent; mix-blend-mode: overlay; background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(0,0,0,.48) 41%, rgba(0,0,0,.26) 75%, rgba(255,255,255,.25)) border-box;
  -webkit-mask: linear-gradient(#000,#000) padding-box, linear-gradient(#000,#000); mask: linear-gradient(#000,#000) padding-box, linear-gradient(#000,#000); -webkit-mask-composite: xor; mask-composite: exclude; }

/* ---- Chip ---- */
.tg-chip { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: var(--radius-pill); background: var(--chip-surface); color: var(--text); white-space: nowrap; }
.tg-chip[aria-pressed="true"] { background: var(--control-on); color: var(--surface); }
[data-theme="gold"] .tg-chip[aria-pressed="true"] { color: #f2e6cc; }
.tg-chip:focus-visible { outline: 1.5px solid var(--ink-strong); outline-offset: 2px; }
.tg-chips { display: flex; flex-wrap: wrap; gap: var(--space-1\.5); }

/* ---- TabBar (floating glass bottom nav) ---- */
.tg-tabbar-wrap { display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-2); width: 100%; max-width: 440px; }
.tg-tabbar, .tg-tabbar-action, .tg-tabbar-accessory { position: relative; z-index: 2; isolation: isolate; height: var(--tabbar-height); border-radius: var(--radius-pill); background: var(--panel); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: var(--floating); }
.tg-tabbar::after, .tg-tabbar-action::after, .tg-tabbar-accessory::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; border: 1.25px solid transparent;
  -webkit-mask: linear-gradient(#000,#000) padding-box, linear-gradient(#000,#000); mask: linear-gradient(#000,#000) padding-box, linear-gradient(#000,#000); -webkit-mask-composite: xor; mask-composite: exclude; }
[data-theme="dark"] .tg-tabbar::after, [data-theme="dark"] .tg-tabbar-action::after, [data-theme="dark"] .tg-tabbar-accessory::after { background: linear-gradient(160deg, rgba(255,255,255,.30), rgba(255,255,255,.02) 37%, rgba(255,255,255,.05) 70%, rgba(255,255,255,.10)) border-box; }
@media (prefers-color-scheme: dark) { [data-theme="system"] .tg-tabbar::after, [data-theme="system"] .tg-tabbar-action::after, [data-theme="system"] .tg-tabbar-accessory::after { background: linear-gradient(160deg, rgba(255,255,255,.30), rgba(255,255,255,.02) 37%, rgba(255,255,255,.05) 70%, rgba(255,255,255,.10)) border-box; } }
[data-theme="light"] .tg-tabbar::after, [data-theme="light"] .tg-tabbar-action::after, [data-theme="light"] .tg-tabbar-accessory::after { background: linear-gradient(160deg, rgba(255,255,255,.77), rgba(255,255,255,.2) 19%, rgba(255,255,255,.2) 70%, rgba(255,255,255,.3)) border-box; mix-blend-mode: overlay; }
@media (prefers-color-scheme: light) { [data-theme="system"] .tg-tabbar::after, [data-theme="system"] .tg-tabbar-action::after, [data-theme="system"] .tg-tabbar-accessory::after { background: linear-gradient(160deg, rgba(255,255,255,.77), rgba(255,255,255,.2) 19%, rgba(255,255,255,.2) 70%, rgba(255,255,255,.3)) border-box; mix-blend-mode: overlay; } }
[data-theme="gold"] .tg-tabbar::after, [data-theme="gold"] .tg-tabbar-action::after, [data-theme="gold"] .tg-tabbar-accessory::after { background: linear-gradient(160deg, rgba(255,227,143,.97), rgba(55,46,34,.46) 19%, #886c4a 70%, rgba(255,227,143,.37)) border-box; mix-blend-mode: overlay; }
.tg-tabbar { flex: 1; display: flex; padding: 6px; min-width: 0; transition: flex-basis .25s, flex-grow .25s; }
.tg-tabbar-list { position: relative; display: flex; flex: 1; list-style: none; margin: 0; padding: 0; }
.tg-tabbar-list > li { flex: 1; display: flex; min-width: 0; }
.tg-tab { width: 100%; }
.tg-tab { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: calc(var(--tabbar-height) - 12px); border-radius: var(--radius-pill); color: var(--text-subtle); transition: color .2s; }
.tg-tab[aria-current="page"] { color: var(--text); }
.tg-tab svg { width: var(--tabbar-icon); height: var(--tabbar-icon); stroke: currentColor; stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.tg-tab-label { font-size: 11px; line-height: 1.2; }
.tg-tab:focus-visible { outline: 1.5px solid var(--ink-strong); outline-offset: -1.5px; }
.tg-tabbar-capsule { position: absolute; top: 0; bottom: 0; left: var(--capsule-left, 0px); width: var(--capsule-width, 25%); border-radius: var(--radius-pill); background: var(--tab-selected); transition: left .25s cubic-bezier(.3,.9,.3,1), width .25s cubic-bezier(.3,.9,.3,1); }
.tg-tabbar-action { flex: none; width: var(--tabbar-height); display: inline-flex; align-items: center; justify-content: center; color: var(--text); }
.tg-tabbar-action svg { width: var(--tabbar-icon); height: var(--tabbar-icon); stroke: currentColor; stroke-width: 1.5; fill: none; stroke-linecap: round; }
.tg-tabbar-action:focus-visible { outline: 1.5px solid var(--ink-strong); outline-offset: 2px; }
/* collapsed: only the current tab remains, as a disc; an accessory (now playing) takes the middle */
.tg-tabbar-wrap[data-collapsed="true"] .tg-tabbar { flex: 0 0 var(--tabbar-height); }
.tg-tabbar-wrap[data-collapsed="true"] .tg-tabbar-list > li:not(:has(.tg-tab[aria-current="page"])) { display: none; }
.tg-tabbar-wrap[data-collapsed="true"] .tg-tab-label { display: none; }
.tg-tabbar-wrap[data-collapsed="true"] .tg-tabbar-capsule { display: none; }
.tg-tabbar-accessory { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-2) 0 10px; }
.tg-tabbar-wrap:not([data-collapsed="true"]) .tg-tabbar-accessory { display: none; }
.tg-tabbar-accessory .tg-tabbar-art { width: 44px; height: 44px; border-radius: 10px; overflow: hidden; flex: none; background: var(--control-track); box-shadow: var(--well); }
.tg-tabbar-accessory .tg-row-text { flex: 1; min-width: 0; }
.tg-tabbar-accessory .tg-text, .tg-tabbar-accessory .tg-text-subtle { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-tabbar-accessory .tg-icon-btn { box-shadow: none; background: none; }
@media (prefers-reduced-motion) { .tg-tabbar, .tg-tab, .tg-tabbar-capsule { transition: none; } }

/* ---- Verdict (band carried by fill and edge, never colour) ---- */
.tg-verdict { display: flex; flex-direction: column; gap: var(--space-1\.5); padding: var(--space-2); border-radius: var(--radius-control); border: 1.5px solid transparent; color: var(--text); }
.tg-verdict-title, .tg-verdict-body p { margin: 0; }
.tg-verdict[data-state="none"] { background: var(--field-surface); box-shadow: var(--well); }
.tg-verdict[data-state="none"] .tg-verdict-body { color: var(--text-subtle); }
.tg-verdict[data-state="pass"] { background: var(--surface-raised); box-shadow: var(--raised); }
.tg-verdict[data-state="warn"] { border-color: var(--ink-strong); }
.tg-verdict[data-state="block"] { background: var(--control-on); color: var(--surface); }
[data-theme="gold"] .tg-verdict[data-state="block"] { color: #f2e6cc; }
.tg-verdict-rules { list-style: none; margin: 0; padding: 0; }
.tg-verdict-rule { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); padding: var(--space-1\.5) 0; }
.tg-verdict-rule + .tg-verdict-rule { border-top: 1px solid color-mix(in srgb, currentColor 20%, transparent); }
.tg-verdict-value { flex: none; font-variant-numeric: tabular-nums; }
.tg-verdict-label { display: flex; align-items: flex-start; gap: var(--space-1\.5); min-width: 0; }
.tg-verdict-body { font-size: 13px; line-height: 1.4; opacity: .8; }
.tg-verdict-rule-ring, .tg-verdict-rule-ring .tg-verdict-label { align-items: center; }
/* Rule ring: the arc is the chance the rule is followed, drawn from 12 o'clock in the band colour over a 22% track. */
.tg-verdict-ring { position: relative; flex: none; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; }
.tg-verdict-ring[data-band="broken"] { color: var(--band-broken); }
.tg-verdict-ring[data-band="risk"] { color: var(--band-risk); }
.tg-verdict-ring[data-band="kept"] { color: var(--band-kept); }
.tg-verdict-ring > svg:first-child { position: absolute; inset: 0; rotate: -90deg; }
.tg-verdict-ring circle { fill: none; stroke: currentColor; stroke-width: 2; }
.tg-verdict-ring-track { stroke-opacity: .22; }
.tg-verdict-ring-arc { stroke-linecap: round; }
.tg-verdict-ring .tg-verdict-ring-icon { position: relative; width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---- Notice ---- */
.tg-notice { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2); border-radius: var(--radius-control); background: var(--chip-surface); border: 1.5px solid transparent; color: var(--text); }
.tg-notice[data-tone="error"] { background: transparent; border-color: var(--ink-strong); }
.tg-notice-icon { width: 16px; height: 16px; flex: none; align-self: flex-start; margin-top: 2px; stroke: currentColor; stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.tg-notice-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tg-notice-text p { margin: 0; }
.tg-notice-action { flex: none; }

/* ---- Spinner ---- */
.tg-spinner { display: inline-block; width: 16px; height: 16px; flex: none; border-radius: var(--radius-pill); border: 1.5px solid color-mix(in srgb, var(--text) 20%, transparent); border-top-color: var(--text); animation: tg-spin .8s linear infinite; }
@keyframes tg-spin { to { rotate: 1turn; } }
@media (prefers-reduced-motion) { .tg-spinner { animation: none; } }
.tg-spinner-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ---- EmptyState ---- */
.tg-empty { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); padding: var(--space-4) var(--space-3); text-align: center; color: var(--text); }
.tg-empty p { margin: 0; }
.tg-empty-action { margin-top: var(--space-2); }

/* ---- Dialog (a Panel on the native <dialog>) ---- */
.tg-dialog { margin: auto; padding: 0; border: 0; min-height: 0; width: min(var(--panel-width), calc(100% - var(--space-3) * 2)); background: var(--panel); box-shadow: var(--floating); color: var(--text); }
.tg-dialog:not([open]) { display: none; }
/* `.tg-panel` sets `position: relative`, which would override the UA's fixed positioning of a modal dialog. */
.tg-dialog:modal { position: fixed; }
.tg-dialog .tg-panel-body { padding-bottom: var(--space-3); }
.tg-dialog::backdrop { background: rgba(0,0,0,.45); }

/* ---- Panel sheet (bottom sheet over a scrim; one glass layer, header and footer fixed, body scrolls) ---- */
.tg-sheet-layer { position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column; justify-content: flex-end; }
.tg-sheet-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.45); cursor: default; }
.tg-panel.tg-sheet { width: 100%; max-width: none; min-height: 0; max-height: calc(100% - max(env(safe-area-inset-top, 0px), 44px)); border-radius: 32px 32px 0 0; background: color-mix(in oklab, var(--surface) 85%, transparent); padding-bottom: max(22px, env(safe-area-inset-bottom, 0px)); transition: translate .25s cubic-bezier(.3,.9,.3,1); }
.tg-sheet[data-dragging] { transition: none; }
.tg-sheet::after { border-bottom-width: 0; }
.tg-sheet-grip { flex: none; touch-action: none; cursor: grab; }
.tg-sheet-handle { position: absolute; top: 6px; left: 50%; translate: -50% 0; width: 36px; height: 5px; border-radius: 3px; background: var(--text-subtle); }
.tg-sheet .tg-panel-header { padding-top: 28px; }
.tg-sheet .tg-panel-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-3); gap: var(--space-3); }
.tg-sheet .tg-panel-footer { flex: none; margin-top: 0; padding: var(--space-3) var(--space-3) var(--space-2); }
@media (prefers-reduced-motion) { .tg-sheet { transition: none; } }

/* ---- RadioGroup (option cards; the checked card is raised) ---- */
.tg-radios { display: flex; flex-direction: column; gap: var(--space-1\.5); }
.tg-radio { position: relative; display: flex; align-items: center; gap: var(--space-2); min-height: var(--tap-target); padding: var(--space-2); border-radius: var(--radius-control); background: var(--field-surface); box-shadow: var(--well); color: var(--text); cursor: pointer; }
.tg-radio:has(.tg-radio-input:checked) { background: radial-gradient(ellipse at -20px top, var(--highlight), rgba(255,255,255,0)), var(--surface-raised); box-shadow: var(--raised); }
.tg-radio:has(.tg-radio-input:focus-visible) { outline: 1.5px solid var(--ink-strong); outline-offset: 2px; }
.tg-radio-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.tg-radio-mark { flex: none; width: 16px; height: 16px; border-radius: var(--radius-pill); border: 1.5px solid var(--text-subtle); }
.tg-radio:has(.tg-radio-input:checked) .tg-radio-mark { border-color: var(--text); background: radial-gradient(circle, var(--control-on) 0 3.5px, transparent 4px); }

/* ---- Meter ---- */
.tg-meter { display: flex; flex-direction: column; gap: var(--space-1\.5); }
.tg-meter-head { display: flex; justify-content: space-between; gap: var(--space-2); }
.tg-meter-track { height: 6px; border-radius: var(--radius-pill); background: var(--control-track); box-shadow: var(--well); overflow: hidden; }
.tg-meter-fill { height: 100%; border-radius: inherit; background: var(--control-on); }

/* ---- Link ---- */
.tg-link { display: inline-flex; align-items: center; gap: 4px; color: var(--text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--text-subtle); border-radius: 2px; }
.tg-link:hover { text-decoration-color: currentColor; }
.tg-link:focus-visible { outline: 1.5px solid var(--ink-strong); outline-offset: 2px; }
.tg-link svg { width: 12px; height: 12px; stroke: currentColor; stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* ---- Prose (long-form text in the two existing styles) ---- */
.tg-prose { max-width: 64ch; color: var(--text); }
.tg-prose > * { margin: 0; }
.tg-prose > * + * { margin-top: var(--space-2); }
.tg-prose h1 { font-family: var(--font-display); font-size: 20px; font-weight: 400; letter-spacing: -0.025em; }
.tg-prose h2, .tg-prose h3 { font: inherit; }
.tg-prose > * + h2, .tg-prose > * + h3 { margin-top: var(--space-4); }
.tg-prose ul, .tg-prose ol { padding-left: 2ch; }
.tg-prose li + li { margin-top: var(--space-1); }
.tg-prose strong { font-weight: inherit; color: var(--ink-strong); }
.tg-prose a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--text-subtle); }
.tg-prose a:focus-visible { outline: 1.5px solid var(--ink-strong); outline-offset: 2px; }
[data-theme="light"] .tg-prose, [data-theme="gold"] .tg-prose { text-shadow: 0 1px 0 rgba(255,255,255,.15); }
@media (prefers-color-scheme: light) { [data-theme="system"] .tg-prose { text-shadow: 0 1px 0 rgba(255,255,255,.15); } }

/* ---- Theme root and element resets ---- */
/* The Theme root: paints the theme's ground so panels and controls sit on `surface`.
   `isolation: isolate` makes it the stacking context the texture layers blend in. Layers stack:
   photo 1, content 2 (veiled when the photo shows), light and grain 10. A scrolling screen puts
   its scroll container inside the Theme so the layers stay put. */
.tg-theme { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; min-height: 100%; background: var(--surface); color: var(--text); }
.tg-backdrop { position: absolute; inset: 0; z-index: 1; margin: 0; }
/* The root is a flex column that fills its container; the content grows to fill the root. Put layout on a child of Theme, not on Theme itself. */
.tg-theme-content { position: relative; z-index: 2; flex: 1 1 auto; min-width: 0; }
.tg-theme[data-backdrop] > .tg-theme-content { background: color-mix(in oklab, var(--surface) 22%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.tg-backdrop img { width: 100%; height: 100%; max-width: none; object-fit: cover; -webkit-user-drag: none; user-select: none; }
/* No z-index here: the layers must blend in the Theme's (or the dialog's) stacking context, not a group of their own. */
.tg-texture { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.tg-light { position: absolute; z-index: 10; width: 196px; height: 196px; border-radius: 50%; background: white; mix-blend-mode: overlay; filter: blur(150px); pointer-events: none; }
.tg-light-top { top: -15px; left: 14px; }
.tg-light-bottom { bottom: -50px; right: -30px; }
.tg-grain { position: absolute; inset: 0; z-index: 10; margin: 0; pointer-events: none; filter: grayscale(100%); mix-blend-mode: screen; opacity: var(--noise-opacity); }
.tg-grain svg { width: 100%; height: 100%; max-width: none; }
@media (prefers-reduced-transparency: reduce) {
  .tg-backdrop, .tg-texture { display: none; }
  .tg-theme[data-backdrop] > .tg-theme-content { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .tg-panel, .tg-tabbar, .tg-tabbar-action, .tg-tabbar-accessory { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .tg-dialog, .tg-menu { background: var(--menu-surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .tg-panel.tg-sheet { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (forced-colors: active) { .tg-backdrop, .tg-texture { display: none; } }
/* Divider and menu separators render as <hr>; strip the UA border so the hairline rules paint them. */
.tg-divider, .tg-menu-sep { border: 0; }
/* Tabs are direct children of the tablist (no <li>): carry the li rules over. */
.tg-tabbar-list > .tg-tab { min-width: 0; }
.tg-tabbar-wrap[data-collapsed="true"] .tg-tab:not([aria-current="page"]) { display: none; }
/* The mark keeps its own colours; only its box is styled here. */
.tg-logo { display: block; flex: none; }