.walkthrough{margin:32px 0 24px;padding:26px;border:1px solid var(--line);border-radius:16px;background:var(--panel)}.walk-head{display:flex;align-items:center;justify-content:space-between;gap:20px}.pagebody .walk-head h3{margin:8px 0 20px;font-size:24px}.walkthrough button{background:var(--bg);color:var(--fg);border:1px solid var(--line);border-radius:8px;padding:11px 16px;cursor:pointer;font:inherit;font-size:14px}.walkthrough button:hover{border-color:var(--accent)}.walkthrough button:focus-visible{outline:3px solid var(--accent);outline-offset:3px}.walk-head button{flex-shrink:0}.walkthrough figure{margin:0}.walk-image{position:relative;overflow:hidden;border-radius:10px}.pagebody .walk-image img{display:block;width:100%;height:auto;max-height:none;margin:0;border-radius:0}.walk-highlight{position:absolute;border:3px solid #ff9f00;background:#ffba0010;border-radius:8px;pointer-events:none;box-shadow:0 0 0 3px #fff9;transition:top .45s,left .45s,width .45s,height .45s}.walkthrough[data-playing=true] .walk-highlight{animation:guide-pulse 1.5s ease-in-out infinite}.walkthrough figcaption{font-size:14px;color:var(--muted);line-height:1.6;margin:12px 0}.walkthrough figcaption button{display:block;margin-top:10px}.walk-controls{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}.walk-controls button[aria-pressed=true]{background:var(--accent);color:var(--bg);border-color:var(--accent)}.impulse .walk-controls button[aria-pressed=true]{color:#161916}.home .walk-controls button[aria-pressed=true]{color:white}.pagebody .walk-explanation{font-size:17px;line-height:1.7;min-height:85px;margin:18px 0 0}.guide-dialog{width:min(1350px,96vw);max-width:96vw;max-height:94vh;padding:16px;background:#fff;color:#17202c;border:0;border-radius:14px}.guide-dialog::backdrop{background:#000b}.guide-dialog img{width:100%;height:auto;display:block}.guide-dialog button{display:block;margin:0 0 12px auto;padding:12px 18px;background:#17202c;color:#fff;border:0;border-radius:8px;font-size:16px;cursor:pointer}.guide-dialog p{font-size:14px}.impulse .walkthrough{border-radius:0}.mobile-help{font-weight:600}body[data-guide=true] .mobile-help{background:var(--accent);color:var(--bg)}body[data-guide=true] .impulse .mobile-help{color:#161916}body[data-guide=true] .home .mobile-help{color:#fff}
@keyframes guide-pulse{50%{box-shadow:0 0 0 7px #ffb00066}}
@media(max-width:800px){.site nav.mobile-bar{grid-template-columns:repeat(5,minmax(0,1fr))}.walkthrough{padding:15px}.walk-head{display:block}.walk-head button{margin-bottom:16px}.walk-controls{display:grid;grid-template-columns:1fr}.walk-controls button{text-align:left}.pagebody .walk-explanation{min-height:0;font-size:16px}.pagebody .walk-head h3{font-size:22px}.walk-highlight{border-width:2px}}
@media(prefers-reduced-motion:reduce){.walk-highlight{transition:none!important;animation:none!important}}

/* Keep the site navigation readable as the available width changes. */
.site > .wrap > nav{gap:24px}
.site > .wrap > nav > .logo,.site > .wrap > nav > .nav-action{flex-shrink:0;white-space:nowrap}
.site > .wrap > nav .navlinks{align-items:center;gap:clamp(14px,1.7vw,28px)}
.site > .wrap > nav .navlinks a{white-space:nowrap;font-weight:400;text-decoration:none}
@media(min-width:801px) and (max-width:1200px){
 .site > .wrap > nav{display:grid;grid-template-columns:1fr auto;height:auto;min-height:100px;padding:22px 0 18px;row-gap:20px}
 .site > .wrap > nav > .logo{grid-column:1;grid-row:1;justify-self:start}
 .site > .wrap > nav > .nav-action{grid-column:2;grid-row:1}
 .site > .wrap > nav .navlinks{grid-column:1 / -1;grid-row:2;display:flex;justify-content:space-between;gap:12px}
}
/* Full instructions start with the physical connection, with images beside each stage. */
.pagebody .setup-steps.from-start{margin-top:30px}
.pagebody .from-start > .full-step{display:block;padding:26px 0 28px 48px;border-bottom:1px solid var(--line)}
.pagebody .from-start > .full-step:before{top:27px}
.pagebody .from-start .step-copy > b{font-size:22px;line-height:1.35;max-width:850px}
.pagebody .from-start .step-copy > p{max-width:850px;font-size:17px;line-height:1.8;margin-top:12px!important}
.pagebody .from-start > .has-media{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:30px;align-items:start}
.pagebody .from-start .walkthrough{grid-column:1 / -1;margin:0}
.step-figure{margin:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel)}
.pagebody .step-figure img{display:block;width:100%;height:auto;max-height:none;margin:0;border-radius:0}
.step-figure figcaption{padding:14px 18px;font-size:14px;color:var(--muted);line-height:1.6}
.step-figure button{margin:0 18px 18px;padding:10px 14px;border:1px solid var(--line);background:var(--bg);color:var(--fg);font:inherit;font-size:14px;border-radius:6px;cursor:pointer}
.step-figure button:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.impulse .step-figure{border-radius:0}
@media(max-width:900px){.pagebody .from-start > .has-media{grid-template-columns:minmax(0,1fr);gap:18px}.pagebody .from-start > .full-step{padding-left:42px}.pagebody .from-start .step-copy > b{font-size:20px}.pagebody .from-start .step-copy > p{font-size:16px}}
.pagebody .from-start > .full-step:has(.walkthrough) > .step-copy{grid-column:1 / -1}

/* The guide shows one action at a time; the complete text stays available below. */
body[data-guide=true] .subpage-layout{grid-template-columns:minmax(0,1fr)}
body[data-guide=true] .subpage-sidebar{display:none}
body[data-guide=true] .breadcrumbs{margin-bottom:12px}
body[data-guide=true] .subpage-heading{padding:8px 0 24px;margin-bottom:22px}
body[data-guide=true] .subpage-heading h1{font-size:clamp(32px,3.6vw,54px);letter-spacing:-1.5px}
body[data-guide=true] .subpage-heading>.primary{display:none}
body[data-guide=true] .subpage-heading .eyebrow{margin-bottom:10px}
.pagebody .wizard-intro{font-size:17px;color:var(--muted);margin-bottom:22px;line-height:1.6}
.setup-wizard{border:1px solid var(--line);background:var(--panel);padding:28px;border-radius:18px;box-sizing:border-box}
/* Desktop: shrink the whole click-through setup card only — not the page. */
@media(min-width:1001px){
  .setup-wizard{
    max-width:820px;
    margin-left:auto;
    margin-right:auto;
    padding:18px;
  }
  .wizard-progress{margin:16px 0 14px;gap:14px}
  .wizard-step.screenshot-first{
    grid-template-columns:minmax(0,1.2fr) minmax(220px,.55fr);
    gap:18px;
  }
  .screenshot-first .wizard-copy h2{font-size:22px;margin-bottom:10px}
  .screenshot-first .wizard-text{font-size:14px;line-height:1.6;margin-bottom:12px}
  .pagebody .screen-reading{margin-bottom:12px}
  .screen-rail{margin-top:14px}
  .setup-wizard .screen-rail button{flex:0 0 100px}
  .pagebody .screen-rail img{height:52px}
  .wizard-footer{margin-top:10px;padding-top:14px}
}
.setup-wizard button{font:inherit;font-size:15px;line-height:1.35;padding:12px 18px;background:var(--bg);color:var(--fg);border:1px solid var(--line);border-radius:8px;cursor:pointer}
.setup-wizard button:focus-visible,.wizard-help summary:focus-visible,.guide-all>summary:focus-visible{outline:2px solid var(--fg);outline-offset:4px}
.setup-wizard button:disabled{opacity:.4;cursor:default}
.wizard-choices,.wizard-os{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.wizard-os{margin-top:14px;font-size:14px}.wizard-os[hidden]{display:none}
.wizard-os button{font-size:14px;padding:8px 14px}
.setup-wizard button[aria-pressed=true],.setup-wizard [data-wizard-next]{background:var(--accent);border-color:var(--accent);color:#101714}
.home .setup-wizard button[aria-pressed=true],.home .setup-wizard [data-wizard-next]{color:white}
.wizard-progress{display:flex;gap:22px;align-items:center;margin:26px 0 24px;font-size:14px;color:var(--muted)}
.wizard-progress span{white-space:nowrap}.wizard-progress progress{width:100%;height:4px;appearance:none;border:0;background:var(--line);border-radius:8px;overflow:hidden}
.wizard-progress progress::-webkit-progress-bar{background:var(--line)}.wizard-progress progress::-webkit-progress-value{background:var(--fg)}.wizard-progress progress::-moz-progress-bar{background:var(--fg)}
.wizard-step{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:40px;align-items:start;min-height:380px}
.pagebody .wizard-copy h2,.pagebody .wizard-done h2{font-size:clamp(24px,2.3vw,34px);line-height:1.2;letter-spacing:-.7px;margin:0 0 18px;font-weight:600}
.wizard-copy h2:focus,.wizard-done h2:focus{outline:none}
.pagebody .wizard-text{font-size:17px;line-height:1.7;margin-bottom:22px}
.wizard-result{border-left:3px solid var(--accent);padding:0 0 0 16px;margin-bottom:24px}
.wizard-result>span{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.pagebody .wizard-result p{font-size:15px;line-height:1.6;margin:6px 0 0}
.wizard-help{border-top:1px solid var(--line);font-size:14px}.wizard-help summary{cursor:pointer;padding:12px 0;line-height:1.5}.pagebody .wizard-help p{margin:0 0 16px;font-size:15px;line-height:1.7}
.wizard-figure{margin:0}.wizard-image{position:relative;overflow:hidden;border:1px solid #d5d9df;border-radius:8px;background:#fff}
.pagebody .wizard-image img{width:100%;height:auto;max-height:none;display:block;margin:0;border-radius:0}
.wizard-spot{position:absolute;border:3px solid #e27900;border-radius:6px;box-shadow:0 0 0 2px #fff9;pointer-events:none;background:#ffa5000a}
.wizard-image.is-animating .wizard-spot{animation:wizard-point 1.1s ease-in-out 3}
@keyframes wizard-point{0%,100%{box-shadow:0 0 0 2px #fff9}50%{box-shadow:0 0 0 7px #fbb03b77;background:#ffa50024}}
.wizard-figure figcaption{font-size:12px;line-height:1.5;color:var(--muted);margin:10px 0}
.wizard-visual-actions{display:flex;gap:10px;flex-wrap:wrap}.wizard-visual button{font-size:13px;padding:9px 12px}
.wizard-flow{padding:24px;background:var(--bg);border:1px solid var(--line);border-radius:12px;margin-bottom:12px}
.wizard-flow-label{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.pagebody .wizard-flow ol{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:12px}
.pagebody .wizard-flow li{display:flex;align-items:center;gap:14px;border:1px solid var(--line);padding:16px;margin:0;border-radius:8px;font-size:16px;line-height:1.4}
.wizard-flow-number{display:grid;place-items:center;width:30px;height:30px;flex-shrink:0;border:1px solid var(--line);border-radius:50%;font-size:13px}
.wizard-flow.is-animating li{animation:wizard-flow-step 1.2s ease both;animation-delay:var(--step-delay)}
@keyframes wizard-flow-step{0%,100%{border-color:var(--line)}40%,70%{border-color:var(--fg);transform:translateX(4px)}}
.wizard-footer{display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--line);margin-top:24px;padding-top:20px}
.wizard-done{max-width:700px;padding:25px 0;min-height:330px}.wizard-done>button{display:block;margin-top:22px}
.guide-all{margin:26px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.guide-all>summary{cursor:pointer;padding:20px 0;font-size:16px}.guide-all[open]>summary{margin-bottom:18px}
.impulse .setup-wizard,.impulse .wizard-flow,.impulse .wizard-image,.impulse .setup-wizard button{border-radius:0}
@media(max-width:800px){.setup-wizard{padding:18px}.wizard-step{grid-template-columns:minmax(0,1fr);gap:24px;min-height:0}.wizard-choices{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;gap:8px}.wizard-choices button{font-size:13px;padding:11px 8px}.wizard-progress{margin:22px 0}.pagebody .wizard-copy h2{font-size:25px}.pagebody .wizard-text{font-size:16px}.wizard-flow{padding:16px}.wizard-flow li{padding:12px!important;font-size:14px!important}.wizard-footer{margin-top:20px}.wizard-done{min-height:0}}
@media(prefers-reduced-motion:reduce){.wizard-image.is-animating .wizard-spot,.wizard-flow.is-animating li{animation:none!important}}
.wizard-copy h2,.wizard-done h2{scroll-margin-top:20px}

/* Screens are the instructions: numbered labels and arrows stay on the image. */
.wizard-step.screenshot-first{grid-template-columns:minmax(0,1fr) minmax(220px,.32fr);gap:28px;min-height:0}
.screenshot-first .wizard-copy h2{font-size:26px}.screenshot-first .wizard-text{font-size:15px;line-height:1.65}
.pagebody .screen-reading{font-size:13px;color:var(--muted);margin:0 0 18px}
.annotated-screen{container-type:inline-size;isolation:isolate;position:relative;overflow:hidden;background:#fff;line-height:1.3;color:#17202c}
.annotated-screen>img{width:100%;height:auto;display:block;margin:0;border-radius:0}
.screen-arrows{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.screen-target{position:absolute;border:2px solid #d85800;border-radius:4px;box-shadow:0 0 0 1px #fff9;z-index:2;pointer-events:none}
.screen-label{position:absolute;display:flex;align-items:center;gap:.65cqw;padding:.55cqw .8cqw .55cqw .5cqw;background:#fff9ec;color:#311500;border:1.5px solid #d85800;border-radius:5px;font-family:Arial,sans-serif;font-size:1.6cqw;font-weight:600;line-height:1.25;box-shadow:0 2px 7px #0002;z-index:3;overflow-wrap:normal}
.screen-number{display:grid;place-items:center;flex-shrink:0;width:2.5cqw;height:2.5cqw;border-radius:50%;background:#c54f00;color:#fff;font-size:1.55cqw}
.is-animating .screen-target{animation:screen-cue 1.15s ease both;animation-delay:var(--cue-delay)}
.is-animating .screen-label{animation:label-cue 1.15s ease both;animation-delay:var(--cue-delay)}
@keyframes screen-cue{0%,100%{background:transparent;box-shadow:0 0 0 1px #fff9}35%,70%{background:#ffb00025;box-shadow:0 0 0 5px #ffb00066}}
@keyframes label-cue{0%,100%{background:#fff9ec}35%,70%{background:#ffda99;transform:translateY(-2px)}}
.screen-rail{display:flex;gap:10px;overflow-x:auto;overscroll-behavior-x:contain;margin-top:22px;padding:5px 2px 12px;scrollbar-width:thin}
.setup-wizard .screen-rail button{flex:0 0 114px;padding:6px;text-align:left;font-size:11px;line-height:1.3;background:var(--bg);color:var(--fg);border:1px solid var(--line)}
.setup-wizard .screen-rail button[aria-pressed=true]{border:2px solid var(--fg);padding:5px;background:var(--bg);color:var(--fg)}
.pagebody .screen-rail img{width:100%;height:62px;object-fit:cover;margin:0 0 6px;border-radius:3px;opacity:.75}.pagebody .screen-rail [aria-pressed=true] img{opacity:1}
.screen-rail span{display:block}.guide-command{display:block;font-size:12px;line-height:1.6;overflow-wrap:anywhere;background:var(--bg);padding:12px;border:1px solid var(--line);margin-bottom:16px;user-select:all}
.guide-dialog .annotated-screen img{width:100%;margin:0}.guide-dialog .annotated-screen{border:1px solid #ccc}.guide-dialog .guide-command{background:#f5f6f8;border:1px solid #ccc;color:#17202c;font-size:15px}.guide-dialog .annotated-screen{margin:12px 0}
.all-screen-list{display:grid;gap:38px;max-width:960px;margin:0 auto 28px}.pagebody .all-screen-step h3{margin:0 0 16px}.pagebody .all-screen-step>p{font-size:15px;margin:16px 0 0}
[data-wizard-stage]{scroll-margin-top:20px}.wizard-footer{margin-top:12px}.wizard-copy>button{margin-top:12px;font-size:13px}
@media(max-width:1000px){.wizard-step.screenshot-first{grid-template-columns:minmax(0,1fr)}.screenshot-first .wizard-copy{grid-row:1}.screenshot-first .wizard-copy h2{font-size:25px;margin-bottom:8px}.screenshot-first .wizard-text{margin-bottom:10px}.screenshot-first .wizard-help{display:inline-block;vertical-align:top;width:calc(50% - 8px);margin-right:8px}.screenshot-first .wizard-help[open]{display:block;width:100%}.screenshot-first .screen-reading{display:none}}
@media(max-width:600px){.setup-wizard{padding:12px}.wizard-step.screenshot-first{gap:14px}.screen-label{border-width:1px;font-size:1.85cqw;border-radius:3px;gap:.4cqw;padding:.5cqw}.screen-number{width:2.7cqw;height:2.7cqw;font-size:1.8cqw}.screen-target{border-width:1px}.wizard-visual-actions button{font-size:12px}.screen-rail{margin-top:14px}.setup-wizard .screen-rail button{flex-basis:98px}.pagebody .screen-rail img{height:52px}}
@media(prefers-reduced-motion:reduce){.is-animating .screen-target,.is-animating .screen-label{animation:none!important}}
@media(max-width:600px){
  .screen-dialog{
    width:calc(100vw - 20px);
    max-width:calc(100vw - 20px);
    max-height:calc(100dvh - 20px);
    margin:auto;
    padding:12px;
    overflow:auto;
    overscroll-behavior:contain;
    box-sizing:border-box;
  }
  .screen-dialog .screen-zoom-pane{
    overflow:auto;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-x pan-y pinch-zoom;
    max-height:calc(100dvh - 110px);
    border-radius:8px;
  }
  .screen-dialog .annotated-screen{
    min-width:0;
    width:100%;
    max-width:100%;
    margin:0;
    transform-origin:0 0;
  }
  .screen-dialog .annotated-screen img{
    width:100%;
    max-width:100%;
    height:auto;
    display:block;
  }
  .screen-dialog>button{position:sticky;top:0;left:0;z-index:5}
  .screen-dialog:after{
    content:'Щипком можно увеличить. Двойной тап — крупнее / обратно.';
    display:block;
    font:13px/1.5 Arial,sans-serif;
    margin-top:12px;
    color:#526074;
  }
}