/* 糖心Vlog · immersive compact media UI */
:root{color-scheme:dark;--bg:#121118;--black:#0A090E;--surface:#1C1A24;--text:#F4EFF5;--muted:#9A93A6;--hot:#FA3E6E;--glow:#FF2A6D;--warm:#FFA066;--line:rgba(244,239,245,.11);--soft:rgba(250,62,110,.09);--shadow:0 16px 44px rgba(0,0,0,.32);--radius:11px}
*,*::before,*::after{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;min-width:320px;background:radial-gradient(ellipse 90% 38% at 78% -8%,rgba(127,44,88,.14),transparent 65%),var(--bg);color:var(--text);font:14px/1.65 system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}img{max-width:100%;display:block}a{color:inherit;text-decoration:none}button,input{font:inherit}button{cursor:pointer}a,button,input{outline-offset:4px}a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--warm)}h1,h2,h3,p{margin-top:0}h1,h2,h3{line-height:1.3;letter-spacing:-.025em}p{color:var(--muted)}.shell{width:min(1420px,calc(100% - 72px));margin-inline:auto}.skip-link{position:absolute;z-index:100;top:-80px;left:12px;padding:12px 20px;background:#fff;color:#000;border-radius:8px}.skip-link:focus{top:10px}.topbar{position:sticky;top:0;z-index:80;background:rgba(16,14,22,.9);border-bottom:1px solid var(--line);backdrop-filter:blur(22px)}.topbar-inner{min-height:70px;display:flex;align-items:center;gap:56px}.brand{display:inline-flex;align-items:center;gap:10px;font-size:22px;line-height:1;font-weight:850;white-space:nowrap;letter-spacing:-.05em}.brand img{width:36px;height:36px;object-fit:contain}.brand-pink,.footer-brand span{color:var(--hot)}.global-nav{display:flex;gap:12px;align-items:center;margin-right:auto}.global-nav a{font-size:13px;font-weight:640;color:#bbb3c0;border-radius:9px;padding:8px 14px;transition:color .16s,background .16s}.global-nav a:hover,.global-nav a[aria-current=page]{color:#fff;background:rgba(255,255,255,.07)}.nav-cta{border:1px solid rgba(250,62,110,.38);color:#ffb9ce;background:var(--soft);padding:9px 16px;border-radius:9px;font-weight:700;font-size:12px;white-space:nowrap}.nav-cta span{margin-left:10px}.nav-cta:hover{background:rgba(250,62,110,.18)}.button{display:inline-flex;justify-content:center;align-items:center;gap:13px;min-height:43px;border-radius:9px;font-weight:780;padding:11px 18px;font-size:13px;border:1px solid transparent;line-height:1.25;transition:transform .2s,background .2s,box-shadow .2s}.button:hover{transform:translateY(-2px)}.button.primary{background:var(--hot);color:white;box-shadow:0 12px 32px rgba(250,62,110,.22)}.button.primary:hover{background:var(--glow);box-shadow:0 16px 36px rgba(250,62,110,.28)}.button.ghost{border-color:rgba(244,239,245,.22);background:rgba(255,255,255,.055);color:#fff}.button.ghost:hover{background:rgba(255,255,255,.12)}.eyebrow{display:block;color:var(--warm);font-size:10px;letter-spacing:.15em;font-weight:850;text-transform:uppercase;line-height:1.7}.hero{display:grid;grid-template-columns:minmax(230px,.85fr) minmax(340px,1.7fr) minmax(200px,.85fr);gap:13px;margin-top:25px;min-height:420px}.hero-intro{padding:36px 16px 28px 4px;display:flex;align-items:flex-start;flex-direction:column;justify-content:center}.status-dot{font-size:11px;color:#ffb5c9;font-weight:700;display:flex;gap:9px;align-items:center;letter-spacing:.06em}.status-dot:before{content:"";display:block;width:7px;height:7px;border-radius:50%;background:var(--hot);box-shadow:0 0 0 5px rgba(250,62,110,.12)}.hero-intro h1{font-size:clamp(30px,3.4vw,55px);line-height:1.12;margin:23px 0 19px;font-weight:850;letter-spacing:-.06em}.hero-intro em{font-style:normal;font-size:.6em;line-height:1.3;display:block;color:#e3cfd8;font-weight:670;letter-spacing:-.04em;margin-top:7px}.hero-intro p{font-size:13px;line-height:1.95;max-width:320px;margin:0 0 24px}.hero-pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:27px}.hero-pills span{font-size:10px;color:#b8adbf;border:1px solid var(--line);padding:4px 8px;border-radius:40px}.hero-feature{min-width:0}.hero-poster{position:relative;display:block;width:100%;height:100%;min-height:410px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:linear-gradient(150deg,#3d2634,#0c0a11)}.hero-poster>img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;transition:transform .6s}.hero-poster:hover>img{transform:scale(1.045)}.poster-fade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.3),transparent 40%,rgba(0,0,0,.76) 100%)}.poster-label{position:absolute;top:20px;left:20px;background:rgba(11,9,14,.56);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.16);padding:6px 10px;border-radius:6px;font-size:11px;font-weight:700}.poster-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:71px;height:71px;background:rgba(250,62,110,.94);color:white;border:5px solid rgba(255,255,255,.24);border-radius:50%;font-size:22px;padding-left:5px;box-shadow:0 20px 45px rgba(0,0,0,.45);transition:scale .2s}.hero-poster:hover .poster-play{scale:1.12}.poster-details{position:absolute;bottom:25px;left:26px;right:20px;display:flex;flex-direction:column;gap:7px}.poster-details strong{font-size:22px;line-height:1.3;letter-spacing:-.04em}.poster-details small{color:#e4d9df;font-size:11px}.hero-aside{background:linear-gradient(160deg,#211b28,#17141d);border:1px solid var(--line);border-radius:var(--radius);padding:18px 14px;display:flex;flex-direction:column;min-width:0}.aside-top{padding:1px 4px 13px;border-bottom:1px solid var(--line);margin-bottom:8px;display:flex;flex-direction:column}.aside-top span{font-size:10px;letter-spacing:.15em;color:var(--hot);font-weight:800}.aside-top strong{font-size:15px;margin-top:3px}.mini-item{display:grid;grid-template-columns:80px minmax(0,1fr);gap:10px;padding:12px 4px;border-bottom:1px solid var(--line);align-items:center}.mini-item img{width:80px;aspect-ratio:4/3;object-fit:cover;border-radius:5px;background:#322734}.mini-item b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12px;line-height:1.45;font-weight:710}.mini-item small{display:block;margin-top:6px;color:var(--muted);font-size:10px}.mini-item:hover b{color:#ff9bb5}.aside-bottom{margin-top:auto;display:flex;justify-content:space-between;color:#ffb6ca;padding:15px 4px 4px;font-size:11px;font-weight:750}.content-section{margin-top:44px}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:15px;margin-bottom:16px}.section-heading h2{font-size:24px;margin:3px 0 0;font-weight:800}.section-heading>a{font-size:12px;color:#d3bfc9;padding:7px 0;white-space:nowrap}.section-heading>a:hover{color:var(--hot)}.horizontal-rail{display:grid;grid-auto-columns:minmax(215px,1fr);grid-auto-flow:column;gap:9px;overflow-x:auto;padding-bottom:9px;scroll-snap-type:x mandatory;scrollbar-color:#564051 transparent}.horizontal-rail>.video-card{scroll-snap-align:start;min-width:0}.video-card{min-width:0;border-radius:var(--radius);background:var(--surface);border:1px solid rgba(255,255,255,.055);overflow:hidden;transition:box-shadow .2s,border-color .2s,transform .2s}.video-card:hover{border-color:rgba(250,62,110,.34);box-shadow:0 8px 30px rgba(250,62,110,.1);transform:translateY(-2px)}.cover-link{display:block;aspect-ratio:16/10;position:relative;overflow:hidden;background:linear-gradient(135deg,#362d3d,#201825)}.cover-link img{width:100%;height:100%;object-fit:cover;transition:transform .35s}.video-card:hover .cover-link img{transform:scale(1.05)}.cover-shade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 44%,rgba(0,0,0,.58) 100%)}.cover-play{opacity:0;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;width:43px;height:43px;display:grid;place-items:center;background:rgba(250,62,110,.95);color:white;padding-left:3px;transition:opacity .2s}.video-card:hover .cover-play,.cover-link:focus-visible .cover-play{opacity:1}.duration{position:absolute;bottom:9px;right:9px;border-radius:5px;color:white;font-weight:720;font-variant-numeric:tabular-nums;background:rgba(7,6,11,.8);padding:2px 5px;font-size:10px}.free-badge{position:absolute;top:9px;left:9px;color:#fff;background:#dc2d64;font-weight:760;padding:3px 7px;border-radius:5px;font-size:10px}.card-body{padding:11px 12px 13px}.card-body .eyebrow{color:var(--muted);font-size:10px;letter-spacing:.02em;text-transform:none}.card-body h3{font-size:14px;line-height:1.45;font-weight:740;margin:5px 0 4px}.card-body h3 a:hover{color:#ff9fba}.card-body p{line-height:1.65;font-size:11px;margin:8px 0 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.card-compact .card-body{padding:9px 10px 12px}.card-compact h3{margin-bottom:0}.card-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.play-strip{display:flex;gap:19px;align-items:center;margin-top:39px;padding:22px 24px;border:1px solid rgba(250,62,110,.22);background:linear-gradient(100deg,rgba(250,62,110,.14),rgba(255,160,102,.065),rgba(28,26,36,.9));border-radius:var(--radius)}.strip-icon{font-size:34px;color:var(--hot)}.play-strip>div{flex:1}.play-strip strong{font-size:15px}.play-strip p{margin:3px 0 0;font-size:11px}.journal-list{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}.journal-row{display:grid;grid-template-columns:110px 1fr 30px;gap:18px;align-items:center;padding:12px 17px;border-bottom:1px solid var(--line)}.journal-row:last-child{border-bottom:0}.journal-row:hover{background:rgba(255,255,255,.03)}.journal-row img{width:110px;height:72px;object-fit:cover;border-radius:6px;background:#302b36}.journal-row>span{display:flex;flex-direction:column;gap:4px}.journal-row small{font-size:10px;color:var(--warm)}.journal-row strong{font-size:14px}.journal-row span span{font-size:11px;color:var(--muted);line-height:1.55}.journal-row>b{color:var(--hot);font-size:19px}.footer{margin-top:70px;background:#0d0b12;border-top:1px solid var(--line);padding-top:37px}.footer-layout{display:flex;justify-content:space-between;gap:30px}.footer-brand{color:white;font-weight:850;font-size:24px;letter-spacing:-.05em;margin-bottom:8px}.footer p{font-size:12px;margin-bottom:8px}.footer small{font-size:10px;color:#817989;line-height:1.7;display:block;max-width:520px}.footer nav{display:flex;gap:23px;align-items:start;padding-top:13px}.footer nav a{font-size:12px;color:#b9afc0}.footer nav a:hover{color:white}.copyright{padding:21px 0;margin-top:26px;border-top:1px solid var(--line);color:#736b7d;font-size:10px}.listing-page{padding-top:34px}.page-heading{max-width:850px}.page-heading .eyebrow{margin-bottom:13px}.page-heading h1{font-size:clamp(27px,3vw,42px);margin-bottom:12px}.page-heading p{font-size:13px;line-height:1.95;max-width:700px}.filter-bar{display:flex;align-items:center;flex-wrap:wrap;gap:12px 16px;background:var(--surface);border:1px solid var(--line);padding:14px 18px;border-radius:var(--radius);margin-top:24px}.filter-bar>label:first-child{font-size:12px;font-weight:700}.search-group{display:flex;align-items:stretch;min-width:230px;max-width:460px;flex:1;min-height:41px;background:#100e15;border:1px solid var(--line);border-radius:7px;overflow:hidden}.search-group input{background:transparent;border:0;min-width:0;flex:1;color:white;padding:8px 13px;font-size:12px}.search-group button{background:#41313f;border:0;color:white;padding:8px 17px;font-size:12px;font-weight:800}.search-group button:hover{background:var(--hot)}.free-toggle{display:inline-flex;align-items:center;gap:8px;margin-left:auto;color:#eedce4;font-size:12px;cursor:pointer}.free-toggle input{accent-color:var(--hot);width:16px;height:16px}.category-tabs{display:flex;align-items:center;gap:8px;overflow-x:auto;scrollbar-width:thin;white-space:nowrap;padding:20px 0 13px}.category-tabs a{border:1px solid var(--line);background:rgba(255,255,255,.035);border-radius:7px;padding:7px 13px;color:#aea5b7;font-size:12px;transition:background .17s}.category-tabs a:hover{color:white;background:#302632}.category-tabs a[aria-current=true]{border-color:var(--hot);background:rgba(250,62,110,.14);color:#ffc0d0}.results-line{display:flex;justify-content:space-between;align-items:center;margin:12px 0 12px}.results-line h2{font-size:18px;margin:0}.results-line span{font-size:11px;color:var(--muted)}.listing-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.no-results{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);text-align:center;padding:60px 16px}.no-results h2{font-size:21px}.no-results p{font-size:12px;margin-bottom:23px}.play-guide{margin-top:43px;background:linear-gradient(125deg,#211a25,#18151e);border:1px solid var(--line);padding:23px 24px;border-radius:var(--radius)}.play-guide h2{font-size:19px;margin-bottom:20px}.guide-columns{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}.guide-columns>div{padding-left:16px;border-left:2px solid rgba(250,62,110,.5)}.guide-columns h3{font-size:13px;margin:0 0 9px}.guide-columns p{font-size:11px;line-height:1.95;margin:0}.watch-page{padding-top:19px}.breadcrumbs{display:flex;align-items:center;gap:9px;color:#8e8698;font-size:11px;margin-bottom:19px}.breadcrumbs a:hover{color:#fff}.watch-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:22px}.watch-main{min-width:0}.player-box{aspect-ratio:16/9;position:relative;background:#08070a;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line)}.player-box>img,.player-box video{display:block;width:100%;height:100%;object-fit:cover}.player-box>img{filter:brightness(.35) saturate(.7)}.player-unavailable{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;gap:8px;padding:15px}.player-unavailable>span{font-size:35px;color:var(--hot);line-height:1}.player-unavailable strong{font-size:19px}.player-unavailable small{font-size:12px;color:#c0b5c4}.video-error{color:#ffc3d4;font-size:12px;padding:10px}.watch-details{padding:23px 1px}.watch-details>h1{font-size:clamp(23px,2.5vw,34px);margin:5px 0 17px}.creator-line{border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:11px;padding:14px 0}.creator-icon{width:38px;height:38px;border-radius:50%;background:linear-gradient(140deg,#ee6a88,#a43c70);display:grid;place-items:center;color:white;font-weight:900}.creator-line>span:nth-child(2){display:flex;flex-direction:column}.creator-line strong{font-size:13px}.creator-line small{font-size:10px;color:var(--muted)}.free-text{color:#ffb1c7;font-size:11px;border:1px solid rgba(250,62,110,.25);margin-left:auto;padding:4px 8px;border-radius:5px}.watch-details .lead{margin-top:20px;color:#ded7e1;font-size:14px;line-height:1.9}.watch-details h2{margin-top:27px;font-size:18px}.watch-details>p:not(.lead){font-size:13px;line-height:2}.rights-note{font-size:11px;color:#9b91a6;background:var(--surface);padding:12px 16px;border-left:2px solid var(--warm);border-radius:4px;margin-top:23px}.watch-side{padding:16px;background:#17141d;border:1px solid var(--line);border-radius:var(--radius);height:fit-content}.watch-side .section-heading{margin-bottom:14px}.watch-side .section-heading h2{font-size:15px}.side-card-list{display:grid;gap:12px}.side-card-list .video-card{border-color:var(--line)}.side-card-list .cover-link{aspect-ratio:16/8}.side-return{display:block;text-align:center;color:#ffc0d2;font-size:11px;margin:16px 0 0}.empty-state{text-align:center;min-height:62vh;padding:140px 10px 80px}.empty-state h1{font-size:clamp(27px,4vw,46px);margin:14px 0}.empty-state p{margin-bottom:24px}.empty-state .button{margin:4px}.sr-only{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}
/* Responsive desktop and mid-size laptops: prioritize legible poster and compact content. */
@media(max-width:1260px){.topbar-inner{gap:30px}.shell{width:min(1120px,calc(100% - 48px))}.hero{grid-template-columns:minmax(205px,.84fr) minmax(340px,1.6fr)}.hero-aside{display:none}.hero-intro h1{font-size:40px}.hero-poster{min-height:390px}.card-grid,.listing-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.horizontal-rail{grid-auto-columns:225px}.watch-layout{grid-template-columns:minmax(0,1fr) 240px}.mini-item{grid-template-columns:65px 1fr}}
@media(max-width:900px){.shell{width:calc(100% - 36px)}.topbar-inner{min-height:64px;gap:16px}.global-nav{gap:1px}.global-nav a{padding:8px 9px;font-size:12px}.nav-cta{display:none}.brand{font-size:20px}.hero{grid-template-columns:1fr 1.3fr;gap:18px;min-height:360px;margin-top:18px}.hero-intro{padding:15px 0}.hero-intro h1{font-size:37px}.hero-poster{min-height:345px}.card-grid,.listing-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.watch-layout{grid-template-columns:minmax(0,1fr)}.watch-side{padding:18px}.side-card-list{grid-template-columns:repeat(3,minmax(0,1fr))}.watch-side .cover-link{aspect-ratio:16/10}.guide-columns{gap:18px}.play-strip{padding:18px;gap:12px}}
@media(max-width:680px){html{scroll-padding-top:66px}.shell{width:calc(100% - 28px)}.topbar-inner{flex-wrap:wrap;justify-content:space-between;gap:4px 12px;padding:9px 0 7px}.brand{font-size:20px}.brand img{width:29px;height:29px}.global-nav{width:100%;margin-right:0;order:3;justify-content:space-around}.global-nav a{font-size:12px;padding:5px 12px}.hero{display:flex;flex-direction:column;gap:12px;margin-top:8px}.hero-intro{padding:21px 4px 3px}.hero-intro h1{font-size:35px;margin:14px 0 11px}.hero-intro p{font-size:12px;max-width:520px;line-height:1.8;margin-bottom:14px}.hero-pills{margin-top:14px}.hero-poster{height:280px;min-height:0}.poster-details{left:17px;bottom:19px}.poster-details strong{font-size:17px}.poster-play{width:57px;height:57px;font-size:18px}.content-section{margin-top:31px}.section-heading{margin-bottom:12px}.section-heading h2{font-size:20px}.section-heading>a{font-size:11px}.horizontal-rail{grid-auto-columns:minmax(205px,64vw);gap:8px}.card-grid,.listing-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.card-body{padding:9px 9px 11px}.card-body h3{font-size:12px}.card-body p{font-size:10px}.card-body .eyebrow{font-size:9px}.free-badge{font-size:9px;padding:2px 5px}.play-strip{flex-wrap:wrap;align-items:flex-start}.play-strip .button{margin-left:35px}.journal-row{grid-template-columns:83px 1fr 15px;gap:10px;padding:11px}.journal-row img{width:83px;height:65px}.journal-row span span{display:none}.journal-row strong{font-size:12px}.journal-row>b{font-size:15px}.footer{margin-top:44px}.footer-layout{flex-direction:column;gap:13px}.footer nav{padding-top:0;flex-wrap:wrap}.page-heading h1{font-size:27px}.listing-page{padding-top:26px}.filter-bar{align-items:flex-start;padding:12px}.filter-bar>label:first-child{width:100%}.search-group{width:100%;max-width:none;flex-basis:100%}.free-toggle{margin-left:0}.results-line h2{font-size:16px}.play-guide{padding:18px}.guide-columns{grid-template-columns:1fr;gap:23px}.watch-page{padding-top:12px}.watch-details>h1{font-size:24px}.watch-side{padding:14px}.side-card-list{grid-template-columns:repeat(2,minmax(0,1fr))}.side-card-list .video-card:last-child{display:none}}
@media(max-width:390px){.hero-intro h1{font-size:30px}.poster-label{font-size:9px;left:10px;top:10px}.hero-poster{height:230px}.global-nav a{padding:4px 7px}.cover-link{aspect-ratio:4/3}.card-body h3{font-size:11px}.card-body p{-webkit-line-clamp:2}.free-text{font-size:9px}.play-strip .button{margin-left:0}.side-card-list{grid-template-columns:1fr}.side-card-list .video-card:last-child{display:block}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* Touch interaction refinements and progressive enhancements */
@media(hover:none){.video-card:hover{transform:none;box-shadow:none}.cover-play{opacity:.82;width:31px;height:31px;font-size:12px}.hero-poster:hover>img{transform:none}.button:hover{transform:none}}
@media(orientation:landscape) and (max-height:520px){.topbar{position:relative}.hero-poster{min-height:320px}.hero-intro{justify-content:flex-start}.empty-state{padding-top:70px}}
@media print{body{background:#fff;color:#16121a}.topbar{position:relative;background:#fff;color:#222}.video-card,.play-strip,.play-guide,.watch-side{background:#fff;color:#111;border:1px solid #ddd}.footer{display:none}.hero-poster{max-height:350px}.poster-fade{background:linear-gradient(transparent,rgba(0,0,0,.5))}.card-body p,.page-heading p,.play-guide p{color:#333}.nav-cta,.filter-bar{display:none}}
@supports(backdrop-filter:blur(15px)){.topbar{backdrop-filter:blur(19px)}.poster-label{backdrop-filter:blur(8px)}}
@supports not (aspect-ratio:16/9){.cover-link{height:180px}.player-box{height:400px}}