/* ---------- Tokens ---------- */
:root {
  --bg-light: #f6f2e9;
  --bg-dark: #141517;
  --surface-light: #ffffff;
  --surface-dark: #1d1f22;
  --text-light: #1c1d1f;
  --text-dark: #e8e6e1;
  --muted-light: #52555c;
  --muted-dark: #a3a6ab;
  --line-light: #d3c9b4;
  --line-dark: #2f3236;
  --accent-light: #835410;  /* pyrite gold, darkened for text contrast */
  --accent-dark: #e0b25a;
  --accent-text-light: #ffffff;
  --accent-text-dark: #1c1508;
  --chip-light: #f0e5cc;
  --chip-dark: #26292d;
  /* Large gold surfaces (buttons, underlines, bands) and the text on them */
  --fill-light: #e2a83a;
  --fill-dark: #e0b25a;
  --fill-text-light: #241803;
  --fill-text-dark: #1c1508;
  /* Alternating section band */
  --band-light: #ede5d3;
  --band-dark: #141517;
  /* Depth: light only (dark keeps its flat look) */
  --shadow-1-light: rgb(70 48 10 / 0.07);
  --shadow-1-dark: transparent;
  --shadow-2-light: rgb(70 48 10 / 0.10);
  --shadow-2-dark: transparent;
  /* Hero backdrop: soft gold glow + dot grid */
  --glow-light: rgb(226 168 58 / 0.26);
  --glow-dark: transparent;
  --dot-light: rgb(131 84 16 / 0.13);
  --dot-dark: transparent;
  /* Hairline ring around chips and thumbnails */
  --ring-light: rgb(131 84 16 / 0.20);
  --ring-dark: transparent;
  /* Short gold mark under section titles (light only) */
  --mark-light: #e2a83a;
  --mark-dark: transparent;
  /* BOOTH heart icon */
  --heart-light: #c8305f;
  --heart-dark: #f27aa0;

  /* Fallback: system preference without light-dark() */
  --bg: var(--bg-light);
  --surface: var(--surface-light);
  --text: var(--text-light);
  --muted: var(--muted-light);
  --line: var(--line-light);
  --accent: var(--accent-light);
  --accent-text: var(--accent-text-light);
  --chip: var(--chip-light);
  --fill: var(--fill-light);
  --fill-text: var(--fill-text-light);
  --band: var(--band-light);
  --shadow-1: var(--shadow-1-light);
  --shadow-2: var(--shadow-2-light);
  --glow: var(--glow-light);
  --dot: var(--dot-light);
  --ring: var(--ring-light);
  --mark: var(--mark-light);
  --heart: var(--heart-light);

  @media (prefers-color-scheme: dark) {
    --bg: var(--bg-dark);
    --surface: var(--surface-dark);
    --text: var(--text-dark);
    --muted: var(--muted-dark);
    --line: var(--line-dark);
    --accent: var(--accent-dark);
    --accent-text: var(--accent-text-dark);
    --chip: var(--chip-dark);
    --fill: var(--fill-dark);
    --fill-text: var(--fill-text-dark);
    --band: var(--band-dark);
    --shadow-1: var(--shadow-1-dark);
    --shadow-2: var(--shadow-2-dark);
    --glow: var(--glow-dark);
    --dot: var(--dot-dark);
    --ring: var(--ring-dark);
    --mark: var(--mark-dark);
    --heart: var(--heart-dark);
  }

  @supports (color: light-dark(white, black)) {
    --bg: light-dark(var(--bg-light), var(--bg-dark));
    --surface: light-dark(var(--surface-light), var(--surface-dark));
    --text: light-dark(var(--text-light), var(--text-dark));
    --muted: light-dark(var(--muted-light), var(--muted-dark));
    --line: light-dark(var(--line-light), var(--line-dark));
    --accent: light-dark(var(--accent-light), var(--accent-dark));
    --accent-text: light-dark(var(--accent-text-light), var(--accent-text-dark));
    --chip: light-dark(var(--chip-light), var(--chip-dark));
    --fill: light-dark(var(--fill-light), var(--fill-dark));
    --fill-text: light-dark(var(--fill-text-light), var(--fill-text-dark));
    --band: light-dark(var(--band-light), var(--band-dark));
    --shadow-1: light-dark(var(--shadow-1-light), var(--shadow-1-dark));
    --shadow-2: light-dark(var(--shadow-2-light), var(--shadow-2-dark));
    --glow: light-dark(var(--glow-light), var(--glow-dark));
    --dot: light-dark(var(--dot-light), var(--dot-dark));
    --ring: light-dark(var(--ring-light), var(--ring-dark));
    --mark: light-dark(var(--mark-light), var(--mark-dark));
    --heart: light-dark(var(--heart-light), var(--heart-dark));
  }

  color-scheme: light dark;
  accent-color: var(--accent);

  &:has(> head > meta[name="color-scheme"][content="dark"]) { color-scheme: dark; }
  &:has(> head > meta[name="color-scheme"][content="light"]) { color-scheme: light; }

  --font-sans: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", Consolas, "SF Mono", monospace;
  --radius: 10px;
  --wrap: 1080px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-padding-top: 4.5rem;
  -webkit-text-size-adjust: 100%;
  @media (prefers-reduced-motion: no-preference) { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--accent); text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

h1, h2, h3 { line-height: 1.3; margin: 0; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 16px;
  @media (min-width: 640px) { padding-inline: 28px; }
}

.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: 16px; top: -100px;
  background: var(--accent);
  color: var(--accent-text);
  padding: 0.5rem 1rem;
  border-radius: var(--radius);
  z-index: 20;
}
.skip-link:focus { top: 12px; }

