.tunes-app{--tune-note:#8fd4ff;--tune-drum:#ffc98f;flex-direction:column;gap:14px;min-height:100%;padding:22px 26px;display:flex;container-type:inline-size}.desktop-finished[data-appearance=light] .tunes-app{--tune-note:#2f7fb5;--tune-drum:#b8741f}.tunes-header{flex-wrap:wrap;justify-content:space-between;align-items:end;gap:12px;display:flex}.tunes-header small{color:var(--blue);letter-spacing:.16em;font:700 .56rem ui-monospace,monospace}.tunes-header h2{letter-spacing:-.045em;margin:5px 0 0;font-family:DM Sans,sans-serif;font-size:1.65rem}.tunes-title{gap:6px;display:flex}.tunes-title select,.tunes-link{border:1px solid var(--line);background:var(--surface-raised);height:30px;color:var(--text);border-radius:8px;padding:0 6px;font:600 .68rem DM Sans,sans-serif}.tunes-banner{border:1px dashed var(--line);color:var(--muted);border-radius:10px;margin:0;padding:9px 11px;font-size:.68rem}.tunes-transport{flex-wrap:wrap;align-items:center;gap:14px;display:flex}.tunes-play{border:1px solid var(--blue);background:linear-gradient(var(--button-top),var(--button-bottom));min-width:92px;color:var(--text);cursor:pointer;border-radius:999px;padding:9px 16px;font:700 .74rem DM Sans,sans-serif}.tunes-play.is-playing{background:color-mix(in srgb,var(--tune-note) 22%,var(--surface-raised))}.tunes-tempo{min-width:150px;color:var(--muted);letter-spacing:.12em;text-transform:uppercase;gap:4px;font:700 .54rem ui-monospace,monospace;display:grid}.tunes-tempo b{color:var(--text);letter-spacing:0;font:600 .7rem DM Sans,sans-serif}.tunes-tempo input{width:100%;accent-color:var(--blue);margin:0}.tunes-sounds{border:1px solid var(--line);border-radius:10px;padding:2px;display:flex}.tunes-sounds button{color:var(--muted);cursor:pointer;background:0 0;border:0;border-radius:7px;padding:6px 10px;font:600 .66rem DM Sans,sans-serif}.tunes-sounds button[aria-pressed=true]{background:var(--chrome-active);color:var(--text)}.tunes-hint{color:var(--muted);margin:0;font-size:.75rem;line-height:1.5}.tunes-board{border:1px solid var(--line);background:color-mix(in srgb,var(--text) 3%,transparent);border-radius:14px;grid-template-columns:34px minmax(0,1fr);gap:6px;padding:10px;display:grid}.tunes-labels{color:var(--muted);letter-spacing:.06em;grid-auto-rows:26px;align-items:center;font:700 .54rem ui-monospace,monospace;display:grid}.tunes-labels span:nth-child(9){margin-top:8px}.tunes-labels .is-drum{color:color-mix(in srgb,var(--tune-drum) 70%,var(--muted))}.tunes-grid{touch-action:none;user-select:none;grid-auto-rows:26px;display:grid;position:relative;overflow:hidden}.tunes-row{grid-template-columns:repeat(16,minmax(0,1fr));display:grid}.tunes-row.is-first-drum{margin-top:8px}.tunes-row button{cursor:pointer;background:0 0;border:0;padding:0;position:relative}.tunes-row button:before{content:"";background:color-mix(in srgb,var(--text) 9%,transparent);border-radius:5px;position:absolute;inset:2px 1.5px}.tunes-row button.is-beat:before{background:color-mix(in srgb,var(--text) 15%,transparent)}.tunes-row button.is-on:before{background:var(--tune-note);box-shadow:0 0 8px color-mix(in srgb,var(--tune-note) 60%,transparent)}.tunes-row.is-drum button.is-on:before{background:var(--tune-drum);box-shadow:0 0 8px color-mix(in srgb,var(--tune-drum) 60%,transparent)}.tunes-row button:hover:before{outline:1px solid color-mix(in srgb,var(--text) 35%,transparent)}.tunes-row button:focus-visible{outline:none}.tunes-row button:focus-visible:before{outline:2px solid var(--blue);outline-offset:1px}.tunes-playhead{width:6.25%;transform:translateX(calc(var(--play-step,0) * 100%));background:color-mix(in srgb,var(--text) 10%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text) 22%,transparent);pointer-events:none;will-change:transform;border-radius:6px;position:absolute;top:0;bottom:0;left:0}.tunes-playhead[hidden]{display:none}.tunes-actions{flex-wrap:wrap;gap:8px;display:flex}.tunes-spacer{flex:1}.tunes-actions button{border:1px solid var(--line);background:linear-gradient(var(--button-top),var(--button-bottom));color:var(--text);cursor:pointer;border-radius:10px;padding:8px 13px;font:600 .68rem DM Sans,sans-serif}.tunes-actions .is-primary{border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue)}.tunes-actions button:disabled{opacity:.55;cursor:default}.tunes-link{width:100%}.tunes-status{min-height:1.2em;color:var(--muted);margin:-4px 0 0;font-size:.66rem}.tunes-saved h3{justify-content:space-between;margin:0 0 8px;font-size:.78rem;display:flex}.tunes-saved h3 span{color:var(--muted);font:600 .58rem ui-monospace,monospace}.tunes-saved ul{flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none;display:flex}.tunes-saved li{border:1px solid var(--line);border-radius:999px;display:flex;overflow:hidden}.tunes-saved li.is-open{border-color:var(--blue)}.tunes-saved li button{color:var(--text);cursor:pointer;background:0 0;border:0;padding:6px 10px;font:600 .64rem DM Sans,sans-serif}.tunes-saved .tunes-delete{border-left:1px solid var(--line);color:var(--muted);padding:6px 9px}.tunes-editor-tools,.tunes-bank-hint{display:none}@container (width<=560px){.tunes-editor-tools{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.tunes-editor-tools>div{gap:4px;display:flex}.tunes-editor-tools button{border:1px solid var(--line);background:var(--surface-raised);min-height:44px;color:var(--text);cursor:pointer;border-radius:9px;padding:8px 10px;font:600 .7rem DM Sans,sans-serif}.tunes-editor-tools button[aria-pressed=true]{border-color:var(--blue);background:var(--chrome-active)}.tunes-bank-hint{color:var(--muted);margin:0;font-size:.75rem;line-height:1.5;display:block}.has-larger-steps .tunes-labels,.has-larger-steps .tunes-grid{grid-auto-rows:44px}.has-larger-steps .tunes-row{grid-template-columns:repeat(8,minmax(0,1fr))}.has-larger-steps:not(.is-second-half) .tunes-row button:nth-child(n+9),.has-larger-steps.is-second-half .tunes-row button:nth-child(-n+8){display:none}.has-larger-steps .tunes-playhead{width:12.5%;transform:translateX(calc((var(--play-step,0) - var(--edit-half,0) * 8) * 100%))}.tunes-board{grid-template-columns:28px minmax(0,1fr);padding:8px 6px}.tunes-labels,.tunes-grid{grid-auto-rows:24px}.tunes-transport{gap:10px}.tunes-tempo{flex:1}}@media (width<=759px){.tunes-app{padding:18px}}