:root{--color-ink:#262626;--color-ink-hover:#3a3a3a;--color-paper:#f5f5f5;--color-canvas:#f5f5f5;--color-marker:#a3a3a3;--color-marker-soft:#d9d9d9;--color-on-ink:#a8a8a8;--color-playhead:#26262659;--color-overlay:#2626268c;--font-body:system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;--text-xs:.8125rem;--text-sm:.875rem;--text-md:1rem;--text-lg:1.25rem;--text-title:1.75rem;--leading-body:1.5;--leading-title:1.2;--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.5rem;--space-6:2rem;--touch:2.75rem;--chip-height:2rem;--stroke-thin:.1875rem;--stroke-thick:.4375rem;--radius-pill:62.5rem;--radius-frame:1.75rem 2.1rem 1.9rem 2.25rem / 2rem 1.75rem 2.25rem 1.9rem;--radius-panel:1.25rem 1.5rem 1.35rem 1.6rem / 1.5rem 1.25rem 1.6rem 1.35rem;--disabled-opacity:.3;--layer-modal:10;--layer-dropdown:15;--layer-toast:20;--layer-lifted:1;--column-cap:38rem}@media (pointer:coarse){:root{--column-cap:56rem}}*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{background:var(--color-paper);color:var(--color-ink);font-family:var(--font-body);font-size:var(--text-md);line-height:var(--leading-body);-webkit-tap-highlight-color:transparent;margin:0}body.is-modal-open{overflow:hidden}html,body{touch-action:manipulation}*{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}input,textarea{-webkit-user-select:text;user-select:text}*{scrollbar-width:thin;scrollbar-color:var(--color-marker) transparent}::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:var(--color-marker);border-radius:var(--radius-pill)}::selection{background:var(--color-marker-soft);color:var(--color-ink)}:focus{outline:none}:focus-visible{outline:var(--stroke-thin) solid var(--color-marker);outline-offset:.1875rem}.icon{width:1.5rem;height:1.5rem;display:block}.button{appearance:none;font:inherit;color:inherit;cursor:pointer;min-width:var(--touch);min-height:var(--touch);touch-action:manipulation;background:0 0;border:0;justify-content:center;align-items:center;margin:0;padding:0;display:inline-flex}.button:disabled{opacity:var(--disabled-opacity);cursor:default}.button--icon{width:var(--touch);height:var(--touch);border-radius:50%;flex:none}.button--ghost{color:var(--color-marker)}.button--ghost:not(:disabled):hover{color:var(--color-ink)}.button--solid{background:var(--color-ink);color:var(--color-on-ink)}.button--solid:not(:disabled):hover{background:var(--color-ink-hover)}.button--solid[aria-pressed=true]{color:var(--color-paper)}.button--text{padding:0 var(--space-5);border-radius:var(--radius-panel);font-size:var(--text-lg);letter-spacing:.04em;font-weight:700}.button--outline{border:var(--stroke-thin) solid var(--color-ink);color:var(--color-ink)}.button--outline:not(:disabled):hover{background:var(--color-marker-soft)}.button--on-ink{color:var(--color-on-ink)}.button--on-ink:not(:disabled):hover{color:var(--color-paper)}.button--chip{min-width:0;min-height:0;height:var(--chip-height);gap:var(--space-1);max-width:100%;padding:0 var(--space-1) 0 var(--space-3);border:var(--stroke-thin) solid var(--color-on-ink);border-radius:var(--radius-pill);color:var(--color-on-ink);font-size:var(--text-xs);font-weight:700;position:relative}.button--chip:after,.button--badge:after{content:"";inset:calc((var(--chip-height) - var(--touch)) / 2) 0;position:absolute}.button--badge{width:var(--chip-height);height:var(--chip-height);border:var(--stroke-thin) solid var(--color-on-ink);min-width:0;min-height:0;position:relative}.button--badge:after{inset:calc((var(--chip-height) - var(--touch)) / 2)}.button--badge:hover{border-color:var(--color-paper)}.button--badge .icon{width:1.125rem;height:1.125rem}.button--chip:hover{color:var(--color-paper);border-color:var(--color-paper)}.button--chip__label{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.button--chip__arrow{flex:none}.button--chip__arrow .icon{width:1rem;height:1rem}.app{flex-direction:column;min-height:100dvh;display:flex}.app__band{background:var(--color-ink);color:var(--color-on-ink)}.app__band--top{padding-top:env(safe-area-inset-top);flex:none}.app__column{width:min(100% - env(safe-area-inset-left) - env(safe-area-inset-right), var(--column-cap));margin-inline:auto}.header{align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-2);grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);display:grid}.header__main{display:contents}.header__start{justify-self:start;min-width:0;max-width:100%}.header__middle{min-width:0;max-width:10rem}.header__end{justify-self:end}@media (width<=22.5rem){.button--chip{padding-left:var(--space-2);gap:0;font-size:.75rem}.button--chip__arrow .icon{width:.875rem;height:.875rem}}.workspace{padding-top:var(--space-1);flex-direction:column;flex:1;display:flex}.dock{gap:var(--space-2);padding:var(--space-2) var(--space-3) calc(var(--space-3) + env(safe-area-inset-bottom));background:var(--color-paper);flex-direction:column;flex:none;display:flex}.row{align-items:center;gap:var(--space-3);display:flex}@media (aspect-ratio>=1) and (width>=48rem){:root{--chrome-height:6.75rem;--side-width:20rem}.app__column{width:min(100% - env(safe-area-inset-left) - env(safe-area-inset-right) - 2 * var(--space-4), 80rem)}.header{grid-template-columns:minmax(0, 1fr) var(--side-width);column-gap:var(--space-5);padding-inline:0}.header__main{align-items:center;gap:var(--space-1);width:min(100%, calc((100dvh - var(--chrome-height)) * 4 / 3));padding-inline:var(--space-2);grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);justify-self:center;display:grid}.workspace{grid-template-columns:minmax(0, 1fr) var(--side-width);column-gap:var(--space-5);padding-bottom:var(--space-4);display:grid}.stage-block{width:min(100%, calc((100dvh - var(--chrome-height)) * 4 / 3));justify-self:center}.dock{align-self:center;gap:var(--space-4);padding:0}}.stage-block{gap:var(--space-1);flex-direction:column;flex:1;min-height:0;display:flex}.bar-row{padding-inline:var(--space-1);grid-template-columns:1fr auto 1fr;align-items:center;display:grid}.bar-row__edit,.bar-row__nav,.bar-row__end{align-items:center;display:flex}.bar-row__end{justify-content:flex-end}.bar-row__number{font-size:var(--text-title);line-height:var(--leading-title);min-width:var(--touch);text-align:center;font-variant-numeric:tabular-nums;font-weight:800}.stage{min-height:0;padding-inline:var(--space-2);flex:1;display:flex}.stage__frame{border:var(--stroke-thick) solid var(--color-marker);border-radius:var(--radius-frame);background:var(--color-canvas);flex:1;min-width:0;min-height:12rem;position:relative;overflow:hidden}.stage__canvas{touch-action:none;cursor:crosshair;width:100%;height:100%;display:block;position:absolute;inset:0}.swatches{grid-template-columns:repeat(6,1fr);display:grid}.swatch{width:var(--touch);height:var(--touch);cursor:pointer;background:0 0;border:0;border-radius:50%;justify-self:center;place-items:center;padding:0;display:grid}.swatch:before{content:"";background:var(--swatch-color);border-radius:50%;width:2rem;height:2rem}.swatch[aria-checked=true]{box-shadow:inset 0 0 0 var(--stroke-thin) var(--color-marker)}@media (pointer:fine){.swatches{gap:var(--space-2);grid-template-columns:repeat(6,1.75rem);justify-content:center}.swatch{width:1.75rem;height:1.75rem}.swatch:before{width:1.375rem;height:1.375rem}}.brushes{border:var(--stroke-thin) solid var(--color-ink);border-radius:var(--radius-panel);padding:var(--space-1);grid-auto-columns:1fr;grid-auto-flow:column;display:grid}.brush{border:var(--stroke-thin) solid transparent;cursor:pointer;background:0 0;border-radius:.5rem;justify-self:center;place-items:center;width:min(100%,3.75rem);height:3rem;padding:0;display:grid}.brush--eraser{width:min(100%,3.75rem);margin-left:var(--space-1);border-left:var(--stroke-thin) solid var(--color-marker-soft);color:var(--color-ink);border-radius:.5rem}.brush--eraser:before{content:none}.brush--eraser .icon{width:1.5rem;height:1.5rem}.brush:before{content:"";width:var(--dot-size);height:var(--dot-size);background:var(--color-ink);border-radius:50%}.brush[aria-checked=true]{border-color:var(--color-marker)}.tempo{align-items:center;gap:var(--space-2);flex:1;min-width:0;display:flex}.tempo__icon{color:var(--color-ink);flex:none}.tempo__icon .icon{width:2rem;height:2rem}.slider{appearance:none;min-width:0;height:var(--touch);cursor:pointer;background:0 0;flex:1;margin:0}.slider::-webkit-slider-runnable-track{border:var(--stroke-thin) solid var(--color-ink);border-radius:var(--radius-pill);background:var(--color-marker-soft);height:1.125rem}.slider::-moz-range-track{border:var(--stroke-thin) solid var(--color-ink);border-radius:var(--radius-pill);background:var(--color-marker-soft);height:.75rem}.slider::-webkit-slider-thumb{-webkit-appearance:none;background:var(--color-ink);border:0;border-radius:50%;width:1.75rem;height:1.75rem;margin-top:-.5rem}.slider::-moz-range-thumb{background:var(--color-ink);border:0;border-radius:50%;width:1.75rem;height:1.75rem}.transport{gap:var(--space-2);flex:none;display:flex}.export{gap:var(--space-3);grid-template-columns:1fr 1fr;display:grid}.export .button--text{min-width:0;min-height:3.5rem}.modal-overlay{z-index:var(--layer-modal);background:var(--color-overlay);padding:calc(var(--space-4) + env(safe-area-inset-top)) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom));place-items:center;display:grid;position:fixed;inset:0}.modal{background:var(--color-paper);border:var(--stroke-thin) solid var(--color-ink);border-radius:var(--radius-panel);flex-direction:column;width:min(100%,28rem);max-height:100%;display:flex;overflow:hidden}.modal__header{justify-content:space-between;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-3) var(--space-3) var(--space-5);display:flex}.modal__title{font-size:var(--text-lg);line-height:var(--leading-title);margin:0}.modal__body{padding:0 var(--space-5) var(--space-5);overscroll-behavior:contain;overflow-y:auto}.modal__footer{justify-content:flex-end;gap:var(--space-3);padding:0 var(--space-5) var(--space-5);display:flex}.modal__footer .button--text{font-size:var(--text-md)}.menu{gap:var(--space-5);flex-direction:column;display:flex}.group{border:0;min-width:0;margin:0;padding:0}.group__title{margin-bottom:var(--space-2);font-size:var(--text-sm);color:var(--color-ink);padding:0;font-weight:700}.group__panel{border:var(--stroke-thin) solid var(--color-marker);border-radius:var(--radius-panel);padding:var(--space-2);gap:var(--space-2);flex-direction:column;display:flex}.credit{align-items:center;gap:var(--space-3);font-size:var(--text-xs);line-height:var(--leading-body);color:var(--color-ink);display:flex}.credit__avatar{object-fit:cover;border-radius:.6rem;flex:none;width:3rem;height:3rem}.credit__text{min-width:0;margin:0}.credit__link{padding:var(--space-3) 0;color:inherit;text-underline-offset:.15rem;text-decoration:underline}.choices{gap:var(--space-2);grid-template-columns:repeat(auto-fill,minmax(7.5rem,1fr));display:grid}.choice{appearance:none;min-height:var(--touch);padding:var(--space-1) var(--space-3);border:var(--stroke-thin) solid transparent;font:inherit;color:var(--color-ink);cursor:pointer;text-align:center;background:0 0;border-radius:.75rem}.choice:hover{background:var(--color-marker-soft)}.choice[aria-pressed=true]{background:var(--color-ink);color:var(--color-paper)}.song-row{align-items:center;gap:var(--space-1);grid-template-columns:1fr auto auto;display:grid}.song-row .choice{text-align:left;overflow-wrap:anywhere}.field{gap:var(--space-2);flex-direction:column;display:flex}.field__label{font-size:var(--text-sm);font-weight:700}.field__input{appearance:none;width:100%;min-height:var(--touch);padding:var(--space-2) var(--space-3);border:var(--stroke-thin) solid var(--color-ink);background:var(--color-paper);color:var(--color-ink);font:inherit;caret-color:var(--color-ink);border-radius:.75rem}.modal__text{margin:0}.toast{width:fit-content;left:0;right:0;bottom:calc(var(--space-5) + env(safe-area-inset-bottom));z-index:var(--layer-toast);max-width:calc(100% - 2 * var(--space-4));padding:var(--space-3) var(--space-5);border-radius:var(--radius-panel);background:var(--color-ink);color:var(--color-paper);border:var(--stroke-thin) solid var(--color-marker);align-items:center;gap:var(--space-4);margin-inline:auto;display:flex;position:fixed}.toast__action{appearance:none;padding:var(--space-2) var(--space-2);min-height:var(--touch);color:var(--color-paper);font:inherit;white-space:nowrap;cursor:pointer;background:0 0;border:0;font-weight:700;text-decoration:underline}.dropdown{min-width:0}.dropdown__button{appearance:none;width:100%;min-height:var(--touch);padding:var(--space-2) var(--space-3);justify-content:space-between;align-items:center;gap:var(--space-2);border:var(--stroke-thin) solid var(--color-ink);background:var(--color-paper);color:var(--color-ink);font:inherit;cursor:pointer;text-align:left;border-radius:.75rem;display:flex}.dropdown__button[aria-expanded=true]{border-color:var(--color-marker)}.dropdown__value{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.dropdown__arrow{flex:none;place-items:center;display:grid}.dropdown__list{z-index:var(--layer-dropdown);overscroll-behavior:contain;padding:var(--space-1);border:var(--stroke-thin) solid var(--color-ink);background:var(--color-paper);gap:var(--space-1);border-radius:.75rem;flex-direction:column;display:flex;position:fixed;overflow-y:auto}.dropdown__option{appearance:none;min-height:var(--touch);padding:var(--space-1) var(--space-3);justify-content:space-between;align-items:center;gap:var(--space-2);border:var(--stroke-thin) solid transparent;color:var(--color-ink);font:inherit;cursor:pointer;text-align:left;background:0 0;border-radius:.5rem;display:flex}.dropdown__option:hover{background:var(--color-marker-soft)}.dropdown__option[aria-selected=true]{background:var(--color-ink);color:var(--color-paper)}.dropdown__option-mark .icon{width:1.25rem;height:1.25rem}.field__input[type=search]::-webkit-search-cancel-button{appearance:none}.search{position:relative}.search__icon{left:var(--space-3);color:var(--color-marker);pointer-events:none;position:absolute;top:50%;transform:translateY(-50%)}.search .field__input{padding-left:calc(var(--space-3) + 1.5rem + var(--space-2))}.bar-grid{gap:var(--space-3);grid-template-columns:repeat(auto-fill,minmax(6.5rem,1fr));display:grid;position:relative}.bar-tile{padding:var(--space-1);align-items:stretch;gap:var(--space-1);border:var(--stroke-thin) solid var(--color-marker-soft);background:var(--color-paper);color:var(--color-ink);border-radius:.75rem;flex-direction:column;display:flex}.bar-tile[aria-current=true]{border-color:var(--color-ink)}.bar-tile__head{grid-template-columns:var(--touch) 1fr var(--touch);align-items:center;display:grid}.bar-tile__grip{width:100%;height:var(--touch);color:var(--color-marker);cursor:grab;touch-action:none;place-items:center;display:grid}.bar-tile__open{appearance:none;cursor:pointer;background:0 0;border:0;padding:0}.bar-tile__canvas{width:100%;aspect-ratio:var(--tile-ratio);background:var(--color-canvas);-webkit-user-drag:none;border-radius:.5rem;display:block}.bar-tile__number{font-size:var(--text-sm);text-align:center;font-weight:700}.bar-tile--new{appearance:none;font:inherit;cursor:pointer;border-style:dashed;justify-content:center}.bar-tile__plus{width:100%;aspect-ratio:var(--tile-ratio);color:var(--color-marker);place-items:center;display:grid}.bar-tile__plus .icon{width:2rem;height:2rem}.bar-grid.is-sorting{cursor:grabbing}.bar-grid.is-sorting .bar-tile:not(.is-dragging){transition:transform .15s}.bar-tile.is-dragging{z-index:var(--layer-lifted);border-color:var(--color-ink);position:relative}