:root{
  --bg:#0f1512;
  --bg2:#151d18;
  --bg3:#1b251f;
  --bg4:#223029;
  --ink:#f1e6c8;
  --ink2:#c8b894;
  --ink3:#8f8062;
  --line:rgba(201,164,92,.16);
  --line-soft:rgba(201,164,92,.18);
  --gold:#c9a45c;
  --gold-2:#a9853f;
  --gold-3:#7f6428;
  --red:#a8432f;
  --blue:#7fa6a0;
  --shadow:rgba(0,0,0,.62);
  --display:Georgia,"Songti SC",serif;
  --sans:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);
  background-image:
    radial-gradient(1100px 620px at 50% -8%,rgba(201,164,92,.10),transparent 62%),
    radial-gradient(900px 520px at 94% 6%,rgba(201,164,92,.05),transparent 60%),
    repeating-linear-gradient(0deg,rgba(230,210,160,.014) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(90deg,rgba(230,210,160,.010) 0 1px,transparent 1px 4px);
  color:var(--ink);
  font-family:var(--sans);
  line-height:1.75;
  overflow-x:hidden;
}
::selection{background:var(--gold);color:var(--bg)}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(images/10.webp)' opacity='0.05'/%3E%3C/svg%3E");
  opacity:.6;mix-blend-mode:overlay;
}
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:2;
  background:radial-gradient(ellipse at center,transparent 46%,rgba(0,0,0,.55) 100%);
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{max-width:1240px;margin:0 auto;padding:0 30px;position:relative;z-index:3}
.sec{padding-top:104px}
.sec:first-of-type{padding-top:56px}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.2}
h2{font-size:clamp(26px,3.4vw,42px);letter-spacing:.01em}
h2 em{font-style:normal;color:var(--gold)}
.sub{color:var(--ink2);font-size:14px;line-height:1.9}
.kicker{color:var(--gold);font-size:12px;letter-spacing:.34em;text-transform:uppercase;margin-bottom:14px;display:block}

