:root{--cream:#fff8ea;--ink:#121412;--green:#22c554;--yellow:#ffd83d;--mute:#55584f;--card:#fffdf7}
*{box-sizing:border-box}body{margin:0;background:var(--cream);color:var(--ink);font:16px/1.75 -apple-system,"PingFang SC","Noto Sans SC","Segoe UI",sans-serif}
a{color:inherit}.top{display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center;justify-content:space-between;padding:14px max(16px,calc((100vw - 1040px)/2));border-bottom:2px solid var(--ink);background:var(--cream)}.logo{font-weight:800;font-size:18px;text-decoration:none}.top nav{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center}.top nav a{font-size:14px;text-decoration:none;font-weight:600}
main{max-width:1040px;margin:auto;padding:0 16px}section{padding:34px 0}.hero{padding:56px 0 30px}.hero h1{font-size:clamp(30px,5vw,48px);line-height:1.2;margin:0 0 16px;max-width:820px;text-wrap:balance}.hero p{font-size:18px;max-width:700px}h2{font-size:clamp(22px,3vw,28px);line-height:1.3;margin:0 0 16px;text-wrap:balance}h3{margin:0 0 6px;font-size:17px}
.btn{display:inline-block;background:var(--green);border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);padding:11px 20px;font-weight:800;font:inherit;font-weight:800;text-decoration:none;cursor:pointer;color:var(--ink);border-radius:6px}.btn.alt{background:#fff}.btn.small{padding:4px 12px;box-shadow:2px 2px 0 var(--ink);font-size:14px}.btn:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #0b6;outline-offset:2px}.cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:22px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}.card{background:var(--card);border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);padding:18px;border-radius:6px}.card p{margin:0}.notice{margin:0 0 40px}
.table{overflow-x:auto;background:var(--card);border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);border-radius:6px}table{border-collapse:collapse;width:100%;min-width:560px}th,td{padding:12px 14px;border-bottom:1px solid var(--ink);text-align:left;vertical-align:top}tr:last-child td{border-bottom:0}th{background:var(--yellow)}
.check{list-style:none;padding:0}.check li{padding:4px 0 4px 28px;position:relative}.check li:before{content:"✓";position:absolute;left:4px;font-weight:800}.steps{padding-left:22px}.steps li{margin-bottom:8px}
details{border-top:1px solid var(--ink);padding:12px 0}details:last-child{border-bottom:1px solid var(--ink)}summary{font-weight:700;cursor:pointer}details p{margin:8px 0 0}.band{background:var(--yellow);border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);padding:26px;margin:24px 0 44px;border-radius:6px}.band h2{margin-bottom:4px}
.form{max-width:640px;display:grid;gap:15px;padding-bottom:50px}.form label,.form legend{display:block;font-weight:700;font-size:15px}.form input:not([type=radio]):not([type=checkbox]),.form textarea{display:block;width:100%;margin-top:5px;padding:11px;border:2px solid var(--ink);font:inherit;background:#fff;border-radius:6px}.form fieldset{border:2px solid var(--ink);padding:12px;margin:0;background:var(--card);border-radius:6px}.row{display:flex!important;gap:8px;align-items:flex-start;font-weight:500!important;padding:3px 0}.row input{margin-top:6px}.bad{color:#b00020}.bad input{border-color:#b00020!important}.err{color:#b00020;font-weight:700;margin:0}.hp{position:absolute;left:-9999px}.prose{max-width:720px;padding-top:0}
footer{border-top:2px solid var(--ink);padding:22px 16px;text-align:center;font-size:14px;color:var(--mute)}footer p{margin:4px 0}
.logo{display:flex;align-items:center;gap:10px}.logo img{width:42px;height:42px;object-fit:contain}.crumb{padding-top:20px;font-size:14px;color:var(--mute)}.crumb+.hero{padding-top:18px}.prose{max-width:820px;padding-bottom:10px}.prose h2{margin-top:34px}.prose .table,.prose .grid{margin:14px 0}.two{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}.m{color:var(--mute);font-size:14px}.links{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:6px 20px}.more{padding-bottom:6px}.prose .card a{font-weight:700}code{background:#f3ead4;padding:0 4px;overflow-wrap:anywhere}th a{color:inherit}
.langs{display:inline-flex;gap:6px;border:2px solid var(--ink);border-radius:6px;padding:2px 6px}.langs a{padding:0 4px}
.visual{display:grid;grid-template-columns:1.5fr 1fr;gap:18px;padding:8px 0 30px}.flow{list-style:none;counter-reset:s;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}.flow li{counter-increment:s;background:var(--card);border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);border-radius:6px;padding:14px;font-weight:700}.flow li:before{content:counter(s);display:inline-grid;place-items:center;width:28px;height:28px;background:var(--yellow);border:2px solid var(--ink);border-radius:50%;margin-right:8px;font-size:13px}.demo{display:flex;flex-direction:column;gap:6px;background:#fff;border:2px dashed var(--ink);border-radius:6px;padding:14px}.pic{font-size:42px;background:var(--cream);text-align:center;padding:14px;border-radius:6px}
.calc{background:var(--card);border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);border-radius:6px;padding:18px;margin-bottom:22px}.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:16px}.fields label{font-weight:700;font-size:14px}.fields input{display:block;width:100%;margin-top:5px;padding:10px;border:2px solid var(--ink);border-radius:6px;font:inherit}.calc td[id]{font-weight:800;font-size:20px;font-variant-numeric:tabular-nums}.calc .table{box-shadow:none}
@media(max-width:760px){.visual{grid-template-columns:1fr}}
/* 头部与底部 */
.top{position:sticky;top:0;z-index:20}.nav-toggle{position:absolute;opacity:0;pointer-events:none}.burger{display:none}.mainnav{display:flex;align-items:center;gap:18px}.mainnav a{font-size:14px;font-weight:700;text-decoration:none}.mainnav a:not(.btn):hover{text-decoration:underline}
.foot{background:var(--ink);color:var(--cream);border:0;padding:44px 16px 22px;text-align:left;font-size:15px;margin-top:20px}.foot a{color:var(--cream);text-decoration:none}.foot a:hover{text-decoration:underline}.foot-in{max-width:1040px;margin:auto;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:28px}.foot h2{font-size:14px;color:var(--yellow);margin:0 0 10px}.foot nav{display:grid;gap:8px;align-content:start}.foot-brand p{margin:12px 0 16px;max-width:300px;color:#d8d3c5}.foot .logo{color:var(--cream);font-size:18px}.foot .logo img{background:var(--cream);border-radius:6px;padding:2px}.foot .btn{color:var(--ink);text-decoration:none}.foot-end{max-width:1040px;margin:30px auto 0;padding-top:16px;border-top:1px solid #4a4d47;font-size:13px;color:#b8b4a8}.foot-end a{text-decoration:underline}
@media(max-width:820px){.top{flex-wrap:wrap;padding:10px 16px}.logo img{width:36px;height:36px}.burger{display:grid;gap:5px;width:44px;height:44px;padding:11px 9px;border:2px solid var(--ink);border-radius:6px;background:#fff;box-shadow:2px 2px 0 var(--ink);cursor:pointer;align-content:center}.burger span{display:block;height:3px;background:var(--ink);border-radius:2px;transition:transform .15s,opacity .15s}.mainnav{display:none;flex-basis:100%;flex-direction:column;align-items:stretch;gap:0;padding:8px 0 4px;border-top:2px solid var(--ink);margin-top:6px}.mainnav a{font-size:16px;padding:13px 2px;border-bottom:1px solid #d9d0ba}.mainnav a.btn{margin-top:12px;text-align:center;border:2px solid var(--ink);padding:11px}.nav-toggle:checked~.mainnav{display:flex}.nav-toggle:focus-visible~.burger{outline:3px solid #0b6;outline-offset:2px}.nav-toggle:checked+.burger span:nth-child(1){transform:translateY(8px) rotate(45deg)}.nav-toggle:checked+.burger span:nth-child(2){opacity:0}.nav-toggle:checked+.burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}.foot-in{grid-template-columns:1fr 1fr;gap:26px 18px}.foot-brand{grid-column:1/-1}.foot-end{line-height:1.8}.hero{padding-top:32px}}
.skip{position:absolute;left:-9999px}.skip:focus{left:12px;top:12px;z-index:50;background:#fff;padding:8px 12px;border:2px solid var(--ink)}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
/* 修正：菜单规则优先级和面包屑 */
.crumb{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:16px 0 0;font-size:14px;color:var(--mute)}.crumb a{font-weight:600}
@media(max-width:820px){.top nav.mainnav{display:none;flex-basis:100%;flex-direction:column;align-items:stretch;gap:0}.nav-toggle:checked~nav.mainnav{display:flex}.mainnav a{text-align:left}.mainnav a.btn{text-align:center}}
/* 抽屉菜单：不推开页面 */
.nav-close{display:none}.top button.burger{font:inherit}
@media(max-width:820px){.top{flex-wrap:nowrap}.scrim{position:fixed;inset:0;background:rgba(18,20,18,.55);z-index:30}
.top nav.mainnav{display:flex;position:fixed;top:0;right:0;bottom:0;width:min(84vw,340px);background:var(--cream);border-left:2px solid var(--ink);flex-direction:column;align-items:stretch;gap:0;padding:68px 20px 24px;margin:0;z-index:40;transform:translateX(105%);visibility:hidden;transition:transform .2s ease,visibility .2s;overflow-y:auto;flex-basis:auto}
.nav-on .top nav.mainnav{transform:none;visibility:visible}.nav-on{overflow:hidden}.nav-close{display:block;position:absolute;top:12px;right:14px;width:44px;height:44px;font-size:28px;line-height:1;background:#fff;border:2px solid var(--ink);border-radius:6px;cursor:pointer;color:var(--ink)}
.flow{grid-template-columns:1fr}.cta .btn{flex:1 1 100%;text-align:center}}
.h3{font-size:17px;margin:0 0 6px}.table:focus-visible{outline:3px solid #0b6;outline-offset:2px}.prose>h2:first-child{margin-top:0}.hero{padding-bottom:18px}.foot .btn{box-shadow:none}
.foot-mail{margin:8px 0 12px}.foot-mail a{color:inherit;text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
/* 登录页：电脑左图右卡片，手机图在卡片上方；配图未到时是纯色占位 */
.login{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:32px;align-items:center;padding:40px 0 56px}.login-art{border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);border-radius:6px;overflow:hidden;background:var(--card)}.login-art img{display:block;width:100%;height:auto}.login-art.is-empty{aspect-ratio:5/7;background:var(--yellow)}.login-card{background:var(--card);border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);border-radius:6px;padding:28px}.login-card h1{font-size:clamp(26px,3.2vw,34px);line-height:1.25;margin:0 0 14px}.login-card .btn{margin:6px 0 4px}.login-card .m{font-size:14px;color:var(--mute);margin:8px 0 0}.login-card .err{margin:0 0 12px;font-weight:700}.logout{padding:24px 0 48px}.card.notice .cta{margin-top:12px}
@media(max-width:820px){.login{grid-template-columns:1fr;gap:18px;padding:20px 0 40px}.login-art.is-empty{aspect-ratio:2/1}.login-card{padding:20px}.login-card .btn{display:block;text-align:center}}