/* Spin Music Sound's instrument, on .art's tokens (design A). */
.instrument { margin: 0 0 calc(var(--unit) * 2); border: 1px solid var(--rule); background: var(--paper); position: relative; overflow: hidden; }
.stage { position: relative; width: 100%; aspect-ratio: 16 / 10; display: block; }
.stage canvas { display: block; width: 100%; height: 100%; }
.controls { display: flex; align-items: center; justify-content: space-between; gap: var(--unit); padding: calc(var(--unit) / 2) var(--unit); border-top: 1px solid var(--rule); flex-wrap: wrap; }
button.begin { font: inherit; font-size: var(--size); font-weight: 700; background: var(--ink); color: var(--paper); border: 0; padding: calc(var(--unit) / 4) calc(var(--unit) / 2); cursor: pointer; }
button.begin:hover { background: var(--blue); }
button.begin[disabled] { opacity: .35; cursor: default; background: var(--ink); }
.readout { color: var(--muted); display: flex; gap: var(--unit); }
.readout b { color: var(--ink); font-weight: 700; }
.hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--unit); color: var(--muted); pointer-events: none; transition: opacity .6s ease; }
@media (max-width: 540px) { .readout { display: none; } }