@import url('https://fonts.googleapis.com/css2?family=Cormorant+Infant:wght@300;400;500;600;700&family=Great+Vibes&display=swap');
*,*::before,*::after{box-sizing:border-box}
:root{
--violet:#6514ff;
--magenta:#bf00ff;
--ink:#1c1726;
--paper:#f5f1ff;
--cream:#fffdfa;
--soft:#ece6ff;
--serif:'Cormorant Infant','Songti SC','Noto Serif SC',Georgia,serif;
--sans:system-ui,-apple-system,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);font-size:17px;line-height:1.78;color:var(--ink);background:var(--cream);overflow-x:hidden}
body::before{content:"";position:fixed;inset:-25% -20% auto -20%;height:150vh;z-index:0;pointer-events:none;
background:
repeating-linear-gradient(118deg,rgba(101,20,255,.075) 0 2px,transparent 2px 28px),
radial-gradient(46% 38% at 18% 8%,rgba(191,0,255,.18),transparent 70%),
radial-gradient(42% 34% at 88% 0%,rgba(101,20,255,.16),transparent 72%);
animation:drift 28s linear infinite}
@keyframes drift{to{transform:translate3d(-70px,50px,0)}}
.topbar,.stage,.base,.copy{position:relative;z-index:1}
a{color:var(--violet)}
img{max-width:100%;height:auto;display:block}
menu{margin:0;padding:0;list-style:none}
.tick{display:inline-block;flex:none;width:9px;height:9px;background:var(--magenta);transform:rotate(45deg)}

