* { box-sizing: border-box; }

:root {
  --ink: #142033;
  --muted: #5c6b7a;
  --page: #f2f5f8;
  --surface: #ffffff;
  --line: #c9d4e0;
  --accent: #0d7a6f;
  --accent-deep: #085c54;
  --focus: #0d7a6f;
  --max: 72rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --radius: 0.75rem;
  --font: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

body {
  margin: 0;
  padding: var(--space-6);
  background: var(--page);
  color: var(--ink);
  font-family: var(--font);
  line-height: 1.5;
}

a { color: var(--accent-deep); }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.page {
  width: min(100%, var(--max));
  margin-inline: auto;
}

.lesson-nav,
nav[aria-label$="lessons"] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0 0 var(--space-6);
  padding: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.panel {
  margin: 0 0 var(--space-6);
  padding: var(--space-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.panel h2, .panel h3 { margin-top: 0; }
.explain { color: var(--muted); }
.code-sample {
  margin: 0 0 var(--space-4);
  padding: var(--space-3);
  background: #eef3f6;
  border-radius: 0.5rem;
  overflow-x: auto;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.9rem;
}

:root {
  --max-width: 72rem;
}


:root {
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --max: 40rem;
  --radius: 0.75rem;
  --bp-md: 48rem;
  --motion: 200ms ease;
  --color-brand: #0d7a6f;
  --color-surface: #ffffff;
  --color-text: #142033;
  --color-muted: #5c6b7a;
  --color-line: #c9d4e0;
}

.token-card {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  transition: box-shadow var(--motion), transform var(--motion);
}

.token-card:hover,
.token-card:focus-within {
  transform: translateY(-0.125rem);
  box-shadow: 0 10px 28px rgb(20 32 51 / 0.12);
}

.token-card h2 {
  margin: 0 0 var(--space-3);
}

.token-card p {
  margin: 0 0 var(--space-4);
  color: var(--color-muted);
}

.token-meta {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.85rem;
}

.scale-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: end;
  margin: var(--space-4) 0 0;
}

.scale-swatch {
  display: grid;
  place-items: center;
  min-width: 3.5rem;
  background: color-mix(in srgb, var(--color-brand) 18%, white);
  border: 1px solid var(--color-line);
  border-radius: 0.4rem;
  font-size: 0.75rem;
}

.motion-dot {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--color-brand);
  transition: transform var(--motion);
}

.token-card:hover .motion-dot,
.token-card:focus-within .motion-dot {
  transform: translateX(1.25rem);
}

@media (width >= 48rem) {
  .token-card {
    padding: var(--space-8);
  }
}