*{margin:0;box-sizing:border-box}
:root{--a:#ff7eb6;--a2:#ffb3d1;--ink:#5b4a56;--mut:#9b8a96}
body{font-family:"Yuanti SC","YouYuan","幼圆","Microsoft YaHei",sans-serif;color:var(--ink);background:linear-gradient(160deg,#fff0f6,#f3efff 60%,#e8f7ff);min-height:100vh;display:flex;flex-direction:column}
body.mc{--a:#5cb85c;--a2:#a5d6a7;background:linear-gradient(160deg,#f0fff4,#e8f7ff 60%,#fff0f6)}
a{color:var(--a);text-decoration:none}
.nav{position:sticky;top:0;display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;align-items:center;padding:14px 6vw;background:#ffffffcc;backdrop-filter:blur(8px);box-shadow:0 2px 12px #ff7eb622;z-index:9}
.logo{font-size:22px;font-weight:800;color:var(--ink)}
.logo span,.hero h1 span{color:var(--a)}
.nav nav{display:flex;gap:6px}
.nav nav a{padding:6px 14px;border-radius:999px;color:var(--ink);font-weight:600}
.nav nav a:hover,.nav nav a[aria-current]{background:var(--a);color:#fff}
main{flex:1;width:min(960px,92vw);margin:0 auto;padding:32px 0 48px}
.hero{text-align:center;padding:48px 0 32px;position:relative}
.hero h1{font-size:clamp(36px,7vw,60px);letter-spacing:2px}
.slogan{font-size:clamp(16px,3vw,22px);margin-top:10px;font-weight:700}
.sub{color:var(--mut);margin-top:8px}
.hero:before,.hero:after{content:"✦";position:absolute;color:var(--a2);font-size:28px;animation:float 3s ease-in-out infinite}
.hero:before{left:12%;top:20px}
.hero:after{right:12%;top:60px;animation-delay:1.5s}
@keyframes float{50%{transform:translateY(-10px)}}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin:24px 0}
.card{background:#fff;border-radius:22px;padding:28px;box-shadow:0 8px 24px #ff7eb61f;border:2px solid transparent;transition:.2s;color:var(--ink)}
.card:hover{transform:translateY(-5px);border-color:var(--a2)}
.card h2{color:var(--a);margin-bottom:8px}
.card p{color:var(--mut);line-height:1.7}
.go{display:inline-block;margin-top:14px;font-weight:700;color:var(--a)}
.feats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px;text-align:center;margin-top:28px}
.feats div{background:#ffffffaa;border-radius:16px;padding:18px}
.feats b{color:var(--a);font-size:18px}
.feats p{color:var(--mut);font-size:14px;margin-top:6px}
h2.sec{margin:36px 0 14px;font-size:22px}
h2.sec:before{content:"♡ ";color:var(--a)}
.ep{display:flex;flex-wrap:wrap;align-items:center;gap:10px;background:#fff;border-radius:16px;padding:14px 18px;margin-bottom:12px;box-shadow:0 4px 14px #0000000d}
.ep .name{font-weight:700;min-width:170px}
.ep code,.note code{background:#fff0f6;color:var(--a);padding:3px 9px;border-radius:8px;font-size:14px}
body.mc .ep code,body.mc .note code{background:#f0fff4}
.btn{border:0;cursor:pointer;background:var(--a);color:#fff;padding:7px 16px;border-radius:999px;font-size:14px;font-weight:700;font-family:inherit;transition:.15s;display:inline-block}
.btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn.ghost{background:#fff;color:var(--a);border:2px solid var(--a2)}
.btn:disabled{opacity:.5;cursor:wait}
.note{color:var(--mut);font-size:13px;line-height:1.9}
.tester{background:#fff;border-radius:22px;padding:22px;box-shadow:0 8px 24px #ff7eb61f}
.tabs{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.view{display:flex;align-items:center;justify-content:center;min-height:260px;background:#faf7fb;border:2px dashed var(--a2);border-radius:16px;overflow:hidden}
.view img{max-width:100%;max-height:420px;display:block}
.view .ph{color:var(--mut);padding:40px;text-align:center}
.out{display:flex;gap:8px;align-items:center;margin-top:12px;flex-wrap:wrap}
.out code{flex:1;min-width:200px;background:#faf7fb;border-radius:8px;padding:8px 10px;font-size:12px;word-break:break-all;color:var(--mut)}
footer{text-align:center;padding:22px;color:var(--mut);font-size:14px;background:#ffffff88}
body.api{align-items:center;justify-content:center;padding:20px}
.api-box{margin:auto;background:#fff;border-radius:22px;padding:40px 48px;box-shadow:0 8px 24px #ff7eb61f;text-align:center;font-size:18px;line-height:1.8}
@media(max-width:600px){.ep .name{min-width:100%}.api-box{padding:28px}}