/* src/styles/fonts.css */
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(/fonts/figtree-latin-v9.woff2) format("woff2");
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/fraunces-latin-v38.woff2) format("woff2");
}

/* src/styles/tokens.css */
:root {
  --noite-950: #0b1322;
  --noite-900: #132036;
  --noite-800: #1b2a44;
  --noite-700: #24365a;
  --noite-500: #5b7096;
  --linho-50: #fbf7f1;
  --linho-100: #f3ece1;
  --linho-200: #e8dfd2;
  --linho-400: #8f8478;
  --pedra-600: #5e554b;
  --pedra-700: #4a423a;
  --creme-100: #f4eee4;
  --areia-300: #c9bfb2;
  --areia-400: #a89d90;
  --vela-50: #fbeedf;
  --vela-300: #f5c48c;
  --vela-400: #eda65a;
  --vela-600: #c2672a;
  --vela-700: #a4501f;
  --vela-800: #8a4219;
  --brasa-50: #fbeae7;
  --brasa-300: #ff8a7a;
  --brasa-700: #b3261e;
  --brasa-950: #2c1418;
  --salvia-50: #e7f2ea;
  --salvia-300: #8fd1a8;
  --salvia-700: #2f6b4a;
  --salvia-950: #11261c;
  --mel-50: #fbf3d9;
  --mel-300: #e9c46a;
  --mel-700: #7a5b00;
  --mel-950: #2a2310;
  --branco: #ffffff;
  --preto: #000000;
  --color-qr-module: var(--preto);
  --color-qr-bg: var(--branco);
  --qr-quiet-zone: 4;
  --font-ui:
    "Figtree",
    "Source Sans 3",
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    sans-serif;
  --font-display:
    "Fraunces",
    "Source Serif 4",
    Georgia,
    serif;
  --font-mono:
    ui-monospace,
    "SFMono-Regular",
    Consolas,
    "Liberation Mono",
    monospace;
  --font-display-settings: "SOFT" 50, "WONK" 0;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --text-sm: 0.875rem;
  --leading-sm: 1.25rem;
  --text-base: 1rem;
  --leading-base: 1.5rem;
  --text-md: 1.125rem;
  --leading-md: 1.75rem;
  --text-lg: 1.25rem;
  --leading-lg: 1.75rem;
  --text-xl: 1.5rem;
  --leading-xl: 2rem;
  --text-2xl: 1.875rem;
  --leading-2xl: 2.375rem;
  --text-3xl: 2.375rem;
  --leading-3xl: 2.875rem;
  --text-4xl: 3rem;
  --leading-4xl: 3.5rem;
  --text-5xl: 3.75rem;
  --leading-5xl: 4.125rem;
  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --listener-min: var(--text-base);
  --listener-body: var(--text-md);
  --listener-status: var(--text-lg);
  --listener-language: var(--text-xl);
  --listener-title: var(--text-2xl);
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --gutter: var(--space-4);
  --section-site: var(--space-8);
  --touch-min: 3rem;
  --listener-button-min: 4rem;
  --content-max: 72rem;
  --prose-max: 40rem;
  --listener-max: 28rem;
  --console-max: 80rem;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-arch: 999px 999px 16px 16px;
  --radius-pill: 999px;
  --border-width: 1px;
  --border-width-strong: 2px;
  --focus-width: 3px;
  --focus-offset: 2px;
  --duration-instant: 0ms;
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
  --duration-breath: 2400ms;
  --duration-reveal: 600ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --ease-breath: cubic-bezier(0.45, 0, 0.55, 1);
  --z-base: 0;
  --z-sticky: 10;
  --z-banner: 20;
  --z-dialog: 50;
  color-scheme: light;
  --color-bg: var(--linho-50);
  --color-surface: var(--linho-100);
  --color-surface-raised: var(--linho-50);
  --color-surface-sunken: var(--linho-200);
  --color-surface-pressed: var(--linho-200);
  --color-surface-inverse: var(--noite-950);
  --color-text: var(--noite-900);
  --color-text-muted: var(--pedra-600);
  --color-text-subtle: var(--pedra-600);
  --color-text-disabled: var(--linho-400);
  --color-text-inverse: var(--creme-100);
  --color-border: var(--linho-200);
  --color-border-control: var(--linho-400);
  --color-border-strong: var(--noite-900);
  --color-accent: var(--vela-700);
  --color-accent-hover: var(--vela-800);
  --color-accent-graphic: var(--vela-600);
  --color-accent-soft: var(--vela-50);
  --color-on-accent: var(--branco);
  --color-focus-ring: var(--vela-700);
  --color-live: var(--brasa-700);
  --color-live-border: var(--brasa-700);
  --color-danger: var(--brasa-700);
  --color-danger-bg: var(--brasa-50);
  --color-on-danger: var(--branco);
  --color-success: var(--salvia-700);
  --color-success-bg: var(--salvia-50);
  --color-warning: var(--mel-700);
  --color-warning-bg: var(--mel-50);
  --color-warning-border: var(--mel-700);
  --color-data: var(--noite-900);
  --color-data-track: var(--linho-200);
  --color-meter-idle: var(--linho-400);
  --color-meter-ok: var(--salvia-700);
  --color-meter-hot: var(--mel-700);
  --color-meter-track: var(--linho-200);
  --color-scrim: rgb(11 19 34 / 0.55);
  --shadow-1: 0 1px 2px rgb(19 32 54 / 0.06), 0 1px 1px rgb(19 32 54 / 0.04);
  --shadow-2: 0 4px 12px rgb(19 32 54 / 0.08), 0 1px 3px rgb(19 32 54 / 0.06);
  --shadow-3: 0 12px 32px rgb(19 32 54 / 0.12);
  --shadow-focus: 0 0 0 var(--focus-width) var(--color-focus-ring);
  --listening-glow: rgb(194 103 42 / 0.12);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) {
    color-scheme: dark;
    --color-bg: var(--noite-950);
    --color-surface: var(--noite-900);
    --color-surface-raised: var(--noite-800);
    --color-surface-sunken: var(--noite-950);
    --color-surface-pressed: var(--noite-700);
    --color-surface-inverse: var(--linho-50);
    --color-text: var(--creme-100);
    --color-text-muted: var(--areia-300);
    --color-text-subtle: var(--areia-400);
    --color-text-disabled: var(--noite-500);
    --color-text-inverse: var(--noite-900);
    --color-border: var(--noite-700);
    --color-border-control: var(--noite-500);
    --color-border-strong: var(--creme-100);
    --color-accent: var(--vela-400);
    --color-accent-hover: var(--vela-300);
    --color-accent-graphic: var(--vela-400);
    --color-accent-soft: var(--noite-800);
    --color-on-accent: var(--noite-950);
    --color-focus-ring: var(--vela-400);
    --color-live: var(--brasa-300);
    --color-live-border: var(--brasa-300);
    --color-danger: var(--brasa-300);
    --color-danger-bg: var(--brasa-950);
    --color-on-danger: var(--noite-950);
    --color-success: var(--salvia-300);
    --color-success-bg: var(--salvia-950);
    --color-warning: var(--mel-300);
    --color-warning-bg: var(--mel-950);
    --color-warning-border: var(--mel-300);
    --color-data: var(--areia-300);
    --color-data-track: var(--noite-800);
    --color-meter-idle: var(--noite-500);
    --color-meter-ok: var(--salvia-300);
    --color-meter-hot: var(--mel-300);
    --color-meter-track: var(--noite-800);
    --color-scrim: rgb(0 0 0 / 0.6);
    --shadow-1: 0 0 0 1px var(--noite-700);
    --shadow-2: 0 0 0 1px var(--noite-700), 0 8px 24px rgb(0 0 0 / 0.35);
    --shadow-3: 0 0 0 1px var(--noite-700), 0 16px 40px rgb(0 0 0 / 0.45);
    --listening-glow: rgb(237 166 90 / 0.12);
  }
}
:root[data-theme=dark],
[data-theme=dark] {
  color-scheme: dark;
  --color-bg: var(--noite-950);
  --color-surface: var(--noite-900);
  --color-surface-raised: var(--noite-800);
  --color-surface-sunken: var(--noite-950);
  --color-surface-pressed: var(--noite-700);
  --color-surface-inverse: var(--linho-50);
  --color-text: var(--creme-100);
  --color-text-muted: var(--areia-300);
  --color-text-subtle: var(--areia-400);
  --color-text-disabled: var(--noite-500);
  --color-text-inverse: var(--noite-900);
  --color-border: var(--noite-700);
  --color-border-control: var(--noite-500);
  --color-border-strong: var(--creme-100);
  --color-accent: var(--vela-400);
  --color-accent-hover: var(--vela-300);
  --color-accent-graphic: var(--vela-400);
  --color-accent-soft: var(--noite-800);
  --color-on-accent: var(--noite-950);
  --color-focus-ring: var(--vela-400);
  --color-live: var(--brasa-300);
  --color-live-border: var(--brasa-300);
  --color-danger: var(--brasa-300);
  --color-danger-bg: var(--brasa-950);
  --color-on-danger: var(--noite-950);
  --color-success: var(--salvia-300);
  --color-success-bg: var(--salvia-950);
  --color-warning: var(--mel-300);
  --color-warning-bg: var(--mel-950);
  --color-warning-border: var(--mel-300);
  --color-data: var(--areia-300);
  --color-data-track: var(--noite-800);
  --color-meter-idle: var(--noite-500);
  --color-meter-ok: var(--salvia-300);
  --color-meter-hot: var(--mel-300);
  --color-meter-track: var(--noite-800);
  --color-scrim: rgb(0 0 0 / 0.6);
  --shadow-1: 0 0 0 1px var(--noite-700);
  --shadow-2: 0 0 0 1px var(--noite-700), 0 8px 24px rgb(0 0 0 / 0.35);
  --shadow-3: 0 0 0 1px var(--noite-700), 0 16px 40px rgb(0 0 0 / 0.45);
  --listening-glow: rgb(237 166 90 / 0.12);
}
[data-theme=light] {
  color-scheme: light;
  --color-bg: var(--linho-50);
  --color-surface: var(--linho-100);
  --color-surface-raised: var(--linho-50);
  --color-surface-sunken: var(--linho-200);
  --color-surface-pressed: var(--linho-200);
  --color-surface-inverse: var(--noite-950);
  --color-text: var(--noite-900);
  --color-text-muted: var(--pedra-600);
  --color-text-subtle: var(--pedra-600);
  --color-text-disabled: var(--linho-400);
  --color-text-inverse: var(--creme-100);
  --color-border: var(--linho-200);
  --color-border-control: var(--linho-400);
  --color-border-strong: var(--noite-900);
  --color-accent: var(--vela-700);
  --color-accent-hover: var(--vela-800);
  --color-accent-graphic: var(--vela-600);
  --color-accent-soft: var(--vela-50);
  --color-on-accent: var(--branco);
  --color-focus-ring: var(--vela-700);
  --color-live: var(--brasa-700);
  --color-live-border: var(--brasa-700);
  --color-danger: var(--brasa-700);
  --color-danger-bg: var(--brasa-50);
  --color-on-danger: var(--branco);
  --color-success: var(--salvia-700);
  --color-success-bg: var(--salvia-50);
  --color-warning: var(--mel-700);
  --color-warning-bg: var(--mel-50);
  --color-warning-border: var(--mel-700);
  --color-data: var(--noite-900);
  --color-data-track: var(--linho-200);
  --color-meter-idle: var(--linho-400);
  --color-meter-ok: var(--salvia-700);
  --color-meter-hot: var(--mel-700);
  --color-meter-track: var(--linho-200);
  --color-scrim: rgb(11 19 34 / 0.55);
  --shadow-1: 0 1px 2px rgb(19 32 54 / 0.06), 0 1px 1px rgb(19 32 54 / 0.04);
  --shadow-2: 0 4px 12px rgb(19 32 54 / 0.08), 0 1px 3px rgb(19 32 54 / 0.06);
  --shadow-3: 0 12px 32px rgb(19 32 54 / 0.12);
  --listening-glow: rgb(194 103 42 / 0.12);
}
[data-surface=listener][data-theme=light],
[data-theme=light] [data-surface=listener],
:root[data-theme=light] [data-surface=listener] {
  --color-text-muted: var(--pedra-700);
  --color-text-subtle: var(--pedra-700);
}
@media (prefers-contrast: more) {
  :root {
    --color-border: var(--color-border-control);
    --color-text-subtle: var(--color-text-muted);
  }
}
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-base: 0ms;
    --duration-slow: 0ms;
    --duration-breath: 0ms;
    --duration-reveal: 0ms;
  }
}
@media (min-width: 768px) {
  :root {
    --gutter: var(--space-5);
    --section-site: var(--space-9);
  }
}
@media (min-width: 1024px) {
  :root {
    --gutter: var(--space-6);
  }
}

