/* roulang page: index */
:root{
      --ink:#07111f;
      --night:#091827;
      --deep:#0d2235;
      --panel:rgba(15,39,59,.72);
      --panel-strong:#102c43;
      --line:rgba(172,221,231,.18);
      --line-bright:rgba(91,224,210,.55);
      --white:#f2fbff;
      --muted:#9bb4c5;
      --cyan:#5be0d2;
      --blue:#74b8ff;
      --orange:#ffb86b;
      --violet:#b8a4ff;
      --shadow:0 24px 70px rgba(0,0,0,.34);
      --radius:14px;
    }
    *{box-sizing:border-box;margin:0;padding:0}
    html{scroll-behavior:smooth}
    body{
      background:var(--ink);
      color:var(--white);
      font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
      line-height:1.7;
      letter-spacing:0;
      overflow-x:hidden;
    }
    a{color:inherit;text-decoration:none}
    button,input{font:inherit}
    button{cursor:pointer}
    img{display:block;max-width:100%}
    .container{width:min(1200px,calc(100% - 40px));margin:0 auto}
    .site-header{
      position:sticky;top:0;z-index:30;
      background:rgba(7,17,31,.82);
      backdrop-filter:blur(18px);
      border-bottom:1px solid var(--line);
    }
    .masthead{min-height:82px;display:flex;align-items:center;gap:28px}
    .brand{display:flex;align-items:center;gap:14px;white-space:nowrap}
    .brand-mark{width:34px;height:34px;border:1px solid var(--cyan);display:grid;place-items:center;color:var(--cyan);font-weight:800;font-size:13px;box-shadow:0 0 18px rgba(91,224,210,.22)}
    .brand-name{font-size:21px;font-weight:800;letter-spacing:0}
    .channel-rule{height:27px;width:1px;background:var(--line-bright)}
    .channel-text{font-size:12px;color:var(--muted);letter-spacing:1px;line-height:1.3;max-width:95px}
    .main-nav{display:flex;align-items:center;gap:26px;margin-left:auto}
    .nav-link{position:relative;color:#b7cbd5;font-size:14px;padding:8px 0;transition:.25s}
    .nav-link:after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--cyan);transition:.25s}
    .nav-link:hover,.nav-link.active{color:var(--white)}
    .nav-link:hover:after,.nav-link.active:after{width:100%}
    .nav-actions{display:flex;align-items:center;gap:10px}
    .icon-btn,.menu-btn{width:40px;height:40px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--white);display:grid;place-items:center;transition:.25s}
    .icon-btn:hover,.menu-btn:hover{border-color:var(--cyan);color:var(--cyan);background:rgba(91,224,210,.08)}
    .menu-btn{display:none}
    .hero{
      min-height:690px;display:flex;align-items:center;position:relative;
      background:
        linear-gradient(90deg,rgba(7,17,31,.98) 0%,rgba(7,17,31,.86) 42%,rgba(7,17,31,.34) 100%),
        repeating-linear-gradient(90deg,transparent 0,transparent 79px,rgba(111,190,219,.055) 80px),
        repeating-linear-gradient(0deg,transparent 0,transparent 79px,rgba(111,190,219,.045) 80px),
        #0a1c2d;
      border-bottom:1px solid var(--line);
      overflow:hidden;
    }
    .hero:before{content:"CONTENT / 999";position:absolute;right:7%;top:22%;color:rgba(137,210,223,.13);font-size:11px;letter-spacing:5px;writing-mode:vertical-rl}
    .hero-inner{display:grid;grid-template-columns:1.02fr .98fr;gap:70px;align-items:center;padding:76px 0 94px}
    .eyebrow{display:flex;align-items:center;gap:10px;color:var(--cyan);font-size:12px;letter-spacing:2px;text-transform:uppercase;margin-bottom:22px}
    .eyebrow i{width:28px;height:1px;background:var(--cyan);display:inline-block}
    h1{font-size:clamp(42px,5.1vw,70px);line-height:1.16;max-width:650px;font-weight:850}
    .hero-copy{color:#b5c9d6;font-size:17px;line-height:1.9;max-width:610px;margin:26px 0 32px}
    .actions{display:flex;flex-wrap:wrap;gap:13px}
    .btn{display:inline-flex;justify-content:center;align-items:center;gap:9px;min-height:48px;padding:0 20px;border:1px solid transparent;transition:.25s;font-weight:700;font-size:14px}
    .btn-primary{background:var(--cyan);color:#082126;box-shadow:0 0 24px rgba(91,224,210,.25)}
    .btn-primary:hover{background:#83f2e6;transform:translateY(-2px);box-shadow:0 0 34px rgba(91,224,210,.43)}
    .btn-secondary{border-color:var(--line-bright);color:var(--white);background:rgba(255,255,255,.025)}
    .btn-secondary:hover{background:rgba(91,224,210,.1);border-color:var(--cyan);transform:translateY(-2px)}
    .btn:focus-visible,.icon-btn:focus-visible,.menu-btn:focus-visible,.nav-link:focus-visible,.faq-question:focus-visible,input:focus-visible{outline:3px solid rgba(255,184,107,.72);outline-offset:3px}
    .hero-points{display:flex;gap:28px;margin-top:44px}
    .hero-point{border-left:1px solid var(--line-bright);padding-left:13px}
    .hero-point strong{display:block;font-size:24px;color:var(--white)}
    .hero-point span{display:block;color:var(--muted);font-size:12px}
    .media-stage{min-height:420px;position:relative;padding:30px;background:rgba(12,35,55,.56);border:1px solid var(--line);box-shadow:var(--shadow);transform:rotate(1deg)}
    .media-stage:before{content:"";position:absolute;inset:14px;border:1px solid rgba(91,224,210,.19);pointer-events:none}
    .stage-top{display:flex;justify-content:space-between;color:var(--muted);font-size:11px;letter-spacing:1px;margin-bottom:22px}
    .poster-grid{display:grid;grid-template-columns:1.25fr .78fr;gap:12px;height:276px}
    .poster{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.12);background:#163b55}
    .poster:after{content:"▶";position:absolute;left:18px;bottom:15px;color:var(--white);border:1px solid rgba(255,255,255,.7);width:34px;height:34px;display:grid;place-items:center;font-size:12px}
    .poster-main{background:linear-gradient(145deg,#315d74 0 28%,#b17958 28% 49%,#17384c 49% 100%)}
    .poster-side{background:linear-gradient(150deg,#322f59,#4b8790 55%,#172b49)}
    .poster-label{position:absolute;left:17px;top:17px;font-size:11px;color:#e8ffff;letter-spacing:1px}
    .stage-list{margin-top:15px;border-top:1px solid var(--line)}
    .stage-row{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid var(--line);font-size:12px;color:#c4d8e1}
    .stage-row b{color:var(--cyan);font-size:11px;font-weight:500}
    .section{padding:105px 0;border-bottom:1px solid var(--line)}
    .section-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:42px}
    .section-kicker{color:var(--orange);font-size:12px;letter-spacing:2px;margin-bottom:9px}
    h2{font-size:clamp(28px,3.3vw,43px);line-height:1.25}
    .section-intro{max-width:490px;color:var(--muted);font-size:15px;line-height:1.85}
    .issue-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:70px}
    .issue-list{border-top:1px solid var(--line)}
    .issue-item{display:flex;gap:20px;padding:22px 0;border-bottom:1px solid var(--line)}
    .issue-no{font-size:13px;color:var(--cyan);min-width:30px}
    .issue-item h3{font-size:18px;margin-bottom:5px}
    .issue-item p{color:var(--muted);font-size:14px}
    .index-panel{border:1px solid var(--line);background:var(--panel);padding:28px;box-shadow:var(--shadow)}
    .index-panel header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:17px;margin-bottom:22px}
    .index-panel header strong{font-size:18px}
    .status{color:var(--cyan);font-size:12px}
    .index-row{display:grid;grid-template-columns:42px 1fr auto;gap:16px;align-items:center;padding:15px 0;border-bottom:1px solid var(--line)}
    .index-row:last-child{border-bottom:0}
    .index-num{color:var(--orange);font-size:13px}
    .index-row h3{font-size:15px;font-weight:650}
    .index-row p{font-size:12px;color:var(--muted)}
    .index-tag{font-size:11px;color:var(--cyan);border:1px solid rgba(91,224,210,.35);padding:3px 7px}
    .solution{background:#0b1e30}
    .solution-grid{display:grid;grid-template-columns:1.16fr .84fr;gap:20px;align-items:stretch}
    .feature-media{min-height:400px;padding:30px;display:flex;flex-direction:column;justify-content:end;background:linear-gradient(160deg,#1c4d63,#123249 52%,#17233d);position:relative;overflow:hidden}
    .feature-media:before{content:"J J / 999";position:absolute;right:25px;top:26px;color:rgba(255,255,255,.25);font-weight:800;font-size:24px}
    .feature-media:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,transparent 0 21px,rgba(255,255,255,.04) 22px 23px);pointer-events:none}
    .feature-content{position:relative;z-index:1}
    .feature-content .badge{margin-bottom:14px}
    .feature-content h3{font-size:30px;line-height:1.35;max-width:460px}
    .feature-content p{color:#c0d4dc;max-width:470px;margin-top:12px}
    .solution-side{display:flex;flex-direction:column;gap:20px}
    .glass-card{border:1px solid var(--line);background:var(--panel);padding:25px;transition:.25s}
    .glass-card:hover{border-color:var(--line-bright);transform:translateY(-3px);box-shadow:0 14px 35px rgba(0,0,0,.2)}
    .glass-card h3{font-size:19px;margin:14px 0 7px}
    .glass-card p{font-size:14px;color:var(--muted)}
    .card-icon{color:var(--cyan);font-size:22px}
    .badge{display:inline-flex;align-items:center;border:1px solid rgba(91,224,210,.42);padding:4px 9px;color:var(--cyan);font-size:11px;background:rgba(91,224,210,.07)}
    .milestone-band{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
    .metric{padding:30px 24px;border-right:1px solid var(--line)}
    .metric:last-child{border-right:0}
    .metric strong{font-size:34px;color:var(--white);display:block}
    .metric span{display:block;color:var(--muted);font-size:13px;margin-top:5px}
    .metric small{color:var(--cyan);font-size:11px}
    .rail{display:flex;gap:16px;overflow-x:auto;padding-bottom:12px;scrollbar-color:var(--cyan) transparent}
    .rail-card{min-width:245px;border:1px solid var(--line);background:#102b40;transition:.25s}
    .rail-card:hover{border-color:var(--cyan);transform:translateY(-4px)}
    .rail-cover{height:145px;background:linear-gradient(135deg,#285b71,#b77d59 48%,#243a66);position:relative}
    .rail-card:nth-child(2) .rail-cover{background:linear-gradient(135deg,#473b69,#267077)}
    .rail-card:nth-child(3) .rail-cover{background:linear-gradient(135deg,#795449,#214d6e)}
    .rail-card:nth-child(4) .rail-cover{background:linear-gradient(135deg,#3e5274,#7a6389)}
    .rail-cover span{position:absolute;left:14px;bottom:12px;font-size:11px;border:1px solid rgba(255,255,255,.6);padding:2px 7px}
    .rail-body{padding:16px}
    .rail-body h3{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .rail-body p{color:var(--muted);font-size:12px;margin-top:5px}
    .news-layout{display:grid;grid-template-columns:1fr 320px;gap:65px}
    .news-list{border-top:1px solid var(--line)}
    .news-item{display:flex;justify-content:space-between;gap:20px;padding:20px 0;border-bottom:1px solid var(--line)}
    .news-item h3{font-size:16px;font-weight:650}
    .news-item p{font-size:13px;color:var(--muted);margin-top:4px}
    .news-date{color:var(--cyan);font-size:12px;white-space:nowrap}
    .aside-note{border-left:2px solid var(--orange);padding:5px 0 5px 22px}
    .aside-note h3{font-size:21px;margin-bottom:10px}
    .aside-note p{color:var(--muted);font-size:14px}
    .quote-layout{display:grid;grid-template-columns:1.2fr .8fr;gap:70px;align-items:start}
    blockquote{font-size:28px;line-height:1.6;font-weight:650;position:relative;padding-left:45px}
    blockquote:before{content:"“";position:absolute;left:0;top:-16px;color:var(--cyan);font-size:72px;font-family:Georgia}
    .quote-source{margin:25px 0 0 45px;color:var(--muted);font-size:13px}
    .quote-mini{border-top:1px solid var(--line);padding:18px 0;color:#c5d8df;font-size:15px}
    .quote-mini span{display:block;color:var(--muted);font-size:12px;margin-top:6px}
    .faq-list{border-top:1px solid var(--line)}
    .faq-item{border-bottom:1px solid var(--line)}
    .faq-question{width:100%;background:none;border:0;color:var(--white);display:flex;justify-content:space-between;text-align:left;padding:22px 4px;font-weight:700;font-size:16px}
    .faq-question span:last-child{color:var(--cyan);font-size:22px;transition:.25s}
    .faq-answer{max-height:0;overflow:hidden;color:var(--muted);font-size:14px;transition:max-height .3s ease;padding:0 38px 0 4px}
    .faq-item.open .faq-answer{max-height:130px;padding-bottom:20px}
    .faq-item.open .faq-question span:last-child{transform:rotate(45deg);color:var(--orange)}
    .cta{padding:85px 0;background:#102c43;border-bottom:1px solid var(--line)}
    .cta-inner{display:flex;justify-content:space-between;align-items:center;gap:30px}
    .cta h2{max-width:650px}
    .cta p{color:var(--muted);margin-top:12px}
    footer{padding:58px 0 28px;background:#06111d}
    .footer-grid{display:grid;grid-template-columns:1.4fr .7fr .7fr 1fr;gap:40px;padding-bottom:45px;border-bottom:1px solid var(--line)}
    .footer-brand p{color:var(--muted);font-size:13px;max-width:300px;margin-top:15px}
    footer h3{font-size:13px;color:var(--cyan);margin-bottom:14px}
    .footer-links{display:grid;gap:8px;color:var(--muted);font-size:13px}
    .footer-links a:hover{color:var(--white)}
    .footer-bottom{display:flex;justify-content:space-between;gap:20px;padding-top:22px;color:#718c9d;font-size:12px}
    @media(max-width:900px){
      .hero-inner,.issue-layout,.solution-grid,.quote-layout{grid-template-columns:1fr;gap:38px}
      .hero{min-height:auto}.hero-inner{padding:70px 0 85px}
      .media-stage{max-width:650px;transform:none}
      .news-layout{grid-template-columns:1fr;gap:35px}
      .footer-grid{grid-template-columns:1.3fr 1fr 1fr}
      .footer-contact{grid-column:1/-1}
    }
    @media(max-width:700px){
      .container{width:min(100% - 28px,1200px)}
      .masthead{min-height:70px;gap:12px}.brand-name{font-size:16px}.channel-rule,.channel-text{display:none}
      .main-nav{display:none;position:absolute;top:70px;left:0;right:0;background:#091827;border-bottom:1px solid var(--line);padding:18px 14px;flex-direction:column;align-items:flex-start;gap:5px}
      .main-nav.open{display:flex}.nav-link{width:100%;padding:10px 3px}
      .menu-btn{display:grid}.hero-inner{padding:57px 0 66px}h1{font-size:42px}.hero-copy{font-size:15px}
      .hero-points{gap:18px;flex-wrap:wrap;margin-top:32px}.hero-point strong{font-size:21px}
      .media-stage{padding:20px;min-height:355px}.poster-grid{height:215px}
      .section{padding:72px 0}.section-head{display:block;margin-bottom:28px}.section-intro{margin-top:14px}
      .index-panel{padding:19px}.index-row{grid-template-columns:28px 1fr;gap:10px}.index-tag{grid-column:2;justify-self:start}
      .milestone-band{grid-template-columns:1fr 1fr}.metric{padding:22px 15px}.metric:nth-child(2){border-right:0}.metric:nth-child(-n+2){border-bottom:1px solid var(--line)}.metric strong{font-size:27px}
      .feature-media{min-height:330px;padding:22px}.feature-content h3{font-size:25px}
      blockquote{font-size:22px;padding-left:34px}.quote-source{margin-left:34px}
      .cta-inner{display:block}.cta .btn{margin-top:25px}.footer-grid{grid-template-columns:1fr 1fr;gap:30px}.footer-brand{grid-column:1/-1}.footer-bottom{display:block}.footer-bottom span{display:block;margin-top:8px}
    }
    @media(max-width:390px){h1{font-size:37px}.actions .btn{width:100%}.poster-grid{height:190px}}

/* roulang page: category1 */
:root{
      --ink:#07111f;
      --night:#091827;
      --deep:#0d2235;
      --panel:rgba(15,39,59,.72);
      --panel-strong:#102c43;
      --line:rgba(172,221,231,.18);
      --line-bright:rgba(91,224,210,.55);
      --white:#f2fbff;
      --muted:#9bb4c5;
      --cyan:#5be0d2;
      --blue:#74b8ff;
      --orange:#ffb86b;
      --violet:#b8a4ff;
      --shadow:0 24px 70px rgba(0,0,0,.34);
      --radius:14px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;background:var(--ink);color:var(--white);
      font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
      line-height:1.7;letter-spacing:0;overflow-x:hidden;
    }
    a{color:inherit;text-decoration:none}
    button,input{font:inherit}
    button{cursor:pointer}
    img{display:block;max-width:100%}
    .container{width:min(1200px,calc(100% - 40px));margin:0 auto}
    .site-header{position:sticky;top:0;z-index:30;background:rgba(7,17,31,.84);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}
    .masthead{min-height:78px;display:flex;align-items:center;gap:20px}
    .brand{display:flex;align-items:center;gap:14px;white-space:nowrap}
    .brand-mark{width:34px;height:34px;border:1px solid var(--cyan);display:grid;place-items:center;color:var(--cyan);font-weight:800;font-size:13px;box-shadow:0 0 18px rgba(91,224,210,.22)}
    .brand-name{font-size:21px;font-weight:800}
    .channel-rule{height:34px;width:1px;background:var(--line-bright);margin-left:5px}
    .channel-text{color:var(--muted);font-size:11px;line-height:1.45;letter-spacing:1px}
    .main-nav{display:flex;align-items:center;gap:26px;margin-left:auto}
    .nav-link{position:relative;color:#b7cbd5;font-size:14px;padding:8px 0;transition:.25s}
    .nav-link:after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--cyan);transition:.25s}
    .nav-link:hover,.nav-link.active{color:var(--white)}
    .nav-link:hover:after,.nav-link.active:after{width:100%}
    .nav-actions{display:flex;align-items:center;gap:10px}
    .icon-btn,.menu-btn{width:40px;height:40px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--white);display:grid;place-items:center;transition:.25s}
    .icon-btn:hover,.menu-btn:hover{border-color:var(--cyan);color:var(--cyan);background:rgba(91,224,210,.08)}
    .menu-btn{display:none}
    .hero-inner{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:76px;align-items:center;padding:72px 0 76px}
    .hero{
      position:relative;overflow:hidden;border-bottom:1px solid var(--line);
      background-color:#0a1c2d;
      background-image:repeating-linear-gradient(90deg,transparent 0,transparent 79px,rgba(111,190,219,.05) 80px),repeating-linear-gradient(0deg,transparent 0,transparent 79px,rgba(111,190,219,.04) 80px);
    }
    .hero:before{content:"TOPIC INDEX / 999";position:absolute;right:7%;top:22%;color:rgba(137,210,223,.13);font-size:11px;letter-spacing:5px;writing-mode:vertical-rl}
    .eyebrow,.section-kicker{color:var(--cyan);font-size:12px;letter-spacing:2px}
    .eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:20px}
    .eyebrow i{width:28px;height:1px;background:var(--cyan);display:inline-block}
    h1,h2,h3,p{margin-top:0}
    h1{font-size:clamp(38px,5vw,68px);line-height:1.13;letter-spacing:0;margin-bottom:22px;max-width:720px}
    h2{font-size:clamp(26px,3vw,40px);line-height:1.25;margin-bottom:13px}
    .hero-copy{color:#b5c9d6;font-size:17px;line-height:1.9;max-width:650px;margin-bottom:30px}
    .btn{display:inline-flex;justify-content:center;align-items:center;gap:9px;min-height:48px;padding:0 20px;border:1px solid transparent;transition:.25s;font-weight:700;font-size:14px}
    .btn-primary{background:var(--cyan);color:#082126;box-shadow:0 0 24px rgba(91,224,210,.25)}
    .btn-primary:hover{background:#83f2e6;transform:translateY(-2px);box-shadow:0 0 34px rgba(91,224,210,.43)}
    .btn-secondary{border-color:var(--line-bright);color:var(--white);background:rgba(255,255,255,.025)}
    .btn-secondary:hover{background:rgba(91,224,210,.1);border-color:var(--cyan);transform:translateY(-2px)}
    .btn:focus-visible,.icon-btn:focus-visible,.menu-btn:focus-visible,.nav-link:focus-visible,.faq-question:focus-visible,input:focus-visible{outline:3px solid rgba(255,184,107,.72);outline-offset:3px}
    .hero-actions{display:flex;gap:12px;flex-wrap:wrap}
    .hero-meta{display:flex;gap:28px;margin-top:38px}
    .hero-meta strong{display:block;font-size:23px}
    .hero-meta span{font-size:12px;color:var(--muted)}
    .vertical-poster{min-height:440px;border:1px solid var(--line);padding:16px;background:rgba(15,39,59,.72);box-shadow:var(--shadow);transform:rotate(1.5deg)}
    .poster-art{height:340px;position:relative;overflow:hidden;background-color:#173a51;background-image:linear-gradient(160deg,transparent 0 42%,rgba(255,184,107,.72) 43% 55%,transparent 56%),repeating-linear-gradient(135deg,rgba(116,184,255,.18) 0 1px,transparent 1px 17px)}
    .poster-art:after{content:"经典专题";position:absolute;bottom:25px;left:24px;font-size:30px;font-weight:800;color:var(--white);writing-mode:vertical-rl}
    .poster-caption{display:flex;justify-content:space-between;padding:15px 2px 2px;color:var(--muted);font-size:12px}
    .section{padding:88px 0;border-bottom:1px solid var(--line)}
    .section-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:34px}
    .section-kicker{color:var(--orange);margin-bottom:8px}
    .section-intro{max-width:520px;color:var(--muted);font-size:15px;line-height:1.85}
    .toolbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:18px;border:1px solid var(--line);background:rgba(15,39,59,.55);margin-bottom:34px}
    .search-wrap{position:relative;flex:1 1 270px}
    .search-wrap label{position:absolute;left:14px;top:-10px;padding:0 6px;background:var(--ink);font-size:11px;color:var(--cyan)}
    .search-input{width:100%;height:46px;background:rgba(3,15,27,.65);border:1px solid var(--line);color:var(--white);padding:0 14px;outline:0}
    .search-input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(91,224,210,.12)}
    .filter-list{display:flex;gap:8px;flex-wrap:wrap}
    .filter-btn{border:1px solid var(--line);background:transparent;color:var(--muted);padding:9px 13px;font-size:13px;transition:.2s}
    .filter-btn:hover,.filter-btn.active{color:var(--ink);background:var(--cyan);border-color:var(--cyan)}
    .topic-layout{display:grid;grid-template-columns:1.12fr .88fr;gap:20px}
    .topic-feature{min-height:390px;padding:30px;display:flex;flex-direction:column;justify-content:end;border:1px solid var(--line);position:relative;overflow:hidden;background-color:#123249;background-image:linear-gradient(145deg,rgba(91,224,210,.18),transparent 38%),repeating-linear-gradient(0deg,transparent 0,transparent 29px,rgba(172,221,231,.07) 30px)}
    .topic-feature:before{content:"FEATURED  /  01";position:absolute;top:25px;left:30px;color:var(--cyan);font-size:11px;letter-spacing:2px}
    .topic-feature h3{font-size:30px;line-height:1.3;margin:0 0 12px}
    .topic-feature p{color:#c1d4de;max-width:480px;font-size:14px}
    .topic-stack{display:flex;flex-direction:column;gap:10px}
    .topic-row{display:grid;grid-template-columns:82px 1fr auto;gap:16px;align-items:center;min-height:112px;padding:14px;border:1px solid var(--line);background:var(--panel);transition:.25s}
    .topic-row:hover{border-color:var(--line-bright);transform:translateX(4px);box-shadow:0 12px 30px rgba(0,0,0,.2)}
    .topic-thumb{height:82px;background-color:#224d62;background-image:repeating-linear-gradient(135deg,rgba(255,184,107,.35) 0 2px,transparent 2px 14px);display:grid;place-items:center;color:var(--white);font-size:22px}
    .topic-row h3{font-size:16px;margin-bottom:4px}
    .topic-row p{font-size:12px;color:var(--muted);margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
    .topic-time{font-size:11px;color:var(--orange);white-space:nowrap}
    .index-band{background:#0b2032}
    .index-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;border:1px solid var(--line);background:var(--line)}
    .index-stat{background:var(--night);padding:24px 20px}
    .index-stat strong{display:block;font-size:32px;color:var(--cyan);line-height:1.1;margin-bottom:5px}
    .index-stat span{font-size:13px;color:var(--muted)}
    .guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
    .guide-item{padding:23px 0;border-top:2px solid var(--line-bright)}
    .guide-item b{font-size:28px;color:var(--orange);font-weight:500}
    .guide-item h3{font-size:18px;margin:8px 0}
    .guide-item p{font-size:14px;color:var(--muted);margin:0}
    .faq-list{border-top:1px solid var(--line);max-width:900px}
    .faq-item{border-bottom:1px solid var(--line)}
    .faq-question{width:100%;border:0;background:none;color:var(--white);display:flex;justify-content:space-between;gap:20px;text-align:left;padding:22px 0;font-weight:700}
    .faq-question span:last-child{color:var(--cyan);font-size:22px;line-height:1}
    .faq-answer{display:none;color:var(--muted);font-size:14px;padding:0 45px 22px 0}
    .faq-item.open .faq-answer{display:block}
    .faq-item.open .faq-question{color:var(--cyan)}
    .cta{padding:72px 0;background:#102c43;border-bottom:1px solid var(--line)}
    .cta-inner{display:flex;justify-content:space-between;align-items:center;gap:30px}
    .cta p{color:var(--muted);max-width:600px;margin:0}
    footer{background:#050d18;padding:58px 0 25px}
    .footer-grid{display:grid;grid-template-columns:1.5fr .8fr .9fr 1fr;gap:35px;padding-bottom:42px}
    .footer-brand p{color:var(--muted);font-size:13px;max-width:280px;margin-top:18px}
    footer h3{font-size:14px;margin:3px 0 14px}
    .footer-links{display:flex;flex-direction:column;gap:8px;color:var(--muted);font-size:13px}
    .footer-links a:hover{color:var(--cyan)}
    .footer-bottom{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding-top:22px;color:#718b9b;font-size:12px}
    .empty{display:none;color:var(--muted);padding:25px 0}
    @media(max-width:900px){
      .hero-inner,.topic-layout{grid-template-columns:1fr}
      .vertical-poster{max-width:390px}
      .index-grid{grid-template-columns:repeat(2,1fr)}
      .footer-grid{grid-template-columns:repeat(2,1fr)}
    }
    @media(max-width:640px){
      .container{width:min(100% - 28px,1200px)}
      .masthead{min-height:68px;gap:12px}
      .brand{gap:9px}.brand-name{font-size:16px}.brand-mark{width:30px;height:30px}
      .channel-rule,.channel-text{display:none}
      .main-nav{display:none;position:absolute;top:68px;left:0;right:0;background:rgba(7,17,31,.98);padding:18px 20px;border-bottom:1px solid var(--line);flex-direction:column;align-items:flex-start;gap:12px}
      .main-nav.open{display:flex}
      .menu-btn{display:grid}
      .hero-inner{padding:56px 0 60px;gap:35px}
      h1{font-size:38px}
      .hero-copy{font-size:15px}
      .hero-meta{gap:17px}
      .vertical-poster{min-height:370px}
      .poster-art{height:285px}
      .section{padding:62px 0}
      .section-head,.cta-inner{display:block}
      .section-intro{margin-top:18px}
      .topic-row{grid-template-columns:64px 1fr;gap:12px}
      .topic-thumb{height:64px}
      .topic-time{grid-column:2}
      .guide-grid{grid-template-columns:1fr}
      .index-grid{grid-template-columns:1fr 1fr}
      .footer-grid{grid-template-columns:1fr 1fr;gap:28px 18px}
      .footer-bottom{display:block}.footer-bottom span{display:block;margin-bottom:8px}
      .cta .btn{margin-top:24px}
    }