/* Diagrams use the current learning room's palette in light and dark mode. */
.vm-cover,.vm-playground{--vm-a:var(--rom-accent,#245c4b);--vm-b:var(--rom-alt,#a3621e);--vm-soft:var(--rom-fill,#dce9d8);--vm-paper:var(--surface,#fff);--vm-ink:var(--ink,#21392f);color:var(--vm-ink)}
.vm-a{fill:var(--vm-a)}.vm-b{fill:var(--vm-b)}.vm-soft{fill:var(--vm-soft)}.vm-ink{fill:var(--vm-ink)}.vm-paper{fill:var(--vm-paper)}
.vm-stroke,.vm-accent-stroke,.vm-guide{fill:none;stroke:var(--vm-ink);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.vm-accent-stroke{stroke:var(--vm-a);stroke-width:4}.vm-guide{stroke:var(--vm-b);stroke-dasharray:5 5}
.vm-clock{fill:var(--vm-paper);stroke:var(--vm-a);stroke-width:3}.vm-shape{fill:var(--vm-soft);stroke:var(--vm-a);stroke-width:3}
.vm-translucent{fill:var(--vm-b);fill-opacity:.35;stroke:var(--vm-b);stroke-width:1}
.vm-green{fill:#23764b;stroke:var(--vm-paper);stroke-width:2}.vm-on-green{fill:#fff;font:600 18px system-ui}
.vm-set-a{fill:var(--vm-a);fill-opacity:.12;stroke:var(--vm-a);stroke-width:2}.vm-set-b{fill:var(--vm-b);fill-opacity:.12;stroke:var(--vm-b);stroke-width:2}
.vm-cube-front{fill:var(--vm-a);stroke:var(--vm-paper);stroke-width:1}.vm-cube-top{fill:var(--vm-soft);stroke:var(--vm-paper);stroke-width:1}.vm-cube-side{fill:var(--vm-b);stroke:var(--vm-paper);stroke-width:1}
.vm-label,.vm-big{fill:var(--vm-ink);font:14px system-ui,sans-serif}.vm-big{font-size:29px;font-weight:700}
.vm-cover{display:block;overflow:hidden;background:var(--rom-ground,var(--bg2,#edf3ee));border-radius:16px;min-width:0}
.vm-cover svg{display:block;width:100%;height:100%;max-height:160px}
.vm-playground{border:1px solid var(--line,#dbe4dc);border-radius:20px;padding:20px;background:var(--surface,#fff);overflow:hidden}
.vm-play-head{display:flex;gap:12px;align-items:center;margin-bottom:8px}
.vm-play-symbol{display:grid;place-items:center;width:40px;height:40px;border-radius:14px;background:var(--rom-ground,var(--bg2,#edf3ee));color:var(--vm-a);font-size:26px;flex-shrink:0}
.vm-play-head h3{font-size:18px!important;margin:0!important}.vm-play-head p{font-size:13px!important;margin:3px 0 0!important;line-height:1.5!important}
.vm-stage{background:var(--rom-ground,var(--bg2,#edf3ee));border-radius:14px;margin-top:16px}
.vm-stage svg{display:block;width:100%;max-height:220px;overflow:hidden}
.vm-result{display:grid;gap:4px;text-align:center;padding:14px 4px;min-height:65px}
.vm-result strong{font-size:24px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.25;overflow-wrap:anywhere}
.vm-result span{font-size:13px;color:var(--muted,#5c7064)}.vm-result span:empty{display:none}
.vm-controls{display:grid;gap:10px}.vm-control{display:flex;align-items:center;gap:16px;border-top:1px solid var(--line,#dbe4dc);padding-top:10px}
.vm-control label{display:grid;grid-template-columns:1fr auto;align-items:center;flex:1;gap:4px 10px;min-width:0;font-size:13px;font-weight:600}
.vm-control output{font-variant-numeric:tabular-nums;font-size:16px;display:inline;width:auto;min-width:0;min-height:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none}
.vm-control input[type=range]{grid-column:1/-1;width:100%;height:32px;padding:0;border:0;accent-color:var(--vm-a);background:transparent;cursor:pointer;box-shadow:none}
.vm-nudge{display:flex;gap:6px}.vm-nudge button{display:grid;place-items:center;min-width:44px;min-height:44px;padding:0;border:1px solid var(--line,#dbe4dc);border-radius:12px;background:var(--rom-ground,var(--bg2,#edf3ee));color:var(--vm-ink);font:600 24px system-ui;cursor:pointer}
.vm-nudge button:disabled{opacity:.4;cursor:default}.vm-nudge button:active{transform:scale(.94)}
.vm-playground :is(button,input):focus-visible{outline:3px solid var(--vm-a);outline-offset:3px}
@media(max-width:600px){.vm-playground{padding:14px;border-radius:16px}.vm-stage svg{max-height:185px}.vm-play-head p{font-size:12px!important}.vm-result strong{font-size:22px}.vm-control{gap:10px}}
@media(prefers-reduced-motion:reduce){.vm-nudge button:active{transform:none}}
.design-reduced-motion .vm-nudge button:active{transform:none}