/* src/styles/components.css */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  line-height: var(--leading-base);
  font-weight: var(--weight-regular);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
img,
svg {
  max-width: 100%;
  display: block;
}
h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
figure {
  margin: 0;
}
ul[role=list],
ol[role=list] {
  list-style: none;
  padding: 0;
}
a {
  color: var(--color-accent);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}
a:hover {
  text-decoration-thickness: 2px;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
:focus {
  outline: none;
}
:focus-visible {
  outline: var(--focus-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-sm);
}
.tabular,
.num {
  font-variant-numeric: tabular-nums;
}
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: var(--z-dialog);
  background: var(--color-surface-raised);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
}
.skip-link:focus {
  top: var(--space-4);
}
.container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.prose {
  max-width: var(--prose-max);
}
.stack > * + * {
  margin-top: var(--stack, var(--space-4));
}
.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cluster, var(--space-3));
  align-items: center;
}
.muted {
  color: var(--color-text-muted);
}
.subtle {
  color: var(--color-text-subtle);
}
.t-sm {
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
}
.t-base {
  font-size: var(--text-base);
  line-height: var(--leading-base);
}
.t-md {
  font-size: var(--text-md);
  line-height: var(--leading-md);
}
.t-lg {
  font-size: var(--text-lg);
  line-height: var(--leading-lg);
}
.t-xl {
  font-size: var(--text-xl);
  line-height: var(--leading-xl);
}
.t-2xl {
  font-size: var(--text-2xl);
  line-height: var(--leading-2xl);
}
.t-semibold {
  font-weight: var(--weight-semibold);
}
.ui-title {
  font-weight: var(--weight-semibold);
  font-size: var(--text-xl);
  line-height: var(--leading-xl);
}
.ui-label {
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-wide);
}
.display {
  font-family: var(--font-display);
  font-variation-settings: var(--font-display-settings);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}