[lang="en"] { font-feature-settings: normal; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 3.5rem;
}

.brand {
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  letter-spacing: 0.02em;
}

nav { margin-left: auto; overflow-x: auto; scrollbar-width: none; }
.nav-list {
  display: flex;
  gap: 0.25rem;
  list-style: none;
  margin: 0; padding: 0;
}
.nav-list a {
  display: block;
  padding: 0.35rem 0.6rem;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.9375rem;
  border-radius: 6px;
}
.nav-list a:hover { color: var(--text); background: var(--chip); }

/* Narrow screens: keep the first three links; the rest are reachable by scrolling the page. */
@media (max-width: 639px) {
  .nav-list { gap: 0; }
  .nav-list a { padding-inline: 0.45rem; }
  /* Projects, VRChat, AI; About sits right below the hero anyway. */
  .nav-list li:is(:first-child, :nth-child(n+5)) { display: none; }
}
@media (max-width: 359px) {
  .nav-list li:nth-child(3) { display: none; }
}

.theme-toggle {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.5rem; height: 2.5rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}
.theme-toggle:hover { border-color: var(--accent); }

/* Toggle shows the currently rendered scheme; label names the action.
   Works without JS by following color-scheme via media query + meta override. */
.icon-moon, .label-to-light { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not(:has(meta[name="color-scheme"][content="light"])) {
    .icon-sun, .label-to-dark { display: none; }
    .icon-moon { display: block; }
    .label-to-light { display: inline; }
  }
}
:root:has(meta[name="color-scheme"][content="dark"]) {
  .icon-sun, .label-to-dark { display: none; }
  .icon-moon { display: block; }
  .label-to-light { display: inline; }
}

/* ---------- Hero ---------- */
.hero {
  padding-block: 4.5rem 3.5rem;
  @media (min-width: 640px) { padding-block: 7rem 5rem; }
}
.eyebrow {
  margin: 0 0 0.75rem;
  color: var(--accent);
  font-weight: 600;
  font-size: 0.9375rem;
}
.eyebrow [lang="en"] { color: var(--muted); font-weight: 400; }

