/* Generated by @bbb/brand. Edit tokens/, then pnpm brand:build. */
@font-face {
  font-family: 'Fraunces';
  src: url('/brand/fonts/fraunces-latin-500.woff2') format('woff2');
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

:root {
  --palette-graphite-1000: #050505;
  --palette-graphite-950: #070707;
  --palette-graphite-900: #0b0c0d;
  --palette-graphite-850: #111315;
  --palette-graphite-800: #17191c;
  --palette-graphite-700: #25282d;
  --palette-graphite-600: #3b3f45;
  --palette-ivory-50: #f4f1ea;
  --palette-ivory-100: #e7e2d8;
  --palette-ivory-200: #d4cec2;
  --palette-gold-200: #ead795;
  --palette-gold-300: #dfc477;
  --palette-gold-400: #c8a24a;
  --palette-gold-500: #aa8438;
  --palette-gold-600: #8d6a2b;
  --palette-gold-700: #765a22;
  --palette-blue-400: #79a9dc;
  --palette-green-400: #79b58b;
  --palette-amber-400: #cfb966;
  --palette-orange-400: #d49362;
  --palette-red-400: #d27d7d;
  --font-sans: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --radius-control: 0.5rem;
  --radius-panel: 0.75rem;
  --radius-feature: 1rem;
  --radius-round: 9999px;
  --duration-fast: 160ms;
  --duration-normal: 360ms;
  --duration-slow: 560ms;
  --duration-hero: 800ms;
  --ease-standard: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --blur-light: 10px;
  --blur-medium: 20px;
  --blur-strong: 40px;
  --layer-stage: -1;
  --layer-content: 0;
  --layer-sticky: 10;
  --layer-header: 100;
  --layer-skip-link: 1000;
  --space-xs: var(--space-1);
  --space-sm: var(--space-2);
  --space-md: var(--space-4);
  --space-lg: var(--space-6);
  --space-xl: var(--space-8);
  --space-2xl: var(--space-12);
  --space-3xl: var(--space-16);
  --radius-sm: var(--radius-control);
  --radius-md: var(--radius-panel);
  --radius-lg: var(--radius-feature);
  --radius-xl: var(--radius-feature);
  --radius-2xl: var(--radius-feature);
  --radius-pill: var(--radius-round);
  --ease-out: var(--ease-standard);
  --stagger-1: 0.3s;
  --stagger-2: 1.2s;
  --stagger-3: 2.5s;
  --stagger-4: 3.8s;
  --stagger-5: 4.6s;
  --stagger-header: 5.2s;
  --radius-action: var(--radius-round);
  --radius-signal: 50%;
  --logo-gold: #c8a24a;
  --logo-black: #0e0e0e;
  --logo-ivory: #f4f1ea;
  --type-display-family: var(--font-sans);
  --type-display-size: clamp(3rem, 6vw, 5rem);
  --type-display-weight: 600;
  --type-display-line-height: 1.02;
  --type-display-tracking: -.055em;
  --type-h1-family: var(--font-sans);
  --type-h1-size: clamp(2.35rem, 4.1vw, 3.6rem);
  --type-h1-weight: 600;
  --type-h1-line-height: 1.08;
  --type-h1-tracking: -.055em;
  --type-h2-family: var(--font-sans);
  --type-h2-size: clamp(2rem, 4vw, 3.5rem);
  --type-h2-weight: 600;
  --type-h2-line-height: 1.08;
  --type-h2-tracking: -.055em;
  --type-h3-family: var(--font-sans);
  --type-h3-size: clamp(1.4rem, 2.2vw, 1.8rem);
  --type-h3-weight: 500;
  --type-h3-line-height: 1.3;
  --type-h3-tracking: -.03em;
  --type-body-family: var(--font-sans);
  --type-body-size: 1rem;
  --type-body-weight: 400;
  --type-body-line-height: 1.65;
  --type-body-tracking: normal;
  --type-small-family: var(--font-sans);
  --type-small-size: .875rem;
  --type-small-weight: 400;
  --type-small-line-height: 1.6;
  --type-small-tracking: normal;
  --type-caption-family: var(--font-sans);
  --type-caption-size: .75rem;
  --type-caption-weight: 400;
  --type-caption-line-height: 1.6;
  --type-caption-tracking: normal;
  --type-label-family: var(--font-mono);
  --type-label-size: .7rem;
  --type-label-weight: 500;
  --type-label-line-height: 1.5;
  --type-label-tracking: .08em;
  --type-precision-family: var(--font-sans);
  --type-precision-size: clamp(2.2rem, 5vw, 4.3rem);
  --type-precision-weight: 600;
  --type-precision-line-height: 1.02;
  --type-precision-tracking: -.055em;
  --type-newsletter-family: var(--font-editorial);
  --type-newsletter-size: clamp(3.8rem, 7vw, 6rem);
  --type-newsletter-weight: 500;
  --type-newsletter-line-height: 1;
  --type-newsletter-tracking: -.04em;
  --type-editorial-family: var(--font-editorial);
  --type-editorial-size: clamp(2.35rem, 4.1vw, 3.6rem);
  --type-editorial-weight: 500;
  --type-editorial-line-height: 1.08;
  --type-editorial-tracking: -.035em;
  --motion-section-opacity: 600ms;
  --motion-section-transform: 700ms;
  --motion-section-rise: 30px;
  --motion-section-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

:root,
[data-theme="dark"] {
  color-scheme: dark;
  --surface-canvas: var(--palette-graphite-950);
  --surface-subtle: var(--palette-graphite-900);
  --surface-raised: var(--palette-graphite-850);
  --surface-strong: var(--palette-graphite-800);
  --surface-header: rgb(7 7 7 / 0.88);
  --surface-sticky: rgb(7 7 7 / 0.96);
  --surface-hero: rgb(7 7 7 / 0.76);
  --surface-brand-wash: rgb(200 162 74 / 0.055);
  --surface-correct-wash: rgb(121 181 139 / 0.14);
  --surface-error-wash: rgb(210 125 125 / 0.14);
  --text-primary: var(--palette-ivory-50);
  --text-secondary: rgb(244 241 234 / 0.7);
  --text-tertiary: rgb(244 241 234 / 0.5);
  --text-disabled: rgb(244 241 234 / 0.3);
  --text-on-brand: var(--palette-graphite-950);
  --brand-accent: var(--palette-gold-400);
  --brand-accent-highlight: var(--palette-gold-200);
  --brand-accent-deep: var(--palette-gold-700);
  --brand-accent-rgb: 200 162 74;
  --brand-text: var(--palette-gold-400);
  --feedback-correct: var(--palette-green-400);
  --feedback-correct-rgb: 121 181 139;
  --feedback-great: var(--palette-amber-400);
  --feedback-off: var(--palette-orange-400);
  --feedback-error: var(--palette-red-400);
  --feedback-error-rgb: 210 125 125;
  --feedback-off-rgb: 212 147 98;
  --graph-neutral-rgb: 244 241 234;
  --border-subtle: rgb(244 241 234 / 0.06);
  --border-default: rgb(244 241 234 / 0.11);
  --border-strong: rgb(244 241 234 / 0.2);
  --border-brand: rgb(200 162 74 / 0.28);
  --fill-muted: rgb(244 241 234 / 0.03);
  --fill-subtle: rgb(244 241 234 / 0.05);
  --fill-default: rgb(244 241 234 / 0.08);
  --fill-strong: rgb(244 241 234 / 0.18);
  --action-primary-bg: var(--palette-gold-400);
  --action-primary-fg: var(--palette-graphite-950);
  --action-primary-muted: rgb(7 7 7 / 0.68);
  --action-secondary-fg: var(--text-secondary);
  --focus-ring: var(--palette-gold-400);
  --shadow-raised: 0 2rem 5rem rgb(0 0 0 / 0.55);
  --shadow-brand-inset: inset 0 1px 0 rgb(200 162 74 / 0.48);
  --shadow-overlay-text: 0 2px 14px rgb(0 0 0 / 0.85);
  --ambient-brand: rgb(200 162 74 / 0.09);
  --logo-ink: var(--logo-gold);
  --logo-ground: var(--logo-black);
}

[data-theme="light"] {
  color-scheme: light;
  --surface-canvas: #f3f2ef;
  --surface-subtle: #ebe9e4;
  --surface-raised: #ffffff;
  --surface-strong: #dedbd4;
  --surface-header: rgb(243 242 239 / 0.9);
  --surface-sticky: rgb(243 242 239 / 0.97);
  --surface-hero: rgb(243 242 239 / 0.82);
  --surface-brand-wash: rgb(141 106 43 / 0.065);
  --surface-correct-wash: rgb(59 116 76 / 0.1);
  --surface-error-wash: rgb(154 67 67 / 0.1);
  --text-primary: #111214;
  --text-secondary: rgb(17 18 20 / 0.7);
  --text-tertiary: rgb(17 18 20 / 0.62);
  --text-disabled: rgb(17 18 20 / 0.32);
  --text-on-brand: #ffffff;
  --brand-accent: var(--palette-gold-600);
  --brand-accent-highlight: var(--palette-gold-500);
  --brand-accent-deep: var(--palette-gold-700);
  --brand-accent-rgb: 141 106 43;
  --brand-text: var(--palette-gold-700);
  --feedback-correct: #376e47;
  --feedback-correct-rgb: 55 110 71;
  --feedback-great: #806f23;
  --feedback-off: #96582e;
  --feedback-error: #9a4343;
  --feedback-error-rgb: 154 67 67;
  --feedback-off-rgb: 150 88 46;
  --graph-neutral-rgb: 17 18 20;
  --border-subtle: rgb(17 18 20 / 0.07);
  --border-default: rgb(17 18 20 / 0.12);
  --border-strong: rgb(17 18 20 / 0.22);
  --border-brand: rgb(141 106 43 / 0.3);
  --fill-muted: rgb(17 18 20 / 0.025);
  --fill-subtle: rgb(17 18 20 / 0.045);
  --fill-default: rgb(17 18 20 / 0.075);
  --fill-strong: rgb(17 18 20 / 0.16);
  --action-primary-bg: var(--palette-gold-600);
  --action-primary-fg: #ffffff;
  --action-primary-muted: rgb(255 255 255 / 0.95);
  --action-secondary-fg: var(--text-secondary);
  --focus-ring: var(--palette-gold-700);
  --shadow-raised: 0 2rem 5rem rgb(28 27 24 / 0.17);
  --shadow-brand-inset: inset 0 1px 0 rgb(255 255 255 / 0.28);
  --shadow-overlay-text: 0 2px 14px rgb(255 255 255 / 0.65);
  --ambient-brand: rgb(141 106 43 / 0.08);
  --logo-ink: var(--logo-black);
  --logo-ground: var(--logo-ivory);
}

:root {
  --radius-contour: 2rem;
  --contour-stroke-width: 3px;
  --contour-offset: 0.5rem;
  --radius-contour-outer: calc(var(--radius-contour) + var(--contour-offset));
  --color-black: var(--palette-graphite-950);
  --color-white: var(--palette-ivory-50);
  --bg-primary: var(--surface-canvas);
  --bg-secondary: var(--surface-subtle);
  --bg-elevated: var(--surface-raised);
  --accent-primary: var(--brand-accent);
  --accent-success: var(--feedback-correct);
  --accent-error: var(--feedback-error);
  --gray-50: var(--fill-muted);
  --gray-100: var(--fill-subtle);
  --gray-200: var(--fill-default);
  --gray-300: var(--border-default);
  --gray-400: var(--border-strong);
  --gray-500: var(--text-disabled);
  --gray-600: var(--text-tertiary);
  --gray-700: var(--text-secondary);
  --gray-800: color-mix(in srgb, var(--text-primary) 82%, transparent);
  --gray-900: color-mix(in srgb, var(--text-primary) 95%, transparent);
  --glass-light: var(--fill-default);
  --glass-medium: var(--fill-strong);
  --glass-strong: color-mix(in srgb, var(--text-primary) 18%, transparent);
  --glass-border: var(--border-default);
  --glass-border-light: var(--border-subtle);
  --zone-perfect: var(--feedback-correct);
  --zone-great: var(--feedback-great);
  --zone-off: var(--feedback-off);
  --zone-miss: var(--feedback-error);
  --font-editorial: 'Fraunces', Georgia, serif;
  --contour-action-stroke: 2px;
  --contour-action-inset: 4px;
  --contour-action-offset: 4px;
  --contour-action-clearance: 8px;
  --contour-action-focus-offset: 12px;
  --contour-callout-stroke: 2px;
  --contour-callout-offset: 6px;
  --radius-contour-callout: var(--radius-feature);
  --radius-contour-callout-outer: calc(var(--radius-feature) + var(--contour-callout-offset));
  --editorial-initial-size: 3.5rem;
  --editorial-initial-gap: var(--space-3);
}

/* BBB admin layout. Colors, type, radii and spacing come only from brand tokens (tokens.css). */
* { box-sizing: border-box; }
html { overflow-x: hidden; }
body { margin: 0; background: var(--surface-canvas); color: var(--text-primary); font-family: var(--font-sans); line-height: 1.5; }
a { color: var(--brand-text); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
main { max-width: 1100px; margin: 0 auto; padding: var(--space-lg) var(--space-md) var(--space-3xl); }
h1 { font-size: 2rem; letter-spacing: -0.03em; margin: var(--space-md) 0; }
h2 { font-size: 1.15rem; margin: var(--space-xl) 0 var(--space-sm); color: var(--text-secondary); font-weight: 600; }
.top { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--border-default); background: var(--surface-header); position: sticky; top: 0; flex-wrap: wrap; }
.top .mark { font-weight: 700; color: var(--brand-text); text-decoration: none; margin-right: auto; }
.top nav { display: flex; gap: var(--space-md); flex-wrap: wrap; }
.top nav a { color: var(--text-primary); text-decoration: none; }
.context, .text, .rows a { overflow-wrap: anywhere; }
.card { min-width: 0; background: var(--surface-raised); border: 1px solid var(--border-default); border-radius: var(--radius-panel); padding: var(--space-md); margin-bottom: var(--space-md); }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: var(--space-sm); }
.tile { background: var(--surface-raised); border: 1px solid var(--border-default); border-radius: var(--radius-panel); padding: var(--space-md); }
.tile .label, .sub, .muted, .context { color: var(--text-secondary); font-size: 0.875rem; margin: 0; }
.tile .value { font-size: 2rem; font-weight: 700; margin: var(--space-xs) 0 0; font-variant-numeric: tabular-nums; }
.rows, .links { list-style: none; padding: 0; margin: 0; }
.rows li { display: flex; justify-content: space-between; padding: var(--space-sm) 0; border-bottom: 1px solid var(--border-subtle); }
.links li { padding: var(--space-xs) 0; }
button, .button { font: inherit; padding: 0.55rem 1rem; border-radius: var(--radius-action); border: 1px solid var(--border-strong); background: transparent; color: var(--text-primary); cursor: pointer; text-decoration: none; display: inline-block; }
button.primary, .button { background: var(--action-primary-bg); color: var(--action-primary-fg); border-color: var(--action-primary-bg); }
button.link { border: 0; padding: 0; color: var(--brand-text); text-decoration: underline; border-radius: 0; }
input, select, textarea { font: inherit; color: var(--text-primary); background: var(--surface-canvas); border: 1px solid var(--border-strong); border-radius: var(--radius-control); padding: 0.55rem 0.7rem; width: 100%; }
label { display: grid; gap: var(--space-xs); font-size: 0.875rem; color: var(--text-secondary); }
.login { max-width: 360px; margin: 12vh auto 0; }
.login form { display: grid; gap: var(--space-sm); }
.error { color: var(--feedback-error); }
.filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: var(--space-sm); align-items: end; }
.filters .check { display: flex; align-items: center; gap: var(--space-xs); }
.filters .check input { width: auto; }
.feedback header { display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }
.feedback time { color: var(--text-secondary); font-size: 0.875rem; }
.feedback .text { white-space: normal; overflow-wrap: anywhere; font-size: 1.05rem; }
.feedback audio { width: 100%; margin-top: var(--space-sm); }
.feedback.new { border-color: var(--border-brand); }
.badge { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; padding: 0.15rem 0.55rem; border-radius: var(--radius-pill); border: 1px solid var(--border-strong); color: var(--text-secondary); }
.badge.new { color: var(--brand-text); border-color: var(--border-brand); }
.review { display: grid; gap: var(--space-xs); margin-top: var(--space-md); }
.review .actions { display: flex; gap: var(--space-xs); flex-wrap: wrap; }
.review .actions button.current { border-color: var(--border-brand); color: var(--brand-text); }
@media (max-width: 600px) {
  h1 { font-size: 1.6rem; }
  main { padding: var(--space-md) var(--space-sm) var(--space-2xl); }
  .top { gap: var(--space-sm); }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile .value { font-size: 1.6rem; }
}
.table-wrap { overflow-x: auto; margin-top: var(--space-sm); }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: var(--space-xs) var(--space-sm); border-bottom: 1px solid var(--border-subtle); white-space: nowrap; }
th { color: var(--text-secondary); font-weight: 600; font-size: 0.875rem; }
code { font-family: var(--font-mono); font-size: 0.85em; overflow-wrap: anywhere; }