/* roulang page: index */
:root{
      --bg:#070d1d;
      --bg-deep:#040916;
      --panel:rgba(14,27,55,.76);
      --panel-strong:#0e1b38;
      --panel-soft:rgba(20,40,78,.52);
      --primary:#59d9ed;
      --primary-strong:#27bddc;
      --violet:#8b83ff;
      --warm:#e49a82;
      --text:#edf5ff;
      --muted:#9aacc7;
      --weak:#657895;
      --line:rgba(137,181,235,.18);
      --radius:18px;
      --radius-sm:11px;
      --shadow:0 18px 60px rgba(0,0,0,.28);
      --glow:0 0 28px rgba(63,210,235,.18);
      --max:1260px;
      --space:clamp(72px,9vw,124px);
    }
    *,*:before,*:after{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      color:var(--text);
      background:
        radial-gradient(circle at 12% 6%,rgba(45,107,178,.18),transparent 28rem),
        radial-gradient(circle at 92% 18%,rgba(102,74,188,.13),transparent 28rem),
        var(--bg);
      font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
      line-height:1.75;
      letter-spacing:.01em;
      overflow-x:hidden;
    }
    body:before{
      content:"";position:fixed;inset:0;pointer-events:none;opacity:.23;
      background-image:linear-gradient(rgba(121,177,235,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(121,177,235,.035) 1px,transparent 1px);
      background-size:42px 42px;mask-image:linear-gradient(to bottom,#000,transparent 72%);
    }
    a{color:inherit;text-decoration:none}
    button,input{font:inherit}
    button{cursor:pointer}
    .container{width:min(var(--max),calc(100% - 40px));margin-inline:auto}
    .site-header{
      position:sticky;top:0;z-index:30;
      background:rgba(5,12,28,.82);backdrop-filter:blur(18px);
      border-bottom:1px solid var(--line);box-shadow:0 8px 30px rgba(0,0,0,.16)
    }
    .brand-row{min-height:70px;display:flex;align-items:center;justify-content:space-between;gap:24px}
    .brand{display:flex;align-items:center;gap:12px;min-width:0}
    .brand-mark{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;color:#06101d;background:linear-gradient(145deg,var(--primary),#9bdeff);font-weight:900;box-shadow:var(--glow)}
    .brand-name{font-weight:800;font-size:18px;white-space:nowrap}
    .brand-note{display:block;color:var(--weak);font-size:11px;line-height:1.2;margin-top:1px}
    .age-badge,.tag{display:inline-flex;align-items:center;border:1px solid rgba(228,154,130,.45);color:#f0b5a3;background:rgba(150,67,56,.14);border-radius:999px;padding:2px 8px;font-size:11px;line-height:1.4;white-space:nowrap}
    .nav-tools{display:flex;align-items:center;gap:10px}
    .search-mini{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:rgba(14,29,58,.7);border-radius:10px;padding:7px 11px;color:var(--muted)}
    .search-mini input{border:0;outline:0;background:transparent;color:var(--text);width:150px;font-size:13px}
    .search-mini input::placeholder{color:var(--weak)}
    .rule-btn{border:1px solid rgba(228,154,130,.35);background:rgba(150,67,56,.1);color:#e9b2a0;border-radius:10px;padding:8px 12px;font-size:13px}
    .channel-row{display:flex;align-items:center;gap:5px;overflow-x:auto;scrollbar-width:none;border-top:1px solid rgba(137,181,235,.08)}
    .channel-row::-webkit-scrollbar{display:none}
    .channel{position:relative;padding:11px 15px;color:var(--muted);font-size:13px;white-space:nowrap;transition:.25s}
    .channel:hover,.channel.active{color:var(--primary)}
    .channel.active:after{content:"";position:absolute;bottom:0;left:15px;right:15px;height:2px;background:var(--primary);box-shadow:0 0 12px var(--primary)}
    .hero{padding:62px 0 42px;position:relative}
    .hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:42px;align-items:stretch}
    .eyebrow{color:var(--primary);font-size:12px;letter-spacing:.15em;text-transform:uppercase;margin-bottom:14px}
    h1,h2,h3,p{margin-top:0}
    h1{font-size:clamp(38px,5.4vw,72px);line-height:1.12;letter-spacing:-.045em;margin-bottom:22px;max-width:720px}
    h2{font-size:clamp(26px,3vw,40px);line-height:1.25;letter-spacing:-.03em;margin-bottom:13px}
    h3{font-size:18px;line-height:1.4;margin-bottom:7px}
    .hero-copy{font-size:17px;color:var(--muted);max-width:650px;margin-bottom:29px}
    .hero-actions{display:flex;flex-wrap:wrap;gap:12px}
    .btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;border-radius:11px;padding:10px 18px;border:1px solid transparent;font-weight:700;font-size:14px;transition:.25s}
    .btn-primary{color:#04111f;background:linear-gradient(135deg,#69e2ed,#55bdf3);box-shadow:0 8px 26px rgba(57,211,235,.18)}
    .btn-primary:hover{transform:translateY(-2px);box-shadow:0 11px 34px rgba(57,211,235,.34)}
    .btn-secondary{border-color:var(--line);background:rgba(22,42,80,.52);color:var(--text)}
    .btn-secondary:hover{border-color:rgba(89,217,237,.65);background:rgba(26,55,98,.7);transform:translateY(-2px)}
    .btn:focus-visible,.rule-btn:focus-visible,.channel:focus-visible,.faq-question:focus-visible{outline:3px solid rgba(89,217,237,.55);outline-offset:3px}
    .hero-note{display:flex;align-items:center;gap:10px;margin-top:26px;color:#d0a496;font-size:12px}
    .hero-note span:first-child{color:var(--warm);font-size:18px}
    .hero-board{border:1px solid var(--line);background:linear-gradient(150deg,rgba(19,40,79,.85),rgba(8,20,44,.75));border-radius:24px;padding:22px;box-shadow:var(--shadow);position:relative;overflow:hidden}
    .hero-board:after{content:"";position:absolute;width:180px;height:180px;border-radius:50%;right:-70px;top:-80px;background:rgba(91,125,255,.19);filter:blur(10px)}
    .board-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:17px;margin-bottom:14px}
    .board-title{font-weight:750}.status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--primary);box-shadow:0 0 10px var(--primary);margin-right:6px}
    .board-line{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;border-bottom:1px solid rgba(137,181,235,.1)}
    .board-line:last-child{border:0}
    .line-index{color:var(--primary);font-size:12px;width:25px}.line-text{flex:1;font-size:14px}.line-meta{color:var(--weak);font-size:11px}
    .metric-row{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:18px}
    .metric{padding:12px;background:rgba(4,14,33,.46);border:1px solid rgba(137,181,235,.12);border-radius:12px}
    .metric strong{display:block;font-size:20px;color:var(--text);line-height:1.3}.metric small{color:var(--weak);font-size:11px}
    section{padding:var(--space) 0}
    .section-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:30px}
    .section-head p{color:var(--muted);max-width:590px;margin:0;font-size:14px}
    .glass{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:inset 0 1px rgba(255,255,255,.025),var(--shadow)}
    .feature-layout{display:grid;grid-template-columns:1.35fr .65fr;gap:16px}
    .feature-main{min-height:250px;padding:28px;display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(125deg,rgba(22,66,108,.8),rgba(15,27,61,.78))}
    .feature-main p,.feature-small p{color:var(--muted);font-size:13px;margin-bottom:0}
    .feature-small-wrap{display:grid;gap:16px}
    .feature-small{padding:22px;min-height:116px}
    .number{color:var(--violet);font-weight:800;font-size:12px;letter-spacing:.12em}
    .scenario-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
    .scenario{padding:20px 18px;min-height:160px;position:relative;overflow:hidden}
    .scenario:before{content:"";position:absolute;left:0;top:0;width:3px;height:100%;background:var(--primary);opacity:.7}
    .scenario p{color:var(--muted);font-size:13px;margin-bottom:18px}
    .text-link{color:var(--primary);font-size:13px}.text-link:hover{text-decoration:underline}
    .selection{display:grid;grid-template-columns:1.1fr .9fr;gap:18px}
    .cover{min-height:270px;border-radius:15px;overflow:hidden;position:relative;background:linear-gradient(135deg,#172f61 0%,#162047 45%,#4d386f 100%)}
    .cover:before,.cover:after{content:"";position:absolute;border-radius:50%;filter:blur(2px)}
    .cover:before{width:220px;height:220px;background:rgba(81,223,236,.2);right:-30px;top:-70px}
    .cover:after{width:260px;height:120px;background:rgba(205,104,171,.2);left:-40px;bottom:-30px;transform:rotate(-20deg)}
    .cover-content{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:end;padding:24px;background:linear-gradient(transparent 35%,rgba(4,9,22,.86))}
    .cover-content p{color:#c1cde0;font-size:13px;margin:4px 0 0}
    .selection-list{display:grid;gap:10px}
    .result-row{display:flex;gap:13px;align-items:center;padding:15px 16px;transition:.25s}
    .result-row:hover{transform:translateX(3px);border-color:rgba(89,217,237,.5);background:rgba(20,53,88,.72)}
    .mini-cover{width:74px;height:60px;border-radius:9px;flex:none;background:linear-gradient(140deg,#263b74,#5c3b69)}
    .result-row:nth-child(2) .mini-cover{background:linear-gradient(140deg,#164d62,#3b4b8a)}
    .result-row:nth-child(3) .mini-cover{background:linear-gradient(140deg,#4e315d,#235c76)}
    .result-row p{color:var(--muted);font-size:12px;margin:3px 0 0}
    .updates-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
    .update-panel{padding:22px}
    .update-item{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid rgba(137,181,235,.12)}
    .update-item:last-child{border-bottom:0}.update-time{color:var(--primary);font-size:12px;min-width:64px}.update-item p{color:var(--muted);font-size:13px;margin:0}
    .rule-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
    .rule-card{padding:22px}.rule-card strong{display:block;font-size:16px;margin:8px 0}.rule-card p{color:var(--muted);font-size:13px;margin:0}
    .faq-list{max-width:900px;margin:auto}.faq-item{border-top:1px solid var(--line)}.faq-item:last-child{border-bottom:1px solid var(--line)}
    .faq-question{width:100%;display:flex;justify-content:space-between;align-items:center;text-align:left;border:0;background:none;color:var(--text);padding:19px 4px;font-weight:650}
    .faq-question span:last-child{color:var(--primary);font-size:22px;transition:.25s}.faq-answer{max-height:0;overflow:hidden;color:var(--muted);font-size:13px;transition:max-height .3s ease,padding .3s}.faq-item.open .faq-answer{max-height:130px;padding:0 34px 19px 4px}.faq-item.open .faq-question span:last-child{transform:rotate(45deg)}
    .cta{padding:42px;display:flex;align-items:center;justify-content:space-between;gap:28px;background:linear-gradient(105deg,rgba(24,68,104,.9),rgba(26,31,76,.82));border-color:rgba(89,217,237,.28)}
    .cta p{color:var(--muted);font-size:14px;margin:0}.cta h2{margin-bottom:8px}
    footer{padding:48px 0 28px;background:rgba(3,8,20,.78);border-top:1px solid var(--line)}
    .footer-grid{display:grid;grid-template-columns:1.4fr 1fr .8fr;gap:40px}.footer-brand p{color:var(--weak);font-size:12px;max-width:360px}.footer-title{color:var(--text);font-size:13px;font-weight:700;margin-bottom:12px}.footer-links{display:flex;flex-wrap:wrap;gap:12px 20px;color:var(--muted);font-size:13px}.footer-links a:hover{color:var(--primary)}.footer-age{justify-self:end;text-align:right}.footer-age strong{display:block;color:#e7ab98;font-size:18px}.copyright{border-top:1px solid rgba(137,181,235,.1);margin-top:35px;padding-top:18px;color:var(--weak);font-size:11px;display:flex;justify-content:space-between;gap:20px}
    .age-overlay{position:fixed;inset:0;background:rgba(2,6,16,.84);backdrop-filter:blur(9px);z-index:80;display:grid;place-items:center;padding:20px}.age-modal{max-width:500px;padding:32px;background:#0b1731;border:1px solid rgba(228,154,130,.38);border-radius:22px;box-shadow:0 25px 90px rgba(0,0,0,.55)}.age-modal h2{font-size:28px}.age-modal p{color:var(--muted);font-size:14px}.age-actions{display:flex;gap:10px;margin-top:24px}.age-actions .btn{flex:1}.leave-btn{border-color:rgba(228,154,130,.35);color:#e5ad9c;background:rgba(130,56,49,.14)}
    @media(max-width:1024px){.hero-grid,.selection{grid-template-columns:1fr}.scenario-grid{grid-template-columns:repeat(2,1fr)}}
    @media(max-width:768px){.container{width:min(var(--max),calc(100% - 32px))}.search-mini{display:none}.brand-name{font-size:15px}.hero{padding-top:42px}.feature-layout,.updates-grid,.rule-grid{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1fr}.footer-age{justify-self:start;text-align:left}.cta{align-items:flex-start;flex-direction:column;padding:30px}}
    @media(max-width:520px){h1{font-size:39px}.hero-copy{font-size:15px}.scenario-grid{grid-template-columns:1fr}.metric-row{gap:6px}.metric{padding:9px}.metric strong{font-size:17px}.section-head{display:block}.section-head p{margin-top:10px}.footer-grid{grid-template-columns:1fr}.copyright{display:block}.copyright span{display:block;margin-top:7px}.age-actions{flex-direction:column}}

/* roulang page: category1 */
:root{
      --bg:#070d1d;
      --bg-deep:#040916;
      --panel:rgba(14,27,55,.76);
      --panel-strong:#0e1b38;
      --panel-soft:rgba(20,40,78,.52);
      --primary:#59d9ed;
      --primary-strong:#27bddc;
      --violet:#8b83ff;
      --warm:#e49a82;
      --text:#edf5ff;
      --muted:#9aacc7;
      --weak:#657895;
      --line:rgba(137,181,235,.18);
      --radius:18px;
      --radius-sm:11px;
      --shadow:0 18px 60px rgba(0,0,0,.28);
      --glow:0 0 28px rgba(63,210,235,.18);
      --max:1260px;
      --space:clamp(68px,8vw,112px);
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;color:var(--text);background:
      radial-gradient(circle at 10% 5%,rgba(45,107,178,.18),transparent 28rem),
      radial-gradient(circle at 90% 17%,rgba(102,74,188,.13),transparent 29rem),var(--bg);
      font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
      line-height:1.75;letter-spacing:.01em;overflow-x:hidden
    }
    body:before{
      content:"";position:fixed;inset:0;pointer-events:none;opacity:.22;
      background-image:linear-gradient(rgba(121,177,235,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(121,177,235,.035) 1px,transparent 1px);
      background-size:42px 42px;mask-image:linear-gradient(to bottom,#000,transparent 72%)
    }
    a{color:inherit;text-decoration:none}
    button,input{font:inherit}
    button{cursor:pointer}
    .container{width:min(var(--max),calc(100% - 40px));margin-inline:auto}
    .site-header{position:sticky;top:0;z-index:30;background:rgba(5,12,28,.84);backdrop-filter:blur(18px);border-bottom:1px solid var(--line);box-shadow:0 8px 30px rgba(0,0,0,.16)}
    .brand-row{min-height:70px;display:flex;align-items:center;justify-content:space-between;gap:24px}
    .brand{display:flex;align-items:center;gap:12px;min-width:0}
    .brand-mark{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;color:#06101d;background:linear-gradient(145deg,var(--primary),#9bdeff);font-weight:900;box-shadow:var(--glow)}
    .brand-name{font-weight:800;font-size:18px;white-space:nowrap}
    .brand-note{display:block;color:var(--weak);font-size:11px;line-height:1.2;margin-top:1px}
    .nav-tools{display:flex;align-items:center;gap:10px}
    .search-mini{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:rgba(14,29,58,.7);border-radius:10px;padding:7px 11px;color:var(--muted)}
    .search-mini input{border:0;outline:0;background:transparent;color:var(--text);width:150px;font-size:13px}
    .search-mini input::placeholder{color:var(--weak)}
    .rule-btn{border:1px solid rgba(228,154,130,.35);background:rgba(150,67,56,.1);color:#e9b2a0;border-radius:10px;padding:8px 12px;font-size:13px}
    .channel-row{display:flex;align-items:center;gap:5px;overflow-x:auto;scrollbar-width:none;border-top:1px solid rgba(137,181,235,.08)}
    .channel-row::-webkit-scrollbar{display:none}
    .channel{position:relative;color:var(--muted);font-size:14px;padding:12px 16px;white-space:nowrap;transition:.2s}
    .channel:hover{color:var(--text);background:rgba(40,83,132,.22)}
    .channel.active{color:var(--primary)}
    .channel.active:after{content:"";position:absolute;bottom:0;left:16px;right:16px;height:2px;background:var(--primary);box-shadow:0 0 12px var(--primary)}
    .rule-btn:focus-visible,.channel:focus-visible,.btn:focus-visible,.filter-control:focus-visible,.faq-question:focus-visible{outline:3px solid rgba(89,217,237,.55);outline-offset:3px}
    .page-intro{padding:58px 0 35px}
    .intro-grid{display:grid;grid-template-columns:1fr 360px;gap:36px;align-items:end}
    .eyebrow{color:var(--primary);font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin:0 0 12px}
    h1,h2,h3,p{margin-top:0}
    h1{font-size:clamp(30px,5vw,56px);line-height:1.18;letter-spacing:-.04em;margin-bottom:18px}
    h2{font-size:clamp(24px,3vw,34px);line-height:1.25;letter-spacing:-.025em;margin-bottom:10px}
    h3{font-size:18px;line-height:1.4;margin-bottom:6px}
    .intro-copy{max-width:710px;color:var(--muted);font-size:16px}
    .crumbs{display:flex;gap:8px;align-items:center;color:var(--weak);font-size:13px;margin-bottom:22px}
    .crumbs a:hover{color:var(--primary)}
    .intro-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
    .stat{padding:18px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--panel);box-shadow:inset 0 1px rgba(255,255,255,.04)}
    .stat strong{display:block;color:var(--primary);font-size:26px;line-height:1.2}
    .stat span{color:var(--muted);font-size:12px}
    .glass{border:1px solid var(--line);background:var(--panel);border-radius:var(--radius);box-shadow:var(--shadow),inset 0 1px rgba(255,255,255,.035)}
    .filter-panel{padding:18px;margin-bottom:32px}
    .filter-top{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:14px}
    .filter-title{font-size:15px;font-weight:750}
    .filter-tip{color:var(--weak);font-size:12px}
    .filter-grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr) auto;gap:10px}
    .filter-control{min-height:44px;padding:9px 12px;color:var(--muted);border:1px solid var(--line);border-radius:10px;background:rgba(7,18,40,.72);outline:none;font-size:13px;transition:.2s}
    .filter-control:focus,.filter-control:hover{color:var(--text);border-color:rgba(89,217,237,.55);box-shadow:0 0 0 3px rgba(89,217,237,.08)}
    .filter-control option{background:#0e1b38;color:var(--text)}
    .filter-button{min-height:44px;border:1px solid rgba(89,217,237,.5);border-radius:10px;padding:9px 16px;background:rgba(42,149,176,.2);color:var(--primary);font-weight:700;transition:.2s}
    .filter-button:hover{background:rgba(52,186,210,.32);box-shadow:var(--glow);transform:translateY(-1px)}
    .tag-line{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
    .tag{border-color:rgba(89,217,237,.32);color:#9ae9f2;background:rgba(31,142,162,.1);padding:4px 10px}
    .tag.selected{background:rgba(57,194,214,.22);border-color:var(--primary);box-shadow:0 0 15px rgba(89,217,237,.1)}
    .index-layout{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:22px;align-items:start}
    .featured-index{padding:26px;min-height:250px;position:relative;overflow:hidden;background:linear-gradient(125deg,rgba(22,66,108,.82),rgba(15,27,61,.78))}
    .featured-index:after{content:"";position:absolute;right:-70px;top:-80px;width:260px;height:260px;border-radius:50%;background:rgba(90,132,255,.18);filter:blur(10px)}
    .feature-content{position:relative;z-index:1;max-width:620px}
    .label{display:inline-flex;border:1px solid rgba(89,217,237,.4);border-radius:999px;color:var(--primary);padding:3px 9px;font-size:11px;background:rgba(34,145,170,.12);margin-bottom:14px}
    .featured-index p,.index-card p{color:var(--muted);font-size:13px}
    .btn{display:inline-flex;align-items:center;justify-content:center;min-height:43px;border-radius:11px;padding:9px 17px;border:1px solid transparent;font-weight:700;font-size:14px;transition:.25s}
    .btn-primary{color:#04111f;background:linear-gradient(135deg,#69e2ed,#55bdf3);box-shadow:0 8px 26px rgba(57,211,235,.18)}
    .btn-primary:hover{transform:translateY(-2px);box-shadow:0 11px 34px rgba(57,211,235,.34)}
    .btn-secondary{border-color:var(--line);background:rgba(22,42,80,.52);color:var(--text)}
    .btn-secondary:hover{border-color:rgba(89,217,237,.65);background:rgba(26,55,98,.7);transform:translateY(-2px)}
    .index-list{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}
    .index-card{padding:18px;display:flex;gap:14px;min-height:155px;transition:.25s}
    .index-card:hover{transform:translateY(-3px);border-color:rgba(89,217,237,.48);box-shadow:var(--shadow),0 0 22px rgba(61,197,221,.1)}
    .cover{width:92px;min-width:92px;height:116px;border-radius:12px;overflow:hidden;position:relative;background:linear-gradient(145deg,#16455c,#35438a)}
    .cover:before{content:"";position:absolute;inset:16% 24%;border-radius:50% 50% 35% 35%;background:linear-gradient(150deg,rgba(164,231,244,.55),rgba(98,111,204,.15));filter:blur(1px)}
    .cover:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(3,10,25,.7))}
    .cover.violet{background:linear-gradient(145deg,#49335f,#1f5275)}
    .cover.teal{background:linear-gradient(145deg,#1b5c62,#243d7d)}
    .cover.coral{background:linear-gradient(145deg,#70465c,#264e7a)}
    .card-meta{display:flex;justify-content:space-between;gap:8px;color:var(--weak);font-size:11px;margin-top:9px}
    .side-stack{display:grid;gap:16px}
    .side-panel{padding:20px}
    .side-title{font-size:15px;font-weight:750;margin-bottom:13px}
    .trend-list{display:grid;gap:3px}
    .trend-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid rgba(137,181,235,.1);color:var(--muted);font-size:13px}
    .trend-item:hover{color:var(--primary)}
    .trend-no{color:var(--weak);width:20px}
    .status-dot{width:7px;height:7px;border-radius:50%;background:var(--primary);box-shadow:0 0 10px var(--primary);display:inline-block}
    .sort-row{display:flex;align-items:center;justify-content:space-between;margin:34px 0 14px}
    .sort-row p{color:var(--muted);font-size:13px;margin:0}
    .sort-links{display:flex;gap:5px}
    .sort-link{padding:6px 10px;color:var(--weak);font-size:12px;border-radius:8px}
    .sort-link.active,.sort-link:hover{color:var(--primary);background:rgba(47,155,182,.14)}
    .faq-section{padding:var(--space) 0}
    .faq-wrap{max-width:850px}
    .faq-item{border-bottom:1px solid rgba(137,181,235,.14)}
    .faq-question{width:100%;display:flex;justify-content:space-between;gap:20px;text-align:left;border:0;background:transparent;color:var(--text);padding:18px 4px;font-weight:700}
    .faq-question span:last-child{color:var(--primary);font-size:20px;transition:.2s}
    .faq-answer{display:none;color:var(--muted);font-size:13px;padding:0 38px 18px 4px}
    .faq-item.open .faq-answer{display:block}
    .faq-item.open .faq-question span:last-child{transform:rotate(45deg)}
    .cta{padding:27px 30px;margin:0 0 var(--space);display:flex;justify-content:space-between;align-items:center;gap:24px;background:linear-gradient(105deg,rgba(22,65,101,.88),rgba(25,32,74,.78))}
    .cta p{color:var(--muted);font-size:13px;margin:5px 0 0}
    footer{background:rgba(3,9,21,.92);border-top:1px solid var(--line);padding:40px 0 22px}
    .footer-grid{display:grid;grid-template-columns:1.5fr 1fr .45fr;gap:35px;align-items:start}
    .footer-brand p{color:var(--muted);font-size:12px;max-width:390px}
    .footer-title{font-size:13px;font-weight:750;margin-bottom:12px}
    .footer-links{display:grid;gap:7px;color:var(--muted);font-size:12px}
    .footer-links a:hover{color:var(--primary)}
    .footer-age{justify-self:end;display:flex;flex-direction:column;align-items:center;gap:6px}
    .footer-age strong{font-size:26px;color:#efa994;border:1px solid rgba(228,154,130,.42);border-radius:12px;padding:4px 11px;line-height:1.2}
    .copyright{display:flex;justify-content:space-between;gap:12px;border-top:1px solid rgba(137,181,235,.1);margin-top:30px;padding-top:16px;color:var(--weak);font-size:11px}
    .overlay{position:fixed;inset:0;z-index:80;display:grid;place-items:center;background:rgba(2,6,17,.82);backdrop-filter:blur(10px);padding:20px}
    .age-box{max-width:500px;padding:30px;background:#0b1732;border:1px solid rgba(228,154,130,.4);border-radius:22px;box-shadow:0 25px 90px rgba(0,0,0,.5)}
    .age-symbol{color:#f0ad98;font-size:28px;font-weight:900;margin-bottom:8px}
    .age-box h2{font-size:25px;margin-bottom:10px}
    .age-box p{color:var(--muted);font-size:14px}
    .age-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
    @media(max-width:1024px){.intro-grid{grid-template-columns:1fr 300px}.filter-grid{grid-template-columns:1fr 1fr 1fr}.filter-grid .filter-button{grid-column:span 3}.index-layout{grid-template-columns:1fr 250px}}
    @media(max-width:768px){.container{width:min(var(--max),calc(100% - 32px))}.brand-row{min-height:64px}.search-mini{display:none}.intro-grid,.index-layout{grid-template-columns:1fr}.intro-stats{max-width:420px}.index-list{grid-template-columns:1fr}.side-stack{grid-template-columns:1fr 1fr}.cta{align-items:flex-start;flex-direction:column}.footer-grid{grid-template-columns:1fr 1fr}.footer-age{justify-self:start}}
    @media(max-width:520px){.brand-name{font-size:15px}.brand-note{font-size:10px}.brand-mark{width:34px;height:34px}.channel{padding:10px 12px;font-size:13px}.channel.active:after{left:12px;right:12px}.page-intro{padding-top:38px}.intro-stats{grid-template-columns:1fr 1fr}.filter-grid{grid-template-columns:1fr}.filter-grid .filter-button{grid-column:auto;width:100%}.filter-top{align-items:flex-start;flex-direction:column;gap:4px}.index-card{padding:15px}.cover{width:76px;min-width:76px;height:102px}.side-stack{grid-template-columns:1fr}.sort-row{align-items:flex-start;flex-direction:column;gap:8px}.cta{padding:23px 19px}.footer-grid{grid-template-columns:1fr}.copyright{flex-direction:column}.footer-age{justify-self:start}}