/* 自托管字体 · 按页面用字子集化 · font-display:swap 正文秒出 */
@font-face{font-family:'Noto Sans SC';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/noto-sans-sc-400.woff2) format('woff2')}
@font-face{font-family:'Noto Sans SC';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/noto-sans-sc-500.woff2) format('woff2')}
@font-face{font-family:'Noto Serif SC';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/noto-serif-sc-500.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/jetbrains-mono-400.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/jetbrains-mono-500.woff2) format('woff2')}


/* ========== 暖色设计令牌（Claude 风格） ========== */
:root{
  --parchment:#f5f4ed; --ivory:#faf9f5; --white:#ffffff; --sand:#e8e6dc;
  --dark:#30302e; --near-black:#141413;
  --charcoal:#4d4c48; --olive:#5e5d59; --stone:#87867f; --dark-warm:#3d3d3a; --silver:#b0aea5;
  --border-cream:#f0eee6; --border-warm:#e8e6dc; --ring-warm:#d1cfc5; --ring-deep:#c2c0b6;
  --terra:#c96442; --terra-deep:#b0532f; --coral:#d97757; --focus:#3898ec; --moss:#7d8c6f;
  --serif:"Noto Serif SC",Georgia,"Times New Roman",serif;
  --sans:"Noto Sans SC",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --mono:"JetBrains Mono",SFMono-Regular,Consolas,monospace;
  --ring:0 0 0 1px var(--ring-warm);
  --whisper:0 4px 24px rgba(0,0,0,.05);
  --whisper-dark:0 4px 24px rgba(0,0,0,.20);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* 触屏反馈: 压掉浏览器默认蓝色点击高亮, 以极淡按压透明度代替(全站可点元素); 按钮禁长按选中防蓝块 */
a:active,button:active{opacity:.72}
button{-webkit-user-select:none;user-select:none}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{font-family:var(--sans);background:var(--parchment);color:var(--near-black);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:rgba(201,100,66,.22)}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
section{scroll-margin-top:84px}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:var(--serif);font-weight:500}
h1{font-size:clamp(34px,4.8vw,64px);line-height:1.10}
h2{font-size:clamp(27px,3.4vw,52px);line-height:1.20;margin-bottom:14px}
h3{font-size:clamp(19px,1.5vw,25px);line-height:1.25}
.overline{display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:500;letter-spacing:.5px;text-transform:uppercase;color:var(--stone);margin-bottom:18px}
.overline::before{content:"";width:22px;height:1px;background:var(--terra)}
.on-dark .overline{color:var(--silver)}
.on-dark .overline::before{background:var(--coral)}
.lede{font-size:clamp(16px,1.3vw,20px);line-height:1.60;color:var(--olive);max-width:600px}
.on-dark .lede{color:var(--silver)}
.section{padding:88px 0}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:6px}
code,.mono{font-family:var(--mono)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:15px;font-weight:500;border-radius:12px;padding:10px 20px;min-height:44px;transition:transform .2s cubic-bezier(.16,1,.3,1),background .2s,color .2s,box-shadow .2s;white-space:nowrap}
.btn:active{transform:scale(.98)}
.btn-terra{background:var(--terra);color:var(--ivory);box-shadow:0 0 0 1px var(--terra),0 6px 18px rgba(201,100,66,.32)}
.btn-terra:hover{background:var(--terra-deep);box-shadow:0 0 0 1px var(--terra-deep),0 8px 22px rgba(176,83,47,.36);transform:translateY(-1px)}
.btn-sand{background:var(--sand);color:var(--charcoal);box-shadow:var(--ring);border-radius:8px}
.btn-sand:hover{box-shadow:0 0 0 1px var(--ring-deep);transform:translateY(-1px)}
.btn-white{background:var(--white);color:var(--near-black);box-shadow:var(--ring)}
.btn-white:hover{background:var(--parchment)}
.btn-sm{padding:8px 16px;font-size:14px;min-height:38px}

