/* 插件功能页（plugin.html） */
.ph{position:relative;padding:72px 0 64px;border-bottom:1px solid var(--line);background:radial-gradient(50% 80% at 80% 30%,rgba(95,212,244,.08),transparent 60%),radial-gradient(40% 60% at 10% 0%,rgba(224,189,130,.08),transparent 60%)}
.ph .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:end}
.ph h1{font-size:clamp(40px,4.6vw,64px);margin:18px 0 18px}
.ph .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.ph .dlbox{padding:24px;border-radius:16px;border:1px solid #5d4e33;background:linear-gradient(180deg,rgba(224,189,130,.08),transparent),var(--surface);display:grid;gap:12px}
.ph .dlbox .btn{width:100%}
.ph .dlbox p{font-size:13px}
.body{display:grid;grid-template-columns:220px minmax(0,1fr);gap:56px;padding-top:56px}
.toc{position:sticky;top:92px;align-self:start;display:grid;gap:2px;max-height:calc(100vh - 110px);overflow:auto}
.toc small{font-size:11px;letter-spacing:.14em;color:var(--muted);margin:14px 0 6px 12px}
.toc small:first-child{margin-top:0}
.toc a{padding:7px 12px;border-radius:8px;font-size:14px;color:var(--ink2);border-left:2px solid transparent}
.toc a:hover{background:var(--surface);color:var(--ink)}
.toc a.on{border-left-color:var(--gold);color:var(--gold);background:var(--gold-soft)}
.ch{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center;padding:56px 0;border-bottom:1px solid var(--line);scroll-margin-top:84px}
.ch:last-child{border-bottom:0}
.ch .n{font:600 12px var(--mono);color:var(--gold);letter-spacing:.14em}
.ch h2{font-size:32px;margin:10px 0 12px}
.ch>div>p{font-size:15px;line-height:1.85}
.pts{display:grid;gap:10px;margin-top:20px}
.pts li{position:relative;padding-left:18px;font-size:14px;color:var(--ink2)}
.pts li:before{content:"";position:absolute;left:0;top:10px;width:6px;height:6px;border-radius:2px;background:var(--gold);transform:rotate(45deg)}
.pts li b{color:var(--ink);font-weight:600}
.box{position:relative;min-height:280px;padding:28px;border-radius:16px;border:1px solid var(--line);background:radial-gradient(80% 80% at 50% 0%,rgba(95,212,244,.06),transparent 70%),var(--surface2);display:grid;place-items:center;gap:16px}
.box .sample{bottom:8px;right:14px}
.hist{width:100%;display:grid;gap:8px}
.hist div{display:grid;grid-template-columns:auto 1fr auto auto;gap:14px;align-items:center;padding:10px 14px;border-radius:10px;background:#0e1a2b;border:1px solid rgba(43,74,107,.45);font-size:13px}
.hist .k{font-size:11px;padding:1px 8px;border-radius:99px}
.opts{display:grid;grid-template-columns:repeat(4,auto);gap:6px;justify-content:center}
.opts span{font-size:12px;padding:5px 10px;border-radius:8px;border:1px solid var(--line2);color:var(--muted)}
.opts span.on{border-color:var(--gold-deep);color:var(--gold);background:var(--gold-soft)}
.keys{display:grid;gap:10px;width:100%}
.keys div{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-radius:10px;background:var(--surface);border:1px solid var(--line);font-size:14px}
kbd{font:600 12px var(--mono);padding:3px 8px;border-radius:6px;border:1px solid var(--line2);border-bottom-width:3px;background:var(--raise);color:var(--ink)}
.code{width:100%;padding:16px;border-radius:12px;background:#0e1a2b;border:1px dashed rgba(224,189,130,.5);font:13px var(--mono);color:var(--gold2);word-break:break-all}
.row-btn{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.row-btn span{font-size:12px;padding:6px 12px;border-radius:8px;background:var(--raise);border:1px solid var(--line2)}
.meter-s{max-width:380px}
.skin-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.skin-row button{padding:6px 12px;border-radius:99px;border:1px solid var(--line2);font-size:13px;color:var(--ink2)}
.skin-row button[aria-pressed=true]{border-color:var(--gold);color:var(--gold);background:var(--gold-soft)}
.skin-row .tide[aria-pressed=true]{border-color:var(--data);color:var(--data);background:var(--data-soft)}
#perf .box{min-height:0}
.perf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:100%}
.perf div{padding:14px;border-radius:12px;background:var(--surface);border:1px solid var(--line)}
.perf b{display:block;font:600 22px var(--mono);color:var(--data)}.perf span{font-size:12px;color:var(--muted)}
.cta-end{margin:40px 0 0;padding:44px;border-radius:20px;text-align:center;border:1px solid #5d4e33;background:radial-gradient(60% 100% at 50% 0%,rgba(224,189,130,.14),transparent 70%),var(--surface)}
.cta-end h2{font-size:34px;margin:12px 0 22px}
@media(max-width:1024px){.body{grid-template-columns:minmax(0,1fr)}.toc{display:none}.ph .wrap{grid-template-columns:1fr}}
@media(max-width:760px){.ch{grid-template-columns:minmax(0,1fr);gap:24px;padding:40px 0}.ch h2{font-size:26px}.box{padding:18px;min-height:0}.opts{grid-template-columns:repeat(2,auto)}.cta-end{padding:28px 18px}.dt-sum{grid-template-columns:1fr 1fr}.dt .hide-m{display:none}}

/* 目录阅读进度（GSAP 驱动） */
.toc{position:sticky}
.toc:before{content:"";position:absolute;left:0;top:0;width:2px;height:100%;background:var(--line)}
.toc:after{content:"";position:absolute;left:0;top:0;width:2px;height:100%;background:linear-gradient(var(--gold2),var(--gold));transform-origin:top;transform:scaleY(var(--read,0))}

/* ——— 插件页动效 ——— */
.ph{overflow:hidden}
.ph .embers{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.ph .wrap{position:relative;z-index:1}
.ph:after{content:"";position:absolute;inset:-30%;z-index:0;pointer-events:none;background:conic-gradient(from 0deg at 70% 40%,transparent,rgba(224,189,130,.08),transparent 30%,rgba(95,212,244,.07),transparent 60%);animation:phSpin 22s linear infinite}
@keyframes phSpin{to{transform:rotate(1turn)}}
.dlbox{position:relative;overflow:hidden}
.dlbox:before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:conic-gradient(from var(--a,0deg),transparent 70%,var(--gold2),transparent 85%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:borderRun 4s linear infinite;pointer-events:none}
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes borderRun{to{--a:360deg}}
.ch .n{display:inline-flex;align-items:center;gap:10px}
.ch .n:after{content:"";height:1px;width:0;background:linear-gradient(90deg,var(--gold),transparent);transition:width 1s cubic-bezier(.2,.8,.2,1) .2s}
.ch.lit .n:after{width:80px}
.keys kbd.press{animation:kbdPress .35s ease}
@keyframes kbdPress{40%{transform:translateY(2px);border-bottom-width:1px;background:var(--gold-soft);color:var(--gold2);box-shadow:0 0 14px rgba(224,189,130,.5)}}
.toast .bell svg{transform-origin:50% 10%}
.toast.ring .bell svg{animation:bellRing .9s ease}
@keyframes bellRing{15%{transform:rotate(18deg)}30%{transform:rotate(-16deg)}45%{transform:rotate(12deg)}60%{transform:rotate(-8deg)}75%{transform:rotate(4deg)}}
.upd-bar{height:4px;border-radius:2px;background:var(--line);margin-top:8px;overflow:hidden}
.upd-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--data),var(--gold2))}