.scale-guide{display:grid;grid-template-columns:172px minmax(0,1fr) minmax(180px,240px);align-items:center;gap:24px;padding:18px 36px;border-bottom:1px solid var(--line);background:var(--panel);color:var(--text)}
.sg-overview{margin:0;min-width:0}.sg-map{position:relative;height:132px;overflow:hidden;border:1px solid var(--line);border-radius:10px;background:var(--panel2)}.sg-map canvas{display:block;width:100%;height:100%;outline-offset:-3px}.sg-map canvas:focus-visible{outline:2px solid var(--mint)}.sg-scene-overlay{position:absolute;inset:0;pointer-events:none;overflow:hidden}.sg-map-label{position:absolute;top:8px;left:10px;font:9px var(--mono);letter-spacing:.04em;color:var(--muted);padding:2px 5px;background:color-mix(in srgb,var(--panel) 88%,transparent);border-radius:3px;pointer-events:none}.sg-selection{position:absolute;width:33px;height:33px;transform:translate(-50%,-50%);border:1.5px solid var(--mint);border-radius:50%;box-shadow:0 0 0 4px color-mix(in srgb,var(--mint) 12%,transparent);pointer-events:none}.sg-selection i{position:absolute;width:5px;height:5px;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;background:var(--mint)}.sg-overview figcaption{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:7px;font-size:9px;color:var(--muted)}.sg-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--mint)}
.sg-reading{min-width:0}.sg-path{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin:0 0 8px;font:8px var(--mono);letter-spacing:.12em;color:var(--soft)}.sg-path span{letter-spacing:0;font-size:10px;color:var(--muted)}.sg-path b{font-weight:400;padding:0 6px;color:var(--mint)}.sg-reading h2{font:400 clamp(20px,2vw,29px)/1.2 var(--serif);margin:0 0 8px;letter-spacing:-.02em}.sg-goal{max-width:650px;font-size:12px;line-height:1.7;color:var(--muted);margin:0}.sg-note{max-width:650px;margin:7px 0 0;font-size:10px;line-height:1.6;color:var(--soft)}
.sg-actions{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding-left:22px;border-left:1px solid var(--line)}.sg-actions button{font-size:11px;line-height:1.4;color:var(--mint);text-align:left}.sg-actions [data-sg-next]{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:10px 13px;border:1px solid color-mix(in srgb,var(--mint) 40%,var(--line));border-radius:6px;background:color-mix(in srgb,var(--mint) 7%,var(--panel))}.sg-actions [data-sg-next]:hover{background:color-mix(in srgb,var(--mint) 13%,var(--panel));border-color:var(--mint)}.sg-actions [data-sg-back]{padding:3px 0;color:var(--muted)}.sg-actions [data-sg-back]:hover{color:var(--mint)}.sg-actions button:focus-visible,.sg-source summary:focus-visible{outline:2px solid var(--mint);outline-offset:4px}.sg-actions small{font-size:8px;line-height:1.5;color:var(--soft)}.sg-source{font-size:9px;line-height:1.6;color:var(--soft)}.sg-source summary{cursor:pointer;list-style:none}.sg-source summary::after{content:' +';color:var(--mint)}.sg-source[open] summary::after{content:' −'}.sg-source a{display:block;margin-top:5px;color:var(--mint);font-size:9px;text-underline-offset:3px}.sg-no-canvas .sg-map{height:70px}
@media(max-width:1000px){.scale-guide{grid-template-columns:145px minmax(0,1fr);gap:15px 22px;padding:17px 24px}.sg-map{height:120px}.sg-actions{grid-column:2;flex-direction:row;flex-wrap:wrap;align-items:center;padding-left:0;border-left:0;gap:8px 15px}.sg-actions [data-sg-next]{width:auto}.sg-actions small{flex-basis:100%}.sg-source{display:none}.sg-reading h2{font-size:24px}.sg-overview{grid-row:1/3}}
@media(max-width:580px){.scale-guide{grid-template-columns:95px minmax(0,1fr);gap:12px;padding:14px 18px}.sg-overview{grid-row:1}.sg-map{height:100px}.sg-map-label{font-size:8px;left:5px;top:5px}.sg-overview figcaption{font-size:8px;line-height:1.4;text-align:center}.sg-reading h2{font-size:20px}.sg-path{font-size:7px;gap:5px;margin-bottom:6px}.sg-path span{font-size:9px}.sg-goal{font-size:10px;line-height:1.6}.sg-note{font-size:9px;line-height:1.5}.sg-actions{grid-column:1/-1;gap:8px 14px}.sg-actions [data-sg-next]{flex:1;min-width:160px;font-size:10px;padding:9px 11px}.sg-actions [data-sg-back]{font-size:10px}.sg-actions small{font-size:8px}.sg-selection{width:25px;height:25px}}
@media(prefers-reduced-motion:reduce){.scale-guide *, .scale-guide *::before,.scale-guide *::after{animation:none!important;transition:none!important}}