.display-1 {
  font-size: var(--text-3xl);
  line-height: var(--leading-3xl);
}
.display-2 {
  font-size: var(--text-3xl);
  line-height: var(--leading-3xl);
}
.display-3 {
  font-size: var(--text-2xl);
  line-height: var(--leading-2xl);
  letter-spacing: 0;
}
@media (min-width: 768px) {
  .display-1 {
    font-size: var(--text-4xl);
    line-height: var(--leading-4xl);
  }
}
@media (min-width: 1024px) {
  .display-1 {
    font-size: var(--text-5xl);
    line-height: var(--leading-5xl);
  }
}
.lead {
  font-size: var(--text-md);
  line-height: var(--leading-md);
  color: var(--color-text-muted);
}
.icon {
  display: inline-block;
  flex: none;
  width: var(--icon-size, 1.5rem);
  height: var(--icon-size, 1.5rem);
  background-color: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat;
  mask: var(--i) center / contain no-repeat;
}
.icon--sm {
  --icon-size: 1.25rem;
}
.icon--lg {
  --icon-size: 2rem;
}
.icon-headphones {
  --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 14h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-7a9 9 0 0 1 18 0v7a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3'/></svg>");
}
.icon-check {
  --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>");
}
.icon-alert {
  --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M10.3 3.9 2.4 17.5A2 2 0 0 0 4.1 20.5h15.8a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z'/><path d='M12 9v4'/><path d='M12 17h.01'/></svg>");
}
.icon-info {
  --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 16v-4'/><path d='M12 8h.01'/></svg>");
}
.icon-lock {
  --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='11' width='16' height='10' rx='2'/><path d='M8 11V7a4 4 0 0 1 8 0v4'/></svg>");
}
.icon-users {
  --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><path d='M22 21v-2a4 4 0 0 0-3-3.9'/><path d='M16 3.1a4 4 0 0 1 0 7.8'/></svg>");
}
.icon-qr {
  --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='6' height='6' rx='1'/><rect x='15' y='3' width='6' height='6' rx='1'/><rect x='3' y='15' width='6' height='6' rx='1'/><path d='M15 15h2v2'/><path d='M21 15v.01'/><path d='M15 21h.01'/><path d='M19 19h2v2'/></svg>");
}
.icon-wifi {
  --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 20h.01'/><path d='M2 8.8a15 15 0 0 1 20 0'/><path d='M5 12.9a10 10 0 0 1 14 0'/><path d='M8.5 16.4a5 5 0 0 1 7 0'/></svg>");
}
.icon-mic {
  --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='9' y='2' width='6' height='12' rx='3'/><path d='M19 10v1a7 7 0 0 1-14 0v-1'/><path d='M12 18v4'/></svg>");
}
.icon-copy {
  --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='8' y='8' width='13' height='13' rx='2'/><path d='M16 8V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h3'/></svg>");
}
.icon-sun {
  --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='4'/><path d='M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/></svg>");
}
.icon-moon {
  --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 14.5A8 8 0 1 1 9.5 4a6.5 6.5 0 0 0 10.5 10.5Z'/></svg>");
}
.icon-pause-gap {
  --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12h6'/><path d='M15 12h6'/><path d='M12 8v8' stroke-dasharray='1 3'/></svg>");
}
.icon-play {
  --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M7 4.5v15a1 1 0 0 0 1.5.9l12-7.5a1 1 0 0 0 0-1.8l-12-7.5A1 1 0 0 0 7 4.5Z'/></svg>");
}
.icon-arrow-right {
  --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14'/><path d='m13 6 6 6-6 6'/></svg>");
}
.icon-x {
  --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M18 6 6 18'/><path d='m6 6 12 12'/></svg>");
}
.icon-card {
  --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='5' width='20' height='14' rx='2'/><path d='M2 10h20'/><path d='M6 15h4'/></svg>");
}
.icon-clock {
  --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 7v5l3 2'/></svg>");
}
.icon-message {
  --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 12a8 8 0 0 1-11.8 7L3 21l2-5.6A8 8 0 1 1 21 12Z'/></svg>");
}
.icon-home {
  --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 10.5 12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-6h-6v6H4a1 1 0 0 1-1-1Z'/></svg>");
}
.icon-settings {
  --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='3'/><path d='M12 2v3M12 19v3M4.2 4.2l2.1 2.1M17.7 17.7l2.1 2.1M2 12h3M19 12h3M4.2 19.8l2.1-2.1M17.7 6.3l2.1-2.1'/></svg>");
}
.icon-history {
  --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12a9 9 0 1 0 3-6.7L3 8'/><path d='M3 3v5h5'/><path d='M12 7v5l3 2'/></svg>");
}
.icon-broadcast {
  --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='2'/><path d='M16.2 7.8a6 6 0 0 1 0 8.4M7.8 16.2a6 6 0 0 1 0-8.4M19.1 4.9a10 10 0 0 1 0 14.2M4.9 19.1a10 10 0 0 1 0-14.2'/></svg>");
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-text);
  text-decoration: none;
}
.logo svg {
  width: auto;
  height: var(--logo-h, 2rem);
}
.logo__arch {
  stroke: currentColor;
}
.logo__dot {
  fill: var(--color-accent-graphic);
}
.logo__word {
  font-weight: var(--weight-semibold);
  font-size: calc(var(--logo-h, 2rem) * 0.8);
  line-height: 1;
  letter-spacing: 0.01em;
}
.btn {
  --btn-bg: var(--color-surface-raised);
  --btn-fg: var(--color-text);
  --btn-border: var(--color-border-control);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--touch-min);
  padding: var(--space-3) var(--space-5);
  border: var(--border-width) solid var(--btn-border);
  border-radius: var(--radius-md);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
  line-height: var(--leading-base);
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}
.btn:hover {
  --btn-bg: var(--color-surface-pressed);
  text-decoration: none;
}
.btn:active {
  --btn-bg: var(--color-surface-pressed);
  transform: scale(0.97);
}
.btn--primary {
  --btn-bg: var(--color-accent);
  --btn-fg: var(--color-on-accent);
  --btn-border: var(--color-accent);
}
.btn--primary:hover,
.btn--primary:active {
  --btn-bg: var(--color-accent-hover);
  --btn-border: var(--color-accent-hover);
}
.btn--ghost {
  --btn-bg: transparent;
  --btn-border: transparent;
  --btn-fg: var(--color-accent);
  padding-inline: var(--space-3);
}
.btn--ghost:hover {
  --btn-bg: var(--color-surface);
}
.btn--danger {
  --btn-bg: transparent;
  --btn-fg: var(--color-danger);
  --btn-border: var(--color-danger);
}
.btn--danger:hover {
  --btn-bg: var(--color-danger-bg);
}
.btn--danger-solid {
  --btn-bg: var(--color-danger);
  --btn-fg: var(--color-on-danger);
  --btn-border: var(--color-danger);
}
.btn--lg {
  min-height: 3.5rem;
  padding-inline: var(--space-6);
  font-size: var(--text-md);
}
.btn--sm {
  min-height: 2.5rem;
  padding: var(--space-2) var(--space-4);
}
.btn--block {
  width: 100%;
}
.btn[disabled],
.btn[aria-disabled=true] {
  --btn-bg: var(--color-surface-sunken);
  --btn-fg: var(--color-text-disabled);
  --btn-border: var(--color-border);
  cursor: not-allowed;
}
.btn[aria-busy=true] {
  cursor: progress;
}
.btn[disabled]:active,
.btn[aria-disabled=true]:active {
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .btn:active {
    transform: none;
  }
}
.icon-btn {
  min-width: var(--touch-min);
  padding: var(--space-3);
}
.card {
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.card--raised {
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-2);
}
.card--plain {
  background: var(--color-bg);
}
.card__title {
  font-size: var(--text-lg);
  line-height: var(--leading-lg);
  font-weight: var(--weight-semibold);
}
.card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.live-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2rem;
  padding: var(--space-1) var(--space-3);
  border: var(--border-width) solid var(--color-border-control);
  border-radius: var(--radius-pill);
  color: var(--color-text-muted);
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
  line-height: var(--leading-base);
  white-space: nowrap;
}
.live-badge::before {
  content: "";
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  border: 2px solid currentColor;
  background: transparent;
  flex: none;
}
.live-badge[data-state=live] {
  color: var(--color-live);
  border-color: var(--color-live-border);
}
.live-badge[data-state=live]::before {
  background: currentColor;
}
.live-badge--lg {
  font-size: var(--text-lg);
  min-height: 2.5rem;
  padding-inline: var(--space-4);
}
[data-surface=listener] .live-badge {
  font-size: var(--listener-body);
}
.listening-dot {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: var(--dot-box, 3rem);
  height: var(--dot-box, 3rem);
  flex: none;
}
.listening-dot::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      var(--listening-glow) 0%,
      transparent 70%);
}
.listening-dot__core {
  position: relative;
  width: var(--dot, 1rem);
  height: var(--dot, 1rem);
  border-radius: 50%;
  background: var(--color-accent);
  animation: breath var(--duration-breath) var(--ease-breath) infinite alternate;
}
.listening-dot:is([data-state=idle], [data-state=outline]) .listening-dot__core {
  background: transparent;
  border: 2px solid var(--color-border-control);
  animation: none;
}
.listening-dot:is([data-state=idle], [data-state=outline])::before {
  display: none;
}
.listening-dot:is([data-state=paused], [data-state=still]) .listening-dot__core {
  animation: none;
  opacity: 1;
}
.listening-dot:is([data-state=ended], [data-state=dim]) {
  --dot: 0.625rem;
}
.listening-dot:is([data-state=ended], [data-state=dim]) .listening-dot__core {
  animation: none;
}
.listening-dot:is([data-state=ended], [data-state=dim])::before {
  display: none;
}
.listening-dot--lg {
  --dot-box: 6rem;
  --dot: 1.5rem;
}
@keyframes breath {
  from {
    opacity: 0.55;
    transform: scale(1);
  }
  to {
    opacity: 1;
    transform: scale(1.08);
  }
}
@media (prefers-reduced-motion: reduce) {
  .listening-dot__core {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
}
.language-picker {
  display: grid;
  gap: var(--space-3);
}
.language-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  min-height: var(--listener-button-min);
  padding: var(--space-3) var(--space-5);
  border: var(--border-width-strong) solid var(--color-border-control);
  border-radius: var(--radius-lg);
  background: var(--color-surface-raised);
  color: var(--color-text);
  font-size: var(--listener-language);
  line-height: var(--leading-xl);
  font-weight: var(--weight-semibold);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--duration-base) var(--ease-standard), background-color var(--duration-base) var(--ease-standard);
}
.language-button:hover {
  background: var(--color-surface-pressed);
}
.language-button:active {
  background: var(--color-surface-pressed);
}
.language-button[aria-pressed=true] {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
}
.language-button__mark {
  --dot-box: 2rem;
  --dot: 0.75rem;
}
.language-button:not([aria-pressed=true]) .language-button__mark {
  visibility: hidden;
}
.language-button[disabled] {
  color: var(--color-text-disabled);
  border-color: var(--color-border);
  cursor: not-allowed;
}
.language-picker--compact .language-button {
  min-height: var(--listener-button-min);
}
.listener {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  font-size: var(--listener-body);
  line-height: var(--leading-md);
}
.listener__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  max-width: var(--listener-max);
  margin-inline: auto;
  padding: var(--space-4) var(--space-4) 0;
}
.listener__main {
  flex: 1;
  width: 100%;
  max-width: var(--listener-max);
  margin-inline: auto;
  padding: var(--space-6) var(--space-4) var(--space-6);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-5);
}
.listener__foot {
  width: 100%;
  max-width: var(--listener-max);
  margin-inline: auto;
  padding: var(--space-4) var(--space-4) var(--space-5);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  color: var(--color-text-muted);
  font-size: var(--listener-body);
}
.listener__foot a {
  color: var(--color-text-muted);
}
.listener-title {
  font-size: var(--listener-title);
  line-height: var(--leading-2xl);
  font-weight: var(--weight-semibold);
}
.listener-title + .listener-title {
  margin-top: var(--space-1);
  color: var(--color-text-muted);
}
.listener-text {
  font-size: var(--listener-body);
  line-height: var(--leading-md);
  color: var(--color-text-muted);
}
.listener-status {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--listener-status);
  line-height: var(--leading-lg);
  font-weight: var(--weight-semibold);
}
.listener-status--hero {
  flex-direction: column;
  text-align: center;
  gap: var(--space-2);
}
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--touch-min);
  padding: var(--space-2) var(--space-3);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-text-muted);
  font-size: var(--listener-body);
  cursor: pointer;
}
.theme-toggle:hover {
  color: var(--color-text);
  border-color: var(--color-border-control);
}
.service-survey {
  display: grid;
  gap: var(--space-3);
}
.service-survey__options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
.service-survey__options .language-button {
  justify-content: center;
  text-align: center;
}
.notice-strip {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-4);
  border: var(--border-width) solid var(--color-border);
  border-left-width: 4px;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
}
.notice-strip > .icon {
  color: var(--color-text-muted);
  margin-top: 0.125rem;
}
.notice-strip__title {
  font-weight: var(--weight-semibold);
}
.notice-strip__body {
  color: var(--color-text);
}
.notice-strip__body > * + * {
  margin-top: var(--space-2);
}
.notice-strip__actions {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.notice-strip[data-tone=warning] {
  background: var(--color-warning-bg);
  border-color: var(--color-warning-border);
}
.notice-strip[data-tone=warning] > .icon {
  color: var(--color-warning);
}
.notice-strip[data-tone=danger] {
  background: var(--color-danger-bg);
  border-color: var(--color-danger);
}
.notice-strip[data-tone=danger] > .icon {
  color: var(--color-danger);
}
.notice-strip[data-tone=success] {
  background: var(--color-success-bg);
  border-color: var(--color-success);
}
.notice-strip[data-tone=success] > .icon {
  color: var(--color-success);
}
.notice-strip[data-tone=live] {
  border-color: var(--color-live-border);
}
.notice-strip--listener {
  font-size: var(--listener-body);
  line-height: var(--leading-md);
}
.notice-strip--listener .notice-strip__body {
  color: var(--color-text-muted);
}
.notice-strip--page {
  border-radius: 0;
  border-width: 0 0 var(--border-width) 0;
  border-left-width: 0;
  border-top: 4px solid;
  padding-inline: var(--gutter);
}
.status-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0 var(--space-2);
  min-height: 1.5rem;
  border: var(--border-width) solid var(--color-border-control);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
  background: transparent;
  white-space: nowrap;
}
.status-chip[data-tone=success] {
  color: var(--color-success);
  border-color: var(--color-success);
}
.status-chip[data-tone=warning] {
  color: var(--color-warning);
  border-color: var(--color-warning-border);
  background: var(--color-warning-bg);
}
.status-chip[data-tone=danger] {
  color: var(--color-danger);
  border-color: var(--color-danger);
}
.status-chip[data-tone=accent] {
  color: var(--color-accent);
  border-color: var(--color-accent);
}
.field {
  display: grid;
  gap: var(--space-2);
}
.field__label {
  font-weight: var(--weight-semibold);
}
.field__help {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
}
.field__error {
  color: var(--color-danger);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  font-weight: var(--weight-semibold);
  display: flex;
  gap: var(--space-1);
  align-items: center;
}
.input,
.select {
  width: 100%;
  min-height: var(--touch-min);
  padding: var(--space-3) var(--space-3);
  border: var(--border-width) solid var(--color-border-control);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
  color: var(--color-text);
  transition: border-color var(--duration-fast) var(--ease-standard);
}
[data-theme=dark] .input,
[data-theme=dark] .select {
  background: var(--color-surface);
}
.input::placeholder {
  color: var(--color-text-subtle);
  opacity: 1;
}
.input:hover,
.select:hover {
  border-color: var(--color-border-strong);
}
.input:focus-visible,
.select:focus-visible {
  border-color: var(--color-focus-ring);
  outline-offset: 0;
}
.input[aria-invalid=true] {
  border-color: var(--color-danger);
  border-width: 2px;
}
.input:disabled,
.select:disabled {
  background: var(--color-surface-sunken);
  color: var(--color-text-disabled);
  border-color: var(--color-border);
  cursor: not-allowed;
}
.input-group {
  display: flex;
  align-items: stretch;
}
.input-group__affix {
  display: inline-flex;
  align-items: center;
  padding-inline: var(--space-3);
  border: var(--border-width) solid var(--color-border-control);
  border-right: 0;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
}
.input-group .input {
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.input--code {
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  letter-spacing: 0.3em;
  text-align: center;
  max-width: 14rem;
}
.check {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  min-height: var(--touch-min);
  padding-block: var(--space-3);
  cursor: pointer;
}
.check input {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.125rem 0 0;
  accent-color: var(--color-accent);
  flex: none;
}
.switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--touch-min);
  cursor: pointer;
}
.switch input {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  width: 2.75rem;
  height: 1.5rem;
  border-radius: var(--radius-pill);
  border: 2px solid var(--color-border-control);
  background: var(--color-surface-sunken);
  position: relative;
  flex: none;
  cursor: pointer;
  transition: background-color var(--duration-base) var(--ease-standard);
}
.switch input::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--color-text-muted);
  transition: transform var(--duration-base) var(--ease-standard);
}
.switch input:checked {
  background: var(--color-accent);
  border-color: var(--color-accent);
}
.switch input:checked::after {
  transform: translateX(1.25rem);
  background: var(--color-on-accent);
}
.segmented {
  display: inline-flex;
  border: var(--border-width) solid var(--color-border-control);
  border-radius: var(--radius-md);
  padding: 2px;
  gap: 2px;
  background: var(--color-surface-sunken);
  flex-wrap: wrap;
}
.segmented button {
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-4);
  border: 0;
  border-radius: calc(var(--radius-md) - 2px);
  background: transparent;
  color: var(--color-text-muted);
  font-weight: var(--weight-semibold);
  cursor: pointer;
}
.segmented button[aria-pressed=true] {
  background: var(--color-surface-raised);
  color: var(--color-text);
  box-shadow: var(--shadow-1);
  outline: 1px solid var(--color-border-strong);
}
.slider {
  width: 100%;
  accent-color: var(--color-accent);
  min-height: var(--touch-min);
}
.slider-scale {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  color: var(--color-text-muted);
}
.audio-level-meter {
  display: grid;
  gap: var(--space-2);
}
.audio-level-meter__bar {
  position: relative;
  height: var(--meter-h, 1.5rem);
  background: var(--color-meter-track);
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: var(--border-width) solid var(--color-border);
}
.audio-level-meter__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--level, 0) * 100%);
  background: var(--color-meter-idle);
  -webkit-mask:
    repeating-linear-gradient(
      90deg,
      #000 0 6px,
      transparent 6px 8px);
  mask:
    repeating-linear-gradient(
      90deg,
      #000 0 6px,
      transparent 6px 8px);
}
.audio-level-meter[data-state=ok] .audio-level-meter__fill {
  background: var(--color-meter-ok);
}
.audio-level-meter[data-state=hot] .audio-level-meter__fill {
  background: var(--color-meter-hot);
}
.audio-level-meter__zone {
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: 45%;
  width: 35%;
  border-inline: 2px solid var(--color-text-muted);
}
.audio-level-meter__scale {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  color: var(--color-text-muted);
}
.audio-level-meter__status {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-weight: var(--weight-semibold);
}
.audio-level-meter[data-state=ok] .audio-level-meter__status .icon {
  color: var(--color-success);
}
.audio-level-meter[data-state=hot] .audio-level-meter__status .icon {
  color: var(--color-warning);
}
.audio-level-meter[data-state=idle] .audio-level-meter__status .icon {
  color: var(--color-warning);
}
.audio-level-meter--lg {
  --meter-h: 2.5rem;
}
.checklist {
  display: grid;
  gap: var(--space-2);
  counter-reset: step;
}
.checklist-item {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  border: var(--border-width) solid transparent;
}
.checklist-item__mark {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 2px solid var(--color-border-control);
  color: var(--color-text-muted);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  transition: background-color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard);
}
.checklist-item__title {
  font-weight: var(--weight-semibold);
}
.checklist-item__text {
  color: var(--color-text-muted);
}
.checklist-item[data-state=done] .checklist-item__mark {
  background: var(--color-success);
  border-color: var(--color-success);
  color: var(--color-bg);
}
.checklist-item[data-state=current] {
  border-color: var(--color-border-control);
  background: var(--color-surface);
}
.checklist-item[data-state=current] .checklist-item__mark {
  border-color: var(--color-border-strong);
  color: var(--color-text);
}
.checklist-item[data-state=warning] .checklist-item__mark {
  border-color: var(--color-warning);
  color: var(--color-warning);
}
.qr-card {
  background: var(--color-qr-bg);
  color: #132036;
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  text-align: center;
}
.qr-card .qr-code {
  width: 100%;
  max-width: var(--qr-size, 14rem);
  height: auto;
  image-rendering: pixelated;
}
.qr-card__symbol {
  height: 2rem;
  width: auto;
}
.qr-card__line {
  font-size: var(--text-base);
  line-height: var(--leading-base);
}
.qr-card__line strong {
  display: block;
  font-size: var(--text-lg);
  line-height: var(--leading-lg);
}
.qr-card__fine {
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  color: #5e554b;
}
.stat {
  display: grid;
  gap: var(--space-1);
}
.stat__label {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  font-weight: var(--weight-semibold);
}
.stat__value {
  font-size: var(--text-2xl);
  line-height: var(--leading-2xl);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}
