.audio-page{box-sizing:border-box;width:min(100% - 20px,760px);margin:0 auto;padding:12px 0 112px;color:var(--ink,#252820)}
.audio-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 4px}.audio-heading h1{margin:0;font-size:1.35rem}.audio-heading p{margin:.12em 0 0;color:#586052;font-size:.84rem}.audio-tempo{display:grid;grid-template-columns:auto auto;align-items:center;gap:2px 8px;font-size:.8rem;font-weight:700;white-space:nowrap}.audio-tempo output{font-variant-numeric:tabular-nums}.audio-tempo input{grid-column:1/-1;width:112px;min-height:26px;accent-color:#49643c}
.audio-status{min-height:1.4em;margin:5px 0 8px;color:#485044;font-size:.84rem}
.audio-image-start{margin:0 0 6px;color:#485044;font-size:.73rem}.audio-image-start summary{width:max-content;min-height:28px;padding:4px 2px;cursor:pointer}.audio-image-start__options{display:flex;align-items:center;flex-wrap:wrap;gap:6px;padding:2px 0 4px}.audio-image-start button,.audio-image-start a{display:inline-flex;align-items:center;min-height:32px;box-sizing:border-box;padding:4px 10px;border:1px solid #c5cbbd;border-radius:9px;background:#fff;color:inherit;font:inherit;text-decoration:none;cursor:pointer}.audio-image-start button:focus-visible,.audio-image-start a:focus-visible,.audio-image-start summary:focus-visible{outline:3px solid #335cbe;outline-offset:2px}.audio-image-start [hidden]{display:none!important}
.audio-workspace{display:grid;gap:8px}.audio-tracks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.audio-track-choice{display:flex;align-items:center;justify-content:center;gap:5px;min-width:0;min-height:40px;padding:4px 6px;border:1px solid #c5cbbd;border-radius:10px;background:#fff;color:inherit;font:inherit;font-size:.84rem;cursor:pointer}.audio-track-choice[aria-pressed=true]{border-color:#49643c;background:#e5eddf;font-weight:700}.audio-track-choice__mark{width:9px;height:9px;flex:none;border-radius:50%;background:#49643c}.audio-track-choice[data-track-id$="triangle"] .audio-track-choice__mark{background:#4c82c3}.audio-track-choice[data-track-id$="sawtooth"] .audio-track-choice__mark{background:#e7a52b}.audio-track-choice[data-track-id$="noise"] .audio-track-choice__mark{background:#9a6bb0}
.audio-grid-wrap{width:100%;overflow-x:auto;overscroll-behavior-x:contain}.audio-grid{width:100%;min-width:278px;border-collapse:separate;border-spacing:3px 4px;table-layout:fixed}.audio-grid th{height:25px;padding:0 2px;color:#586052;font-size:.74rem;font-weight:700;text-align:center}.audio-grid thead th:first-child{width:38px}.audio-grid tbody th{width:38px;font-size:.8rem}.audio-grid td{padding:0}.audio-grid-cell{display:block;width:100%;height:34px;padding:0;border:1px solid #d0d5ca;border-radius:8px;background:#fff;cursor:pointer}.audio-grid-cell[aria-pressed=true]{border-color:#49643c;background:#49643c;box-shadow:inset 0 0 0 2px #fff}.audio-grid-cell:focus-visible,.audio-track-choice:focus-visible,.audio-actions button:focus-visible{outline:3px solid #335cbe;outline-offset:2px}
.audio-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:8px}.audio-actions button{min-height:40px;padding:7px 14px;border:1px solid #c5cbbd;border-radius:12px;background:#fff;color:inherit;font:inherit;font-size:.9rem;cursor:pointer}.audio-actions #audio-save{border-color:#49643c;background:#49643c;color:#fff;font-weight:700}.audio-actions button:disabled{opacity:.5;cursor:default}.audio-page [hidden]{display:none!important}
.audio-page .app-tabs{z-index:30}.audio-page{display:flex;min-height:calc(100svh - 56px);flex-direction:column}.audio-workspace{flex:1;align-content:center;gap:8px}.audio-grid-wrap{width:min(100%,760px);margin:0 auto;touch-action:none}.audio-pixel-board{display:flex;width:max-content;flex-direction:column;align-items:center;margin-inline:auto}.audio-heading{flex:none}
.audio-tools{display:flex;align-items:center;gap:6px;color:#586052;font-size:.74rem}.audio-tools button{min-height:34px;padding:4px 12px;border:1px solid #c5cbbd;border-radius:9px;background:#fff;color:inherit;font:inherit;cursor:pointer}.audio-tools button[aria-pressed=true]{border-color:#49643c;background:#e5eddf;color:#293624;font-weight:700}.audio-tools button:focus-visible{outline:3px solid #335cbe;outline-offset:2px}.audio-tools span{margin-left:auto}
.audio-track-choice{display:grid;grid-template-columns:10px minmax(0,1fr);grid-template-rows:auto auto;justify-content:center;column-gap:5px;row-gap:1px;min-height:54px;text-align:left}.audio-track-choice__mark{grid-row:1/3;align-self:center}.audio-track-choice__label{min-width:0;font-size:.76rem;line-height:1.1}.audio-track-choice__preset{overflow:hidden;color:#586052;font-size:.57rem;line-height:1.1;text-overflow:ellipsis;white-space:nowrap}.audio-grid-wrap{position:relative;overflow:hidden;touch-action:none}.audio-pixel-board{width:max-content;user-select:none}.audio-grid-row{display:grid;width:max-content;grid-template-columns:var(--pitch-label-width,27px) repeat(16,var(--pixel-size,16px));gap:1px;margin-bottom:1px}.audio-grid-header{margin-bottom:3px}.audio-pitch-label{display:flex;align-items:center;justify-content:center;min-width:0;color:#586052;font-size:.64rem;font-weight:700}.audio-beat-label{display:flex;align-items:center;justify-content:center;min-width:0;height:18px;color:#90978b;font-size:.56rem;line-height:1}.audio-beat-label--major{color:#35432e;font-size:.7rem;font-weight:800}.audio-pixel-cell{position:relative;display:block;width:var(--pixel-size,16px);height:var(--pixel-size,16px);min-width:0;padding:1px;overflow:hidden;border:1px solid #d0d5ca;border-radius:3px;background:#fff;cursor:crosshair;image-rendering:pixelated}.audio-pixel-cell:nth-child(4n + 2){border-left-color:#9ea894}.audio-pixel-cell[aria-pressed=true]{background:#f0f3ec}.audio-pixel-cell:focus-visible{z-index:1;outline:3px solid #335cbe;outline-offset:1px}.audio-pixel-layers{display:grid;width:100%;height:100%;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);gap:1px}.audio-pixel-layer{display:block;min-width:0;min-height:0;background:#49643c}.audio-pixel-layer[data-layer="triangle"]{background:#4c82c3}.audio-pixel-layer[data-layer="sawtooth"]{background:#e7a52b}.audio-pixel-layer[data-layer="noise"]{background:#9a6bb0}.audio-pixel-layer[data-selected="true"]{outline:1px solid #172113;outline-offset:-1px;filter:brightness(.78)}.audio-playhead{position:absolute;z-index:2;width:2px;pointer-events:none;background:#d4443d;box-shadow:0 0 0 1px #fff9}.audio-playhead[hidden]{display:none!important}
@media(max-width:380px){.audio-page{width:calc(100% - 14px);padding-top:8px}.audio-heading{gap:4px}.audio-heading h1{font-size:1.18rem}.audio-heading p{font-size:.74rem}.audio-tempo{gap:1px 5px;font-size:.74rem}.audio-tempo input{width:92px}.audio-status{margin:3px 0 5px;font-size:.76rem}.audio-workspace{gap:5px}.audio-tracks{gap:4px}.audio-track-choice{min-height:48px;gap:2px;padding:3px}.audio-beat-label{height:16px;font-size:.5rem}.audio-pitch-label{font-size:.58rem}.audio-pixel-cell{border-radius:2px;padding:0}.audio-tools{gap:4px}.audio-tools button{min-height:32px;padding:3px 8px}.audio-actions{gap:6px;margin-top:5px}.audio-actions button{min-height:36px;padding:5px 10px;font-size:.82rem}}
@media(max-height:650px){.audio-page{padding-top:5px;padding-bottom:88px}.audio-heading h1{font-size:1.16rem}.audio-heading p{font-size:.74rem}.audio-status{min-height:1em;margin:2px 0 4px;font-size:.75rem}.audio-workspace{gap:4px}.audio-track-choice{min-height:44px}.audio-actions{margin-top:4px}.audio-actions button{min-height:34px;padding:4px 9px}}
@media(max-width:380px) and (max-height:650px){.audio-page{padding-bottom:84px}.audio-track-choice{min-height:42px}.audio-actions{gap:4px}.audio-actions button{min-height:32px;padding:3px 8px;font-size:.78rem}}
@media(prefers-reduced-motion:reduce){.audio-pixel-cell,.audio-track-choice,.audio-actions button{transition:none}}

/* Full-screen pixel instrument stage. */
.audio-tool-body{height:100dvh;overflow:hidden;overscroll-behavior:none;padding:0!important}
.audio-page{position:fixed;inset:env(safe-area-inset-top,0px) 0 calc(3.85rem + max(.7rem,env(safe-area-inset-bottom))) 0;display:grid;width:100%;max-width:none;min-height:0;grid-template-rows:auto auto minmax(0,1fr) auto;gap:3px;margin:0;padding:5px 6px 3px;overflow:hidden}
.audio-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:25px;margin:0}.audio-heading h1{font-size:.92rem;line-height:1.1}.audio-tempo{display:grid;grid-template-columns:auto auto minmax(54px,108px);align-items:center;gap:0 5px;font-size:.66rem}.audio-tempo input{grid-column:auto;width:100%;min-height:22px}.audio-status{min-width:0;min-height:14px;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.68rem;line-height:14px}
.audio-workspace{display:grid;min-height:0;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);grid-template-areas:"controls" "canvas";gap:2px;align-content:stretch}.audio-controls{display:grid;grid-area:controls;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px;min-width:0}.audio-tracks{grid-template-columns:repeat(4,minmax(0,1fr));gap:3px}.audio-track-choice{display:grid;min-width:0;min-height:34px;grid-template-columns:7px minmax(0,1fr);grid-template-rows:auto auto;justify-content:stretch;column-gap:4px;row-gap:0;padding:2px 3px;border-radius:7px}.audio-track-choice__mark{grid-row:1/3;width:7px;height:7px}.audio-track-choice__label{overflow:hidden;font-size:.61rem;text-overflow:ellipsis;white-space:nowrap}.audio-track-choice__preset{font-size:.48rem}.audio-tools{gap:3px}.audio-tools button{width:27px;min-height:27px;padding:0;font-size:.84rem;line-height:1}
.audio-grid-wrap{position:relative;display:flex;grid-area:canvas;width:100%;height:100%;min-height:0;align-items:center;justify-content:center;margin:0;overflow:hidden;touch-action:none}.audio-pixel-board{display:flex;width:max-content;flex-direction:column;align-items:center;margin:auto;user-select:none}.audio-grid-row{display:grid;width:max-content;grid-template-columns:var(--pitch-label-width,20px) repeat(16,var(--pixel-size,16px));gap:0;margin:0}.audio-pitch-label{width:var(--pitch-label-width,20px);height:var(--pixel-size,16px);overflow:hidden;font-size:.48rem;line-height:1}.audio-pixel-cell{width:var(--pixel-size,16px);height:var(--pixel-size,16px);padding:1px;border-width:1px;border-radius:0;cursor:crosshair;touch-action:none}.audio-pixel-cell[data-x="4"],.audio-pixel-cell[data-x="8"],.audio-pixel-cell[data-x="12"]{border-left:1px solid #839080}.audio-pixel-cell[aria-pressed=true]{background:#f0f3ec}.audio-pixel-layers{gap:1px}
.audio-more{min-height:18px;max-height:25px;align-self:end;color:#586052;font-size:.64rem}.audio-more[open]{position:relative;z-index:3;max-height:90px;overflow:auto;padding:3px 6px;border:1px solid #d0d5ca;border-radius:8px;background:#fff}.audio-more summary{width:max-content;min-height:18px;padding:2px;cursor:pointer}.audio-more__actions{display:flex;align-items:center;flex-wrap:wrap;gap:4px}.audio-more__actions button,.audio-more__actions a{min-height:27px;padding:3px 7px;border:1px solid #c5cbbd;border-radius:7px;background:#fff;color:inherit;font:inherit;text-decoration:none}.audio-more__actions #audio-save{border-color:#49643c;background:#49643c;color:#fff}.audio-page [hidden]{display:none!important}
@media(orientation:landscape) and (max-height:400px){.audio-page{grid-template-rows:auto auto minmax(0,1fr) auto;gap:2px;padding:3px 8px 2px}.audio-heading{min-height:22px}.audio-heading h1{font-size:.78rem}.audio-tempo{font-size:.58rem;grid-template-columns:auto auto minmax(54px,90px)}.audio-status{min-height:12px;line-height:12px;font-size:.6rem}.audio-workspace{grid-template-columns:minmax(0,1fr) 120px;grid-template-rows:minmax(0,1fr);grid-template-areas:"canvas controls";gap:6px}.audio-controls{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;align-items:center;gap:3px}.audio-tracks{grid-template-columns:repeat(2,minmax(0,1fr));align-content:center}.audio-track-choice{min-height:34px}.audio-tools{justify-content:center}.audio-more{min-height:16px;max-height:20px;font-size:.58rem}.audio-more summary{min-height:16px}}
@media(prefers-reduced-motion:reduce){.audio-pixel-cell,.audio-track-choice,.audio-more__actions button{transition:none}}
.audio-page{bottom:calc(5.5rem + env(safe-area-inset-bottom))}
/* One canvas cell owns one instrument note, like one color in a drawing cell. */
.audio-pixel-layers{display:block;gap:0}
.audio-pixel-layer{width:100%;height:100%}
.audio-pixel-canvas{display:block;image-rendering:pixelated;touch-action:none;user-select:none;outline:2px solid #77816f;outline-offset:0;cursor:crosshair}
.audio-pixel-canvas:focus-visible{outline:3px solid #335cbe;outline-offset:2px}
.audio-cursor{position:absolute;z-index:3;pointer-events:none;box-shadow:inset 0 0 0 2px #172113,0 0 0 1px #fff}
.audio-track-choice{display:flex;min-height:35px;flex-direction:column;align-items:stretch;justify-content:center;gap:1px;padding:2px 3px;border-width:2px;background:#fff}
.audio-track-choice[aria-pressed=true]{border-color:#263f32;background:#fff;box-shadow:0 0 0 1px #263f32}
.audio-track-choice__mark{display:block;width:100%;height:17px;grid-row:auto;border-radius:2px}
.audio-track-choice__label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.audio-track-choice__preset{color:#35432e;font-size:.57rem;line-height:1.05;text-align:center}
.audio-tools{position:relative}
.audio-palette-settings{position:relative;z-index:4;font-size:.65rem}
.audio-palette-settings summary{display:flex;min-width:38px;min-height:27px;align-items:center;justify-content:center;padding:1px 4px;border:1px solid #c5cbbd;border-radius:7px;background:#fff;cursor:pointer;list-style:none;white-space:nowrap}
.audio-palette-settings summary::-webkit-details-marker{display:none}
.audio-palette-settings[open] summary{border-color:#49643c;background:#e5eddf}
.audio-palette-settings__body{position:absolute;top:calc(100% + 5px);right:0;display:grid;width:min(82vw,290px);gap:6px;padding:9px;border:1px solid #b9c5b2;border-radius:11px;background:#fff;box-shadow:0 8px 22px #17211333}
.audio-palette-row{display:grid;grid-template-columns:30px 38px minmax(0,1fr);align-items:center;gap:7px;min-width:0}
.audio-palette-row input[type=color]{width:38px;height:29px;padding:2px;border:1px solid #c5cbbd;border-radius:6px;background:#fff}
.audio-palette-row select{width:100%;min-height:29px;border:1px solid #c5cbbd;border-radius:6px;background:#fff;color:#293624;font:inherit}
.audio-palette-row input:focus-visible,.audio-palette-row select:focus-visible,.audio-palette-settings summary:focus-visible{outline:3px solid #335cbe;outline-offset:1px}
@media(orientation:landscape) and (max-height:400px){.audio-palette-settings__body{top:auto;right:0;bottom:calc(100% + 5px);width:min(40vw,220px)}}