/* roulang page: index */
:root{--ink:#281b31;--muted:#756978;--plum:#421d4e;--plum2:#642b67;--coral:#d85c67;--coral2:#f28471;--cream:#fbf7f3;--mist:#f1ebf1;--line:#e5dce5;--white:#fff;--success:#4e8878;--shadow:0 14px 38px rgba(65,29,78,.10);--r:18px;--r-sm:12px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font-family:"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",Arial,sans-serif;font-size:16px;line-height:1.78}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button{border:0}img{max-width:100%;display:block}.site-header{position:sticky;top:0;z-index:30;background:rgba(251,247,243,.98);border-bottom:1px solid var(--line)}.topbar{min-height:72px;display:flex;align-items:center;gap:24px}.brand{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;font-weight:800;font-size:18px;color:var(--plum)}.brand-mark{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:var(--plum);color:#fff;font-size:14px}.site-search{position:relative;flex:1;max-width:440px;margin-left:auto}.site-search input{width:100%;height:42px;padding:0 40px 0 16px;border:1px solid #ded2df;border-radius:999px;background:#fff;color:var(--ink);outline:0;transition:.2s}.site-search input:focus,.form-control:focus,.form-select:focus{border-color:var(--coral);box-shadow:0 0 0 4px rgba(216,92,103,.14)}.search-icon{position:absolute;right:15px;top:10px;color:var(--muted)}.btn-brand,.btn-quiet{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 19px;border-radius:999px;font-weight:700;transition:.2s}.btn-brand{background:var(--coral);color:#fff;box-shadow:0 7px 15px rgba(216,92,103,.22)}.btn-brand:hover{background:#c94e5a;color:#fff;transform:translateY(-2px)}.btn-brand:active,.btn-quiet:active{transform:translateY(0)}.btn-quiet{border:1px solid #d5c4d5;background:transparent;color:var(--plum)}.btn-quiet:hover{background:#f2e8f1;color:var(--plum)}.btn-brand:focus-visible,.btn-quiet:focus-visible,a:focus-visible{outline:3px solid rgba(216,92,103,.4);outline-offset:3px}.channelbar{border-top:1px solid rgba(229,220,229,.75);overflow:hidden}.channels{display:flex;gap:8px;padding:9px 0;overflow-x:auto;scrollbar-width:none}.channels::-webkit-scrollbar{display:none}.channel{flex:0 0 auto;padding:7px 14px;border-radius:999px;color:#685968;font-size:14px;font-weight:700;transition:.2s}.channel:hover{background:#eee3ed;color:var(--plum)}.channel.active{background:var(--plum);color:#fff}.hero{padding:58px 0 30px}.hero-shell{position:relative;overflow:hidden;padding:42px;border:1px solid #e4d6e4;border-radius:28px;background:linear-gradient(130deg,#fff 0%,#f6edf5 58%,#f1dce0 100%);box-shadow:var(--shadow)}.hero-shell:after{content:"";position:absolute;width:380px;height:380px;right:-120px;bottom:-220px;border:46px solid rgba(216,92,103,.11);border-radius:50%;pointer-events:none}.eyebrow{display:inline-flex;gap:8px;align-items:center;padding:5px 11px;border-radius:999px;background:#f6e4e6;color:#a53e4b;font-size:13px;font-weight:800}.hero h1{max-width:740px;margin:17px 0 14px;font-size:clamp(32px,4.2vw,56px);line-height:1.18;letter-spacing:-.04em;color:var(--plum)}.hero-copy{max-width:760px;margin:0;color:#554956;font-size:17px}.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.08fr .92fr;gap:34px;align-items:center}.hero-actions{display:flex;flex-wrap:wrap;gap:11px;margin-top:25px}.stat-row{display:flex;flex-wrap:wrap;gap:22px;margin-top:27px}.stat strong{display:block;color:var(--plum);font-size:21px;line-height:1.2}.stat span{color:var(--muted);font-size:13px}.preview{position:relative;padding:16px;border-radius:22px;background:var(--plum);box-shadow:0 20px 35px rgba(66,29,78,.24)}.preview-stage{position:relative;min-height:238px;overflow:hidden;border-radius:15px;background:linear-gradient(135deg,#9f536e,#42214f 50%,#26162f)}.preview-stage:before,.preview-stage:after{content:"";position:absolute;border-radius:50%;filter:blur(2px)}.preview-stage:before{width:170px;height:170px;right:7%;top:12%;background:rgba(242,132,113,.55)}.preview-stage:after{width:130px;height:130px;left:9%;bottom:-20px;background:rgba(235,184,151,.37)}.play{position:absolute;z-index:2;left:50%;top:50%;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;transform:translate(-50%,-50%);background:#fff;color:var(--coral);font-size:25px;box-shadow:0 7px 22px rgba(0,0,0,.22)}.duration,.update{position:absolute;z-index:2;bottom:12px;padding:4px 9px;border-radius:7px;font-size:12px;font-weight:800}.duration{right:12px;background:rgba(26,14,32,.72);color:#fff}.update{left:12px;background:#f6c680;color:#4b3035}.preview-foot{display:flex;justify-content:space-between;gap:10px;padding:13px 4px 0;color:#f9eefa;font-size:13px}.age-note{display:flex;gap:10px;align-items:flex-start;margin-top:25px;padding:12px 14px;border-left:3px solid var(--coral);border-radius:0 10px 10px 0;background:rgba(255,255,255,.66);color:#675764;font-size:13px}.section{padding:42px 0}.section-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:22px}.section-kicker{margin:0 0 4px;color:var(--coral);font-size:13px;font-weight:800;letter-spacing:.08em}.section h2{margin:0;color:var(--plum);font-size:clamp(25px,3vw,36px);line-height:1.28;letter-spacing:-.025em}.section-intro{max-width:520px;margin:8px 0 0;color:var(--muted);font-size:15px}.feature-grid{display:grid;grid-template-columns:1.5fr .75fr .75fr;gap:16px}.feature-card{min-height:190px;padding:23px;border:1px solid var(--line);border-radius:var(--r);background:#fff;box-shadow:0 6px 20px rgba(65,29,78,.04);transition:.2s}.feature-card:hover,.video-card:hover,.topic-main:hover{transform:translateY(-2px);box-shadow:var(--shadow)}.feature-card.large{grid-row:span 2;min-height:396px;background:linear-gradient(155deg,#4c2058,#75376e);color:#fff}.iconbox{display:grid;place-items:center;width:40px;height:40px;margin-bottom:16px;border-radius:12px;background:#f8e6e8;color:var(--coral);font-size:19px}.large .iconbox{background:rgba(255,255,255,.14);color:#f8c3a0}.feature-card h3{margin:0 0 7px;font-size:19px;font-weight:800}.feature-card p{margin:0;color:var(--muted);font-size:14px;line-height:1.7}.large p{color:#eadce9}.filter-demo{margin-top:22px;padding:14px;border-radius:13px;background:rgba(255,255,255,.12)}.filter-demo span{display:inline-block;margin:0 5px 7px 0;padding:5px 9px;border:1px solid rgba(255,255,255,.18);border-radius:999px;font-size:12px}.filter-demo .chosen{background:#f4a378;border-color:#f4a378;color:#4b2038}.mini-link{display:inline-block;margin-top:16px;color:var(--coral);font-size:14px;font-weight:800}.large .mini-link{color:#ffd1ad}.scene-wrap{padding:26px;border-radius:24px;background:var(--mist)}.scene-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.scene{position:relative;padding:17px;border-radius:14px;background:#fff;border:1px solid rgba(229,220,229,.9)}.scene-no{display:block;margin-bottom:10px;color:var(--coral);font-size:12px;font-weight:900}.scene h3{margin:0 0 6px;font-size:17px;color:var(--plum)}.scene p{margin:0;color:var(--muted);font-size:13px;line-height:1.65}.scene a{display:inline-block;margin-top:12px;font-size:13px;color:var(--plum);font-weight:800}.results{display:grid;grid-template-columns:1.12fr .88fr;gap:18px}.topic-main{position:relative;min-height:292px;overflow:hidden;padding:28px;border-radius:22px;background:linear-gradient(135deg,#6d2f66,#d26b6d);color:#fff;transition:.2s}.topic-main:after{content:"▶";position:absolute;right:26px;bottom:16px;font-size:76px;color:rgba(255,255,255,.15)}.topic-main .badge-soft{background:rgba(255,255,255,.18);color:#fff}.topic-main h3{max-width:420px;margin:17px 0 9px;font-size:28px}.topic-main p{max-width:440px;margin:0;color:#fae9e8}.topic-meta{display:flex;gap:15px;margin-top:20px;font-size:13px;color:#ffe8d9}.topic-list{display:grid;gap:11px}.topic-item{display:flex;align-items:center;gap:14px;padding:14px;border:1px solid var(--line);border-radius:14px;background:#fff}.thumb{width:64px;height:48px;flex:0 0 auto;border-radius:9px;background:linear-gradient(135deg,#d88a82,#775075)}.topic-item:nth-child(2) .thumb{background:linear-gradient(135deg,#e6b97c,#9e5573)}.topic-item:nth-child(3) .thumb{background:linear-gradient(135deg,#795474,#d87575)}.topic-item h3{margin:0;font-size:15px}.topic-item p{margin:3px 0 0;color:var(--muted);font-size:12px}.badge-soft{display:inline-block;padding:4px 9px;border-radius:999px;background:#f8e6e8;color:#ac4654;font-size:12px;font-weight:800}.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.plan{display:flex;flex-direction:column;padding:25px;border:1px solid var(--line);border-radius:20px;background:#fff}.plan.featured{border:2px solid var(--coral);box-shadow:var(--shadow)}.plan-tag{min-height:25px;color:var(--coral);font-size:12px;font-weight:900}.plan h3{margin:7px 0;color:var(--plum);font-size:22px}.price{margin:8px 0 16px;color:var(--plum);font-size:29px;font-weight:900}.price small{font-size:13px;font-weight:500;color:var(--muted)}.plan ul{min-height:119px;margin:0 0 21px;padding:0;list-style:none;color:var(--muted);font-size:14px}.plan li{margin:7px 0}.plan li:before{content:"✓";margin-right:8px;color:var(--success);font-weight:900}.plan .btn-brand,.plan .btn-quiet{margin-top:auto}.compliance{margin-top:15px;color:var(--muted);font-size:12px}.assurance{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:24px}.assure{padding:17px;border-top:3px solid #d88a77;border-radius:0 0 14px 14px;background:#fff}.assure strong{display:block;margin-bottom:4px;color:var(--plum)}.assure span{color:var(--muted);font-size:13px}.faq-box{padding:10px 22px;border:1px solid var(--line);border-radius:20px;background:#fff}.accordion-item{border:0!important;border-bottom:1px solid var(--line)!important;background:transparent!important}.accordion-item:last-child{border-bottom:0!important}.accordion-button{padding:18px 0;background:transparent!important;color:var(--plum)!important;font-weight:800;box-shadow:none!important}.accordion-button:not(.collapsed){color:var(--coral)!important}.accordion-button:focus{box-shadow:none!important}.accordion-body{padding:0 0 18px;color:var(--muted);font-size:14px}.feedback{margin-top:18px;padding:28px;border-radius:21px;background:var(--plum);color:#fff}.feedback h2{color:#fff;font-size:27px}.feedback p{max-width:660px;margin:8px 0 20px;color:#ebdfe9}.feedback .form-control,.feedback .form-select{min-height:45px;border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.96)}.form-label{font-size:13px;font-weight:700}.form-check-label{font-size:13px;color:#ecdeea}.site-footer{margin-top:54px;padding:48px 0 20px;background:#301636;color:#eadfeb}.footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:28px}.footer-title{margin:0 0 10px;color:#fff;font-size:15px;font-weight:800}.footer-copy,.footer-links a{color:#cfbfd0;font-size:13px}.footer-links{display:grid;gap:5px}.footer-links a:hover{color:#ffb09e}.footer-bottom{display:flex;justify-content:space-between;gap:14px;margin-top:36px;padding-top:17px;border-top:1px solid rgba(255,255,255,.14);color:#c7b6c8;font-size:12px}.mobile-menu{display:none}@media(max-width:991px){.hero-grid,.results{grid-template-columns:1fr}.feature-grid{grid-template-columns:1fr 1fr}.feature-card.large{grid-column:span 2;grid-row:auto;min-height:300px}.scene-flow{grid-template-columns:1fr 1fr}.plans{grid-template-columns:1fr}.plan ul{min-height:auto}.footer-grid{grid-template-columns:repeat(2,1fr)}.site-search{max-width:none}}@media(max-width:767px){.topbar{min-height:64px;gap:10px;flex-wrap:wrap;padding-top:10px;padding-bottom:10px}.brand{font-size:15px}.brand-mark{width:29px;height:29px}.site-search{order:3;width:100%;flex-basis:100%}.topbar>.btn-brand{margin-left:auto;padding:0 14px;font-size:13px}.hero{padding-top:28px}.hero-shell{padding:25px 19px;border-radius:20px}.hero-copy{font-size:15px}.stat-row{gap:14px}.preview-stage{min-height:190px}.section{padding:30px 0}.section-head{display:block}.section-intro{max-width:none}.feature-grid{grid-template-columns:1fr}.feature-card.large{grid-column:auto;min-height:275px}.scene-flow{grid-template-columns:1fr}.scene-wrap{padding:16px}.assurance{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr}.footer-bottom{display:block}.footer-bottom span{display:block;margin:5px 0}.feedback{padding:21px 17px}}@media(max-width:420px){.topbar>.btn-brand{font-size:0;min-width:44px;padding:0}.topbar>.btn-brand:after{content:"进入";font-size:13px}.hero h1{font-size:31px}.hero-actions .btn-brand,.hero-actions .btn-quiet{width:100%}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}}

/* roulang page: category1 */
:root{
      --ink:#281b31;
      --muted:#756978;
      --plum:#421d4e;
      --plum2:#642b67;
      --coral:#d85c67;
      --coral2:#f28471;
      --cream:#fbf7f3;
      --mist:#f1ebf1;
      --line:#e5dce5;
      --white:#fff;
      --success:#4e8878;
      --shadow:0 14px 38px rgba(65,29,78,.10);
      --r:18px;
      --r-sm:12px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      background:var(--cream);
      color:var(--ink);
      font-family:"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",Arial,sans-serif;
      font-size:16px;
      line-height:1.78;
    }
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    button,input,select,textarea{font:inherit}
    button{border:0}
    .container{max-width:1200px}
    .site-header{
      position:sticky;
      top:0;
      z-index:30;
      background:rgba(251,247,243,.98);
      border-bottom:1px solid var(--line);
    }
    .topbar{
      min-height:72px;
      display:flex;
      align-items:center;
      gap:24px;
    }
    .brand{
      display:inline-flex;
      align-items:center;
      gap:10px;
      white-space:nowrap;
      font-weight:800;
      font-size:18px;
      color:var(--plum);
    }
    .brand-mark{
      display:grid;
      place-items:center;
      width:32px;
      height:32px;
      border-radius:10px;
      background:var(--plum);
      color:#fff;
      font-size:14px;
    }
    .site-search{
      position:relative;
      flex:1;
      max-width:440px;
      margin-left:auto;
    }
    .site-search input{
      width:100%;
      height:42px;
      padding:0 40px 0 16px;
      border:1px solid #ded2df;
      border-radius:999px;
      background:#fff;
      color:var(--ink);
      outline:0;
      transition:.2s;
    }
    .site-search input:focus,
    .form-control:focus,
    .form-select:focus{
      border-color:var(--coral);
      box-shadow:0 0 0 4px rgba(216,92,103,.14);
    }
    .search-icon{
      position:absolute;
      right:15px;
      top:7px;
      color:var(--muted);
      font-size:21px;
    }
    .btn-brand,.btn-quiet{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:42px;
      padding:0 19px;
      border-radius:999px;
      font-weight:700;
      transition:.2s;
    }
    .btn-brand{
      background:var(--coral);
      color:#fff;
      box-shadow:0 7px 15px rgba(216,92,103,.22);
    }
    .btn-brand:hover{background:#c94e5a;color:#fff;transform:translateY(-2px)}
    .btn-brand:active,.btn-quiet:active{transform:translateY(0)}
    .btn-quiet{
      border:1px solid #d5c4d5;
      background:transparent;
      color:var(--plum);
    }
    .btn-quiet:hover{background:#f2e8f1;color:var(--plum)}
    .btn-brand:focus-visible,.btn-quiet:focus-visible,a:focus-visible{
      outline:3px solid rgba(216,92,103,.4);
      outline-offset:3px;
    }
    .channelbar{
      border-top:1px solid rgba(229,220,229,.7);
      background:#fffdfa;
    }
    .channels{
      display:flex;
      gap:8px;
      overflow-x:auto;
      scrollbar-width:none;
      min-height:48px;
      align-items:center;
    }
    .channels::-webkit-scrollbar{display:none}
    .channel{
      flex:0 0 auto;
      padding:5px 17px;
      border-radius:999px;
      color:var(--muted);
      font-size:14px;
      transition:.2s;
    }
    .channel:hover{background:var(--mist);color:var(--plum)}
    .channel.active{
      background:var(--plum);
      color:#fff;
      box-shadow:0 5px 12px rgba(65,29,78,.14);
    }
    .page-hero{
      padding:38px 0 24px;
    }
    .crumbs{
      display:flex;
      gap:9px;
      align-items:center;
      color:var(--muted);
      font-size:13px;
      margin-bottom:22px;
    }
    .crumbs a:hover{color:var(--coral)}
    .hero-kv{
      position:relative;
      overflow:hidden;
      min-height:340px;
      padding:40px 46px;
      border-radius:28px;
      background:#4a2055;
      color:#fff;
      box-shadow:var(--shadow);
    }
    .hero-kv:before{
      content:"";
      position:absolute;
      width:430px;
      height:430px;
      right:-100px;
      top:-180px;
      border:54px solid rgba(242,132,113,.2);
      border-radius:50%;
    }
    .hero-kv:after{
      content:"";
      position:absolute;
      width:210px;
      height:210px;
      right:19%;
      bottom:-130px;
      border-radius:50%;
      background:rgba(216,92,103,.25);
    }
    .hero-content{
      position:relative;
      z-index:1;
      max-width:720px;
    }
    .eyebrow{
      display:inline-flex;
      gap:8px;
      align-items:center;
      padding:5px 11px;
      border-radius:999px;
      background:rgba(255,255,255,.15);
      color:#ffe8dc;
      font-size:13px;
      font-weight:800;
    }
    .hero-kv h1{
      max-width:690px;
      margin:18px 0 13px;
      color:#fff;
      font-size:clamp(32px,4.2vw,56px);
      line-height:1.2;
      letter-spacing:-.03em;
    }
    .hero-kv p{
      max-width:680px;
      margin:0;
      color:#f5e9f0;
      font-size:17px;
    }
    .hero-actions{
      display:flex;
      flex-wrap:wrap;
      gap:11px;
      margin-top:25px;
    }
    .hero-kv .btn-quiet{
      color:#fff;
      border-color:rgba(255,255,255,.45);
    }
    .hero-kv .btn-quiet:hover{
      color:#fff;
      background:rgba(255,255,255,.14);
    }
    .countdown{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      align-items:center;
      margin-top:25px;
      color:#ffe4d8;
      font-size:13px;
    }
    .countdown strong{
      display:inline-flex;
      min-width:34px;
      min-height:30px;
      justify-content:center;
      align-items:center;
      padding:0 7px;
      border-radius:8px;
      background:rgba(255,255,255,.14);
      color:#fff;
      font-size:14px;
    }
    .section{padding:44px 0}
    .section-head{
      display:flex;
      justify-content:space-between;
      align-items:end;
      gap:20px;
      margin-bottom:22px;
    }
    .section-kicker{
      margin:0 0 4px;
      color:var(--coral);
      font-size:13px;
      font-weight:800;
      letter-spacing:.08em;
    }
    .section h2{
      margin:0;
      color:var(--plum);
      font-size:clamp(25px,3vw,36px);
      line-height:1.28;
      letter-spacing:-.025em;
    }
    .section-intro{
      max-width:530px;
      margin:8px 0 0;
      color:var(--muted);
      font-size:15px;
    }
    .filter-panel{
      padding:18px;
      border:1px solid var(--line);
      border-radius:var(--r);
      background:#fff;
      box-shadow:0 7px 22px rgba(65,29,78,.05);
    }
    .filter-panel .form-control,
    .filter-panel .form-select{
      min-height:45px;
      border-color:#ded2df;
      border-radius:11px;
      color:var(--ink);
    }
    .filter-label{
      display:block;
      margin:0 0 5px 2px;
      color:var(--muted);
      font-size:12px;
      font-weight:700;
    }
    .filter-tags{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      align-items:end;
      height:100%;
    }
    .filter-tag{
      min-height:38px;
      padding:4px 13px;
      border:1px solid #ddcfdd;
      border-radius:999px;
      background:#fff;
      color:var(--muted);
      font-size:13px;
      transition:.2s;
    }
    .filter-tag:hover,.filter-tag.active{
      border-color:var(--coral);
      background:#f9e9e9;
      color:#a43e4c;
    }
    .result-line{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:15px;
      margin:21px 0 14px;
      color:var(--muted);
      font-size:14px;
    }
    .result-line strong{color:var(--plum)}
    .topic-grid{
      display:grid;
      grid-template-columns:1.45fr .8fr .8fr;
      gap:16px;
    }
    .topic-card{
      overflow:hidden;
      border:1px solid var(--line);
      border-radius:16px;
      background:#fff;
      box-shadow:0 6px 20px rgba(65,29,78,.045);
      transition:.2s;
    }
    .topic-card:hover{
      transform:translateY(-3px);
      box-shadow:var(--shadow);
    }
    .topic-card.featured{grid-row:span 2}
    .cover{
      position:relative;
      aspect-ratio:16/9;
      overflow:hidden;
      background:#713966;
    }
    .topic-card.featured .cover{aspect-ratio:1.48/1}
    .cover:before,.cover:after{
      content:"";
      position:absolute;
      border-radius:50%;
    }
    .cover:before{
      width:180px;
      height:180px;
      top:-54px;
      right:8%;
      background:rgba(242,132,113,.68);
    }
    .cover:after{
      width:110px;
      height:110px;
      left:12%;
      bottom:-38px;
      background:rgba(248,211,177,.38);
    }
    .cover.two{background:#9a536d}
    .cover.three{background:#5d315f}
    .cover.four{background:#be6d68}
    .cover.five{background:#78466d}
    .cover.six{background:#9a6472}
    .cover-label{
      position:absolute;
      top:13px;
      left:13px;
      z-index:2;
      padding:4px 9px;
      border-radius:999px;
      background:rgba(40,27,49,.68);
      color:#fff;
      font-size:11px;
      font-weight:700;
    }
    .duration{
      position:absolute;
      right:13px;
      bottom:12px;
      z-index:2;
      padding:3px 7px;
      border-radius:6px;
      background:rgba(40,27,49,.78);
      color:#fff;
      font-size:11px;
    }
    .play{
      position:absolute;
      left:50%;
      top:50%;
      z-index:2;
      display:grid;
      place-items:center;
      width:48px;
      height:48px;
      border:1px solid rgba(255,255,255,.55);
      border-radius:50%;
      background:rgba(40,27,49,.58);
      color:#fff;
      transform:translate(-50%,-50%);
      transition:.2s;
    }
    .topic-card:hover .play{background:var(--coral);transform:translate(-50%,-50%) scale(1.05)}
    .topic-body{padding:17px 18px 19px}
    .topic-body h3{
      display:-webkit-box;
      overflow:hidden;
      min-height:52px;
      margin:10px 0 5px;
      color:var(--plum);
      font-size:17px;
      line-height:1.55;
      -webkit-line-clamp:2;
      -webkit-box-orient:vertical;
    }
    .topic-card.featured .topic-body h3{font-size:22px}
    .topic-body p{
      display:-webkit-box;
      overflow:hidden;
      min-height:47px;
      margin:0;
      color:var(--muted);
      font-size:13px;
      line-height:1.65;
      -webkit-line-clamp:2;
      -webkit-box-orient:vertical;
    }
    .topic-meta{
      display:flex;
      justify-content:space-between;
      gap:8px;
      margin-top:13px;
      color:#938695;
      font-size:12px;
    }
    .badge-soft{
      display:inline-block;
      padding:4px 9px;
      border-radius:999px;
      background:#f8e6e8;
      color:#ac4654;
      font-size:12px;
      font-weight:800;
    }
    .status{
      color:var(--success);
      font-weight:700;
    }
    .browse-strip{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:12px;
    }
    .browse-item{
      display:flex;
      gap:12px;
      align-items:flex-start;
      padding:18px;
      border:1px solid var(--line);
      border-radius:14px;
      background:#fff;
    }
    .browse-icon{
      flex:0 0 36px;
      display:grid;
      place-items:center;
      width:36px;
      height:36px;
      border-radius:11px;
      background:#f5e2e5;
      color:var(--coral);
      font-weight:900;
    }
    .browse-item h3{margin:0;color:var(--plum);font-size:16px}
    .browse-item p{margin:3px 0 0;color:var(--muted);font-size:13px;line-height:1.6}
    .compliance{
      padding:23px 26px;
      border-left:4px solid var(--coral);
      border-radius:0 15px 15px 0;
      background:#f7eceb;
    }
    .compliance h2{margin:0 0 5px;color:var(--plum);font-size:20px}
    .compliance p{margin:0;color:#6d5968;font-size:14px}
    .faq-box{
      padding:10px 22px;
      border:1px solid var(--line);
      border-radius:20px;
      background:#fff;
    }
    .accordion-item{
      border:0!important;
      border-bottom:1px solid var(--line)!important;
      background:transparent!important;
    }
    .accordion-item:last-child{border-bottom:0!important}
    .accordion-button{
      padding:18px 0;
      background:transparent!important;
      color:var(--plum)!important;
      font-weight:800;
      box-shadow:none!important;
    }
    .accordion-button:not(.collapsed){color:var(--coral)!important}
    .accordion-button:focus{box-shadow:none!important}
    .accordion-body{padding:0 0 18px;color:var(--muted);font-size:14px}
    .cta{
      padding:36px 40px;
      border-radius:22px;
      background:#f0e4ef;
      border:1px solid #e2d2e2;
    }
    .cta h2{margin:0;color:var(--plum);font-size:28px}
    .cta p{margin:8px 0 0;color:var(--muted);font-size:15px}
    .pagination .page-link{
      margin:0 4px;
      border:1px solid var(--line);
      border-radius:9px!important;
      color:var(--plum);
      background:#fff;
    }
    .pagination .page-item.active .page-link{
      border-color:var(--plum);
      background:var(--plum);
      color:#fff;
    }
    .site-footer{
      margin-top:32px;
      padding:44px 0 22px;
      background:var(--plum);
      color:#eadfeb;
    }
    .site-footer .brand{color:#fff}
    .footer-grid{
      display:grid;
      grid-template-columns:1.5fr .7fr .8fr 1fr;
      gap:34px;
    }
    .footer-copy{max-width:350px;color:#cbb9cf;font-size:13px;line-height:1.7}
    .footer-title{margin:2px 0 11px;color:#fff;font-weight:800}
    .footer-links{display:grid;gap:7px;color:#cbb9cf;font-size:13px}
    .footer-links a{transition:.2s}
    .footer-links a:hover{color:#fff}
    .footer-bottom{
      display:flex;
      justify-content:space-between;
      gap:20px;
      margin-top:34px;
      padding-top:18px;
      border-top:1px solid rgba(255,255,255,.15);
      color:#bca8c0;
      font-size:12px;
    }
    @media (max-width:991px){
      .topbar{gap:14px}
      .topic-grid{grid-template-columns:1fr 1fr}
      .topic-card.featured{grid-column:span 2;grid-row:auto}
      .topic-card.featured .cover{aspect-ratio:2.1/1}
      .browse-strip{grid-template-columns:1fr 1fr}
      .footer-grid{grid-template-columns:1.3fr 1fr 1fr}
    }
    @media (max-width:767px){
      .topbar{min-height:64px;flex-wrap:wrap;padding:10px 0}
      .brand{font-size:16px}
      .brand-mark{width:29px;height:29px}
      .site-search{order:3;flex-basis:100%;max-width:none;margin:0 0 2px}
      .topbar .btn-brand{padding:0 13px;font-size:13px}
      .hero-kv{padding:29px 24px;min-height:390px;border-radius:21px}
      .hero-kv h1{font-size:34px}
      .hero-kv p{font-size:15px}
      .page-hero{padding-top:25px}
      .section{padding:32px 0}
      .section-head{display:block}
      .section-head .btn-quiet{margin-top:15px}
      .filter-panel{padding:14px}
      .filter-tags{margin-top:14px}
      .topic-grid{grid-template-columns:1fr}
      .topic-card.featured{grid-column:auto}
      .topic-card.featured .cover{aspect-ratio:16/9}
      .topic-card.featured .topic-body h3{font-size:19px}
      .browse-strip{grid-template-columns:1fr}
      .compliance{padding:18px}
      .cta{padding:27px 22px}
      .cta h2{font-size:23px}
      .footer-grid{grid-template-columns:1fr 1fr;gap:25px}
      .footer-grid>div:first-child{grid-column:span 2}
      .footer-bottom{display:block}
      .footer-bottom span{display:block;margin-top:5px}
    }
    @media (max-width:520px){
      .hero-actions .btn-brand,.hero-actions .btn-quiet{width:100%}
      .footer-grid{grid-template-columns:1fr}
      .footer-grid>div:first-child{grid-column:auto}
    }
    @media (prefers-reduced-motion:reduce){
      *,*:before,*:after{scroll-behavior:auto!important;transition:none!important}
    }
