*{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#f5f6f8;--paper:#fff;--text:#303742;--muted:#697482;--line:#e5e9ee;--blue:#456f9d;--blue-soft:#edf4fa;--orange:#b76b2c;--orange-soft:#fff5e9;--green:#287e70;--green-soft:#edf8f5;--red:#b65353;--red-soft:#fff1f1}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.78;overflow-wrap:anywhere}
img{display:block;max-width:100%}
.page-shell{width:min(100% - 32px,1040px);margin:0 auto;padding:38px 0 56px}
.article{background:var(--paper);border:1px solid var(--line);box-shadow:0 12px 38px rgba(40,50,64,.06)}
.article-head{padding:48px 54px 38px;border-bottom:1px solid var(--line);position:relative}
.article-head:before{content:"";position:absolute;left:0;top:48px;width:5px;height:72px;background:var(--blue)}
.eyebrow{display:inline-block;color:var(--blue);font-size:13px;font-weight:700;letter-spacing:.15em;margin-bottom:8px}
.article-title{font-size:clamp(26px,4vw,38px);line-height:1.3;letter-spacing:.04em;color:#222a33}
.intro{max-width:820px;margin-top:18px;color:var(--muted);font-size:16px}
.task-section{padding:38px 54px 42px;border-bottom:1px solid var(--line)}
.task-section:last-child{border-bottom:0}
.task-title{display:flex;align-items:center;gap:13px;margin-bottom:22px;font-size:22px;line-height:1.4;color:#27313b}
.task-title span{display:inline-grid;place-items:center;width:38px;height:30px;background:var(--blue-soft);color:var(--blue);font-size:13px;letter-spacing:.05em}
.task-body{color:#3e4854;font-size:16px}
.task-body p{margin:10px 0}
.task-body strong{font-weight:700;color:var(--blue)}
.key-text{color:var(--blue);font-weight:650}
.script-block{margin:18px 0;padding:16px 20px;border-left:3px solid var(--blue);background:#f8fafc;color:#485768}
.script-block p{margin:3px 0}
.domain{font-size:18px;font-weight:750;line-height:1.7;color:var(--blue)}
.price-line{display:inline-block;padding:13px 18px;background:var(--orange-soft);color:#765031}
.price-line strong,.settlement{color:var(--orange)!important;font-weight:750}
.figure-label{margin-top:20px!important;color:var(--muted);font-weight:650}
.steps-text .step{padding-left:25px;position:relative;color:var(--green)}
.steps-text .step:before{content:"→";position:absolute;left:2px;color:var(--green)}
.warning{color:var(--red)!important;background:var(--red-soft);padding:8px 12px}
.img-figure{margin:18px 0 2px;text-align:center}
.image-link{display:block;cursor:zoom-in}
.img-guide{width:min(100%,520px);margin:0 auto;border:1px solid var(--line);background:#fafafa}
.download-link{display:inline-block;margin-top:9px;color:var(--blue);font-size:14px;text-decoration:none;border-bottom:1px solid transparent}
.download-link:hover,.download-link:focus-visible{border-bottom-color:currentColor}
.img-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:24px}
.image-item{text-align:center}
.img-grid img{width:100%;aspect-ratio:1/1;object-fit:contain;border:1px solid var(--line);background:#fafafa}
@media(max-width:720px){
 .page-shell{width:100%;padding:0}
 .article{border:0;box-shadow:none}
 .article-head{padding:34px 22px 28px}
 .article-head:before{top:34px;height:58px;width:4px}
 .article-title{font-size:27px}
 .intro{font-size:15px;margin-top:14px}
 .task-section{padding:30px 22px 34px}
 .task-title{font-size:20px;margin-bottom:18px}
 .task-body{font-size:16px;line-height:1.75}
 .img-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
}
@media(max-width:390px){
 .article-head,.task-section{padding-left:17px;padding-right:17px}
 .task-title{gap:9px}
 .task-title span{width:34px}
 .script-block{padding:14px 15px}
 .img-grid{gap:7px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}