.stat__sub {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
}
.listener-count {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  align-items: baseline;
  font-variant-numeric: tabular-nums;
}
.listener-count__total {
  font-size: var(--text-xl);
  line-height: var(--leading-xl);
  font-weight: var(--weight-semibold);
  display: inline-flex;
  gap: var(--space-2);
  align-items: center;
}
.listener-count__lang {
  color: var(--color-text-muted);
}
.listener-count__lang b {
  color: var(--color-text);
  font-weight: var(--weight-semibold);
}
.usage-summary {
  display: grid;
  gap: var(--space-3);
}
.usage-summary__numbers {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  align-items: baseline;
}
.usage-summary__big {
  font-size: var(--text-2xl);
  line-height: var(--leading-2xl);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}
.usage-summary__unit {
  color: var(--color-text-muted);
}
.usage-summary__track {
  position: relative;
  height: 0.75rem;
  border-radius: var(--radius-pill);
  background: var(--color-data-track);
  border: var(--border-width) solid var(--color-border-control);
}
.usage-summary__fill {
  position: absolute;
  inset: -1px auto -1px -1px;
  width: calc(min(var(--used, 0), 1) * 100% + 1px);
  border-radius: var(--radius-pill);
  background: var(--color-data);
}
.usage-summary__tick {
  position: absolute;
  top: -6px;
  bottom: -6px;
  left: 80%;
  width: 2px;
  background: var(--color-text-muted);
}
.usage-summary__legend {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.usage-summary[data-state=warn] .usage-summary__fill,
.usage-summary[data-state=reached] .usage-summary__fill {
  background: var(--color-warning);
}
.usage-summary[data-state=none] .usage-summary__track,
.usage-summary[data-state=none] .usage-summary__legend--limit {
  display: none;
}
.invoice-estimate {
  display: grid;
  gap: 0;
  font-variant-numeric: tabular-nums;
}
.invoice-estimate__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-2);
  border-bottom: var(--border-width) solid var(--color-border);
}
.invoice-estimate__row span:first-child {
  color: var(--color-text-muted);
}
.invoice-estimate__row--total {
  border-bottom: 0;
  padding-top: var(--space-3);
  font-weight: var(--weight-semibold);
  font-size: var(--text-lg);
  line-height: var(--leading-lg);
}
.invoice-estimate__row--total span:first-child {
  color: var(--color-text);
}
.table-wrap {
  width: 100%;
  overflow-x: auto;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
}
.table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.table th {
  text-align: left;
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  color: var(--color-text-muted);
  font-weight: var(--weight-semibold);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border-bottom: var(--border-width) solid var(--color-border);
  white-space: nowrap;
}
.table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-width) solid var(--color-border);
  vertical-align: top;
}
.table tr:last-child td {
  border-bottom: 0;
}
.table .r {
  text-align: right;
  white-space: nowrap;
}
.table .nowrap {
  white-space: nowrap;
}
@media (max-width: 767px) {
  .table--stack thead {
    display: none;
  }
  .table--stack,
  .table--stack tbody,
  .table--stack tr,
  .table--stack td {
    display: block;
    width: 100%;
  }
  .table--stack tr {
    padding: var(--space-3) var(--space-4);
    border-bottom: var(--border-width) solid var(--color-border);
  }
  .table--stack tr:last-child {
    border-bottom: 0;
  }
  .table--stack td {
    border: 0;
    padding: var(--space-1) 0;
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    text-align: right;
  }
  .table--stack td::before {
    content: attr(data-label);
    color: var(--color-text-muted);
    text-align: left;
    font-size: var(--text-sm);
  }
  .table--stack .r {
    text-align: right;
  }
}
.app {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr;
}
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-3) var(--gutter);
  border-bottom: var(--border-width) solid var(--color-border);
  background: var(--color-bg);
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}
.topbar__org {
  color: var(--color-text-muted);
  font-weight: var(--weight-semibold);
}
.app__body {
  display: grid;
  grid-template-columns: 1fr;
}
.sidenav {
  border-bottom: var(--border-width) solid var(--color-border);
  padding: var(--space-2) var(--gutter);
  overflow-x: auto;
}
.sidenav ul {
  display: flex;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}
