*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #fff;
  --bg-2: #f8f8f8;
  --text: #111;
  --text-2: #444;
  --text-3: #888;
  --border: #e5e5e5;
  --accent: #2563eb;
  --font: system-ui, -apple-system, sans-serif;
  --mono: 'Menlo', 'Monaco', monospace;
}

body { font-family: var(--font); background: var(--bg); color: var(--text); }

.demo-nav { padding: 20px 40px; border-bottom: 1px solid var(--border); }
.demo-nav a { font-size: 0.8125rem; color: var(--text-3); text-decoration: none; }
.demo-nav a:hover { color: var(--text); }

main { max-width: 800px; margin: 0 auto; padding: 0 40px 80px; }
.page-header { padding: 60px 0 36px; border-bottom: 1px solid var(--border); margin-bottom: 32px; }
.label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); margin-bottom: 16px; }
h1 { font-size: 1.875rem; letter-spacing: -0.03em; margin-bottom: 12px; }
.sub { font-size: 0.9375rem; color: var(--text-2); max-width: 540px; line-height: 1.65; }

/* Tabs */
.round-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 0;
  border-bottom: 2px solid var(--border);
  padding-bottom: 0;
}
.round-tab {
  padding: 9px 18px;
  font-size: 0.8125rem;
  font-weight: 500;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  color: var(--text-3);
  font-family: inherit;
  transition: color 0.12s, border-color 0.12s;
}
.round-tab:hover { color: var(--text); }
.round-tab.active { color: var(--text); border-bottom-color: var(--text); }

/* Round panels */
.rounds { padding-top: 28px; }
.round { display: none; }
.round.active { display: block; }

.round-meta { margin-bottom: 24px; }
.round-label {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: #eff6ff;
  color: #2563eb;
  padding: 3px 8px;
  border-radius: 3px;
  margin-bottom: 14px;
}
.round-prompt { display: flex; gap: 10px; align-items: flex-start; }
.prompt-tag {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  flex-shrink: 0;
  padding-top: 3px;
  width: 44px;
}
.round-prompt code {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--text);
  line-height: 1.6;
  background: var(--bg-2);
  border: 1px solid var(--border);
  padding: 8px 12px;
  border-radius: 6px;
  display: block;
  flex: 1;
}

/* Nav preview container */
.nav-preview {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 12px;
}

.round-note {
  font-size: 0.8rem;
  color: var(--text-3);
  font-style: italic;
}

/* ── Round 1: basic nav ─────────────────────────────────── */
.r1-nav { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #ccc; }
.r1-logo { font-weight: bold; }
.r1-links { display: flex; gap: 20px; }
.r1-links a { text-decoration: none; color: #222; font-size: 0.9rem; }

/* ── Round 2: responsive nav ────────────────────────────── */
.r2-nav { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; }
.r2-logo { font-weight: 700; font-size: 0.9375rem; }
.r2-hamburger { display: none; background: none; border: 1px solid var(--border); padding: 4px 8px; cursor: pointer; font-size: 1rem; border-radius: 4px; }
.r2-links { display: flex; gap: 20px; }
.r2-links a { text-decoration: none; color: var(--text); font-size: 0.875rem; }

@media (max-width: 640px) {
  .r2-hamburger { display: block; }
  .r2-links { display: none; position: absolute; top: 0; left: 0; right: 0; padding: 60px 20px 20px; background: #fff; flex-direction: column; gap: 12px; border-bottom: 1px solid var(--border); }
  .r2-links.open { display: flex; }
}

/* ── Round 3: scroll nav ────────────────────────────────── */
.r3-nav { display: flex; align-items: center; justify-content: space-between; padding: 14px; background: transparent; border-radius: 8px; transition: background 0.2s, box-shadow 0.2s; }
.r3-nav.scrolled { background: #fff; box-shadow: 0 1px 12px rgba(0,0,0,0.08); }
.r3-logo { font-weight: 700; font-size: 0.9375rem; }
.r3-links { display: flex; gap: 20px; }
.r3-links a { text-decoration: none; color: var(--text); font-size: 0.875rem; }
.scroll-hint { font-size: 0.75rem; color: var(--text-3); text-align: center; margin-top: 16px; }
.scroll-sim {
  display: block;
  margin: 8px auto 0;
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 6px 16px;
  border-radius: 4px;
  font-size: 0.8rem;
  cursor: pointer;
  font-family: inherit;
  color: var(--text-2);
  transition: border-color 0.12s;
}
.scroll-sim:hover { border-color: #bbb; }

/* ── Round 4: accessible nav ────────────────────────────── */
.r4-nav { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; }
.r4-logo { font-weight: 700; font-size: 0.9375rem; }
.r4-hamburger { display: none; background: none; border: 1px solid var(--border); padding: 4px 8px; cursor: pointer; font-size: 1rem; border-radius: 4px; }
.r4-links { display: flex; gap: 20px; }
.r4-links a { text-decoration: none; color: var(--text); font-size: 0.875rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

@media (max-width: 640px) {
  .r4-hamburger { display: block; }
  .r4-links { display: none; flex-direction: column; gap: 12px; margin-top: 12px; }
  .r4-links.open { display: flex; }
}

/* ── Round 5: active state ──────────────────────────────── */
.r5-nav { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; }
.r5-logo { font-weight: 700; font-size: 0.9375rem; }
.r5-links { display: flex; gap: 20px; }
.r5-links a { text-decoration: none; color: var(--text-3); font-size: 0.875rem; font-weight: 400; transition: color 0.1s; }
.r5-links a:hover { color: var(--text); }
.r5-links a.active { color: #000; font-weight: 600; }

@media (max-width: 640px) {
  .demo-nav { padding: 16px 20px; }
  main { padding: 0 20px 60px; }
}