:root{--bg:#f4fafc;--paper:#fff;--navy:#0a2940;--muted:#667b89;--cyan:#18c7cf;--pink:#ff4f78;--line:#dbe9ee;--ice:#e9f7fa}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--navy);font-family:-apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif;line-height:1.65;overflow-x:hidden}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}header{position:sticky;top:0;z-index:30;background:rgba(244,250,252,.94);border-bottom:1px solid var(--line);backdrop-filter:blur(16px)}.nav{width:min(1320px,calc(100% - 40px));height:84px;margin:auto;display:flex;align-items:center;gap:30px}.brand{display:flex;align-items:center;gap:12px;margin-right:auto}.brand svg{width:48px}.brand b,.brand small{display:block}.brand b{font-size:22px}.brand small{font-size:9px;letter-spacing:1.8px;color:#78909e}.nav nav{display:flex;gap:27px;font-size:14px;font-weight:800;color:#496173}.nav nav a:hover{color:var(--pink)}.nav-cta,.primary{background:var(--navy);color:#fff;border-radius:999px;padding:12px 22px;font-weight:900}.hero{width:min(1320px,calc(100% - 40px));min-height:720px;margin:auto;padding:70px 0;display:grid;grid-template-columns:1.05fr .95fr;gap:80px;align-items:center}.hero>*{min-width:0}.eyebrow{color:#129ca7;font-size:12px;font-weight:900;letter-spacing:1.8px}.eyebrow i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--pink);margin-right:8px}.hero h1{font-size:clamp(48px,6vw,82px);line-height:1.04;margin:20px 0 26px;letter-spacing:-2px}.hero h1>span{display:block}.hero h1>span:last-child{color:var(--pink)}.lead{font-size:18px;color:var(--muted);max-width:700px}.mobile-only{display:none}.actions{display:flex;gap:12px;margin:34px 0}.primary,.secondary{display:inline-flex;gap:12px;align-items:center}.secondary{border:1px solid var(--line);background:#fff;border-radius:999px;padding:11px 21px;font-weight:850}.hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:44px}.hero-stats span{border-top:1px solid var(--line);padding-top:15px}.hero-stats b,.hero-stats small{display:block}.hero-stats small{color:#8799a4;font-size:12px}.feature-wrap{position:relative;min-height:570px}.feature-poster{position:absolute;left:55px;top:5px;width:390px;border-radius:28px;overflow:hidden;background:#fff;box-shadow:0 36px 90px rgba(30,80,105,.2)}.feature-poster>img{width:100%;aspect-ratio:3/4;object-fit:cover}.feature-tag{padding:22px 24px;background:#fff}.feature-tag small,.feature-tag b,.feature-tag span{display:block}.feature-tag small{color:var(--pink);font-weight:900}.feature-tag b{font-size:22px;margin:5px 0}.feature-tag span{color:#159ea9;font-size:13px;font-weight:800}.feature-wrap aside{position:absolute;right:0;top:110px;width:240px;background:var(--navy);color:#fff;padding:25px;border-radius:20px;box-shadow:0 20px 50px rgba(10,41,64,.22)}.feature-wrap aside small{color:var(--cyan);font-weight:900;letter-spacing:1px}.feature-wrap aside p{font-family:Georgia,"Songti SC",serif;font-size:18px}.feature-wrap aside a{color:#fff;font-size:12px;font-weight:800}.ticker{border-block:1px solid var(--line);padding:20px max(20px,calc((100% - 1320px)/2));display:grid;grid-template-columns:auto 1fr auto;gap:30px;align-items:center;background:#fff}.ticker span{color:var(--pink);font-weight:900}.ticker p{margin:0;color:#5d7585}.ticker a{font-weight:850}.ranking,.library,.guide,.about{width:min(1320px,calc(100% - 40px));margin:auto;padding:105px 0}.section-head{display:flex;justify-content:space-between;align-items:end;gap:50px;margin-bottom:38px}.section-head h2,.topic-panel h2,.guide h2,.about h2{font-size:clamp(34px,4vw,56px);line-height:1.15;margin:8px 0}.section-head>p{max-width:500px;color:var(--muted)}.rank-list{border-top:1px solid var(--line)}.rank-row{display:grid;grid-template-columns:70px 112px 1fr auto;gap:25px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line)}.rank-no{font:700 32px Georgia,serif;color:#9eb2bd}.rank-thumb{width:112px;height:112px;border-radius:16px;overflow:hidden}.rank-thumb img{width:100%;height:100%;object-fit:cover}.rank-copy small{color:#159da7;font-weight:900}.rank-copy h3{font-size:22px;margin:3px 0}.rank-copy p{margin:0;color:var(--muted)}.rank-row>a{padding:10px 16px;border:1px solid var(--line);border-radius:999px;font-size:13px;font-weight:850}.topic-panel{padding:80px max(20px,calc((100% - 1320px)/2));background:var(--navy);color:#fff;display:grid;grid-template-columns:.8fr 1.2fr;gap:90px;align-items:center}.topic-panel>div>p:last-child{color:#a8bfcc}.eyebrow.light{color:var(--cyan)}.topic-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.topic-grid a{padding:24px;border:1px solid #315267;border-radius:16px;background:#0e334e;transition:.2s}.topic-grid a:hover{transform:translateY(-3px);border-color:var(--cyan)}.topic-grid b,.topic-grid span{display:block}.topic-grid b{font-size:18px}.topic-grid span{font-size:13px;color:#a8c2cf}.library-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.library-card{background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden}.poster{position:relative}.poster img{width:100%;aspect-ratio:3/4;object-fit:cover}.poster span{position:absolute;left:12px;top:12px;background:rgba(10,41,64,.9);color:#fff;border-radius:999px;padding:5px 10px;font-size:10px;font-weight:850}.library-card>div:last-child{padding:17px}.library-card small{color:var(--pink);font-weight:900}.library-card h3{font-size:18px;margin:5px 0 13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.library-card a{font-size:13px;color:#128e98;font-weight:850}.guide{border-top:1px solid var(--line);display:grid;grid-template-columns:.75fr 1.25fr;gap:80px}.guide-steps{display:grid;gap:12px}.guide article{display:grid;grid-template-columns:55px 170px 1fr;align-items:center;gap:18px;padding:22px;background:#fff;border:1px solid var(--line);border-radius:16px}.guide article span{color:var(--pink);font:700 22px Georgia,serif}.guide article b{font-size:17px}.guide article p{margin:0;color:var(--muted)}.about{background:var(--ice);border-radius:28px;padding:55px;display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}.about>div{display:flex;align-items:center;gap:18px}.about svg{width:64px}.about p{color:var(--muted);font-size:17px}footer{padding:28px max(20px,calc((100% - 1320px)/2));border-top:1px solid var(--line);display:flex;justify-content:space-between;color:#708692;font-size:13px}footer b{color:var(--navy)}
@media(max-width:960px){.nav nav{display:none}.hero{grid-template-columns:1fr}.feature-wrap{min-height:600px}.topic-panel,.guide{grid-template-columns:1fr}.library-grid{grid-template-columns:repeat(2,1fr)}.brand small{display:none}}
@media(max-width:560px){.nav{height:66px}.nav-cta{font-size:12px;padding:9px 13px}.hero{min-height:auto;padding:52px 0;gap:45px}.hero h1{font-size:34px;line-height:1.1;letter-spacing:-1px}.mobile-only{display:inline}.lead{font-size:16px;word-break:break-all}.actions{flex-direction:column;align-items:start}.hero-stats{grid-template-columns:1fr 1fr}.hero-stats span:last-child{display:none}.feature-wrap{min-height:455px}.feature-poster{left:20px;width:270px}.feature-wrap aside{right:-8px;top:105px;width:170px;padding:18px}.feature-wrap aside p{font-size:15px}.ticker{grid-template-columns:1fr;gap:4px}.ticker a{display:none}.ranking,.library,.guide,.about{padding:72px 0}.section-head{display:block}.rank-row{grid-template-columns:44px 78px 1fr;gap:12px}.rank-thumb{width:78px;height:92px}.rank-copy h3{font-size:16px}.rank-copy p{display:none}.rank-row>a{display:none}.topic-panel{gap:35px;padding-block:70px}.topic-grid{grid-template-columns:1fr}.library-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.library-card>div:last-child{padding:12px}.library-card h3{font-size:14px}.guide article{grid-template-columns:42px 1fr}.guide article p{grid-column:2}.about{width:calc(100% - 24px);padding:28px;grid-template-columns:1fr}.about>div{align-items:flex-start}footer{flex-direction:column;gap:8px}}

/* final hero sizing */
.feature-wrap{min-height:640px}.feature-poster>img{height:520px;object-fit:cover}
/* Keep responsive cards at 3:4 even when HTML reserves intrinsic image height. */
.library-card .poster img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}
@media(max-width:560px){.feature-wrap{min-height:410px}.feature-poster{left:50%;transform:translateX(-50%)}.feature-poster>img{height:310px}.feature-tag{padding:16px 18px}.feature-tag b{font-size:18px}.feature-wrap aside{display:none}.library-card .poster img{height:auto;max-height:none}}

/* mobile-first official dock */
.mobile-dock{display:none}
@media(max-width:560px){body{padding-bottom:82px}.nav-cta{display:none}.mobile-dock{position:fixed;z-index:80;left:12px;right:12px;bottom:10px;display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:7px;background:#fffffff2;color:#0a2940;border:1px solid #dbe9ee;border-radius:18px;box-shadow:0 14px 42px rgba(0,0,0,.24);backdrop-filter:blur(18px)}.mobile-dock a{min-width:0;padding:8px 4px;border-radius:12px;text-align:center;font-size:12px;font-weight:900;white-space:nowrap}.mobile-dock a::before{content:"";display:block;width:6px;height:6px;margin:0 auto 4px;border-radius:50%;background:#18c7cf}.mobile-dock a:first-child{background:#18c7cf;color:#ffffff}}
@media(max-width:560px){.mobile-dock{left:12px;right:auto;width:calc(100vw - 24px);max-width:calc(100vw - 24px);grid-template-columns:repeat(3,minmax(0,1fr));overflow:hidden}.mobile-dock a{overflow:hidden;text-overflow:ellipsis}}
.feature-tag{display:block}