/* ===== header ===== */
.topbar{
  position:sticky;top:0;z-index:50;
  background:rgba(15,21,18,.82);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar-in{max-width:1240px;margin:0 auto;padding:12px 30px;display:flex;align-items:center;gap:26px}
.brand{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.brand img{height:32px;width:auto;border-radius:6px}
.brand-name{font-family:var(--display);font-size:19px;letter-spacing:.08em;color:var(--ink);white-space:nowrap}
.nav{display:flex;gap:22px;overflow-x:auto;scrollbar-width:none;flex:1 1 auto;min-width:0}
.nav::-webkit-scrollbar{display:none}
.nav a{font-size:13.5px;color:var(--ink2);white-space:nowrap;padding:4px 0;border-bottom:1px solid transparent;transition:color .25s,border-color .25s}
.nav a:hover{color:var(--gold);border-bottom-color:var(--gold)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--sans);font-size:14px;font-weight:600;
  padding:11px 22px;border-radius:6px;border:1px solid transparent;
  transition:transform .2s,box-shadow .25s,background .25s,color .25s,border-color .25s;
  cursor:pointer;
}
.btn-gold{background:linear-gradient(180deg,var(--gold),var(--gold-2));color:#1a1408;box-shadow:0 6px 20px rgba(0,0,0,.45)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(0,0,0,.55)}
.btn-ghost{border-color:var(--line-soft);color:var(--ink);background:rgba(201,164,92,.04)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
.topbar .btn{flex:0 0 auto;padding:9px 18px;font-size:13px}

/* ===== hero ===== */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;padding-top:24px}
.hero-tag{display:inline-block;font-size:12px;letter-spacing:.3em;color:var(--gold);border:1px solid var(--line-soft);padding:5px 14px;border-radius:999px;margin-bottom:22px}
.hero h1{font-size:clamp(36px,5.6vw,68px);letter-spacing:.02em;margin-bottom:20px}
.hero h1 em{font-style:normal;color:var(--gold);text-shadow:0 0 34px rgba(201,164,92,.25)}
.hero p{color:var(--ink2);font-size:15.5px;line-height:1.95;max-width:520px}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.hero-actions .btn{padding:14px 30px;font-size:15px}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.stat{background:var(--bg2);padding:26px 22px;position:relative}
.stat-num{font-family:var(--display);font-size:clamp(26px,3.2vw,38px);color:var(--ink);line-height:1.1}
.stat-num i{font-style:normal;color:var(--gold);font-size:.56em;margin-left:3px}
.stat-label{font-size:12.5px;color:var(--ink3);margin-top:8px;letter-spacing:.06em}

/* ===== timeline ===== */
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:34px}
.sec-head .sub{max-width:420px;text-align:right}
.timeline{display:flex;gap:18px;overflow-x:auto;padding:6px 4px 26px;scroll-snap-type:x mandatory;scrollbar-width:thin}
.timeline::-webkit-scrollbar{height:6px}
.timeline::-webkit-scrollbar-thumb{background:var(--line-soft);border-radius:4px}
.tl-card{flex:0 0 196px;scroll-snap-align:start;position:relative;border-radius:9px;overflow:hidden;border:1px solid var(--line);background:var(--bg2);transition:transform .28s,border-color .28s,box-shadow .28s}
.tl-card:hover{transform:translateY(-6px);border-color:var(--gold);box-shadow:0 18px 34px var(--shadow)}
.tl-time{font-size:12px;color:var(--gold);padding:10px 12px;letter-spacing:.1em;border-bottom:1px solid var(--line)}
.tl-cover{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--bg3)}
.tl-cover img{width:100%;height:100%;object-fit:cover;transition:transform .45s}
.tl-card:hover .tl-cover img{transform:scale(1.06)}
.tl-badge{position:absolute;top:9px;left:9px;font-size:11px;padding:2px 8px;border-radius:3px;background:var(--red);color:#fff;letter-spacing:.06em}
.tl-badge.blue{background:var(--blue);color:#0f1512}
.tl-badge.gold{background:var(--gold-2);color:#1a1408}
.tl-hot{position:absolute;right:9px;bottom:9px;font-size:11px;color:var(--ink);background:rgba(15,21,18,.72);padding:2px 8px;border-radius:3px}
.tl-info{position:absolute;inset:auto 0 0 0;padding:34px 12px 12px;background:linear-gradient(transparent,rgba(10,15,12,.94))}
.tl-info h4{font-size:14px;line-height:1.35}
.tl-info span{font-size:11.5px;color:var(--ink3)}

/* rank radios */
.rank{margin-top:14px}
.rank input{position:absolute;opacity:0;pointer-events:none}
.rank-tabs{display:flex;gap:10px;margin-bottom:22px;border-bottom:1px solid var(--line);padding-bottom:12px}
.rank-tabs label{font-size:14px;color:var(--ink3);padding:6px 16px;border:1px solid var(--line);border-radius:4px;cursor:pointer;transition:all .22s;letter-spacing:.08em}
.rank-tabs label:hover{color:var(--ink)}
#r-today:checked ~ .rank-tabs label[for="r-today"],
#r-week:checked ~ .rank-tabs label[for="r-week"],
#r-month:checked ~ .rank-tabs label[for="r-month"]{background:rgba(201,164,92,.12);border-color:var(--gold);color:var(--gold)}
.rank-list{display:none;grid-template-columns:repeat(4,1fr);gap:16px}
#r-today:checked ~ .rank-list.r-today,
#r-week:checked ~ .rank-list.r-week,
#r-month:checked ~ .rank-list.r-month{display:grid}
.rank-item{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:7px;padding:12px;background:var(--bg2);transition:border-color .25s,transform .25s}
.rank-item:hover{border-color:var(--gold);transform:translateY(-3px)}
.rank-no{font-family:var(--display);font-size:20px;color:var(--ink3);min-width:20px;text-align:center}
.rank-item:nth-child(-n+4) .rank-no{color:var(--gold)}
.rank-thumb{width:44px;height:58px;flex:0 0 auto;border-radius:4px;overflow:hidden;background:var(--bg3)}
.rank-thumb img{width:100%;height:100%;object-fit:cover}
.rank-txt{min-width:0}
.rank-txt h4{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rank-meta{font-size:11.5px;color:var(--ink3)}
.rank-hot{font-size:11px;color:var(--gold-2);margin-top:2px}

/* ===== topics ===== */
.topic-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.topic{background:var(--bg2);padding:32px 28px;transition:background .25s}
.topic:hover{background:var(--bg3)}
.topic .kicker{margin-bottom:10px}
.topic h4{font-size:21px;margin-bottom:12px}
.topic p{font-size:13.5px;color:var(--ink2);line-height:1.85}
.topic-meta{margin-top:20px;padding-top:14px;border-top:1px solid var(--line);display:flex;justify-content:space-between;font-size:12px;color:var(--ink3)}

/* ===== library ===== */
.lib{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--bg2)}
.lib input{position:absolute;opacity:0;pointer-events:none}
.lib-tabs{display:flex;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none;background:var(--bg3)}
.lib-tabs::-webkit-scrollbar{display:none}
.lib-tabs label{flex:1 1 auto;min-width:170px;padding:18px 22px;cursor:pointer;color:var(--ink3);position:relative;transition:color .25s;border-right:1px solid var(--line)}
.lib-tabs label:last-child{border-right:0}
.lib-tabs label strong{display:block;font-family:var(--display);font-size:17px;font-weight:700}
.lib-tabs label span{font-size:11.5px;letter-spacing:.06em}
.lib-tabs label::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:transparent;transition:background .25s}
.lib-tabs label:hover{color:var(--ink)}
#t1:checked ~ .lib-tabs label[for="t1"],
#t2:checked ~ .lib-tabs label[for="t2"],
#t3:checked ~ .lib-tabs label[for="t3"]{color:var(--gold);background:rgba(201,164,92,.07)}
#t1:checked ~ .lib-tabs label[for="t1"]::after,
#t2:checked ~ .lib-tabs label[for="t2"]::after,
#t3:checked ~ .lib-tabs label[for="t3"]::after{background:var(--gold)}
.panel{display:none;padding:28px}
#t1:checked ~ .panel.p1,
#t2:checked ~ .panel.p2,
#t3:checked ~ .panel.p3{display:block}
.panel-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;margin-bottom:24px}
.panel-head p{font-size:13.5px;color:var(--ink2);max-width:620px}
.panel-head .meta{font-size:12px;color:var(--ink3);letter-spacing:.06em;white-space:nowrap}
.lib-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{position:relative}
.card-cover{position:relative;aspect-ratio:3/4;border-radius:8px;overflow:hidden;background:var(--bg3);border:1px solid var(--line);transition:border-color .28s,box-shadow .28s,transform .28s}
.card:hover .card-cover{border-color:var(--gold);box-shadow:0 18px 32px var(--shadow);transform:translateY(-5px)}
.card-cover img{width:100%;height:100%;object-fit:cover}
.score{position:absolute;top:10px;right:10px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-size:14px;color:var(--gold);background:rgba(15,21,18,.86);border:1px solid var(--gold);z-index:2;box-shadow:0 6px 14px rgba(0,0,0,.5)}
.tag{position:absolute;top:10px;left:10px;font-size:11px;padding:2px 8px;border-radius:3px;letter-spacing:.05em;z-index:2}
.tag.ai{background:var(--blue);color:#0f1512}
.tag.new{background:var(--red);color:#fff}
.tag.mod{background:var(--gold-2);color:#1a1408}
.tag.org{background:var(--gold);color:#1a1408}
.hot{position:absolute;right:10px;bottom:10px;font-size:11px;color:var(--ink);background:rgba(15,21,18,.74);padding:2px 8px;border-radius:3px;z-index:2}
.card h4{font-size:15px;margin-top:12px;font-family:var(--sans);font-weight:600}
.card-info{font-size:12px;color:var(--ink3);margin-top:4px;letter-spacing:.03em}

/* ===== AI finder ===== */
.ai{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:start}
.ai-left p{color:var(--ink2);font-size:14.5px;margin-top:16px;line-height:1.9}
.fake-input{margin-top:26px;border:1px solid var(--line);border-radius:7px;background:var(--bg2);padding:15px 16px;color:var(--ink2);font-size:14px;line-height:1.7}
.fake-btn{margin-top:14px;display:inline-flex;align-items:center;justify-content:center;padding:12px 34px;border-radius:6px;background:linear-gradient(180deg,var(--gold),var(--gold-2));color:#1a1408;font-weight:700;font-size:14px;cursor:default}
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
.chips span{font-size:12.5px;padding:5px 13px;border:1px solid var(--line);border-radius:999px;color:var(--ink2);transition:all .22s;cursor:default}
.chips span:hover{border-color:var(--gold);color:var(--gold)}
.ai-tip{font-size:12px;color:var(--ink3);margin-top:16px;line-height:1.8}
.ai-box{border:1px solid var(--line);border-radius:10px;background:var(--bg2);padding:24px}
.ai-box-head{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:6px}
.ai-box-head h3{font-size:17px}
.ai-box-head b{font-size:12.5px;color:var(--gold);font-weight:600}
.ai-list{list-style:none}
.ai-list li{display:flex;gap:14px;align-items:flex-start;padding:15px 0;border-bottom:1px solid var(--line)}
.ai-list li:last-child{border-bottom:0}
.ai-no{font-family:var(--display);color:var(--gold);font-size:15px;min-width:16px;padding-top:2px}
.ai-thumb{width:46px;height:62px;border-radius:4px;overflow:hidden;background:var(--bg3);flex:0 0 auto}
.ai-thumb img{width:100%;height:100%;object-fit:cover}
.ai-txt{min-width:0;flex:1}
.ai-txt h4{font-size:14px;font-family:var(--sans);font-weight:600}
.ai-txt p{font-size:12.5px;color:var(--ink3);line-height:1.7;margin-top:3px}
.ai-score{font-size:12px;color:var(--gold);white-space:nowrap;padding-top:2px;text-align:right;line-height:1.6}
.ai-score small{display:block;color:var(--ink3);font-size:11px}
.sort-chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}
.sort-chips span{font-size:12px;padding:4px 12px;border:1px solid var(--line);border-radius:999px;color:var(--ink2);cursor:default}
.sort-chips span:first-child{border-color:var(--gold);color:var(--gold)}

/* ===== download ===== */
.dl{display:grid;grid-template-columns:1.25fr 1fr;gap:52px;align-items:center}
.dl h2{margin-bottom:18px}
.dl p{color:var(--ink2);font-size:14.5px;line-height:1.95;max-width:520px;margin-top:10px}
.steps{list-style:none;counter-reset:s;margin-top:28px}
.steps li{counter-increment:s;position:relative;padding-left:44px;margin-bottom:18px;font-size:14px;color:var(--ink)}
.steps li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:0;font-family:var(--display);font-size:15px;color:var(--gold);border:1px solid var(--line-soft);width:28px;height:28px;display:grid;place-items:center;border-radius:50%}
.steps li span{display:block;font-size:12.5px;color:var(--ink3);margin-top:2px}
.dl-side{border:1px solid var(--line);border-radius:12px;padding:30px;background:
  repeating-linear-gradient(135deg,rgba(201,164,92,.05) 0 8px,transparent 8px 16px),var(--bg2)}
.qr{width:132px;height:132px;margin:0 auto 16px;border:1px solid var(--gold);border-radius:8px;padding:10px;background:var(--bg)}
.qr svg{width:100%;height:100%;display:block}
.dl-side .qr-note{text-align:center;font-size:12.5px;color:var(--ink3);line-height:1.8}
.dl-btns{display:flex;flex-direction:column;gap:10px;margin-top:22px}
.dl-btns .btn{width:100%;font-size:13.5px;padding:11px 16px}
.dl-btns .btn:first-child{background:linear-gradient(180deg,var(--gold),var(--gold-2));color:#1a1408;font-weight:700}

/* ===== reviews ===== */
.rev{display:grid;grid-template-columns:1fr 1.45fr;gap:46px;align-items:start}
.big-score{font-family:var(--display);font-size:64px;line-height:1;color:var(--ink)}
.big-score small{font-size:20px;color:var(--ink3)}
.stars{color:var(--gold);letter-spacing:.22em;font-size:16px;margin:12px 0 6px}
.rev-note{font-size:12.5px;color:var(--ink3)}
.bars{margin-top:26px}
.bar-row{display:flex;align-items:center;gap:12px;font-size:12px;color:var(--ink3);margin-bottom:10px}
.bar-row i{font-style:normal;width:30px}
.bar-track{flex:1;height:5px;background:var(--bg4);border-radius:4px;overflow:hidden}
.bar-fill{height:100%;width:var(--w);background:linear-gradient(90deg,var(--gold-3),var(--gold));border-radius:4px}
.rev-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.rev-card{border:1px solid var(--line);border-radius:9px;background:var(--bg2);padding:20px;transition:border-color .25s}
.rev-card:hover{border-color:var(--gold)}
.rev-top{display:flex;align-items:center;gap:10px}
.avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-size:14px;color:#1a1408;background:linear-gradient(150deg,var(--gold),var(--gold-2));flex:0 0 auto}
.rev-name{font-size:13.5px;font-weight:600}
.rev-prog{font-size:11px;color:var(--ink3)}
.rev-card .stars{font-size:12px;margin:10px 0 0;letter-spacing:.16em}
.rev-quote{font-size:13.5px;color:var(--ink);line-height:1.85;margin-top:10px;border-left:2px solid var(--line-soft);padding-left:12px}
.rev-foot{display:flex;gap:16px;font-size:11.5px;color:var(--ink3);margin-top:14px;flex-wrap:wrap}
.rev-form{grid-column:1/-1;border:1px solid var(--line);border-radius:9px;background:var(--bg2);padding:22px;display:grid;gap:12px}
.rev-form input,.rev-form textarea{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:6px;color:var(--ink);font-family:var(--sans);font-size:13.5px;padding:11px 13px;outline:none;transition:border-color .22s}
.rev-form input:focus,.rev-form textarea:focus{border-color:var(--gold)}
.rev-form textarea{min-height:88px;resize:vertical}
.rev-form .btn{justify-self:start;padding:11px 30px}

/* ===== faq ===== */
.faq details{border-bottom:1px solid var(--line);padding:6px 0}
.faq summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:52px 1fr 30px;align-items:center;gap:12px;padding:18px 0;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq .q-no{font-family:var(--display);color:var(--gold);font-size:14px}
.faq .q-text{font-size:15.5px}
.plus{position:relative;width:16px;height:16px;justify-self:end;transition:transform .28s}
.plus::before,.plus::after{content:"";position:absolute;background:var(--ink2);transition:background .28s}
.plus::before{left:0;top:7px;width:16px;height:2px}
.plus::after{top:0;left:7px;width:2px;height:16px}
details[open] .plus{transform:rotate(45deg)}
details[open] .plus::before,details[open] .plus::after{background:var(--gold)}
.faq-ans{padding:0 0 22px 64px;color:var(--ink2);font-size:14px;line-height:1.95}
.faq-ans b{color:var(--gold);font-weight:600}

/* ===== footer ===== */
footer{border-top:1px solid var(--line);margin-top:104px;padding:54px 0 30px;background:rgba(12,17,14,.7)}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px}
.foot-grid h4{font-size:13px;letter-spacing:.14em;color:var(--gold);margin-bottom:16px;font-family:var(--sans);font-weight:600}
.foot-grid p,.foot-grid a{font-size:12.5px;color:var(--ink3);line-height:2;display:block}
.foot-grid a:hover{color:var(--gold)}
.foot-brand{display:flex;align-items:center;gap:9px;margin-bottom:14px}
.foot-brand img{height:26px;border-radius:5px}
.foot-brand b{font-family:var(--display);font-size:16px;color:var(--ink);letter-spacing:.08em}
.foot-bottom{margin-top:44px;padding-top:22px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;font-size:12px;color:var(--ink3)}
.foot-bottom a{color:var(--ink3)}
.foot-bottom a:hover{color:var(--gold)}
.foot-bottom time{color:var(--ink3)}
.to-top{position:fixed;right:22px;bottom:22px;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(160deg,var(--gold),var(--gold-2));color:#1a1408;font-size:18px;font-weight:700;z-index:60;box-shadow:0 10px 24px rgba(0,0,0,.55);transition:transform .22s}
.to-top:hover{transform:translateY(-4px)}

/* ===== responsive ===== */
@media (max-width:1080px){
  .rank-list{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  .hero,.dl,.rev,.ai{grid-template-columns:1fr;gap:34px}
  .lib-grid{grid-template-columns:repeat(2,1fr)}
  .nav{display:none}
  .sec-head .sub{text-align:left}
  .rev-form{grid-column:auto}
}
@media (max-width:820px){
  .topic-grid{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
  .wrap{padding:0 22px}
}
@media (max-width:760px){
  .rank-list{grid-template-columns:repeat(2,1fr)}
  .rev-cards{grid-template-columns:1fr}
  .hero-actions .btn{flex:1 1 auto}
}
@media (max-width:640px){
  .tl-card{flex:0 0 156px}
  .faq-ans{padding-left:40px}
  .sec{padding-top:72px}
  .stats{grid-template-columns:1fr 1fr}
  .stat{padding:20px 16px}
}
@media (max-width:520px){
  .topic-grid,.lib-grid,.foot-grid{grid-template-columns:1fr}
  .rank-list{grid-template-columns:1fr 1fr}
  .lib-tabs label{min-width:140px;padding:14px 16px}
  .panel{padding:20px}
}
@media (max-width:480px){
  .rank-list{grid-template-columns:1fr}
  .topbar-in{gap:12px;padding:10px 18px}
  .brand-name{font-size:16px}
  .topbar .btn{padding:8px 12px;font-size:12px}
}
@media (hover:none){
  .tl-card:hover,.rank-item:hover,.card:hover .card-cover,.rev-card:hover,.btn-gold:hover,.to-top:hover{transform:none}
}