:root{--guide-ink:#203b40;--guide-muted:#66817f;--guide-line:#dceae4;--guide-bg:#f5faf8;--guide-surface:#fff;--guide-accent:#25846c;color-scheme:light}
*{box-sizing:border-box}
html{min-width:280px}
body{margin:0;background:var(--guide-bg);color:var(--guide-ink);font-family:Futura,"Avenir Next",Avenir,"Segoe UI",Arial,sans-serif;line-height:1.5}
a{color:var(--guide-accent);text-underline-offset:3px}
a:focus-visible{outline:3px solid #4db6ab88;outline-offset:3px;border-radius:4px}
.guide-wrap{width:min(100% - 32px,760px);margin:0 auto}
.guide-top{padding:22px 0 16px}
.guide-back{display:inline-flex;align-items:center;gap:8px;min-height:42px;font-size:14px;font-weight:750;text-decoration:none}
.guide-brand{display:block;margin:20px 0 7px;color:#448d74;font-size:10px;font-weight:850;letter-spacing:.2em;text-transform:uppercase}
h1{max-width:650px;margin:0;font-size:clamp(29px,6vw,42px);line-height:1.12;letter-spacing:-.035em}
.guide-intro{max-width:630px;margin:14px 0 0;color:var(--guide-muted);font-size:16px}
.guide-platforms{display:flex;gap:8px;padding:0 0 20px}
.guide-platforms a{display:inline-flex;align-items:center;justify-content:center;min-height:39px;padding:8px 15px;border:1px solid var(--guide-line);border-radius:999px;background:var(--guide-surface);font-size:13px;font-weight:800;text-decoration:none}
.guide-platforms a[aria-current="page"]{background:#e3f3e9;border-color:#abd7bd;color:#1d715b}
.guide-card{margin-bottom:16px;padding:clamp(20px,4vw,34px);border:1px solid var(--guide-line);border-radius:18px;background:var(--guide-surface);box-shadow:0 12px 35px #204e4d0b}
.guide-card h2{margin:0 0 21px;font-size:19px;line-height:1.3}
.guide-steps{display:grid;gap:20px;margin:0;padding:0;list-style:none;counter-reset:guide-step}
.guide-steps li{position:relative;min-height:39px;padding-left:55px;counter-increment:guide-step;font-size:16px;line-height:1.5}
.guide-steps li::before{content:counter(guide-step);position:absolute;top:0;left:0;display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:linear-gradient(135deg,#74bc7e,#39a9aa);color:#fff;font-size:16px;font-weight:800}
.guide-steps strong{color:var(--guide-ink)}
.guide-steps small{display:block;margin-top:4px;color:var(--guide-muted);font-size:13px;line-height:1.45}
.guide-tip{margin-top:24px;padding:14px 16px;border-left:4px solid #65b68d;border-radius:0 9px 9px 0;background:#f0f8f3;color:#3b665d;font-size:14px;line-height:1.5}
.guide-open{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:48px;width:100%;padding:12px 16px;border-radius:11px;background:linear-gradient(105deg,#4caa79,#2e9da6);color:#fff;font-size:15px;font-weight:800;text-decoration:none}
.guide-open:hover{filter:brightness(.96)}
.guide-foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:2px 0 32px;color:var(--guide-muted);font-size:12px}
.guide-foot p{margin:0}
html[data-theme="dark"]{--guide-ink:#e9f3f2;--guide-muted:#abc4c7;--guide-line:#38545a;--guide-bg:#111e25;--guide-surface:#1b3038;--guide-accent:#9be1cf;color-scheme:dark}
html[data-theme="dark"] .guide-brand{color:#9bd7b7}
html[data-theme="dark"] .guide-platforms a[aria-current="page"]{background:#244d49;border-color:#487b67;color:#c5f1da}
html[data-theme="dark"] .guide-tip{background:#25463b;color:#d0eddd;border-left-color:#70bd92}
@media(max-width:540px){.guide-wrap{width:calc(100% - 28px)}.guide-top{padding-top:12px}.guide-brand{margin-top:13px}.guide-platforms{padding-bottom:14px}.guide-card{border-radius:15px}.guide-steps{gap:18px}.guide-steps li{padding-left:49px;font-size:15px}.guide-foot{padding-bottom:24px}}