.sidenav a {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--touch-min);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  text-decoration: none;
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}
.sidenav a:hover {
  background: var(--color-surface);
  color: var(--color-text);
}
.sidenav a[aria-current=page] {
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: inset 3px 0 0 var(--color-border-strong);
}
.app__main {
  padding: var(--space-5) var(--gutter) var(--space-8);
  min-width: 0;
}
.page-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}
.page-title {
  font-size: var(--text-xl);
  line-height: var(--leading-xl);
  font-weight: var(--weight-semibold);
}
@media (min-width: 1024px) {
  .app__body {
    grid-template-columns: 15rem 1fr;
  }
  .sidenav {
    border-bottom: 0;
    border-right: var(--border-width) solid var(--color-border);
    padding: var(--space-5) var(--space-3);
  }
  .sidenav ul {
    flex-direction: column;
  }
  .page-title {
    font-size: var(--text-2xl);
    line-height: var(--leading-2xl);
  }
}
.grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}
.link-field {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.link-field .input {
  flex: 1 1 14rem;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}
.dialog-demo {
  position: relative;
  padding: var(--space-6) var(--space-4);
  background: var(--color-scrim);
  border-radius: var(--radius-lg);
}
.dialog {
  max-width: 28rem;
  margin-inline: auto;
  background: var(--color-surface-raised);
  color: var(--color-text);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-3);
  border: var(--border-width) solid var(--color-border);
}
.dialog__title {
  font-size: var(--text-lg);
  line-height: var(--leading-lg);
  font-weight: var(--weight-semibold);
}
.dialog__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-5);
}
.empty {
  text-align: center;
  padding: var(--space-7) var(--space-4);
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  color: var(--color-text-muted);
}
.skeleton {
  background: var(--color-surface-sunken);
  border-radius: var(--radius-sm);
  min-height: 1rem;
}
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--color-bg);
  border-bottom: var(--border-width) solid var(--color-border);
}
.site-header__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 4rem;
}
.site-nav {
  display: none;
  gap: var(--space-5);
}
.site-nav a {
  color: var(--color-text);
  text-decoration: none;
  font-weight: var(--weight-medium);
}
.site-nav a:hover {
  text-decoration: underline;
}
.lang-switch {
  display: inline-flex;
  gap: var(--space-1);
}
.lang-switch a {
  min-height: var(--touch-min);
  min-width: var(--touch-min);
  display: inline-grid;
  place-items: center;
  padding-inline: var(--space-2);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  text-decoration: none;
  font-weight: var(--weight-semibold);
}
.lang-switch a[aria-current=true] {
  color: var(--color-text);
  box-shadow: inset 0 -2px 0 var(--color-border-strong);
}
@media (min-width: 1024px) {
  .site-nav {
    display: flex;
  }
}
.section {
  padding-block: var(--section-site);
}
.section--surface {
  background: var(--color-surface);
}
.section--night {
  background: var(--color-bg);
  color: var(--color-text);
}
.section__head {
  max-width: var(--prose-max);
  display: grid;
  gap: var(--space-4);
  margin-bottom: var(--space-7);
}
.eyebrow {
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
}
.hero {
  padding-block: var(--space-7) var(--section-site);
}
.hero__grid {
  display: grid;
  gap: var(--space-7);
  align-items: center;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}
