:root{
  --desk-a:#a3a8a3; --desk-b:#989d98;
  --face:#ececea; --face-dim:#e0e0dd; --face-deep:#f7f7f5;
  --ink:#1b1c1e; --ink-soft:#4b4d50; --hairline:#cfcfcb;
  --accent:#c23d15; --accent-ink:#f6f2ee;
  --shadow:6px 6px 0 rgba(27,28,30,.30);
  --shadow-s:3px 3px 0 rgba(27,28,30,.22);
  --bd:1.5px solid var(--ink);
  --mono:Consolas,Monaco,"Courier New",monospace;
  --cjk:"PingFang SC","Microsoft YaHei UI","Microsoft YaHei",sans-serif;
  --disp:"ZCOOL QingKe HuangYou",var(--cjk);
  --px:"Silkscreen",var(--mono);
  --maxw:1240px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--cjk);color:var(--ink);background:var(--desk-a);
  background-image:conic-gradient(var(--desk-b) 25%,var(--desk-a) 0 50%,var(--desk-b) 0 75%,var(--desk-a) 0);
  background-size:4px 4px;line-height:1.75;
}
::selection{background:var(--accent);color:var(--accent-ink)}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--face);padding:.5rem 1rem;z-index:99}
.skip:focus{left:0}

.menubar{
  position:sticky;top:0;z-index:40;min-height:44px;
  display:flex;align-items:center;gap:1.3rem;padding:0 1rem;
  background:var(--face);border-bottom:var(--bd);
}
.brand{font-family:var(--px);font-weight:700;font-size:.95rem;letter-spacing:.04em;text-decoration:none;color:var(--ink);white-space:nowrap}
.mainnav{display:flex;gap:1.1rem;font-size:.9rem;align-items:center}
.mainnav>a,.navdrop>button{
  color:var(--ink);text-decoration:none;padding:.25rem .2rem;background:none;
  border:0;font:inherit;cursor:pointer;
}
.mainnav>a:hover,.navdrop>button:hover{background:var(--ink);color:var(--face)}
.navdrop{position:static}
.navdrop .panel{
  display:none;position:absolute;left:1rem;top:calc(100% + 6px);width:min(860px,calc(100vw - 2rem));
  background:var(--face);border:var(--bd);box-shadow:var(--shadow);
  padding:1rem 1.1rem;grid-template-columns:repeat(3,1fr);gap:.9rem 1.4rem;z-index:41;
}
.navdrop.open .panel{display:grid}
.navdrop .grp b{
  display:block;font-family:var(--mono);font-weight:700;font-size:.72rem;
  letter-spacing:.08em;color:var(--ink-soft);margin-bottom:.3rem;
}
.navdrop .grp a{display:block;font-size:.88rem;text-decoration:none;padding:.18rem 0}
.navdrop .grp a:hover{background:var(--ink);color:var(--face)}
.navdrop .all{grid-column:1/-1;border-top:1px solid var(--hairline);padding-top:.55rem;font-weight:600}
.navtoggle{display:none}

.desktop{max-width:var(--maxw);margin:0 auto;padding:clamp(1rem,3vw,2.6rem) clamp(.8rem,3vw,2.5rem) 3rem}