h1 {
  font-size: clamp(2.25rem, 7vw, 3.75rem);
  letter-spacing: -0.02em;
  font-weight: 800;
}
.name-en {
  display: block;
  font-size: 0.42em;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin-top: 0.35rem;
}
.lead {
  font-size: clamp(1.125rem, 2.6vw, 1.375rem);
  max-width: 38em;
  margin: 1.5rem 0 0.25rem;
}
.lead-en { color: var(--muted); margin: 0; max-width: 42em; }

.hero-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
}

.button {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 600;
  transition: border-color 0.15s, background-color 0.15s;
}
.button:hover { border-color: var(--accent); }
.button.primary { background: var(--fill); color: var(--fill-text); border-color: var(--fill); }
.button.primary [lang="en"] { font-weight: 400; opacity: 0.85; }

/* ---------- Sections ---------- */
.section {
  padding-block: 3.5rem;
  border-top: 1px solid var(--line);
}
.section h2 {
  font-size: 1.75rem;
  margin-bottom: 1.5rem;
  letter-spacing: -0.01em;
}
.h-sub {
  font-size: 0.6em;
  font-weight: 500;
  color: var(--muted);
  margin-left: 0.35em;
  letter-spacing: 0;
  white-space: nowrap;
}
.section-intro { margin: -0.5rem 0 1.5rem; color: var(--muted); }

.prose p { margin: 0 0 0.2rem; max-width: 40em; }
.prose p.en { color: var(--muted); font-size: 0.9375rem; margin-bottom: 1.1rem; }

.about-grid {
  display: grid;
  gap: 2rem;
  @media (min-width: 860px) { grid-template-columns: 1.6fr 1fr; gap: 3rem; }
}
.facts {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 0.5rem 1.25rem;
  align-self: start;
}
.facts div { padding: 0.75rem 0; border-bottom: 1px solid var(--line); }
.facts div:last-child { border-bottom: 0; }
.facts dt { font-size: 0.8125rem; color: var(--muted); }
.facts dt [lang="en"] { opacity: 0.8; }
.facts dd { margin: 0; font-weight: 600; }

/* ---------- Projects / VRChat ---------- */
.section-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin: -0.5rem 0 1.75rem;
}

.track-title {
  font-size: 1.125rem;
  padding-bottom: 0.6rem;
  margin-bottom: 1.25rem;
  border-bottom: 2px solid var(--fill);
}
.track-title.small { font-size: 1rem; border-bottom-width: 1px; border-color: var(--line); }

.card-list { display: grid; gap: 1rem; }
.backend-grid,
.vrchat-grid {
  @media (min-width: 700px) { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
}
.vrchat-grid { gap: 1.25rem; }

/* Featured project: full width; image beside the text on wide screens. */
.card.featured { grid-column: 1 / -1; }
.card.featured h4 { font-size: 1.375rem; }
@media (min-width: 860px) {
  .card.featured { flex-direction: row; }
  .card.featured .card-media {
    flex: 0 0 52%;
    aspect-ratio: auto;
    border-bottom: 0;
    border-right: 1px solid var(--line);
  }
  .card.featured .card-body { padding: 1.5rem 1.75rem; }
}

.card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}
.card-media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--chip);
  border-bottom: 1px solid var(--line);
}
.card-media img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.card-body { padding: 1.1rem 1.25rem 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.card h4 { margin: 0; font-size: 1.125rem; line-height: 1.35; }
.card .summary { margin: 0; }
.card .summary-en { margin: 0; color: var(--muted); font-size: 0.875rem; }
.card .highlights { margin: 0.25rem 0 0; padding-left: 1.1rem; font-size: 0.9375rem; }
.card .highlights li { margin: 0.1rem 0; }

.card.compact .card-body { padding-block: 0.9rem 1rem; }

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  list-style: none;
  padding: 0;
  margin: 0.25rem 0 0;
}
.chips li {
  font-size: 0.8125rem;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: var(--chip);
  color: var(--text);
}