.hero__note {
  margin-top: var(--space-4);
  color: var(--color-text-muted);
}
@media (min-width: 1024px) {
  .hero__grid {
    grid-template-columns: 1.05fr 1fr;
  }
}
.arch-media {
  border-radius: var(--radius-arch);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  position: relative;
}
.arch-media--wide {
  aspect-ratio: 4 / 3;
}
.photo-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: end start;
  padding: var(--space-5);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
}
.steps {
  display: grid;
  gap: var(--space-5);
  counter-reset: s;
}
.step-card {
  position: relative;
  padding-left: var(--space-7);
}
.step-card::before {
  counter-increment: s;
  content: counter(s);
  position: absolute;
  left: 0;
  top: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 2px solid var(--color-border-strong);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}
.step-card__art {
  height: 7rem;
  margin-bottom: var(--space-4);
  color: var(--color-text);
}
.step-card__title {
  font-size: var(--text-lg);
  line-height: var(--leading-lg);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-2);
}
@media (min-width: 1024px) {
  .steps {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
  }
  .step-card {
    padding-left: 0;
    padding-top: var(--space-7);
  }
}
.facts {
  display: grid;
  gap: var(--space-5);
  list-style: none;
  padding: 0;
  margin: 0;
}
.fact {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
}
.fact > .icon {
  color: var(--color-text);
  margin-top: 0.125rem;
}
.fact__title {
  font-weight: var(--weight-semibold);
}
@media (min-width: 768px) {
  .facts {
    grid-template-columns: 1fr 1fr;
  }
}
.privacy-note {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: var(--border-width) solid var(--color-border);
}
.privacy-note__title {
  font-weight: var(--weight-semibold);
  font-size: var(--text-lg);
  line-height: var(--leading-lg);
}
.sample-player {
  display: grid;
  gap: var(--space-2);
}
.sample-player__track {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--color-border-control);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
}
.sample-player__play {
  width: var(--touch-min);
  height: var(--touch-min);
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 2px solid var(--color-border-strong);
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
}
.sample-player__name {
  font-weight: var(--weight-semibold);
}
.sample-player__time {
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.sample-player__transcript {
  color: var(--color-text-muted);
  grid-column: 1 / -1;
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
}
.sample-player__track[aria-current=true] {
  border-color: var(--color-border-strong);
}
.price-card {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--color-surface-raised);
  border: var(--border-width) solid var(--color-border-control);
  border-radius: var(--radius-lg);
}
.price-card--featured {
  border: var(--border-width-strong) solid var(--color-accent-graphic);
}
.price-card__price {
  font-size: var(--text-3xl);
  line-height: var(--leading-3xl);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}