/* header */
header{position:sticky;top:0;z-index:60;background:rgba(245,244,237,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--border-cream)}
.nav{display:flex;align-items:center;gap:14px;height:64px}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-size:20px;flex:none}
.logo svg{width:24px;height:24px}
.logo .en{font-family:var(--mono);font-size:10.5px;letter-spacing:.6px;color:var(--stone);border-left:1px solid var(--border-warm);padding-left:10px;white-space:nowrap}
.nav-links{display:none;gap:2px;margin-left:10px}
.nav-links a.nav-console{color:var(--terra-deep);font-weight:600}
.nav-links a{font-size:15px;font-weight:500;color:var(--olive);padding:8px 12px;border-radius:8px;transition:.2s}
.nav-links a:hover{color:var(--near-black);background:var(--sand)}
.nav-cta{margin-left:auto;display:flex;align-items:center;gap:10px;flex:none}
.burger{width:42px;height:42px;border-radius:10px;box-shadow:var(--ring);display:flex;align-items:center;justify-content:center}
.burger i{width:16px;height:1.6px;background:var(--charcoal);position:relative}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;width:16px;height:1.6px;background:var(--charcoal)}
.burger i::before{top:-5px}.burger i::after{top:5px}
.m-panel{position:fixed;top:64px;left:0;right:0;z-index:59;background:var(--parchment);border-bottom:1px solid var(--border-warm);padding:14px 24px 22px;display:none;flex-direction:column}
.m-panel.open{display:flex}
.m-panel a{padding:13px 2px;border-bottom:1px solid var(--border-cream);font-size:16px;font-weight:500;color:var(--dark-warm)}

