:root { color-scheme: light; --paper: #f5f1e9; --ink: #1e211d; --green: #25483b; --line: #b8b0a2; font-family: 'Microsoft YaHei',system-ui,sans-serif; background: var(--paper); color: var(--ink); }
* { box-sizing: border-box; } [hidden] { display: none !important; }
body { margin: 0; font-size: 1.0625rem; line-height: 1.8; }
header,main,footer { padding: 1.5rem max(1.25rem,calc((100% - 66rem)/2)); }
header { border-top: .4rem solid var(--green); border-bottom: 1px solid var(--line); background: #fffdf8; }
.masthead { display:flex; gap:1rem; align-items:center; flex-wrap:wrap; }.brand { font-family:Georgia,serif; font-size:2.4rem; letter-spacing:.08em; font-weight:700; }.badge { font-size:.9rem; border:1px solid var(--green); padding:.1rem .7rem; border-radius:2rem; }
nav { display:flex; flex-wrap:wrap; gap:.4rem 1.4rem; margin-top:1rem; align-items:center; }
main { min-height:60vh; padding-top:2rem; padding-bottom:4rem; } footer { border-top:1px solid var(--line); font-size:.95rem; }
h1 { font-family:'Songti SC',SimSun,serif; font-size:2rem; line-height:1.5; margin:.4rem 0 1.4rem; } h2 { font-size:1.3rem; margin-top:1.8rem; }
a { color:var(--green); text-underline-offset:.25em; } a,button,summary { touch-action:manipulation; } :focus-visible { outline:3px solid #a13718; outline-offset:4px; }
button,input,select,textarea { font:inherit; } button { cursor:pointer; min-height:44px; border:1px solid var(--green); border-radius:.3rem; padding:.45rem 1.15rem; background:var(--green); color:white; } button:disabled { background:#59635d; cursor:default; }
input:not([type=checkbox]),select,textarea { display:block; max-width:100%; width:30rem; min-height:44px; padding:.55rem; border:1px solid #68746c; border-radius:.2rem; background:white; margin:.35rem 0 1.1rem; } input[type=file] { width:100%; } input[type=checkbox] { width:1.2rem; height:1.2rem; margin-right:.6rem; }
label { display:block; font-weight:600; } .choice { margin:1rem 0; }.hint { color:#4b544d; font-size:.95rem; }
form { max-width:44rem; } .panel { padding:1.5rem; background:#fffdf8; border:1px solid var(--line); border-radius:.5rem; margin:1.5rem 0; }
ul { padding-left:1.5rem; } .works { list-style:none; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr)); gap:1rem; }.works li { background:#fffdf8; border-top:3px solid var(--green); padding:1.4rem; }.works a { display:block; font-size:1.2rem; }
.scripts,.wishes { list-style:none; padding:0; }.scripts li,.wishes li { display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; align-items:center; border-bottom:1px solid var(--line); padding:1rem 0; }.scripts li p { flex-basis:100%; margin:0; }.scripts li a:first-child,.wishes li button:first-child { margin-right:auto; }.wishes li button:first-child { background:transparent; color:var(--green); border:0; text-align:left; padding-left:0; text-decoration:underline; text-underline-offset:.25em; }
details { border-bottom:1px solid var(--line); padding:.9rem 0; } summary { cursor:pointer; font-size:1.15rem; font-weight:600; min-height:44px; } dl { display:grid; grid-template-columns:auto 1fr; gap:.4rem 1.2rem; } dd { margin:0; overflow-wrap:anywhere; }
#error:not(:empty) { border-left:4px solid #95291b; color:#802519; background:#fff; padding:.7rem 1rem; } #feedback:not(:empty) { border-left:4px solid var(--green); padding:.7rem 1rem; background:#fff; }
.skip { position:absolute; top:-10rem; left:1rem; padding:.7rem; background:white; z-index:2; }.skip:focus { top:1rem; } .types { margin:1.5rem 0; }.types a { padding:.3rem 0; } .account { margin-left:auto; }
.download-action { display:inline-flex; flex-wrap:wrap; align-items:center; gap:.5rem; max-width:100%; }
.download-action [role=status]:not(:empty) { display:block; flex-basis:100%; }
button[aria-disabled=true] { cursor:wait; }
dialog { max-width:min(36rem,calc(100vw - 2rem)); border:2px solid var(--green); padding:1.5rem; border-radius:.5rem; overflow-wrap:anywhere; } dialog::backdrop { background:#0009; }
@media(max-width:600px) { h1 { font-size:1.7rem; } nav { gap:.5rem 1rem; } .account { margin-left:0; } dl { display:block; } dt { font-weight:bold; } dd { margin-bottom:.6rem; } }

.guide-article { max-width: 58rem; overflow-wrap: anywhere; }
.guide-article h2 { border-top: 1px solid var(--line); padding-top: 1.5rem; margin-top: 2rem; }
.guide-article h3 { font-size: 1.18rem; margin-top: 1.8rem; }
.guide-article h4 { font-size: 1.08rem; margin: 1.4rem 0 .6rem; }
.guide-article li { margin: .6rem 0; }
.guide-article blockquote { margin: 1.5rem 0; padding: .3rem 1.2rem; border-left: .25rem solid var(--green); background: #fffdf8; }
.guide-workflow { display: flex; flex-wrap: wrap; gap: .4rem 2rem; padding: 1rem 1rem 1rem 2.5rem; border: 1px solid var(--line); background: #fffdf8; }
.guide-workflow li { padding-right: .5rem; }
.guide-examples { width: 100%; border-collapse: collapse; margin: 1rem 0 2rem; }
.guide-examples caption { text-align: left; font-weight: bold; margin-bottom: .6rem; }
.guide-examples th, .guide-examples td { border: 1px solid var(--line); padding: .7rem; text-align: left; vertical-align: top; }
.guide-examples thead { background: #e8eee7; }
@media(max-width:600px) { .guide-examples th, .guide-examples td { padding: .35rem; } .guide-workflow { display: block; } }

.site-logo { display:block; max-width:100%; color:#194f5c; text-decoration:none; border-radius:.2rem; }
.logo-wide { display:block; width:28rem; max-width:100%; height:auto; }
.logo-compact { display:none; }
.logo-wording { display:flex; flex-direction:column; gap:.25rem; }
.logo-wording .brand { font-family:'Songti SC',SimSun,serif; font-size:2rem; line-height:1.3; }
.logo-tagline { font-size:.9375rem; line-height:1.6; }
@media(max-width:36rem) {
  .logo-wide { display:none; }
  .logo-compact { display:flex; flex-wrap:wrap; align-items:center; gap:.75rem; }
  .logo-compact img { display:block; width:5.5rem; max-width:100%; height:auto; }
}