.card-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  margin-top: auto;
  padding-top: 0.6rem;
  font-size: 0.9375rem;
  font-weight: 600;
}

.status {
  padding: 1.25rem;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  color: var(--muted);
  margin: 0;
}

.tools { margin-top: 3rem; }
.tool-list {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: 0.25rem 2rem;
  @media (min-width: 860px) { grid-template-columns: 1fr 1fr; }
}
.tool-list li { padding: 0.6rem 0; border-bottom: 1px solid var(--line); font-size: 0.9375rem; }
.tool-list .tool-name { font-weight: 600; }
.tool-list .tool-stack { color: var(--muted); font-size: 0.8125rem; font-family: var(--font-mono); }
.tool-list p { margin: 0.1rem 0 0; color: var(--muted); }

/* ---------- Skills ---------- */
.skill-grid {
  display: grid;
  gap: 1.5rem;
  @media (min-width: 640px) { grid-template-columns: 1fr 1fr; gap: 2rem 2.5rem; }
}
.skill-grid h3 { font-size: 1rem; margin-bottom: 0.5rem; }

/* ---------- Experience ---------- */
.timeline-item {
  border-left: 2px solid var(--fill);
  padding-left: 1.25rem;
}
.timeline-item h3 { font-size: 1.25rem; }
.timeline-item .h-sub { display: block; margin: 0.2rem 0 0; font-size: 0.875rem; }
.meta { margin: 0.4rem 0 0; color: var(--muted); font-size: 0.9375rem; }
.role { margin: 1rem 0 0.5rem; font-weight: 600; }
.role [lang="en"] { display: block; font-weight: 400; color: var(--muted); font-size: 0.875rem; }
.bullets { margin: 0; padding-left: 1.1rem; }
.bullets li { margin: 0.2rem 0; }

/* ---------- Certifications / Contact ---------- */
.cert-list, .contact-list { list-style: none; margin: 0; padding: 0; }
.cert-list li { padding: 0.7rem 0; border-bottom: 1px solid var(--line); }
.cert-list [lang="en"] { display: block; color: var(--muted); font-size: 0.875rem; }

.contact-list li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--line);
}
.contact-label { width: 5rem; color: var(--muted); font-size: 0.9375rem; }
.contact-handle { font-family: var(--font-mono); font-weight: 600; }

.site-footer {
  border-top: 1px solid var(--line);
  padding-block: 2rem;
  color: var(--muted);
  font-size: 0.875rem;
}
.site-footer p { margin: 0; }

/* ---------- Motion (opt-in only) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .card { transition: border-color 0.2s, translate 0.2s; }
  .card:hover { border-color: var(--accent); translate: 0 -2px; }
}
.card:hover { border-color: var(--accent); }


/* ---------- Light theme depth ----------
   Colors come from tokens whose dark values are transparent or equal to the old
   dark look, so these rules leave dark mode unchanged. Non-color values that only
   light mode needs are switched by the same rule the toggle uses. */
:root {
  --media-pad: 0px;
  --media-radius: 0px;
  --h2-pad: 0px;
}
@media (prefers-color-scheme: light) {
  :root:not(:has(> head > meta[name="color-scheme"][content="dark"])) {
    --media-pad: 8px;
    --media-radius: 6px;
    --h2-pad: 0.55rem;
  }
}
:root:has(> head > meta[name="color-scheme"][content="light"]) {
  --media-pad: 8px;
  --media-radius: 6px;
  --h2-pad: 0.55rem;
}