/* hero */
.hero{padding:60px 0 56px}
.hero-grid{display:grid;gap:44px;align-items:center}
.hero h1{margin:4px 0 18px}
.hero h1 em{font-style:normal;color:var(--terra)}
.hero-slogan{font-family:var(--serif);font-size:16px;letter-spacing:.08em;color:var(--dark-warm);margin-bottom:12px}
.hero-slogan i{font-style:normal;color:var(--terra)}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin:28px 0 14px}
.hero-note{font-size:13px;color:var(--stone)}
.hero-reverse{font-size:12px;color:var(--silver);margin-top:8px}
.hero-note code{font-size:12px;background:var(--sand);box-shadow:0 0 0 1px var(--border-warm);border-radius:6px;padding:2px 7px;color:var(--dark-warm);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.hero-art{display:flex;justify-content:center}
.hero-art svg{width:100%;max-width:520px;height:auto;overflow:visible}
.float-a{animation:floatA 7s ease-in-out infinite alternate}
@keyframes floatA{from{transform:translateY(-6px)}to{transform:translateY(8px)}}
.ray{stroke-dasharray:5 9;animation:rayflow 12s ease-in-out infinite}
@keyframes rayflow{0%{stroke-dashoffset:0}50%{stroke-dashoffset:-28}100%{stroke-dashoffset:0}}
.providers{border-top:1px solid var(--border-warm);border-bottom:1px solid var(--border-warm);background:var(--ivory);overflow:hidden}
.providers .wrap{display:flex;flex-wrap:wrap;justify-content:center;padding:0}
.pv{font-family:var(--serif);font-size:15.5px;color:var(--olive);padding:18px 22px;border-left:1px solid var(--border-cream);white-space:nowrap;transition:color .2s}
.pv:first-child{border-left:none}
.pv:hover{color:var(--terra-deep)}
.pv small{display:block;font-family:var(--mono);font-size:10px;color:var(--stone);letter-spacing:.4px;margin-top:2px}

/* stats */
.band{background:var(--near-black);color:var(--ivory)}
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.stat{padding:32px 20px;border-left:1px solid var(--dark)}
.stat:nth-child(odd){border-left:none}
.stat .n{font-family:var(--serif);font-size:clamp(28px,3vw,44px);line-height:1.1}
.stat .n em{font-style:normal;color:var(--coral);font-size:.5em;margin-left:4px}
.stat .l{margin-top:8px;font-size:13px;color:var(--silver)}

/* features */
.f-grid{display:grid;gap:16px;margin-top:36px}
.card{background:var(--ivory);border:1px solid var(--border-cream);border-radius:8px;padding:26px;transition:box-shadow .25s,transform .25s}
.card:hover{box-shadow:var(--ring),var(--whisper);transform:translateY(-2px)}
.card .ic{width:42px;height:42px;border-radius:12px;background:var(--sand);box-shadow:var(--ring);display:flex;align-items:center;justify-content:center;color:var(--terra-deep);margin-bottom:16px}
.card .ic svg{width:20px;height:20px}
.card h3{font-size:20px;margin-bottom:8px}
.card p{font-size:14.5px;color:var(--olive);line-height:1.7}
.card .tag{display:inline-block;margin-top:14px;font-family:var(--mono);font-size:11px;color:var(--terra-deep);background:rgba(201,100,66,.08);border-radius:6px;padding:4px 9px}

/* story */
.story{background:var(--near-black);color:var(--silver)}
.acts{display:grid;gap:26px;margin-top:40px}
.act{display:grid;gap:18px;grid-template-columns:1fr;background:var(--dark);border-radius:12px;box-shadow:0 0 0 1px var(--charcoal);padding:28px 24px}
.act .doodle{display:flex;justify-content:center}
.act .doodle svg{width:130px;height:96px;overflow:visible}
.act .no{font-family:var(--mono);font-size:11px;letter-spacing:1px;color:var(--coral);display:block;margin-bottom:10px}
.act h3{color:var(--ivory);margin-bottom:10px}
.act p{font-family:var(--serif);font-size:16px;line-height:1.70}
.act p b{color:var(--ivory);font-weight:500}
.story-end{margin-top:44px;border-left:2px solid var(--coral);padding:6px 0 6px 24px}
.story-end .q{font-family:var(--serif);font-size:clamp(20px,2.6vw,32px);line-height:1.4;color:var(--ivory)}
.story-end .s{display:block;margin-top:12px;font-size:13px;color:var(--stone)}
.story-end .ps{display:block;margin-top:8px;font-size:12.5px;color:var(--stone);opacity:.85}

/* access */
.access{background:var(--ivory);border-top:1px solid var(--border-cream);border-bottom:1px solid var(--border-cream)}
.steps{display:grid;gap:14px;margin:30px 0 20px}
.step{display:flex;gap:16px;background:var(--white);border:1px solid var(--border-warm);border-radius:8px;padding:20px}
.step .n{font-family:var(--serif);font-size:22px;color:var(--terra);min-width:34px}
.step b{font-family:var(--serif);font-weight:500;font-size:17px;display:block;margin-bottom:4px}
.step p{font-size:14px;color:var(--olive)}
.code{background:var(--near-black);border-radius:16px;overflow:hidden;box-shadow:var(--whisper-dark)}
.code-bar{display:flex;gap:6px;align-items:center;padding:10px 12px;border-bottom:1px solid var(--dark);flex-wrap:wrap}
.tab{font-family:var(--mono);font-size:12.5px;color:var(--silver);padding:6px 14px;border-radius:999px;border:1px solid transparent;transition:.25s}
.tab.active{background:rgba(201,100,66,.22);border-color:rgba(201,100,66,.5);color:var(--coral)}
.copy{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--silver);border:1px solid var(--dark);border-radius:999px;padding:5px 13px;transition:.25s}
.copy.done{color:#a8bd97;border-color:rgba(125,140,111,.5)}
.code pre{display:none;max-width:100%;padding:18px;font-family:var(--mono);font-size:12.5px;line-height:1.9;color:#d8d3c4;overflow-x:auto}
.code pre.active{display:block;animation:fadeUp .45s cubic-bezier(.16,1,.3,1)}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.k{color:#e0926f}.s2{color:#a3b182}.c2{color:#6f6b60;font-style:italic}

/* live demo（今日诗词 · API 实时响应小样，从属于代码示例） */
.live-demo{margin-top:20px;background:var(--white);border:1px solid var(--border-warm);border-radius:12px;padding:20px 22px}
.ld-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.ld-live{font-family:var(--mono);font-size:10.5px;letter-spacing:.6px;color:#5f7350;background:rgba(125,140,111,.14);box-shadow:0 0 0 1px rgba(125,140,111,.35);border-radius:999px;padding:3px 10px;display:inline-flex;align-items:center;gap:6px}
.ld-live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--moss);animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(125,140,111,.4)}50%{opacity:.6;box-shadow:0 0 0 4px rgba(125,140,111,0)}}
.ld-title{font-family:var(--serif);font-size:16px;color:var(--near-black)}
.ld-endpoint{font-size:11px;color:var(--stone);margin-left:auto}
.ld-poem{font-family:var(--serif);font-size:clamp(17px,2vw,21px);color:var(--dark-warm);line-height:1.6;min-height:1.7em}
.ld-poem .caret{display:inline-block;width:6px;height:1em;background:var(--terra);vertical-align:-2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.ld-src{font-size:12.5px;color:var(--stone);margin-top:6px;min-height:1.4em}
.ld-foot{display:flex;align-items:center;gap:12px;margin-top:14px;flex-wrap:wrap}
.ld-status{font-size:11px;color:#5f7350}
.ld-foot .btn{margin-left:auto}
.ld-note{margin-top:12px;font-size:11.5px;color:var(--stone);border-top:1px dashed var(--border-warm);padding-top:10px}
.ld-note a{color:var(--terra);border-bottom:1px solid rgba(201,100,66,.4)}

/* billing */
.billing{background:var(--near-black);color:var(--silver)}
.pool{margin-top:36px;background:var(--dark);border-radius:12px;box-shadow:0 0 0 1px var(--charcoal);padding:26px 28px;display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.pool .rate{font-family:var(--serif);font-size:clamp(22px,4vw,30px);color:var(--coral);white-space:nowrap}
.pool .rate small{display:block;font-family:var(--mono);font-size:10px;letter-spacing:2.5px;color:var(--stone);margin-top:6px}
.pool p{flex:1;min-width:260px;font-size:14px;line-height:1.8;color:var(--silver)}
.money{display:grid;gap:16px;margin-top:36px}
.m-card{background:var(--dark);border-radius:12px;box-shadow:0 0 0 1px var(--charcoal);padding:26px;transition:transform .25s}
.m-card:hover{transform:translateY(-2px)}
.m-card .idx{font-family:var(--serif);font-size:15px;color:var(--coral);display:block;margin-bottom:10px}
.m-card h3{font-size:20px;color:var(--ivory);margin-bottom:8px}
.m-card p{font-size:14px;line-height:1.7}
.guarantee{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.guarantee span{font-size:13px;color:var(--ivory);border:1px solid var(--charcoal);border-radius:999px;padding:8px 16px;display:inline-flex;align-items:center;gap:8px}
.guarantee span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--coral)}

/* faq */
.faq{max-width:780px;margin:30px auto 0}
.qa{border-top:1px solid var(--border-warm)}
.qa:last-child{border-bottom:1px solid var(--border-warm)}
.qa button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 2px;text-align:left;font-family:var(--serif);font-size:clamp(16px,2vw,20px)}
.qa .pm{flex:none;width:30px;height:30px;border-radius:50%;box-shadow:var(--ring);position:relative;transition:.3s}
.qa .pm::before,.qa .pm::after{content:"";position:absolute;top:50%;left:50%;background:var(--charcoal);transition:.3s}
.qa .pm::before{width:11px;height:1.5px;transform:translate(-50%,-50%)}
.qa .pm::after{width:1.5px;height:11px;transform:translate(-50%,-50%)}
.qa.open .pm{background:var(--terra);box-shadow:0 0 0 1px var(--terra)}
.qa.open .pm::before,.qa.open .pm::after{background:var(--ivory)}
.qa.open .pm::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.qa .a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s}
.qa.open .a{grid-template-rows:1fr}
.qa .a>div{overflow:hidden}
.qa .a p{padding:0 44px 20px 2px;color:var(--olive);font-size:14.5px;line-height:1.8}
.qa .a code{font-size:12.5px;background:var(--sand);border-radius:6px;padding:2px 6px;color:var(--dark-warm)}

/* 星球卡 */
.star-sec{padding:26px 0 84px}
.star-card{position:relative;background:var(--near-black);border-radius:32px;padding:clamp(36px,6vw,72px);overflow:hidden;color:var(--ivory);box-shadow:var(--whisper-dark)}
.star-card .overline,.star-card h2,.star-card p,.star-card .btn{position:relative;z-index:2}
.star-card h2{font-size:clamp(28px,4.6vw,56px);line-height:1.15;max-width:560px;color:var(--ivory)}
.star-card h2 em{font-style:normal;color:var(--coral)}
.star-card p{color:var(--silver);max-width:440px;margin:14px 0 30px;font-size:clamp(14px,1.5vw,17px)}
.planet{position:absolute;right:-14%;top:6%;width:min(62%,460px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 32% 28%,#e0906b,#c96442 45%,#8f4527 78%,#6d341d);box-shadow:0 0 90px rgba(201,100,66,.35)}
.planet::before{content:"";position:absolute;width:26%;height:26%;left:22%;top:30%;border-radius:50%;background:rgba(255,240,225,.16)}
.orbit{position:absolute;border:1px solid rgba(240,235,225,.14);border-radius:50%}
.o1{width:130%;height:58%;right:-42%;top:22%;transform:rotate(-14deg)}
.o2{width:162%;height:80%;right:-58%;top:34%;transform:rotate(-10deg)}
.prism-mark{position:absolute;right:6%;bottom:10%;z-index:2;opacity:.9}
.sp{position:absolute;width:3px;height:3px;border-radius:50%;background:rgba(240,235,225,.5);pointer-events:none}
.beam{position:absolute;left:-4%;top:38%;width:60%;height:2px;background:linear-gradient(90deg,transparent,rgba(240,235,225,.5));z-index:1}

/* footer */
footer{background:var(--near-black);color:var(--silver);border-top:1px solid var(--dark);padding:56px 0 30px}
.f-grid2{display:grid;gap:30px}
.f-brand p{font-size:13.5px;color:var(--stone);margin-top:12px;max-width:280px;line-height:1.7}
.f-brand .slogan{font-family:var(--serif);color:var(--silver);font-size:15px;margin-top:14px}
.f-col h4{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.8px;text-transform:uppercase;color:var(--ivory);margin-bottom:12px}
.f-col a{display:block;font-size:13.5px;color:var(--stone);padding:4px 0;transition:color .2s}
.f-col a:hover{color:var(--coral)}
.f-bot{margin-top:40px;border-top:1px solid var(--dark);padding-top:20px;display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;font-size:12px;color:var(--stone)}

html.js .rv{opacity:0;transform:translateY(18px);transition:opacity .7s,transform .7s}
html.js .rv.in{opacity:1;transform:none}

@media (min-width:640px){
  .stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .stat:nth-child(odd){border-left:1px solid var(--dark)}
  .stat:nth-child(3n+1){border-left:none}
  .f-grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(3,1fr)}
  .step{flex-direction:column;gap:10px}
  .money{grid-template-columns:repeat(3,1fr)}
  .f-grid2{grid-template-columns:repeat(2,1fr)}
  .act{grid-template-columns:150px 1fr;align-items:center;gap:26px}
}
@media (min-width:768px){.section{padding:104px 0}}
@media (min-width:992px){
  .nav-links{display:flex}
  .burger{display:none}
  .m-panel{display:none!important}
  .hero{padding:84px 0 72px}
  .hero-grid{grid-template-columns:1.02fr .98fr;gap:56px}
  .f-grid{grid-template-columns:repeat(3,1fr)}
  .stats{grid-template-columns:repeat(6,minmax(0,1fr))}
  .stat{border-left:1px solid var(--dark)}
  .stat:first-child{border-left:none}
  .f-grid2{grid-template-columns:1.5fr repeat(3,1fr)}
  .section{padding:112px 0}
  .acts{gap:22px}
}
html.mq-broken .nav-links{display:flex}
html.mq-broken .burger{display:none}
html.mq-broken .m-panel{display:none!important}
html.mq-broken .hero-grid{grid-template-columns:1.02fr .98fr}
html.mq-broken .f-grid{grid-template-columns:repeat(3,1fr)}
html.mq-broken .stats{grid-template-columns:repeat(6,minmax(0,1fr))}
html.mq-broken .steps,html.mq-broken .money{grid-template-columns:repeat(3,1fr)}
@media (max-width:640px){.planet{opacity:.38;box-shadow:none}.providers .wrap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.pv{border-left:none;text-align:center;justify-self:center}}
@media (max-width:480px){.stat .n{font-size:26px}.stat .l{font-size:12px}.logo .en{display:none}}
html.mq-broken .act{grid-template-columns:150px 1fr}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html.js .rv{opacity:1;transform:none}}

/* i18n lang switcher */
.lang{display:flex;gap:2px;margin-left:2px}
.lang button{font-family:var(--mono);font-size:12px;letter-spacing:.5px;border:none;background:none;color:var(--stone);cursor:pointer;padding:7px 9px;border-radius:8px;transition:.2s}
.lang button:hover{color:var(--near-black);background:var(--sand)}
.lang button.on{color:var(--terra-deep);background:rgba(201,100,66,.1)}
@media (max-width:640px){.lang button{padding:9px 11px;font-size:13px}}
/* console modal */
.cmodal{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;background:rgba(20,20,19,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:20px;visibility:hidden;opacity:0;pointer-events:none;transition:opacity .22s ease,visibility 0s linear .22s}
.cmodal.open{visibility:visible;opacity:1;pointer-events:auto;transition:opacity .22s ease}
.cm-card{position:relative;width:100%;max-width:400px;background:var(--white);border:1px solid var(--border-warm);border-radius:18px;box-shadow:var(--whisper-dark);padding:34px 30px 28px;max-height:88vh;overflow-y:auto;transform:translateY(14px) scale(.97);transition:transform .26s cubic-bezier(.22,1,.36,1)}
.cmodal.open .cm-card{transform:none}
.cm-card,.cm-tabs button,.cm-submit,.cm-close{-webkit-tap-highlight-color:transparent}
.cm-tabs button{-webkit-user-select:none;user-select:none}
.cm-close{position:absolute;top:14px;right:14px;width:34px;height:34px;border:none;background:var(--ivory);border-radius:10px;font-size:18px;color:var(--stone);cursor:pointer;line-height:1}
.cm-close:hover{color:var(--terra-deep);background:var(--sand)}
.cm-overline{font-family:var(--mono);font-size:11px;letter-spacing:2px;color:var(--terra);font-weight:600}
.cm-title{font-family:var(--serif);font-size:28px;font-weight:500;margin:8px 0 6px;color:var(--near-black)}
.cm-sub{font-size:14px;color:var(--olive);line-height:1.6;margin-bottom:14px}
.cm-beta{background:var(--ivory);border:1px dashed var(--ring-warm);border-radius:10px;padding:9px 12px;font-size:12.5px;color:var(--stone);line-height:1.55;margin-bottom:16px}
.cm-tabs{display:flex;background:var(--parchment);border:1px solid var(--border-warm);border-radius:10px;padding:3px;margin-bottom:16px}
.cm-tabs button{flex:1;border:none;background:none;font-family:var(--sans);font-size:14px;font-weight:500;color:var(--stone);padding:9px 0;border-radius:8px;cursor:pointer;transition:.2s}
.cm-tabs button.on{background:var(--white);color:var(--terra-deep);box-shadow:0 1px 4px rgba(0,0,0,.06)}
#cmForm{display:flex;flex-direction:column;gap:13px}
#cmForm label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:500;color:var(--charcoal)}
#cmForm input{font-family:var(--sans);font-size:15px;color:var(--dark);background:var(--ivory);border:1px solid var(--border-warm);border-radius:10px;padding:11px 13px;outline:none;transition:.2s;width:100%}
#cmForm input:focus{border-color:var(--terra);box-shadow:0 0 0 3px rgba(201,100,66,.12)}
.cm-submit{margin-top:4px;border:none;cursor:pointer;font-family:var(--sans);font-size:15px;font-weight:600;color:#fff;background:var(--terra);border-radius:10px;padding:12px 0;transition:.2s;box-shadow:0 6px 16px rgba(201,100,66,.35)}
.cm-submit:hover{background:var(--terra-deep)}
.cm-toast{margin-top:14px;background:var(--ivory);border:1px solid var(--border-warm);border-radius:10px;padding:10px 12px;font-size:13px;color:var(--terra-deep);text-align:center;opacity:0;transform:translateY(4px);transition:.25s;pointer-events:none}
.cm-toast.show{opacity:1;transform:none}
@media (max-width:480px){.cm-card{padding:26px 20px 22px}}

/* ==========================================================================
   折光 Refract · 动效增强层（全部增量，不改基准配色/版式）
   ========================================================================== */

/* ---- 舞台容器 ---- */
.prism-stage{position:relative;width:100%;max-width:520px}
.fx-canvas{display:block;position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.star-stage{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}

/* ---- 档位可见性：GL 档由 WebGL 接管全部元素；2D 档由 Canvas 画光束/光路，棱镜留基准 SVG ---- */
html[data-fx-prism="gl"] .fx-beam,
html[data-fx-prism="gl"] .ray,
html[data-fx-prism="gl"] .fx-dots{visibility:hidden}
html[data-fx-prism="2d"] .fx-beam,
html[data-fx-prism="2d"] .ray,
html[data-fx-prism="2d"] .fx-dots{visibility:hidden}

/* 各档：棱镜线稿保留基准浮动；2D/CSS 档再加呼吸高光 */
html[data-fx-prism="2d"] .fx-prism,
html[data-fx-prism="css"] .fx-prism{animation:floatA 7s ease-in-out infinite alternate,prismGlow 4.6s ease-in-out infinite}
/* 承接脉冲: 光晕峰值对齐入射光抵达时刻(beamrun 4.6s×~26%≈1.2s), "请求被接收"有物理时刻 */
@keyframes prismGlow{0%,100%{filter:drop-shadow(0 0 0 rgba(201,100,66,0))}22%{filter:drop-shadow(0 0 0 rgba(201,100,66,0))}30%{filter:drop-shadow(0 0 14px rgba(201,100,66,.42))}48%{filter:drop-shadow(0 0 4px rgba(201,100,66,.12))}70%{filter:drop-shadow(0 0 0 rgba(201,100,66,0))}}
/* CSS 档：光束与光路加呼吸（基准已有 rayflow 流动，此处补呼吸） */
html[data-fx-prism="css"] .fx-beam{animation:beamBreath 3.4s ease-in-out infinite}
html[data-fx-prism="css"] .ray{animation:rayflow 12s ease-in-out infinite,rayBreath 3.8s ease-in-out infinite}
@keyframes beamBreath{0%,100%{opacity:.65}50%{opacity:1}}
@keyframes rayBreath{0%,100%{opacity:.7}50%{opacity:1}}
html[data-fx-prism="css"] .fx-dots circle{animation:dotBreath 2.6s ease-in-out infinite}
html[data-fx-prism="css"] .fx-dots circle:nth-child(2){animation-delay:.3s}
html[data-fx-prism="css"] .fx-dots circle:nth-child(3){animation-delay:.6s}
html[data-fx-prism="css"] .fx-dots circle:nth-child(4){animation-delay:.9s}
html[data-fx-prism="css"] .fx-dots circle:nth-child(5){animation-delay:1.2s}
html[data-fx-prism="css"] .fx-dots circle:nth-child(6){animation-delay:1.5s}
@keyframes dotBreath{0%,100%{opacity:.5}50%{opacity:1}}

/* ---- 星球卡：CSS 档（自转 + 星光闪烁 + 光束呼吸） ---- */
html[data-fx-star="gl"] .planet,
html[data-fx-star="gl"] .orbit,
html[data-fx-star="gl"] .sp,
html[data-fx-star="gl"] .beam,
html[data-fx-star="2d"] .planet,
html[data-fx-star="2d"] .orbit,
html[data-fx-star="2d"] .sp,
html[data-fx-star="2d"] .beam{visibility:hidden}
/* CSS 档：星球自转（表面纹理层旋转，24s/周） */
html[data-fx-star="css"] .planet::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:repeating-linear-gradient(105deg,rgba(255,222,192,.14) 0 12px,rgba(255,222,192,0) 12px 26px,rgba(70,30,12,.10) 26px 34px,rgba(70,30,12,0) 34px 52px);
  mix-blend-mode:overlay;animation:planetSpin 24s linear infinite}
@keyframes planetSpin{to{transform:rotate(360deg)}}
html[data-fx-star="css"] .sp{animation:spTwinkle 3.2s ease-in-out infinite}
html[data-fx-star="css"] .sp:nth-of-type(odd){animation-delay:1.1s}
html[data-fx-star="css"] .sp:nth-of-type(3n){animation-delay:2s}
@keyframes spTwinkle{0%,100%{opacity:.25}50%{opacity:.95}}
html[data-fx-star="css"] .beam{animation:beamBreath 3.4s ease-in-out infinite}
html[data-fx-star="css"] .orbit{animation:orbitBreath 5s ease-in-out infinite}
html[data-fx-star="css"] .o2{animation-delay:2.2s}
@keyframes orbitBreath{0%,100%{opacity:.6}50%{opacity:1}}

/* ---- Stats 数字：count-up 到达时弹跳 + 发光 ---- */
.count{display:inline-block}
.count.done{animation:countPop .55s cubic-bezier(.34,1.56,.64,1)}
@keyframes countPop{0%{transform:scale(1)}35%{transform:scale(1.16);text-shadow:0 0 22px rgba(217,119,87,.7)}100%{transform:scale(1);text-shadow:none}}

/* ---- 六诺卡片：图标呼吸 ---- */
.card .ic svg{animation:icBreathe 3.8s ease-in-out infinite}
@keyframes icBreathe{0%,100%{transform:scale(1);opacity:.82}50%{transform:scale(1.09);opacity:1}}
.card:hover .ic svg{animation-duration:1.6s}

/* ---- 品牌故事三幕：逐行 reveal ---- */
html.js .act .no,html.js .act h3,html.js .act p{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s cubic-bezier(.16,1,.3,1)}
html.js .act.in .no{opacity:1;transform:none;transition-delay:.06s}
html.js .act.in h3{opacity:1;transform:none;transition-delay:.18s}
html.js .act.in p{opacity:1;transform:none;transition-delay:.32s}
html.js .act.in .doodle svg{animation:doodleGlow 4s ease-in-out infinite}
@keyframes doodleGlow{0%,100%{filter:drop-shadow(0 0 0 rgba(217,119,87,0))}50%{filter:drop-shadow(0 0 8px rgba(217,119,87,.45))}}

/* ---- 代码接入区：常驻微光描边 + Tab 切换发光脉冲 ---- */
.code{box-shadow:var(--whisper-dark),0 0 0 1px rgba(201,100,66,.10)}
.code.flash{animation:codeFlash .7s cubic-bezier(.16,1,.3,1)}
@keyframes codeFlash{0%{box-shadow:0 0 0 2px rgba(217,119,87,.6),0 0 44px rgba(201,100,66,.35),var(--whisper-dark)}100%{box-shadow:var(--whisper-dark),0 0 0 1px rgba(201,100,66,.10)}}

/* ---- 诗词 demo：打字时诗句带光 ---- */
.ld-poem #poemLine{transition:text-shadow .45s ease}
.ld-poem.typing #poemLine{text-shadow:0 0 16px rgba(201,100,66,.38)}

/* ---- 流明三步：入视口时步骤号光效 ---- */
html.js .step.in .n{animation:stepPop .85s cubic-bezier(.16,1,.3,1) .12s}
@keyframes stepPop{0%{transform:rotate(0) scale(1);text-shadow:none}38%{transform:rotate(-9deg) scale(1.22);text-shadow:0 0 18px rgba(201,100,66,.85)}100%{transform:none;text-shadow:none}}

/* ---- 可访问性：reduced-motion 下一切新增动效归零（沿用基准全局规则，双保险） ---- */
@media (prefers-reduced-motion:reduce){
  .count.done,.card .ic svg,.code.flash,html.js .step.in .n,
  html[data-fx-prism] .fx-prism,html[data-fx-prism] .fx-beam,html[data-fx-prism] .ray,
  html[data-fx-prism] .fx-dots circle,html[data-fx-star] .sp,html[data-fx-star] .beam,
  html[data-fx-star] .orbit,html.js .act.in .doodle svg{animation:none!important}
  html.js .act .no,html.js .act h3,html.js .act p{opacity:1;transform:none;transition:none}
}

/* ---- Static 兜底档（含 ?fx=static 手动强制）：一切特效静止 ---- */
html[data-fx-prism="static"] .fx-prism,
html[data-fx-prism="static"] .fx-beam,
html[data-fx-prism="static"] .ray,
html[data-fx-prism="static"] .fx-dots circle,
html[data-fx-star="static"] .sp,
html[data-fx-star="static"] .beam,
html[data-fx-star="static"] .orbit{animation:none!important}
html[data-fx-star="static"] .planet::after{content:none}

/* ---- 矢量光效层：沿光路旅行的高光（基准 SVG 承担棱镜动效） ---- */
.fx-spark{fill:none;stroke-width:4.5;stroke-linecap:round;stroke-dasharray:16 400;stroke-dashoffset:0;opacity:.9;animation:sparkrun 3.8s cubic-bezier(.4,0,.6,1) infinite}
@keyframes sparkrun{0%{stroke-dashoffset:0;opacity:0}8%{opacity:.9}85%{opacity:.9}100%{stroke-dashoffset:-416;opacity:0}}
.fx-spark-beam{fill:none;stroke-width:3;stroke-linecap:round;stroke-dasharray:20 260;stroke-dashoffset:0;opacity:0;animation:beamrun 4.6s cubic-bezier(.4,0,.6,1) infinite}
@keyframes beamrun{0%{stroke-dashoffset:0;opacity:0}10%{opacity:.45}80%{opacity:.45}100%{stroke-dashoffset:-280;opacity:0}}
/* 端点呼吸：六色圆点错峰明暗 */
html[data-fx-prism="css"] .fx-dots circle{animation:dotbreath 3s ease-in-out infinite}
html[data-fx-prism="css"] .fx-dots circle:nth-child(2){animation-delay:.5s}
html[data-fx-prism="css"] .fx-dots circle:nth-child(3){animation-delay:1s}
html[data-fx-prism="css"] .fx-dots circle:nth-child(4){animation-delay:1.5s}
html[data-fx-prism="css"] .fx-dots circle:nth-child(5){animation-delay:2s}
html[data-fx-prism="css"] .fx-dots circle:nth-child(6){animation-delay:2.5s}
@keyframes dotbreath{0%,100%{opacity:1}50%{opacity:.5}}
/* 棱镜承接脉冲: 描边微胀(fable5)+高光线提亮, 与入射光 4.6s 同步; 挂内层不动 floatA 的 transform */
html[data-fx-prism="css"] .fx-prism-body{animation:prismPulse 4.6s ease-in-out infinite}
@keyframes prismPulse{0%,100%{stroke-width:3}24%{stroke-width:3}28%{stroke-width:3.5}36%{stroke-width:3.1}44%{stroke-width:3}}
html[data-fx-prism="css"] .fx-prism-hl{animation:prismHl 4.6s ease-in-out infinite}
@keyframes prismHl{0%,100%{opacity:.35}26%{opacity:.7}40%{opacity:.42}55%{opacity:.35}}
/* 六路速度分层(fable5): 快速组锐利/稳健组标准/深思组绵长, easing 各配一档 */
.fx-spark-f1{stroke-dasharray:12 400;animation-duration:3.2s;animation-timing-function:cubic-bezier(.22,1,.36,1)}
.fx-spark-f2{animation-duration:3.8s;animation-timing-function:cubic-bezier(.42,0,.58,1)}
.fx-spark-f3{stroke-dasharray:20 400;animation-duration:4.4s;animation-timing-function:cubic-bezier(.65,0,.35,1)}
/* 端点确认 ping(GPT-5.6): 圆环扩散淡出, 错峰 0.45s, 与旅行光抵达时刻对齐 */
.fx-ping{fill:none;stroke-width:1.5;opacity:0;animation:endpointPing 4.6s ease-out infinite}
@keyframes endpointPing{0%{r:5;opacity:0}24%{r:5;opacity:0}27%{r:5.5;opacity:.5}38%{r:9;opacity:0}100%{r:9;opacity:0}}
/* 静态档：旅行光停摆 */
html[data-fx-prism="static"] .fx-sparks{display:none}
html[data-fx-prism="static"] .fx-pings{display:none}