.price-card__per {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  font-weight: var(--weight-regular);
}
.price-list {
  display: grid;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
  margin: 0;
}
.price-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2);
}
.price-list .icon {
  --icon-size: 1.25rem;
  color: var(--color-success);
  margin-top: 0.125rem;
}
.site-footer {
  padding-block: var(--space-7);
  border-top: var(--border-width) solid var(--color-border);
  color: var(--color-text-muted);
}
.site-footer__grid {
  display: grid;
  gap: var(--space-5);
}
@media (min-width: 768px) {
  .site-footer__grid {
    grid-template-columns: 2fr 1fr 1fr;
  }
}
.provisional {
  display: inline-flex;
  gap: var(--space-1);
  align-items: center;
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  color: var(--color-warning);
  background: var(--color-warning-bg);
  border: 1px dashed var(--color-warning-border);
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  font-weight: var(--weight-semibold);
}
.reveal {
  animation: reveal var(--duration-slow) var(--ease-standard) both;
}
@keyframes reveal {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
    animation: fade var(--duration-fast) linear both;
  }
  @keyframes fade {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }
}
.proto-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--gutter);
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
  font-size: var(--text-base);
  line-height: var(--leading-base);
  border-bottom: var(--border-width) solid var(--color-border);
}
.proto-bar a {
  color: var(--color-text);
}
.proto-bar code {
  font-family: var(--font-mono);
}