/* 顶栏 */
.topbar{position:sticky;top:0;z-index:30;background:var(--ink);color:#fff;border-bottom:3px solid var(--magenta)}
.bar{max-width:1260px;margin:0 auto;padding:8px clamp(12px,3vw,24px);display:flex;flex-direction:column;gap:8px}
.split{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:4px}
.fold{position:relative;justify-self:start}
.fold-r{justify-self:end}
.fold summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 12px;
font-size:16px;color:#fff;border:2px solid transparent;transition:background .22s ease,border-color .22s ease}
.fold summary::-webkit-details-marker{display:none}
.fold summary:hover,.fold summary:focus-visible{background:var(--violet);border-color:var(--magenta)}
.fold[open]>summary{background:var(--violet);border-color:var(--magenta)}
.fold menu{position:absolute;top:100%;left:0;min-width:232px;padding:8px;background:var(--ink);
border:2px solid var(--magenta);border-top:0;display:grid;gap:2px;z-index:40}
.fold-r menu{left:auto;right:0}
.fold menu a{display:flex;align-items:center;gap:10px;min-height:44px;padding:10px 12px;color:#fff;text-decoration:none;font-size:16px;
transition:background .22s ease,color .22s ease}
.fold menu a:hover,.fold menu a:focus-visible{background:var(--violet)}
.mark{justify-self:center;display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:6px 10px;
color:#fff;text-decoration:none;font-family:var(--serif);font-size:17px;letter-spacing:.1em}
.mark-ico{width:30px;height:30px}
.mark-txt{white-space:nowrap}
.find{display:flex;border:2px solid rgba(255,255,255,.34)}
.find input{flex:1 1 auto;min-width:0;min-height:44px;padding:9px 12px;font-size:16px;font-family:inherit;
color:#fff;background:rgba(255,255,255,.07);border:0;outline:none}
.find input::placeholder{color:rgba(255,255,255,.62)}
.find input:focus{background:rgba(255,255,255,.15)}
.find button{min-height:44px;padding:0 16px;font-size:16px;font-family:inherit;font-weight:600;color:#fff;
background:var(--magenta);border:0;cursor:pointer;transition:background .22s ease}
.find button:hover{background:var(--violet)}

/* 版心 */
.stage{max-width:1260px;margin:0 auto;padding:0 clamp(16px,3vw,24px);display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.rail{border-bottom:3px solid var(--ink);padding:16px 0 18px;align-self:start}
.rail h2{margin:0 0 6px;font-family:var(--sans);font-size:14px;letter-spacing:.26em}
.rail hr{width:46px;height:6px;border:0;background:var(--violet);margin:0 0 12px}
.rail-list{display:flex;flex-wrap:wrap;gap:6px}
.rail-list a{display:flex;align-items:center;gap:8px;min-height:44px;padding:8px 12px;font-size:15.5px;
color:var(--ink);text-decoration:none;background:rgba(101,20,255,.08);transition:background .22s ease,color .22s ease}
.rail-list a b{font-family:var(--serif);font-weight:700;font-size:13px;letter-spacing:.06em;color:var(--magenta)}
.rail-list a:hover,.rail-list a:focus-visible{background:var(--violet);color:#fff}
.rail-list a:hover b,.rail-list a:focus-visible b{color:#fff}

/* 题头（h1 与双图拼贴） */
.mast{position:relative;overflow:hidden;background:var(--ink);color:#fff;
border-bottom:6px solid var(--magenta);
padding:clamp(30px,6vw,64px) 0 clamp(26px,4vw,44px)}
.mast::before{content:"";position:absolute;inset:-40% -20%;pointer-events:none;
background:repeating-linear-gradient(48deg,rgba(191,0,255,.2) 0 3px,transparent 3px 26px);
animation:slide 20s linear infinite}
@keyframes slide{to{transform:translate3d(-48px,48px,0)}}
.mast>*{position:relative;z-index:2}
.mast h1{color:#fff;margin:0;max-width:15ch;text-shadow:0 3px 0 rgba(28,23,38,.45)}
.hero-art{position:absolute;z-index:1;top:6%;right:0;width:44%;max-width:400px;pointer-events:none}
.hero-art .art{width:100%;box-shadow:16px 16px 0 rgba(101,20,255,.55)}
.hero-art .art-a{width:80%;margin-left:auto;transform:rotate(2.5deg)}
.hero-art .art-b{width:60%;margin:-30% 0 0 -12%;transform:rotate(-4deg)}

/* 正文 */
.doc{position:relative;min-width:0;padding-bottom:64px}
.doc>div{padding:56px 0;border-top:3px solid var(--ink);scroll-margin-top:132px}
.doc>div:first-of-type{border-top:0}
.doc h1{font-family:var(--serif);font-weight:700;font-size:clamp(36px,7vw,76px);line-height:1.05;letter-spacing:-.01em;margin:0 0 18px}
.doc h2{font-family:var(--serif);font-weight:700;font-size:clamp(26px,4vw,44px);line-height:1.18;margin:0 0 10px}
.doc h2+hr{width:66px;height:8px;border:0;background:var(--magenta);margin:0 0 22px}
.doc h3{font-family:var(--serif);font-weight:700;font-size:clamp(20px,2.6vw,27px);line-height:1.3;margin:30px 0 8px}
.doc p{margin:0 0 16px;max-width:64ch}
.doc ul,.doc ol{padding-left:22px;max-width:64ch}
.doc li{margin:6px 0}
.doc a{text-underline-offset:3px}
.doc strong{font-weight:700}
.doc blockquote{margin:24px 0;padding:14px 20px;border-left:8px solid var(--violet);background:rgba(101,20,255,.08)}
.doc img{margin:20px 0}
.doc table{width:100%;border-collapse:collapse;font-size:16px}
.doc th,.doc td{border-bottom:2px solid rgba(28,23,38,.2);padding:10px 8px;text-align:left}

/* 色块节奏 */
.doc>div:nth-of-type(2n){
background:var(--paper);
padding-inline:clamp(16px,3vw,32px);
margin-inline:calc(-1 * clamp(16px,3vw,32px))}
.doc>div:nth-of-type(3n){
background:var(--ink);color:#fff;
padding-inline:clamp(16px,3vw,32px);
margin-inline:calc(-1 * clamp(16px,3vw,32px))}
.doc>div:nth-of-type(3n) h2,.doc>div:nth-of-type(3n) h3{color:#fff}
.doc>div:nth-of-type(3n) h2+hr{background:var(--violet)}
.doc>div:nth-of-type(3n) a{color:#d8c6ff}
.doc>div:nth-of-type(3n) blockquote{border-left-color:var(--magenta);background:rgba(255,255,255,.08)}
.doc>div:nth-of-type(3n) th,.doc>div:nth-of-type(3n) td{border-bottom-color:rgba(255,255,255,.24)}

/* 首屏主段 */
.doc>div#home{
position:relative;overflow:hidden;border-top:0;
min-height:clamp(320px,68svh,660px);
display:flex;flex-direction:column;justify-content:center;
padding:56px 0 72px;color:#fff;
background:linear-gradient(142deg,var(--violet) 0%,var(--magenta) 54%,var(--ink) 100%);
padding-inline:clamp(16px,3vw,34px);
margin-inline:calc(-1 * clamp(16px,3vw,34px))}
.doc>div#home::before{content:"";position:absolute;inset:0;pointer-events:none;
background:repeating-linear-gradient(48deg,rgba(255,255,255,.085) 0 3px,transparent 3px 24px);
animation:slide 20s linear infinite}
.doc>div#home>*{position:relative;z-index:2;max-width:min(100%,600px)}
.doc>div#home h2{color:#fff;text-shadow:0 3px 0 rgba(28,23,38,.3)}
.doc>div#home p{color:rgba(255,255,255,.94);font-size:18px;max-width:52ch}
.doc>div#home a{color:#fff}

/* 页脚 */
.base{margin-top:64px;background:var(--ink);color:#fff;border-top:8px solid var(--magenta);
display:grid;grid-template-columns:minmax(0,1fr);gap:28px;padding:48px clamp(20px,6vw,72px) 36px}
.fmark{margin:0;font-family:var(--serif);font-weight:700;font-size:clamp(30px,6vw,52px);line-height:1.05;letter-spacing:.02em}
.base h3{margin:0 0 10px;font-family:var(--sans);font-size:14px;letter-spacing:.24em;color:#c3aaff}
.f2 menu{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.f2 a{display:inline-block;min-height:44px;padding:10px 0;color:#fff;text-decoration:none;font-size:16px;border-bottom:2px solid transparent}
.f2 a:hover,.f2 a:focus-visible{color:#e2d3ff;border-bottom-color:var(--magenta)}
.f3{display:flex;align-items:flex-start}
.up{display:inline-flex;align-items:center;min-height:48px;padding:12px 22px;background:var(--violet);color:#fff;
text-decoration:none;font-size:16px;font-weight:600;transition:background .22s ease,transform .22s ease}
.up:hover{background:var(--magenta);transform:translateY(-2px)}
.copy{position:relative;z-index:1;margin:0;padding:16px clamp(20px,6vw,72px) 30px;background:var(--ink);
color:rgba(255,255,255,.62);font-size:14px;border-top:2px solid rgba(255,255,255,.14)}

/* 动效 */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.8,.25,1)}
.js .rv.in{opacity:1;transform:none}
.js .doc li{opacity:0;transform:translateX(-12px);transition:opacity .38s ease,transform .38s ease}
.js .in li{opacity:1;transform:none}
.js .in li:nth-child(2){transition-delay:.05s}
.js .in li:nth-child(3){transition-delay:.1s}
.js .in li:nth-child(4){transition-delay:.15s}
.js .in li:nth-child(5){transition-delay:.2s}
.js .in li:nth-child(6){transition-delay:.25s}
.js .in li:nth-child(7){transition-delay:.3s}

@media (min-width:720px){
.bar{flex-direction:row;align-items:center;gap:20px}
.split{flex:1 1 auto;max-width:840px;margin:0 auto}
.find{flex:0 0 246px}
.mark{font-size:20px}
.mast{padding-right:45%}
.hero-art{top:14%}
.doc>div#home{padding-right:48%}
.base{grid-template-columns:1.4fr 1fr auto;align-items:start;gap:36px}
}
@media (min-width:940px){
.stage{grid-template-columns:236px minmax(0,1fr);gap:56px}
.rail{position:sticky;top:104px;border-bottom:0;border-left:3px solid var(--ink);padding:0 0 8px 16px}
.rail-list{flex-direction:column;flex-wrap:nowrap;gap:2px}
.doc>div{scroll-margin-top:110px}
}
@media (max-width:719px){
.hero-art{display:none}
.mark{font-size:16px;letter-spacing:.04em}
}
@media (prefers-reduced-motion:reduce){
*{animation:none!important;transition:none!important}
.js .rv,.js .doc li{opacity:1;transform:none}
html{scroll-behavior:auto}
}

button[aria-expanded]{min-width:44px;min-height:44px}