/* roulang page: index */
:root {
      --ink: #111315;
      --graphite: #1b1e20;
      --coal: #262a2c;
      --paper: #f3f1eb;
      --white: #fffdf8;
      --muted: #9da19c;
      --line: rgba(255,255,255,.13);
      --dark-line: rgba(17,19,21,.14);
      --yellow: #f4c542;
      --yellow-deep: #d9a900;
      --cyan: #9db9b4;
      --radius: 4px;
      --shadow: 0 16px 36px rgba(0,0,0,.14);
    }
    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--ink);
      background: var(--paper);
      font-family: "PingFang SC","Microsoft YaHei","Noto Sans SC",Arial,sans-serif;
      line-height: 1.7;
      letter-spacing: 0;
    }
    a { color: inherit; text-decoration: none; }
    img { display: block; width: 100%; }
    button, input, select { font: inherit; }
    button { cursor: pointer; }
    ::selection { color: var(--ink); background: var(--yellow); }
    :focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
    .container { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
    .site-header {
      position: sticky; top: 0; z-index: 50;
      background: rgba(17,19,21,.96);
      border-bottom: 1px solid var(--line);
      backdrop-filter: blur(12px);
    }
    .nav-shell { min-height: 76px; display:flex; align-items:center; justify-content:space-between; gap:28px; }
    .brand { display:flex; align-items:center; gap:12px; color:var(--white); font-size:18px; font-weight:800; white-space:nowrap; }
    .brand-mark { width:30px; height:30px; display:grid; place-items:center; color:var(--ink); background:var(--yellow); font-weight:900; border-radius:2px; }
    .desktop-nav { display:flex; align-items:center; gap:26px; color:#c9ccc6; font-size:14px; }
    .desktop-nav a { position:relative; padding:25px 0; transition:color .2s ease; }
    .desktop-nav a::after { content:""; position:absolute; left:0; right:100%; bottom:17px; height:2px; background:var(--yellow); transition:right .2s ease; }
    .desktop-nav a:hover, .desktop-nav a.active { color:var(--white); }
    .desktop-nav a:hover::after, .desktop-nav a.active::after { right:0; }
    .nav-action { display:inline-flex; align-items:center; gap:8px; padding:10px 14px; background:var(--yellow); color:var(--ink); font-size:13px; font-weight:800; border-radius:2px; transition:transform .2s, background .2s; }
    .nav-action:hover { background:#ffda62; transform:translateY(-2px); }
    .menu-button { display:none; color:var(--white); border:1px solid var(--line); background:transparent; padding:9px 12px; border-radius:2px; }
    .mobile-panel { display:none; background:var(--graphite); border-top:1px solid var(--line); }
    .mobile-panel a { display:block; color:#dce0d9; padding:14px 20px; border-bottom:1px solid var(--line); }
    .hero { position:relative; min-height:650px; color:var(--white); overflow:hidden; background:var(--ink); }
    .hero-image { position:absolute; inset:0; background-image:linear-gradient(90deg,rgba(17,19,21,.97) 0%,rgba(17,19,21,.78) 42%,rgba(17,19,21,.25) 100%), url('https://images.unsplash.com/photo-1485846234645-a62644f84728?auto=format&fit=crop&w=2000&q=88'); background-position:center; background-size:cover; }
    .hero::after { content:""; position:absolute; right:-8%; top:0; width:40%; height:100%; background:var(--yellow); clip-path:polygon(32% 0,100% 0,100% 100%,0 100%); opacity:.9; mix-blend-mode:screen; }
    .hero-content { position:relative; z-index:1; min-height:650px; display:flex; align-items:center; padding:90px 0 120px; }
    .hero-copy { max-width:700px; }
    .eyebrow { display:flex; align-items:center; gap:12px; color:var(--yellow); font-size:12px; font-weight:800; letter-spacing:1px; text-transform:uppercase; }
    .eyebrow::before { content:""; width:34px; height:2px; background:var(--yellow); }
    h1,h2,h3,p { margin-top:0; }
    h1 { margin:18px 0 22px; max-width:720px; font-size:clamp(42px,6vw,78px); line-height:1.1; font-weight:900; }
    .hero-copy > p { max-width:650px; color:#d6d9d3; font-size:17px; }
    .hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }
    .btn { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:46px; padding:0 18px; border:1px solid transparent; border-radius:2px; font-size:14px; font-weight:800; transition:transform .2s, background .2s, border-color .2s; }
    .btn-primary { color:var(--ink); background:var(--yellow); }
    .btn-primary:hover { background:#ffda62; transform:translateY(-2px); }
    .btn-ghost { color:var(--white); border-color:rgba(255,255,255,.35); background:rgba(17,19,21,.25); }
    .btn-ghost:hover { border-color:var(--yellow); color:var(--yellow); transform:translateY(-2px); }
    .hero-strip { position:absolute; z-index:2; bottom:0; left:0; right:0; background:rgba(17,19,21,.86); border-top:1px solid var(--line); }
    .hero-strip-inner { display:grid; grid-template-columns:repeat(4,1fr); }
    .hero-metric { padding:16px 20px; border-right:1px solid var(--line); }
    .hero-metric:last-child { border-right:0; }
    .hero-metric strong { display:block; color:var(--yellow); font-size:23px; line-height:1.2; }
    .hero-metric span { color:#b8beb7; font-size:12px; }
    section { padding:92px 0; }
    .section-dark { color:var(--white); background:var(--graphite); }
    .section-ink { color:var(--white); background:var(--ink); }
    .section-head { display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:32px; }
    .section-head h2 { margin-bottom:0; font-size:clamp(27px,3vw,42px); line-height:1.2; font-weight:900; }
    .section-head p { max-width:560px; margin-bottom:0; color:#737872; font-size:14px; }
    .section-dark .section-head p, .section-ink .section-head p { color:#a9afa8; }
    .section-number { display:block; margin-bottom:8px; color:var(--yellow-deep); font-size:12px; font-weight:900; letter-spacing:1px; }
    .search-band { margin-top:-1px; padding:28px 0; background:var(--white); border-bottom:1px solid var(--dark-line); }
    .filter-bar { display:grid; grid-template-columns:1.6fr repeat(4,1fr) auto; gap:10px; }
    .field { min-width:0; }
    .field input, .field select { width:100%; height:46px; padding:0 13px; color:var(--ink); background:var(--paper); border:1px solid var(--dark-line); border-radius:2px; outline:none; }
    .field input:focus, .field select:focus { border-color:var(--yellow-deep); box-shadow:0 0 0 3px rgba(244,197,66,.22); }
    .filter-button { height:46px; padding:0 17px; border:0; color:var(--ink); background:var(--yellow); font-weight:800; border-radius:2px; }
    .filter-button:hover { background:var(--yellow-deep); }
    .update-layout { display:grid; grid-template-columns:1.35fr .65fr; gap:48px; align-items:start; }
    .update-list { border-top:1px solid var(--dark-line); }
    .update-item { display:grid; grid-template-columns:116px 1fr auto; gap:18px; align-items:center; padding:18px 0; border-bottom:1px solid var(--dark-line); }
    .poster { aspect-ratio:16/10; overflow:hidden; background:#d7d3c8; border-radius:2px; }
    .poster img { height:100%; object-fit:cover; transition:transform .45s ease; }
    .poster:hover img, .content-card:hover img { transform:scale(1.06); }
    .update-item h3 { margin:0 0 6px; font-size:17px; }
    .meta { display:flex; flex-wrap:wrap; gap:8px 14px; color:#777c76; font-size:12px; }
    .section-dark .meta, .section-ink .meta { color:#aab0aa; }
    .tag { display:inline-flex; align-items:center; min-height:24px; padding:0 8px; color:#5f5a41; background:#f8e8a9; border-radius:2px; font-size:11px; font-weight:800; }
    .status { color:#968014; font-size:12px; font-weight:800; }
    .status.done { color:#718c86; }
    .mini-link { color:var(--ink); font-size:12px; font-weight:800; border-bottom:1px solid var(--yellow-deep); }
    .rank-panel { padding:24px; color:var(--white); background:var(--graphite); border-left:4px solid var(--yellow); }
    .rank-panel h3 { margin-bottom:18px; font-size:20px; }
    .rank-row { display:flex; gap:14px; align-items:center; padding:15px 0; border-bottom:1px solid var(--line); }
    .rank-row:last-child { border-bottom:0; }
    .rank-no { color:var(--yellow); font-size:22px; font-weight:900; }
    .rank-row strong { display:block; font-size:14px; }
    .rank-row span { color:#a9afa8; font-size:12px; }
    .editorial-grid { display:grid; grid-template-columns:1.4fr .8fr .8fr; grid-template-rows:220px 220px; gap:14px; }
    .content-card { position:relative; overflow:hidden; min-height:180px; color:var(--white); background:var(--coal); border-radius:3px; }
    .content-card:first-child { grid-row:span 2; }
    .content-card img { position:absolute; inset:0; height:100%; object-fit:cover; opacity:.72; transition:transform .45s ease; }
    .content-card::after { content:""; position:absolute; inset:35% 0 0; background:linear-gradient(transparent,rgba(0,0,0,.9)); }
    .card-copy { position:absolute; z-index:1; left:20px; right:20px; bottom:17px; }
    .card-copy h3 { margin:7px 0 4px; font-size:22px; line-height:1.25; }
    .small-card .card-copy h3 { font-size:16px; }
    .card-copy p { margin:0; color:#d6d9d3; font-size:12px; }
    .category-grid { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--dark-line); border-left:1px solid var(--dark-line); }
    .category-item { min-height:150px; padding:22px; border-right:1px solid var(--dark-line); border-bottom:1px solid var(--dark-line); transition:background .2s, transform .2s; }
    .category-item:hover { background:#e8e5dc; transform:translateY(-2px); }
    .category-item strong { display:block; margin-bottom:10px; font-size:20px; }
    .category-item span { display:block; color:#747a73; font-size:13px; }
    .category-item em { display:block; margin-top:18px; color:var(--yellow-deep); font-size:12px; font-style:normal; font-weight:800; }
    .progress-layout { display:grid; grid-template-columns:.85fr 1.15fr; gap:48px; align-items:center; }
    .progress-note { padding-left:24px; border-left:3px solid var(--yellow); }
    .progress-note h3 { margin-bottom:12px; font-size:24px; }
    .progress-note p { color:#a9afa8; font-size:14px; }
    .record-list { border-top:1px solid var(--line); }
    .record-item { display:grid; grid-template-columns:74px 1fr auto; align-items:center; gap:15px; padding:16px 0; border-bottom:1px solid var(--line); }
    .record-item .poster { aspect-ratio:1/1.2; }
    .record-item h3 { margin:0 0 5px; font-size:15px; }
    .progress-track { height:5px; margin-top:8px; overflow:hidden; background:#3b4040; border-radius:1px; }
    .progress-value { height:100%; background:var(--yellow); }
    .record-state { color:var(--yellow); font-size:12px; white-space:nowrap; }
    .steps { display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
    .step { position:relative; min-height:180px; padding:25px 22px; border-right:1px solid var(--line); }
    .step:last-child { border-right:0; }
    .step-no { display:block; color:var(--yellow); font-size:28px; line-height:1; font-weight:900; }
    .step h3 { margin:26px 0 8px; font-size:17px; }
    .step p { margin:0; color:#a9afa8; font-size:13px; }
    .stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--line); border-left:1px solid var(--line); }
    .stat { padding:28px 24px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
    .stat strong { display:block; color:var(--yellow); font-size:42px; line-height:1; font-weight:900; }
    .stat span { display:block; margin-top:12px; color:#b9beb8; font-size:13px; }
    .stat small { display:block; margin-top:18px; color:#84928d; font-size:11px; }
    .feedback-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
    .feedback { padding:24px; background:var(--white); border:1px solid var(--dark-line); border-radius:3px; }
    .feedback blockquote { margin:0 0 22px; font-size:16px; line-height:1.8; }
    .feedback footer { display:flex; justify-content:space-between; align-items:center; color:#737872; font-size:12px; }
    .feedback .stars { color:var(--yellow-deep); letter-spacing:2px; }
    .audience-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
    .audience-item { padding:23px 18px; color:var(--white); background:var(--coal); border-bottom:3px solid transparent; transition:border-color .2s, transform .2s; }
    .audience-item:hover { border-color:var(--yellow); transform:translateY(-3px); }
    .audience-item strong { display:block; margin-bottom:8px; font-size:15px; }
    .audience-item span { color:#a9afa8; font-size:12px; }
    .news-layout { display:grid; grid-template-columns:1.15fr .85fr; gap:42px; }
    .news-list { border-top:1px solid var(--dark-line); }
    .news-item { display:flex; justify-content:space-between; gap:25px; padding:18px 0; border-bottom:1px solid var(--dark-line); }
    .news-item strong { display:block; margin-bottom:4px; font-size:15px; }
    .news-item span { color:#777c76; font-size:12px; }
    .news-date { color:var(--yellow-deep); font-size:12px; white-space:nowrap; }
    .info-panel { padding:27px; color:var(--white); background:var(--graphite); border-top:4px solid var(--yellow); }
    .info-panel h3 { margin-bottom:14px; font-size:22px; }
    .info-panel p { margin-bottom:18px; color:#b9beb8; font-size:13px; }
    .info-list { margin:0; padding:0; list-style:none; }
    .info-list li { padding:10px 0; color:#d9ddd7; border-top:1px solid var(--line); font-size:13px; }
    .info-list li::before { content:"＋"; margin-right:9px; color:var(--yellow); font-weight:900; }
    .compliance { padding:25px 0; background:#e5e2d8; border-top:1px solid var(--dark-line); border-bottom:1px solid var(--dark-line); }
    .compliance-inner { display:grid; grid-template-columns:auto 1fr auto; gap:22px; align-items:center; }
    .notice-icon { width:44px; height:44px; display:grid; place-items:center; color:var(--ink); background:var(--yellow); font-size:22px; font-weight:900; border-radius:50%; }
    .compliance h3 { margin:0 0 4px; font-size:17px; }
    .compliance p { margin:0; color:#666c65; font-size:13px; }
    .cta-section { padding:76px 0; color:var(--white); background:var(--ink); }
    .cta-inner { display:flex; justify-content:space-between; align-items:center; gap:30px; }
    .cta-inner h2 { max-width:650px; margin:0; font-size:clamp(28px,4vw,50px); line-height:1.2; }
    .site-footer { color:#aeb4ad; background:#0c0e0f; }
    .footer-main { display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:40px; padding:62px 0 45px; }
    .footer-brand { color:var(--white); font-size:20px; font-weight:900; }
    .footer-copy { max-width:280px; margin-top:15px; color:#7f8780; font-size:13px; }
    .footer-column h3 { margin:0 0 15px; color:var(--white); font-size:14px; }
    .footer-column a, .footer-column span { display:block; margin:9px 0; color:#89918a; font-size:13px; transition:color .2s; }
    .footer-column a:hover { color:var(--yellow); }
    .footer-bottom { display:flex; justify-content:space-between; gap:18px; padding:18px 0; border-top:1px solid rgba(255,255,255,.1); color:#69716a; font-size:12px; }
    .back-top { color:var(--yellow); }
    .empty-state { display:none; padding:26px; color:#777c76; text-align:center; border:1px dashed var(--dark-line); }
    .reveal { opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
    .reveal.is-visible { opacity:1; transform:none; }
    @media (max-width: 1024px) {
      .desktop-nav { gap:15px; }
      .nav-action { display:none; }
      .filter-bar { grid-template-columns:repeat(3,1fr); }
      .filter-bar .field:first-child { grid-column:span 3; }
      .update-layout, .progress-layout, .news-layout { grid-template-columns:1fr; gap:30px; }
      .audience-grid { grid-template-columns:repeat(3,1fr); }
      .footer-main { grid-template-columns:repeat(2,1fr); }
    }
    @media (max-width: 768px) {
      .container { width:min(100% - 30px, 620px); }
      .nav-shell { min-height:64px; }
      .brand { font-size:15px; }
      .desktop-nav { display:none; }
      .menu-button { display:block; }
      .mobile-panel.open { display:block; }
      .hero { min-height:640px; }
      .hero-content { min-height:640px; padding:70px 0 145px; align-items:flex-start; }
      h1 { font-size:46px; }
      .hero-copy > p { font-size:15px; }
      .hero-strip-inner { grid-template-columns:repeat(2,1fr); }
      .hero-metric { padding:12px 15px; }
      .hero-metric:nth-child(2) { border-right:0; }
      .hero-metric:nth-child(-n+2) { border-bottom:1px solid var(--line); }
      section { padding:65px 0; }
      .section-head { display:block; }
      .section-head p { margin-top:13px; }
      .filter-bar { grid-template-columns:1fr 1fr; }
      .filter-bar .field:first-child { grid-column:span 2; }
      .filter-button { grid-column:span 2; }
      .update-item { grid-template-columns:90px 1fr; }
      .update-item .mini-link { grid-column:2; justify-self:start; }
      .editorial-grid { grid-template-columns:1fr 1fr; grid-template-rows:190px 190px 190px; }
      .content-card:first-child { grid-column:span 2; grid-row:span 1; }
      .category-grid { grid-template-columns:repeat(2,1fr); }
      .steps { grid-template-columns:repeat(2,1fr); }
      .step:nth-child(2) { border-right:0; }
      .step:nth-child(-n+2) { border-bottom:1px solid var(--line); }
      .stats-grid { grid-template-columns:repeat(2,1fr); }
      .feedback-grid { grid-template-columns:1fr; }
      .audience-grid { grid-template-columns:repeat(2,1fr); }
      .compliance-inner { grid-template-columns:auto 1fr; }
      .compliance .btn { grid-column:span 2; justify-self:start; }
      .cta-inner { display:block; }
      .cta-inner .btn { margin-top:25px; }
    }
    @media (max-width: 520px) {
      .container { width:calc(100% - 28px); }
      .hero::after { width:58%; opacity:.55; }
      h1 { font-size:39px; }
      .hero-actions { display:grid; }
      .hero-actions .btn { width:100%; }
      .filter-bar { grid-template-columns:1fr; }
      .filter-bar .field:first-child, .filter-button { grid-column:auto; }
      .update-item { grid-template-columns:78px 1fr; gap:12px; }
      .update-item h3 { font-size:15px; }
      .editorial-grid { display:block; }
      .content-card { min-height:210px; margin-bottom:12px; }
      .category-grid, .steps, .stats-grid { grid-template-columns:1fr; }
      .step, .step:nth-child(2) { border-right:0; border-bottom:1px solid var(--line); }
      .step:last-child { border-bottom:0; }
      .audience-grid { grid-template-columns:1fr; }
      .news-item { display:block; }
      .news-date { display:block; margin-top:6px; }
      .footer-main { grid-template-columns:1fr; gap:24px; padding:45px 0 30px; }
      .footer-bottom { display:block; }
      .footer-bottom span { display:block; margin-bottom:8px; }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important; }
      .reveal { opacity:1; transform:none; }
    }

/* roulang page: category1 */
:root {
      --ink: #111315;
      --graphite: #1b1e20;
      --coal: #262a2c;
      --paper: #f3f1eb;
      --white: #fffdf8;
      --muted: #9da19c;
      --line: rgba(255,255,255,.13);
      --dark-line: rgba(17,19,21,.14);
      --yellow: #f4c542;
      --yellow-deep: #d9a900;
      --cyan: #9db9b4;
      --radius: 4px;
      --shadow: 0 16px 36px rgba(0,0,0,.14);
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; scroll-padding-top: 92px; }
    body {
      margin: 0;
      color: var(--ink);
      background: var(--paper);
      font-family: "PingFang SC","Microsoft YaHei","Noto Sans SC",Arial,sans-serif;
      line-height: 1.7;
      letter-spacing: 0;
    }
    a { color: inherit; text-decoration: none; }
    img { display: block; width: 100%; }
    button, input, select { font: inherit; }
    button { cursor: pointer; }
    :focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
    .container { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
    .site-header {
      position: sticky; top: 0; z-index: 50;
      background: rgba(17,19,21,.98);
      border-bottom: 1px solid var(--line);
      transition: box-shadow .2s ease;
    }
    .site-header.is-scrolled { box-shadow: 0 8px 22px rgba(0,0,0,.2); }
    .nav-shell { min-height: 76px; display:flex; align-items:center; justify-content:space-between; gap:28px; }
    .brand { display:flex; align-items:center; gap:12px; color:var(--white); font-size:18px; font-weight:800; white-space:nowrap; }
    .brand-mark { width:30px; height:30px; display:grid; place-items:center; color:var(--ink); background:var(--yellow); font-weight:900; border-radius:2px; }
    .desktop-nav { display:flex; align-items:center; gap:26px; color:#c9ccc6; font-size:14px; }
    .desktop-nav a { position:relative; padding:25px 0; transition:color .2s ease; }
    .desktop-nav a::after { content:""; position:absolute; left:0; right:100%; bottom:17px; height:2px; background:var(--yellow); transition:right .2s ease; }
    .desktop-nav a:hover, .desktop-nav a.active { color:var(--white); }
    .desktop-nav a:hover::after, .desktop-nav a.active::after { right:0; }
    .nav-action { display:inline-flex; align-items:center; gap:8px; padding:10px 14px; background:var(--yellow); color:var(--ink); font-size:13px; font-weight:800; border-radius:2px; transition:transform .2s, background .2s; }
    .nav-action:hover { background:#ffda62; transform:translateY(-2px); }
    .nav-action:active, .btn:active { transform:translateY(0); }
    .menu-button { display:none; color:var(--white); border:1px solid var(--line); background:transparent; padding:9px 12px; border-radius:2px; }
    .menu-button:hover { border-color:var(--yellow); color:var(--yellow); }
    .mobile-panel { display:none; background:var(--graphite); border-top:1px solid var(--line); }
    .mobile-panel a { display:block; color:#dce0d9; padding:14px 20px; border-bottom:1px solid var(--line); }
    .mobile-panel a:hover, .mobile-panel a.active { color:var(--yellow); }
    main { min-height:60vh; }
    .category-intro { padding:45px 0 34px; background:var(--paper); border-bottom:1px solid var(--dark-line); }
    .breadcrumb { display:flex; flex-wrap:wrap; gap:9px; align-items:center; margin-bottom:18px; color:#727771; font-size:12px; }
    .breadcrumb a:hover { color:var(--ink); }
    .breadcrumb .divider { color:#a9aca6; }
    .intro-grid { display:grid; grid-template-columns:minmax(0,1fr) 240px; gap:32px; align-items:end; }
    .eyebrow { display:flex; align-items:center; gap:12px; color:#9a7900; font-size:12px; font-weight:800; }
    .eyebrow::before { content:""; width:28px; height:2px; background:var(--yellow-deep); }
    h1 { max-width:850px; margin:9px 0 10px; font-size:clamp(32px,4vw,52px); line-height:1.15; font-weight:900; }
    .intro-copy { max-width:760px; margin:0; color:#626761; font-size:15px; }
    .intro-status { padding:14px 16px; border-left:3px solid var(--yellow-deep); background:rgba(255,253,248,.7); }
    .intro-status span { display:block; color:#767b74; font-size:11px; }
    .intro-status strong { display:block; margin-top:4px; font-size:15px; }
    .filter-band { padding:24px 0; background:var(--white); border-bottom:1px solid var(--dark-line); }
    .filter-form { display:grid; grid-template-columns:minmax(190px,1.7fr) repeat(4,minmax(120px,1fr)) auto auto; gap:10px; align-items:end; }
    .field label { display:block; margin:0 0 5px; color:#666b65; font-size:11px; font-weight:700; }
    .field input, .field select {
      width:100%; height:44px; padding:0 12px; color:var(--ink); background:var(--paper);
      border:1px solid var(--dark-line); border-radius:2px; outline:none;
    }
    .field input:focus, .field select:focus { border-color:var(--yellow-deep); box-shadow:0 0 0 3px rgba(244,197,66,.22); }
    .field input::placeholder { color:#999d97; }
    .filter-button, .clear-button {
      height:44px; padding:0 15px; border-radius:2px; font-size:13px; font-weight:800; white-space:nowrap;
      transition:background .2s, color .2s, transform .2s, border-color .2s;
    }
    .filter-button { border:1px solid var(--yellow); color:var(--ink); background:var(--yellow); }
    .filter-button:hover { background:#ffda62; border-color:#ffda62; transform:translateY(-1px); }
    .clear-button { border:1px solid var(--dark-line); background:transparent; color:#60655f; }
    .clear-button:hover { border-color:var(--ink); color:var(--ink); }
    .filter-toggle { display:none; }
    .filter-result { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:15px; color:#777c76; font-size:12px; }
    .filter-result strong { color:var(--ink); }
    .filter-chips { display:flex; flex-wrap:wrap; gap:6px; }
    .filter-chip { padding:3px 8px; background:#f0eee7; color:#686d66; border:1px solid rgba(17,19,21,.08); font-size:11px; }
    section { padding:62px 0; }
    .section-light { background:var(--paper); }
    .section-white { background:var(--white); }
    .section-dark { color:var(--white); background:var(--graphite); }
    .section-ink { color:var(--white); background:var(--ink); }
    .section-head { display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:25px; }
    .section-number { display:block; margin-bottom:6px; color:#9a7900; font-size:11px; font-weight:900; }
    .section-dark .section-number, .section-ink .section-number { color:var(--yellow); }
    .section-head h2 { margin:0; font-size:30px; line-height:1.22; font-weight:900; }
    .section-head p { max-width:500px; margin:0; color:#70756e; font-size:13px; }
    .section-dark .section-head p, .section-ink .section-head p { color:#a9afa8; }
    .result-count { color:#777c76; font-size:12px; white-space:nowrap; }
    .result-count strong { color:var(--ink); font-size:20px; }
    .entry-list { border-top:1px solid var(--dark-line); }
    .entry {
      display:grid; grid-template-columns:176px minmax(0,1fr) 150px; gap:22px;
      padding:20px 0; border-bottom:1px solid var(--dark-line); align-items:center;
      transition:background .2s ease, padding .2s ease;
    }
    .entry:hover { padding-inline:10px; background:rgba(255,253,248,.68); }
    .poster { aspect-ratio:16/10; overflow:hidden; background:#d8d5cc; border-radius:2px; }
    .poster img { width:100%; height:100%; object-fit:cover; transition:transform .45s ease; }
    .entry:hover .poster img, .topic-card:hover img { transform:scale(1.045); }
    .entry-title { display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin:0 0 5px; font-size:18px; line-height:1.35; font-weight:800; }
    .tag { display:inline-flex; align-items:center; padding:3px 8px; color:#494c47; background:#e6e4dc; border-radius:2px; font-size:10px; line-height:1.5; }
    .tag-yellow { color:#4c3c00; background:#f5dc83; }
    .tag-outline { color:#70756e; background:transparent; border:1px solid rgba(17,19,21,.18); }
    .entry-summary { max-width:650px; margin:0 0 9px; color:#666b64; font-size:13px; line-height:1.65; }
    .meta { display:flex; flex-wrap:wrap; gap:6px 14px; color:#777c76; font-size:11px; }
    .entry-side { text-align:right; }
    .entry-side strong { display:block; color:#333733; font-size:13px; }
    .entry-side span { display:block; color:#7b8079; font-size:11px; }
    .progress { height:4px; margin:9px 0 12px auto; max-width:110px; background:#dcd9d1; }
    .progress i { display:block; height:100%; background:var(--yellow-deep); }
    .text-link { display:inline-flex; align-items:center; gap:7px; color:#302800; font-size:12px; font-weight:800; border-bottom:1px solid var(--yellow-deep); }
    .text-link:hover { color:#8d6c00; }
    .status-board { display:grid; grid-template-columns:1.15fr 1fr 1fr; border-top:1px solid var(--dark-line); border-bottom:1px solid var(--dark-line); }
    .status-column { padding:20px 22px; border-right:1px solid var(--dark-line); }
    .status-column:last-child { border-right:0; }
    .status-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; }
    .status-heading h3 { margin:0; font-size:16px; font-weight:900; }
    .status-heading span { color:#777c76; font-size:11px; }
    .status-row { display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-top:1px solid rgba(17,19,21,.09); font-size:12px; }
    .status-row span:first-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .status-row span:last-child { flex:none; color:#747972; }
    .status-marker { display:inline-block; width:6px; height:6px; margin:0 7px 1px 0; border-radius:50%; background:var(--yellow-deep); }
    .status-marker.recent { background:#76948d; }
    .status-marker.done { background:#9da19c; }
    .support-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center; }
    .topic-feature { position:relative; min-height:260px; overflow:hidden; color:var(--white); background:#323633; }
    .topic-feature img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
    .topic-feature::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(17,19,21,.88),rgba(17,19,21,.18)); }
    .topic-copy { position:relative; z-index:1; max-width:430px; padding:32px; }
    .topic-copy h3 { margin:12px 0 8px; font-size:26px; line-height:1.25; font-weight:900; }
    .topic-copy p { margin:0 0 18px; color:#e0e2dc; font-size:13px; }
    .topic-stack { display:grid; gap:0; border-top:1px solid var(--dark-line); }
    .topic-card { display:grid; grid-template-columns:100px minmax(0,1fr); gap:15px; align-items:center; padding:13px 0; border-bottom:1px solid var(--dark-line); }
    .topic-card .poster { aspect-ratio:4/3; }
    .topic-card h3 { margin:0 0 4px; font-size:14px; }
    .topic-card p { margin:0; color:#737871; font-size:11px; }
    .stats-grid { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--dark-line); border-bottom:1px solid var(--dark-line); }
    .stat { padding:20px 24px; border-right:1px solid var(--dark-line); }
    .stat:last-child { border-right:0; }
    .stat strong { display:block; font-size:31px; line-height:1.2; font-weight:900; }
    .stat span { display:block; margin-top:5px; color:#737871; font-size:11px; }
    .stat em { color:#9a7900; font-size:10px; font-style:normal; }
    .steps { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
    .step { position:relative; padding:21px 18px; border-right:1px solid var(--line); }
    .step:last-child { border-right:0; }
    .step small { color:var(--yellow); font-size:11px; font-weight:900; }
    .step h3 { margin:6px 0 4px; color:var(--white); font-size:15px; }
    .step p { margin:0; color:#a9afa8; font-size:11px; }
    .news-list { display:grid; grid-template-columns:1fr 1fr; column-gap:34px; border-top:1px solid var(--dark-line); }
    .news-item { display:grid; grid-template-columns:76px 1fr; gap:15px; padding:17px 0; border-bottom:1px solid var(--dark-line); }
    .news-date { color:#8a6d00; font-size:11px; font-weight:800; }
    .news-item h3 { margin:0 0 4px; font-size:14px; line-height:1.45; }
    .news-item p { margin:0; color:#737871; font-size:11px; }
    .notice-box { display:grid; grid-template-columns:1fr 1fr; gap:25px 40px; padding:24px; border:1px solid var(--dark-line); background:rgba(255,253,248,.55); }
    .notice-box h3 { margin:0 0 5px; font-size:13px; }
    .notice-box p { margin:0; color:#686d66; font-size:12px; }
    .more-row { display:flex; justify-content:center; padding-top:26px; }
    .more-button { display:inline-flex; align-items:center; gap:10px; min-height:46px; padding:0 22px; color:var(--ink); border:1px solid var(--ink); background:transparent; font-size:13px; font-weight:800; transition:color .2s,background .2s,border-color .2s; }
    .more-button:hover { color:var(--ink); border-color:var(--yellow); background:var(--yellow); }
    .site-footer { color:#d8dbd5; background:var(--ink); }
    .footer-main { display:grid; grid-template-columns:1.5fr 1fr 1.15fr 1fr; gap:34px; padding:50px 0 38px; }
    .footer-brand { margin-bottom:10px; color:var(--white); font-size:19px; font-weight:900; }
    .footer-copy { max-width:330px; margin:0; color:#a8ada7; font-size:12px; }
    .footer-column h3 { margin:0 0 12px; color:var(--white); font-size:12px; }
    .footer-column a, .footer-column span { display:block; width:fit-content; margin:7px 0; color:#a8ada7; font-size:11px; }
    .footer-column a:hover { color:var(--yellow); }
    .footer-bottom { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 0; border-top:1px solid var(--line); color:#8e948d; font-size:10px; }
    .back-top { color:var(--yellow); white-space:nowrap; }
    .back-top:hover { color:#ffda62; }
    .empty-state { display:none; padding:38px 15px; text-align:center; color:#757a73; border-bottom:1px solid var(--dark-line); }
    .empty-state strong { display:block; margin-bottom:5px; color:var(--ink); font-size:16px; }
    @media (max-width: 1050px) {
      .desktop-nav { gap:16px; }
      .nav-shell { gap:16px; }
      .filter-form { grid-template-columns:repeat(4,minmax(120px,1fr)); }
      .field-search { grid-column:span 2; }
      .filter-button, .clear-button { width:100%; }
      .entry { grid-template-columns:150px minmax(0,1fr) 125px; gap:16px; }
      .footer-main { grid-template-columns:1.4fr 1fr 1fr; }
      .footer-column:last-child { grid-column:2 / 4; }
    }
    @media (max-width: 768px) {
      .container { width:min(100% - 32px, 620px); }
      .nav-shell { min-height:66px; }
      .desktop-nav, .nav-action { display:none; }
      .menu-button { display:inline-flex; align-items:center; justify-content:center; }
      .mobile-panel.open { display:block; }
      .intro-grid { grid-template-columns:1fr; gap:18px; }
      .intro-status { max-width:320px; }
      .category-intro { padding:31px 0 26px; }
      section { padding:46px 0; }
      .filter-toggle { display:flex; width:100%; justify-content:space-between; align-items:center; padding:12px 14px; color:var(--ink); border:1px solid var(--dark-line); background:var(--paper); font-size:13px; font-weight:800; }
      .filter-form { display:none; grid-template-columns:1fr 1fr; padding-top:14px; }
      .filter-form.open { display:grid; }
      .field-search { grid-column:1 / -1; }
      .filter-result { align-items:flex-start; flex-direction:column; }
      .section-head { align-items:flex-start; flex-direction:column; gap:10px; }
      .section-head h2 { font-size:26px; }
      .entry { grid-template-columns:118px minmax(0,1fr); gap:14px; }
      .entry-side { grid-column:2; display:flex; align-items:center; justify-content:space-between; text-align:left; }
      .entry-side .progress { display:none; }
      .entry-title { font-size:15px; }
      .entry-summary { font-size:12px; }
      .status-board { grid-template-columns:1fr; }
      .status-column { border-right:0; border-bottom:1px solid var(--dark-line); }
      .status-column:last-child { border-bottom:0; }
      .support-grid { grid-template-columns:1fr; gap:27px; }
      .stats-grid { grid-template-columns:1fr 1fr; }
      .stat:nth-child(2) { border-right:0; }
      .stat:nth-child(-n+2) { border-bottom:1px solid var(--dark-line); }
      .steps { grid-template-columns:1fr 1fr; }
      .step:nth-child(2) { border-right:0; }
      .step:nth-child(-n+2) { border-bottom:1px solid var(--line); }
      .news-list { grid-template-columns:1fr; }
      .notice-box { grid-template-columns:1fr; gap:18px; }
      .footer-main { grid-template-columns:1fr 1fr; gap:26px 20px; }
      .footer-main > div:first-child { grid-column:1 / -1; }
      .footer-column:last-child { grid-column:auto; }
      .footer-bottom { align-items:flex-start; flex-direction:column; }
    }
    @media (max-width: 520px) {
      .container { width:calc(100% - 28px); }
      .brand { gap:8px; font-size:15px; }
      .brand-mark { width:28px; height:28px; }
      h1 { font-size:32px; }
      .intro-copy { font-size:13px; }
      .filter-form { grid-template-columns:1fr 1fr; gap:9px; }
      .field label { font-size:10px; }
      .field input, .field select, .filter-button, .clear-button { height:42px; padding-inline:9px; font-size:12px; }
      .entry { grid-template-columns:96px minmax(0,1fr); gap:11px; padding:15px 0; }
      .poster { aspect-ratio:3/4; }
      .entry-title { align-items:flex-start; flex-direction:column; gap:5px; font-size:14px; }
      .entry-summary { display:none; }
      .meta { gap:4px 9px; font-size:10px; }
      .entry-side { grid-column:1 / -1; padding-left:107px; }
      .entry-side strong { font-size:11px; }
      .entry-side span { font-size:10px; }
      .topic-feature { min-height:230px; }
      .topic-copy { padding:23px; }
      .topic-copy h3 { font-size:22px; }
      .topic-card { grid-template-columns:84px minmax(0,1fr); }
      .stat { padding:17px 14px; }
      .stat strong { font-size:26px; }
      .step { padding:17px 12px; }
      .news-item { grid-template-columns:62px 1fr; gap:10px; }
      .footer-main { grid-template-columns:1fr 1fr; }
      .footer-column h3 { font-size:11px; }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important; }
    }