/* src/styles/home-page.css */
.problem-list {
  display: grid;
  gap: var(--space-5);
  list-style: none;
  padding: 0;
  margin: var(--space-6) 0 0;
}
@media (min-width: 768px) {
  .problem-list {
    grid-template-columns: repeat(3, 1fr);
  }
}
.turn-grid {
  display: grid;
  gap: var(--space-7);
  align-items: center;
}
@media (min-width: 1024px) {
  .turn-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.proof-grid {
  display: grid;
  gap: var(--space-7);
}
@media (min-width: 1024px) {
  .proof-grid {
    grid-template-columns: 1.3fr 1fr;
  }
}
.final {
  text-align: center;
  position: relative;
  overflow: hidden;
}
.final__arch {
  width: min(70vw, 22rem);
  margin: var(--space-7) auto calc(-1 * var(--section-site));
  color: var(--color-text);
}
.final .hero__actions {
  justify-content: center;
}
.art {
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.art .warm {
  stroke: var(--color-accent-graphic);
}
.art .warm-fill {
  fill: var(--color-accent-graphic);
  stroke: none;
}
.hero-art {
  width: min(80%, 22rem);
  margin-inline: auto;
  color: var(--color-text);
}
.sample-lines {
  display: grid;
  gap: var(--space-4);
  list-style: none;
  padding: 0;
  margin: 0;
}
.sample-lines li {
  padding: var(--space-4);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
}
.sample-lines__name {
  font-weight: var(--weight-semibold);
}
.sample-lines__text {
  margin-top: var(--space-1);
}
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
html {
  scroll-padding-top: 5rem;
}
.site-header .logo svg {
  flex: none;
}
.header-actions .btn {
  white-space: nowrap;
}
@media (max-width: 479px) {
  .header-signup {
    display: none;
  }
}
.price-flow {
  display: grid;
  gap: var(--space-5);
  padding: 0 0 0 var(--space-5);
  margin: 0 0 var(--space-6);
}
@media (min-width: 768px) {
  .price-flow {
    grid-template-columns: repeat(3, 1fr);
  }
}
.price-flow__title {
  font-weight: var(--weight-semibold);
  font-size: var(--text-lg);
  line-height: var(--leading-lg);
  margin-bottom: var(--space-1);
}
.price-note {
  max-width: var(--prose-max);
  padding: var(--space-4) var(--space-5);
  border-left: var(--border-width-strong) solid var(--color-border-strong);
}
.price-label {
  font-weight: var(--weight-semibold);
  font-size: var(--text-xl);
  line-height: var(--leading-xl);
  margin: var(--space-8) 0 var(--space-4);
}
.packs {
  display: grid;
  gap: var(--space-5);
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (min-width: 900px) {
  .packs {
    grid-template-columns: repeat(3, 1fr);
    align-items: stretch;
  }
}
.packs .price-card {
  grid-template-rows: auto auto auto auto 1fr;
  align-content: start;
}
.pack--featured {
  border: var(--border-width-strong) solid var(--color-border-strong);
}
.pack__tag {
  min-height: var(--leading-base);
  font-weight: var(--weight-semibold);
}
.pack__tag:empty {
  display: none;
}
@media (min-width: 900px) {
  .pack__tag:empty {
    display: block;
  }
}
.pack__hours {
  font-weight: var(--weight-semibold);
  font-size: var(--text-lg);
  line-height: var(--leading-lg);
}
.price-list li {
  display: block;
}
.price-terms {
  max-width: var(--prose-max);
  margin-top: var(--space-4);
  color: var(--color-text-muted);
}
.table-scroll {
  overflow-x: auto;
}
.table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.price-cta {
  display: grid;
  justify-items: start;
  gap: var(--space-2);
  margin-top: var(--space-8);
}
.price-cta .btn {
  margin-bottom: var(--space-2);
}
.price-faq {
  max-width: var(--prose-max);
}
.price-link {
  color: var(--color-text);
}
.table tbody th {
  font-size: var(--text-base);
  line-height: var(--leading-base);
  font-weight: var(--weight-regular);
  color: var(--color-text);
  background: none;
  white-space: normal;
}
.table tbody tr:last-child th {
  border-bottom: 0;
}
.price-faq details {
  border-top: var(--border-width) solid var(--color-border);
}
.price-faq details:last-child {
  border-bottom: var(--border-width) solid var(--color-border);
}
.price-faq summary {
  display: list-item;
  min-height: var(--touch-min);
  padding-block: var(--space-3);
  font-weight: var(--weight-semibold);
  cursor: pointer;
}
.price-faq details p {
  padding-bottom: var(--space-4);
}
.page-body > * + * {
  margin-top: var(--space-4);
}
.page-body > h2,
.page-body > .price-faq {
  margin-top: var(--space-8);
}
.page-body > h3 {
  margin-top: var(--space-5);
  font-weight: var(--weight-semibold);
  font-size: var(--text-lg);
  line-height: var(--leading-lg);
}
.page-body ul,
.page-body ol {
  padding-left: var(--space-5);
}
.page-body li + li {
  margin-top: var(--space-2);
}
.page-body .price-faq h2 {
  margin-bottom: var(--space-4);
}
.page-body .table th,
.page-body .table td {
  padding-inline: var(--space-2);
  white-space: normal;
}
.site-menu {
  position: relative;
}
.site-menu > summary {
  list-style: none;
  cursor: pointer;
}
.site-menu > summary::-webkit-details-marker {
  display: none;
}
.site-menu__panel {
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-2));
  display: grid;
  min-width: 12rem;
  padding: var(--space-2);
  background: var(--color-bg);
  border: var(--border-width) solid var(--color-border-control);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
}
.site-menu__panel a {
  display: flex;
  align-items: center;
  min-height: var(--touch-min);
  padding-inline: var(--space-3);
  border-radius: var(--radius-md);
  color: var(--color-text);
  text-decoration: none;
  font-weight: var(--weight-medium);
}
.site-menu__panel a:hover {
  background: var(--color-surface);
}
.site-menu__panel a:active {
  background: var(--color-surface-pressed);
}
.site-menu[open] > summary {
  --btn-bg: var(--color-surface);
}
.site-menu::details-content {
  transition: content-visibility var(--duration-base) allow-discrete;
}
.site-menu__panel {
  transform-origin: top right;
  transition: opacity var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
}
.site-menu:not([open]) .site-menu__panel {
  opacity: 0;
  transform: scale(0.96);
}
@starting-style {
  .site-menu[open] .site-menu__panel {
    opacity: 0;
    transform: scale(0.96);
  }
}
@media (prefers-reduced-motion: reduce) {
  .site-menu::details-content {
    transition-duration: var(--duration-fast);
  }
  .site-menu__panel {
    transition: opacity var(--duration-fast) linear;
  }
  .site-menu:not([open]) .site-menu__panel,
  .site-menu__panel {
    transform: none;
  }
}
@media (min-width: 1024px) {
  .site-menu {
    display: none;
  }
}

/* src/styles/home.css */