/*
51视频原创设计备忘：城市霓虹手账动漫社。奶油白、珊瑚粉、薄荷青与墨蓝构成可信的动漫影视传媒视觉；页面避免旧式视频网站暗黑播放器堆叠，强调胶片齿孔、手账贴片、生活技能教程感和移动端轻量阅读。
*/
:root{--cream:#fff8ed;--paper:#ffffff;--ink:#17213a;--muted:#60706d;--coral:#ff7f72;--coral-soft:#ffd7cf;--mint:#55d6c2;--mint-soft:#d9fff6;--blue:#243b67;--line:#17213a;--shadow:0 22px 48px rgba(23,33,58,.12);--soft-shadow:0 12px 28px rgba(23,33,58,.08);--radius:28px;--max:1180px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:linear-gradient(180deg,var(--cream),#fff 44%,#f3fff9);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",Arial,sans-serif;line-height:1.75}a{color:inherit;text-decoration:none}img{max-width:100%;height:auto;display:block}button,input{font:inherit}.site-header{position:sticky;top:0;z-index:20;background:rgba(255,248,237,.92);backdrop-filter:saturate(140%) blur(14px);border-bottom:3px solid var(--line)}.nav-wrap{max-width:var(--max);margin:auto;padding:14px 18px;display:flex;align-items:center;justify-content:space-between;gap:18px}.brand-link{display:flex;align-items:center;gap:10px;font-weight:900}.brand-link img{width:132px}.main-nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.main-nav a{padding:8px 12px;border:2px solid transparent;border-radius:999px;font-size:14px;font-weight:800}.main-nav a:hover,.main-nav a:focus{border-color:var(--line);background:var(--mint-soft)}.search-bar{border-top:1px dashed rgba(23,33,58,.25);background:rgba(255,255,255,.72)}.search-inner{max-width:var(--max);margin:auto;padding:12px 18px;display:flex;gap:10px}.search-inner input{flex:1;border:3px solid var(--line);border-radius:999px;padding:13px 18px;background:#fff;color:var(--ink);box-shadow:5px 5px 0 var(--coral-soft)}.search-inner button{border:3px solid var(--line);border-radius:999px;background:var(--mint);color:var(--ink);font-weight:900;padding:10px 20px;cursor:pointer}.search-tip{max-width:var(--max);margin:0 auto;padding:0 18px 10px;color:var(--muted);font-size:13px;min-height:24px}.container{max-width:var(--max);margin:auto;padding:0 18px}.hero{position:relative;overflow:hidden;border-bottom:3px solid var(--line);background:radial-gradient(circle at 12% 18%,#ffe0d7,transparent 28%),radial-gradient(circle at 90% 20%,#cffff4,transparent 26%),var(--cream)}.hero-grid{max-width:var(--max);margin:auto;padding:58px 18px 44px;display:grid;grid-template-columns:1.03fr .97fr;gap:28px;align-items:center}.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border:2px solid var(--line);border-radius:999px;background:#fff;font-size:13px;font-weight:900;box-shadow:4px 4px 0 var(--mint)}h1,h2,h3,h4,h5,h6{line-height:1.18;margin:0 0 14px}h1{font-size:clamp(36px,6vw,68px);letter-spacing:-2px}h2{font-size:clamp(27px,4vw,42px)}h3{font-size:clamp(21px,3vw,28px)}h4{font-size:20px}h5{font-size:17px}h6{font-size:15px;text-transform:uppercase;letter-spacing:.08em}.lead{font-size:18px;color:#35415a;max-width:720px}.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin:24px 0}.btn{display:inline-flex;align-items:center;justify-content:center;border:3px solid var(--line);border-radius:999px;padding:11px 18px;background:#fff;font-weight:900;box-shadow:5px 5px 0 rgba(23,33,58,.15);transition:transform .2s ease,box-shadow .2s ease}.btn.primary{background:var(--coral);color:#fff}.btn:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 rgba(23,33,58,.16)}.hero-card{position:relative;border:4px solid var(--line);border-radius:34px;overflow:hidden;background:#fff;box-shadow:var(--shadow);transform:rotate(1.2deg)}.hero-card::before{content:"";position:absolute;inset:16px auto 16px 16px;width:18px;background:repeating-linear-gradient(to bottom,var(--line) 0 9px,transparent 9px 21px);opacity:.7;z-index:2}.hero-card img{width:100%;height:420px;object-fit:cover}.hero-note{position:absolute;left:28px;right:28px;bottom:22px;background:rgba(255,255,255,.9);border:3px solid var(--line);border-radius:22px;padding:14px 18px;font-weight:900}.stats-strip{max-width:var(--max);margin:-14px auto 42px;padding:0 18px;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.stat{background:#fff;border:3px solid var(--line);border-radius:22px;padding:16px;box-shadow:5px 5px 0 var(--mint-soft)}.stat strong{font-size:26px;display:block}.section{padding:62px 0}.section.alt{background:linear-gradient(135deg,#fff,#f0fffb);border-top:2px dashed rgba(23,33,58,.2);border-bottom:2px dashed rgba(23,33,58,.2)}.section-title{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:24px}.section-title p{max-width:560px;color:var(--muted);margin:0}.split{display:grid;grid-template-columns:.9fr 1.1fr;gap:28px;align-items:start}.panel{background:#fff;border:3px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--soft-shadow)}.panel.tint{background:linear-gradient(135deg,#fff,var(--mint-soft))}.media-img{border:3px solid var(--line);border-radius:30px;overflow:hidden;box-shadow:8px 8px 0 var(--coral-soft)}.media-img img{width:100%;height:100%;object-fit:cover}.tag-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.tag{display:inline-flex;border:2px solid var(--line);background:#fff;border-radius:999px;padding:4px 10px;font-size:13px;font-weight:800}.tag.mint{background:var(--mint-soft)}.tag.coral{background:var(--coral-soft)}.grid{display:grid;gap:18px}.grid.three{grid-template-columns:repeat(3,1fr)}.grid.two{grid-template-columns:repeat(2,1fr)}.spaced{margin-top:22px}.feature-card,.expert-card,.review-card,.tool-card{position:relative;background:#fff;border:3px solid var(--line);border-radius:24px;padding:20px;box-shadow:var(--soft-shadow);transition:transform .2s ease}.feature-card:hover,.expert-card:hover,.review-card:hover,.tool-card:hover{transform:translateY(-4px)}.feature-card::after{content:"";position:absolute;right:16px;top:16px;width:42px;height:10px;background:var(--mint);border:2px solid var(--line);border-radius:999px}.video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.video-card{position:relative;overflow:hidden;background:#fff;border:3px solid var(--line);border-radius:26px;box-shadow:var(--soft-shadow)}.video-thumb{position:relative;min-height:210px;background:linear-gradient(135deg,var(--coral-soft),var(--mint-soft));display:flex;align-items:center;justify-content:center;overflow:hidden}.video-thumb img{width:100%;height:230px;object-fit:cover;filter:saturate(1.04)}.play-mask{position:absolute;inset:0;background:rgba(23,33,58,.44);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .22s ease}.video-card:hover .play-mask,.video-card.is-focus .play-mask{opacity:1}.play-button{width:72px;height:72px;border-radius:50%;border:4px solid #fff;background:var(--coral);position:relative;box-shadow:0 10px 26px rgba(0,0,0,.25)}.play-button::after{content:"";position:absolute;left:28px;top:20px;border-left:22px solid #fff;border-top:14px solid transparent;border-bottom:14px solid transparent}.video-body{padding:18px}.metrics{display:flex;gap:10px;flex-wrap:wrap;color:var(--muted);font-size:13px}.json-box{background:#101828;color:#e9fff9;border-radius:20px;border:3px solid var(--line);padding:18px;overflow:auto;font-size:13px;max-height:360px}.timeline{display:grid;gap:14px}.step{display:grid;grid-template-columns:74px 1fr;gap:14px;align-items:start}.step b{display:inline-flex;justify-content:center;border:3px solid var(--line);border-radius:18px;padding:8px;background:var(--coral-soft)}.logo-wall{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}.logo-item{min-height:78px;border:3px solid var(--line);border-radius:20px;background:linear-gradient(135deg,#fff,var(--mint-soft));display:flex;align-items:center;justify-content:center;text-align:center;font-weight:900;padding:10px}.faq details{background:#fff;border:3px solid var(--line);border-radius:20px;padding:14px 16px;box-shadow:var(--soft-shadow)}.faq details+details{margin-top:12px}.faq summary{cursor:pointer;font-weight:900}.reviews{grid-template-columns:repeat(3,1fr)}.review-card strong{display:block;margin-bottom:6px}.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:22px}.qr-row{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.qr-row img{border:3px solid var(--line);border-radius:18px}.breadcrumb{font-size:14px;color:var(--muted);margin:22px 0}.breadcrumb a{text-decoration:underline}.page-hero{padding:44px 0;background:linear-gradient(135deg,#fff1ea,#eafffa);border-bottom:3px solid var(--line)}.article-list{display:grid;gap:18px}.article-item{display:grid;grid-template-columns:240px 1fr;gap:18px;align-items:center;background:#fff;border:3px solid var(--line);border-radius:24px;padding:14px;box-shadow:var(--soft-shadow)}.article-item img{height:170px;width:100%;object-fit:cover;border-radius:18px;border:2px solid var(--line)}.share-row{display:flex;flex-wrap:wrap;gap:10px}.share-row button{border:2px solid var(--line);border-radius:999px;background:#fff;padding:8px 12px;font-weight:900;cursor:pointer}.mcp-widget{border:3px dashed var(--line);border-radius:24px;background:#fff8ed;padding:18px}.site-footer{background:#17213a;color:#fff;margin-top:50px}.footer-inner{max-width:var(--max);margin:auto;padding:34px 18px;display:grid;grid-template-columns:1.1fr .9fr;gap:22px}.footer-inner img.logo{width:150px;background:#fff;border-radius:16px;padding:4px}.footer-inner a{color:#cffff4}.footer-bottom{border-top:1px solid rgba(255,255,255,.18);padding-top:16px;color:#d9fff6}.notice{padding:12px 14px;border-radius:18px;background:#fff;border:2px solid var(--line);color:var(--muted);font-size:14px}.skip-link{position:absolute;left:-999px}.skip-link:focus{left:16px;top:16px;background:#fff;border:3px solid var(--line);padding:10px;z-index:99}@media(max-width:900px){.nav-wrap{align-items:flex-start;flex-direction:column}.hero-grid,.split,.contact-grid,.footer-inner{grid-template-columns:1fr}.stats-strip,.grid.three,.video-grid,.reviews,.logo-wall{grid-template-columns:repeat(2,1fr)}.hero-card img{height:300px}.article-item{grid-template-columns:1fr}.section-title{display:block}}@media(max-width:620px){h1{letter-spacing:-1px}.stats-strip,.grid.two,.grid.three,.video-grid,.reviews,.logo-wall,.qr-row{grid-template-columns:1fr}.search-inner{flex-direction:column}.section{padding:42px 0}.hero-grid{padding-top:34px}.step{grid-template-columns:1fr}.main-nav a{font-size:13px}.hero-card{transform:none}}
