/* Huangguo Drama - responsive accessible editorial design */
:root{--bg:#FFF9F8;--paper:#FFFFFF;--pinklight:#FBE5EC;--pink:#EB7295;--softpink:#F4B7C8;--yellow:#FFF1BF;--gold:#F6DE8F;--ink:#171316;--body:#393237;--muted:#72666D;--weak:#968A90;--border:rgba(35,22,28,.12);--shadow:0 12px 30px rgba(80,35,50,.08)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);font:15.5px/1.75 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;color:var(--body);overflow-x:hidden}body.panel-open{overflow:hidden}img{display:block;max-width:100%;width:100%;height:100%;object-fit:contain;object-position:center}a{color:inherit;text-decoration:none}button,input{font:inherit}button{cursor:pointer}a,button,input{transition:color .18s ease,background .18s ease,box-shadow .18s ease,transform .18s ease}a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--pink);outline-offset:2px}button:active,.btn:active{transform:scale(.98)}[hidden]{display:none!important}.wrap{max-width:1140px;margin-inline:auto;padding-inline:24px}.skip-link{position:absolute;top:-100px;left:16px;z-index:999;background:white;padding:10px}.skip-link:focus{top:10px}.topline{background:var(--ink);color:white;font-size:12px;min-height:32px}.top-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:32px}.top-en{color:var(--gold);letter-spacing:.08em}.top-actions{display:flex;align-items:center;gap:20px}.top-actions a{color:var(--gold)}.top-search{background:none;border:0;color:white;min-height:32px;padding:0 6px}.site-header{background:white;border-bottom:1px solid #f3e0e6;position:relative;z-index:40}.nav-inner{height:64px;display:flex;align-items:center;gap:34px}.brand-link{display:inline-flex;align-items:center;min-height:44px;flex:0 0 auto;color:var(--ink);font-size:17px}.brand-logo{width:auto;height:28px;max-width:220px}.primary-nav{display:flex;align-items:stretch;gap:23px;height:100%;margin-left:auto}.primary-nav a{position:relative;display:flex;align-items:center;white-space:nowrap;font-size:14px;font-weight:650}.primary-nav a:hover,.primary-nav a[aria-current],.app-nav[aria-current]{color:#B83C67}.primary-nav a[aria-current]:after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--pink)}.nav-right{display:flex;align-items:center;gap:18px;margin-left:auto}.app-nav{font-size:14px;white-space:nowrap;font-weight:650}.menu-toggle,.mobile-search{border:1px solid var(--border);background:white;border-radius:10px;min-height:44px;padding:0 13px;color:var(--ink);font-size:13px;white-space:nowrap}.menu-toggle:hover,.mobile-search:hover{box-shadow:var(--shadow)}.mobile-search{display:none}.category-bar{background:#fff8e9;border-bottom:1px solid #f3e6e4}.category-inner{display:flex;gap:22px;flex-wrap:wrap;align-items:center;min-height:44px}.category-link{display:inline-flex;align-items:center;min-height:44px;font-size:13px;font-weight:600}.category-link:hover,.category-link[aria-current]{color:#B83C67}.mobile-categories{display:none}.site-footer{background:#201a1d;color:#f9f3f5;padding:46px 0 22px;margin-top:12px}.footer-brand{display:flex;align-items:center;gap:15px;margin-bottom:30px}.footer-logo{height:28px;width:auto;max-width:220px}.footer-brand div{display:flex;flex-direction:column;line-height:1.5}.footer-brand strong{font-size:17px}.footer-brand span{color:var(--gold);font-size:12px;letter-spacing:.12em}.footer-groups{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px}.footer-groups h2{font-size:14px;color:var(--gold);margin:0 0 14px}.footer-groups a{display:block;font-size:13px;line-height:2.35;color:#e8dde1}.footer-groups a:hover{color:white;text-decoration:underline}.footer-bottom{border-top:1px solid #51434a;margin-top:32px;padding-top:18px;font-size:12px;line-height:1.8;color:#d6c9ce}.footer-bottom p{margin:0 0 5px}.quick-access{margin-top:30px;margin-bottom:38px}.quick-inner{border-top:1px solid var(--border);padding-top:24px;display:flex;align-items:center;gap:24px}.quick-inner h2{font-size:14px;margin:0;white-space:nowrap}.quick-inner nav{display:flex;flex-wrap:wrap;gap:6px 20px}.quick-inner a{display:inline-flex;align-items:center;min-height:44px;font-size:13px}.quick-inner a:hover{color:#B83C67}.panel-overlay{position:fixed;inset:0;z-index:49;background:rgba(23,19,22,.45)}.site-panel{position:fixed;top:105px;left:50%;transform:translateX(-50%);z-index:50;width:min(900px,calc(100vw - 40px));max-height:68vh;background:#fff;box-shadow:0 25px 75px #180d1640;border-top:3px solid var(--pink);border-radius:0 0 15px 15px;overflow-y:auto;visibility:hidden;pointer-events:none;opacity:0;transition:opacity .18s ease,visibility .18s ease}.site-panel.is-open{visibility:visible;pointer-events:auto;opacity:1}.panel-head{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);padding:12px 22px}.panel-head h2{font-size:19px;color:var(--ink);margin:0}.panel-head button{border:0;background:transparent;font-size:27px;line-height:1;min-width:44px;min-height:44px}.menu-groups{display:grid;grid-template-columns:1fr 1fr;gap:22px 38px;padding:22px}.menu-group h3{font-size:14px;color:#9E325B;margin:0 0 8px}.menu-group a{display:block;border-bottom:1px solid #f4eaed;padding:8px 4px;min-height:54px}.menu-group a:hover{background:#fff7f9}.menu-group strong{display:block;color:var(--ink);font-size:14px}.menu-group span{display:block;color:var(--muted);font-size:12px}.search-panel{width:min(640px,calc(100vw - 32px));padding-bottom:15px}.search-panel label{display:block;margin:18px 22px 8px;font-size:13px;color:var(--muted)}.search-panel input{display:block;margin:0 22px 12px;width:calc(100% - 44px);min-height:46px;padding:10px 13px;border:1px solid #d9c3ce;border-radius:10px}.search-results{padding:0 22px}.search-results a{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:46px;border-bottom:1px solid #f2e8ec;font-size:14px;font-weight:650}.search-results a:hover{color:#AD3A64}.search-results span{font-size:12px;font-weight:400;color:var(--muted);text-align:right}.search-empty{margin:16px 22px;color:var(--muted);font-size:13px}
h1,h2,h3{color:var(--ink);line-height:1.35;letter-spacing:-.025em}h1{font-size:30px}h2{font-size:22px}h3{font-size:17px}p{margin-top:0;line-height:1.8}.eyebrow{font-size:12px;color:#AD3A64;font-weight:750;letter-spacing:.12em}.home-section{margin-top:66px;margin-bottom:66px}.hero{display:grid;grid-template-columns:56fr 44fr;gap:28px;align-items:center;padding-top:68px;padding-bottom:18px}.hero h1{margin:13px 0 22px;max-width:600px}.hero p{max-width:600px}.hero-art{display:flex;align-items:center;justify-content:center;max-width:500px;min-height:0}.hero-img{height:auto;max-height:320px;object-fit:contain}.hero-buttons{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;border-radius:10px;padding:9px 21px;font-size:14px;font-weight:750}.btn-primary{background:#BC426C;color:white}.btn-primary:hover{background:#A83760;box-shadow:var(--shadow)}.btn-secondary{background:var(--yellow);color:var(--ink);border:1px solid #E4C972}.btn-secondary:hover{background:#ffe7a0;box-shadow:var(--shadow)}.section-heading{margin-bottom:26px}.section-heading h2{margin:7px 0 8px}.section-heading p{font-size:14px;color:var(--muted);margin:0}.trio-layout{display:grid;grid-template-columns:1.12fr 1fr;gap:22px}.trio-lead{background:var(--pinklight);border-radius:16px;overflow:visible;display:grid;grid-template-rows:auto 1fr}.trio-lead>img{height:245px}.trio-lead>div{padding:23px 26px 26px}.trio-lead h3,.trio-side h3{margin:5px 0 9px}.topic-kicker{color:#A9345E;font-size:12px}.trio-side{display:grid;gap:20px}.trio-side article{display:grid;grid-template-columns:43% 1fr;align-items:center;gap:18px;border-bottom:1px solid var(--border);padding:6px 0 16px}.trio-side img{height:175px}.trio-side p{font-size:14px}.text-link{color:#A9345E;font-size:14px;font-weight:750;display:inline-flex;min-height:44px;align-items:center}.text-link:hover{text-decoration:underline}.picks-block{background:#fff;padding:24px;border-radius:16px;box-shadow:var(--shadow)}.picks-image{max-width:960px;margin:0 auto 18px}.picks-image img{height:auto;max-height:235px}.picks-copy{max-width:860px;margin:auto}.picks-copy h2{margin:8px 0 16px}.feature-split{display:grid;grid-template-columns:42% minmax(0,1fr);gap:5%;align-items:center}.feature-split.reverse{grid-template-columns:minmax(0,1fr) 42%}.feature-split.reverse .feature-image{order:2}.feature-image{min-width:0}.feature-image img{height:auto;max-height:240px}.feature-copy h2{margin:6px 0 10px}.feature-copy h3{margin:0 0 15px;font-size:17px}.feature-copy p{max-width:670px}.feature-band{background:var(--yellow);padding:24px 28px;border-radius:15px;display:grid;grid-template-columns:39% 1fr;gap:5%;align-items:center}.feature-band img{max-height:225px}.mystery-layout{background:white;border:1px solid var(--border);padding:22px;border-radius:15px}.comedy-layout{border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding-top:25px;padding-bottom:25px}.rhythm-block{background:#fff1ee;padding-top:48px;padding-bottom:50px}.rhythm-points{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}.rhythm-points>div{border-top:2px solid #DF9CB2;padding-top:16px}.rhythm-points span{font-size:12px;color:#9B3B5D}.rhythm-points h3{margin:8px 0}.rhythm-points p{font-size:14px}.update-strip{display:grid;grid-template-columns:40% 1fr;gap:5%;align-items:center}.update-image img{max-height:205px}.craft-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.craft-grid .section-heading{grid-column:1/-1}.craft-grid article{display:grid;grid-template-columns:43% 1fr;gap:18px;background:white;border-radius:14px;padding:20px}.craft-grid img{height:200px}.craft-grid h3{margin:6px 0}.craft-grid p{font-size:14px}.device-strip{display:grid;grid-template-columns:55% 1fr;gap:20px;align-items:center;border-top:1px solid var(--border);padding-top:25px}.mobile-feature{display:grid;grid-template-columns:35% 1fr;align-items:center;gap:6%;background:#fce9ef;border-radius:16px;padding:28px}.mobile-visual{display:flex;justify-content:center}.app-poster{width:auto;max-width:280px;max-height:420px;height:auto}.icon-heading{display:flex;align-items:center;gap:15px}.app-icon{height:58px;width:58px;flex:none}.age-notice{background:var(--yellow);padding:26px 30px;border-radius:14px;border:1px solid #ecd895}.age-notice strong{display:block;font-size:18px;color:var(--ink);margin-bottom:10px}.age-notice p{margin:0 0 8px}.home-faq-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 22px}.home-faq-grid a{border-bottom:1px solid var(--border);min-height:73px;padding:12px 5px;font-size:15px;font-weight:700}.home-faq-grid span{display:block;font-size:13px;font-weight:400;color:var(--muted)}.home-faq-grid a:hover{color:#A9345E}.more-link{text-align:right;margin-top:14px}.services{background:white;border-radius:16px;padding:28px}.service-links{display:flex;flex-wrap:wrap;gap:12px 22px}.service-links a{min-height:44px;display:inline-flex;align-items:center;border-bottom:2px solid #ecc0ce;font-size:14px;font-weight:650}.service-links a:hover{color:#A9345E}.page-shell{padding-top:28px;padding-bottom:20px}.breadcrumbs{display:flex;gap:10px;align-items:center;color:var(--muted);font-size:13px;margin:0 0 27px}.breadcrumbs a:hover{color:#A9345E}.page-intro{margin:0 auto 24px;max-width:860px}.page-intro h1{margin:8px 0 16px}.page-intro p{font-size:16px;color:var(--body);line-height:1.85}.page-feature{max-width:860px;margin:24px auto 30px;background:#fff4f7;border-radius:16px;padding:12px}.page-feature img{height:auto;max-height:240px}.article{margin:0 auto}.reading-column{max-width:840px}.article-section{padding:0 0 10px;margin-bottom:28px}.article-section h2{font-size:22px;margin:0 0 12px}.article-section p{margin:0 0 13px}.two-column-article{max-width:1000px;display:grid;grid-template-columns:1fr 1fr;gap:22px 34px}.two-column-article .article-section{background:#fff;padding:23px 26px;border-radius:14px;box-shadow:var(--shadow);margin-bottom:0}.light-divider{border-bottom:1px solid var(--border)}.timeline{max-width:840px;margin:0 auto;padding-left:28px;border-left:2px solid #efc0d0}.timeline-item{position:relative}.timeline-item:before{content:'';position:absolute;top:5px;left:-37px;width:15px;height:15px;background:var(--pink);border:3px solid white;border-radius:50%}.related-line{max-width:840px;margin:15px auto;font-size:14px;color:var(--muted)}.related-line a{margin-right:16px;color:#A9345E}.page-shell>.age-notice{max-width:840px;margin:18px auto}.faq-list{max-width:860px;margin:0 auto}.faq-item{border-bottom:1px solid var(--border);padding:18px 0}.faq-item h2{font-size:18px;margin:0 0 9px}.faq-item p{margin:0;font-size:15px}.app-layout{display:grid;grid-template-columns:31% 1fr;gap:40px;align-items:start;max-width:1040px;margin:30px auto}.app-visual{background:#fff2f5;border-radius:15px;padding:25px 12px;text-align:center}.app-visual .app-poster{margin:auto}.icon-title{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:12px;font-size:12px;letter-spacing:.08em}.brand-banner{background:white;border-radius:14px;padding:12px;margin:20px auto 35px}.brand-banner-img{height:auto;max-height:260px}
@media(max-width:1000px){.nav-inner{gap:17px}.primary-nav{gap:14px}.nav-right{gap:9px}.trio-side article{grid-template-columns:40% 1fr}.craft-grid article{display:block}.craft-grid article img{height:185px}.footer-groups{gap:16px}}
@media(max-width:760px){.wrap{padding-inline:16px}.topline{font-size:11px}.top-en{display:none}.top-actions{gap:10px}.nav-inner{height:58px;gap:8px}.brand-logo{height:27px;max-width:175px}.primary-nav,.app-nav,.category-link{display:none}.nav-right{margin-left:auto;gap:8px}.mobile-search{display:inline-flex;align-items:center;justify-content:center;font-size:23px;min-width:44px;padding:0}.menu-toggle{padding:0 9px;font-size:12px}.category-inner{min-height:44px}.mobile-categories{display:flex;flex-wrap:wrap;gap:0 17px}.mobile-categories a{display:inline-flex;align-items:center;min-height:44px;font-size:13px;font-weight:600}.mobile-categories a:hover{color:#A9345E}.site-panel{top:90px;max-height:72vh;width:calc(100vw - 24px)}.menu-groups{grid-template-columns:1fr;padding:12px 17px;gap:14px}.search-panel{width:calc(100vw - 32px)}.search-results a{align-items:flex-start;flex-direction:column;gap:0;padding:7px 0}.search-results span{text-align:left}.footer-groups{grid-template-columns:repeat(2,minmax(0,1fr));gap:25px}.home-section{margin-top:40px;margin-bottom:40px}.hero{grid-template-columns:1fr;padding-top:38px;gap:16px}.hero h1{font-size:26px;margin:10px 0 14px}.hero p{font-size:15px}.hero-art{max-width:100%;justify-self:center;width:100%}.hero-img{height:auto;max-height:220px}.trio-layout,.feature-split,.feature-split.reverse,.feature-band,.update-strip,.device-strip,.mobile-feature,.app-layout{grid-template-columns:1fr}.trio-side article{grid-template-columns:40% 1fr;gap:12px}.trio-lead>img{height:200px}.trio-side img{height:145px}.picks-block{padding:16px}.picks-image img{max-height:210px}.feature-split.reverse .feature-image{order:0}.feature-image img{max-height:210px}.feature-band{padding:17px}.rhythm-block{padding-top:35px;padding-bottom:38px}.rhythm-points{grid-template-columns:1fr;gap:13px}.rhythm-points>div{padding-top:12px}.craft-grid{grid-template-columns:1fr}.craft-grid article{display:grid;grid-template-columns:40% 1fr;padding:16px}.craft-grid article img{height:180px}.mobile-feature{padding:18px}.app-poster{max-width:230px;max-height:360px}.home-faq-grid{grid-template-columns:1fr}.services{padding:19px}.page-shell{padding-top:18px}.page-intro h1{font-size:26px}.page-intro p{font-size:15px}.page-feature img{max-height:210px}.article-section h2{font-size:20px}.two-column-article{grid-template-columns:1fr}.two-column-article .article-section{padding:17px 18px}.app-layout{gap:25px}.app-visual{max-width:320px;width:100%;margin:auto}.brand-banner-img{max-height:185px}.quick-inner{display:block}.quick-inner nav{margin-top:8px}.age-notice{padding:20px 17px}}
@media(max-width:430px){.top-actions .top-search{display:none}.brand-logo{max-width:150px}.menu-toggle{font-size:0}.menu-toggle span{font-size:17px}.trio-side article{display:block}.trio-side article img{max-height:195px}.craft-grid article{display:block}.craft-grid article img{height:185px}.footer-groups{gap:18px}.mobile-categories{gap:0 13px}.mobile-categories a{font-size:12px}.hero-buttons .btn{flex:1}.search-results span{font-size:11px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}a,button,input,.site-panel{transition:none}}

.supplemental-section{margin-inline:auto;max-width:840px}.hero:not(:has(.hero-art img)),.feature-split:not(:has(.feature-image img)),.feature-band:not(:has(.feature-image img)),.update-strip:not(:has(.update-image img)),.device-strip:not(:has(.feature-image img)){grid-template-columns:1fr}.trio-lead:not(:has(img)){grid-template-rows:1fr}.hero-art:empty,.feature-image:empty,.page-feature:empty,.picks-image:empty,.update-image:empty,.mobile-visual:empty,.app-visual:empty,.brand-banner:empty{display:none}.site-footer .footer-brand a{background:white;border-radius:5px;padding:3px 7px}