/* roulang page: index */
:root {
      --bg: #080b1c;
      --bg-deep: #060814;
      --surface: rgba(19, 25, 55, .78);
      --surface-strong: #151c3e;
      --surface-soft: rgba(35, 43, 86, .48);
      --line: rgba(139, 162, 255, .18);
      --line-bright: rgba(104, 218, 255, .58);
      --text: #f4f6ff;
      --muted: #aab4d4;
      --subtle: #727da4;
      --cyan: #66ddff;
      --violet: #9b86ff;
      --green: #75e6c1;
      --danger: #ff9bba;
      --radius: 18px;
      --shadow: 0 20px 70px rgba(0, 0, 0, .34), 0 0 34px rgba(65, 89, 210, .1);
      --container: 1180px;
    }

    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--text);
      background:
        radial-gradient(circle at 78% 8%, rgba(91, 75, 193, .2), transparent 28rem),
        radial-gradient(circle at 12% 36%, rgba(30, 117, 178, .12), transparent 24rem),
        linear-gradient(145deg, var(--bg-deep), var(--bg) 54%, #0c1028);
      font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
      font-size: 16px;
      line-height: 1.75;
      min-height: 100vh;
    }
    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      opacity: .18;
      background-image: linear-gradient(rgba(129, 160, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(129, 160, 255, .07) 1px, transparent 1px);
      background-size: 48px 48px;
      mask-image: linear-gradient(to bottom, black, transparent 68%);
    }
    a { color: inherit; text-decoration: none; }
    button, input { font: inherit; }
    button { cursor: pointer; }
    img { max-width: 100%; }
    .container { width: min(calc(100% - 40px), var(--container)); margin: 0 auto; }
    .eyebrow {
      display: inline-flex;
      gap: 8px;
      align-items: center;
      color: var(--cyan);
      font-size: .76rem;
      font-weight: 800;
      letter-spacing: .16em;
      text-transform: uppercase;
    }
    .eyebrow::before {
      content: "";
      width: 25px;
      height: 1px;
      background: var(--cyan);
      box-shadow: 0 0 12px var(--cyan);
    }
    .section { padding: 106px 0; position: relative; }
    .section-head { max-width: 700px; margin-bottom: 42px; }
    .section-head h2 { margin: 12px 0 12px; font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.18; letter-spacing: -.04em; }
    .section-head p { color: var(--muted); margin: 0; max-width: 650px; }
    .glass {
      background: linear-gradient(145deg, rgba(28, 36, 78, .86), rgba(13, 18, 43, .72));
      border: 1px solid var(--line);
      box-shadow: var(--shadow);
      backdrop-filter: blur(18px);
    }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 30;
      padding: 16px 0;
      background: rgba(6, 8, 20, .72);
      border-bottom: 1px solid rgba(139, 162, 255, .1);
      backdrop-filter: blur(20px);
    }
    .nav-shell {
      min-height: 58px;
      display: flex;
      align-items: center;
      gap: 24px;
    }
    .brand {
      display: inline-flex;
      align-items: center;
      gap: 11px;
      flex: 0 0 auto;
      font-weight: 900;
      letter-spacing: -.04em;
      font-size: 1.08rem;
      white-space: nowrap;
    }
    .brand-mark {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      border-radius: 11px;
      color: #071020;
      background: linear-gradient(135deg, var(--cyan), var(--violet));
      box-shadow: 0 0 24px rgba(102, 221, 255, .35);
      font-size: .78rem;
      font-weight: 900;
    }
    .segment-nav {
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 5px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: rgba(22, 29, 63, .62);
      overflow-x: auto;
      scrollbar-width: none;
    }
    .segment-nav::-webkit-scrollbar { display: none; }
    .segment-nav a {
      min-height: 40px;
      display: inline-flex;
      align-items: center;
      padding: 0 15px;
      border-radius: 10px;
      color: var(--muted);
      font-size: .88rem;
      white-space: nowrap;
      transition: .25s ease;
    }
    .segment-nav a:hover, .segment-nav a:focus, .segment-nav a.active {
      color: var(--text);
      background: rgba(102, 221, 255, .12);
      box-shadow: inset 0 -2px var(--cyan);
      outline: none;
    }
    .nav-action { margin-left: auto; flex: 0 0 auto; }
    .button-glow, .button-ghost {
      min-height: 46px;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      gap: 8px;
      padding: 0 20px;
      border-radius: 12px;
      font-weight: 800;
      transition: transform .25s, box-shadow .25s, background .25s;
    }
    .button-glow {
      color: #071020;
      background: linear-gradient(110deg, var(--cyan), #a4d8ff 48%, var(--violet));
      box-shadow: 0 10px 28px rgba(75, 174, 255, .25);
    }
    .button-ghost {
      color: var(--text);
      border: 1px solid var(--line-bright);
      background: rgba(38, 54, 108, .34);
    }
    .button-glow:hover, .button-ghost:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(86, 180, 255, .3); }
    .button-glow:active, .button-ghost:active { transform: translateY(0); }
    a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid rgba(117, 230, 193, .8); outline-offset: 3px; }

    .hero { padding: 84px 0 64px; }
    .hero-stage {
      position: relative;
      min-height: 520px;
      display: flex;
      align-items: center;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 28px;
      background:
        linear-gradient(90deg, rgba(7, 10, 29, .98) 0%, rgba(10, 15, 40, .86) 48%, rgba(16, 21, 52, .5) 100%),
        radial-gradient(circle at 78% 44%, rgba(104, 93, 226, .46), transparent 25rem);
      box-shadow: var(--shadow);
    }
    .hero-stage::after {
      content: "";
      position: absolute;
      width: 54%;
      height: 130%;
      right: -12%;
      top: -16%;
      opacity: .64;
      background: repeating-linear-gradient(118deg, transparent 0 18px, rgba(102, 221, 255, .06) 19px 20px, transparent 21px 42px);
      transform: rotate(-8deg);
    }
    .hero-copy { position: relative; z-index: 2; max-width: 690px; padding: 64px; }
    .hero h1 { max-width: 680px; margin: 18px 0 22px; font-size: clamp(2.7rem, 6vw, 5.4rem); line-height: 1.08; letter-spacing: -.075em; }
    .hero h1 span { color: var(--cyan); text-shadow: 0 0 28px rgba(102, 221, 255, .22); }
    .hero-copy > p { max-width: 640px; color: var(--muted); font-size: 1.08rem; margin-bottom: 28px; }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
    .hero-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
    .meta-pill, .tag {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      min-height: 30px;
      padding: 3px 10px;
      border: 1px solid var(--line);
      border-radius: 8px;
      color: var(--muted);
      background: rgba(30, 40, 82, .48);
      font-size: .78rem;
    }
    .meta-pill strong { color: var(--green); }
    .hero-console {
      position: absolute;
      z-index: 1;
      width: 365px;
      right: 8%;
      top: 50%;
      transform: translateY(-50%) rotate(4deg);
      padding: 19px;
      border-radius: 20px;
      border: 1px solid rgba(129, 184, 255, .3);
      background: rgba(13, 20, 52, .82);
      box-shadow: 0 24px 70px rgba(0,0,0,.46), 0 0 35px rgba(111, 100, 255, .18);
    }
    .console-top { display:flex; justify-content:space-between; color:var(--subtle); font-size:.75rem; margin-bottom:15px; }
    .console-preview { height: 190px; border-radius: 13px; position:relative; overflow:hidden; background: linear-gradient(135deg, #243b80, #211d58 46%, #10152f); }
    .console-preview::before { content:""; position:absolute; inset:0; background: radial-gradient(circle at 65% 35%, rgba(102,221,255,.5), transparent 18%), linear-gradient(125deg, transparent 30%, rgba(255,255,255,.08) 31% 33%, transparent 34%); }
    .play-dot { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:55px; height:55px; border-radius:50%; display:grid; place-items:center; color:#091127; background:var(--cyan); box-shadow:0 0 30px rgba(102,221,255,.55); }
    .console-lines { margin-top: 16px; display:grid; gap:9px; }
    .line { height: 9px; border-radius: 5px; background: rgba(146, 164, 228, .2); }
    .line.short { width: 58%; } .line.cyan { background: linear-gradient(90deg, var(--cyan), transparent); }

    .feature-layout { display:grid; grid-template-columns: 1.45fr .85fr; gap: 18px; }
    .feature-main { min-height: 320px; padding: 30px; border-radius: var(--radius); }
    .feature-main h3, .mini-card h3, .result-panel h3, .price-panel h3 { margin: 12px 0 8px; font-size: 1.45rem; }
    .feature-main p, .mini-card p, .result-panel p, .price-panel p { color: var(--muted); margin: 0; }
    .filter-bar { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:28px; padding:13px; border-radius:14px; background:rgba(5,9,27,.62); border:1px solid var(--line); }
    .filter-bar input { min-width: 190px; flex:1; border:0; color:var(--text); background:transparent; box-shadow:none; margin:0; padding:9px 10px; }
    .filter-bar input::placeholder { color: var(--subtle); }
    .filter-button { border:1px solid var(--line); color:var(--muted); background:rgba(41,53,105,.5); border-radius:9px; padding:8px 12px; }
    .filter-button:hover, .filter-button.active { color:var(--text); border-color:var(--cyan); background:rgba(102,221,255,.14); }
    .mini-stack { display:grid; gap:18px; }
    .mini-card { padding:23px; border-radius:var(--radius); }
    .mini-card .icon { color:var(--green); font-size:1.5rem; }
    .scene-rail { display:flex; gap:16px; overflow-x:auto; padding-bottom:12px; scrollbar-color: var(--violet) transparent; }
    .scene-card { min-width: 280px; flex:1; padding:24px; border-radius:var(--radius); }
    .scene-number { color:var(--cyan); font-size:2.2rem; font-weight:900; line-height:1; }
    .scene-card h3 { margin:19px 0 8px; font-size:1.15rem; }
    .scene-card p { color:var(--muted); font-size:.92rem; margin:0 0 18px; }
    .scene-card a { color:var(--cyan); font-size:.88rem; font-weight:800; }

    .result-panel { padding: 30px; border-radius:24px; }
    .result-toolbar { display:flex; justify-content:space-between; gap:15px; align-items:center; padding-bottom:20px; border-bottom:1px solid var(--line); }
    .status { color:var(--green); font-size:.82rem; }
    .result-grid { display:grid; grid-template-columns: 1.15fr .85fr .85fr; gap:14px; margin-top:22px; }
    .result-card { min-height:150px; padding:19px; display:flex; flex-direction:column; justify-content:space-between; border:1px solid var(--line); border-radius:14px; background:rgba(10,15,39,.72); }
    .result-card:first-child { min-height:220px; background:linear-gradient(145deg, rgba(37,60,125,.7), rgba(11,16,41,.84)); }
    .result-card h4 { margin:12px 0 5px; font-size:1rem; }
    .result-card small { color:var(--subtle); }
    .result-label { display:flex; justify-content:space-between; color:var(--cyan); font-size:.75rem; }
    .result-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }

    .price-layout { display:grid; grid-template-columns: 1.15fr .85fr; gap:18px; }
    .price-panel { padding:34px; border-radius:24px; }
    .price-panel.primary { border-color: rgba(102,221,255,.46); background:linear-gradient(145deg, rgba(31,54,111,.78), rgba(13,18,43,.85)); }
    .price-line { display:flex; justify-content:space-between; align-items:baseline; margin:24px 0; padding-bottom:18px; border-bottom:1px solid var(--line); }
    .price-line strong { font-size:2rem; color:var(--cyan); }
    .plain-list { list-style:none; padding:0; margin:20px 0 26px; }
    .plain-list li { padding:8px 0; color:var(--muted); }
    .plain-list li::before { content:"✓"; color:var(--green); margin-right:10px; }
    .notice { padding:14px 16px; border-left:3px solid var(--violet); color:var(--muted); background:rgba(122,105,231,.1); font-size:.88rem; }
    .faq-list { display:grid; gap:12px; max-width:900px; }
    .faq-item { border:1px solid var(--line); border-radius:14px; overflow:hidden; background:rgba(20,27,61,.58); }
    .faq-question { width:100%; border:0; color:var(--text); background:transparent; text-align:left; padding:20px 22px; display:flex; justify-content:space-between; font-weight:800; }
    .faq-question span:last-child { color:var(--cyan); font-size:1.3rem; }
    .faq-answer { display:none; padding:0 22px 20px; color:var(--muted); }
    .faq-item.open .faq-answer { display:block; }
    .faq-item.open .faq-question { color:var(--cyan); }
    .cta {
      padding:62px 30px;
      text-align:center;
      border-radius:26px;
      background: radial-gradient(circle at 50% 0%, rgba(102,221,255,.18), transparent 45%), linear-gradient(140deg, rgba(37,45,99,.78), rgba(14,18,44,.9));
    }
    .cta h2 { margin:0 0 12px; font-size:clamp(1.8rem,4vw,2.8rem); }
    .cta p { max-width:620px; margin:0 auto 25px; color:var(--muted); }
    .cta-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; }
    footer { padding:56px 0 28px; border-top:1px solid var(--line); background:rgba(4,7,18,.74); }
    .footer-grid { display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:30px; }
    .footer-brand p { color:var(--muted); max-width:300px; font-size:.9rem; }
    footer h3 { margin:0 0 13px; font-size:.95rem; }
    .footer-links { display:grid; gap:8px; color:var(--muted); font-size:.9rem; }
    .footer-links a:hover { color:var(--cyan); }
    .footer-bottom { display:flex; justify-content:space-between; gap:15px; padding-top:28px; margin-top:30px; border-top:1px solid var(--line); color:var(--subtle); font-size:.78rem; }
    .age-modal { position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(2,4,13,.82); backdrop-filter:blur(12px); }
    .age-modal.hidden { display:none; }
    .age-box { max-width:480px; padding:34px; border-radius:22px; text-align:center; }
    .age-box h2 { margin:0 0 10px; }
    .age-box p { color:var(--muted); font-size:.9rem; }
    .age-actions { display:flex; justify-content:center; gap:10px; margin-top:22px; }
    @media (max-width: 1024px) {
      .hero-console { right:3%; opacity:.48; }
      .hero-copy { max-width:650px; }
      .result-grid { grid-template-columns:1fr 1fr; }
      .result-card:first-child { grid-column:span 2; }
    }
    @media (max-width: 768px) {
      .container { width:min(calc(100% - 28px), var(--container)); }
      .site-header { padding:10px 0; }
      .nav-shell { flex-wrap:wrap; gap:10px; }
      .brand { width:100%; }
      .segment-nav { order:3; width:100%; }
      .nav-action { position:absolute; right:14px; top:14px; }
      .nav-action .button-glow { min-height:38px; padding:0 12px; font-size:.78rem; }
      .hero { padding-top:36px; }
      .hero-stage { min-height:600px; }
      .hero-copy { padding:38px 24px; align-self:flex-start; }
      .hero h1 { font-size:clamp(2.45rem,12vw,4rem); }
      .hero-console { width:calc(100% - 44px); right:22px; top:auto; bottom:22px; transform:rotate(0); opacity:1; }
      .feature-layout, .price-layout { grid-template-columns:1fr; }
      .section { padding:72px 0; }
      .result-toolbar { align-items:flex-start; flex-direction:column; }
      .footer-grid { grid-template-columns:1fr 1fr; }
    }
    @media (max-width: 520px) {
      .hero-actions a, .cta-actions a { width:100%; }
      .hero-meta { display:grid; grid-template-columns:1fr 1fr; }
      .meta-pill { justify-content:center; }
      .result-grid { grid-template-columns:1fr; }
      .result-card:first-child { grid-column:auto; }
      .footer-grid { grid-template-columns:1fr; }
      .footer-bottom { flex-direction:column; }
      .age-actions { flex-direction:column; }
      .age-actions a, .age-actions button { width:100%; }
    }

/* roulang page: category2 */
:root {
      --bg:#080b1c;
      --bg-deep:#060814;
      --surface:rgba(19,25,55,.78);
      --surface-strong:#151c3e;
      --surface-soft:rgba(35,43,86,.48);
      --line:rgba(139,162,255,.18);
      --line-bright:rgba(104,218,255,.58);
      --text:#f4f6ff;
      --muted:#aab4d4;
      --subtle:#727da4;
      --cyan:#66ddff;
      --violet:#9b86ff;
      --green:#75e6c1;
      --danger:#ff9bba;
      --radius:18px;
      --shadow:0 20px 70px rgba(0,0,0,.34),0 0 34px rgba(65,89,210,.1);
      --container:1180px;
    }
    * { box-sizing:border-box; }
    html { scroll-behavior:smooth; }
    body {
      margin:0;
      min-height:100vh;
      color:var(--text);
      background:
        radial-gradient(circle at 78% 8%,rgba(91,75,193,.2),transparent 28rem),
        radial-gradient(circle at 12% 36%,rgba(30,117,178,.12),transparent 24rem),
        linear-gradient(145deg,var(--bg-deep),var(--bg) 54%,#0c1028);
      font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
      font-size:16px;
      line-height:1.75;
    }
    body::before {
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      opacity:.18;
      background-image:linear-gradient(rgba(129,160,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(129,160,255,.07) 1px,transparent 1px);
      background-size:48px 48px;
      mask-image:linear-gradient(to bottom,black,transparent 68%);
    }
    a { color:inherit; text-decoration:none; }
    button,input,select { font:inherit; }
    button { cursor:pointer; }
    .container { width:min(calc(100% - 40px),var(--container)); margin:0 auto; }
    .eyebrow {
      display:inline-flex;
      gap:8px;
      align-items:center;
      color:var(--cyan);
      font-size:.76rem;
      font-weight:800;
      letter-spacing:.16em;
    }
    .eyebrow::before {
      content:"";
      width:25px;
      height:1px;
      background:var(--cyan);
      box-shadow:0 0 12px var(--cyan);
    }
    .section { position:relative; padding:92px 0; }
    .section-head { max-width:700px; margin-bottom:34px; }
    .section-head h2 { margin:12px 0; font-size:clamp(1.9rem,4vw,3rem); line-height:1.18; letter-spacing:-.04em; }
    .section-head p { margin:0; color:var(--muted); }
    .site-header {
      position:sticky;
      top:0;
      z-index:30;
      padding:16px 0;
      background:rgba(6,8,20,.76);
      border-bottom:1px solid rgba(139,162,255,.1);
      backdrop-filter:blur(20px);
    }
    .nav-shell { min-height:58px; display:flex; align-items:center; gap:24px; }
    .brand { display:inline-flex; align-items:center; gap:11px; flex:0 0 auto; font-weight:900; letter-spacing:-.04em; font-size:1.08rem; white-space:nowrap; }
    .brand-mark {
      width:34px;
      height:34px;
      display:grid;
      place-items:center;
      border-radius:11px;
      color:#071020;
      background:linear-gradient(135deg,var(--cyan),var(--violet));
      box-shadow:0 0 24px rgba(102,221,255,.35);
      font-size:.78rem;
      font-weight:900;
    }
    .segment-nav {
      display:flex;
      align-items:center;
      gap:5px;
      padding:5px;
      border:1px solid var(--line);
      border-radius:14px;
      background:rgba(22,29,63,.62);
      overflow-x:auto;
      scrollbar-width:none;
    }
    .segment-nav::-webkit-scrollbar { display:none; }
    .segment-nav a {
      min-height:40px;
      display:inline-flex;
      align-items:center;
      padding:0 15px;
      border-radius:10px;
      color:var(--muted);
      font-size:.88rem;
      white-space:nowrap;
      transition:.25s ease;
    }
    .segment-nav a:hover,.segment-nav a:focus,.segment-nav a.active {
      color:var(--text);
      background:rgba(102,221,255,.12);
      box-shadow:inset 0 -2px var(--cyan);
      outline:none;
    }
    .nav-action { margin-left:auto; flex:0 0 auto; }
    .button-glow,.button-ghost {
      min-height:46px;
      display:inline-flex;
      justify-content:center;
      align-items:center;
      gap:8px;
      padding:0 20px;
      border-radius:12px;
      font-weight:800;
      transition:transform .25s,box-shadow .25s,background .25s;
    }
    .button-glow {
      color:#071020;
      background:linear-gradient(110deg,var(--cyan),#a4d8ff 48%,var(--violet));
      box-shadow:0 10px 28px rgba(75,174,255,.25);
    }
    .button-ghost { color:var(--text); border:1px solid var(--line-bright); background:rgba(38,54,108,.34); }
    .button-glow:hover,.button-ghost:hover { transform:translateY(-3px); box-shadow:0 14px 34px rgba(86,180,255,.3); }
    .button-glow:active,.button-ghost:active { transform:translateY(0); }
    a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible { outline:3px solid rgba(117,230,193,.8); outline-offset:3px; }
    .hero { padding:76px 0 54px; }
    .hero-panel {
      position:relative;
      overflow:hidden;
      padding:64px;
      border:1px solid var(--line);
      border-radius:28px;
      background:
        linear-gradient(110deg,rgba(10,14,39,.98),rgba(18,25,63,.78)),
        radial-gradient(circle at 85% 35%,rgba(155,134,255,.35),transparent 25rem);
      box-shadow:var(--shadow);
    }
    .hero-panel::after {
      content:"";
      position:absolute;
      right:-8%;
      top:-25%;
      width:48%;
      height:155%;
      opacity:.56;
      transform:rotate(12deg);
      background:repeating-linear-gradient(115deg,transparent 0 17px,rgba(102,221,255,.07) 18px 20px,transparent 21px 43px);
    }
    .hero-copy { position:relative; z-index:2; max-width:720px; }
    h1 { margin:16px 0 18px; font-size:clamp(2.45rem,6vw,5rem); line-height:1.08; letter-spacing:-.075em; }
    h1 span { color:var(--cyan); text-shadow:0 0 28px rgba(102,221,255,.22); }
    .hero-copy p { max-width:680px; margin:0 0 28px; color:var(--muted); font-size:1.08rem; }
    .hero-actions { display:flex; flex-wrap:wrap; gap:12px; }
    .status-row { display:flex; flex-wrap:wrap; gap:10px; margin-top:30px; }
    .meta-pill,.tag {
      display:inline-flex;
      align-items:center;
      gap:7px;
      padding:5px 11px;
      border:1px solid var(--line);
      border-radius:8px;
      color:var(--muted);
      background:rgba(20,29,67,.7);
      font-size:.78rem;
    }
    .meta-pill::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 12px var(--green); }
    .hero-index {
      position:absolute;
      z-index:2;
      right:6%;
      bottom:38px;
      width:290px;
      padding:18px;
      border:1px solid var(--line-bright);
      border-radius:16px;
      background:rgba(9,14,38,.72);
      box-shadow:0 0 35px rgba(91,129,255,.16);
    }
    .hero-index small { color:var(--subtle); }
    .index-line { height:7px; margin:11px 0; border-radius:9px; background:linear-gradient(90deg,var(--cyan) 72%,rgba(255,255,255,.08) 72%); }
    .index-line.short { background:linear-gradient(90deg,var(--violet) 48%,rgba(255,255,255,.08) 48%); }
    .filter-layout { display:grid; grid-template-columns:280px minmax(0,1fr); gap:24px; align-items:start; }
    .glass-card {
      border:1px solid var(--line);
      border-radius:var(--radius);
      background:var(--surface);
      box-shadow:var(--shadow);
      backdrop-filter:blur(18px);
    }
    .filter-card { position:sticky; top:110px; padding:22px; }
    .filter-card h3,.tag-panel h3 { margin:0 0 18px; font-size:1.12rem; }
    .filter-label { display:block; margin:18px 0 7px; color:var(--muted); font-size:.84rem; }
    .filter-card input,.filter-card select {
      width:100%;
      height:45px;
      padding:0 12px;
      border:1px solid var(--line);
      border-radius:10px;
      color:var(--text);
      background:rgba(6,10,29,.72);
    }
    .filter-card input::placeholder { color:var(--subtle); }
    .filter-card select option { color:#111; }
    .filter-submit { width:100%; margin-top:22px; border:0; }
    .notice {
      display:flex;
      gap:10px;
      margin-top:18px;
      padding:12px;
      border-left:2px solid var(--green);
      color:var(--muted);
      background:rgba(117,230,193,.06);
      font-size:.8rem;
    }
    .result-head { display:flex; align-items:end; justify-content:space-between; gap:15px; margin-bottom:18px; }
    .result-head h2 { margin:0; font-size:1.55rem; }
    .result-head p { margin:4px 0 0; color:var(--subtle); font-size:.86rem; }
    .sort-chip { color:var(--cyan); font-size:.84rem; white-space:nowrap; }
    .index-wall { display:grid; grid-template-columns:repeat(12,1fr); gap:16px; }
    .entry {
      position:relative;
      min-height:190px;
      display:flex;
      flex-direction:column;
      justify-content:flex-end;
      overflow:hidden;
      padding:20px;
      border:1px solid var(--line);
      border-radius:16px;
      background:linear-gradient(145deg,rgba(28,39,89,.84),rgba(11,16,42,.94));
      transition:transform .25s,border-color .25s,box-shadow .25s;
    }
    .entry::before {
      content:"";
      position:absolute;
      inset:0 0 42% 0;
      background:radial-gradient(circle at 65% 35%,rgba(102,221,255,.27),transparent 58%),linear-gradient(135deg,rgba(155,134,255,.24),transparent);
    }
    .entry::after { content:""; position:absolute; left:18px; top:22px; width:42%; height:1px; background:var(--cyan); box-shadow:0 0 15px var(--cyan); }
    .entry > * { position:relative; z-index:1; }
    .entry:hover { transform:translateY(-4px); border-color:var(--line-bright); box-shadow:0 18px 35px rgba(0,0,0,.24),0 0 24px rgba(102,221,255,.1); }
    .entry.large { grid-column:span 7; min-height:270px; }
    .entry.medium { grid-column:span 5; min-height:270px; }
    .entry.small { grid-column:span 4; min-height:210px; }
    .entry.wide { grid-column:span 8; min-height:210px; }
    .entry-no { color:var(--cyan); font-size:.76rem; letter-spacing:.12em; }
    .entry h3 { margin:6px 0 4px; font-size:1.12rem; }
    .entry p { margin:0; color:var(--muted); font-size:.83rem; line-height:1.55; }
    .entry-foot { display:flex; justify-content:space-between; gap:8px; align-items:center; margin-top:14px; }
    .entry-link { color:var(--cyan); font-size:.8rem; font-weight:800; }
    .tag-panel { margin-top:24px; padding:22px; }
    .tag-cloud { display:flex; flex-wrap:wrap; gap:9px; }
    .tag-cloud a:hover { color:var(--text); border-color:var(--line-bright); background:rgba(102,221,255,.12); }
    .path-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:24px; }
    .path-card { padding:28px; }
    .path-list { list-style:none; margin:0; padding:0; }
    .path-list li { display:flex; gap:15px; padding:16px 0; border-bottom:1px solid var(--line); }
    .path-list li:last-child { border-bottom:0; }
    .step-no { color:var(--cyan); font-weight:900; }
    .path-list strong { display:block; margin-bottom:3px; }
    .path-list span { color:var(--muted); font-size:.88rem; }
    .demo-panel { min-height:100%; padding:28px; background:linear-gradient(150deg,rgba(36,44,95,.72),rgba(14,19,47,.86)); }
    .demo-screen { margin-top:24px; padding:15px; border:1px solid var(--line-bright); border-radius:14px; background:rgba(5,9,27,.72); }
    .screen-top { display:flex; justify-content:space-between; color:var(--subtle); font-size:.75rem; }
    .screen-bar { height:8px; margin:16px 0 12px; border-radius:9px; background:linear-gradient(90deg,var(--violet),var(--cyan) 58%,rgba(255,255,255,.08) 58%); }
    .screen-row { display:flex; gap:7px; margin-top:10px; }
    .screen-row i { display:block; height:42px; flex:1; border-radius:7px; background:linear-gradient(145deg,#273979,#111936); }
    .faq-list { max-width:880px; }
    .faq-item { margin-bottom:10px; overflow:hidden; border:1px solid var(--line); border-radius:14px; background:var(--surface); }
    .faq-item summary { padding:19px 22px; cursor:pointer; font-weight:800; list-style:none; }
    .faq-item summary::-webkit-details-marker { display:none; }
    .faq-item summary::after { content:"＋"; float:right; color:var(--cyan); font-size:1.2rem; }
    .faq-item[open] summary::after { content:"−"; }
    .faq-answer { padding:0 22px 20px; color:var(--muted); font-size:.92rem; }
    .cta {
      padding:58px 0;
      background:linear-gradient(110deg,rgba(26,38,87,.62),rgba(37,27,85,.5));
      border-top:1px solid var(--line);
      border-bottom:1px solid var(--line);
    }
    .cta-inner { display:flex; align-items:center; justify-content:space-between; gap:28px; }
    .cta h2 { margin:0 0 8px; font-size:clamp(1.7rem,3vw,2.6rem); }
    .cta p { margin:0; color:var(--muted); }
    footer { padding:54px 0 22px; background:rgba(4,6,17,.74); }
    .footer-grid { display:grid; grid-template-columns:1.5fr repeat(3,1fr); gap:30px; padding-bottom:42px; }
    .footer-brand p { max-width:300px; color:var(--muted); font-size:.88rem; }
    footer h3 { margin:5px 0 13px; color:var(--text); font-size:.92rem; }
    .footer-links { display:grid; gap:8px; color:var(--muted); font-size:.85rem; }
    .footer-links a:hover { color:var(--cyan); }
    .footer-bottom { display:flex; justify-content:space-between; gap:20px; padding-top:18px; border-top:1px solid var(--line); color:var(--subtle); font-size:.78rem; }
    @media (max-width:1024px) {
      .hero-panel { padding:52px; }
      .hero-index { right:4%; }
      .entry.large,.entry.medium { grid-column:span 6; }
      .entry.small,.entry.wide { grid-column:span 6; }
    }
    @media (max-width:768px) {
      .container { width:min(calc(100% - 28px),var(--container)); }
      .nav-shell { gap:12px; flex-wrap:wrap; }
      .brand { margin-right:auto; }
      .segment-nav { order:3; width:100%; }
      .nav-action { margin-left:0; }
      .nav-action .button-glow { min-height:42px; padding:0 14px; font-size:.86rem; }
      .hero { padding-top:42px; }
      .hero-panel { padding:38px 25px 190px; }
      .hero-index { left:25px; right:25px; bottom:27px; width:auto; }
      .section { padding:70px 0; }
      .filter-layout,.path-grid { grid-template-columns:1fr; }
      .filter-card { position:static; }
      .index-wall { grid-template-columns:1fr 1fr; }
      .entry.large,.entry.medium,.entry.small,.entry.wide { grid-column:span 1; min-height:220px; }
      .entry.large { grid-column:span 2; }
      .cta-inner { align-items:flex-start; flex-direction:column; }
      .footer-grid { grid-template-columns:1fr 1fr; }
      .footer-brand { grid-column:span 2; }
    }
    @media (max-width:520px) {
      body { font-size:15px; }
      .hero-panel { padding:32px 20px 188px; border-radius:20px; }
      h1 { font-size:2.55rem; }
      .hero-actions,.hero-actions a { width:100%; }
      .hero-actions a { text-align:center; }
      .index-wall { display:flex; flex-direction:column; }
      .entry.large,.entry.medium,.entry.small,.entry.wide { min-height:205px; }
      .result-head { align-items:flex-start; flex-direction:column; }
      .footer-grid { grid-template-columns:1fr; }
      .footer-brand { grid-column:auto; }
      .footer-bottom { flex-direction:column; gap:5px; }
    }

/* roulang page: category1 */
:root{
      --bg:#080b1c;--bg-deep:#060814;--surface:rgba(19,25,55,.78);
      --surface-strong:#151c3e;--surface-soft:rgba(35,43,86,.48);
      --line:rgba(139,162,255,.18);--line-bright:rgba(104,218,255,.58);
      --text:#f4f6ff;--muted:#aab4d4;--subtle:#727da4;--cyan:#66ddff;
      --violet:#9b86ff;--green:#75e6c1;--danger:#ff9bba;--radius:18px;
      --shadow:0 20px 70px rgba(0,0,0,.34),0 0 34px rgba(65,89,210,.1);
      --container:1180px
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;min-height:100vh;color:var(--text);font:16px/1.75 "Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;background:
      radial-gradient(circle at 78% 8%,rgba(91,75,193,.2),transparent 28rem),
      radial-gradient(circle at 12% 36%,rgba(30,117,178,.12),transparent 24rem),
      linear-gradient(145deg,var(--bg-deep),var(--bg) 54%,#0c1028)}
    body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.18;background-image:
      linear-gradient(rgba(129,160,255,.07) 1px,transparent 1px),
      linear-gradient(90deg,rgba(129,160,255,.07) 1px,transparent 1px);
      background-size:48px 48px;mask-image:linear-gradient(to bottom,#000,transparent 68%)}
    a{color:inherit;text-decoration:none}button,input{font:inherit}button{cursor:pointer}img{max-width:100%}
    .container{width:min(calc(100% - 40px),var(--container));margin:0 auto}
    .site-header{position:sticky;top:0;z-index:30;padding:16px 0;background:rgba(6,8,20,.72);border-bottom:1px solid rgba(139,162,255,.1);backdrop-filter:blur(20px)}
    .nav-shell{min-height:58px;display:flex;align-items:center;gap:24px}
    .brand{display:inline-flex;align-items:center;gap:11px;flex:0 0 auto;font-weight:900;letter-spacing:-.04em;font-size:1.08rem;white-space:nowrap}
    .brand-mark{width:34px;height:34px;display:grid;place-items:center;border-radius:11px;color:#071020;background:linear-gradient(135deg,var(--cyan),var(--violet));box-shadow:0 0 24px rgba(102,221,255,.35);font-size:.78rem;font-weight:900}
    .segment-nav{display:flex;align-items:center;gap:5px;padding:5px;border:1px solid var(--line);border-radius:14px;background:rgba(22,29,63,.62);overflow-x:auto;scrollbar-width:none}
    .segment-nav::-webkit-scrollbar{display:none}
    .segment-nav a{min-height:40px;display:inline-flex;align-items:center;padding:0 15px;border-radius:10px;color:var(--muted);font-size:.88rem;white-space:nowrap;transition:.25s ease}
    .segment-nav a:hover,.segment-nav a:focus,.segment-nav a.active{color:var(--text);background:rgba(102,221,255,.12);box-shadow:inset 0 -2px var(--cyan);outline:none}
    .nav-action{margin-left:auto;flex:0 0 auto}
    .button-glow,.button-ghost{min-height:46px;display:inline-flex;justify-content:center;align-items:center;gap:8px;padding:0 20px;border-radius:12px;font-weight:800;transition:transform .25s,box-shadow .25s,background .25s}
    .button-glow{color:#071020;background:linear-gradient(110deg,var(--cyan),#a4d8ff 48%,var(--violet));box-shadow:0 10px 28px rgba(75,174,255,.25)}
    .button-ghost{color:var(--text);border:1px solid var(--line-bright);background:rgba(38,54,108,.34)}
    .button-glow:hover,.button-ghost:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(86,180,255,.3)}
    .button-glow:active,.button-ghost:active{transform:translateY(0)}
    a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid rgba(117,230,193,.8);outline-offset:3px}
    .section{padding:92px 0;position:relative}.section-head{max-width:720px;margin-bottom:38px}
    .eyebrow{display:inline-flex;gap:8px;align-items:center;color:var(--cyan);font-size:.76rem;font-weight:800;letter-spacing:.16em}
    .eyebrow:before{content:"";width:25px;height:1px;background:var(--cyan);box-shadow:0 0 12px var(--cyan)}
    h1,h2,h3,p{margin-top:0}.section-head h2{margin:12px 0;font-size:clamp(1.9rem,4vw,3rem);line-height:1.18;letter-spacing:-.04em}
    .section-head p,.muted{color:var(--muted)}
    .category-hero{padding:78px 0 46px}
    .hero-panel{position:relative;overflow:hidden;padding:58px 62px;border:1px solid var(--line);border-radius:28px;background:
      linear-gradient(115deg,rgba(12,17,44,.96),rgba(24,28,71,.78)),radial-gradient(circle at 82% 30%,rgba(155,134,255,.34),transparent 24rem);box-shadow:var(--shadow)}
    .hero-panel:after{content:"";position:absolute;right:-10%;top:-40%;width:58%;height:190%;opacity:.45;transform:rotate(16deg);background:repeating-linear-gradient(110deg,transparent 0 20px,rgba(102,221,255,.08) 21px 22px,transparent 23px 44px)}
    .hero-content{position:relative;z-index:1;max-width:750px}
    h1{font-size:clamp(2.5rem,5.5vw,4.8rem);line-height:1.08;letter-spacing:-.07em;margin:17px 0 20px}
    h1 span{color:var(--cyan);text-shadow:0 0 28px rgba(102,221,255,.2)}
    .hero-content p{color:var(--muted);font-size:1.08rem;max-width:680px;margin-bottom:26px}
    .hero-actions{display:flex;flex-wrap:wrap;gap:12px}
    .meta-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
    .tag,.status{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border:1px solid var(--line);border-radius:8px;background:rgba(42,52,104,.5);color:#cdd6f3;font-size:.78rem}
    .status:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green)}
    .toolbar{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:16px;border:1px solid var(--line);border-radius:16px;background:var(--surface);box-shadow:var(--shadow);margin-bottom:30px}
    .search-box{display:flex;align-items:center;gap:10px;flex:1 1 310px;min-height:48px;padding:0 15px;border:1px solid var(--line);border-radius:11px;background:rgba(5,9,28,.72)}
    .search-box span{color:var(--cyan);font-size:1.1rem}.search-box input{width:100%;border:0;outline:0;color:var(--text);background:transparent}.search-box input::placeholder{color:var(--subtle)}
    .filter-tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}.filter-tabs::-webkit-scrollbar{display:none}
    .filter-tab{min-height:40px;padding:0 14px;border:1px solid transparent;border-radius:9px;color:var(--muted);background:transparent;white-space:nowrap}
    .filter-tab:hover,.filter-tab.active{color:var(--text);border-color:var(--line-bright);background:rgba(102,221,255,.1);box-shadow:0 0 17px rgba(102,221,255,.1)}
    .feature-card{display:grid;grid-template-columns:1.2fr 1fr;min-height:300px;overflow:hidden;border:1px solid rgba(102,221,255,.35);border-radius:20px;background:var(--surface);box-shadow:var(--shadow);margin-bottom:20px}
    .cover{position:relative;min-height:230px;background:linear-gradient(135deg,#101941,#343575 46%,#162f59);overflow:hidden}
    .cover:before{content:"";position:absolute;inset:18%;border:1px solid rgba(102,221,255,.2);transform:skewY(-12deg);box-shadow:0 0 55px rgba(102,221,255,.2)}
    .cover:after{content:"精选索引";position:absolute;left:24px;bottom:20px;color:rgba(244,246,255,.8);font-weight:800;letter-spacing:.15em}
    .feature-info{padding:31px}.feature-info h3{font-size:1.65rem;margin:11px 0 10px}.feature-info p{color:var(--muted);margin-bottom:20px}
    .compact-list{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
    .index-card{display:grid;grid-template-columns:116px 1fr;min-height:152px;overflow:hidden;border:1px solid var(--line);border-radius:16px;background:rgba(19,25,55,.66);transition:.25s ease}
    .index-card:hover{transform:translateY(-4px);border-color:var(--line-bright);box-shadow:0 15px 34px rgba(0,0,0,.25)}
    .index-cover{background:linear-gradient(145deg,#1b2657,#4b3a78 55%,#174d6c);position:relative}
    .index-cover:after{content:"夜间";position:absolute;bottom:12px;left:12px;font-size:.73rem;color:#dce8ff}
    .index-info{padding:17px}.index-info h3{font-size:1.03rem;margin:0 0 5px}.index-info p{color:var(--muted);font-size:.86rem;line-height:1.55;margin:8px 0 11px}
    .mini-line{display:flex;gap:7px;flex-wrap:wrap}.mini-line .tag{font-size:.7rem;padding:3px 7px}
    .notice{display:flex;gap:15px;align-items:flex-start;padding:20px;border:1px solid rgba(117,230,193,.22);border-radius:16px;background:rgba(30,70,82,.18);color:var(--muted)}
    .notice strong{display:block;color:var(--green);margin-bottom:3px}
    .path-grid{display:grid;grid-template-columns:1fr 1.35fr 1fr;gap:16px;align-items:stretch}
    .path-step{padding:25px;border:1px solid var(--line);border-radius:18px;background:var(--surface-soft);position:relative}
    .path-step:nth-child(2){transform:translateY(22px);background:rgba(35,43,86,.72);border-color:rgba(155,134,255,.35)}
    .step-no{color:var(--cyan);font-weight:900;font-size:.8rem;letter-spacing:.12em}.path-step h3{margin:13px 0 7px}.path-step p{color:var(--muted);font-size:.9rem;margin:0}
    .result-panel{display:grid;grid-template-columns:1.5fr .8fr;gap:20px;padding:26px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(135deg,rgba(21,28,62,.9),rgba(19,25,55,.56));box-shadow:var(--shadow)}
    .result-main h3{font-size:1.5rem;margin:8px 0}.result-main p{color:var(--muted)}.result-bars{display:grid;gap:12px;margin-top:22px}.result-bars div{height:9px;border-radius:8px;background:linear-gradient(90deg,var(--cyan),var(--violet));box-shadow:0 0 17px rgba(102,221,255,.2)}
    .result-bars div:nth-child(2){width:76%}.result-bars div:nth-child(3){width:54%}
    .result-side{padding:20px;border-left:1px solid var(--line)}.result-side h3{margin:0 0 14px}.result-side ul{margin:0;padding:0;list-style:none}.result-side li{padding:10px 0;border-bottom:1px solid var(--line);color:var(--muted)}.result-side li:last-child{border:0}
    .access-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:18px}.access-card{padding:31px;border:1px solid var(--line);border-radius:20px;background:var(--surface);box-shadow:var(--shadow)}.access-card.primary{border-color:rgba(102,221,255,.4);background:linear-gradient(145deg,rgba(28,47,89,.82),rgba(19,25,55,.8))}
    .access-card h3{font-size:1.55rem;margin:5px 0 12px}.access-card p{color:var(--muted)}.access-list{padding:0;margin:20px 0;list-style:none}.access-list li{padding:9px 0;color:#d8def5;border-bottom:1px solid var(--line)}.access-list li:before{content:"✓";color:var(--green);margin-right:9px}
    .faq-list{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--surface)}details{border-bottom:1px solid var(--line)}details:last-child{border-bottom:0}summary{padding:20px 23px;cursor:pointer;font-weight:800;list-style:none;position:relative;padding-right:50px}summary::-webkit-details-marker{display:none}summary:after{content:"+";position:absolute;right:22px;color:var(--cyan);font-size:1.4rem;font-weight:400}details[open] summary:after{content:"−"}details p{margin:0;padding:0 23px 20px;color:var(--muted);max-width:850px}
    .cta{padding:75px 0}.cta-box{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:38px 42px;border:1px solid rgba(102,221,255,.3);border-radius:22px;background:radial-gradient(circle at 85% 20%,rgba(155,134,255,.22),transparent 22rem),var(--surface);box-shadow:var(--shadow)}.cta-box h2{margin:0 0 8px;font-size:2rem}.cta-box p{margin:0;color:var(--muted)}
    footer{padding:55px 0 22px;background:rgba(4,6,17,.72);border-top:1px solid var(--line)}.footer-grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:35px}.footer-brand p{max-width:310px;color:var(--muted);font-size:.9rem;margin-top:16px}.footer-grid h3{font-size:.92rem;margin:5px 0 14px}.footer-links{display:grid;gap:8px;color:var(--muted);font-size:.88rem}.footer-links a:hover{color:var(--cyan)}.footer-bottom{display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap;margin-top:42px;padding-top:18px;border-top:1px solid var(--line);color:var(--subtle);font-size:.78rem}
    .age-modal{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:20px;background:rgba(3,5,15,.82);backdrop-filter:blur(12px)}.age-modal[hidden]{display:none}.age-box{max-width:470px;padding:34px;border:1px solid var(--line-bright);border-radius:22px;background:linear-gradient(145deg,#151c3e,#0c112b);box-shadow:0 25px 90px rgba(0,0,0,.55);text-align:center}.age-box h2{margin:0 0 10px}.age-box p{color:var(--muted);font-size:.92rem}.age-actions{display:flex;justify-content:center;gap:10px;margin-top:22px}
    @media(max-width:900px){.feature-card,.result-panel,.access-grid{grid-template-columns:1fr}.path-grid{grid-template-columns:1fr}.path-step:nth-child(2){transform:none}.result-side{border-left:0;border-top:1px solid var(--line)}.footer-grid{grid-template-columns:repeat(2,1fr)}}
    @media(max-width:680px){.container{width:min(calc(100% - 28px),var(--container))}.site-header{padding:10px 0}.nav-shell{gap:10px;flex-wrap:wrap}.brand{font-size:.98rem}.segment-nav{order:3;width:100%}.nav-action{margin-left:auto}.nav-action .button-glow{min-height:40px;padding:0 13px;font-size:.82rem}.category-hero{padding:44px 0 25px}.hero-panel{padding:35px 23px;border-radius:21px}h1{font-size:clamp(2.25rem,12vw,3.5rem)}.section{padding:65px 0}.compact-list{grid-template-columns:1fr}.index-card{grid-template-columns:100px 1fr}.feature-info{padding:23px}.toolbar{align-items:stretch}.search-box{flex-basis:100%}.cta-box{display:block;padding:28px 23px}.cta-box .button-glow{margin-top:20px}.footer-grid{grid-template-columns:1fr 1fr;gap:25px}.footer-brand{grid-column:1/-1}.footer-bottom{display:block}.footer-bottom span{display:block;margin:5px 0}.age-box{padding:27px 21px}}
    @media(max-width:420px){.footer-grid{grid-template-columns:1fr}.hero-actions a{width:100%}.age-actions{flex-direction:column}.age-actions a,.age-actions button{width:100%}}