:root:has(.walkthrough){--sl-content-width:60rem}.walkthrough{--wt-accent:var(--frog-400);--wt-gap:.85rem;--wt-radius:var(--froglet-card-radius,6px);--wt-line:hsl(var(--froglet-border));container:walkthrough/inline-size}html[data-theme=light] .walkthrough{--wt-accent:var(--frog-700)}.walkthrough:focus-visible{outline:2px solid var(--wt-accent);outline-offset:3px}.walkthrough__stage{gap:var(--wt-gap);grid-template-columns:minmax(0,1fr);grid-template-areas:"lesson""scene""term";display:grid}.walkthrough #lesson-wrap{flex-direction:column;grid-area:lesson;gap:.6rem;min-width:0;min-height:0;display:flex}.walkthrough #lesson-card{background:var(--bg-elevated-2);border:1px solid var(--wt-line);border-radius:var(--wt-radius);color:var(--fg1);padding:1rem 1.1rem}.walkthrough .step-n{font-family:var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--wt-accent);margin-bottom:.6rem;font-size:.7rem;font-weight:700;line-height:1}.walkthrough .step-t{font-family:var(--font-mono);letter-spacing:-.01em;color:var(--fg1);margin-bottom:.55rem;font-size:1.2rem;font-weight:600;line-height:1.2}.walkthrough .step-desc{color:var(--fg2);font-size:.92rem;line-height:1.6}.walkthrough .step-desc a{color:var(--wt-accent);border-bottom:1px solid color-mix(in srgb, var(--wt-accent) 35%, transparent);transition:border-color var(--dur-fast) var(--ease-out);text-decoration:none}.walkthrough .step-desc a:hover{border-bottom-color:var(--wt-accent)}.walkthrough .step-desc code,.walkthrough #annotation code{border-radius:var(--r-2);background:var(--bg-elevated);font-family:var(--font-mono);color:var(--accent-code);padding:1px 6px;font-size:.88em}.walkthrough #annotation{background:var(--bg-elevated-2);border:1px solid var(--wt-line);border-left:3px solid var(--wt-accent);border-radius:0 var(--wt-radius) var(--wt-radius) 0;max-height:9.5rem;color:var(--fg2);padding:.75rem 1rem;font-size:.85rem;line-height:1.55;display:none;overflow-y:auto}.walkthrough #annotation strong{color:var(--fg1);font-weight:600}.walkthrough #annotation .hl{color:var(--wt-accent);font-weight:600}.walkthrough #scene{aspect-ratio:16/10;background:var(--bg-elevated-2);border:1px solid var(--wt-line);border-radius:var(--wt-radius);grid-area:scene;min-width:0;min-height:0;position:relative;overflow:hidden}.walkthrough #scene canvas{width:100%;height:100%;display:block}.walkthrough #term{background:var(--term-bg);border:1px solid var(--term-border);border-radius:var(--wt-radius);flex-direction:column;grid-area:term;min-width:0;height:14rem;min-height:0;display:flex;overflow:hidden}.walkthrough #term-bar{background:var(--term-head-bg);border-bottom:1px solid var(--term-border);flex-shrink:0;align-items:center;gap:8px;height:34px;padding:0 14px;display:flex}.walkthrough .traffic{align-items:center;gap:6px;display:flex}.walkthrough .tl{border-radius:50%;width:9px;height:9px}.walkthrough .tl-close{background:var(--danger)}.walkthrough .tl-min{background:var(--bolt)}.walkthrough .tl-max{background:var(--frog-400)}.walkthrough #term-title{text-align:center;font-family:var(--font-mono);letter-spacing:.02em;color:var(--fg3);flex:1;font-size:.72rem;font-weight:500}.walkthrough #term-body{background:var(--term-bg);min-height:0;color:var(--term-text);font-family:var(--font-mono);flex:1;padding:12px 14px;font-size:.78rem;line-height:1.65;overflow-y:auto}.walkthrough #term-body::-webkit-scrollbar{width:4px}.walkthrough #term-body::-webkit-scrollbar-track{background:0 0}.walkthrough #term-body::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:2px}.walkthrough .tp{color:var(--frog-400)}.walkthrough .tc{color:var(--term-text)}.walkthrough .to{color:var(--fg3)}.walkthrough .th{color:var(--bolt)}.walkthrough .ts{color:var(--frog-200)}.walkthrough .tm{color:var(--fg3)}.walkthrough .te{color:var(--danger)}.walkthrough .tv{color:#74c3c6}.walkthrough .cursor-line{align-items:center;display:flex}.walkthrough .cursor{background:var(--frog-400);width:7px;height:14px;animation:1s step-end infinite walkthrough-blink;display:inline-block}@keyframes walkthrough-blink{50%{opacity:0}}.walkthrough #nav{margin-top:var(--wt-gap);padding-top:var(--wt-gap);border-top:1px solid var(--wt-line);align-items:center;gap:.75rem;display:flex}.walkthrough .pips{flex:1;align-items:center;gap:5px;min-width:0;display:flex}.walkthrough .pip{border-radius:var(--r-pill);background:var(--border-strong);cursor:pointer;max-width:20px;height:4px;transition:background var(--dur-fast) var(--ease-out);border:none;flex:1 1 0;padding:0;position:relative}.walkthrough .pip:after{content:"";position:absolute;inset:-10px -2px}.walkthrough .pip:hover{background:var(--fg3)}.walkthrough .pip.done{background:var(--frog-600)}.walkthrough .pip.on{background:var(--wt-accent)}.walkthrough #prevBtn,.walkthrough #nextBtn{justify-content:center;min-width:6.75rem}.walkthrough #prevBtn:disabled{opacity:.35;cursor:default}.walkthrough #prevBtn:focus-visible,.walkthrough #nextBtn:focus-visible{outline:2px solid var(--wt-accent);outline-offset:2px}.walkthrough__hint,.walkthrough__noscript{color:var(--fg3);margin:.75rem 0 0;font-size:.78rem;line-height:1.5}@container walkthrough (width>=800px){.walkthrough__stage{grid-template:"lesson scene""term scene"minmax(0,1fr)/minmax(270px,340px) minmax(0,1fr);height:clamp(520px,68svh,660px)}.walkthrough #scene{aspect-ratio:auto}.walkthrough #term{height:auto}}@container walkthrough (width<=560px){.walkthrough #scene{aspect-ratio:1}}@container walkthrough (width<=480px){.walkthrough #lesson-card{padding:.85rem .9rem}.walkthrough .step-t{font-size:1.05rem}.walkthrough .step-desc{font-size:.86rem;line-height:1.5}.walkthrough #term{height:12rem}.walkthrough #term-body{padding:8px 10px;font-size:.7rem;line-height:1.5}.walkthrough #prevBtn,.walkthrough #nextBtn{min-width:5.25rem;padding-inline:.75rem}}@media (pointer:coarse){.walkthrough__hint{display:none}}@media (prefers-reduced-motion:reduce){.walkthrough .cursor{animation:none}}