/* roulang page: index */
:root {
  --bg: #07080d;
  --bg-2: #10131b;
  --bg-3: #171b26;
  --ink: #f6f3ec;
  --ink-soft: #e4ddd0;
  --muted: #b7b1a6;
  --faint: #8d877c;
  --line: rgba(246, 243, 236, 0.12);
  --line-strong: rgba(246, 243, 236, 0.22);
  --lime: #dff25a;
  --lime-2: #edf7a4;
  --lime-deep: #15180c;
  --magenta: #ff6b8a;
  --cyan: #8ee7ff;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.38);
  --radius: 18px;
  --radius-sm: 12px;
  --header: 72px;
  --space: 72px;
  --font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --num: "Bahnschrift", "DIN Alternate", "Segoe UI", sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.75;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--lime); color: var(--lime-deep); }
.container { width: min(1120px, calc(100% - 40px)); margin: 0 auto; }
.section { padding: var(--space) 0; }
.section-alt { background: var(--bg-2); }
.section-soft { background: linear-gradient(180deg, #0c0f16, #10131b); }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--lime);
  font-size: 13px;
  letter-spacing: 0.08em;
  font-weight: 700;
}
.lead { margin-top: 12px; color: var(--ink-soft); font-size: 16px; line-height: 1.85; max-width: 760px; }
h1 { font-size: clamp(30px, 4.4vw, 48px); line-height: 1.25; letter-spacing: -0.02em; }
h2 { font-size: clamp(24px, 2.6vw, 34px); line-height: 1.3; letter-spacing: -0.02em; }
h3 { font-size: 18px; line-height: 1.45; }
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--header);
  background: rgba(7, 8, 13, 0.84);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  position: relative;
  height: var(--header);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.logo { display: flex; align-items: center; gap: 10px; min-width: 0; }
