/* Tangxin Vlog – dark immersive editorial video interface */
:root{color-scheme:dark;--bg:#0F0A12;--surface:#1A121E;--surface2:#251B2B;--rose:#FF4D8D;--rose-soft:#FF85A1;--ink:#F5EEF6;--muted:#A697B0;--gold:#FFB800;--border:rgba(255,235,255,.095);--shadow:0 22px 70px rgba(0,0,0,.36);--round:16px;--wrap:1320px}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.65 system-ui,-apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;-webkit-font-smoothing:antialiased}button,input{font:inherit}a{color:inherit;text-decoration:none}button{cursor:pointer}img,video{display:block;max-width:100%}h1,h2,h3,p{margin-top:0}h1,h2,h3{line-height:1.24;letter-spacing:-.035em}h1{font-size:clamp(2.5rem,5.1vw,5.15rem)}h2{font-size:clamp(1.5rem,2.25vw,2.45rem)}h3{font-size:1.15rem}p{color:var(--muted)}:focus-visible{outline:3px solid var(--rose-soft);outline-offset:4px}::selection{background:var(--rose);color:#fff}.skip-link{position:absolute;top:-100px;left:12px;padding:12px 20px;background:var(--rose);color:#fff;z-index:500}.skip-link:focus{top:12px}
.site-header{position:sticky;top:0;z-index:100;background:rgba(15,10,18,.87);backdrop-filter:blur(22px);border-bottom:1px solid var(--border)}.header-inner{max-width:var(--wrap);margin:auto;min-height:82px;padding:0 28px;display:flex;align-items:center;gap:34px}.brand{display:flex;align-items:center;gap:11px;white-space:nowrap;font-size:20px;font-weight:900;letter-spacing:-.055em}.brand img{width:39px;height:39px;border-radius:12px;object-fit:cover;background:var(--surface2)}.brand small{font:600 9px/1.1 ui-monospace,monospace;letter-spacing:.12em;color:var(--rose-soft);margin-left:1px;max-width:50px;white-space:normal}.primary-nav{display:flex;align-items:center;gap:34px;margin:0 auto}.primary-nav a{font-size:14px;font-weight:650;color:var(--muted);padding:29px 0;position:relative;transition:color .2s}.primary-nav a:hover,.primary-nav a[aria-current]{color:#fff}.primary-nav a[aria-current]:after{position:absolute;content:"";height:3px;bottom:0;left:0;right:0;background:var(--rose);border-radius:6px}.header-action{background:var(--surface2);border:1px solid var(--border);padding:10px 18px;border-radius:999px;font-size:13px;font-weight:750;white-space:nowrap;transition:background .2s,transform .2s}.header-action:hover{background:#422438;transform:translateY(-2px)}.header-action span{color:var(--rose-soft);margin-left:10px}
.site-main{overflow:hidden}.section-shell{max-width:var(--wrap);padding:0 28px;margin:0 auto}.hero{max-width:var(--wrap);padding:56px 28px 50px;margin:0 auto;min-height:550px;display:grid;grid-template-columns:1.14fr .86fr;align-items:center;gap:60px}.hero-copy{padding-bottom:25px;position:relative}.hero-copy:before{content:"";position:absolute;top:0;left:-20%;width:65%;height:65%;background:radial-gradient(ellipse,rgba(255,77,141,.12),transparent 70%);pointer-events:none}.eyebrow,.section-kicker{font:700 11px/1.5 ui-monospace,monospace;letter-spacing:.16em;color:var(--rose-soft)}.eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 30px}.pulse{height:8px;width:8px;background:var(--rose);border-radius:50%;box-shadow:0 0 0 5px rgba(255,77,141,.16)}.hero h1{margin-bottom:24px;font-weight:900;letter-spacing:-.07em}.hero h1 em{font-style:normal;color:var(--rose)}.hero-copy>p{max-width:510px;line-height:1.9;font-size:16px;margin-bottom:34px}.hero-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.btn{border-radius:999px;padding:12px 23px;display:inline-flex;align-items:center;justify-content:center;gap:18px;border:1px solid transparent;white-space:nowrap;font-weight:800;font-size:14px;min-height:49px;transition:transform .2s,box-shadow .2s,border .2s}.btn:hover{transform:translateY(-3px)}.btn.primary{background:var(--rose);color:white;box-shadow:0 12px 34px rgba(255,77,141,.22)}.btn.primary:hover{box-shadow:0 16px 42px rgba(255,77,141,.42)}.btn.secondary{border-color:rgba(255,255,255,.15);background:rgba(255,255,255,.04)}.btn.secondary:hover{border-color:var(--rose)}.hero-note{display:block;margin-top:29px;color:#807384;font:600 11px ui-monospace,monospace;letter-spacing:.045em}.hero-visual{height:445px;position:relative;display:grid;place-items:center}.hero-visual:before{content:"";width:93%;height:84%;position:absolute;inset:11% 3%;background:var(--rose);filter:blur(94px);opacity:.22;pointer-events:none}.hero-cover{position:relative;width:84%;height:100%;max-width:355px;display:block;overflow:hidden;border-radius:26px;transform:rotate(3deg);border:1px solid rgba(255,255,255,.2);box-shadow:var(--shadow);transition:transform .35s}.hero-cover:hover{transform:rotate(0) scale(1.03)}.hero-cover img{width:100%;height:100%;object-fit:cover;background:#433145}.hero-glow{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25),transparent 35%,rgba(0,0,0,.78))}.hero-badge{position:absolute;top:18px;left:18px;background:var(--gold);color:#2d1726;padding:5px 12px;border-radius:99px;font:900 10px ui-monospace,monospace;letter-spacing:.09em}.hero-play{display:grid;place-items:center;position:absolute;top:48%;left:50%;transform:translate(-50%,-50%);height:65px;width:65px;background:rgba(255,255,255,.22);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.65);border-radius:50%;font-size:20px}.hero-cover-title{position:absolute;bottom:26px;left:24px;font-size:29px;font-weight:900;line-height:1.2}.hero-cover-title small{display:block;font-size:14px;font-weight:500;margin-top:8px;color:#e4d9e4}.vertical-tag{writing-mode:vertical-rl;position:absolute;right:2%;top:17%;font:600 11px ui-monospace,monospace;letter-spacing:.17em;color:#786279}
.section-heading{display:flex;align-items:end;justify-content:space-between;gap:28px;margin:0 0 24px}.section-heading h2{margin:8px 0 10px;font-weight:900}.section-heading p{margin:0;max-width:680px}.section-heading.tight{margin-top:24px}.text-link{color:var(--rose-soft);white-space:nowrap;font-weight:800;font-size:13px;padding-bottom:6px}.text-link:hover{text-decoration:underline;text-underline-offset:5px}.quick-topics{display:flex;align-items:center;gap:10px;margin:28px 0 25px;overflow-x:auto;scrollbar-width:thin;padding-bottom:7px}.quick-topics a,.chip{white-space:nowrap;padding:10px 20px;border-radius:999px;border:1px solid var(--border);background:var(--surface2);font-size:13px;font-weight:700;transition:all .2s}.quick-topics a:hover,.chip:hover{background:#4b293d;border-color:var(--rose-soft);color:white}.video-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 15px}.video-card{min-width:0}.cover{display:block;aspect-ratio:3/4;position:relative;overflow:hidden;border-radius:var(--round);background:linear-gradient(135deg,#38233d,#211527);border:1px solid rgba(255,255,255,.09)}.cover img{width:100%;height:100%;object-fit:cover;transition:transform .5s,filter .4s}.cover:hover img{transform:scale(1.06);filter:saturate(1.2)}.cover-shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,6,11,.6),transparent 45%)}.play-icon{display:grid;place-items:center;position:absolute;left:50%;top:50%;width:52px;height:52px;border-radius:50%;transform:translate(-50%,-45%) scale(.8);opacity:0;background:rgba(255,77,141,.88);box-shadow:0 8px 30px rgba(0,0,0,.4);transition:transform .22s,opacity .22s}.cover:hover .play-icon,.cover:focus-visible .play-icon{opacity:1;transform:translate(-50%,-50%) scale(1)}.card-chip{position:absolute;left:12px;bottom:12px;background:rgba(22,12,28,.8);border:1px solid rgba(255,255,255,.16);padding:4px 11px;border-radius:99px;font-size:11px;font-weight:750;backdrop-filter:blur(12px)}.card-body{padding:12px 3px 2px}.card-title{display:block;font-weight:850;font-size:15px;line-height:1.45;letter-spacing:-.02em;transition:color .2s}.card-title:hover{color:var(--rose-soft)}.card-summary{font-size:12px;line-height:1.7;margin:7px 0 9px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}.creator-mark{display:flex;align-items:center;gap:7px;font:600 11px ui-monospace,monospace;color:#aaa0b4}.mini-dot{width:17px;height:17px;background:linear-gradient(135deg,var(--rose),#8058d1);border-radius:6px;border:1px solid rgba(255,255,255,.2)}
.creators-section{margin-top:76px}.creator-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}.creator-card{border:1px solid var(--border);background:var(--surface);border-radius:16px;overflow:hidden;transition:transform .25s,border .25s}.creator-card:hover{transform:translateY(-5px);border-color:rgba(255,77,141,.55)}.creator-card img{height:184px;width:100%;object-fit:cover;background:var(--surface2)}.creator-card>div{padding:19px 17px 22px}.creator-card span{color:var(--rose-soft);font:700 11px ui-monospace,monospace}.creator-card h3{font-size:18px;margin:8px 0 10px}.creator-card p{font-size:12px;margin:0;line-height:1.7}.bottom-banner{display:flex;align-items:center;justify-content:space-between;gap:35px;margin-top:74px;margin-bottom:85px;padding:36px 44px;border:1px solid rgba(255,77,141,.25);border-radius:24px;background:radial-gradient(ellipse at 95% 0%,rgba(255,77,141,.18),transparent 57%),linear-gradient(115deg,#261728,#1A121E)}.bottom-banner h2{margin:8px 0 10px}.bottom-banner p{max-width:700px;margin:0}.bottom-banner .btn{flex-shrink:0}
.library-hero{padding-top:51px;padding-bottom:32px;display:flex;align-items:center;justify-content:space-between;gap:40px}.library-hero h1{margin:10px 0 15px;font-size:clamp(2.3rem,4vw,4.1rem)}.library-hero p{max-width:680px;margin:0;line-height:1.85}.library-stat{width:205px;height:142px;border-radius:22px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle at 70% 35%,#64314b,#2b1d31 65%);border:1px solid rgba(255,133,161,.18);flex-shrink:0}.library-stat span,.library-stat small{font:800 9px ui-monospace,monospace;letter-spacing:.17em;color:#f8b0c8}.library-stat strong{font-size:42px;line-height:1.5;color:var(--rose)}.library-content{padding-bottom:55px}.search-form{padding:23px;border-radius:18px;background:var(--surface);border:1px solid var(--border)}.search-form label{display:block;font-weight:800;font-size:13px;margin-bottom:12px}.search-row{display:flex;gap:10px}.search-row input{background:var(--surface2);color:var(--ink);min-width:0;flex:1;border:1px solid #49324b;border-radius:999px;padding:11px 20px;outline:none}.search-row input:focus{border-color:var(--rose);box-shadow:0 0 0 3px rgba(255,77,141,.15)}.search-row input::placeholder{color:#86758c}.chips{display:flex;gap:9px;overflow-x:auto;padding:23px 0 7px;scrollbar-width:thin}.chip.selected{background:var(--rose);border-color:var(--rose);color:white}.guide-section{background:var(--surface);border:1px solid var(--border);border-radius:20px;margin-bottom:78px;padding:31px 36px;display:flex;gap:25px;align-items:start}.guide-icon{width:60px;height:60px;flex:0 0 60px;border-radius:20px;display:grid;place-items:center;font-size:32px;color:var(--rose-soft);background:#39203b}.guide-section h2{font-size:22px;margin:4px 0 13px}.guide-section p{line-height:1.85;margin:0 0 12px}.empty-state{border:1px dashed #61445e;border-radius:20px;text-align:center;padding:40px 20px}.empty-state>span{font-size:54px;color:var(--rose-soft)}
.breadcrumbs{display:flex;align-items:center;gap:13px;font-size:12px;color:#9e8eaa;margin:5px 0 18px;flex-wrap:wrap}.breadcrumbs a:hover{color:var(--rose-soft)}.detail-layout{display:grid;grid-template-columns:minmax(0,1fr) 315px;gap:35px;padding-top:35px;padding-bottom:85px}.player-frame{border:1px solid var(--border);background:#080609;border-radius:20px;overflow:hidden;aspect-ratio:16/9;max-height:600px;display:grid;place-items:center}.player-frame video{width:100%;height:100%;object-fit:contain}.player-missing{isolation:isolate;position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;width:100%;height:100%;padding:20px}.player-missing:before{content:"";position:absolute;inset:0;z-index:-2;background-image:var(--poster);background-size:cover;background-position:center;filter:blur(22px) brightness(.32)}.player-missing:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(12,8,16,.8),transparent)}.player-missing strong{font-size:clamp(16px,2vw,24px);margin-top:15px}.player-missing p{color:#e3d4e3;font-size:13px;margin:10px 0}.play-outline{display:grid;place-items:center;font-size:19px;border-radius:50%;border:2px solid rgba(255,255,255,.65);width:68px;height:68px;background:rgba(255,77,141,.25)}.detail-tag{color:var(--rose-soft);font-weight:750;font-size:12px;margin:26px 0 11px}.detail-tag span{padding:0 8px;color:#7e6c87}.detail-main h1{font-size:clamp(26px,3vw,41px);margin:0 0 13px}.detail-intro{font-size:16px;line-height:1.9}.story-body{padding:26px 0;border-top:1px solid var(--border);margin-top:29px}.story-body h2{font-size:23px;margin:0 0 15px}.story-body p{font-size:15px;line-height:2}.creator-detail{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:17px}.avatar{width:47px;height:47px;border-radius:15px;background:linear-gradient(130deg,#f24f8d,#683077);display:grid;place-items:center;font-weight:900}.creator-detail small{display:block;color:var(--muted);font-size:11px}.creator-detail strong{display:block}.creator-detail a{margin-left:auto;color:var(--rose-soft);font-size:12px;font-weight:800}.related-panel{padding-top:28px}.related-panel h2{font-size:20px;margin:0 0 7px}.related-panel>p{font-size:12px}.related-list{display:flex;flex-direction:column;gap:11px;margin:22px 0}.related-list a{display:flex;gap:12px;padding:8px;background:var(--surface);border:1px solid var(--border);border-radius:13px}.related-list a:hover{border-color:var(--rose)}.related-list img{width:75px;height:85px;object-fit:cover;border-radius:9px;background:var(--surface2)}.related-list span{align-self:center;flex:1}.related-list b{display:block;font-size:12px;line-height:1.5}.related-list small{color:var(--rose-soft);display:block;margin-top:6px;font-size:11px}.not-found{padding-top:105px;padding-bottom:125px;text-align:center;min-height:55vh}.not-found .hero-actions{justify-content:center}.giant-number{display:block;font:900 clamp(6rem,14vw,12rem)/1 ui-monospace,monospace;color:#392139;letter-spacing:-.1em}.not-found h1{font-size:clamp(25px,3.2vw,43px);margin:18px 0}.not-found p{margin-bottom:28px}
.site-footer{border-top:1px solid var(--border);background:#120d15}.footer-inner{max-width:var(--wrap);padding:42px 28px 24px;margin:auto;display:flex;justify-content:space-between;gap:32px}.footer-inner strong{font-size:20px}.footer-inner p{font-size:13px;margin:8px 0}.footer-inner .muted{font-size:11px;max-width:620px;color:#7e7081}.footer-inner nav{display:flex;flex-wrap:wrap;align-content:start;gap:12px 24px;max-width:300px;padding-top:5px}.footer-inner nav a{font-size:12px;color:#b5a7bd}.footer-inner nav a:hover{color:var(--rose-soft)}.footer-bottom{max-width:var(--wrap);border-top:1px solid var(--border);margin:auto;padding:17px 28px 24px;display:flex;justify-content:space-between;gap:20px;color:#6d5e73;font:600 11px ui-monospace,monospace}
@media (max-width:1100px){.video-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.hero{gap:25px}.hero-visual{height:395px}.creator-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.detail-layout{grid-template-columns:minmax(0,1fr) 270px;gap:20px}.primary-nav{gap:20px}}
@media (max-width:760px){.header-inner{padding:0 17px;min-height:68px;gap:10px;flex-wrap:wrap}.brand{font-size:17px;margin-right:auto}.brand img{height:34px;width:34px}.brand small{font-size:8px}.primary-nav{order:3;flex-basis:100%;justify-content:space-around;gap:0}.primary-nav a{padding:9px 5px 12px;font-size:12px}.header-action{font-size:11px;padding:8px 13px}.section-shell{padding-left:17px;padding-right:17px}.hero{padding:35px 17px;min-height:0;grid-template-columns:1fr;gap:24px}.hero-copy{padding:0}.eyebrow{margin-bottom:17px}.hero h1{font-size:clamp(2.4rem,10vw,4rem);margin-bottom:16px}.hero-copy>p{font-size:14px;max-width:580px;margin-bottom:24px}.hero-visual{height:285px;width:100%}.hero-cover{max-width:225px;transform:rotate(2deg);border-radius:20px}.hero-cover-title{bottom:15px;left:14px;font-size:22px}.hero-cover-title small{font-size:11px}.hero-play{width:46px;height:46px}.vertical-tag{right:8%}.video-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 11px}.cover{border-radius:13px}.card-title{font-size:13px}.card-summary{font-size:11px}.card-body{padding-top:9px}.creator-mark{font-size:10px}.section-heading{align-items:start;flex-direction:column;gap:10px}.section-heading p{font-size:13px}.section-heading h2{font-size:25px}.creators-section{margin-top:51px}.creator-grid{gap:10px}.creator-card img{height:130px}.creator-card>div{padding:12px}.creator-card h3{font-size:15px}.creator-card p{font-size:11px}.bottom-banner{margin-top:51px;margin-bottom:55px;display:block;padding:26px 23px}.bottom-banner .btn{margin-top:20px}.library-hero{padding-top:32px}.library-stat{display:none}.search-form{padding:15px}.search-row input{padding:9px 14px;font-size:13px}.search-row .btn{padding:9px 17px}.guide-section{padding:20px;gap:13px;margin-bottom:54px}.guide-icon{height:39px;width:39px;flex-basis:39px;font-size:21px;border-radius:12px}.guide-section h2{font-size:18px}.guide-section p{font-size:12px}.detail-layout{grid-template-columns:1fr;gap:18px;padding-top:18px;padding-bottom:55px}.related-panel{padding-top:20px}.related-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.related-list a{min-width:0}.related-list img{width:64px;height:75px}.related-list b{font-size:11px}.site-footer .footer-inner{display:block;padding:29px 17px}.footer-inner nav{margin-top:20px}.footer-bottom{padding:15px 17px 24px}.player-frame{border-radius:14px}}
@media (max-width:420px){.brand small{display:none}.header-action{font-size:10px;padding:8px 10px}.header-action span{margin-left:3px}.hero-actions{gap:8px}.btn{min-height:45px;padding:10px 16px;font-size:12px;gap:9px}.hero-note{font-size:10px}.hero-visual{height:255px}.card-chip{font-size:9px;left:7px;bottom:7px;padding:4px 7px}.video-grid{gap:15px 9px}.related-list{grid-template-columns:1fr}.search-row input{width:0}.creator-detail{flex-wrap:wrap}.creator-detail a{margin-left:0}.guide-icon{display:none}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}.can-reveal{opacity:1!important;transform:none!important}}
@media (hover:hover) and (min-width:761px){.can-reveal{opacity:0;transform:translateY(15px);transition:opacity .4s ease,transform .4s ease}.can-reveal.is-visible{opacity:1;transform:none}}