/* roulang page: index */
:root {
  --bg: #F3EFE8;
  --ink: #1C1612;
  --panel: #221C18;
  --brand: #E25B32;
  --brand-deep: #7A3E2E;
  --brand-hover: #C44722;
  --accent: #3F6F62;
  --line: #E4D9CC;
  --muted: #6E6258;
  --paper: #FBF8F4;
  --stage-text: #F6F1EA;
  --stage-soft: #E6D9CC;
  --radius: 16px;
  --radius-play: 20px;
  --shadow: 0 8px 24px rgba(28,22,18,.08);
  --shadow-hover: 0 14px 28px rgba(28,22,18,.14);
  --max: 1160px;
  --pad: 72px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  font-size: 16px;
  line-height: 1.8;
}
img, svg { max-width: 100%; display: block; }
button, input, select, textarea { font-family: inherit; font-size: inherit; }
h1, h2, h3 { line-height: 1.25; font-weight: 700; margin: 0; color: inherit; }
h1 { font-size: 40px; }
h2 { font-size: 28px; }
h3 { font-size: 20px; }
p { margin: 0 0 0.9em; }
a { color: var(--ink); text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-color: var(--brand); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, .nav-toggle:focus-visible + .burger {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
::selection { background: #F3C3B4; color: var(--ink); }
.container { width: min(var(--max), calc(100% - 48px)); margin: 0 auto; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--panel); color: var(--stage-text);
  border-bottom: 1px solid rgba(246,241,234,.08);
  box-shadow: 0 8px 24px rgba(28,22,18,.08);
}
.nav-bar {
  position: relative;
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.logo {
  color: var(--stage-text);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  max-width: 12em;
}
.logo:hover { color: var(--stage-text); }
.nav-toggle { display: none; }
.burger {
  display: none;
  border: 1px solid rgba(246,241,234,.28);
  color: var(--stage-text);
  border-radius: 999px;
  padding: 6px 14px;
  min-height: 40px;
  align-items: center;
  cursor: pointer;
}
.nav-links { display: flex; align-items: center; gap: 8px 22px; }
.nav-links > a {
  color: var(--stage-text);
  padding: 8px 0;
  font-weight: 500;
}
.nav-links > a.active {
  font-weight: 700;
  box-shadow: inset 0 -2px 0 var(--brand);
}
.nav-links > a:hover { color: var(--stage-text); }
.mega-wrap { position: relative; }
.mega-trigger {
  color: var(--stage-text);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-weight: 500;
}
.mega-trigger::after { content: ""; border: 5px solid transparent; border-top-color: var(--brand); margin-top: 4px; }
.mega {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: min(560px, calc(100vw - 32px));
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-hover);
  padding: 16px;
  grid-template-columns: 1fr 1.15fr;
  gap: 14px;
  z-index: 50;
}
.mega-wrap:hover .mega, .mega-wrap:focus-within .mega { display: grid; }
.mega a { color: var(--ink); }
.mega-col { display: flex; flex-direction: column; gap: 8px; }
.mega-label { margin: 0; color: var(--brand-deep); font-size: 13px; font-weight: 700; }
.mega-col a { padding: 6px 0; border-bottom: 1px solid var(--line); }
.mega-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--panel);
  color: var(--stage-text);
  border-radius: var(--radius);
  padding: 16px;
  min-height: 140px;
  justify-content: flex-end;
}
.mega-card, .mega-card strong { color: var(--stage-text); }
.mega-card span { color: var(--stage-soft); font-size: 14px; }
.mega-card:hover { text-decoration: none; transform: translateY(-2px); }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.btn:hover { background: var(--brand-hover); color: #fff; text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-ghost {
  background: transparent;
  color: var(--stage-text);
  border-color: rgba(246,241,234,.4);
}
.btn-ghost:hover { background: transparent; border-color: var(--brand); color: var(--stage-text); }
.pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--accent);
  border: 1px solid rgba(63,111,98,.35);
  background: rgba(63,111,98,.08);
  white-space: nowrap;
}
.section { padding: var(--pad) 0; }
.kicker { margin: 0 0 8px; color: var(--brand-deep); font-size: 13px; font-weight: 700; }
.section-lead { max-width: 760px; color: var(--muted); margin-bottom: 28px; }
.stage { background: var(--panel); color: var(--stage-text); }
.stage .kicker { color: #F0B7A6; }
.stage .section-lead { color: var(--stage-soft); }
.stage a { color: var(--stage-text); }
.paper { background: var(--paper); }
.cream { background: var(--bg); }
.board-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
  gap: 36px;
  align-items: center;
}
.sub { font-size: 18px; color: #F3E6DC; margin: 12px 0; }
.board .section-lead { max-width: 640px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.meters {
  background: #2A2420;
  border: 1px solid rgba(228,217,204,.16);
  border-radius: var(--radius-play);
  box-shadow: var(--shadow);
  padding: 8px 18px 14px;
}
.meter { padding: 12px 0; border-bottom: 1px solid rgba(246,241,234,.08); }
.meter:last-child { border-bottom: 0; }
.meter-top { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.meter-top b { color: #fff; font-size: 16px; }
.meter-track {
  margin-top: 8px;
  height: 8px;
  border-radius: 999px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.2) 0 1px, transparent 1px 14px),
    rgba(255,255,255,.06);
  overflow: hidden;
}
.meter-track i { display: block; height: 100%; background: linear-gradient(90deg, var(--brand-deep), var(--brand)); border-radius: inherit; position: relative; }
.meter-track i::after {
  content: "";
  position: absolute;
  right: 0; top: -2px;
  width: 4px; height: 12px;
  background: var(--accent);
  border-radius: 2px;
}
.matrix-grid {
  display: grid;
  grid-template-columns: 1.35fr 1.15fr .72fr;
  gap: 16px;
}
.track {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
  min-height: 210px;
  display: flex;
  flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease;
}
.track:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.track-full { grid-column: 1 / -1; min-height: 0; }
.track p { color: var(--muted); flex: 1; }
.track a { font-weight: 700; align-self: flex-start; }
.film-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.film {
  background: #221C18;
  color: var(--stage-text);
  border-radius: var(--radius-play);
  padding: 22px 22px 18px 42px;
  position: relative;
  box-shadow: var(--shadow);
}
.film::before {
  content: "";
  position: absolute;
  left: 12px; top: 18px; bottom: 18px; width: 12px;
  background: radial-gradient(circle, #F3EFE8 3px, transparent 3.5px) 0 0 / 12px 22px;
}
.film h3 { margin-bottom: 8px; }
.film .note { color: var(--stage-soft); min-height: 4.8em; }
.vbar { margin-top: 12px; }
.vbar-top { display: flex; justify-content: space-between; font-size: 14px; }
.vbar-track { margin-top: 6px; height: 10px; border-radius: 999px; background: rgba(246,241,234,.12); overflow: hidden; }
.vbar-track i { display: block; height: 100%; background: var(--brand); border-radius: inherit; }
.film-fine .vbar-track i { background: var(--accent); }
.tag-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.tag {
  border-radius: 999px;
  padding: 2px 10px;
  border: 1px solid rgba(246,241,234,.2);
  font-size: 13px;
}
.miles { list-style: none; margin: 0; padding: 18px 0 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; position: relative; }
.miles::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 27px;
  height: 2px;
  background: var(--line);
}
.miles li {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 14px 16px;
  box-shadow: var(--shadow);
}
.dot {
  position: absolute;
  top: -14px; left: 16px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--brand);
  border: 2px solid var(--paper);
  box-shadow: 0 0 0 2px var(--accent);
}
.miles p { color: var(--muted); margin: 8px 0 0; font-size: 14px; }
.scene-grid { display: grid; grid-template-columns: 1.15fr .82fr 1fr; gap: 16px; align-items: stretch; }
.scene {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: var(--panel);
  color: var(--stage-text);
  border-radius: var(--radius-play);
  padding: 20px;
  box-shadow: var(--shadow);
  min-height: 240px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.scene:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); text-decoration: none; color: var(--stage-text); }
