:root {
  color-scheme: light;
  --canvas: #F8F6F2;
  --surface: #FFFFFF;
  --surface-muted: #F0EEF8;
  --border: #E6E2DC;
  --border-subtle: rgba(30, 27, 38, 0.08);
  --text-primary: #1A171E;
  --text-secondary: #686470;
  --text-muted: #8E8A96;
  --brand-primary: #5B32E8;
  --brand-primary-hover: #4E28D4;
  --brand-accent-light: #EDE8FC;
  --brand-accent-border: #DDD6FE;
  --status-up-next: #94909C;
  --status-in-progress: #16A34A;
  --status-queued: #EAB308;
  --avatar-surface: #D9D6DE;
  --avatar-ink: #94909F;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --page-gutter: 80px;
  --radius-badge: 9999px;
  --radius-button: 10px;
  --radius-card: 14px;
  --shadow-card: 0 1px 3px rgba(24, 20, 37, 0.04);
  --shadow-button: 0 2px 6px rgba(91, 50, 232, 0.25);
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-heavy: 800;
  --leading-solid: 1;
  --leading-display: 1.12;
  --leading-title: 1.25;
  --leading-body: 1.4;
  --leading-lead: 1.45;
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  color: var(--text-primary);
  background: var(--canvas);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
a { color: inherit; }
button, a { touch-action: manipulation; }
button:focus-visible, a:focus-visible, section:focus-visible,
.design-examples [data-preview-state="focus"] {
  outline: 3px solid var(--brand-primary);
  outline-offset: 5px;
}

.page-shell {
  width: min(100%, 1696px);
  min-height: 100svh;
  margin-inline: auto;
  padding: var(--space-lg) var(--page-gutter);
  display: flex;
  flex-direction: column;
}

.site-header {
  min-height: 68px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  border-bottom: 1px solid var(--border);
}

.wordmark {
  align-self: start;
  padding-block: 7px;
  font-size: 22px;
  line-height: 30px;
  font-weight: var(--weight-heavy);
  letter-spacing: 0.16em;
}

.navigation { display: flex; gap: var(--space-lg); }
.navigation a {
  min-height: 52px;
  padding: 8px 12px 14px;
  border-bottom: 2px solid transparent;
  color: var(--text-secondary);
  font-size: 18px;
  font-weight: var(--weight-semibold);
  text-decoration: none;
}
.navigation a:hover { color: var(--brand-primary); }
.navigation a[aria-current] {
  color: var(--brand-primary);
  border-bottom-color: var(--brand-primary);
}

.avatar {
  width: 46px;
  height: 46px;
  justify-self: end;
  overflow: hidden;
  border-radius: 50%;
  background: var(--avatar-surface);
  color: var(--avatar-ink);
}
.avatar svg { width: 100%; height: 100%; fill: currentColor; }

main { margin: var(--space-2xl) 0 40px; }
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--space-2xl);
  min-height: 240px;
}
.hero-copy { display: flex; flex-direction: column; justify-content: center; align-items: start; }
h1, .type-display {
  margin: 0;
  font-size: 48px;
  font-weight: var(--weight-heavy);
  line-height: var(--leading-display);
  letter-spacing: -0.03em;
}
.lead, .session-description, .type-lead {
  color: var(--text-secondary);
  font-size: 18px;
  line-height: var(--leading-lead);
  letter-spacing: -0.01em;
}
.lead { max-width: 640px; margin: 14px 0 26px; }
.type-body { font-size: 15px; font-weight: var(--weight-regular); line-height: var(--leading-body); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 22px; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  min-height: 48px;
  padding: var(--space-sm) 22px;
  border: 1px solid transparent;
  border-radius: var(--radius-button);
  font-size: 15px;
  line-height: var(--leading-body);
  font-weight: var(--weight-semibold);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}
.hero-actions .button { min-height: 64px; padding-inline: 30px; font-size: 18px; }
.button-primary { color: var(--surface); background: var(--brand-primary); box-shadow: var(--shadow-button); }
.button-primary:hover:not(:disabled), .design-examples .button-primary[data-preview-state="hover"] { background: var(--brand-primary-hover); }
.button-secondary, .button-session { color: var(--brand-primary); background: var(--surface-muted); }
.button-secondary { border-color: var(--brand-accent-border); }
.button-secondary:hover:not(:disabled), .button-session:hover:not(:disabled),
.design-examples .button-secondary[data-preview-state="hover"], .design-examples .button-session[data-preview-state="hover"] { background: var(--brand-accent-light); border-color: var(--brand-accent-border); }
.button:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
.icon { display: block; width: 16px; height: 16px; flex: 0 0 auto; }
.hero-actions .icon { width: 20px; height: 20px; }
.icon-calendar { width: 18px; height: 18px; }