.logo-mark {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: var(--lime);
  color: var(--lime-deep);
  font-family: var(--num);
  font-weight: 800;
}
.logo strong { display: block; font-size: 16px; line-height: 1.2; }
.logo small { display: block; color: var(--muted); font-size: 12px; }
.nav-list { display: flex; align-items: center; gap: 6px; }
.nav-list a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  color: var(--ink-soft);
  transition: background 0.2s ease, color 0.2s ease;
}
.nav-list a:hover { background: rgba(223, 242, 90, 0.1); color: var(--lime-2); }
.nav-list a[aria-current="page"] { background: rgba(223, 242, 90, 0.16); color: var(--lime); }
.nav-toggle {
  display: none;
  border: 1px solid var(--line-strong);
  background: var(--bg-3);
  color: var(--ink);
  border-radius: 999px;
  min-height: 40px;
  padding: 0 14px;
  gap: 8px;
  align-items: center;
}
.nav-toggle:focus-visible, .nav-list a:focus-visible, .btn:focus-visible, .chip:focus-visible, .fav-btn:focus-visible, .tile:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .qindex a:focus-visible, .more-link:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}
.hero {
  position: relative;
  padding: 78px 0 70px;
  background:
    linear-gradient(180deg, rgba(7, 8, 13, 0.74), rgba(7, 8, 13, 0.92)),
    url("/assets/images/c6306a11fd5ee76b.png") center 30% / cover no-repeat;
  text-align: center;
  border-bottom: 1px solid var(--line);
}
.hero .container { display: flex; flex-direction: column; align-items: center; }
.brand-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: rgba(7, 8, 13, 0.5);
  color: var(--lime-2);
  font-size: 13px;
  font-weight: 700;
}
.hero h1 { margin-top: 18px; max-width: 16em; }
.hero .lead { text-align: center; }
.search {
  margin-top: 28px;
  width: min(720px, 100%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 999px;
  background: rgba(16, 19, 27, 0.92);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow);
}
.search label { color: var(--lime); font-size: 13px; font-weight: 700; padding-left: 10px; white-space: nowrap; }
.search input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 10px 8px; outline: none; }
.chips { margin-top: 16px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: min(780px, 100%); }
.chip, .btn, .fav-btn { border: 1px solid transparent; border-radius: 999px; transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease; }
.chip { background: rgba(246, 243, 236, 0.06); border-color: var(--line); color: var(--ink-soft); min-height: 36px; padding: 0 12px; }
.chip:hover, .chip.is-on { background: var(--lime); color: var(--lime-deep); border-color: var(--lime); }
.hero-actions { margin-top: 22px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; font-weight: 700; }
.btn-primary { background: var(--lime); color: var(--lime-deep); }
.btn-primary:hover { background: var(--lime-2); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }
.btn-ghost { background: transparent; border-color: var(--line-strong); color: var(--ink); }
.btn-ghost:hover { border-color: var(--lime); color: var(--lime); }
.block-head { margin-bottom: 26px; }
.entry-tools { display: flex; justify-content: space-between; gap: 12px; align-items: end; margin-bottom: 14px; }
.count-pill, .badge { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.count-pill { background: rgba(142, 231, 255, 0.12); color: var(--cyan); }
.badge { background: rgba(223, 242, 90, 0.14); color: var(--lime); }
.badge-hot { background: rgba(255, 107, 138, 0.16); color: var(--magenta); }
.badge-cyan { background: rgba(142, 231, 255, 0.12); color: var(--cyan); }
.rail, .fav-row { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
.rail li, .fav-card { scroll-snap-align: start; }
.rail li { min-width: 230px; flex: 1; background: var(--bg-3); border: 1px solid var(--line); border-top: 3px solid var(--lime); border-radius: 0 0 var(--radius-sm) var(--radius-sm); padding: 16px; }
.rail-no { font-family: var(--num); color: var(--lime); font-size: 13px; font-weight: 800; }
.rail h3, .fav-card h3 { margin: 8px 0; }
.rail p, .fav-card p, .pick p, .qa p, .faq-card p, .news-side p, .news-feature p, .res-row p, .guard p, .mile p, .panel li, .rank-item p { color: var(--muted); font-size: 14px; line-height: 1.7; }
.qindex { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.qindex a { border: 1px dashed var(--line-strong); border-radius: 999px; padding: 8px 12px; color: var(--ink-soft); font-size: 14px; }
.qindex a:hover { border-color: var(--magenta); color: var(--magenta); }
.empty { margin-top: 12px; color: var(--magenta); font-size: 14px; }
.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.metric { background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 16px; min-height: 156px; }
.metric b { display: block; font-family: var(--num); font-size: 42px; line-height: 1; color: var(--lime); }
.metric span { display: block; margin-top: 8px; font-weight: 700; }
.metric small { display: block; margin-top: 6px; color: var(--muted); font-size: 13px; line-height: 1.65; }
.bento { display: grid; grid-template-columns: 1.35fr 1fr 1fr; grid-template-rows: auto auto; gap: 14px; }
.tile { display: flex; flex-direction: column; justify-content: space-between; min-height: 168px; padding: 18px; border-radius: var(--radius); background: var(--bg-3); border: 1px solid var(--line); transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; }
.tile:hover { transform: translateY(-3px); border-color: var(--lime); box-shadow: var(--shadow); }
.tile.big { grid-row: 1 / span 2; background: linear-gradient(200deg, rgba(7, 8, 13, 0.2), rgba(7, 8, 13, 0.82)), url("/assets/images/364a6b11d5aa5b1b.png") center / cover no-repeat; }
.tile strong { display: block; margin-top: 10px; font-size: 20px; }
.tile span { color: var(--muted); font-size: 14px; line-height: 1.7; margin-top: 8px; }
.tile em { font-style: normal; color: var(--lime); font-size: 13px; font-weight: 700; margin-top: 16px; }
.defs { display: grid; grid-template-columns: 1fr 1fr; }
.def { display: grid; grid-template-columns: 52px 1fr; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.def b { font-family: var(--num); color: var(--magenta); font-size: 20px; }
.def h3 { font-size: 16px; }
.pick-list { display: flex; flex-direction: column; gap: 14px; }
.pick { display: grid; grid-template-columns: 210px 1fr; gap: 16px; padding: 12px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); }
.pick:hover, .news-side article:hover, .rank-item:hover { border-color: var(--line-strong); }
.pick img, .news-feature img, .res-visual img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 10; border-radius: var(--radius-sm); }
.pick-body { padding: 6px 6px 6px 0; }
.pick-top, .row-top { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pick h3, .rank-item h3, .news-feature h3 { margin: 8px 0; }
.updates {
  background:
    linear-gradient(180deg, rgba(7, 8, 13, 0.92), rgba(16, 19, 27, 0.94)),
    url("/assets/images/06ee3553107ff329.jpg") center / cover no-repeat;
}
.tl { margin-left: 8px; border-left: 2px solid var(--line-strong); display: flex; flex-direction: column; }
.tl li { position: relative; padding: 2px 0 18px 22px; }
.tl li::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--lime); position: absolute; left: -7px; top: 8px; box-shadow: 0 0 0 4px rgba(223, 242, 90, 0.15); }
.tl time { display: block; color: var(--cyan); font-size: 13px; font-weight: 700; }
.tl p { color: var(--muted); font-size: 14px; }
.rank-list { counter-reset: hot; display: flex; flex-direction: column; gap: 10px; }
.rank-item { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; padding: 14px; border-radius: var(--radius-sm); background: var(--bg-3); border: 1px solid var(--line); }
.rank-item::before { counter-increment: hot; content: counter(hot, decimal-leading-zero); font-family: var(--num); font-size: 28px; color: var(--lime); line-height: 1; }
.bar { display: block; height: 6px; border-radius: 99px; background: rgba(246, 243, 236, 0.08); margin-top: 8px; overflow: hidden; }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--magenta), var(--lime)); }
.lv5 { width: 92%; } .lv4 { width: 80%; } .lv3 { width: 68%; } .lv2 { width: 56%; } .lv1 { width: 44%; }
.compare { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: stretch; }
.panel { background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.panel ul { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.panel li { padding-left: 16px; position: relative; color: var(--ink-soft); }
.panel li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--lime); position: absolute; left: 0; top: 0.55em; }
.vs { align-self: center; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--magenta); color: #2a0b14; font-weight: 800; }
.verdict { margin-top: 14px; padding: 14px 16px; border-radius: var(--radius-sm); background: rgba(223, 242, 90, 0.1); color: var(--lime-2); }
.miles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.mile { position: relative; padding: 28px 12px 8px; border-top: 2px solid var(--line-strong); }
.mile::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--bg); border: 3px solid var(--lime); position: absolute; left: 0; top: -7px; }
.mile strong { display: block; margin-bottom: 6px; }
.res-layout { display: grid; grid-template-columns: 280px 1fr; gap: 18px; }
.res-visual { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--bg-3); }
.res-visual img { aspect-ratio: auto; min-height: 320px; }
.res-row { display: grid; grid-template-columns: 72px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.res-row b { color: var(--cyan); font-size: 13px; }
.news-wrap { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 16px; }
.news-feature { background: var(--bg-3); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.news-feature div { padding: 16px; }
.news-side { display: flex; flex-direction: column; gap: 10px; }
.news-side article, .more-link { background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px; }
.news-side h3 { font-size: 16px; margin-bottom: 4px; }
.more-link { display: flex; align-items: center; justify-content: space-between; color: var(--lime); font-weight: 700; }
.more-link:hover { border-color: var(--lime); }
.band { background: linear-gradient(90deg, rgba(7, 8, 13, 0.92), rgba(7, 8, 13, 0.76)), url("/assets/images/13fd8c838d89cc94.jpg") center / cover no-repeat; }
.guard { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.guard article { background: rgba(7, 8, 13, 0.66); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; min-height: 168px; }
.guard i { color: var(--lime); font-size: 18px; }
.guard h3 { margin: 10px 0 6px; font-size: 16px; }
.qa-list { display: flex; flex-direction: column; gap: 12px; }
.qa { display: grid; grid-template-columns: 92px 1fr; gap: 12px; padding: 16px 18px; border-radius: var(--radius-sm); background: var(--bg-2); border-left: 4px solid var(--magenta); }
.qa b { color: var(--magenta); font-family: var(--num); }
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.faq-card { background: var(--bg-3); border: 1px solid var(--line); border-top: 3px solid var(--lime); border-radius: 0 0 var(--radius-sm) var(--radius-sm); padding: 16px 16px 14px; }
.faq-card h3 { margin-bottom: 8px; font-size: 17px; }
.fav-card { min-width: 270px; max-width: 300px; background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.fav-card.is-on { border-color: var(--lime); }
.fav-btn { margin-top: 12px; background: transparent; border-color: var(--line-strong); min-height: 38px; padding: 0 14px; }
.fav-btn:hover { border-color: var(--lime); color: var(--lime); }
.fav-card.is-on .fav-btn { background: var(--lime); color: var(--lime-deep); border-color: var(--lime); }
.remind { background: linear-gradient(180deg, rgba(16, 19, 27, 0.94), rgba(16, 19, 27, 0.94)), url("/assets/images/ead17d3708ab2097.png") center / cover no-repeat; }
.form { max-width: 760px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field span { font-size: 13px; color: var(--muted); }
input, select, textarea { width: 100%; background: #0c0f16; border: 1px solid var(--line-strong); border-radius: 12px; padding: 12px; outline: none; }
textarea { min-height: 96px; resize: vertical; }
.form .btn { justify-self: start; }
.status { min-height: 1.5em; color: var(--lime-2); font-size: 14px; }
.site-footer { border-top: 1px solid var(--line); padding: 36px 0 28px; background: #08090e; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 20px; }
.site-footer strong { font-size: 18px; }
.site-footer p, .site-footer a { color: var(--muted); font-size: 14px; }
.site-footer a { display: block; padding: 4px 0; }
.site-footer a:hover { color: var(--lime); }
.copyright { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--faint); font-size: 13px; }
.is-hide { display: none !important; }
@media (max-width: 1024px) {
  .metric-grid, .guard, .faq-grid { grid-template-columns: 1fr 1fr; }
  .bento { grid-template-columns: 1fr 1fr; }
  .tile.big { grid-row: auto; grid-column: 1 / -1; min-height: 220px; }
  .news-wrap, .res-layout, .footer-grid, .compare { grid-template-columns: 1fr; }
  .miles { grid-template-columns: 1fr 1fr; }
  .vs { justify-self: center; }
  .res-visual img { min-height: 0; height: auto; aspect-ratio: 16 / 9; }
}
@media (max-width: 768px) {
  :root { --space: 48px; --header: 64px; }
  .nav-toggle { display: inline-flex; }
  .nav-list { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; padding: 10px; background: rgba(10, 12, 18, 0.98); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
  .nav-list.is-open { display: flex; }
  .nav-list a { width: 100%; }
  .pick, .qa, .res-row, .rank-item, .defs, .form, .metric-grid, .guard, .miles, .faq-grid { grid-template-columns: 1fr; }
  .hero { padding: 52px 0 46px; }
  .search { border-radius: 18px; flex-wrap: wrap; }
  .search .btn, .search label { width: auto; }
  .search .btn { margin-left: auto; }
}
@media (max-width: 520px) {
  .container { width: min(1120px, calc(100% - 28px)); }
  h1 { font-size: 28px; }
  .logo small { display: none; }
  .hero-actions, .hero-actions .btn, .search .btn { width: 100%; }
  .entry-tools { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

/* roulang page: category1 */
:root {
 --bg: #07080d;
 --bg-2: #10131b;
 --bg-3: #171b26;
 --ink: #f6f3ec;
 --ink-soft: #e4ddd0;
 --muted: #b7b1a6;
 --faint: #8d877c;
 --line: rgba(246, 243, 236, 0.12);
 --line-strong: rgba(246, 243, 236, 0.22);
 --lime: #dff25a;
 --lime-2: #edf7a4;
 --lime-deep: #15180c;
 --magenta: #ff6b8a;
 --cyan: #8ee7ff;
 --shadow: 0 18px 50px rgba(0, 0, 0, 0.38);
 --radius: 18px;
 --radius-sm: 12px;
 --header: 72px;
 --space: 72px;
 --font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
 --num: "Bahnschrift", "DIN Alternate", "Segoe UI", sans-serif;
}
/* roulang page: saichengjieshuo */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
 margin: 0;
 background: var(--bg);
 color: var(--ink);
 font-family: var(--font);
 font-size: 16px;
 line-height: 1.75;
 text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
p, h1, h2, h3 { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.container { width: min(1120px, calc(100% - 40px)); margin: 0 auto; }
.section { padding: var(--space) 0; }
.section-alt { background: var(--bg-2); }
.section-soft { background: linear-gradient(180deg, #0c0f16, #10131b); }
.eyebrow {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 color: var(--lime);
 font-size: 13px;
 letter-spacing: 0.08em;
 font-weight: 700;
}
.lead { margin-top: 12px; color: var(--ink-soft); font-size: 16px; line-height: 1.85; max-width: 760px; }
.section-head { max-width: 760px; margin-bottom: 28px; }
.section-head h2, .cat-hero h1 {
 letter-spacing: -0.03em;
}
h1 { font-size: clamp(32px, 4.6vw, 52px); line-height: 1.18; }
h2 { font-size: clamp(26px, 3vw, 36px); line-height: 1.28; }
h3 { font-size: 18px; line-height: 1.45; }
.site-header {
 position: sticky;
 top: 0;
 z-index: 40;
 height: var(--header);
 background: rgba(7, 8, 13, 0.84);
 backdrop-filter: blur(16px);
 border-bottom: 1px solid var(--line);
}
.header-inner {
 position: relative;
 height: var(--header);
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 16px;
}
.logo { display: flex; align-items: center; gap: 10px; min-width: 0; }
.logo-mark {
 width: 42px;
 height: 42px;
 border-radius: 13px;
 display: grid;
 place-items: center;
 background: var(--lime);
 color: var(--lime-deep);
 font-family: var(--num);
 font-weight: 800;
}
.logo strong { display: block; font-size: 16px; line-height: 1.2; }
.logo small { display: block; color: var(--muted); font-size: 12px; }
.nav-list { display: flex; align-items: center; gap: 6px; }
.nav-list a {
 display: inline-flex;
 align-items: center;
 min-height: 40px;
 padding: 0 14px;
 border-radius: 999px;
 color: var(--ink-soft);
 transition: background 0.2s ease, color 0.2s ease;
}
.nav-list a:hover { background: rgba(223, 242, 90, 0.1); color: var(--lime-2); }
.nav-list a[aria-current="page"] { background: rgba(223, 242, 90, 0.16); color: var(--lime); }
.nav-toggle {
 display: none;
 border: 1px solid var(--line-strong);
 background: var(--bg-3);
 color: var(--ink);
 border-radius: 999px;
 min-height: 40px;
 padding: 0 14px;
 gap: 8px;
 align-items: center;
}
.nav-toggle:focus-visible, .nav-list a:focus-visible, .btn:focus-visible, .chip:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
 outline: 2px solid var(--cyan);
 outline-offset: 3px;
}
.num, .rank, .seq-no, .board-time, .logo-mark, .meter-label strong { font-family: var(--num); }
.cat-hero {
 position: relative;
 padding: 56px 0 52px;
 background:
 linear-gradient(100deg, rgba(7, 8, 13, 0.94) 0%, rgba(7, 8, 13, 0.82) 46%, rgba(7, 8, 13, 0.62) 100%),
 url("/assets/images/06ee3553107ff329.jpg") center 40% / cover no-repeat;
 border-bottom: 1px solid var(--line);
}
.hero-grid {
 display: grid;
 grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
 gap: 28px;
 align-items: center;
}
.brand-kicker {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 padding: 6px 12px;
 border-radius: 999px;
 border: 1px solid var(--line-strong);
 background: rgba(7, 8, 13, 0.5);
 color: var(--lime-2);
 font-size: 13px;
 font-weight: 700;
}
.cat-hero h1 { margin-top: 16px; max-width: 11em; }
.hero-actions { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px; }
.chip, .btn {
 border: 1px solid transparent;
 border-radius: 999px;
 transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 min-height: 44px;
 padding: 0 18px;
 font-weight: 700;
}
.btn-primary { background: var(--lime); color: var(--lime-deep); }
.btn-primary:hover { background: var(--lime-2); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }
.btn-ghost { background: transparent; border-color: var(--line-strong); color: var(--ink); }
.btn-ghost:hover { border-color: var(--lime); color: var(--lime); }
.count-pill, .badge {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 min-height: 28px;
 padding: 0 10px;
 border-radius: 999px;
 font-size: 12px;
 font-weight: 700;
}
.count-pill { background: rgba(142, 231, 255, 0.12); color: var(--cyan); }
.badge { background: rgba(223, 242, 90, 0.14); color: var(--lime); }
.badge-hot { background: rgba(255, 107, 138, 0.16); color: var(--magenta); }
.badge-cyan { background: rgba(142, 231, 255, 0.12); color: var(--cyan); }
.tag-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.board {
 background: rgba(16, 19, 27, 0.9);
 border: 1px solid var(--line-strong);
 border-radius: var(--radius);
 box-shadow: var(--shadow);
 overflow: hidden;
}
.board-cover { position: relative; height: 148px; }
.board-cover img { width: 100%; height: 148px; object-fit: cover; }
.board-cover span {
 position: absolute;
 left: 12px;
 bottom: 12px;
}
.board-body { padding: 14px; display: grid; gap: 10px; }
.board-head { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.board-row {
 display: grid;
 grid-template-columns: 72px 16px 1fr;
 gap: 10px;
 align-items: center;
 padding: 10px 8px;
 border-radius: var(--radius-sm);
 background: rgba(246, 243, 236, 0.04);
}
.board-time { font-weight: 800; color: var(--lime-2); }
.board-row p { color: var(--muted); font-size: 13px; }
.dot, .dot-wait {
 width: 8px;
 height: 8px;
 border-radius: 50%;
 background: var(--lime);
 box-shadow: 0 0 0 4px rgba(223, 242, 90, 0.15);
}
.dot-wait { background: var(--cyan); box-shadow: 0 0 0 4px rgba(142, 231, 255, 0.14); }
.seq {
 display: grid;
 grid-template-columns: repeat(4, minmax(0, 1fr));
 gap: 14px;
}
.seq-card, .lane-card, .day, .mini, .faq-card, .compare-col {
 background: rgba(246, 243, 236, 0.03);
 border: 1px solid var(--line);
 border-radius: var(--radius);
 transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.seq-card { padding: 16px; min-height: 230px; display: flex; flex-direction: column; gap: 8px; }
.seq-card:hover, .lane-card:hover, .day:hover, .mini:hover, .heat-item:hover, .faq-card:hover {
 transform: translateY(-2px);
 border-color: var(--line-strong);
 box-shadow: var(--shadow);
}
.seq-no { color: var(--lime); font-size: 22px; font-weight: 800; }
.seq-card p, .lane-card p, .mini p, .heat-copy p, .faq-card p, .split-copy p, .compare-col p { color: var(--muted); }
.meter-label {
 display: flex;
 justify-content: space-between;
 color: var(--faint);
 font-size: 12px;
 margin-top: auto;
}
.meter-label strong { color: var(--ink); font-size: 14px; }
.meter {
 height: 8px;
 border-radius: 999px;
 background: rgba(246, 243, 236, 0.08);
 overflow: hidden;
}
.meter span {
 display: block;
 height: 100%;
 border-radius: inherit;
 background: linear-gradient(90deg, var(--lime), var(--cyan));
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips-left { justify-content: flex-start; margin: 0 0 16px; }
.chip {
 background: rgba(246, 243, 236, 0.06);
 border-color: var(--line);
 color: var(--ink-soft);
 min-height: 36px;
 padding: 0 12px;
}
.chip:hover, .chip.is-on { background: var(--lime); color: var(--lime-deep); border-color: var(--lime); }
.heat-list { display: grid; gap: 12px; }
.heat-item {
 display: grid;
 grid-template-columns: 52px 120px minmax(0, 1fr);
 gap: 14px;
 align-items: center;
 padding: 12px;
 border: 1px solid var(--line);
 border-radius: var(--radius);
 background: rgba(7, 8, 13, 0.35);
}
.rank { font-size: 24px; font-weight: 800; color: var(--lime); text-align: center; }
.thumb { width: 120px; height: 84px; object-fit: cover; border-radius: 14px; }
.heat-top, .mini-top, .day-top {
 display: flex;
 justify-content: space-between;
 gap: 10px;
 align-items: center;
}
.heat-copy p { margin-top: 4px; }
.heat-copy .meter { margin-top: 8px; }
.lane-layout {
 display: grid;
 grid-template-columns: minmax(240px, 0.78fr) minmax(0, 1.22fr);
 gap: 18px;
 align-items: stretch;
}
.lane-visual img {
 width: 100%;
 height: 100%;
 min-height: 360px;
 object-fit: cover;
 border-radius: var(--radius);
 border: 1px solid var(--line);
}
.lane-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lane-card { padding: 16px; }
.lane-card b {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 color: var(--cyan);
 font-size: 13px;
 margin-bottom: 8px;
}
.lane-card h3 { margin-bottom: 6px; }
.cal-scroll { overflow-x: auto; padding-bottom: 6px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(148px, 1fr)); gap: 10px; }
.day { padding: 14px; min-height: 168px; }
.day.is-peak { background: rgba(223, 242, 90, 0.08); border-color: rgba(223, 242, 90, 0.35); }
.day em { display: block; margin-top: 10px; color: var(--lime-2); font-style: normal; font-family: var(--num); font-weight: 800; }
.day p { color: var(--muted); font-size: 14px; margin-top: 6px; }
.split {
 display: grid;
 grid-template-columns: minmax(0, 1.15fr) minmax(260px, 0.85fr);
 gap: 18px;
}
.feature-main {
 position: relative;
 min-height: 420px;
 border-radius: var(--radius);
 overflow: hidden;
 border: 1px solid var(--line);
}
.feature-main img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.feature-main .split-copy {
 position: relative;
 z-index: 1;
 height: 100%;
 display: flex;
 flex-direction: column;
 justify-content: flex-end;
 padding: 22px;
 background: linear-gradient(180deg, rgba(7, 8, 13, 0.05), rgba(7, 8, 13, 0.92));
}
.side-stack { display: grid; gap: 12px; }
.mini { display: grid; grid-template-columns: 92px 1fr; gap: 12px; padding: 10px; align-items: center; }
.mini img { width: 92px; height: 72px; object-fit: cover; border-radius: 12px; }
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.compare-col { padding: 22px; }
.compare-col h3 { margin: 10px 0; }
.compare-col li {
 position: relative;
 padding-left: 16px;
 margin: 10px 0;
 color: var(--ink-soft);
}
.compare-col li::before {
 content: "";
 width: 7px;
 height: 7px;
 border-radius: 50%;
 background: var(--lime);
 position: absolute;
 left: 0;
 top: 0.65em;
}
.compare-col:last-child li::before { background: var(--magenta); }
.faq-list { display: grid; gap: 12px; }
.faq-card { padding: 18px 18px 18px 20px; border-left: 3px solid var(--lime); }
.faq-card h3 { margin-bottom: 6px; }
.remind {
 position: relative;
 background:
 linear-gradient(100deg, rgba(7, 8, 13, 0.92), rgba(7, 8, 13, 0.78)),
 url("/assets/images/dcd23e123b181783.png") center / cover no-repeat;
}
.remind-box {
 display: grid;
 grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
 gap: 24px;
 align-items: center;
 padding: 8px 0;
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field span { color: var(--muted); font-size: 13px; }
.field input, .field select {
 width: 100%;
 background: rgba(7, 8, 13, 0.72);
 border: 1px solid var(--line-strong);
 border-radius: 12px;
 min-height: 46px;
 padding: 0 12px;
}
.field select option { color: #17140f; }
.form-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 4px; }
.form-note { color: var(--lime-2); font-weight: 700; }
.site-footer {
 background: #05060a;
 border-top: 1px solid var(--line);
 padding: 42px 0 22px;
}
.footer-grid { display: grid; grid-template-columns: 1.4fr 0.7fr 0.7fr; gap: 28px; }
.footer-grid strong { display: block; margin-bottom: 10px; }
.footer-grid a, .footer-grid p { display: block; color: var(--muted); margin: 6px 0; }
.footer-grid a:hover { color: var(--lime); }
.copyright {
 margin-top: 26px;
 padding-top: 16px;
 border-top: 1px solid var(--line);
 color: var(--faint);
 font-size: 13px;
}
@media (max-width: 1024px) {
 .hero-grid, .lane-layout, .split, .remind-box { grid-template-columns: 1fr; }
 .seq { grid-template-columns: 1fr 1fr; }
 .lane-visual img, .feature-main { min-height: 280px; }
 .feature-main { min-height: 360px; }
}
@media (max-width: 768px) {
 :root { --space: 52px; }
 .nav-toggle { display: inline-flex; }
 .site-header nav { position: absolute; left: 0; right: 0; top: calc(var(--header) - 8px); z-index: 50; }
 .nav-list {
 display: none;
 flex-direction: column;
 align-items: stretch;
 padding: 10px;
 background: rgba(16, 19, 27, 0.98);
 border: 1px solid var(--line);
 border-radius: var(--radius);
 box-shadow: var(--shadow);
 }
 .nav-list.is-open { display: flex; }
 .compare, .form-grid, .footer-grid, .lane-grid { grid-template-columns: 1fr; }
 .heat-item { grid-template-columns: 42px 1fr; }
 .thumb { display: none; }
}
@media (max-width: 520px) {
 .container { width: min(1120px, calc(100% - 28px)); }
 .seq, .mini { grid-template-columns: 1fr; }
 .hero-actions .btn, .form-actions .btn { width: 100%; }
 .board-row { grid-template-columns: 64px 12px 1fr; }
 h1 { max-width: none; }
 .cat-hero h1 { max-width: none; }
}