/*
设计哲学：51视频采用“海岸像素新浪潮”。本CSS以潮汐青蓝、雾面奶白、珊瑚橙、龟甲分镜、水波胶片纹理、非对称剪辑时间线为核心，避免通用居中模板、紫色渐变和单一圆角风格。自检：这个选择是在强化，还是稀释海岸像素新浪潮？
*/
:root{
  --sea-900:#073039;
  --sea-800:#0b4650;
  --sea-700:#126570;
  --sea-500:#1ca8b5;
  --sea-300:#74d7d2;
  --foam:#f6f3dd;
  --paper:#fffbea;
  --coral:#ff775c;
  --amber:#f3bc65;
  --ink:#09282d;
  --muted:#5d7778;
  --line:rgba(7,48,57,.18);
  --shadow:0 24px 70px rgba(7,48,57,.18);
  --soft-shadow:0 14px 35px rgba(7,48,57,.12);
  --radius-a:30px;
  --radius-b:10px;
  --radius-c:46px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--foam)}
body{margin:0;color:var(--ink);font-family:"Microsoft YaHei","PingFang SC","Noto Sans CJK SC",system-ui,sans-serif;background:
  radial-gradient(circle at 8% 4%,rgba(116,215,210,.35),transparent 26rem),
  radial-gradient(circle at 88% 12%,rgba(255,119,92,.13),transparent 24rem),
  linear-gradient(180deg,var(--foam),#eef8f3 42%,#f9f1dd);line-height:1.75;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
button,input{font:inherit}
::selection{background:var(--coral);color:#fff}
.site-header{position:relative;z-index:10;padding:18px clamp(16px,4vw,56px) 0;background:linear-gradient(180deg,rgba(246,243,221,.96),rgba(246,243,221,.72) 65%,transparent);backdrop-filter:blur(12px)}
.site-header.compact{padding-bottom:18px;border-bottom:1px solid var(--line)}
.brand-bar{display:flex;align-items:center;justify-content:space-between;gap:26px;max-width:1380px;margin:auto}
.brand-mark{display:flex;align-items:center;gap:14px;min-width:max-content}
.brand-mark img{border-radius:24% 36% 28% 42%;filter:drop-shadow(0 12px 18px rgba(7,48,57,.18))}
.brand-mark strong{display:block;font-size:clamp(1.35rem,2vw,2rem);letter-spacing:.04em;font-family:"STKaiti","KaiTi","Microsoft YaHei",sans-serif;color:var(--sea-900)}
.brand-mark em{display:block;font-style:normal;font-size:.78rem;color:var(--sea-700);letter-spacing:.12em;margin-top:-4px}
.main-nav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
.main-nav a{position:relative;padding:10px 14px;border:1px solid transparent;border-radius:999px;color:var(--sea-800);font-size:.95rem;transition:.22s ease}
.main-nav a::after{content:"";position:absolute;left:16px;right:16px;bottom:6px;height:2px;background:var(--coral);transform:scaleX(0);transform-origin:left;transition:.22s ease}
.main-nav a:hover,.main-nav a.active{background:rgba(255,255,255,.58);border-color:rgba(18,101,112,.18);transform:translateY(-1px)}
.main-nav a:hover::after,.main-nav a.active::after{transform:scaleX(1)}
.search-shell{max-width:1040px;margin:18px auto 0;padding:12px;display:grid;grid-template-columns:auto minmax(180px,1fr) auto;gap:10px;align-items:center;background:rgba(255,251,234,.84);border:1px solid var(--line);box-shadow:var(--soft-shadow);border-radius:22px 8px 28px 8px}
.search-shell label{font-weight:800;color:var(--sea-900);white-space:nowrap}
.search-shell input{width:100%;border:1px solid rgba(18,101,112,.2);background:#fffdf4;color:var(--ink);border-radius:999px;padding:12px 16px;outline:none;transition:.2s ease}
.search-shell input:focus{border-color:var(--coral);box-shadow:0 0 0 4px rgba(255,119,92,.12)}
.search-shell button,.btn,.share-buttons button{border:0;background:var(--sea-900);color:#fff;padding:12px 18px;border-radius:999px;font-weight:800;box-shadow:0 10px 24px rgba(7,48,57,.18);transition:.22s ease;cursor:pointer}
.search-shell button:hover,.btn:hover,.share-buttons button:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(7,48,57,.22)}
.search-shell p{grid-column:1/-1;margin:0;color:var(--muted);font-size:.88rem}
.hero,.section,.inner-hero{max-width:1380px;margin:0 auto;padding:clamp(54px,7vw,110px) clamp(16px,4vw,56px)}
.split-panel{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(360px,.98fr);align-items:center;gap:clamp(28px,5vw,70px)}
.breadcrumb{display:inline-flex;margin:0 0 16px;padding:8px 12px;border:1px solid rgba(18,101,112,.18);border-radius:999px;background:rgba(255,255,255,.58);color:var(--sea-700);font-size:.9rem}
h1,h2,h3,h4,h5,h6{margin:0;color:var(--sea-900);line-height:1.18;letter-spacing:-.02em}
h1{font-size:clamp(2.45rem,6vw,5.9rem);font-family:"STKaiti","KaiTi","Microsoft YaHei",sans-serif;max-width:13ch}
h2{font-size:clamp(1.55rem,3vw,3rem)}
h3{font-size:clamp(1.08rem,1.5vw,1.45rem)}
.hero h2{margin-top:18px;max-width:760px;color:var(--sea-700)}
.hero p,.section-heading p,.inner-hero p{font-size:1.05rem;color:#385c60;max-width:760px}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin:30px 0}
.btn.primary{background:linear-gradient(135deg,var(--sea-900),var(--sea-500));color:#fff}
.btn.ghost{background:transparent;color:var(--sea-900);border:1px solid rgba(7,48,57,.22);box-shadow:none}
.trust-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;list-style:none;margin:32px 0 0;padding:0}
.trust-row li{padding:16px;border:1px solid rgba(7,48,57,.12);background:rgba(255,251,234,.72);border-radius:24px 8px 24px 8px;box-shadow:0 10px 26px rgba(7,48,57,.08)}
.trust-row strong{display:block;font-family:"Consolas","Menlo",monospace;font-size:1.35rem;color:var(--coral)}
.trust-row span{font-size:.86rem;color:var(--muted)}
.hero-media{position:relative;isolation:isolate}
.hero-media::before{content:"";position:absolute;inset:-28px 16% 16% -30px;background:repeating-linear-gradient(135deg,rgba(7,48,57,.1) 0 8px,transparent 8px 18px);border-radius:80px 20px 80px 20px;z-index:-1;transform:rotate(-3deg)}
.hero-media>img{border-radius:54px 14px 82px 24px;box-shadow:var(--shadow);border:8px solid rgba(255,251,234,.75)}
.floating-video{position:absolute;left:-8%;bottom:-8%;width:min(370px,72%);background:rgba(7,48,57,.92);color:#fff;border:1px solid rgba(255,255,255,.18);box-shadow:0 26px 60px rgba(7,48,57,.3);border-radius:28px 8px 38px 8px;padding:22px;overflow:hidden}
.floating-video h3{color:#fff;margin:.5rem 0}.floating-video p{color:#d7f4ef;margin:0}.tag{display:inline-flex;padding:5px 10px;border-radius:999px;background:rgba(255,119,92,.18);color:#ffd8cf;font-size:.82rem}
.section{position:relative}.diagonal{background:linear-gradient(135deg,rgba(255,251,234,.82),rgba(116,215,210,.16));border-top:1px solid rgba(7,48,57,.1);border-bottom:1px solid rgba(7,48,57,.1);max-width:none}.diagonal>*{max-width:1380px;margin-left:auto;margin-right:auto}
.section-heading{display:grid;grid-template-columns:.45fr 1fr;gap:22px;align-items:end;margin-bottom:32px}.section-heading.narrow{display:block;max-width:880px}.eyebrow{margin:0 0 12px!important;color:var(--coral)!important;font-weight:900;letter-spacing:.18em;text-transform:uppercase;font-size:.82rem!important}
.module-lanes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.lane-card{background:rgba(255,251,234,.86);border:1px solid rgba(7,48,57,.12);box-shadow:var(--soft-shadow);padding:24px;border-radius:34px 8px 34px 8px;min-height:285px}.lane-card.offset{transform:translateY(36px);background:rgba(255,255,255,.72)}.lane-card p{color:#385c60}.chip-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}.chip-row span,.tags-panel span{display:inline-flex;padding:6px 10px;border-radius:999px;background:rgba(28,168,181,.12);color:var(--sea-800);border:1px solid rgba(28,168,181,.18);font-size:.86rem}
.video-grid{display:grid;grid-template-columns:1.18fr .91fr .91fr;gap:18px}.video-card{position:relative;overflow:hidden;border:1px solid rgba(7,48,57,.14);border-radius:36px 8px 42px 10px;background:#fff;box-shadow:var(--soft-shadow);transition:transform .22s ease,box-shadow .22s ease}.video-card:hover,.video-card:focus{transform:translateY(-8px) rotate(-.6deg);box-shadow:0 26px 55px rgba(7,48,57,.2);outline:none}.video-card img{width:100%;aspect-ratio:16/9;object-fit:cover;filter:saturate(1.04)}.video-meta{padding:18px}.video-meta p{margin:.45rem 0;color:#466b6e}.video-meta span{color:var(--coral);font-size:.88rem;font-weight:700}.play-button{position:absolute;left:50%;top:42%;width:70px;height:70px;border:0;border-radius:50%;background:var(--coral);transform:translate(-50%,-50%) scale(.72);opacity:0;box-shadow:0 12px 30px rgba(255,119,92,.32);transition:.22s ease;cursor:pointer}.play-button::before{content:"";position:absolute;left:29px;top:22px;border-left:22px solid #fff;border-top:14px solid transparent;border-bottom:14px solid transparent}.video-card:hover .play-button,.video-card:focus .play-button{opacity:1;transform:translate(-50%,-50%) scale(1)}.video-card.large{grid-row:span 2}.video-card.large img{aspect-ratio:16/11}
.experts{display:grid;grid-template-columns:.9fr 1.1fr;gap:36px;align-items:center}.expert-visual img{border-radius:16px 58px 16px 90px;border:8px solid rgba(255,251,234,.86);box-shadow:var(--shadow)}.expert-list{display:grid;gap:14px;margin-top:24px}.expert-list article{padding:20px;background:rgba(255,251,234,.82);border:1px solid rgba(7,48,57,.12);border-radius:24px 8px 28px 8px}.expert-list p{color:#466b6e}.expert-list a{display:inline-flex;margin-right:10px;color:var(--sea-800);font-weight:900;border-bottom:2px solid var(--coral)}
.howto{background:linear-gradient(90deg,rgba(7,48,57,.96),rgba(18,101,112,.92));color:#eafffb;max-width:none}.howto h2,.howto h3{color:#fff}.howto>*{max-width:1380px;margin-left:auto;margin-right:auto}.logo-wall{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin:28px auto}.logo-wall span{display:grid;place-items:center;min-height:78px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.08);border-radius:20px 6px;color:#eafffb;font-weight:900}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.steps article{padding:24px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.08);border-radius:34px 8px}.steps strong{font-size:2rem;color:var(--amber);font-family:"Consolas",monospace}.steps p{color:#d4f3ef}
.contact-band{display:grid;grid-template-columns:1fr minmax(320px,.72fr);gap:28px;align-items:center}.qr-panel{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.qr-panel figure{margin:0;padding:14px;background:#fffdf4;border:1px solid rgba(7,48,57,.14);border-radius:24px 8px;text-align:center;box-shadow:var(--soft-shadow)}.qr-panel img{border-radius:12px;margin:auto}.qr-panel figcaption{margin-top:10px;font-size:.86rem;color:var(--sea-800);font-weight:800}
.reviews-faq{display:grid;grid-template-columns:1.08fr .92fr;gap:28px}.review-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.review-grid blockquote{margin:0;padding:20px;background:rgba(255,251,234,.78);border-left:5px solid var(--coral);border-radius:22px 8px 22px 8px}.review-grid p{color:#466b6e}.faq-list{padding:22px;background:rgba(255,255,255,.72);border:1px solid rgba(7,48,57,.14);box-shadow:var(--soft-shadow);border-radius:32px 8px 32px 8px}details{border-bottom:1px solid rgba(7,48,57,.12);padding:14px 0}details:last-child{border-bottom:0}summary{cursor:pointer;font-weight:900;color:var(--sea-900)}details p{color:#466b6e}.share{text-align:left}.share-buttons{display:flex;flex-wrap:wrap;gap:12px}.share-buttons button{background:var(--sea-800)}
.inner-hero{padding-bottom:36px}.inner-hero h1{max-width:16ch}.inner-json{padding-top:22px}.inner-grid{grid-template-columns:repeat(3,1fr)}.inner-card{min-height:100%}.tags-panel{padding-top:30px}.tags-panel p{display:flex;gap:10px;flex-wrap:wrap}.site-footer{margin-top:40px;padding:42px clamp(16px,4vw,56px);background:var(--sea-900);color:#d9f2ed}.footer-brand{display:flex;align-items:center;gap:12px;font-size:1.4rem;font-weight:900;color:#fff}.footer-brand img{border-radius:18px}.site-footer p{max-width:980px;color:#d9f2ed}.site-footer code{color:#fff;background:rgba(255,255,255,.08);padding:2px 6px;border-radius:6px}
@keyframes floatTape{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-10px) rotate(-1deg)}}.hero-media::before{animation:floatTape 6s ease-in-out infinite}.brand-mark img{animation:floatTape 7s ease-in-out infinite}
@media (max-width:1100px){.split-panel,.experts,.contact-band,.reviews-faq{grid-template-columns:1fr}.module-lanes{grid-template-columns:repeat(2,1fr)}.lane-card.offset{transform:none}.video-grid,.inner-grid{grid-template-columns:1fr 1fr}.video-card.large{grid-row:auto}.section-heading{grid-template-columns:1fr}.logo-wall{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){body{font-size:15px}.site-header{padding:12px 12px 0}.brand-bar{align-items:flex-start;gap:14px;flex-direction:column}.brand-mark img{width:58px;height:58px}.main-nav{justify-content:flex-start}.main-nav a{font-size:.86rem;padding:8px 10px}.search-shell{grid-template-columns:1fr;border-radius:18px;margin-top:12px}.hero,.section,.inner-hero{padding:42px 14px}.split-panel{gap:30px}.trust-row{grid-template-columns:repeat(2,1fr)}.hero-media>img{border-radius:28px 8px 42px 12px;border-width:4px}.floating-video{position:relative;left:auto;bottom:auto;width:100%;margin-top:12px}.module-lanes,.video-grid,.inner-grid,.steps,.review-grid,.qr-panel{grid-template-columns:1fr}.logo-wall{grid-template-columns:repeat(2,1fr)}h1{font-size:2.45rem}.play-button{opacity:1;transform:translate(-50%,-50%) scale(.88)}.video-card:hover,.video-card:focus{transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* 设计哲学：51视频“海岸像素新浪潮”补强模块，继续使用潮汐青蓝、龟甲分镜、水波胶片纹理与非对称剪辑时间线。 */
.eeat-panel{background:linear-gradient(135deg,rgba(222,247,245,.94),rgba(255,251,232,.86));border:1px solid rgba(13,95,112,.16);box-shadow:0 22px 60px rgba(10,70,86,.10);position:relative;overflow:hidden}.eeat-panel:before{content:"";position:absolute;inset:auto -8% -22% auto;width:360px;height:360px;background:radial-gradient(circle,rgba(79,190,189,.22),transparent 62%);border-radius:42% 58% 51% 49%;pointer-events:none}.eeat-grid,.product-grid,.article-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;position:relative}.eeat-grid article,.product-grid article,.article-grid article{background:rgba(255,255,255,.78);border:1px solid rgba(17,112,130,.15);box-shadow:0 14px 34px rgba(8,61,80,.09);padding:22px;clip-path:polygon(0 0,100% 0,100% 91%,92% 100%,0 100%)}.eeat-grid h3,.product-grid h3,.article-grid h3{margin:0 0 10px;color:#073f52}.heading-ladder{margin-top:24px;padding:22px;background:rgba(5,55,73,.88);color:#e8fffb;border-left:8px solid #f2c84b;clip-path:polygon(0 0,98% 0,100% 14%,100% 100%,2% 100%,0 86%)}.heading-ladder h3,.heading-ladder h4,.heading-ladder h5,.heading-ladder h6{margin:10px 0;color:#e8fffb;letter-spacing:.01em}.product-article{background:linear-gradient(180deg,#ffffff,#eef9f7 48%,#fff8df);border-top:1px solid rgba(8,86,112,.14);border-bottom:1px solid rgba(8,86,112,.14)}.section-heading.narrow{max-width:900px}.product-grid{grid-template-columns:repeat(3,minmax(0,1fr));margin:24px 0}.product-grid span{display:inline-block;margin-top:10px;color:#0a6a78;font-weight:700}.article-grid{grid-template-columns:repeat(3,minmax(0,1fr));margin:24px 0}.article-grid a{display:inline-flex;margin-top:12px;color:#0b6277;font-weight:800;text-decoration:none;border-bottom:2px solid rgba(242,200,75,.85)}.studio-proof{margin:28px 0 0;display:grid;grid-template-columns:minmax(260px,520px) 1fr;gap:22px;align-items:end}.studio-proof img{width:100%;height:auto;border-radius:26px;box-shadow:0 25px 58px rgba(10,78,96,.18)}.studio-proof figcaption{font-weight:700;line-height:1.8;color:#184858}.site-footer p{max-width:1080px}.inner-hero h3{font-size:clamp(1.05rem,2vw,1.35rem);color:#0b6475}.tags-panel h4,.tags-panel h5,.tags-panel h6{margin:.45rem 0;color:#0c5367}
@media (max-width:980px){.eeat-grid,.product-grid,.article-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.studio-proof{grid-template-columns:1fr}}
@media (max-width:620px){.eeat-grid,.product-grid,.article-grid{grid-template-columns:1fr}.eeat-grid article,.product-grid article,.article-grid article{clip-path:none;border-radius:20px}.heading-ladder{clip-path:none;border-radius:20px}.studio-proof img{border-radius:20px}}