/* Readable tutorial controls and short, purposeful feedback. */
.work-title{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 10px;align-items:center}
.work-title h2{grid-column:1;grid-row:1}.work-title>p{display:none}
.demo-launch{grid-column:2;grid-row:1;min-height:40px;padding:6px 10px;border:2px solid #6b8551;border-bottom-width:3px;border-radius:5px;background:#e5ecc4;color:#33513b;font:700 12px/1.25 'Trebuchet MS',sans-serif;white-space:nowrap}
.demo-launch:hover{background:#f2f5dc}
.demo-stage{position:relative;border:2px solid #69814f;background:#dce5bf;border-radius:7px;overflow:hidden;margin-top:12px}
.demo-stage canvas{display:block;width:100%;height:auto;aspect-ratio:2/1;image-rendering:pixelated}
.demo-options{position:absolute;left:29%;right:5%;bottom:3%;display:grid;grid-template-columns:1fr 1fr;gap:8%;font:700 11px/1.3 'Trebuchet MS',sans-serif;text-align:center}
.demo-options span{padding:5px 3px;border:1px solid #8c9b70;border-radius:4px;background:#fff4dbe8;color:#33513b}
.demo-beats{list-style:none;display:grid;gap:7px;padding:0;margin:16px 0 10px}
.demo-beats li{display:flex;align-items:center;gap:10px;border:1px solid transparent;border-radius:6px;padding:7px 9px;color:#566744;font:14px/1.4 'Trebuchet MS',sans-serif}
.demo-beats b{display:grid;place-items:center;flex:0 0 24px;height:24px;border-radius:5px;background:#dfe5bd;color:#4a6444}
.demo-beats li[aria-current=true]{border-color:#7d995d;background:#edf1d2;color:#2f5037}
.demo-beats li[aria-current=true] b{background:#4c7147;color:#fff4d7}
.demo-caption{font:700 14px/1.5 'Trebuchet MS',sans-serif;color:#35583b;min-height:3em}
dialog[data-kind=demo] .dialog-buttons{margin-top:12px}dialog[data-kind=demo] .small-note{margin-top:12px;font-size:12px}
.meter[data-zone=ready]{border-color:#446f39;box-shadow:0 0 0 2px #b4cf8d}.meter[data-zone=over]{border-color:#ac6743}
.scene-readout[data-zone=ready]{background:#e5f1cceF;border:2px solid #648747;color:#2b4e30}
.hold-button[data-ready=true]{background:#d8e999!important;box-shadow:0 0 0 3px #94b76580;animation:release-cue .7s ease-in-out infinite}
@keyframes release-cue{50%{box-shadow:0 0 0 6px #b6d18135}}
@media(max-width:680px){.work-title h2{font-size:22px}.work-title>p{font-size:10px}.demo-launch{min-height:40px;font-size:11px}.demo-beats{gap:4px}.demo-beats li{font-size:12px;padding:5px 6px}.demo-options{font-size:9px;gap:5%}.demo-caption{font-size:12px}.demo-stage{margin-top:8px}}
@media(max-height:520px) and (min-width:600px){.work-title h2{font-size:20px}.work-title>p{display:none}.demo-launch{min-height:35px}.demo-stage{max-width:420px;margin-left:auto;margin-right:auto}.demo-beats{grid-template-columns:repeat(3,1fr)}.demo-beats li{font-size:11px;align-items:flex-start}.demo-caption{min-height:0}.demo-beats b{flex-basis:20px;height:20px}}
@media(prefers-reduced-motion:reduce){.hold-button[data-ready=true]{animation:none}}