/* Full-bleed backdrops behind .wrap sections without widening the page */
body { overflow-x: clip; }
.hero, main > .section { position: relative; isolation: isolate; }
.hero::before,
main > .section:nth-of-type(even)::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline: calc(50% - 50vw);
  z-index: -1;
  pointer-events: none;
}
.hero::before {
  background:
    radial-gradient(ellipse 55% 75% at 85% 25%, var(--glow), transparent 70%),
    radial-gradient(ellipse 40% 60% at 5% 90%, var(--glow), transparent 70%),
    radial-gradient(circle, var(--dot) 1px, transparent 1.5px) 0 0 / 22px 22px;
  mask-image: linear-gradient(to bottom, #000 70%, transparent);
}
main > .section:nth-of-type(even)::before { background: var(--band); }

.section h2 {
  padding-bottom: var(--h2-pad);
  background: linear-gradient(var(--mark), var(--mark)) 0 100% / 2.25rem 3px no-repeat;
}

.site-header { box-shadow: 0 6px 18px var(--shadow-1); }

.card,
.facts,
.theme-toggle,
.button:not(.primary) {
  box-shadow: 0 1px 2px var(--shadow-1), 0 6px 18px var(--shadow-2);
}
.button.primary { box-shadow: 0 2px 8px var(--shadow-2); }
.card:hover { box-shadow: 0 2px 4px var(--shadow-1), 0 14px 30px var(--shadow-2); }
@media (prefers-reduced-motion: no-preference) {
  .card { transition: border-color 0.2s, translate 0.2s, box-shadow 0.2s; }
}

.card-media { padding: var(--media-pad); }
.card-media img {
  border-radius: var(--media-radius);
  box-shadow: 0 0 0 1px var(--ring);
}

.chips li { box-shadow: inset 0 0 0 1px var(--ring); }

/* ---------- BOOTH hearts ---------- */
.card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  flex-wrap: wrap;
}
.hearts {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  background: var(--chip);
  box-shadow: inset 0 0 0 1px var(--ring);
  color: var(--text);
  font: 600 0.8125rem/1.5 var(--font-mono);
  white-space: nowrap;
  cursor: default;
}
.hearts svg { color: var(--heart); flex: none; }
.hearts-total {
  padding: 0.45rem 0.9rem;
  font-size: 0.9375rem;
}

/* ---------- Working with AI ---------- */
.ai-principle {
  margin: 0 0 1rem;
  padding-left: 1rem;
  border-left: 3px solid var(--fill);
  font-size: clamp(1.25rem, 1rem + 1.2vw, 1.625rem);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.01em;
}
.ai-principle [lang="en"] {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.6em;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0;
}
#ai .section-intro { margin: 0 0 2rem; max-width: 46em; }

.ai-role,
.ai-steps > li,
.ai-tiles div {
  box-shadow: 0 1px 2px var(--shadow-1), 0 6px 18px var(--shadow-2);
}

/* Roles: two cards side by side */
.ai-roles {
  display: grid;
  gap: 1rem;
  margin-bottom: 3rem;
  @media (min-width: 640px) { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
}
.ai-role {
  padding: 1.1rem 1.25rem 1.2rem;
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface);
}
.ai-role.is-agent { border-top-color: var(--sw-2); }
.ai-role h3 { margin: 0 0 0.6rem; font-size: 1.125rem; }
.ai-role ul { margin: 0; padding-left: 1.1rem; }
.ai-role li { margin: 0.25rem 0; }

/* Workflow: numbered steps stacked top to bottom, so the order reads at any width.
   From 640px each step is one row: number | title | text + evidence. */