.today-card, .session-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.today-card {
  min-height: 240px;
  padding: 34px 36px;
  background: var(--surface-muted);
}
.eyebrow, .type-eyebrow {
  margin: 0;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: var(--weight-bold);
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.today-card .eyebrow { letter-spacing: 0.02em; }
.metrics { display: grid; grid-template-columns: 1fr 1fr; margin: 30px 0 0; }
.metric { padding: 4px 20px; }
.metric-content { display: block; margin: 0; }
.metric + .metric { border-left: 1px solid var(--border-subtle); padding-left: 40px; }
/* Inline wrapping preserves readable phrases such as "3 sessions" in innerText. */
.metric-value, .type-metric { font-size: 56px; font-weight: var(--weight-heavy); line-height: var(--leading-solid); letter-spacing: -0.03em; }
.metric-value { display: inline-block; width: 100%; vertical-align: top; margin: 0 0 var(--space-xs); }
.metric-label { display: inline-block; vertical-align: top; color: var(--text-secondary); font-size: 20px; line-height: var(--leading-body); }

.sessions-section { margin-top: 52px; scroll-margin-top: var(--space-lg); }
.session-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
  padding: 0;
  margin: 20px 0 0;
  list-style: none;
}
.session-item { min-width: 0; }
.session-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 284px;
  padding: var(--space-lg) 28px 20px;
  background: var(--surface);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.session-card.is-active { border-color: var(--brand-primary); box-shadow: 0 0 0 1px var(--brand-primary); }
.session-meta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-sm); }
.session-status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: var(--weight-medium);
  line-height: var(--leading-body);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.session-status::before { content: ""; width: 14px; height: 14px; flex: 0 0 auto; border-radius: 50%; background: var(--status-up-next); }
.session-status[data-tone="in-progress"]::before { background: var(--status-in-progress); }
.session-status[data-tone="queued"]::before { background: var(--status-queued); }
.session-status[data-tone="paused"]::before { background: var(--brand-primary); }
.duration { flex: 0 0 auto; padding: 7px var(--space-md); border-radius: var(--radius-badge); color: var(--text-secondary); background: var(--surface-muted); font-size: 15px; line-height: var(--leading-body); font-weight: var(--weight-semibold); }
.session-title, .type-title { font-size: 22px; font-weight: var(--weight-bold); line-height: var(--leading-title); letter-spacing: -0.02em; }
.session-title { margin: 18px 0 10px; }
.session-description { margin: 0 0 20px; }
.session-actions { margin-top: auto; padding-top: var(--space-md); border-top: 1px solid var(--border); }
.button-session { width: 100%; min-height: 50px; padding-inline: var(--space-sm); gap: var(--space-xs); }

.site-footer, .type-meta { font-size: 13px; font-weight: var(--weight-medium); line-height: 18px; letter-spacing: 0.01em; }
.site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 22px;
  border-top: 1px solid var(--border);
  color: var(--text-secondary);
}
.footer-divider { color: var(--text-muted); }
.skip-link { position: absolute; top: 12px; left: 20px; z-index: 1; padding: 14px 20px; border-radius: var(--radius-button); color: var(--surface); background: var(--brand-primary); transform: translateY(-150%); }
.skip-link:focus { transform: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

@media (max-width: 1200px) {
  :root { --page-gutter: 40px; }
  .hero { gap: var(--space-xl); grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  h1, .type-display { font-size: 42px; }
  .today-card { padding-inline: var(--space-lg); }
  .metric { padding-inline: var(--space-xs); }
  .metric + .metric { padding-left: var(--space-lg); }
  .session-card { padding-inline: 20px; }
  .session-description { font-size: 16px; }
}

@media (max-width: 768px) {
  :root { --page-gutter: 20px; }
  .page-shell { padding: 20px; }
  .site-header { grid-template-columns: 1fr auto; row-gap: 10px; }
  .wordmark { font-size: 18px; padding-block: 3px; }
  .avatar { width: 36px; height: 36px; }
  .navigation { grid-column: 1 / -1; grid-row: 2; justify-content: center; gap: var(--space-lg); }
  .navigation a { min-height: 44px; padding-block: 8px 12px; font-size: 16px; }
  main { margin-top: var(--space-xl); margin-bottom: var(--space-xl); }
  .hero { grid-template-columns: 1fr; gap: var(--space-md); }
  .hero-copy { padding-block: 0 var(--space-xs); }
  h1, .type-display { max-width: 520px; font-size: clamp(32px, 6.5vw, 42px); }
  .lead { margin-block: var(--space-md) var(--space-lg); font-size: 17px; }
  .hero-actions { width: 100%; gap: var(--space-sm); }
  .hero-actions .button { flex: 1 1 auto; min-height: 48px; padding: var(--space-sm) var(--space-md); font-size: 15px; gap: var(--space-xs); }
  .today-card { min-height: 190px; padding: var(--space-lg); }
  .metrics { margin-top: 22px; }
  .metric-value, .type-metric { font-size: 48px; }
  .metric-label { font-size: 17px; }
  .metric + .metric { padding-left: 28px; }
  .sessions-section { margin-top: var(--space-xl); }
  .session-grid { grid-template-columns: 1fr; gap: var(--space-md); margin-top: var(--space-md); }
  .session-card { min-height: 256px; padding: var(--space-lg); }
  .session-description { font-size: 17px; }
  .site-footer { row-gap: 6px; font-size: 12px; }
  #focus-status { flex-basis: 100%; }
  .footer-divider:nth-of-type(4) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}