.win{background:var(--face);border:var(--bd);box-shadow:var(--shadow)}
.titlebar{
  display:flex;align-items:center;gap:.6rem;height:30px;padding:0 .6rem;
  border-bottom:var(--bd);
  background:repeating-linear-gradient(to bottom,var(--face) 0 2px,#c9c9c5 2px 3px,var(--face) 3px 5px);
}
.win.dim .titlebar{background:var(--face-dim)}
.box{width:12px;height:12px;border:1.5px solid var(--ink);background:var(--face);flex:none}
.titlebar .label{
  font-size:.8rem;font-weight:600;background:var(--face);padding:0 .5rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.titlebar .grow{flex:1;min-width:0}
.inner{padding:clamp(1rem,2.4vw,1.8rem)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;
  border:var(--bd);background:var(--face);color:var(--ink);cursor:pointer;
  font:inherit;font-size:.95rem;text-decoration:none;padding:.55rem 1rem;
  box-shadow:var(--shadow-s);
}
.btn:hover{background:var(--ink);color:var(--face)}
.btn:active{transform:translate(1px,1px);box-shadow:2px 2px 0 rgba(27,28,30,.22)}
.btn-accent{background:var(--accent);color:var(--accent-ink);font-weight:600}
.btn-accent:hover{background:var(--accent);color:var(--accent-ink);filter:brightness(.92)}
.code{
  display:flex;align-items:center;font-family:var(--mono);font-size:1.2rem;
  letter-spacing:.12em;border:var(--bd);background:var(--face-deep);padding:.5rem .7rem;
}
.coderow{display:flex;gap:.55rem}
.coderow .code{flex:1;min-width:0}
.fine{font-size:.74rem;line-height:1.6;color:var(--ink-soft)}
.linkline{border-bottom:2px solid var(--ink);padding-bottom:1px;text-decoration:none}
.linkline:hover{background:var(--ink);color:var(--face)}

.hero{display:grid;gap:1.5rem;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);align-items:start}
.hero h1{font-family:var(--disp);font-weight:400;font-size:clamp(1.9rem,4.6vw,3.1rem);line-height:1.14;letter-spacing:.01em;max-width:14em}
.hero .sub{margin-top:.8rem;font-size:.95rem;line-height:1.75;color:var(--ink-soft);max-width:34em}
.steps{margin-top:1.4rem;display:flex;flex-wrap:wrap;gap:.5rem;list-style:none}
.steps li a{
  display:flex;align-items:center;border:var(--bd);background:var(--face);
  padding:.45rem .7rem;font-size:.85rem;text-decoration:none;color:var(--ink);
  box-shadow:var(--shadow-s);
}
.steps li a b{font-family:var(--mono);font-size:.78rem;margin-right:.35rem;font-weight:700}
.steps li a:hover{background:var(--ink);color:var(--face)}
.steps li a:active{transform:translate(1px,1px)}
.steps li.on a{background:var(--accent);color:var(--accent-ink)}
.win-dialog{margin-top:2.6rem}
.fld{font-size:.8rem;color:var(--ink-soft);margin-bottom:.4rem}
.copy{
  font-family:var(--cjk);font-size:.9rem;cursor:pointer;min-height:44px;
  border:var(--bd);background:var(--face);padding:.5rem .9rem;box-shadow:var(--shadow-s);
}
.copy:hover{background:var(--ink);color:var(--face)}
.copy:active{transform:translate(1px,1px)}
.benefit{margin-top:.9rem;font-size:.95rem;line-height:1.65}
.benefit b{color:var(--accent)}
.register{
  display:flex;align-items:center;justify-content:center;min-height:46px;
  margin-top:.95rem;border:var(--bd);background:var(--accent);color:var(--accent-ink);
  font-size:1.02rem;font-weight:600;text-decoration:none;padding:.75rem 1rem;
  box-shadow:4px 4px 0 rgba(27,28,30,.30);
}
.register:active{transform:translate(1px,1px);box-shadow:2px 2px 0 rgba(27,28,30,.30)}
.register+.fine{margin-top:.7rem}

.section{margin-top:2.2rem}
.filelist{list-style:none}
.filelist li{border-bottom:1px solid var(--hairline)}
.filelist li:last-child{border-bottom:0}
.filelist a{
  display:flex;gap:1rem;align-items:baseline;text-decoration:none;
  padding:.62rem .2rem;min-height:44px;align-items:center;
}
.filelist a:hover{background:var(--ink);color:var(--face)}
.filelist a:hover .fmeta{color:var(--face)}
.fname{font-weight:600;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:none;max-width:60%}
.fdesc{flex:1;min-width:0;font-size:.85rem;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.filelist a:hover .fdesc{color:var(--face)}
.fmeta{font-family:var(--mono);font-size:.74rem;color:var(--ink-soft);flex:none}
.secfoot{border-top:var(--bd);padding:.6rem 1.1rem;font-size:.88rem}

.applist{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}
.applist a{
  border:var(--bd);background:var(--face-deep);text-decoration:none;
  padding:.9rem 1rem;box-shadow:var(--shadow-s);display:block;
}
.applist a:hover{background:var(--ink);color:var(--face)}
.applist a:hover span{color:var(--face)}
.applist b{display:block;font-size:.95rem}
.applist span{display:block;font-size:.8rem;color:var(--ink-soft);margin-top:.25rem}

.page{max-width:900px;margin:0 auto;padding:clamp(1rem,3vw,2.6rem) clamp(.8rem,3vw,2rem) 3rem}
.crumbs{font-size:.78rem;color:var(--ink-soft);margin-bottom:.9rem}
.crumbs a{color:inherit;text-decoration:none;border-bottom:1px solid var(--hairline)}
.crumbs a:hover{background:var(--ink);color:var(--face)}
article.win .inner{padding:clamp(1.2rem,3vw,2.2rem)}
.article-head h1{font-family:var(--disp);font-weight:400;font-size:clamp(1.6rem,3.6vw,2.5rem);line-height:1.2}
.byline{margin-top:.6rem;font-size:.8rem;color:var(--ink-soft)}
.byline b{font-weight:600;color:var(--ink)}
.article-cover{margin:1.2rem 0 0;border:var(--bd)}
.article-cover img{width:100%}
.lede{margin-top:1.2rem;font-size:1.02rem;line-height:1.85}
.prose{margin-top:.4rem}
.prose h2{font-family:var(--disp);font-weight:400;font-size:1.45rem;margin:2rem 0 .7rem;padding-top:.6rem;border-top:1px solid var(--hairline)}
.prose h3{font-size:1.05rem;margin:1.4rem 0 .5rem}
.prose p{margin:.7rem 0}
.prose ul,.prose ol{margin:.7rem 0 .7rem 1.5rem}
.prose li{margin:.3rem 0}
.prose table{width:100%;border-collapse:collapse;margin:.9rem 0;font-size:.9rem}
.prose th,.prose td{border:1px solid var(--ink);padding:.5rem .6rem;text-align:left;vertical-align:top}
.prose th{background:var(--face-dim);font-weight:600}
.prose a{text-decoration:none;border-bottom:2px solid var(--ink)}
.prose a:hover{background:var(--ink);color:var(--face)}
.prose a[rel~="sponsored"]{border-bottom-color:var(--accent);color:var(--accent);font-weight:600;background:linear-gradient(transparent 62%,rgba(194,61,21,.16) 62%)}

.prose a[rel~="sponsored"]:hover{background:var(--accent);color:var(--accent-ink)}
.prose .note{border:var(--bd);background:var(--face-deep);padding:.8rem 1rem;margin:.9rem 0;font-size:.92rem}
.prose .warn{border:var(--bd);background:var(--face-deep);padding:.8rem 1rem;margin:.9rem 0;font-size:.92rem}
.prose .warn b:first-child{color:var(--accent)}

.toc{border:var(--bd);background:var(--face-deep);margin:1.4rem 0;max-width:34rem}
.toc .tochead{
  display:flex;align-items:center;gap:.5rem;border-bottom:var(--bd);padding:.3rem .6rem;
  font-size:.78rem;font-weight:600;
  background:repeating-linear-gradient(to bottom,var(--face-deep) 0 2px,#d6d6d2 2px 3px,var(--face-deep) 3px 5px);
}
.toc ol{list-style:none;padding:.6rem .9rem;columns:2;column-gap:1.4rem;font-size:.86rem}
.toc li{margin:.22rem 0;break-inside:avoid}
.toc a{text-decoration:none}
.toc a:hover{background:var(--ink);color:var(--face)}
.toc b{font-family:var(--mono);font-size:.72rem;font-weight:700;margin-right:.3rem}

.faq h3{border:var(--bd);background:var(--face-dim);padding:.5rem .8rem;font-size:.95rem;margin:1rem 0 0}
.faq h3+p,.faq h3+div{border:var(--bd);border-top:0;padding:.7rem .8rem;margin:0;font-size:.92rem}

.cta-win{margin:2.2rem 0 0;max-width:34rem}
.cta-win .inner{padding:1.1rem 1.2rem 1.25rem}

.related{margin-top:2rem}
.related ul{list-style:none;margin-top:.4rem}
.related li{border-bottom:1px solid var(--hairline)}
.related li:last-child{border-bottom:0}
.related a{display:block;text-decoration:none;padding:.5rem .2rem;font-size:.92rem;min-height:44px;display:flex;align-items:center}
.related a:hover{background:var(--ink);color:var(--face)}

.tool-form{display:grid;gap:.9rem;max-width:34rem}
.tool-form label{display:block;font-size:.85rem;font-weight:600;margin-bottom:.3rem}
.tool-form input,.tool-form select{
  width:100%;font:inherit;font-family:var(--mono);font-size:1rem;
  border:var(--bd);background:var(--face-deep);padding:.55rem .7rem;min-height:44px;color:var(--ink);
}
.tool-form input:focus,.tool-form select:focus{outline:2.5px solid var(--accent);outline-offset:1px}
.tool-form .hint{font-size:.76rem;color:var(--ink-soft);margin-top:.25rem}
.result{
  border:var(--bd);background:var(--face-deep);padding:1rem 1.1rem;margin-top:1.1rem;
}
.result .big{font-family:var(--mono);font-size:1.7rem;letter-spacing:.02em}
.result .err{color:var(--accent);font-weight:600}

.indexzone{margin-top:2.4rem}
.indexzone .inner{padding:1.2rem 1.4rem 1.4rem}
.idxgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1.1rem 1.6rem}
.idxgrid b{
  display:block;font-family:var(--mono);font-weight:700;font-size:.72rem;
  letter-spacing:.08em;color:var(--ink-soft);margin-bottom:.35rem;
}
.idxgrid a{display:block;font-size:.84rem;text-decoration:none;padding:.16rem 0;color:var(--ink)}
.idxgrid a:hover{background:var(--ink);color:var(--face)}

.footer{border-top:var(--bd);background:var(--face);margin-top:0}
.footer .inner{max-width:var(--maxw);margin:0 auto;padding:1.2rem clamp(.8rem,3vw,2.5rem) 1.6rem;box-shadow:none}
.footer .row{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;font-size:.82rem}
.footer a{text-decoration:none;border-bottom:1px solid var(--hairline)}
.footer a:hover{background:var(--ink);color:var(--face)}
.footer .disc{margin-top:.8rem;font-size:.74rem;color:var(--ink-soft);max-width:72em;line-height:1.7}
.footer .brandline{margin-top:.8rem;font-family:var(--px);font-size:.78rem}

.cat{margin-top:1.6rem}
.cat:first-of-type{margin-top:0}

@media (prefers-reduced-motion:no-preference){
  .win{animation:pop .22s cubic-bezier(.16,1,.3,1) backwards}
  .win:nth-of-type(2){animation-delay:.06s}
  .win:nth-of-type(3){animation-delay:.12s}
  @keyframes pop{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}
}

@media (max-width:900px){
  .hero{grid-template-columns:minmax(0,1fr);gap:1rem}
  .win-dialog{margin-top:0}
  .menubar{height:auto;min-height:52px;padding:.3rem 1rem;flex-wrap:wrap}
  .brand{display:inline-flex;align-items:center;min-height:44px}
  .mainnav{
    display:none;order:9;width:100%;flex-direction:column;align-items:stretch;
    gap:0;border-top:1px solid var(--hairline);padding:.4rem 0;
  }
  .menubar.open .mainnav{display:flex}
  .mainnav>a,.navdrop>button{padding:.7rem .2rem;min-height:44px;width:100%;text-align:left}
  .navdrop .panel{position:static;width:100%;box-shadow:none;border:0;border-left:var(--bd);margin:.2rem 0 .5rem;grid-template-columns:1fr;padding:.4rem .9rem}
  .navdrop .grp a{padding:.5rem 0;min-height:40px;display:flex;align-items:center}
  .navtoggle{
    display:flex;align-items:center;margin-left:auto;min-height:44px;min-width:44px;
    justify-content:center;border:var(--bd);background:var(--face);font:inherit;font-size:.85rem;cursor:pointer;
  }
  .copy{min-height:46px}
  .steps li a{min-height:44px;padding:.5rem .6rem;font-size:.8rem;box-shadow:2px 2px 0 rgba(27,28,30,.22)}
  .hero h1{font-size:clamp(1.4rem,6vw,1.8rem);line-height:1.16}
  .hero .sub{font-size:.875rem;line-height:1.55;margin-top:.45rem}
  .hero .steps{margin-top:.65rem;gap:.4rem}
  .hero .steps li a{padding:.42rem .5rem}
  .hero .more{display:none}
  .win-dialog .inner{padding:.85rem 1rem 1rem}
  .win-dialog .fld{margin-bottom:.3rem}
  .win-dialog .benefit{margin-top:.55rem;font-size:.9rem;line-height:1.5}
  .win-dialog .register{margin-top:.7rem}
  .win-txt{display:none}
  .win-main .inner,.win .inner{padding:1rem}
  .fname{max-width:100%}
  .fdesc{display:none}
  .toc ol{columns:1}
  .prose table{display:block;overflow-x:auto;white-space:nowrap}
}
@media (max-width:520px){
  .idxgrid{grid-template-columns:1fr 1fr}
}

.prose figure.shot{margin:1.5rem 0;border:var(--bd);background:var(--face);box-shadow:var(--shadow-s)}
.prose figure.shot img{display:block;width:100%;height:auto;border-bottom:1px solid var(--hairline)}
.prose figure.shot figcaption{font-size:.82rem;line-height:1.55;color:var(--ink-soft);padding:.55rem .8rem}

.cardgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem}
.gcard{display:flex;flex-direction:column;text-decoration:none;color:var(--ink);background:var(--face-deep);border:var(--bd);box-shadow:var(--shadow-s);transition:transform .12s,box-shadow .12s}
.gcard img{display:block;width:100%;height:auto;aspect-ratio:1200/630;border-bottom:var(--bd);background:var(--face-dim)}
.gcard .gbody{display:flex;flex-direction:column;gap:.3rem;padding:.75rem .85rem .85rem;flex:1}
.gcard .gname{font-weight:700;font-size:.98rem;line-height:1.4}
.gcard .gdesc{font-size:.84rem;line-height:1.55;color:var(--ink-soft)}
.gcard .gmeta{margin-top:auto;padding-top:.35rem;font-family:var(--mono);font-size:.72rem;color:var(--ink-soft)}
.gcard:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow)}
.gcard:hover .gname{text-decoration:underline;text-underline-offset:3px}
.gcard:active{transform:translate(1px,1px);box-shadow:none}
.gcard:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.cardgrid.n4{grid-template-columns:repeat(4,minmax(0,1fr))}
.cardgrid.n5{grid-template-columns:repeat(5,minmax(0,1fr));gap:1rem}
.cardgrid.n5 .gbody{padding:.65rem .7rem .75rem}
.cardgrid.n7{display:flex;flex-wrap:wrap;justify-content:center}
.cardgrid.n7 .gcard{flex:0 0 calc((100% - 3.6rem)/4)}
@media (max-width:900px){.cardgrid,.cardgrid.n4,.cardgrid.n5{grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem}.cardgrid.n5 .gcard:first-child{grid-column:1/-1}.cardgrid.n7 .gcard{flex-basis:calc((100% - .9rem)/2)}.cardgrid.n7{gap:.9rem}}
@media (max-width:520px){.cardgrid,.cardgrid.n4,.cardgrid.n5{grid-template-columns:minmax(0,1fr);gap:.7rem}.cardgrid.n5 .gcard:first-child{grid-column:auto}.cardgrid.n7 .gcard{flex-basis:100%}.gcard{flex-direction:row;align-items:stretch}.gcard img{width:120px;flex:none;align-self:center;border-bottom:0;border-right:var(--bd)}.gcard .gbody{padding:.55rem .7rem;gap:.2rem}.gcard .gname{font-size:.92rem}.gcard .gdesc{font-size:.84rem}}
@media (prefers-reduced-motion:reduce){.gcard{transition:none}.gcard:hover{transform:none}}
@media (max-width:900px){.footer .row{gap:0 1.2rem}.footer .row a{display:inline-flex;align-items:center;min-height:40px}.fine{font-size:.82rem}.footer .disc{font-size:.82rem}.gcard .gdesc{font-size:.84rem}.gcard .gmeta{font-size:.78rem}.fmeta{font-size:.78rem}}