.ai-steps {
  list-style: none;
  counter-reset: ai-step;
  margin: 0 0 3rem;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
.ai-steps > li {
  counter-increment: ai-step;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1rem 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: 0.9375rem;
}
.ai-steps > li::before {
  content: counter(ai-step);
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--fill);
  color: var(--fill-text);
  font: 700 0.875rem/1 var(--font-mono);
}
.ai-steps h4 { margin: 0.2rem 0 0; font-size: 1rem; line-height: 1.35; }
.ai-steps h4 [lang="en"] {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--muted);
}
.ai-steps p { margin: 0; }
@media (min-width: 640px) {
  .ai-steps > li {
    display: grid;
    grid-template-columns: 1.75rem minmax(9rem, 14rem) 1fr;
    column-gap: 1.1rem;
    row-gap: 0.4rem;
    align-items: start;
    padding: 1rem 1.25rem;
  }
  .ai-steps > li::before { grid-column: 1; grid-row: 1 / span 2; }
  .ai-steps h4 { grid-column: 2; grid-row: 1 / span 2; margin: 0.15rem 0 0; }
  .ai-steps > li > p { grid-column: 3; }
}
.ai-proof {
  margin-top: auto !important;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--line);
  color: var(--muted);
  font-size: 0.875rem;
}

/* Generational search */
.ai-gen { margin-bottom: 3rem; }
.gen-lead { margin: 0 0 1.75rem; max-width: 46em; }
.gen-lead [lang="en"] { display: block; margin-top: 0.2rem; color: var(--muted); font-size: 0.9375rem; }

/* Cycle diagram: people sit outside the agents' loop */
.gen-cycle {
  margin: 0 0 2.5rem;
  display: grid;
  justify-items: center;
  gap: 1.5rem;
}
.gen-human {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.25rem 0.6rem;
  margin: 0;
  padding: 0.5rem 1rem;
  border: 1.5px solid var(--accent);
  border-radius: 999px;
  background: var(--surface);
  font-weight: 600;
  text-align: center;
  box-shadow: 0 1px 2px var(--shadow-1), 0 6px 18px var(--shadow-2);
}
.gen-who {
  padding: 0.05rem 0.55rem;
  border-radius: 999px;
  background: var(--fill);
  color: var(--fill-text);
  font: 700 0.75rem/1.6 var(--font-mono);
}
.gen-who [lang="en"] { font-weight: 500; }
.gen-human.is-in::after,
.gen-human.is-out::before {
  content: "↓";
  position: absolute;
  left: 50%;
  translate: -50% 0;
  color: var(--accent);
  font-weight: 700;
  line-height: 1.5rem;
}
.gen-human.is-in::after { top: 100%; }
.gen-human.is-out::before { bottom: 100%; }

.gen-zone {
  width: 100%;
  padding: 0.9rem 1rem 1rem;
  border: 1.5px dashed var(--line);
  border-radius: var(--radius);
}
.gen-zone-label {
  margin: 0 0 0.75rem;
  color: var(--muted);
  font: 600 0.75rem/1.4 var(--font-mono);
  text-align: center;
}
.gen-loop {
  position: relative;
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 20rem;
  display: grid;
  gap: 1.5rem;
}
.gen-loop li {
  position: relative;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  text-align: center;
  box-shadow: 0 1px 2px var(--shadow-1);
}
.gen-loop b { display: block; font-size: 0.9375rem; }
.gen-loop [lang="en"] { display: block; font-size: 0.75rem; color: var(--muted); line-height: 1.35; }
.gen-loop li:not(:last-child)::after {
  content: "↓";
  position: absolute;
  top: 100%;
  left: 50%;
  translate: -50% 0;
  color: var(--accent);
  font-weight: 700;
  line-height: 1.5rem;
}
.gen-return {
  margin: 0.75rem 0 0;
  text-align: center;
  color: var(--accent);
  font-size: 0.8125rem;
  font-weight: 600;
}
.gen-return::before { content: "↺ "; }

