/* 糖心Vlog · immersive creator film library */
:root{color-scheme:dark;--bg:#121118;--surface:#1C1A24;--deep:#0A090E;--pink:#FA3E6E;--glow:#FF2A6D;--warm:#FFA066;--text:#F4EFF5;--muted:#9A93A6;--line:rgba(255,255,255,.085);--soft-line:rgba(255,255,255,.045);--radius:11px;--max:1480px;--shadow:0 16px 55px rgba(0,0,0,.24)}
*,*::before,*::after{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:95px}body{margin:0;background:linear-gradient(130deg,#14111b 0%,var(--bg) 36%,#100f16 90%);color:var(--text);font:400 15px/1.6 system-ui,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;min-width:290px;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,input{font:inherit}button{cursor:pointer}img{display:block;max-width:100%;object-fit:cover}h1,h2,h3,p{margin:0}h1,h2,h3{line-height:1.26;letter-spacing:-.025em}::selection{background:var(--pink);color:#fff}a:focus-visible,button:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--warm);outline-offset:4px}.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:fixed;left:20px;top:-100px;z-index:999;padding:12px 18px;background:var(--pink);border-radius:8px}.skip-link:focus{top:8px}.topbar{z-index:30;position:sticky;top:0;background:rgba(14,13,20,.94);border-bottom:1px solid var(--line);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}.topbar-inner{max-width:var(--max);margin:auto;padding:11px 28px;min-height:75px;display:flex;align-items:center;gap:44px}.brand{display:inline-flex;align-items:center;gap:10px;font-size:20px;line-height:1.15;font-weight:800;letter-spacing:.008em;white-space:nowrap}.brand img{width:42px;height:42px;object-fit:contain;border-radius:9px;flex:none}.brand small{display:block;color:var(--muted);font-weight:600;letter-spacing:.22em;font-size:9px;margin-top:5px}.global-nav{align-self:stretch;display:flex;align-items:center;gap:8px}.global-nav a{font-size:13px;font-weight:650;color:#bcb5c2;padding:11px 16px;border-radius:8px;transition:background .15s,color .15s}.global-nav a:hover{background:#26222d;color:#fff}.global-nav a[aria-current="page"]{background:rgba(250,62,110,.12);color:#ff7195}.nav-action{margin-left:auto;padding:9px 17px;border-radius:8px;color:#fff;background:linear-gradient(105deg,#e63162,#fa3e6e);font-size:13px;font-weight:750;box-shadow:0 0 25px rgba(250,62,110,.13)}.nav-action span{padding-left:6px}.nav-action:hover,.primary-button:hover{filter:brightness(1.12);box-shadow:0 0 28px rgba(250,62,110,.27)}.page-shell{max-width:var(--max);margin:0 auto;padding:26px 28px 74px}.hero-theater{display:grid;grid-template-columns:minmax(0,2.13fr) minmax(270px,.87fr);gap:12px;min-height:470px}.hero-feature,.hero-side{min-width:0}.hero-media{position:relative;height:100%;min-height:465px;border-radius:12px;overflow:hidden;background:#251b27;isolation:isolate}.hero-media>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.67) saturate(1.18)}.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,3,9,.89),rgba(5,3,9,.30) 68%,rgba(5,3,9,.15)),linear-gradient(0deg,rgba(7,4,9,.68),transparent 60%)}.hero-copy{position:absolute;inset:auto auto 37px 39px;max-width:730px;padding-right:30px;z-index:1}.eyebrow{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.20em;font-weight:800;text-transform:uppercase;color:var(--warm)}.live-dot{width:7px;height:7px;background:var(--glow);box-shadow:0 0 11px rgba(255,42,109,.75);border-radius:50%;display:inline-block}.hero-copy h1{margin:21px 0 17px;font-size:clamp(28px,3.35vw,50px);max-width:780px;line-height:1.20;font-weight:850;text-shadow:0 2px 20px #0009}.hero-copy h1 em{font-style:normal;color:#ffe0e6}.hero-copy p{line-height:1.9;font-size:14px;color:#e7dce3;max-width:590px;margin-bottom:27px}.primary-button,.ghost-button{min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:9px;padding:10px 19px;font-weight:750;font-size:13px;transition:box-shadow .2s,filter .2s,border-color .2s}.primary-button{background:var(--pink);box-shadow:0 6px 27px rgba(250,62,110,.20);color:#fff}.primary-button>span{font-size:10px}.ghost-button{border:1px solid rgba(255,255,255,.37);background:rgba(15,13,19,.52);color:#fff;margin-left:10px}.ghost-button:hover{border-color:#fff;background:rgba(255,255,255,.09)}.hero-side{display:flex;flex-direction:column;padding:20px 14px 16px;background:linear-gradient(160deg,#211d29,#17151c);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow)}.aside-heading{padding:0 7px 15px;display:flex;align-items:center;justify-content:space-between;gap:8px;font-weight:780;font-size:15px}.small-muted{font-weight:700;color:#77707f;font-size:10px;letter-spacing:.10em}.side-card{display:grid;grid-template-columns:100px minmax(0,1fr) 13px;gap:11px;align-items:center;padding:12px 7px;border-top:1px solid var(--line);transition:background .2s}.side-card:hover{background:#2d2432}.side-card img{width:100px;height:77px;object-fit:cover;border-radius:8px;background:#372a3a}.side-card span{display:block;min-width:0}.side-card strong{display:-webkit-box;line-clamp:2;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13px;line-height:1.6}.side-card small{display:block;margin-top:9px;font-size:10px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.side-card b{font-weight:400;color:#786e80;align-self:start}.side-card:hover b{color:var(--pink)}.side-bottom{margin-top:auto;padding:20px 8px 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:10px}.side-bottom span{color:var(--muted);font-size:11px}.side-bottom a{font-size:12px;color:#ff7298;font-weight:750}.side-bottom a:hover{text-decoration:underline}.content-section{margin-top:31px}.section-heading{display:flex;align-items:baseline;justify-content:space-between;gap:18px;margin:0 0 16px}.section-heading h2{font-size:21px;font-weight:800;position:relative;padding-left:14px}.section-heading h2:before{content:"";height:19px;width:4px;border-radius:2px;background:var(--pink);position:absolute;left:0;top:4px;box-shadow:0 0 12px rgba(250,62,110,.4)}.section-more{font-size:12px;color:#aea5b6;font-weight:650;white-space:nowrap}.section-more:hover{color:#ff7da0}.section-more span{padding-left:4px}.video-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.video-grid.rail{grid-template-columns:repeat(3,minmax(0,1fr))}.video-card{min-width:0;padding-bottom:7px;position:relative}.cover-link{display:block;min-width:0}.cover-frame{display:block;position:relative;overflow:hidden;border-radius:10px;background:linear-gradient(125deg,#2b2035,#43283a);aspect-ratio:16/10;border:1px solid var(--soft-line)}.cover-frame:after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;background:linear-gradient(0deg,rgba(5,4,9,.4),transparent 46%)}.cover-frame img{width:100%;height:100%;object-fit:cover;transition:transform .32s cubic-bezier(.2,.7,.2,1),filter .3s}.video-card:hover .cover-frame img,.video-card:focus-within .cover-frame img{transform:scale(1.055);filter:saturate(1.17) brightness(.9)}.video-card:hover .cover-frame{border-color:rgba(250,62,110,.35);box-shadow:0 0 20px rgba(250,62,110,.12)}.pill{position:absolute;top:9px;left:9px;z-index:2;display:inline-flex;align-items:center;gap:5px;background:rgba(255,42,109,.94);box-shadow:0 3px 14px #0005;border-radius:5px;font-weight:770;letter-spacing:.03em;font-size:10px;padding:4px 8px;color:#fff}.play-mark{position:absolute;left:50%;top:50%;z-index:2;transform:translate(-50%,-45%) scale(.85);width:48px;height:48px;display:grid;place-items:center;border-radius:50%;color:#fff;background:rgba(10,9,14,.56);border:1px solid rgba(255,255,255,.4);backdrop-filter:blur(6px);font-size:14px;padding-left:2px;opacity:0;transition:opacity .2s,transform .2s}.video-card:hover .play-mark,.video-card:focus-within .play-mark{opacity:1;transform:translate(-50%,-50%) scale(1)}.video-title{display:block;margin:11px 0 4px;font-size:14px;font-weight:750;line-height:1.5;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.cover-link:hover .video-title{color:#ff6c96}.video-meta{display:flex;gap:7px;align-items:center;font-size:11px;color:var(--muted);margin-bottom:5px}.card-summary{font-size:11px;line-height:1.65;color:#8f8797;display:-webkit-box;line-clamp:2;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.notice-strip{margin-top:33px;background:linear-gradient(103deg,rgba(250,62,110,.12),rgba(250,62,110,.025) 38%,rgba(255,160,102,.065));border:1px solid rgba(250,62,110,.20);border-radius:11px;display:flex;align-items:center;justify-content:space-between;gap:30px;padding:24px 28px}.notice-strip strong{font-weight:800;font-size:17px;display:block;margin-bottom:7px}.notice-strip p{color:#a8a0ac;font-size:12px;line-height:1.8}.notice-links{display:flex;flex:none;align-items:center;gap:12px}.notice-links a{padding:9px 13px;border-radius:8px;font-size:12px;font-weight:760;background:var(--surface);border:1px solid var(--line)}.notice-links a:hover{border-color:var(--pink);color:#ff81a1}.footer{border-top:1px solid var(--line);background:var(--deep);margin-top:30px}.footer-inner{max-width:var(--max);margin:auto;padding:35px 28px 28px;display:flex;align-items:start;justify-content:space-between;gap:30px}.footer-brand{font-size:21px;font-weight:850;letter-spacing:.015em;margin-bottom:8px}.footer p{font-size:12px;color:var(--muted)}.footer nav{display:flex;gap:25px;padding-top:8px}.footer nav a{color:#b6adbd;font-size:12px}.footer nav a:hover{color:var(--pink)}.copyright{border-top:1px solid var(--soft-line);text-align:center;color:#777181;font-size:11px;padding:18px 10px}.page-intro{padding:34px 0 30px;background:radial-gradient(ellipse at 10% 100%,rgba(250,62,110,.075),transparent 60%)}.page-intro h1{margin:13px 0 14px;font-size:clamp(29px,3.2vw,43px);font-weight:850}.page-intro p{max-width:750px;color:#b7adbc;font-size:13px;line-height:1.9}.browser-layout{display:grid;grid-template-columns:215px minmax(0,1fr);gap:25px;align-items:start}.filter-side{border-radius:11px;background:var(--surface);border:1px solid var(--line);padding:22px 16px;position:sticky;top:105px}.filter-side h2{font-size:13px;letter-spacing:.05em;margin:4px 0 14px;font-weight:800}.filter-side h2:not(:first-child){margin-top:30px}.filter-links{display:flex;flex-direction:column;gap:5px}.filter-links a{display:block;padding:10px 13px;border-radius:7px;color:#b9b0bf;font-size:12px;font-weight:650;transition:background .15s}.filter-links a:hover{background:#302a37;color:white}.filter-links a[aria-current="true"]{background:rgba(250,62,110,.14);color:#ff789b;border-left:2px solid var(--pink)}.filter-note{border-top:1px solid var(--line);margin-top:25px;padding:20px 3px 0;color:#8f8896;font-size:11px;line-height:1.9}.library-main{min-width:0}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:0 0 22px;padding-bottom:17px;border-bottom:1px solid var(--line)}.toolbar-title{display:flex;flex-direction:column;gap:2px}.toolbar-title strong{font-size:17px}.toolbar-title span{font-size:11px;color:var(--muted)}.toolbar form{display:flex;gap:5px;min-width:265px}.toolbar input{background:#23202b;color:var(--text);border:1px solid #3c3544;border-radius:7px;min-width:0;width:260px;padding:10px 11px;font-size:12px}.toolbar input::placeholder{color:#8e8496}.toolbar button{background:var(--pink);color:#fff;border:0;border-radius:7px;font-size:12px;font-weight:800;padding:8px 15px}.toolbar button:hover{background:#ff567f}.rights-box{background:#201c29;border:1px solid var(--line);border-radius:10px;padding:23px 26px;margin-top:27px}.rights-box h2{font-size:18px;margin-bottom:12px}.rights-box p{font-size:13px;color:#a9a1b0;line-height:1.9;max-width:920px}.empty-state{background:linear-gradient(145deg,#221e2a,#19171f);border:1px solid var(--line);border-radius:12px;padding:70px 25px;text-align:center}.empty-state h2{font-size:22px;margin-bottom:10px}.empty-state p{font-size:13px;color:var(--muted);margin:0 auto 24px;max-width:450px}.empty-state .primary-button{margin:0}.not-found{padding:110px 25px;margin:40px auto;max-width:820px}.not-found h1{font-size:32px;margin:15px 0}.not-found .ghost-button{background:transparent}.error-code{font-size:95px;letter-spacing:-.07em;line-height:1;font-weight:900;color:var(--pink);text-shadow:0 4px 40px rgba(250,62,110,.25)}.breadcrumbs{display:flex;gap:11px;align-items:center;margin:7px 0 19px;font-size:11px;color:#928996;flex-wrap:wrap}.breadcrumbs a:hover{color:var(--pink)}.breadcrumbs span{color:#554a5b}.detail-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:26px;align-items:start}.detail-main{min-width:0}.player-placeholder{width:100%;aspect-ratio:16/9;background:var(--deep);border-radius:12px;overflow:hidden;position:relative;border:1px solid var(--line)}.player-placeholder>img{height:100%;width:100%;filter:blur(2px) brightness(.36);object-fit:cover}.player-placeholder:after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 30%,transparent,rgba(10,9,14,.5))}.player-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;z-index:1;padding:25px}.player-status{display:inline-flex;border:1px solid #f46a935c;background:#eb3c6933;padding:4px 12px;border-radius:60px;color:#ff9caf;font-size:11px;margin-bottom:18px}.player-overlay strong{font-size:clamp(17px,2vw,24px);font-weight:800}.player-overlay p{color:#d4c9d2;font-size:12px;margin-top:12px;line-height:1.8}.detail-heading{padding:27px 0 21px;border-bottom:1px solid var(--line)}.detail-heading h1{font-size:clamp(24px,3vw,36px);margin:10px 0 13px;font-weight:850}.detail-byline{display:flex;align-items:center;flex-wrap:wrap;gap:13px;font-size:12px;color:var(--muted)}.free-text{color:#ff789b}.story{padding:28px 0 34px;border-bottom:1px solid var(--line)}.story h2{font-size:20px;margin-bottom:18px}.story p{line-height:2.1;font-size:14px;color:#b6acbc;margin-bottom:16px;max-width:860px}.story p.lead{font-size:16px;color:#ded5df}.detail-next{display:flex;flex-wrap:wrap;gap:12px;margin-top:25px}.detail-next a{border:1px solid var(--line);background:var(--surface);padding:10px 15px;font-size:12px;border-radius:8px}.detail-next a:hover{border-color:var(--pink);color:#ff83a5}.detail-related{background:#1b1922;border:1px solid var(--line);border-radius:11px;padding:17px 15px}.detail-related h2{font-size:16px;padding:6px 2px 18px;line-height:1.5}.mini-related{display:grid;grid-template-columns:112px minmax(0,1fr);gap:11px;align-items:center;padding:12px 2px;border-top:1px solid var(--line)}.mini-related img{width:112px;height:74px;border-radius:7px}.mini-related span{min-width:0}.mini-related strong{font-size:12px;line-height:1.65;display:-webkit-box;line-clamp:2;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.mini-related small{display:block;font-size:10px;color:var(--muted);margin-top:6px}.mini-related:hover strong{color:#ff789e}
/* High-density widescreen composition; consistent 8–12px spacings */
@media(min-width:1500px){.hero-theater{min-height:520px}.hero-media{min-height:520px}.side-card{grid-template-columns:115px minmax(0,1fr) 13px;padding:15px 7px}.side-card img{width:115px;height:88px}.hero-copy{bottom:43px;left:48px}.video-grid{gap:12px}.cover-frame{aspect-ratio:16/9}}
@media(min-width:1100px) and (max-width:1300px){.hero-theater{grid-template-columns:minmax(0,1.9fr) minmax(280px,.9fr)}.hero-copy h1{font-size:37px}.hero-copy{left:30px}.topbar-inner{gap:25px}.video-grid{gap:9px}}
@media(max-width:1099px){.page-shell{padding:22px 22px 60px}.topbar-inner{padding:10px 22px;gap:20px}.hero-theater{grid-template-columns:minmax(0,1.55fr) minmax(255px,.85fr)}.hero-media{min-height:420px}.hero-copy{left:26px;bottom:29px}.hero-copy h1{font-size:31px}.hero-copy p{font-size:12px;line-height:1.8}.side-card{grid-template-columns:82px minmax(0,1fr);gap:9px}.side-card img{width:82px;height:70px}.side-card b{display:none}.video-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.browser-layout{grid-template-columns:185px minmax(0,1fr);gap:18px}.detail-layout{grid-template-columns:minmax(0,1fr) 250px;gap:18px}.mini-related{grid-template-columns:90px minmax(0,1fr)}.mini-related img{width:90px;height:68px}}
@media(max-width:780px){.topbar-inner{min-height:65px;gap:15px;flex-wrap:wrap;padding:10px 16px}.brand{font-size:17px}.brand img{width:34px;height:34px}.brand small{font-size:8px}.global-nav{order:3;width:100%;justify-content:space-around;gap:3px;border-top:1px solid var(--line);padding-top:6px}.global-nav a{padding:8px 10px}.nav-action{padding:8px 12px;font-size:11px}.page-shell{padding:16px 15px 48px}.hero-theater{display:block}.hero-media{min-height:425px}.hero-copy{left:20px;right:12px;bottom:23px;padding-right:0}.hero-copy h1{font-size:clamp(27px,5.4vw,42px);margin:14px 0}.hero-copy p{font-size:12px;margin-bottom:20px}.hero-side{margin-top:9px;display:block;padding:15px 13px}.aside-heading{padding-bottom:9px}.side-card{display:inline-grid;width:33.33%;grid-template-columns:1fr;vertical-align:top;gap:5px;padding:8px 5px 2px;border:0}.side-card img{width:100%;height:auto;aspect-ratio:16/10}.side-card small{margin-top:5px}.side-card strong{font-size:11px}.side-bottom{margin-top:8px;padding:12px 5px 0;flex-direction:row;justify-content:space-between;flex-wrap:wrap}.content-section{margin-top:25px}.section-heading h2{font-size:18px}.video-grid,.video-grid.rail{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 9px}.video-grid.rail{display:flex;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:11px}.video-grid.rail .video-card{flex:0 0 min(42%,255px);scroll-snap-align:start}.notice-strip{flex-direction:column;align-items:start;gap:15px;padding:20px}.notice-links{flex-wrap:wrap}.footer-inner{padding:27px 18px;flex-direction:column;gap:18px}.footer nav{padding:0}.browser-layout{display:block}.filter-side{position:static;margin-bottom:20px;padding:16px}.filter-side h2{margin:0 0 11px}.filter-side h2:not(:first-child){margin-top:14px}.filter-links{flex-direction:row;overflow-x:auto;scrollbar-width:thin;padding-bottom:3px}.filter-links a{white-space:nowrap;padding:8px 12px;border:1px solid var(--line)}.filter-links a[aria-current="true"]{border-left:1px solid var(--pink);border-color:var(--pink)}.filter-note{margin-top:12px;padding-top:13px}.page-intro{padding:23px 0}.page-intro h1{font-size:31px}.toolbar{gap:10px}.toolbar form{min-width:0}.toolbar input{width:190px}.detail-layout{display:block}.detail-related{margin-top:25px}.detail-related h2{padding-bottom:10px}.mini-related{grid-template-columns:120px minmax(0,1fr)}.mini-related img{width:120px;height:80px}}
@media(max-width:480px){.topbar-inner{gap:8px}.nav-action{padding:7px 9px}.global-nav a{font-size:12px}.hero-media{min-height:405px}.hero-copy{left:15px;bottom:19px}.hero-copy h1{font-size:28px}.hero-copy p{font-size:11px;line-height:1.9}.primary-button,.ghost-button{font-size:11px;padding:9px 11px;min-height:39px;gap:5px}.ghost-button{margin-left:5px}.hero-side{padding:10px}.aside-heading{font-size:13px}.side-card strong{font-size:10px}.side-card small{font-size:9px}.section-heading{gap:7px;align-items:center}.section-heading h2{font-size:16px}.section-heading h2:before{height:16px;top:2px}.section-more{font-size:10px}.cover-frame{aspect-ratio:4/3}.video-title{font-size:12px;margin:8px 0 3px}.video-meta{font-size:10px;gap:5px}.card-summary{font-size:10px}.notice-strip{padding:16px}.notice-strip strong{font-size:15px}.notice-strip p{font-size:11px}.toolbar{display:block}.toolbar-title{margin-bottom:12px}.toolbar form{width:100%}.toolbar input{flex:1;width:auto}.page-intro h1{font-size:27px}.page-intro p{font-size:12px}.detail-heading h1{font-size:25px}.detail-heading{padding-top:20px}.player-placeholder{aspect-ratio:5/4}.player-overlay p{font-size:11px}.story h2{font-size:18px}.story p{font-size:13px}.story p.lead{font-size:14px}.footer nav{gap:16px}.footer nav a{font-size:11px}.video-grid.rail .video-card{flex-basis:65%}}
@media(hover:none){.play-mark{opacity:.8;transform:translate(-50%,-50%) scale(.8)}.cover-link:active .cover-frame{border-color:var(--pink)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;scroll-behavior:auto!important}}