.walkthrough-player { border:1px solid var(--rule); background:var(--cream-raised); margin:28px 0; }
.walkthrough-titlebar { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; padding:12px 18px; border-bottom:1px solid var(--rule); color:var(--ink-muted); font-size:.78rem; }
.walkthrough-stage { position:relative; }
.walkthrough-viewport { height:480px; overflow:auto; overscroll-behavior:contain; }
.walkthrough-viewport .live-example { margin:0; border:0; }
.walkthrough-viewport .live-source { min-height:260px; max-height:260px; }
.walkthrough-player:not([data-playback-state=manual]) .live-agent { display:none; }
.walkthrough-viewport .live-version { pointer-events:none; }
.walkthrough-viewport .live-toolbar:has(.live-version) { display:none; }
.walkthrough-viewport [data-walkthrough-target] { outline:2px solid var(--focus); outline-offset:3px; }
.walkthrough-cursor { position:absolute; z-index:3; color:var(--focus); font:24px/1 sans-serif; pointer-events:none; text-shadow:0 1px 3px var(--code-bg); }
.walkthrough-player [hidden] { display:none !important; }
.walkthrough-player footer { border-top:1px solid var(--rule); padding:18px; }
.site-main .walkthrough-caption { margin:0 0 16px; min-height:5em; max-width:none; color:var(--ink); }
.walkthrough-controls { display:flex; flex-wrap:wrap; gap:10px; }
.walkthrough-controls button { font:inherit; font-size:.85rem; padding:9px 13px; color:var(--ink); background:var(--code-bg); border:1px solid var(--rule); cursor:pointer; }
.walkthrough-controls [data-playback=play] { border-color:var(--focus); color:var(--focus); }
.walkthrough-controls button:disabled { opacity:.5; cursor:default; }
.walkthrough-controls button:focus-visible { outline:2px solid var(--violet); outline-offset:3px; }
.site-main .walkthrough-status { color:var(--ink-muted); font-size:.8rem; min-height:1.5em; margin:14px 0 0; }
.walkthrough-player[data-playback-state=error] .walkthrough-status { color:var(--danger); }
.walkthrough-transcript { padding:0 18px 18px 42px; margin:0; }
.walkthrough-reading { border-top:1px solid var(--rule); }
.walkthrough-reading > summary { padding:14px 18px; cursor:pointer; color:var(--ink-muted); }
.walkthrough-transcript li { color:var(--ink-muted); margin:8px 0; padding-left:6px; }
.walkthrough-transcript [aria-current=step] { color:var(--focus); }
.walkthrough-plan { border-top:1px dashed var(--rule); padding:20px 0; margin:22px 0; scroll-margin-top:80px; }
.walkthrough-plan strong { color:var(--warning); font-weight:500; }
.walkthrough-plan p { margin:8px 0; }
@media(max-width:640px) { .walkthrough-viewport { height:400px; } .walkthrough-titlebar,.walkthrough-player footer { padding:12px; } .site-main .walkthrough-caption { min-height:0; } }
@media(prefers-reduced-motion:reduce) { .walkthrough-cursor { transition:none; } }