/* Real screenshots remain unmodified; SVG rings use captured pixel coordinates. */
.visual-tag{display:inline-flex;align-items:center;gap:6px;margin-top:12px;color:var(--purple);font-size:12px;font-weight:600}
.visual-tag .icon{width:16px;height:16px}
.visual-walkthrough{margin-top:28px;border:1px solid #d9cdec;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 8px 30px #5532a20a}
.visual-walkthrough [hidden]{display:none!important}
.visual-heading{display:flex;align-items:flex-start;gap:12px;padding:23px 23px 20px;background:#f5f1fc;border-bottom:1px solid var(--border)}
.visual-symbol{display:grid;place-items:center;width:38px;height:38px;border:1px solid #e0d4f3;border-radius:9px;color:var(--purple);background:white;flex-shrink:0}
.visual-heading h2{font-size:21px;line-height:1.5;letter-spacing:0}
.visual-heading p{margin-top:5px;color:var(--muted);font-size:14px;line-height:1.8}
.visual-tabs{display:flex;gap:7px;padding:15px 20px;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:thin;border-bottom:1px solid var(--border);background:#fcfbff}
.visual-tabs a{display:flex;flex-direction:column;align-items:stretch;gap:9px;min-height:44px;flex:0 0 180px;padding:8px;border:1px solid #e4daef;border-radius:10px;color:#766585;font-size:12px;line-height:1.6;background:white}
.visual-tab-preview{display:block;height:100px;overflow:hidden;border:1px solid #e6dfef;border-radius:6px;background:#f4f0fa;direction:ltr}
.visual-tab-preview img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.visual-tab-preview [data-thumbnail-view=mobile]{display:none;object-position:center}
.visual-tab-preview [data-thumbnail-view=mobile]:only-child{display:block}
.is-enhanced .visual-tab-preview [data-thumbnail-view]{display:block}
.visual-tab-label{display:flex;align-items:flex-start;gap:8px}
.visual-tab-label>span:last-child{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.visual-tabs a:hover{background:#eee8ff}
.visual-tabs a[aria-selected=true]{border-color:#d4c4ed;background:#eee8ff;color:var(--purple);font-weight:600}
.visual-number{display:grid;place-items:center;flex-shrink:0;width:25px;height:25px;border:1px solid #ded2ef;border-radius:50%;background:#fff;font-size:12px;font-weight:700;color:var(--purple)}
.visual-tabs a[aria-selected=true] .visual-number{background:var(--purple);color:#fff;border-color:var(--purple)}
.visual-step{padding:20px;scroll-margin-top:20px}
.visual-step+.visual-step{border-top:1px solid var(--border)}
.is-enhanced .visual-step{border-top:0}
.visual-step-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:15px;flex-wrap:wrap}
.visual-step h3{display:flex;align-items:center;gap:10px;font-size:17px;line-height:1.6}
.visual-action-icon{display:grid;place-items:center;flex-shrink:0;width:40px;height:40px;border-radius:11px;background:#eee8ff;border:1px solid #dacbec;color:var(--purple)}
.visual-action-icon .icon{width:23px;height:23px}
.device-switch{display:flex;padding:3px;background:#f4f0f9;border:1px solid #e4daef;border-radius:8px;gap:3px}
.device-switch button{display:flex;align-items:center;justify-content:center;gap:6px;min-height:40px;background:none;border:0;border-radius:5px;padding:7px 12px;color:#766585;font-size:12px;line-height:1.5}
.device-switch .icon{width:17px;height:17px;flex-shrink:0}
.device-switch button[aria-pressed=true]{background:white;box-shadow:0 1px 4px #3b26551a;color:var(--purple);font-weight:700}
.shot-views{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));align-items:start;gap:18px}
.is-enhanced .shot-views{display:block}
.shot{margin:0;min-width:0}
.shot-mobile{width:100%;max-width:412px;margin-inline:auto}
.shot-image{position:relative;display:block;border:1px solid #b9b0c7;border-radius:9px;overflow:hidden;background:#f0eef3;line-height:0;direction:ltr}
.shot-frame{position:relative;display:block}
.shot-image img{display:block;width:100%;height:auto;max-width:100%;max-height:560px;object-fit:contain;object-position:center}
.phone-device{padding:10px;border:1px solid #4d3c65;border-radius:34px;background:#241a32;box-shadow:0 16px 36px #2f245829;direction:ltr}
.phone-speaker{height:10px;display:grid;place-items:start center}
.phone-speaker span{width:42px;height:3px;border-radius:4px;background:#79698d}
.phone-screen{width:100%;aspect-ratio:390/844;overflow-y:auto;overflow-x:hidden;background:#f6f4fa;border-radius:20px;scrollbar-width:thin;scrollbar-color:#ab98c6 #f6f4fa;overscroll-behavior-y:contain;direction:ltr}
.phone-screen:focus-visible{outline:3px solid #bba0ef;outline-offset:3px}
.phone-screen .shot-image{border:0;border-radius:0;box-shadow:none;background:transparent}
.phone-screen .shot-image img{height:auto;max-height:none;object-fit:initial}
.phone-home{height:15px;display:grid;place-items:end center}
.phone-home span{display:block;width:30%;height:4px;background:#e1d5ee;border-radius:4px}
.phone-scroll-hint{display:flex;align-items:center;gap:7px;flex-basis:100%;color:#655078;font-size:12px}
.phone-scroll-hint .icon{width:18px;height:18px;flex-shrink:0}
.shot-highlight{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none}
.shot-highlight rect{fill:none}
.shot-highlight .focus-outline{stroke:#684400cc;stroke-width:5}
.shot-highlight .focus-ring{stroke:#ffca52;stroke-width:3}
.enlarge-hint{display:flex;align-items:center;justify-content:center;gap:6px;background:#faf8ff;color:#2f2458;border-top:1px solid #c6bcdc;font-size:11px;line-height:1.5;padding:7px 9px;pointer-events:none}
.enlarge-hint .icon{width:14px;height:14px}
.shot-mobile .mobile-enlarge{pointer-events:auto;min-height:44px;margin-top:10px;border:1px solid #d8caeb;border-radius:8px;color:var(--purple);font-size:12px;padding:9px 12px;line-height:1.5}
.shot-mobile .mobile-enlarge:hover{background:#eee8ff}
.shot figcaption{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;font-size:11px;line-height:1.7;color:#7a6f89;padding-top:8px}
.shot-device{font-weight:700;color:#655078}
.visual-explanation{font-size:15px;color:#62596f;line-height:1.9;margin-top:15px}
.visual-controls{display:flex;justify-content:space-between;align-items:center;gap:10px;border-top:1px solid var(--border);padding:13px 20px;background:#fcfbff}
.visual-controls button{display:inline-flex;align-items:center;gap:6px;min-height:44px;max-width:38%;border:1px solid #d7c8eb;border-radius:8px;background:#fff;color:var(--purple);font-size:13px;padding:8px 12px;line-height:1.5}
.visual-controls button:disabled{opacity:.38;cursor:default}
.visual-controls .icon{width:16px;height:16px;flex-shrink:0}
.visual-controls output{font-size:12px;color:var(--muted);text-align:center;line-height:1.6}
.previous-arrow{transform:scaleX(-1)}
html[dir=rtl] .previous-arrow{transform:none}
html[dir=rtl] .next-arrow{transform:scaleX(-1)}
.visual-source{border-top:1px solid var(--border);padding:15px 20px;background:#f7f5fa;color:#7b7086;font-size:12px;line-height:1.85}
.visual-source p{display:flex;gap:8px;align-items:flex-start}
.visual-source p>.icon{width:16px;height:16px;flex-shrink:0;margin-top:4px;color:var(--purple)}
.visual-source a{display:inline-flex;align-items:center;gap:7px;margin-top:9px;color:var(--purple);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.visual-source a>.icon{width:14px;height:14px}
.image-viewer{padding:0;border:1px solid #cbbadc;border-radius:12px;width:min(1360px,96vw);max-width:96vw;max-height:94vh;color:var(--text);background:white;box-shadow:0 24px 80px #14072470}
.image-viewer:not([open]){display:none}
.image-viewer::backdrop{background:#170d29c9;backdrop-filter:blur(4px)}
.viewer-toolbar{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:14px 18px;border-bottom:1px solid var(--border);background:#faf8ff}
.viewer-toolbar h2{font-size:16px;line-height:1.7;letter-spacing:0;min-width:0}
.viewer-toolbar>div{display:flex;gap:7px;flex-shrink:0}
.viewer-toolbar button{min-height:44px;padding:8px 12px;border:1px solid #d9cdea;background:white;color:var(--purple);border-radius:7px;font-size:13px;line-height:1.5}
.viewer-toolbar [data-close-image]{background:var(--purple);color:white;border-color:var(--purple)}
.viewer-canvas{max-height:calc(94vh - 105px);overflow:auto;overscroll-behavior:contain;direction:ltr;background:#eae7ee;padding:12px}
.viewer-canvas img{display:block;width:auto;height:auto;max-width:100%;max-height:calc(94vh - 140px);margin:0 auto;object-fit:contain}
.is-zoomed .viewer-canvas img{max-width:none;max-height:none;margin:0}
body.image-open{overflow:hidden}
@media(max-width:680px){
  .visual-walkthrough{border-radius:11px;margin-top:23px}
  .visual-heading{padding:17px;gap:10px}.visual-heading h2{font-size:19px}.visual-heading p{font-size:13px}.visual-symbol{width:32px;height:32px}.visual-symbol .icon{width:19px;height:19px}
  .visual-tabs{padding:11px 13px}.visual-tabs a{flex-basis:148px;font-size:12px}.visual-tab-preview{height:86px}.visual-step{padding:16px 10px}.visual-step h3{font-size:16px}.visual-step-heading{gap:10px}.device-switch button{min-height:40px}
  .visual-tab-preview [data-thumbnail-view=desktop]{display:none}.visual-tab-preview [data-thumbnail-view=mobile]{display:block}.visual-tab-preview [data-thumbnail-view=desktop]:only-child{display:block}.is-enhanced .visual-tab-preview [data-thumbnail-view]{display:block}
  .phone-device{padding:7px;border-radius:27px}.phone-screen{border-radius:16px}.phone-speaker{height:8px}.phone-home{height:12px}.visual-action-icon{width:35px;height:35px}
  .visual-controls{padding:10px 12px;gap:5px}.visual-controls button{font-size:12px;padding:7px 9px}.visual-controls .icon{display:none}.visual-controls output{font-size:11px}
  .visual-source{padding:13px 15px;font-size:11px}.visual-explanation{font-size:14px}.shot-views{grid-template-columns:1fr}.enlarge-hint{font-size:10px;padding:5px 7px}
  .image-viewer{width:calc(100vw - 12px);max-width:calc(100vw - 12px);max-height:96vh;border-radius:8px}.viewer-toolbar{padding:10px;gap:8px;flex-wrap:wrap}.viewer-toolbar h2{font-size:14px;flex-basis:100%}.viewer-toolbar>div{width:100%;justify-content:flex-end}.viewer-toolbar button{font-size:12px}
  .viewer-canvas{padding:6px;max-height:calc(96vh - 150px)}.viewer-canvas img{max-height:calc(96vh - 175px)}.is-zoomed .viewer-canvas img{max-height:none}
}
@media print{.visual-walkthrough{box-shadow:none;break-inside:avoid}.visual-tabs,.visual-controls,.device-switch,.enlarge-hint,.visual-source a,.image-viewer,.phone-speaker,.phone-home,.phone-scroll-hint{display:none!important}.visual-step[hidden]{display:block!important}.shot-views{display:block}.shot-mobile{max-width:250px}.phone-device{padding:0;border:0;box-shadow:none;background:none}.phone-screen{aspect-ratio:auto;overflow:visible;border-radius:0}.visual-tag{display:none}}