.guide-wrap { max-width: 980px; margin: 0 auto; }
.guide-header { display:flex; justify-content:space-between; align-items:center; }
.guide-header span,.eyebrow { color:var(--muted); font-size:.85rem; font-weight:600; }
.eyebrow { margin-top:36px; letter-spacing:.04em; }
h1 { font-size:clamp(1.25rem,5.5vw,3.25rem); letter-spacing:-.04em; line-height:1.3; margin:12px 0 20px; white-space:nowrap; }
.intro { max-width:680px; color:var(--muted); }
.chooser { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:32px 0; padding:22px; border:1px solid var(--line); border-radius:18px; }
label { display:block; font-size:.85rem; font-weight:600; margin-bottom:8px; }
select { width:100%; min-height:48px; font:inherit; font-size:1rem; color:var(--ink); background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:10px; }
select:disabled { color:var(--muted); opacity:.75; }
.step table { width:100%; border-collapse:collapse; margin:16px 0; font-size:.9rem; overflow-wrap:anywhere; }
.step caption { text-align:left; font-weight:600; padding-bottom:8px; }
.step th,.step td { text-align:left; vertical-align:top; border-bottom:1px solid var(--line); padding:10px 8px; }
.step th { min-width:3em; }
.guide-heading h2 { border:0; margin:8px 0; padding:0; font-size:1.6rem; }
.guide-heading .eyebrow { margin:0; }
#requirements { color:var(--muted); }
.steps { list-style:none; counter-reset:step; padding:0; margin:24px 0; }
.step { border:1px solid var(--line); border-radius:20px; overflow:hidden; margin:22px 0; background:color-mix(in srgb,var(--bg) 96%,var(--accent)); }
.step-heading { display:flex; align-items:center; gap:12px; padding:24px 24px 0; }
.step-heading span { background:var(--accent); color:white; width:36px; height:36px; border-radius:50%; display:grid; place-items:center; flex:none; font-weight:700; }
.step h3 { font-size:1.2rem; margin:0; }
.step-body { display:grid; grid-template-columns:1fr 300px; gap:24px; padding:16px 24px 24px; }
.step p { margin:0 0 12px; }
.step .where { display:block; padding:12px 14px; border-radius:10px; background:color-mix(in srgb,var(--accent) 9%,transparent); font-weight:600; font-size:.95rem; }
.step figure { margin:0; }
.screenshot { display:block; width:100%; border:0; background:transparent; padding:0; cursor:zoom-in; }
.screenshot img { display:block; width:100%; height:auto; max-height:440px; object-fit:contain; object-position:top; border-radius:10px; }
.screenshot svg { display:block; width:100%; height:auto; max-height:440px; }
.tap-target { fill:none; stroke:#e11d28; stroke-width:3; vector-effect:non-scaling-stroke; }
.registration { margin-top:28px; }
.registration h2 { font-size:1.3rem; }
.registration .hint { color:var(--muted); font-size:.9rem; }
figcaption { color:var(--muted); font-size:.78rem; margin-top:10px; line-height:1.6; }
.step .hint { font-size:.9rem; color:var(--muted); }
.after { padding:20px 24px; border-radius:16px; background:color-mix(in srgb,var(--accent) 6%,transparent); }
.after h2 { margin:0; padding:0; border:0; font-size:1.2rem; }
.quick { margin:24px 0 0; padding:20px 24px; border:1px solid var(--accent); border-radius:16px; }
.quick h2 { margin:0 0 8px; padding:0; border:0; font-size:1.2rem; }
.quick p { margin:0 0 12px; }
.quick .hint { margin:0; font-size:.9rem; color:var(--muted); }
.quick-link { display:inline-flex; align-items:center; min-height:44px; padding:10px 18px; border:1px solid var(--accent); border-radius:10px; background:color-mix(in srgb,var(--accent) 12%,transparent); color:var(--ink); font-weight:600; text-decoration:none; }
.troubleshooting { margin:28px 0; border-block:1px solid var(--line); padding:18px 0; }
summary { cursor:pointer; font-weight:600; }
.sources h2 { font-size:1rem; }
.sources p,.sources ul { font-size:.85rem; color:var(--muted); }
button { font:inherit; }
dialog { border:1px solid var(--line); border-radius:16px; padding:16px; background:var(--bg); color:var(--ink); max-width:min(1000px,calc(100vw - 48px)); max-height:90vh; overflow:auto; }
dialog::backdrop { background:rgb(0 0 0 / .7); }
.image-tools { display:flex; align-items:center; justify-content:space-between; gap:12px; position:sticky; top:0; left:0; background:var(--bg); }
.image-tools p { flex:1; min-width:0; font-size:.85rem; }
.image-tools button { flex:none; white-space:nowrap; min-height:44px; border:1px solid var(--line); border-radius:8px; color:var(--ink); background:var(--bg); padding:8px 10px; }
#image-dialog.original-size { width:calc(100vw - 64px); }
#image-dialog.original-size #large-image { max-width:none; max-height:none; margin:0; }
#large-image { display:block; max-width:100%; height:auto; max-height:75vh; object-fit:contain; margin:auto; }
:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
@media(max-width:620px) { .chooser { grid-template-columns:1fr; padding:18px; gap:14px; } .step-body { grid-template-columns:1fr; padding:14px 18px 22px; } .step-heading { padding:20px 18px 0; } .step figure { max-width:360px; width:100%; margin:0 auto; } .step-body { gap:14px; } }