.scene:nth-child(1) { min-height: 300px; background: #2A211C; }
.scene:nth-child(2) { min-height: 230px; background: #3A2A24; }
.scene:nth-child(3) { min-height: 330px; background: #221C18; }
.scene p { color: var(--stage-soft); margin: 10px 0 0; }
.entry-grid { display: grid; grid-template-columns: 1.6fr .9fr; gap: 16px; }
.entry-main, .entry-mini {
  display: block;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease;
}
.entry-main:hover, .entry-mini:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); text-decoration: none; }
.entry-main { background: var(--panel); color: var(--stage-text); padding: 28px; min-height: 280px; display: flex; flex-direction: column; justify-content: flex-end; }
.entry-main h3, .entry-main p { color: var(--stage-text); }
.entry-main p { color: var(--stage-soft); }
.entry-side { display: grid; gap: 16px; }
.entry-mini { background: var(--paper); padding: 18px; color: var(--ink); }
.entry-mini p { color: var(--muted); margin: 8px 0 0; }
.wall { display: grid; grid-template-columns: 1.4fr .8fr .8fr; gap: 16px; }
.cover-card {
  display: block;
  background: var(--paper);
  border: 1px solid rgba(228,217,204,.35);
  border-radius: var(--radius);
  overflow: hidden;
  color: var(--ink);
  box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease;
}
.stage .cover-card { background: #2A2420; color: var(--stage-text); border-color: rgba(246,241,234,.08); }
.cover-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); text-decoration: none; color: inherit; }
.span2 { grid-column: span 2; }
.frame { position: relative; overflow: hidden; background: #1C1612; }
.frame svg { width: 100%; height: 100%; object-fit: cover; }
.ratio-16x9 { aspect-ratio: 16 / 9; }
.ratio-4x3 { aspect-ratio: 4 / 3; }
.ratio-tag {
  position: absolute; left: 10px; bottom: 10px;
  background: rgba(28,22,18,.72); color: #fff;
  border-radius: 999px; padding: 2px 8px; font-size: 12px;
}
.cover-card h3, .cover-card p { margin-left: 14px; margin-right: 14px; }
.cover-card h3 { margin-top: 12px; }
.cover-card p { color: var(--stage-soft); font-size: 14px; }
.rail-wrap { position: relative; }
.rail {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 6px 2px 16px;
}
.slip {
  flex: 0 0 270px;
  scroll-snap-align: start;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.slip:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.slip-top { display: flex; justify-content: space-between; gap: 8px; align-items: center; color: var(--muted); font-size: 13px; }
.slip h3 { margin: 10px 0; font-size: 18px; }
.slip p { color: var(--muted); font-size: 14px; margin: 0; }
.news-list { list-style: none; margin: 0; padding: 0; }
.news-list li {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) auto;
  gap: 8px 18px;
  padding: 16px 0 8px;
  align-items: start;
}
.news-list time { color: var(--muted); font-size: 14px; }
.news-list h3 { font-size: 18px; }
.news-list p { grid-column: 2; margin: 0; color: var(--muted); font-size: 15px; }
.news-list li::after {
  content: "";
  grid-column: 1 / -1;
  width: 48px;
  height: 2px;
  background: var(--brand);
  margin: 8px 0 6px;
}
.more-wrap { margin: 8px 0 0; }
.more-wrap a { font-weight: 700; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; counter-reset: step; }
.steps li {
  counter-increment: step;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 18px 12px 18px;
  position: relative;
}
.steps li::before {
  content: counter(step);
  display: inline-flex;
  width: 28px; height: 28px;
  border-radius: 50%;
  align-items: center; justify-content: center;
  background: var(--panel);
  color: var(--stage-text);
  font-size: 14px;
  margin-bottom: 8px;
}
.steps p { color: var(--muted); }
.assure-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.assure {
  background: #2A2420;
  border: 1px solid rgba(246,241,234,.1);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
}
.icon-badge {
  width: 42px; height: 42px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--accent);
  color: #D7EBE4;
  font-weight: 700;
  margin-bottom: 10px;
}
.assure p { color: var(--stage-soft); }
.quick-list { display: flex; flex-direction: column; }
.quick-item {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.quick-item p { margin: 0; color: var(--muted); }
.faq details {
  border-bottom: 1px solid var(--line);
  padding: 12px 0;
}
.faq summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.25;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--brand); font-size: 22px; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--muted); margin: 8px 0 4px; max-width: 760px; }
.form-shell { max-width: 820px; }
.lead-form, .form-ok {
  background: #2A2420;
  border: 1px solid rgba(228,217,204,.18);
  border-radius: var(--radius-play);
  padding: 22px;
  box-shadow: var(--shadow);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.full { grid-column: 1 / -1; }
.lead-form label { display: block; margin-bottom: 6px; font-weight: 700; }
.lead-form input, .lead-form select, .lead-form textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  padding: 12px 14px;
  line-height: 1.5;
}
.lead-form textarea { min-height: 120px; resize: vertical; }
.form-actions { margin-top: 16px; }
.form-ok { display: none; margin-top: 16px; }
#form-sent:checked ~ .form-ok { display: block; }
#form-sent:checked ~ .lead-form .btn { background: var(--brand-hover); transform: translateY(1px); }
.form-ok strong { display: block; font-size: 20px; line-height: 1.25; margin-bottom: 8px; }
.form-ok p { color: var(--stage-soft); margin: 0; }
.related-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; }
.related-grid a {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow);
  font-weight: 700;
}
.related-grid a:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); text-decoration: none; }
.related-grid a span { color: var(--brand); font-weight: 500; white-space: nowrap; }
.site-footer { background: var(--panel); color: var(--stage-text); padding: 48px 0 24px; }
.foot {
  display: grid;
  grid-template-columns: 1.4fr .8fr .8fr;
  gap: 24px;
}
.site-footer a { color: var(--stage-text); }
.site-footer p { color: var(--stage-soft); }
.foot-logo { color: var(--stage-text); font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.foot nav { display: flex; flex-direction: column; gap: 6px; }
.copy { margin: 22px 0 0; padding-top: 16px; border-top: 1px solid rgba(246,241,234,.1); color: var(--stage-soft); font-size: 14px; }
@media (max-width: 1100px) {
  :root { --pad: 48px; }
  h1 { font-size: 32px; }
  h2 { font-size: 24px; }
  h3 { font-size: 18px; }
  .board-grid, .matrix-grid, .scene-grid, .entry-grid, .assure-grid { grid-template-columns: 1fr 1fr; }
  .track-narrow { grid-column: 1 / -1; }
  .wall { grid-template-columns: 1fr 1fr; }
  .miles { grid-template-columns: repeat(3, 1fr); }
  .miles::before { display: none; }
  .scene:nth-child(3) { grid-column: 1 / -1; min-height: 220px; }
}
@media (max-width: 768px) {
  :root { --pad: 32px; }
  h1 { font-size: 28px; }
  h2 { font-size: 22px; }
  .container { width: min(var(--max), calc(100% - 32px)); }
  .burger { display: inline-flex; position: relative; z-index: 2; }
  .nav-toggle {
    display: block;
    position: absolute;
    right: 0; top: 16px;
    width: 72px; height: 42px;
    opacity: 0;
    z-index: 3;
    cursor: pointer;
  }
  .nav-links {
    display: none;
    position: absolute;
    left: 0; right: 0; top: 74px;
    flex-direction: column;
    align-items: stretch;
    background: #221C18;
    padding: 8px 20px 18px;
    border-bottom: 1px solid rgba(246,241,234,.08);
    gap: 4px;
  }
  .nav-toggle:checked ~ .nav-links { display: flex; }
  .mega { position: static; display: grid; width: auto; grid-template-columns: 1fr; box-shadow: none; margin: 6px 0 10px; }
  .board-grid, .matrix-grid, .film-grid, .scene-grid, .entry-grid, .wall, .steps, .assure-grid, .form-grid, .related-grid, .foot, .quick-item, .news-list li {
    grid-template-columns: 1fr;
  }
  .track-full, .track-narrow, .span2, .scene:nth-child(3), .full, .news-list p { grid-column: auto; }
  .miles { grid-template-columns: 1fr; padding-left: 8px; }
  .miles::before { display: block; left: 22px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .scene, .scene:nth-child(1), .scene:nth-child(2), .scene:nth-child(3) { min-height: 0; }
  .entry-main { min-height: 0; }
  .news-list li::after { grid-column: 1; }
}
@media (max-width: 480px) {
  .container { width: min(var(--max), calc(100% - 28px)); }
  .logo { font-size: 16px; }
  .actions .btn { width: 100%; }
  .slip { flex-basis: 82%; }
  .meter-top b { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* roulang page: category1 */
:root {
 --bg: #F3EFE8;
 --ink: #1C1612;
 --panel: #221C18;
 --brand: #E25B32;
 --brand-deep: #7A3E2E;
 --brand-hover: #C44722;
 --accent: #3F6F62;
 --line: #E4D9CC;
 --muted: #6E6258;
 --paper: #FBF8F4;
 --stage-text: #F6F1EA;
 --stage-soft: #E6D9CC;
 --radius: 16px;
 --radius-play: 20px;
 --shadow: 0 8px 24px rgba(28,22,18,.08);
 --shadow-hover: 0 14px 28px rgba(28,22,18,.14);
 --max: 1160px;
 --pad: 72px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
 margin: 0;
 background: var(--bg);
 color: var(--ink);
 font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
 font-size: 16px;
 line-height: 1.8;
}
img, svg { max-width: 100%; display: block; }
button, input, select, textarea { font-family: inherit; font-size: inherit; }
a { color: var(--ink); text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-color: var(--brand); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, .nav-toggle:focus-visible + .burger {
 outline: 2px solid var(--accent);
 outline-offset: 2px;
}
p { margin: 0 0 0.9em; }
h1, h2, h3 { line-height: 1.25; margin: 0 0 0.45em; font-weight: 700; }
h1 { font-size: 40px; }
h2 { font-size: 28px; }
h3 { font-size: 20px; }
.container { width: min(var(--max), calc(100% - 48px)); margin: 0 auto; }
.site-header {
 position: sticky; top: 0; z-index: 40;
 background: var(--panel); color: var(--stage-text);
 border-bottom: 1px solid rgba(246,241,234,.08);
 box-shadow: 0 8px 24px rgba(28,22,18,.08);
}
.nav-bar {
 position: relative;
 min-height: 74px;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 20px;
}
.logo {
 color: var(--stage-text);
 font-size: 18px;
 font-weight: 700;
 line-height: 1.25;
 max-width: 12em;
}
.logo:hover { color: var(--stage-text); text-decoration: none; }
.nav-toggle {
 position: absolute;
 width: 1px;
 height: 1px;
 margin: 0;
 opacity: 0;
}
.burger {
 display: none;
 color: var(--stage-text);
 border: 1px solid rgba(246,241,234,.35);
 border-radius: 999px;
 padding: 6px 14px;
 min-height: 40px;
 align-items: center;
 cursor: pointer;
}
.nav-links { display: flex; align-items: center; gap: 8px 22px; }
.nav-links > a {
 color: var(--stage-text);
 padding: 8px 0;
 font-weight: 500;
}
.nav-links > a.active {
 font-weight: 700;
 box-shadow: inset 0 -2px 0 var(--brand);
}
.nav-links > a:hover { color: var(--stage-text); }
.mega-wrap { position: relative; }
.mega-trigger {
 color: var(--stage-text);
 display: inline-flex;
 align-items: center;
 gap: 6px;
 min-height: 44px;
 font-weight: 500;
}
.mega-trigger:hover { color: var(--stage-text); }
.mega-trigger::after { content: ""; border: 5px solid transparent; border-top-color: var(--brand); margin-top: 4px; }
.mega {
 display: none;
 position: absolute;
 right: 0;
 top: calc(100% + 10px);
 width: min(560px, calc(100vw - 32px));
 background: var(--paper);
 color: var(--ink);
 border: 1px solid var(--line);
 border-radius: var(--radius);
 box-shadow: var(--shadow-hover);
 padding: 16px;
 grid-template-columns: 1fr 1.15fr;
 gap: 14px;
 z-index: 50;
}
.mega-wrap:hover .mega, .mega-wrap:focus-within .mega { display: grid; }
.mega a { color: var(--ink); }
.mega-col { display: flex; flex-direction: column; gap: 8px; }
.mega-label { margin: 0; color: var(--brand-deep); font-size: 13px; font-weight: 700; }
.mega-col a { padding: 6px 0; border-bottom: 1px solid var(--line); }
.mega-card {
 display: flex;
 flex-direction: column;
 gap: 6px;
 background: var(--panel);
 color: var(--stage-text);
 border-radius: var(--radius);
 padding: 16px;
 min-height: 140px;
 justify-content: flex-end;
 transition: transform .2s ease;
}
.mega-card, .mega-card strong { color: var(--stage-text); }
.mega-card span { color: var(--stage-soft); font-size: 14px; line-height: 1.8; }
.mega-card:hover { text-decoration: none; transform: translateY(-2px); }
.btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-height: 44px;
 padding: 0 18px;
 border-radius: 999px;
 border: 1px solid transparent;
 background: var(--brand);
 color: #fff;
 font-weight: 700;
 cursor: pointer;
 transition: background .2s ease, transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.btn:hover { background: var(--brand-hover); color: #fff; text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-ghost {
 background: transparent;
 color: var(--stage-text);
 border-color: rgba(246,241,234,.4);
}
.btn-ghost:hover { background: transparent; border-color: var(--brand); color: var(--stage-text); }
.pill {
 display: inline-flex;
 align-items: center;
 border-radius: 999px;
 padding: 1px 8px;
 font-size: 12px;
 line-height: 1.7;
 color: var(--accent);
 border: 1px solid rgba(63,111,98,.35);
 background: rgba(63,111,98,.08);
 white-space: nowrap;
}
.section { padding: var(--pad) 0; }
.section-lead { max-width: 760px; color: var(--muted); margin-bottom: 28px; }
.stage { background: var(--panel); color: var(--stage-text); }
.stage .section-lead, .stage p { color: var(--stage-soft); }
.stage a { color: var(--stage-text); }
.paper { background: var(--paper); }
.wash { background: var(--bg); }
.block-title { display: flex; align-items: center; gap: 10px; }
.block-title::before {
 content: "";
 width: 18px;
 height: 3px;
 border-radius: 999px;
 background: var(--brand);
 flex: 0 0 auto;
}
.cat-head-grid {
 display: grid;
 grid-template-columns: minmax(0, 1.45fr) minmax(240px, .55fr);
 gap: 36px;
 align-items: end;
}
.kicker {
 margin: 0 0 10px;
 color: var(--brand-deep);
 font-size: 13px;
 font-weight: 700;
}
.scope { max-width: 640px; margin-bottom: 0; color: var(--muted); }
.stat-side { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.stat-pill {
 background: var(--paper);
 border: 1px solid var(--line);
 border-radius: var(--radius);
 box-shadow: var(--shadow);
 padding: 12px 16px;
 text-align: right;
}
.stat-pill strong {
 display: block;
 font-size: 28px;
 line-height: 1.25;
 color: var(--brand-deep);
}
.stat-pill span { color: var(--muted); font-size: 13px; }
.mix-list { display: flex; flex-direction: column; gap: 16px; }
.mix-lg, .mix-row, .pick-card {
 background: var(--paper);
 border: 1px solid var(--line);
 border-radius: var(--radius);
 box-shadow: var(--shadow);
 color: var(--ink);
 transition: transform .2s ease, box-shadow .2s ease;
}
.mix-lg:hover, .mix-row:hover, .pick-card:hover {
 transform: translateY(-2px);
 box-shadow: var(--shadow-hover);
 text-decoration: none;
}
.mix-lg {
 display: grid;
 grid-template-columns: minmax(240px, 340px) minmax(0, 1fr);
 gap: 0;
 overflow: hidden;
 border-radius: var(--radius-play);
}
.mix-lg .body, .mix-row .body, .pick-card .body { padding: 16px 18px 18px; }
.mix-lg h3, .mix-row h3, .pick-card h3 { margin-bottom: 6px; }
.mix-lg p, .mix-row p, .pick-card p { margin: 0; color: var(--muted); }
.meta {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
 align-items: center;
 margin-top: 10px;
 color: var(--muted);
 font-size: 13px;
}
.cover {
 position: relative;
 background: var(--panel);
 overflow: hidden;
 min-height: 120px;
}
.cover svg { width: 100%; height: 100%; object-fit: cover; }
.ratio-lg { aspect-ratio: 16 / 9; }
.ratio-sm { aspect-ratio: 4 / 3; }
.ratio-tag {
 position: absolute;
 left: 12px;
 bottom: 10px;
 color: var(--stage-text);
 font-size: 12px;
 letter-spacing: 0;
 background: rgba(28,22,18,.45);
 border-radius: 999px;
 padding: 1px 8px;
}
.tick {
 position: absolute;
 left: 12px;
 top: 12px;
 width: 36px;
 height: 4px;
 border-radius: 999px;
 background: var(--accent);
}
.mix-row {
 display: grid;
 grid-template-columns: 148px minmax(0, 1fr);
 gap: 14px;
 align-items: center;
 padding: 10px;
}
.mix-row .cover { border-radius: 12px; }
.more-bar {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 16px;
 border: 1px solid var(--line);
 border-radius: var(--radius);
 background: var(--paper);
 box-shadow: var(--shadow);
 padding: 18px 20px;
}
.more-bar p { margin: 0; color: var(--muted); }
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { position: relative; }
.chip input {
 position: absolute;
 width: 1px;
 height: 1px;
 opacity: 0;
}
.chip span {
 display: inline-flex;
 align-items: center;
 min-height: 40px;
 padding: 0 16px;
 border-radius: 999px;
 border: 1px solid rgba(246,241,234,.28);
 color: var(--stage-text);
 background: transparent;
 cursor: pointer;
}
.chip input:checked + span {
 background: var(--brand);
 border-color: var(--brand);
 color: #fff;
}
.chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.chip input:active + span { transform: translateY(1px); }
.pick-rail {
 display: flex;
 gap: 14px;
 overflow-x: auto;
 padding: 4px 2px 12px;
 scroll-snap-type: x mandatory;
}
.pick-card {
 flex: 0 0 240px;
 scroll-snap-align: start;
 overflow: hidden;
}
.pick-card .cover { border-radius: 0; }
.path-list { display: flex; flex-direction: column; }
.path-list a {
 display: flex;
 justify-content: space-between;
 gap: 16px;
 align-items: center;
 padding: 14px 0;
 border-bottom: 1px solid var(--line);
}
.path-list a:hover { text-decoration: none; }
.path-list a:hover strong { text-decoration: underline; text-decoration-color: var(--brand); text-underline-offset: 3px; }
.path-list span { color: var(--muted); font-size: 13px; white-space: nowrap; }
.note-grid {
 display: grid;
 grid-template-columns: 1.2fr .8fr;
 gap: 22px;
 align-items: center;
}
.note-marks { display: flex; flex-wrap: wrap; gap: 8px; }
.note-marks i {
 font-style: normal;
 border-radius: 999px;
 border: 1px solid rgba(63,111,98,.45);
 color: #D5E4DE;
 padding: 2px 10px;
 font-size: 13px;
}
.qa-list { display: flex; flex-direction: column; }
.qa-item {
 display: grid;
 grid-template-columns: minmax(180px, 280px) minmax(0, 1fr);
 gap: 18px;
 padding: 16px 0;
 border-bottom: 1px solid var(--line);
}
.qa-item h3 { font-size: 18px; }
.qa-item p { margin: 0; color: var(--muted); }
.site-footer {
 background: var(--panel);
 color: var(--stage-text);
 padding: 48px 0 28px;
}
.foot {
 display: grid;
 grid-template-columns: 1.4fr .8fr .6fr;
 gap: 24px;
}
.foot-logo { margin: 0 0 8px; font-size: 18px; font-weight: 700; color: var(--stage-text); }
.foot p { color: var(--stage-soft); }
.foot a { color: var(--stage-text); display: block; padding: 4px 0; }
.foot a:hover { color: var(--stage-text); }
.copy {
 color: var(--stage-soft);
 font-size: 14px;
 border-top: 1px solid rgba(246,241,234,.12);
 margin: 20px 0 0;
 padding-top: 16px;
}
@media (max-width: 1100px) {
 :root { --pad: 48px; }
 h1 { font-size: 32px; }
 h2 { font-size: 24px; }
 .cat-head-grid, .note-grid { gap: 24px; }
}
@media (max-width: 1024px) {
 .mix-lg { grid-template-columns: minmax(200px, 280px) minmax(0, 1fr); }
 .qa-item { grid-template-columns: minmax(160px, 220px) minmax(0, 1fr); }
}
@media (max-width: 768px) {
 :root { --pad: 32px; }
 h1 { font-size: 28px; }
 h2 { font-size: 22px; }
 h3 { font-size: 18px; }
 .burger { display: inline-flex; }
 .nav-links {
 display: none;
 position: absolute;
 left: 0;
 right: 0;
 top: 100%;
 flex-direction: column;
 align-items: stretch;
 gap: 4px;
 padding: 8px 24px 20px;
 background: var(--panel);
 border-bottom: 1px solid rgba(246,241,234,.08);
}
 .nav-toggle:checked ~ .nav-links { display: flex; }
 .nav-links > a { padding: 12px 0; }
 .mega-wrap { width: 100%; }
 .mega, .mega-wrap:hover .mega, .mega-wrap:focus-within .mega {
 position: static;
 display: grid;
 width: 100%;
 grid-template-columns: 1fr;
 margin: 8px 0 12px;
 }
 .cat-head-grid, .note-grid, .mix-lg, .foot, .qa-item { grid-template-columns: 1fr; }
 .stat-side { flex-direction: row; flex-wrap: wrap; }
 .stat-pill { flex: 1 1 140px; text-align: left; }
 .more-bar { flex-direction: column; align-items: flex-start; }
 .mix-row { grid-template-columns: 112px minmax(0, 1fr); }
}
@media (max-width: 520px) {
 .container { width: min(var(--max), calc(100% - 32px)); }
 .mix-lg, .mix-row { grid-template-columns: 1fr; }
 .pick-card { flex-basis: 78%; }
 .path-list a { align-items: flex-start; flex-direction: column; gap: 2px; }
 .logo { font-size: 16px; }
}
@media (max-width: 480px) {
 .stat-side { flex-direction: column; }
 .stat-pill strong { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
 html { scroll-behavior: auto; }
 *, *::before, *::after { transition: none !important; }
 .mix-lg:hover, .mix-row:hover, .pick-card:hover, .mega-card:hover { transform: none; }
}