.art-wip{display:inline-block;font-family:var(--font-sans);font-size:.66rem;font-weight:600;text-transform:uppercase;letter-spacing:.16em;color:var(--color-accent);border:1px solid var(--color-accent);border-radius:999px;padding:.3rem .75rem}.art-card{border:1px solid var(--color-rule);border-radius:4px;background:var(--color-paper-deep);padding:1.5rem}.art-console{display:grid;gap:1rem;border:1px solid var(--color-rule);border-radius:6px;background:var(--color-paper-deep);padding:1.5rem}@media(min-width:640px){.art-console{padding:2rem}}.art-stage,.art-side{display:flex;flex-direction:column;gap:1rem;min-width:0}@media(min-width:900px){.art-console{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);grid-template-areas:"stage    side" "keyboard side" "footer   footer";align-items:start;column-gap:2rem}.art-stage{grid-area:stage}.art-side{grid-area:side;align-self:stretch;justify-content:space-between}.art-keyboard-wrap{grid-area:keyboard}.art-console-footer{grid-area:footer}.art-side .art-controls{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}.art-side #art-hear{grid-area:1 / 1}.art-side #art-reset{grid-area:1 / 2}.art-side #art-legato,.art-side #art-ordinary,.art-side #art-sandbox-clear{grid-column:1 / -1}}.art-note{margin-top:.5rem;max-width:46ch;font-size:.75rem;line-height:1.5;color:var(--color-ink-faint)}.art-note-center{max-width:none;text-align:center}.art-btn{font-family:var(--font-sans);font-size:.74rem;font-weight:600;text-transform:uppercase;letter-spacing:.13em;color:var(--color-ink-soft);background:var(--color-paper);border:1px solid var(--color-rule);border-radius:3px;padding:.6rem 1.1rem;cursor:pointer;transition:color .2s,border-color .2s,background-color .2s,opacity .2s}.art-btn:hover{color:var(--color-accent);border-color:var(--color-accent)}.art-btn:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.art-btn:disabled{opacity:.4;cursor:not-allowed;color:var(--color-ink-faint);border-color:var(--color-rule)}.art-btn-primary{color:var(--color-paper);background:var(--color-accent);border-color:var(--color-accent)}.art-btn-primary:hover{color:var(--color-paper);background:var(--color-ink);border-color:var(--color-ink)}.art-btn-primary:disabled{color:var(--color-paper)}.art-btn-ghost{background:transparent;border-color:transparent}.art-btn-ghost:hover{border-color:var(--color-rule)}.art-controls{display:flex;flex-wrap:wrap;gap:.6rem}.art-slider{accent-color:var(--color-accent)}.art-bars{--art-fill: 80%;position:relative;display:flex;gap:4px;height:2.5rem}.art-bar{position:relative;flex:1;border-radius:3px;background:repeating-linear-gradient(45deg,transparent,transparent 6px,color-mix(in srgb,var(--color-rule) 60%,transparent) 6px,color-mix(in srgb,var(--color-rule) 60%,transparent) 12px);border:1px solid var(--color-rule);overflow:hidden}.art-bar-note:before{content:"";position:absolute;inset:0 auto 0 0;width:var(--art-fill);background:var(--color-accent);transition:width .15s ease,background-color .2s}.art-bars[data-touch=ordinary] .art-bar-note:before{background:var(--color-ordinary)}.art-strip{position:relative;height:2.6rem;border-bottom:1px solid var(--color-rule)}.art-chip{position:absolute;top:0;transform:translate(-50%);font-family:var(--font-sans);font-size:.64rem;letter-spacing:.04em;color:var(--color-ink-soft);background:var(--color-paper);border:1px solid var(--color-rule);border-radius:999px;padding:.15rem .4rem;white-space:nowrap;transition:color .15s,border-color .15s,box-shadow .15s}.art-chip-active{color:var(--color-accent);border-color:var(--color-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-accent) 18%,transparent)}@media(prefers-reduced-motion:reduce){.art-chip{transition:none}}.art-plot-wrap{width:100%}#art-plot{display:block;width:100%;height:190px}#art-timeline{display:block;width:100%;height:88px}.art-dial-fig{align-items:center}#art-dial{width:100%;max-width:168px;margin:0 auto}.art-room-head{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}.art-tabs{display:inline-flex;gap:2px;background:var(--color-rule);border-radius:4px;padding:2px}.art-tab{font-family:var(--font-sans);font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--color-ink-soft);background:transparent;border:0;border-radius:3px;padding:.5rem .9rem;cursor:pointer}.art-tab:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.art-tab-active{background:var(--color-paper);color:var(--color-ink);box-shadow:0 1px 3px #281e121f}.art-readout{color:var(--color-ink-soft);min-height:1.4em}.art-touch{font-weight:600}.art-touch-legato{color:var(--color-accent)}.art-touch-ordinary{color:var(--color-ordinary)}.art-table{width:100%;max-width:26rem;border-collapse:collapse;font-size:.95rem}.art-table th,.art-table td{text-align:left;padding:.4rem .75rem .4rem 0;border-bottom:1px solid var(--color-rule)}.art-table thead th{font-family:var(--font-sans);font-size:.68rem;text-transform:uppercase;letter-spacing:.12em;color:var(--color-ink-faint);font-weight:600}.art-table tbody th{font-weight:500;color:var(--color-ink)}.art-table .art-ref-row td,.art-table .art-ref-row th{color:var(--color-ink-faint)}.art-keyboard-wrap{width:100%}.art-keyboard{width:100%;max-width:440px;margin:0 auto}.art-console-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem;font-family:var(--font-sans);font-size:.75rem}