.visual{margin-top:32px;scroll-margin-top:20px}.visual-heading{padding:20px 22px;display:flex;align-items:end;justify-content:space-between;gap:20px}.visual-heading h2{padding:0;border:0;margin:5px 0 0;font-size:20px}.visual-heading label{margin:0;min-width:140px}.visual-heading .dropdown-menu{display:block;margin-top:6px}.visual-scene{background:#101c25;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.visual-scene svg{display:block;width:100%;height:auto;max-height:390px}.visual-legend{display:flex;flex-wrap:wrap;gap:20px;padding:14px 22px;color:var(--muted);font-size:12px}.visual-legend span{display:flex;align-items:center;gap:7px}.visual-legend i{display:block;width:20px;height:3px;background:linear-gradient(90deg,var(--accent),var(--violet))}.visual-legend .legend-teacher{height:0;background:none;border-top:2px dashed #b1c4cf}.visual-legend .legend-target{width:9px;height:9px;border-radius:50%;background:#c3adff}.visual-readout{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.visual-readout div{background:var(--panel);padding:14px 22px}.visual-readout span{display:block;color:var(--muted);font-size:12px}.visual-readout strong{display:block;font-size:17px;margin-top:4px;font-variant-numeric:tabular-nums}.playback{display:flex;align-items:end;gap:16px;padding:18px 22px}.playback label{flex:1;margin:0}.playback input{min-height:28px;padding:0;margin:4px 0 0;accent-color:var(--accent)}.secondary{background:#25323d;border:1px solid #435263;color:var(--text);min-width:82px}.secondary:disabled{opacity:.5;cursor:not-allowed}.secondary:active{transform:scale(.96)}.visual-license{margin:0;padding:0 22px 20px;color:var(--muted);font-size:12px}.visual-license a{color:#a9deeb;text-underline-offset:3px}.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important}@media(max-width:600px){.visual-heading{align-items:start;flex-direction:column}.visual-heading label{width:100%}.visual-readout{grid-template-columns:repeat(2,1fr)}.visual-readout div{padding:12px 16px}.visual-legend{gap:12px}}
.g1-view{width:100%;height:390px}.g1-view canvas{display:block;width:100%;height:100%}.g1-status{margin:0;padding:12px 22px;color:var(--muted);font-size:13px}.visual-footnote a{color:#a9deeb;text-underline-offset:3px}@media(max-width:600px){.g1-view{height:290px}}
.visual-legend .legend-target{background:#ffb95b}
.success-badge{display:flex;align-items:center;gap:10px;margin:12px 22px 0;padding:10px 14px;width:fit-content;max-width:calc(100% - 44px);border:1px solid #416b73;border-radius:6px;background:#142b31;color:#d4f5ec}.success-badge strong,.success-badge small{display:block}.success-badge strong{font-size:13px}.success-badge small{font-size:12px;color:#b3cec7}.success-icon{width:25px;height:25px;flex:none;fill:none;stroke:#9de3cc;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.success-badge.celebrate{animation:success-enter 220ms ease-out 140ms both}.success-badge.celebrate .success-icon path{stroke-dasharray:16;animation:success-check 220ms ease-out 180ms both}@keyframes success-enter{from{opacity:0;transform:translateY(4px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes success-check{from{stroke-dashoffset:16}to{stroke-dashoffset:0}}@media(prefers-reduced-motion:reduce){.success-badge.celebrate,.success-badge.celebrate .success-icon path{animation:none}}