@media (min-width: 760px) {
  .gen-loop {
    max-width: none;
    grid-template-columns: repeat(5, 1fr);
    padding-bottom: 1.6rem;
  }
  .gen-loop li { display: grid; align-content: center; }
  .gen-loop li:not(:last-child)::after {
    content: "→";
    top: 50%;
    left: 100%;
    width: 1.5rem;
    translate: 0 -50%;
    text-align: center;
  }
  /* Return path: from the last step back to the first, under the row */
  .gen-loop::after {
    content: "";
    position: absolute;
    left: calc((100% - 6rem) / 10);
    right: calc((100% - 6rem) / 10);
    bottom: 0;
    height: 1.1rem;
    border: 2px solid var(--accent);
    border-top: 0;
    border-radius: 0 0 10px 10px;
  }
  .gen-loop::before {
    content: "";
    position: absolute;
    left: calc((100% - 6rem) / 10);
    bottom: 1.1rem;
    translate: calc(-50% + 1px) 0;
    border: 6px solid transparent;
    border-bottom: 8px solid var(--accent);
    border-top: 0;
  }
  .gen-return { margin-top: 0.4rem; }
}

/* The real run */
.gen-record-tag {
  display: inline-block;
  margin: 0 0 0.5rem;
  padding: 0.1rem 0.6rem;
  border-radius: 999px;
  background: var(--chip);
  box-shadow: inset 0 0 0 1px var(--ring);
  font: 600 0.75rem/1.6 var(--font-mono);
}
.gen-record h4 { margin: 0 0 0.75rem; font-size: 1.25rem; line-height: 1.35; }
.gen-record h4 [lang="en"] { display: block; font-size: 0.8125rem; font-weight: 500; color: var(--muted); }
.gen-why { margin: 0 0 1.25rem; max-width: 46em; }
.gen-end { margin: 1.25rem 0 0; max-width: 46em; }
:is(.gen-why, .gen-end, .gen-block, .gen-limit) > b:first-child {
  margin-right: 0.5em;
  color: var(--accent);
  font-size: 0.8125rem;
}

/* Generation stepper. Without JS: a plain list of every generation. */
.gen-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
  @media (min-width: 640px) { grid-template-columns: 1fr 1fr; }
  @media (min-width: 1000px) { grid-template-columns: repeat(3, 1fr); }
}
.gen-list > li {
  padding: 0.9rem 1.1rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 1px 2px var(--shadow-1), 0 6px 18px var(--shadow-2);
}
.gen-list > li:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gen-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.3rem 0.75rem;
  margin: 0 0 0.4rem;
  font-weight: 700;
}
.gen-fail {
  padding: 0.05rem 0.5rem;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px currentColor;
  color: var(--heart);
  font: 600 0.75rem/1.6 var(--font-mono);
}
.gen-block { margin: 0; }
.gen-mark {
  display: inline-block;
  margin: 0.6rem 0 0;
  padding: 0.15rem 0.65rem;
  border-radius: 999px;
  background: var(--fill);
  color: var(--fill-text);
  font-size: 0.8125rem;
  font-weight: 700;
}

/* With JS: a 1-6 tab row; the chosen generation shows below. */
.gen-stepper.is-enhanced .gen-list { grid-template-columns: 1fr; }
.gen-stepper.is-enhanced .gen-list > li { padding: 1.1rem 1.25rem; }
.gen-stepper.is-enhanced .gen-name { font-size: 1.0625rem; }
.gen-tabs {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  margin: 0 0 1rem;
}
.gen-tabs::before {
  content: "";
  position: absolute;
  top: 1rem;
  left: calc(100% / 12);
  right: calc(100% / 12);
  height: 2px;
  background: var(--line);
}
.gen-tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0 0 0.25rem;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
}
.gen-tab-dot {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 2px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text);
  font: 700 0.875rem/1 var(--font-mono);
  transition: background-color 0.15s, border-color 0.15s;
}
.gen-tab:hover .gen-tab-dot { border-color: var(--accent); }
.gen-tab[aria-selected="true"] { color: var(--text); font-weight: 700; }
.gen-tab[aria-selected="true"] .gen-tab-dot { background: var(--fill); border-color: var(--fill); color: var(--fill-text); }
.gen-tab:focus-visible { outline: none; }
.gen-tab:focus-visible .gen-tab-dot { outline: 2px solid var(--accent); outline-offset: 3px; }
.gen-tab-mark {
  padding: 0 0.4rem;
  border: 1px solid var(--accent);
  border-radius: 999px;
  color: var(--accent);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.5;
}

