/* Saria's Song article: the small practice pad, in the zone's navy and gold. */
.prose .ss-tool { margin: 14px 0 22px; padding: 14px 16px; border: 2px solid var(--oot-rim-dim); border-radius: 14px; background: linear-gradient(180deg, var(--oot-panel-top), var(--oot-panel-bot)); }
.prose .ss-row { display: flex; align-items: center; gap: 12px; margin: 0; }
.ss-lab { font-weight: 800; color: var(--oot-gold); min-width: 2.6em; }
.ss-notes { display: flex; flex-wrap: wrap; gap: 8px; }
.ss-notes b { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--oot-night); border: 2px solid var(--oot-gold-deep); color: var(--oot-gold-soft); font-weight: 800; transition: background .15s, color .15s; }
.ss-notes b.on, .ss-notes b.ok { background: var(--oot-gold); color: var(--oot-outline); border-color: var(--oot-gold-soft); }
.ss-pad { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--oot-line); }
.ss-play, .ss-keys button { font: inherit; font-weight: 800; cursor: pointer; border-radius: 10px; }
.ss-play { padding: 8px 16px; border: 1px solid var(--oot-gold-deep); background: var(--oot-gold); color: var(--oot-outline); }
.ss-play:hover { background: var(--oot-gold-soft); }
.ss-keys { display: flex; gap: 6px; }
.ss-keys button { width: 44px; height: 44px; border: 1px solid var(--oot-rim-dim); background: var(--oot-night); color: var(--oot-ink); }
.ss-keys button:hover, .ss-keys button.on { border-color: var(--oot-gold); color: var(--oot-gold-soft); }
.ss-play:focus-visible, .ss-keys button:focus-visible { outline: 2px solid var(--oot-gold); outline-offset: 2px; }
.ss-msg { flex: 1 1 220px; color: var(--oot-ink-dim); }
.ss-msg.is-bad { color: var(--oot-gold-soft); }