/* roulang page: index */
:root {
      --ink: #241d2b;
      --ink-soft: #514958;
      --paper: #f3efe8;
      --paper-light: #fbf8f2;
      --coral: #d95b4b;
      --coral-deep: #a93e36;
      --mint: #b9d9ca;
      --mint-deep: #477568;
      --yellow: #f2c75c;
      --line: #302735;
      --lavender: #dfd7e4;
      --shadow: 5px 5px 0 var(--line);
      --shadow-small: 3px 3px 0 var(--line);
      --radius: 3px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--ink);
      background:
        radial-gradient(rgba(36,29,43,.06) 1px, transparent 1px),
        var(--paper);
      background-size: 8px 8px;
      font-family: 'Noto Sans SC', 'Microsoft YaHei', 'PingFang SC', sans-serif;
      line-height: 1.8;
      letter-spacing: 0;
    }
    a { color: inherit; text-decoration: none; }
    button, input, select { font: inherit; }
    button { cursor: pointer; }
    img { display: block; max-width: 100%; }
    .container { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
    .pixel-font { font-family: monospace; letter-spacing: 0; }
    .section-pad { padding: 92px 0; }
    .section-kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--coral-deep);
      font: 700 12px/1.2 monospace;
      text-transform: uppercase;
    }
    .section-kicker::before {
      content: "";
      width: 18px;
      height: 3px;
      background: var(--coral);
      box-shadow: 6px 0 0 var(--yellow);
    }
    .section-title { margin: 14px 0 12px; font-size: clamp(28px, 4vw, 48px); line-height: 1.2; font-weight: 900; }
    .section-lead { max-width: 720px; color: var(--ink-soft); font-size: 16px; line-height: 1.9; }
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 48px;
      padding: 10px 20px;
      border: 2px solid var(--line);
      border-radius: var(--radius);
      font-weight: 800;
      transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
    }
    .btn:hover { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--line); }
    .btn:active { transform: translate(0, 0); box-shadow: none; }
    .btn:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible, .faq-question:focus-visible {
      outline: 3px solid var(--yellow);
      outline-offset: 3px;
    }
    .btn-primary { color: #fffaf4; background: var(--coral); box-shadow: var(--shadow-small); }
    .btn-primary:hover { background: var(--coral-deep); }
    .btn-secondary { background: var(--paper-light); box-shadow: var(--shadow-small); }
    .tag {
      display: inline-flex;
      align-items: center;
      min-height: 25px;
      padding: 2px 8px;
      border: 1px solid var(--line);
      border-radius: 2px;
      background: var(--paper-light);
      font-size: 12px;
      font-weight: 800;
      line-height: 1.3;
    }
    .tag-coral { background: var(--coral); color: #fff; }
    .tag-mint { background: var(--mint); color: var(--ink); }
    .tag-yellow { background: var(--yellow); }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 30;
      background: rgba(251,248,242,.97);
      border-bottom: 2px solid var(--line);
    }
    .nav-wrap { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
    .brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 900; line-height: 1.15; }
    .brand-mark {
      width: 34px; height: 34px; flex: 0 0 34px;
      background: var(--coral);
      border: 2px solid var(--line);
      box-shadow: 3px 3px 0 var(--line);
      position: relative;
    }
    .brand-mark::before, .brand-mark::after { content: ""; position: absolute; background: var(--yellow); }
    .brand-mark::before { width: 9px; height: 9px; left: 6px; top: 6px; box-shadow: 12px 0 0 var(--mint); }
    .brand-mark::after { width: 15px; height: 4px; left: 6px; bottom: 6px; }
    .brand-text { max-width: 210px; font-size: 15px; }
    .nav-links { display: flex; align-items: center; gap: 6px; margin-left: auto; }
    .nav-link { padding: 9px 12px; position: relative; font-size: 14px; font-weight: 800; }
    .nav-link:hover { color: var(--coral-deep); }
    .nav-link.active::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 3px; background: var(--coral); }
    .mobile-toggle { display: none; border: 2px solid var(--line); background: var(--paper-light); width: 44px; height: 42px; }
    .mobile-menu { display: none; border-top: 1px solid var(--line); padding: 14px 20px 20px; background: var(--paper-light); }
    .mobile-menu.open { display: grid; gap: 8px; }
    .mobile-menu a { padding: 11px 12px; border-bottom: 1px solid var(--lavender); font-weight: 800; }

    .hero {
      min-height: 690px;
      display: flex;
      align-items: center;
      position: relative;
      overflow: hidden;
      background: var(--ink);
      color: #fffaf4;
      border-bottom: 2px solid var(--line);
    }
    .hero::before {
      content: "";
      position: absolute; inset: 0;
      opacity: .18;
      background: repeating-linear-gradient(0deg, transparent 0 5px, #fff 6px 7px);
      pointer-events: none;
    }
    .hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.08fr .92fr; gap: 60px; align-items: center; padding: 72px 0 98px; }
    .hero-kicker { color: var(--yellow); font: 700 13px/1.4 monospace; }
    .hero h1 { max-width: 720px; margin: 18px 0 20px; font-size: clamp(38px, 6vw, 76px); line-height: 1.12; font-weight: 900; }
    .hero-copy { max-width: 640px; color: #ddd5dd; font-size: 17px; line-height: 1.95; }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
    .hero .btn-secondary { color: #fffaf4; background: transparent; border-color: #fffaf4; box-shadow: 4px 4px 0 var(--coral); }
    .hero-meta { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 35px; color: #c4b9c6; font-size: 13px; }
    .hero-meta strong { display: block; color: var(--yellow); font: 700 24px/1.2 monospace; }
    .index-screen {
      position: relative;
      min-height: 365px;
      padding: 20px;
      background: var(--paper-light);
      color: var(--ink);
      border: 2px solid var(--yellow);
      box-shadow: 7px 7px 0 var(--coral);
      transform: rotate(1.5deg);
    }
    .screen-top { display: flex; justify-content: space-between; align-items: center; padding-bottom: 14px; border-bottom: 2px solid var(--line); font: 700 12px monospace; }
    .signal { display: flex; gap: 4px; align-items: end; height: 18px; }
    .signal i { width: 5px; background: var(--coral); display: block; }
    .signal i:nth-child(1) { height: 6px; }.signal i:nth-child(2) { height: 11px; }.signal i:nth-child(3) { height: 16px; }
    .screen-title { margin: 26px 0 18px; font-size: 24px; font-weight: 900; }
    .timeline { display: grid; gap: 12px; }
    .timeline-row { display: grid; grid-template-columns: 55px 1fr 60px; gap: 10px; align-items: center; font-size: 12px; }
    .timeline-bar { height: 25px; background: var(--lavender); border: 1px solid var(--line); position: relative; overflow: hidden; }
    .timeline-bar span { display: block; height: 100%; background: var(--mint); border-right: 2px solid var(--line); }
    .timeline-row:nth-child(2) .timeline-bar span { width: 72%; background: var(--yellow); }
    .timeline-row:nth-child(3) .timeline-bar span { width: 46%; background: var(--coral); }
    .timeline-row:nth-child(1) .timeline-bar span { width: 84%; }
    .screen-foot { display: flex; justify-content: space-between; margin-top: 27px; padding-top: 13px; border-top: 1px dashed var(--line); font-size: 12px; font-weight: 800; }

    .feature-strip { background: var(--paper-light); border-bottom: 1px solid var(--line); }
    .feature-grid { display: grid; grid-template-columns: 5fr 6fr 7fr; }
    .feature-item { min-height: 190px; padding: 32px 30px; border-right: 1px solid var(--line); }
    .feature-item:last-child { border-right: 0; }
    .feature-number { color: var(--coral); font: 800 13px monospace; }
    .feature-item h3 { margin: 13px 0 7px; font-size: 21px; font-weight: 900; }
    .feature-item p { margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.8; }

    .scene { background: var(--lavender); }
    .scene-layout { display: grid; grid-template-columns: 260px 1fr; gap: 28px; align-items: start; }
    .filter-panel { padding: 22px; background: var(--paper-light); border: 2px solid var(--line); box-shadow: var(--shadow-small); }
    .filter-panel h3 { margin: 0 0 18px; font-size: 18px; font-weight: 900; }
    .filter-label { display: block; margin: 15px 0 6px; font-size: 12px; font-weight: 900; }
    .filter-control { width: 100%; min-height: 42px; padding: 7px 9px; border: 1px solid var(--line); background: #fff; color: var(--ink); }
    .filter-control:focus { border-color: var(--coral); }
    .entry-list { display: grid; gap: 12px; }
    .entry {
      display: grid; grid-template-columns: 150px 1fr auto; gap: 18px; align-items: center;
      padding: 14px; background: var(--paper-light); border: 1px solid var(--line);
      transition: transform .16s ease, box-shadow .16s ease;
    }
    .entry:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-small); }
    .entry-thumb { aspect-ratio: 16/9; display: grid; place-items: center; background: var(--ink); color: var(--yellow); border: 1px solid var(--line); font: 700 12px monospace; }
    .entry h3 { margin: 0 0 5px; font-size: 17px; font-weight: 900; }
    .entry p { margin: 0 0 8px; color: var(--ink-soft); font-size: 13px; line-height: 1.6; }
    .entry-tags { display: flex; flex-wrap: wrap; gap: 6px; }
    .entry-arrow { color: var(--coral-deep); font: 700 22px monospace; padding: 8px; }

    .trust { background: var(--paper-light); }
    .trust-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; align-items: start; }
    .trust-note { padding-left: 20px; border-left: 5px solid var(--coral); color: var(--ink-soft); line-height: 1.9; }
    .trust-list { display: grid; gap: 0; border-top: 2px solid var(--line); }
    .trust-row { display: grid; grid-template-columns: 55px 1fr auto; gap: 16px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line); }
    .trust-row b { font: 700 18px monospace; color: var(--coral); }
    .trust-row strong { display: block; font-size: 16px; }
    .trust-row span { color: var(--ink-soft); font-size: 13px; }

    .updates { background: var(--yellow); border-block: 2px solid var(--line); }
    .updates-layout { display: grid; grid-template-columns: 1fr 1.3fr; gap: 60px; align-items: center; }
    .update-table { border: 2px solid var(--line); background: var(--paper-light); box-shadow: var(--shadow-small); }
    .update-row { display: grid; grid-template-columns: 100px 1fr 100px; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); font-size: 13px; align-items: center; }
    .update-row:last-child { border-bottom: 0; }
    .update-row strong { font-size: 14px; }

    .faq { background: var(--paper); }
    .faq-list { max-width: 850px; margin-top: 32px; border-top: 2px solid var(--line); }
    .faq-item { border-bottom: 1px solid var(--line); }
    .faq-question { width: 100%; display: flex; justify-content: space-between; gap: 18px; padding: 20px 0; border: 0; background: transparent; text-align: left; font-weight: 900; }
    .faq-icon { color: var(--coral); font: 700 22px monospace; transition: transform .2s ease; }
    .faq-answer { display: none; padding: 0 42px 20px 0; color: var(--ink-soft); font-size: 14px; line-height: 1.9; }
    .faq-item.open .faq-answer { display: block; }
    .faq-item.open .faq-icon { transform: rotate(45deg); }

    .conversion { background: var(--coral); color: #fffaf4; }
    .conversion-inner { display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: center; }
    .conversion h2 { margin: 0 0 8px; font-size: clamp(26px, 4vw, 40px); line-height: 1.25; }
    .conversion p { margin: 0; color: #ffe8de; }
    .conversion .btn { background: var(--yellow); color: var(--ink); }

    .site-footer { padding: 56px 0 92px; background: var(--ink); color: #f5eee7; }
    .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 50px; }
    .footer-brand-copy { max-width: 350px; margin-top: 18px; color: #bdb1be; font-size: 13px; line-height: 1.8; }
    .footer-heading { margin: 0 0 14px; color: var(--yellow); font-size: 13px; font-weight: 900; }
    .footer-links { display: grid; gap: 8px; color: #d7cbd5; font-size: 13px; }
    .footer-links a:hover { color: var(--yellow); }
    .footer-bottom { display: flex; justify-content: space-between; gap: 20px; margin-top: 46px; padding-top: 18px; border-top: 1px solid #65596a; color: #9f92a0; font-size: 12px; }

    .fixed-bar { position: fixed; z-index: 25; left: 20px; right: 20px; bottom: 18px; padding: 13px 18px; background: var(--coral); color: #fff; border: 2px solid var(--line); box-shadow: 5px 5px 0 var(--line); }
    .fixed-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
    .fixed-copy { font-size: 14px; font-weight: 800; }
    .fixed-copy span { color: var(--yellow); margin-right: 8px; font-family: monospace; }
    .fixed-bar .btn { min-height: 38px; padding: 6px 15px; background: var(--yellow); color: var(--ink); box-shadow: 3px 3px 0 var(--line); }
    .fixed-close { width: 30px; height: 30px; margin-left: 2px; border: 0; background: transparent; color: #fff; font-size: 22px; line-height: 1; }
    .fixed-bar.hidden { display: none; }
    .footer-safe { height: 80px; }

    @media (max-width: 1024px) {
      .hero-grid { gap: 35px; }
      .trust-layout, .updates-layout { gap: 35px; }
    }
    @media (max-width: 768px) {
      .container { width: min(100% - 30px, 620px); }
      .nav-links, .nav-wrap > .btn { display: none; }
      .mobile-toggle { display: block; }
      .nav-wrap { min-height: 68px; }
      .hero { min-height: auto; }
      .hero-grid, .trust-layout, .updates-layout { grid-template-columns: 1fr; }
      .hero-grid { padding: 64px 0 82px; }
      .hero h1 { font-size: clamp(37px, 10vw, 58px); }
      .index-screen { max-width: 570px; transform: rotate(0); margin-top: 10px; }
      .feature-grid { grid-template-columns: 1fr; }
      .feature-item { min-height: auto; border-right: 0; border-bottom: 1px solid var(--line); }
      .feature-item:last-child { border-bottom: 0; }
      .scene-layout { grid-template-columns: 1fr; }
      .filter-panel { box-shadow: none; }
      .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
      .footer-grid > div:first-child { grid-column: 1 / -1; }
      .conversion-inner { grid-template-columns: 1fr; }
    }
    @media (max-width: 520px) {
      .section-pad { padding: 64px 0; }
      .hero-actions .btn { width: 100%; }
      .hero-meta { gap: 15px; }
      .entry { grid-template-columns: 86px 1fr; gap: 12px; }
      .entry-arrow { display: none; }
      .entry h3 { font-size: 15px; }
      .entry p { font-size: 12px; }
      .update-row { grid-template-columns: 68px 1fr; }
      .update-row .tag { grid-column: 2; width: max-content; }
      .footer-grid { grid-template-columns: 1fr; }
      .footer-grid > div:first-child { grid-column: auto; }
      .footer-bottom { flex-direction: column; }
      .fixed-bar { left: 10px; right: 10px; bottom: 10px; padding: 10px 12px; }
      .fixed-inner { align-items: stretch; gap: 10px; }
      .fixed-copy { flex: 1; font-size: 12px; line-height: 1.5; }
      .fixed-bar .btn { min-width: 105px; padding-inline: 9px; font-size: 12px; }
    }

/* roulang page: category1 */
:root {
      --ink:#241d2b; --ink-soft:#514958; --paper:#f3efe8; --paper-light:#fbf8f2;
      --coral:#d95b4b; --coral-deep:#a93e36; --mint:#b9d9ca; --mint-deep:#477568;
      --yellow:#f2c75c; --line:#302735; --lavender:#dfd7e4; --shadow:5px 5px 0 var(--line);
      --shadow-small:3px 3px 0 var(--line); --radius:3px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;color:var(--ink);background:radial-gradient(rgba(36,29,43,.06) 1px,transparent 1px),var(--paper);background-size:8px 8px;font-family:"Noto Sans SC","Microsoft YaHei","PingFang SC",sans-serif;line-height:1.8;letter-spacing:0}
    a{color:inherit;text-decoration:none} button,input,select{font:inherit} button{cursor:pointer} img{display:block;max-width:100%}
    .container{width:min(1180px,calc(100% - 40px));margin-inline:auto}
    .section-pad{padding:88px 0}
    .section-kicker{display:inline-flex;align-items:center;gap:8px;color:var(--coral-deep);font:700 12px/1.2 monospace;text-transform:uppercase}
    .section-kicker:before{content:"";width:18px;height:3px;background:var(--coral);box-shadow:6px 0 0 var(--yellow)}
    .section-title{margin:14px 0 12px;font-size:clamp(28px,4vw,48px);line-height:1.2;font-weight:900}
    .section-lead{max-width:720px;color:var(--ink-soft);font-size:16px;line-height:1.9}
    .btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:10px 20px;border:2px solid var(--line);border-radius:var(--radius);font-weight:800;transition:transform .16s,box-shadow .16s,background .16s}
    .btn:hover{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--line)}
    .btn:active{transform:translate(0);box-shadow:none}
    .btn:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,.faq-question:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
    .btn-primary{color:#fffaf4;background:var(--coral);box-shadow:var(--shadow-small)}
    .btn-primary:hover{background:var(--coral-deep)}
    .btn-secondary{background:var(--paper-light);box-shadow:var(--shadow-small)}
    .tag{display:inline-flex;align-items:center;min-height:25px;padding:2px 8px;border:1px solid var(--line);border-radius:2px;background:var(--paper-light);font-size:12px;font-weight:800;line-height:1.3}
    .tag-coral{background:var(--coral);color:#fff}.tag-mint{background:var(--mint)}.tag-yellow{background:var(--yellow)}
    .site-header{position:sticky;top:0;z-index:30;background:rgba(251,248,242,.98);border-bottom:2px solid var(--line)}
    .nav-wrap{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px}
    .brand{display:inline-flex;align-items:center;gap:11px;font-weight:900;line-height:1.15}
    .brand-mark{width:34px;height:34px;flex:0 0 34px;background:var(--coral);border:2px solid var(--line);box-shadow:3px 3px 0 var(--line);position:relative}
    .brand-mark:before,.brand-mark:after{content:"";position:absolute;background:var(--yellow)}
    .brand-mark:before{width:9px;height:9px;left:6px;top:6px;box-shadow:12px 0 0 var(--mint)}
    .brand-mark:after{width:15px;height:4px;left:6px;bottom:6px}
    .brand-text{max-width:210px;font-size:15px}
    .nav-links{display:flex;align-items:center;gap:6px;margin-left:auto}
    .nav-link{padding:9px 12px;position:relative;font-size:14px;font-weight:800}
    .nav-link:hover{color:var(--coral-deep)}
    .nav-link.active{background:var(--lavender)}
    .nav-link.active:after{content:"";position:absolute;left:12px;right:12px;bottom:2px;height:3px;background:var(--coral)}
    .mobile-toggle{display:none;border:2px solid var(--line);background:var(--paper-light);width:44px;height:42px}
    .mobile-menu{display:none;border-top:1px solid var(--line);padding:14px 20px 20px;background:var(--paper-light)}
    .mobile-menu.open{display:grid;gap:8px}.mobile-menu a{padding:11px 12px;border-bottom:1px solid var(--lavender);font-weight:800}
    .page-hero{background:var(--ink);color:#fffaf4;border-bottom:2px solid var(--line);position:relative;overflow:hidden}
    .page-hero:after{content:"";position:absolute;inset:0;opacity:.13;background:repeating-linear-gradient(0deg,transparent 0 5px,#fff 6px 7px);pointer-events:none}
    .page-hero-inner{position:relative;z-index:1;padding:72px 0 66px;display:grid;grid-template-columns:1.15fr .85fr;gap:54px;align-items:end}
    .breadcrumb{color:#c4b9c6;font-size:13px;margin-bottom:18px}.breadcrumb a:hover{color:var(--yellow)}
    .page-hero h1{max-width:760px;margin:0 0 18px;font-size:clamp(34px,5vw,64px);line-height:1.18;font-weight:900}
    .page-hero-copy{max-width:700px;color:#ddd5dd;font-size:17px;line-height:1.9}
    .index-board{border:2px solid #fffaf4;background:#352b3b;padding:22px;box-shadow:6px 6px 0 var(--coral);transform:rotate(1deg)}
    .board-top{display:flex;justify-content:space-between;color:var(--yellow);font:700 12px monospace;border-bottom:1px solid #756879;padding-bottom:12px}
    .board-line{display:grid;grid-template-columns:70px 1fr 48px;gap:10px;align-items:center;padding:13px 0;border-bottom:1px solid #5b4d60;color:#fffaf4;font-size:13px}
    .board-line:last-child{border:0}.board-bar{height:8px;background:#594e5c}.board-bar span{display:block;height:100%;background:var(--mint);width:78%}
    .board-line:nth-child(3) .board-bar span{width:54%;background:var(--coral)}.board-line:nth-child(4) .board-bar span{width:88%;background:var(--yellow)}
    .strip{background:var(--paper-light);border-bottom:1px solid var(--line)}.strip-grid{display:grid;grid-template-columns:5fr 6fr 7fr}
    .strip-item{min-height:166px;padding:30px;border-right:1px solid var(--line)}.strip-item:last-child{border:0}
    .number{font:700 20px monospace;color:var(--coral)}.strip h2{font-size:20px;margin:7px 0 5px;font-weight:900}.strip p{margin:0;color:var(--ink-soft);font-size:14px;line-height:1.8}
    .filters{border:2px solid var(--line);background:var(--paper-light);padding:22px;box-shadow:var(--shadow-small)}
    .filter-grid{display:grid;grid-template-columns:1fr 1fr 1fr 1.1fr;gap:14px;align-items:end}.field label{display:block;font-size:12px;font-weight:900;margin-bottom:6px;color:var(--ink-soft)}
    select,input{width:100%;height:46px;padding:8px 11px;border:2px solid var(--line);border-radius:2px;background:#fffdf8;color:var(--ink)}
    select:focus,input:focus{border-color:var(--coral);outline:0;box-shadow:3px 3px 0 var(--mint)}
    .content-layout{display:grid;grid-template-columns:260px 1fr;gap:42px;align-items:start}
    .side-box{border-top:4px solid var(--coral);padding-top:15px;margin-bottom:28px}.side-box h3{margin:0 0 12px;font-size:17px;font-weight:900}.side-links{display:grid;gap:7px}.side-links a{padding:8px 10px;border-bottom:1px solid var(--lavender);font-size:14px;font-weight:700}.side-links a:hover{background:var(--mint)}
    .feature-entry{display:grid;grid-template-columns:230px 1fr;gap:24px;background:var(--mint);border:2px solid var(--line);padding:18px;box-shadow:var(--shadow);margin-bottom:28px}
    .thumb{aspect-ratio:16/10;border:2px solid var(--line);background:var(--ink);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;color:var(--yellow);font:700 12px monospace}
    .thumb:before{content:"字幕 INDEX";position:absolute;left:12px;top:12px;color:#fffaf4;border:1px solid #fffaf4;padding:3px 6px;font-size:11px}
    .thumb:after{content:"";width:70%;height:3px;background:var(--coral);box-shadow:0 12px 0 var(--yellow),0 24px 0 var(--mint);opacity:.9}
    .entry h3{font-size:22px;line-height:1.4;margin:10px 0 8px;font-weight:900}.entry p{color:var(--ink-soft);font-size:14px;margin:0 0 13px;line-height:1.8}
    .entry-meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.entry-meta small{color:var(--ink-soft)}
    .entry-list{display:grid;gap:12px}.list-row{display:grid;grid-template-columns:148px 1fr auto;gap:20px;align-items:center;padding:15px;border:1px solid var(--line);background:var(--paper-light);transition:transform .16s,box-shadow .16s}
    .list-row:hover{transform:translate(3px,3px);box-shadow:3px 3px 0 var(--line)}.list-row .thumb{aspect-ratio:16/9}.list-row h3{font-size:17px;line-height:1.45;margin:0 0 5px;font-weight:900}.list-row p{margin:0;color:var(--ink-soft);font-size:13px;line-height:1.7;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
    .arrow{font-size:22px;font-weight:900;color:var(--coral)}
    .pagination{display:flex;gap:8px;margin-top:28px;flex-wrap:wrap}.page-number{width:42px;height:42px;display:grid;place-items:center;border:2px solid var(--line);background:var(--paper-light);font-weight:900}.page-number.current{background:var(--coral);color:#fff}.page-number:hover{background:var(--yellow)}
    .faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px}.faq-list{border-top:2px solid var(--line)}.faq-item{border-bottom:1px solid var(--line)}.faq-question{width:100%;display:flex;justify-content:space-between;gap:18px;text-align:left;border:0;background:transparent;padding:18px 0;font-weight:900;color:var(--ink)}.faq-icon{font-size:22px;color:var(--coral);transition:transform .2s}.faq-answer{display:none;color:var(--ink-soft);font-size:14px;padding:0 35px 18px 0}.faq-item.open .faq-answer{display:block}.faq-item.open .faq-icon{transform:rotate(45deg)}
    .cta-band{background:var(--coral);border-block:2px solid var(--line);padding:48px 0;color:#fffaf4}.cta-inner{display:flex;justify-content:space-between;align-items:center;gap:28px}.cta-band h2{margin:0;font-size:clamp(25px,4vw,42px);line-height:1.25;font-weight:900}.cta-band p{margin:8px 0 0;color:#ffe9e1}.cta-band .btn{background:var(--paper-light);color:var(--ink)}
    .site-footer{background:var(--ink);color:#fffaf4;padding:58px 0 25px}.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:55px}.footer-brand-copy{max-width:300px;color:#c4b9c6;font-size:13px;margin-top:18px}.footer-heading{font-size:15px;color:var(--yellow);margin:5px 0 15px}.footer-links{display:grid;gap:8px;color:#ddd5dd;font-size:14px}.footer-links a:hover{color:var(--mint)}.footer-bottom{display:flex;justify-content:space-between;gap:20px;border-top:1px solid #5b4d60;margin-top:42px;padding-top:20px;color:#bdb2bf;font-size:12px}
    .fixed-bar{position:fixed;z-index:25;left:0;right:0;bottom:0;background:var(--coral);border-top:2px solid var(--line);box-shadow:0 -4px 0 rgba(48,39,53,.15);padding:12px 0}.fixed-inner{display:flex;justify-content:space-between;align-items:center;gap:20px}.fixed-copy{font-weight:900;color:#fff}.fixed-copy span{font-weight:500;font-size:13px;margin-left:14px;color:#ffe9e1}.fixed-bar .btn{min-height:40px;padding:7px 16px;background:var(--paper-light);color:var(--ink)}.close-bar{border:0;background:transparent;color:#fff;font-size:22px;padding:4px 8px}
    body{padding-bottom:70px}
    @media(max-width:1024px){.page-hero-inner{grid-template-columns:1fr .8fr;gap:30px}.content-layout{grid-template-columns:210px 1fr}.list-row{grid-template-columns:125px 1fr auto}}
    @media(max-width:768px){.container{width:min(100% - 28px,600px)}.nav-links,.site-header .nav-wrap>.btn{display:none}.mobile-toggle{display:block}.page-hero-inner{display:block;padding:52px 0 48px}.index-board{margin:35px 8px 8px 0}.strip-grid{grid-template-columns:1fr}.strip-item{min-height:auto;border-right:0;border-bottom:1px solid var(--line);padding:23px}.content-layout{display:block}.side-panel{display:none}.filter-grid{grid-template-columns:1fr 1fr}.feature-entry{grid-template-columns:1fr}.list-row{grid-template-columns:110px 1fr}.list-row .arrow{display:none}.faq-grid{grid-template-columns:1fr;gap:28px}.cta-inner{display:block}.cta-inner .btn{margin-top:22px}.footer-grid{grid-template-columns:1fr 1fr;gap:28px}.footer-grid>div:first-child{grid-column:1/-1}.footer-bottom{display:block}.footer-bottom span{display:block;margin-top:7px}.fixed-copy span{display:block;margin:2px 0 0}.fixed-bar{padding:9px 0}.fixed-inner{gap:8px}}
    @media(max-width:520px){.section-pad{padding:62px 0}.filter-grid{grid-template-columns:1fr}.feature-entry{box-shadow:var(--shadow-small)}.list-row{grid-template-columns:1fr;gap:10px}.list-row .thumb{width:100%}.footer-grid{grid-template-columns:1fr}.footer-grid>div:first-child{grid-column:auto}.fixed-inner{align-items:stretch}.fixed-copy{font-size:13px;line-height:1.45}.fixed-bar .btn{min-width:112px;padding:7px 10px;font-size:13px}.close-bar{font-size:18px}}