/* An in-page navigator: room is reserved for the lesson, so it never covers the task. */
.header-actions #source-guide-toggle{width:48px;min-width:48px;height:44px;position:relative}
.header-actions #source-guide-toggle>svg{width:41px;height:41px;stroke:none;overflow:visible}
#source-guide-toggle[aria-pressed=true]{background:#25173b}
.sg-icon-book{transform-origin:24px 37px;animation:sg-book-breathe 3.2s ease-in-out infinite}
.sg-icon-parcel{animation:sg-icon-lift 3.2s ease-in-out infinite}
.sg-icon-spark{transform-origin:39px 13px;animation:sg-spark 3.2s ease-in-out infinite}
.source-guide{--guide-purple:#8854ec;position:absolute;z-index:8;right:16px;top:calc(var(--visual-top,0px) + var(--header-height) + env(safe-area-inset-top));height:calc(var(--visual-height,100dvh) - var(--header-height) - env(safe-area-inset-top) - 16px);width:320px;overflow:auto;background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:24px;padding:22px;display:flex;flex-direction:column;gap:16px;scrollbar-width:thin;transform-origin:right center}
.source-guide[hidden]{display:none}
.source-guide[inert]{pointer-events:none}
.guide-layout-motion #content-scroll{overflow-anchor:none;pointer-events:none;will-change:opacity}
.guide-layout-motion .source-guide{will-change:transform,opacity}
.guide-layout-motion #source-guide-toggle{transition:background-color .3s ease}
.sg-top{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:14px;color:var(--muted)}
.sg-top button{width:32px;height:32px;padding:5px;background:none;color:var(--ink);border:0;border-radius:8px}
.sg-top svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.6;fill:none}
.sg-tools{display:flex;gap:4px;align-items:center}
.sg-stage{margin-block:auto;display:flex;flex-direction:column;gap:14px}
.sg-art{width:100%;height:auto;display:block;overflow:visible;stroke:none}
.sg-art-link{display:block;width:100%;padding:0;border:0;background:transparent;cursor:pointer;border-radius:12px}
.sg-copy h2{font-size:24px;line-height:1.25;letter-spacing:-.6px;font-weight:600;margin:0 0 12px}
.sg-copy p{font-size:16px;line-height:1.65;margin:0;color:var(--muted);text-wrap:pretty}
.sg-selected{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted);border-top:1px solid var(--line);padding-top:14px}
.sg-status{font-size:14px;color:var(--guide-purple);min-height:22px}
.sg-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.sg-actions button{border:1px solid var(--line);border-radius:12px;padding:11px 14px;min-height:44px;background:var(--bg);color:var(--ink);font-size:15px}
.sg-actions .sg-next{background:var(--button);color:var(--button-ink);border-color:var(--button);flex:1}
.sg-actions .sg-locate{width:100%;background:transparent;color:var(--guide-purple);border:0;padding:3px;min-height:34px}
.sg-actions button:disabled{opacity:.4;cursor:not-allowed}
.sg-progress{display:flex;gap:5px}
.sg-progress span{height:3px;flex:1;background:var(--line);border-radius:3px}
.sg-progress .sg-passed,.sg-progress .sg-current{background:var(--guide-purple)}
/* Legacy target styles; runtime uses a plain positioned outline. */
@property --sg-edge-angle{syntax:'<angle>';inherits:false;initial-value:0deg}
.sg-target{--sg-target-radius:16px;outline:3px solid #9b6cf2!important;outline-offset:6px;border-radius:var(--sg-target-radius)!important;scroll-margin-block:28px}
.sg-target:not(.pj-context){position:relative}
button.sg-target{--sg-target-radius:12px}
@supports (mask-composite:exclude) or (-webkit-mask-composite:xor){
 .sg-target{outline:none!important}
 .sg-target::before,.sg-target::after{content:'';position:absolute;inset:var(--sg-edge-inset,-7px);border-radius:var(--sg-edge-radius,calc(var(--sg-target-radius) + 7px));pointer-events:none;box-sizing:border-box;z-index:2}
 .sg-target::before{border:2px solid rgb(167 114 248 / .3);box-shadow:0 0 11px rgb(143 94 245 / .32),0 0 22px rgb(216 119 221 / .16),inset 0 0 8px rgb(105 160 255 / .17);animation:sg-edge-breathe 3.6s ease-in-out infinite}
 .sg-target::after{padding:3.25px;background:conic-gradient(from var(--sg-edge-angle),#a075f6 0deg,#657cff 65deg,#65bee9 120deg,#a98afa 170deg,#ed8fd0 225deg,#bd69ed 290deg,#a075f6 360deg);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;animation:sg-edge-flow 6s linear infinite}
 .sg-target-pulse::after{animation:sg-edge-flow 6s linear infinite,sg-edge-arrive .5s ease-out}
}
.sg-target:is(.detail-trade,.pj-context,.pj-source-list){--sg-edge-inset:0px;--sg-edge-radius:var(--sg-target-radius)}
:root[data-theme=dark] .sg-target::before{box-shadow:0 0 13px rgb(143 94 245 / .5),0 0 26px rgb(216 119 221 / .23),inset 0 0 10px rgb(105 160 255 / .2)}
.guide-suspended .sg-target::before,.guide-suspended .sg-target::after,.guide-layout-motion .sg-target::before,.guide-layout-motion .sg-target::after{animation-play-state:paused!important}
.source-guide button:focus-visible{outline:2px solid #8854ec;outline-offset:3px}
.guide-on .content-shell{right:352px;max-width:none}
.sg-float{animation:sg-float 3.2s ease-in-out infinite}.sg-side-left{animation:sg-left 3.8s ease-in-out infinite}.sg-side-right{animation:sg-right 3.8s ease-in-out infinite}
.sg-cursor{animation:sg-point 3.8s ease-in-out infinite}.sg-lens{transform-origin:160px 79px;animation:sg-inspect 4s ease-in-out infinite}
.sg-trend{stroke-dasharray:140;animation:sg-draw 3.8s ease-in-out infinite}.sg-note,.sg-message{animation:sg-rise 3.8s ease-in-out infinite}.sg-coins{animation:sg-rise 3.8s ease-in-out infinite}.sg-book{transform-origin:160px 135px;animation:sg-book-breathe 3.8s ease-in-out infinite}
.sg-art .sg-check{stroke-dasharray:55;animation:sg-draw 3.8s ease-in-out infinite}
.guide-suspended .source-guide,.guide-suspended #source-guide-toggle svg,.guide-idle .source-guide{animation-play-state:paused}
.guide-suspended .source-guide *,.guide-suspended #source-guide-toggle svg *{animation-play-state:paused!important}
@keyframes sg-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes sg-icon-lift{0%,100%{transform:translateY(4px);opacity:.75}45%,65%{transform:translateY(-3px);opacity:1}}
@keyframes sg-book-breathe{0%,100%{transform:scaleY(.92)}50%{transform:scaleY(1)}}
@keyframes sg-spark{0%,100%{transform:scale(.6) rotate(-20deg);opacity:.4}50%{transform:scale(1) rotate(30deg);opacity:1}}
@keyframes sg-left{0%,100%{transform:translateX(0);opacity:.5}50%{transform:translateX(11px);opacity:.8}}
@keyframes sg-right{0%,100%{transform:translateX(0);opacity:.5}50%{transform:translateX(-11px);opacity:.8}}
@keyframes sg-point{0%,100%{transform:translate(15px,10px)}45%,70%{transform:translate(-15px,-18px)}}
@keyframes sg-inspect{0%,100%{transform:translateX(7px) rotate(3deg)}50%{transform:translate(-12px,-5px) rotate(-3deg)}}
@keyframes sg-draw{0%,12%{stroke-dashoffset:140}50%,90%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}
@keyframes sg-rise{0%,100%{transform:translateY(5px);opacity:.7}40%,80%{transform:translateY(-5px);opacity:1}}
@keyframes sg-edge-flow{to{--sg-edge-angle:360deg}}
@keyframes sg-edge-breathe{0%,100%{opacity:.62}50%{opacity:1}}
@keyframes sg-edge-arrive{from{opacity:0}to{opacity:1}}
@media(max-width:1199px){
 :root{--guide-height:280px}
 .guide-on .content-shell{right:0;height:calc(var(--visual-height,100dvh) - var(--header-height) - env(safe-area-inset-top) - var(--guide-height));max-width:960px}
 .source-guide{left:0;right:0;top:calc(var(--visual-top,0px) + var(--visual-height,100dvh) - var(--guide-height));width:auto;height:var(--guide-height);max-width:960px;margin:auto;border-radius:24px 24px 0 0;padding:12px 18px max(12px,env(safe-area-inset-bottom));gap:6px;transform-origin:center bottom}
 .sg-top{font-size:12px;min-height:24px;flex-shrink:0}.sg-top button{height:26px;width:26px}
 .sg-stage{flex:1;flex-direction:row;align-items:flex-start;margin:0;gap:14px;min-height:0;overflow-y:auto;scrollbar-width:thin;padding:5px 2px}
 .sg-stage .sg-art-link{position:sticky;top:8px}
 .sg-art-link{width:110px;flex:none}.sg-copy{min-width:0}.sg-copy h2{font-size:19px;margin-bottom:5px}.sg-copy p{font-size:14px;line-height:1.45}
 .sg-selected{display:none}.sg-status{font-size:12px;min-height:18px;flex-shrink:0}.sg-progress{display:none}
 .sg-actions{flex-wrap:nowrap;gap:6px;flex-shrink:0}.sg-actions button{font-size:14px;padding:8px 12px}.sg-actions .sg-locate{width:auto;max-width:38%;font-size:12px;padding:4px 6px;line-height:1.3}
 .guide-keyboard{--guide-height:112px}.guide-keyboard .sg-art-link,.guide-keyboard .sg-copy p,.guide-keyboard .sg-status,.guide-keyboard .sg-top{display:none}.guide-keyboard .sg-stage{min-height:24px}.guide-keyboard .sg-copy h2{font-size:15px;margin:0}
}
@media(min-width:1024px) and (max-width:1199px){.guide-on .content-shell{right:16px}.source-guide{left:272px;right:16px;width:auto}}
@media(max-width:600px){.guide-on .content-shell{max-width:600px}.source-guide{max-width:600px}.sg-art-link{width:87px}.sg-stage{gap:10px}.sg-copy h2{font-size:18px}.source-guide{padding-inline:14px}.sg-copy p{font-size:13px}}
@media(max-width:360px){.header-actions #source-guide-toggle{width:42px;min-width:42px}.header-actions #source-guide-toggle>svg{width:36px;height:36px}.sg-art-link{width:66px}.sg-copy h2{font-size:16px}}
@media(max-width:900px){.sg-target.pj-context{position:relative}}
@media(prefers-reduced-motion:reduce){.source-guide,.source-guide *,#source-guide-toggle *, .sg-target-pulse,.sg-target::before,.sg-target::after{animation:none!important;transition:none!important}}

/* Checkboxes follow the site's black and white, not the browser's default blue. */
#source-guide :is(input[type=checkbox],input[type=radio]){width:16px;height:16px;margin:0 8px 0 0;accent-color:var(--ink);flex:none}