.gen-figures {
  display: grid;
  gap: 1.25rem;
  margin-top: 1.5rem;
  @media (min-width: 860px) { grid-template-columns: 1fr 1fr; gap: 2rem; }
}
.gen-deltas {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 0.6rem;
}
.gen-deltas div {
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 1px 2px var(--shadow-1), 0 6px 18px var(--shadow-2);
}
.gen-deltas dt { font-size: 0.8125rem; color: var(--muted); }
.gen-deltas dd { margin: 0; font: 500 1rem/1.5 var(--font-mono); white-space: nowrap; }
.gen-deltas dd b { font-size: 1.125rem; }
.gen-deltas s { color: var(--muted); }

/* Rules: what keeps the search honest */
.ai-gen .gen-rules-title { margin: 2.5rem 0 0.6rem; }
.gen-rules {
  list-style: none;
  counter-reset: gen-rule;
  margin: 0 0 2rem;
  padding: 0;
  display: grid;
  gap: 0.75rem;
  @media (min-width: 700px) { grid-template-columns: 1fr 1fr; }
}
.gen-rules li {
  counter-increment: gen-rule;
  position: relative;
  padding: 1rem 1.1rem 1rem 3.1rem;
  border: 1px solid var(--line);
  border-left: 4px solid var(--fill);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 1px 2px var(--shadow-1), 0 6px 18px var(--shadow-2);
  font-size: 0.9375rem;
}
.gen-rules li::before {
  content: counter(gen-rule);
  position: absolute;
  left: 1rem;
  top: 0.85rem;
  color: var(--accent);
  font: 700 1.375rem/1.2 var(--font-mono);
}
.gen-rules b { display: block; font-size: 1.0625rem; margin-bottom: 0.15rem; }
.gen-rules [lang="en"] { display: block; margin-top: 0.3rem; color: var(--muted); font-size: 0.8125rem; }

.gen-more {
  padding-top: 1rem;
  border-top: 1px dashed var(--line);
  color: var(--muted);
  font-size: 0.875rem;
}
.gen-more p { margin: 0 0 0.3rem; }
.gen-more b { color: var(--text); }
.gen-more ul { margin: 0 0 0.75rem; padding-left: 1.1rem; }
.gen-more .gen-limit { margin: 0; }

/* Guardrails + numbers */
.ai-bottom {
  display: grid;
  gap: 2rem;
  @media (min-width: 860px) { grid-template-columns: 1fr 1fr; gap: 3rem; }
}
.ai-guard .bullets li { margin: 0.4rem 0; }
.ai-guard code {
  font: 0.875em var(--font-mono);
  padding: 0.05em 0.35em;
  border-radius: 4px;
  background: var(--chip);
}
.ai-stats-label { margin: 0 0 0.5rem; font-size: 0.875rem; font-weight: 600; }
.ai-stats-label [lang="en"] { color: var(--muted); font-weight: 500; }
.ai-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.ai-bars li {
  display: grid;
  grid-template-columns: 7rem 1fr;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
}
.ai-bars b {
  justify-self: start;
  width: calc(var(--v) / 235 * 100%);
  min-width: 2.75rem;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  background: var(--fill);
  color: var(--fill-text);
  font: 700 0.8125rem/1.5 var(--font-mono);
  text-align: right;
}
.ai-note { margin: 0.5rem 0 1.5rem; color: var(--muted); font-size: 0.8125rem; }
.ai-tiles {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}
.ai-tiles div {
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.ai-tiles dt { font-size: 0.8125rem; color: var(--muted); }
.ai-tiles dd { margin: 0; font: 700 1.125rem/1.4 var(--font-mono); }

.colophon {
  margin: 3rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.9375rem;
}
.colophon a { font-weight: 600; white-space: nowrap; }