.app{flex-direction:column;height:100%;min-height:0;display:flex}.stage{flex:auto;min-height:0;display:flex;position:relative}.workspace,.page{flex-direction:column;flex:auto;min-width:0;min-height:0;display:flex}.eyebrow{letter-spacing:.12em;text-transform:uppercase;color:var(--jl-muted);white-space:nowrap;font-size:.66rem;font-weight:700}.vrule{background:var(--jl-line-strong);flex-shrink:0;width:1px;height:1.1rem;margin:0 .25rem}.iconbtn{min-width:1.85rem;height:1.85rem;color:var(--jl-muted);white-space:nowrap;cursor:pointer;border-radius:.5rem;justify-content:center;align-items:center;gap:.3rem;padding:0 .45rem;font-size:.8rem;font-weight:600;line-height:1;transition:background-color .12s,color .12s,transform .12s;display:inline-flex}.iconbtn:hover{background:var(--jl-cell-hover);color:var(--jl-text)}.iconbtn:active{transform:scale(.96)}.iconbtn[data-active=true]{background:color-mix(in oklab, var(--jl-accent) 22%, transparent);color:var(--jl-accent)}.iconbtn:disabled{opacity:.35;cursor:not-allowed}.iconbtn--danger:hover{color:#e03c3c;background:#ff525224}.iconbtn--tiny{border-radius:.4rem;min-width:1.45rem;height:1.45rem;padding:0 .3rem;font-size:.68rem}:is(.iconbtn,.chip,.tick,.playbtn,.addcard,.recbtn,.tool,.mutebtn,.detail-tab,.modeswitch-item,.select,.auto-point):focus-visible{outline:2px solid var(--jl-accent);outline-offset:2px}.chip{border:1px solid var(--jl-line);background:var(--jl-raised);height:1.9rem;color:var(--jl-muted);white-space:nowrap;cursor:pointer;border-radius:.55rem;align-items:center;gap:.4rem;padding:0 .7rem;font-size:.8rem;font-weight:600;transition:background-color .12s,color .12s,border-color .12s,box-shadow .12s;display:inline-flex}.chip:hover{color:var(--jl-text);border-color:var(--jl-line-strong)}.chip[data-active=true]{background:color-mix(in oklab, var(--jl-accent) 18%, transparent);border-color:color-mix(in oklab, var(--jl-accent) 60%, transparent);color:var(--jl-accent)}.chip--juice{border-color:color-mix(in oklab, var(--jl-accent) 40%, var(--jl-line));color:var(--jl-text)}.chip--juice:hover{background:color-mix(in oklab, var(--jl-accent) 14%, var(--jl-raised));border-color:var(--jl-accent);box-shadow:0 0 0 3px color-mix(in oklab, var(--jl-accent) 16%, transparent)}.chip--draggable{cursor:grab}.chip--draggable:active{cursor:grabbing}.chip[data-dragging=true]{opacity:.4}.chip[data-drop=true]{box-shadow:-3px 0 0 0 var(--jl-accent)}.chip-dot{background:var(--jl-line-strong);border-radius:999px;width:.45rem;height:.45rem}.chip-dot[data-on=true]{background:var(--jl-accent);box-shadow:0 0 6px var(--jl-accent)}.chip-index{font-family:var(--font-mono);color:var(--jl-muted);font-size:.65rem}.setting{flex-direction:column;gap:.35rem;display:flex}.setting-label{letter-spacing:.1em;text-transform:uppercase;color:var(--jl-muted);font-size:.66rem;font-weight:700}.setting-row{background:var(--jl-raised);box-shadow:inset 0 0 0 1px var(--jl-line);border-radius:.6rem;align-items:center;gap:.25rem;padding:.2rem;display:flex}.setting-row--loose{gap:.6rem;padding:.3rem .4rem}.setting-file{background:var(--jl-cell);max-width:14rem;font-family:var(--font-mono);white-space:nowrap;text-overflow:ellipsis;border-radius:.4rem;padding:.2rem .5rem;font-size:.72rem;overflow:hidden}.setting-hint{color:var(--jl-muted);padding:0 .3rem;font-size:.78rem}.transportbar{background:var(--jl-panel);border-bottom:1px solid var(--jl-line);z-index:20;flex-shrink:0;grid-template-columns:minmax(max-content,1fr) auto 1fr;align-items:center;gap:.75rem 1rem;height:3.5rem;padding:0 .9rem;display:grid;position:relative}.transportbar-left,.transportbar-right{align-items:center;gap:.75rem;min-width:0;display:flex}.transportbar-right{justify-content:flex-end;gap:.25rem}.logo{flex-shrink:0;height:1.9rem}@media (width<=55.9rem){.transportbar{grid-template-columns:1fr auto;height:auto;padding:.5rem .75rem}.transport{grid-area:2/1/auto/-1;justify-content:center}}.transport{align-items:center;gap:.5rem;min-width:0;display:flex}.playbtn{background:var(--jl-brand-gradient);width:2.5rem;height:2.5rem;color:var(--jl-brand-ink);cursor:pointer;box-shadow:inset 0 1px 0 #ffffff59, 0 6px 18px -6px color-mix(in oklab, var(--jl-brand-2) 80%, transparent);border-radius:.8rem;flex-shrink:0;justify-content:center;align-items:center;transition:transform .12s,box-shadow .2s,filter .2s;display:inline-flex;position:relative}.playbtn:hover{filter:brightness(1.08);transform:scale(1.04)}.playbtn:active{transform:scale(.97)}.playbtn[data-playing=true]{animation:1.2s ease-out infinite playpulse}.playbtn--wide{border-radius:999px;gap:.4rem;width:auto;height:2.9rem;padding:0 1.5rem 0 1.1rem;font-weight:700}@keyframes playpulse{0%{box-shadow:inset 0 1px 0 #ffffff59, 0 6px 18px -6px color-mix(in oklab, var(--jl-brand-2) 80%, transparent), 0 0 0 0 color-mix(in oklab, var(--jl-brand) 55%, transparent)}to{box-shadow:inset 0 1px 0 #ffffff59, 0 6px 18px -6px color-mix(in oklab, var(--jl-brand-2) 80%, transparent), 0 0 0 12px transparent}}.readout{background:var(--jl-bg);height:2.3rem;box-shadow:inset 0 0 0 1px var(--jl-line);font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--jl-muted);border-radius:.6rem;align-items:center;gap:.5rem;padding:0 .75rem 0 .65rem;transition:color .2s;display:flex}.readout[data-playing=true]{color:var(--jl-text)}.readout-value{letter-spacing:.02em;font-size:1.05rem;font-weight:700}.readout-unit{letter-spacing:.1em;text-transform:uppercase;color:var(--jl-muted);font-size:.62rem;font-weight:700}.readout-dot{background:var(--jl-line-strong);border-radius:999px;width:.45rem;height:.45rem;transition:background-color .2s}.readout[data-playing=true] .readout-dot{background:var(--jl-brand-2);box-shadow:0 0 8px var(--jl-brand-2)}.tempo{background:var(--jl-bg);height:2.3rem;box-shadow:inset 0 0 0 1px var(--jl-line);border-radius:.6rem;align-items:center;gap:.1rem;padding:0 .25rem;display:flex}.tempo-unit{letter-spacing:.1em;color:var(--jl-muted);padding-right:.2rem;font-size:.62rem;font-weight:700}.bpm-input{text-align:center;width:3.4rem;height:1.75rem;color:var(--jl-text);font-family:var(--font-mono);appearance:textfield;cursor:ns-resize;touch-action:none;background:0 0;border:0;outline:0;padding:0;font-size:1.05rem;font-weight:700}.bpm-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.bpm-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.bpm-input:focus{cursor:text}.bpm-input:focus-visible,.bpm-input--dragging{color:var(--jl-brand-2)}.history{background:var(--jl-bg);height:2.3rem;box-shadow:inset 0 0 0 1px var(--jl-line);border-radius:.6rem;align-items:center;gap:.1rem;padding:0 .2rem;display:flex}.filebar{background:var(--jl-bg);height:2.3rem;box-shadow:inset 0 0 0 1px var(--jl-line);border-radius:.6rem;align-items:center;gap:.1rem;min-width:0;padding:0 .2rem 0 .35rem;display:flex}.filebar[data-busy=true]{opacity:.6;pointer-events:none}.filebar-name{width:8.5rem;height:1.85rem;color:var(--jl-text);text-overflow:ellipsis;background:0 0;border-radius:.45rem;outline:none;flex-shrink:0;padding:0 .4rem;font-size:.8rem;font-weight:600;transition:background-color .12s}.filebar-name:hover{background:var(--jl-cell-hover)}.filebar-name:focus{background:var(--jl-cell);box-shadow:inset 0 0 0 1px var(--jl-accent)}.filebar-dirty{background:var(--jl-accent);opacity:0;border-radius:999px;flex-shrink:0;width:.45rem;height:.45rem;margin:0 .3rem 0 .1rem;transition:opacity .15s,transform .15s;transform:scale(.4)}.filebar-dirty[data-dirty=true]{opacity:1;transform:scale(1)}@media (width<=55.9rem){.filebar{padding-left:.5rem}.filebar-name{display:none}.filebar-dirty{margin-left:0}}.viewswitch{background:var(--jl-bg);box-shadow:inset 0 0 0 1px var(--jl-line);border-radius:.6rem;align-items:center;gap:2px;padding:3px;display:inline-flex}.viewswitch-item{height:1.85rem;color:var(--jl-muted);white-space:nowrap;cursor:pointer;border-radius:.45rem;align-items:center;gap:.4rem;padding:0 .8rem;font-size:.8rem;font-weight:600;text-decoration:none;transition:background-color .15s,color .15s,box-shadow .15s;display:inline-flex}.viewswitch-item:hover{color:var(--jl-text)}.viewswitch-item[data-active=true]{background:var(--jl-raised);color:var(--jl-text);box-shadow:0 1px 4px #0000002e}.viewswitch-item:focus-visible{outline:2px solid var(--jl-brand);outline-offset:1px}.viewswitch-count{background:color-mix(in oklab, var(--jl-brand) 22%, transparent);min-width:1.1rem;color:var(--jl-brand);font-family:var(--font-mono);text-align:center;border-radius:999px;padding:0 .3rem;font-size:.65rem;line-height:1.1rem}.modeswitch{background:var(--jl-bg);box-shadow:inset 0 0 0 1px var(--jl-line);border-radius:999px;align-items:center;gap:2px;padding:3px;display:inline-flex}.modeswitch-item{height:1.85rem;color:var(--jl-muted);white-space:nowrap;cursor:pointer;border-radius:999px;align-items:center;gap:.35rem;padding:0 .85rem;font-size:.78rem;font-weight:700;transition:background-color .15s,color .15s,box-shadow .15s;display:inline-flex}.modeswitch-item:hover{color:var(--jl-text)}.modeswitch-item[data-active=true]{background:var(--jl-raised);color:var(--jl-text);box-shadow:0 1px 4px #0000002e}.modeswitch-item[data-active=true][data-mode=pro]{background:var(--jl-brand-gradient);color:var(--jl-brand-ink);box-shadow:0 4px 14px -6px color-mix(in oklab, var(--jl-brand-2) 80%, transparent)}.statusbar{background:var(--jl-panel);border-top:1px solid var(--jl-line);height:1.7rem;color:var(--jl-muted);white-space:nowrap;flex-shrink:0;align-items:center;gap:1rem;padding:0 .9rem;font-size:.7rem;display:flex;overflow:hidden}.statusbar-hint{text-overflow:ellipsis;overflow:hidden}.statusbar-key{flex-shrink:0;align-items:center;gap:.35rem;display:inline-flex}.statusbar kbd{background:var(--jl-cell);font-family:var(--font-mono);color:var(--jl-text);border-radius:.3rem;padding:0 .35rem;font-size:.64rem;line-height:1.1rem}.statusbar-credit{flex-shrink:0}.statusbar-credit a{color:var(--jl-brand)}.statusbar-credit a:hover{text-decoration:underline}@media (width<=47.9rem){.statusbar-hint,.statusbar-key{display:none}}.steps{grid-auto-flow:column;grid-auto-columns:var(--jl-beat-w);gap:var(--jl-beat-gap);touch-action:none;grid-template-rows:minmax(0,1fr);width:max-content;display:grid}.beat{gap:var(--jl-cell-gap);grid-template-columns:repeat(4,minmax(0,1fr));display:grid}.tick{background:var(--jl-cell);width:100%;height:100%;color:var(--jl-muted);font-family:var(--font-mono);cursor:pointer;border-radius:.45rem;justify-content:center;align-items:center;font-size:.7rem;font-weight:600;transition:background-color 80ms,color 80ms,box-shadow .15s,transform .1s;display:flex;position:relative;box-shadow:inset 0 1px #ffffff0a}.tick--downbeat{background:var(--jl-cell-downbeat)}.tick:hover{background:var(--jl-cell-hover);color:var(--jl-text)}.tick-label{opacity:0;transition:opacity .1s}.tick--active .tick-label,.tick:hover .tick-label{opacity:1}.tick--active,.tick--active:hover{background:radial-gradient(120% 90% at 50% 0%, #ffffff52, transparent 60%), var(--jl-accent);color:var(--jl-accent-ink);box-shadow:inset 0 1px 0 #ffffff59, 0 0 14px -2px color-mix(in oklab, var(--jl-accent) 70%, transparent);font-weight:700}.tick--active.tick--partial,.tick--active.tick--partial:hover{background:linear-gradient(90deg, var(--jl-accent) calc(var(--fill) * 100%), var(--jl-cell-hover) calc(var(--fill) * 100%));box-shadow:inset 0 1px #ffffff26}.tick--tail,.tick--tail:hover{background:color-mix(in oklab, var(--jl-accent) 45%, var(--jl-cell));color:color-mix(in oklab, var(--jl-accent-ink) 70%, var(--jl-accent));border-radius:0 .45rem .45rem 0}.tick--open-end{border-top-right-radius:0;border-bottom-right-radius:0}.tick--current:after{content:"";border-radius:inherit;box-shadow:inset 0 0 0 1.5px color-mix(in oklab, var(--jl-text) 60%, transparent);pointer-events:none;background:linear-gradient(#ffffff38,#ffffff0f);position:absolute;inset:0}.tick--current.tick--active{filter:brightness(1.18)}.track--muted .tick--active{filter:saturate(.15)brightness(.85)}.tick--ghost,.tick--ghost:hover{opacity:.32;pointer-events:none;cursor:default;background:var(--jl-cell);box-shadow:none;outline:1px dashed var(--jl-line-strong);outline-offset:-1px}.tick--ghost.tick--active,.tick--ghost.tick--active:hover{background:var(--jl-accent);opacity:.4;outline:none}.tick--ghost.tick--current{opacity:.7}.tick--ghost.tick--current.tick--active{filter:none}.ruler{z-index:4;margin:0 calc(-1 * var(--jl-row-pad));padding:.35rem var(--jl-row-pad) .3rem;background:var(--jl-panel);border-bottom:1px solid var(--jl-line);display:flex;position:sticky;top:0}.ruler-spacer{left:var(--jl-row-pad);z-index:3;width:var(--jl-head-space);background:var(--jl-panel);box-shadow:calc(-1 * var(--jl-row-pad)) 0 0 0 var(--jl-panel);flex-shrink:0;position:sticky}.ruler-cell{height:1.2rem;font-family:var(--font-mono);color:var(--jl-muted);border-radius:.35rem;justify-content:center;align-items:center;font-size:.7rem;font-weight:700;transition:background-color 80ms,color 80ms;display:flex}.ruler-cell--dot:before{content:"";background:var(--jl-line-strong);border-radius:999px;width:3px;height:3px}.ruler-cell--current{background:var(--jl-brand-gradient);color:var(--jl-brand-ink);box-shadow:0 0 12px color-mix(in oklab, var(--jl-brand-2) 60%, transparent)}.ruler-cell--current:before{background:var(--jl-brand-ink)}.barlane-cell{background:var(--jl-cell);cursor:ns-resize;border-radius:.4rem;height:3.5rem;position:relative;overflow:hidden}.barlane-fill{background:var(--jl-bar);border-radius:2px 2px 0 0;transition:height 60ms;position:absolute;bottom:0;left:0;right:0}.barlane-cell--active .barlane-fill{background:linear-gradient(to top, var(--jl-lane-color,var(--jl-accent)), color-mix(in oklab, var(--jl-lane-color,var(--jl-accent)) 55%, white))}.automation{margin-left:calc(-1 * var(--jl-head-space));gap:.5rem}.autolane,.automation-foot{grid-template-columns:var(--jl-track-head) max-content;align-items:center;gap:0 var(--jl-track-gap);display:grid}.autolane{--jl-lane-color:var(--jl-auto)}.autolane-body{width:calc(var(--jl-auto-beats) * (var(--jl-beat-w) + var(--jl-beat-gap)) - var(--jl-beat-gap));cursor:crosshair;touch-action:none;background:linear-gradient(180deg, color-mix(in oklab, var(--jl-auto) 8%, transparent), transparent), repeating-linear-gradient(90deg, var(--jl-line-strong) 0 1px, transparent 1px calc(400% / var(--jl-auto-steps))), repeating-linear-gradient(90deg, var(--jl-line) 0 1px, transparent 1px calc(100% / var(--jl-auto-steps))), var(--jl-cell);border-radius:.45rem;height:3.6rem;position:relative;overflow:hidden}.autolane-target{background:color-mix(in oklab, var(--jl-accent) 14%, transparent);min-width:0;height:1.55rem;color:var(--jl-accent);white-space:nowrap;text-overflow:ellipsis;border-radius:.5rem;align-items:center;gap:.3rem;padding:0 .5rem;font-size:.74rem;font-weight:700;display:inline-flex;overflow:hidden}.autolane-head,.automation-foot-head{left:var(--jl-row-pad);z-index:2;background:var(--jl-panel);min-width:0;height:100%;box-shadow:inset 0 0 0 1px var(--jl-line), calc(-1 * var(--jl-row-pad)) 0 0 0 var(--jl-bg);border-radius:.55rem;flex-direction:column;justify-content:center;gap:.3rem;padding:.3rem .4rem .3rem .8rem;display:flex;position:sticky}.autolane-head:before{content:"";background:var(--jl-auto);border-radius:0 999px 999px 0;width:3px;position:absolute;top:.5rem;bottom:.5rem;left:0}.autolane-head .arr-head-title{gap:.35rem}.autolane-head .select{flex:1 1 0;width:0;min-width:0}.automation-foot-head{box-shadow:none;background:0 0}.autolane-swatch{background:var(--jl-auto);width:.6rem;height:.6rem;box-shadow:0 0 8px var(--jl-auto);border-radius:999px;flex-shrink:0}.autolane-range{font-family:var(--font-mono);color:var(--jl-muted);white-space:nowrap;align-items:center;gap:.15rem;font-size:.68rem;display:inline-flex}.autolane-live{background:color-mix(in oklab, var(--jl-auto) 22%, transparent);color:var(--jl-text);font-family:var(--font-mono);white-space:nowrap;border-radius:.3rem;padding:.1rem .4rem;font-size:.66rem;font-weight:700}.select{border:1px solid var(--jl-line);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23928bb8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right .45rem center / .85rem, var(--jl-raised);max-width:100%;height:1.75rem;color:var(--jl-text);font:inherit;white-space:nowrap;text-overflow:ellipsis;cursor:pointer;appearance:none;border-radius:.5rem;padding:0 1.6rem 0 .6rem;font-size:.78rem;font-weight:600;transition:border-color .12s;overflow:hidden}.select:hover{border-color:var(--jl-line-strong)}.select:disabled{opacity:.5;cursor:not-allowed}.select--add{color:var(--jl-lane-color,var(--jl-accent));border-style:dashed;border-color:color-mix(in oklab, var(--jl-lane-color,var(--jl-accent)) 55%, transparent);background-color:#0000}.select--tight{flex:auto;min-width:0;height:1.55rem;padding-left:.45rem;font-size:.74rem}.select optgroup,.select option{background:var(--jl-panel);color:var(--jl-text)}.note-handle{cursor:ew-resize;opacity:0;background:#14100c59;border-radius:2px;width:4px;transition:opacity .12s;position:absolute;top:4px;bottom:4px}.note-handle--start{left:2px}.note-handle--end{right:2px}.pianorow:hover .note-handle,.steps:hover .note-handle{opacity:1}.note-handle:hover{background:#14100ccc}.pianoroll{margin-left:calc(-1 * var(--jl-head-space));flex-direction:column;gap:.4rem;display:flex}.pianorow{align-items:stretch;height:1.5rem;padding-bottom:3px;display:flex}.pianokeys{left:var(--jl-row-pad);z-index:2;flex:0 0 var(--jl-head-space);padding-right:var(--jl-track-gap);background:var(--jl-panel);box-shadow:calc(-1 * var(--jl-row-pad)) 0 0 0 var(--jl-panel);justify-content:flex-end;display:flex;position:sticky}.pianokey{width:var(--jl-key-width);font-family:var(--font-mono);background:var(--jl-key-white);color:var(--jl-key-white-ink);border:1px solid var(--jl-line);border-radius:.3rem;justify-content:flex-end;align-items:center;padding-right:.5rem;font-size:.68rem;font-weight:700;display:flex}.pianorow--black .pianokey{background:var(--jl-key-black);color:var(--jl-key-black-ink);border-color:#0000}.pianorow--c .pianokey{color:var(--jl-accent)}.pianorow .steps{flex:none}.pianolane{height:100%;position:relative}.pianolane>.steps{height:100%}.pianotick{background:var(--jl-cell);cursor:pointer;border-radius:.3rem;transition:background-color 80ms;position:relative}.pianorow--black .pianotick{background:color-mix(in oklab, var(--jl-cell) 70%, var(--jl-bg))}.pianorow:hover .pianotick{background:var(--jl-cell-hover)}.pianorow .pianotick--current{background:color-mix(in oklab, var(--jl-cell-hover) 70%, var(--jl-text) 8%)}.pianonote{z-index:1;background:linear-gradient(180deg, #ffffff38, transparent 55%), var(--jl-accent);box-shadow:0 0 8px color-mix(in oklab, var(--jl-accent) 45%, transparent);cursor:grab;touch-action:none;border-radius:.3rem;transition:filter .1s;position:absolute;top:0;bottom:3px}.pianonote:hover{filter:brightness(1.1)}.pianonote:active{cursor:grabbing}.pianonote--current{outline-offset:-2px;outline:2px solid #ffffffe6}.pianonote .note-handle{top:2px;bottom:2px}.export{flex-direction:column;gap:1rem;padding-top:.25rem;display:flex}.export-group{border:0;flex-direction:column;gap:.6rem;min-width:0;margin:0;padding:0;display:flex}.export-group:disabled{opacity:.6}.export-label{letter-spacing:.08em;text-transform:uppercase;color:var(--jl-muted);margin-bottom:.1rem;padding:0;font-size:.68rem;font-weight:700}.export-kinds{flex-wrap:wrap;gap:.35rem;display:flex}.export-kind{border:1px solid var(--jl-line);background:var(--jl-raised);height:2.1rem;color:var(--jl-muted);cursor:pointer;border-radius:.6rem;align-items:center;gap:.4rem;padding:0 .85rem;font-size:.8rem;font-weight:600;transition:background-color .12s,color .12s,border-color .12s,box-shadow .12s;display:inline-flex}.export-kind:hover:not(:disabled){color:var(--jl-text);border-color:var(--jl-line-strong)}.export-kind[data-active=true]{color:var(--jl-text);background:color-mix(in oklab, var(--jl-brand) 22%, var(--jl-raised));border-color:color-mix(in oklab, var(--jl-brand) 70%, transparent);box-shadow:0 0 0 1px color-mix(in oklab, var(--jl-brand) 35%, transparent)}.export-kind:disabled{opacity:.45;cursor:not-allowed}.export-row{flex-wrap:wrap;gap:.75rem;display:flex}.export-field{min-width:0;color:var(--jl-muted);flex-direction:column;flex:8rem;gap:.25rem;font-size:.72rem;font-weight:600;display:flex}.export-field .select{width:100%;height:2rem}.export-outlook{background:var(--jl-bg);box-shadow:inset 0 0 0 1px var(--jl-line);color:var(--jl-muted);border-radius:.6rem;align-items:center;gap:.45rem;margin:0;padding:.55rem .7rem;font-size:.78rem;display:flex}.export-outlook[data-error=true]{color:#e5484d}.export-actions{justify-content:flex-end;gap:.5rem;display:flex}.pianoroll-dialog .p-dialog-content{flex-direction:column;padding-top:.25rem;display:flex}.pianoroll--dialog{--jl-lane:calc(100cqw - var(--jl-key-width) - .75rem);--jl-beat-w:calc((var(--jl-lane) - (var(--jl-roll-beats,8) - 1) * var(--jl-beat-gap)) / var(--jl-roll-beats,8));--jl-cell-w:calc((var(--jl-beat-w) - 3 * var(--jl-cell-gap)) / 4);flex:auto;min-height:0;margin-left:0;container-type:inline-size}.pianoroll--dialog .pianoroll-scroller{height:min(62vh,36rem)}.pianoroll--dialog .pianorow{height:var(--jl-roll-row,28px);padding-bottom:3px}.pianoroll--dialog .pianokeys{flex:0 0 var(--jl-key-width);box-shadow:none;background:0 0;margin-right:.75rem;padding-right:0;position:static}.pianoroll--dialog .pianokey{width:100%;font-size:.72rem}.pianoroll--dialog .pianorow--c{box-shadow:inset 0 -1px 0 var(--jl-line-strong)}.pianoroll--dialog .pianotick{border-radius:.35rem}.pianoroll--dialog .pianotick--downbeat{background:var(--jl-cell-downbeat)}.pianoroll--dialog .pianorow--black .pianotick--downbeat{background:color-mix(in oklab, var(--jl-cell-downbeat) 70%, var(--jl-bg))}.pianoroll--dialog .lane-foot{flex-wrap:wrap;padding-left:0}.pianoroll-ruler{border-bottom:1px solid var(--jl-line-strong);align-items:stretch;height:1.4rem;margin-bottom:.15rem;display:flex}.pianoroll-ruler .pianokeys{flex:0 0 var(--jl-key-width);margin-right:.75rem}.pianoroll-ruler .ruler-cell{font-size:.72rem}.p-dialog-maximized .pianoroll--dialog .pianoroll-scroller{flex:auto;height:auto}@media (width<=640px){.pianoroll--dialog{--jl-lane:max(calc(100cqw - var(--jl-key-width) - .75rem), calc(var(--jl-roll-beats,8) * (4 * 2rem + 3 * var(--jl-cell-gap)) + (var(--jl-roll-beats,8) - 1) * var(--jl-beat-gap)))}.pianoroll--dialog .pianokeys{z-index:2;background:var(--jl-panel);position:sticky;left:0}.pianoroll--dialog .pianoroll-scroller{height:min(55vh,34rem)}.pianoroll-ruler{display:none}}.timeline{min-height:0;padding:0 var(--jl-row-pad);--jl-cell-max:clamp(2.75rem, 2.6vw, 4.25rem);--jl-lane:min(calc(100cqw - var(--jl-head-space) - 2 * var(--jl-row-pad)), calc(8 * (4 * var(--jl-cell-max) + 3 * var(--jl-cell-gap)) + 7 * var(--jl-beat-gap)));--jl-beat-w:calc((var(--jl-lane) - 7 * var(--jl-beat-gap)) / 8);--jl-cell-w:calc((var(--jl-beat-w) - 3 * var(--jl-cell-gap)) / 4);flex:auto;overflow:auto;container-type:inline-size}.timeline-inner{flex-direction:column;width:max-content;min-width:100%;min-height:100%;display:flex;position:relative}.beam{z-index:2;width:var(--jl-cell-w);background:linear-gradient(180deg, color-mix(in oklab, var(--jl-brand-2) 22%, transparent), color-mix(in oklab, var(--jl-brand) 10%, transparent));box-shadow:inset 1px 0 0 color-mix(in oklab, var(--jl-brand-2) 55%, transparent), inset -1px 0 0 color-mix(in oklab, var(--jl-brand-2) 55%, transparent), 0 0 18px color-mix(in oklab, var(--jl-brand-2) 25%, transparent);pointer-events:none;border-radius:.45rem;position:absolute;top:0;bottom:0}.addrow{left:var(--jl-row-pad);width:calc(100cqw - 2 * var(--jl-row-pad));align-items:center;gap:.5rem;padding:.85rem .25rem 1.5rem;display:flex;position:sticky}.addrow .eyebrow{margin-right:.35rem}.track{border-bottom:1px solid var(--jl-line);transition:opacity .2s,background-color .2s;position:relative}.track--muted{opacity:.55}.track--selected{background:color-mix(in oklab, var(--jl-accent) 4%, transparent)}.track-inner{grid-template-columns:var(--jl-track-head) max-content;gap:.5rem var(--jl-track-gap);padding:.45rem 0;display:grid}.track-head{left:var(--jl-row-pad);z-index:3;background:linear-gradient(90deg, color-mix(in oklab, var(--jl-accent) 10%, transparent), transparent 70%), var(--jl-panel);min-width:0;box-shadow:inset 0 0 0 1px var(--jl-line), calc(-1 * var(--jl-row-pad)) 0 0 0 var(--jl-bg);cursor:default;border-radius:.65rem;flex-direction:column;gap:.3rem;padding:.35rem .4rem .35rem .8rem;transition:box-shadow .15s,background-color .15s;display:flex;position:sticky}.track-head:before{content:"";background:var(--jl-accent);border-radius:0 999px 999px 0;width:4px;transition:width .15s;position:absolute;top:.5rem;bottom:.5rem;left:0}.track--selected .track-head{background:linear-gradient(90deg, color-mix(in oklab, var(--jl-accent) 18%, transparent), transparent 70%), var(--jl-raised);box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--jl-accent) 55%, var(--jl-line)), calc(-1 * var(--jl-row-pad)) 0 0 0 var(--jl-bg)}.track--selected .track-head:before{width:5px;box-shadow:0 0 14px color-mix(in oklab, var(--jl-accent) 70%, transparent)}.track-title{align-items:center;gap:.45rem;height:1.75rem;display:flex}.track-actions{opacity:0;gap:1px;transition:opacity .12s;display:inline-flex}.track-head:hover .track-actions,.track--selected .track-actions,.track-actions:focus-within{opacity:1}.track-mix{align-items:center;gap:.5rem;height:1.5rem;display:flex}.track-db{width:3.8rem;font-family:var(--font-mono);color:var(--jl-muted);text-align:right;white-space:nowrap;font-size:.68rem}.mutebtn{background:var(--jl-cell);width:1.5rem;height:1.35rem;color:var(--jl-muted);font-family:var(--font-mono);cursor:pointer;border-radius:.35rem;justify-content:center;align-items:center;font-size:.68rem;font-weight:700;transition:background-color .12s,color .12s;display:inline-flex}.mutebtn:hover{background:var(--jl-cell-hover);color:var(--jl-text)}.mutebtn[data-active=true]{background:var(--jl-accent);color:var(--jl-accent-ink);box-shadow:0 0 10px color-mix(in oklab, var(--jl-accent) 60%, transparent)}.track-grid{z-index:1;min-width:var(--jl-lane);flex-direction:column;display:flex;position:relative}.track-grid-slot{flex-direction:column;flex:auto;justify-content:center;display:flex;position:relative}.track-steps{flex:none;grid-template-rows:auto}.track-steps .tick{aspect-ratio:1;height:auto}.track-empty,.dropzone{color:var(--jl-muted);align-items:center;gap:.75rem;padding:0 .9rem;font-size:.85rem;display:flex}.track-below{flex-direction:column;grid-column:1/-1;gap:.5rem;min-width:0;display:flex}.track-below:not(:has(*)){display:none}.track-lane{padding-left:var(--jl-head-space)}.track-lane:not(:has(*)){display:none}.lane-stack{flex-direction:column;gap:.5rem;display:flex}.lane-foot{align-items:center;gap:.75rem;display:flex}.pianoroll .lane-foot{padding-left:var(--jl-head-space)}.lane-hint{color:var(--jl-muted);font-size:.74rem}.track-badge{background:color-mix(in oklab, var(--jl-accent) 20%, transparent);width:1.6rem;height:1.6rem;color:var(--jl-accent);border-radius:.45rem;flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.track-name{font-family:var(--font-display);letter-spacing:-.01em;white-space:nowrap;font-size:.98rem;font-weight:700}.track-index{font-family:var(--font-mono);color:var(--jl-muted);font-size:.7rem;font-weight:700}.track-length{background:color-mix(in oklab, var(--jl-accent) 14%, transparent);color:var(--jl-accent);font-family:var(--font-mono);white-space:nowrap;border-radius:.3rem;padding:.1rem .35rem;font-size:.64rem;font-weight:700}.track-length:after{content:" st";opacity:.7}.track .p-slider{background:var(--jl-cell-hover);height:4px}.track .p-slider-range{background:var(--jl-accent)}.track .p-slider-handle{border-color:var(--jl-accent);width:14px;height:14px}.track .p-slider-handle:before{background:var(--jl-accent)}.tools{background:color-mix(in oklab, var(--jl-cell) 70%, transparent);border-radius:.55rem;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;gap:2px;padding:2px;display:grid}.tools:has(>:nth-child(4)){grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:row}.tool{min-width:0;height:1.6rem;color:var(--jl-muted);white-space:nowrap;cursor:pointer;border-radius:.4rem;justify-content:center;align-items:center;gap:.3rem;padding:0 .3rem;font-size:.74rem;font-weight:600;transition:background-color .12s,color .12s,box-shadow .12s;display:inline-flex}.tool:hover{color:var(--jl-text);background:var(--jl-cell-hover)}.tool[data-active=true]{background:var(--jl-raised);color:var(--jl-accent);box-shadow:0 1px 4px #0000002e}.tool:disabled{opacity:.35;cursor:not-allowed}.tool-count{background:color-mix(in oklab, var(--jl-accent) 22%, transparent);min-width:1rem;color:var(--jl-accent);font-family:var(--font-mono);text-align:center;border-radius:999px;padding:0 .25rem;font-size:.6rem;line-height:1rem}.grid-hint{pointer-events:none;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.grid-hint span{background:var(--jl-overlay);border:1px dashed color-mix(in oklab, var(--jl-accent) 60%, transparent);color:var(--jl-text);border-radius:999px;padding:.35rem .8rem;font-size:.8rem;font-weight:600;animation:2.4s ease-in-out infinite hintfloat}@keyframes hintfloat{50%{transform:translateY(-3px)}}@media (width<=63.9rem){:root{--jl-head-space:0rem}.timeline{--jl-lane:max(calc(100cqw - 2 * var(--jl-row-pad)), 38rem)}.track-inner{grid-template-columns:max-content}.track-head{width:var(--jl-lane);box-shadow:inset 0 0 0 1px var(--jl-line);flex-flow:wrap;align-items:center;gap:.35rem .75rem;position:static}.track--selected .track-head{box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--jl-accent) 45%, var(--jl-line))}.track-head>*{flex:14rem}.ruler-spacer{display:none}.pianoroll{margin-left:0}.pianokeys{flex-basis:var(--jl-key-width);padding-right:0}.automation{margin-left:0}.autolane,.automation-foot{grid-template-columns:max-content;gap:.35rem 0}.autolane-head,.automation-foot-head{width:var(--jl-lane);height:auto;box-shadow:inset 0 0 0 1px var(--jl-line);position:static}}.hero{text-align:center;flex-direction:column;flex:auto;justify-content:center;align-items:center;gap:2rem;padding:2rem 1rem 3rem;display:flex;overflow:auto}.hero-title{font-family:var(--font-display);letter-spacing:-.03em;font-size:2.9rem;font-weight:800;line-height:1}.hero-text{max-width:34rem;color:var(--jl-muted);margin:.9rem auto 0;line-height:1.5}.hero-text b{color:var(--jl-text)}.hero-cards{flex-wrap:wrap;justify-content:center;gap:1rem;display:flex}.addcard{border:1px solid var(--jl-line);background:var(--jl-panel);text-align:left;cursor:pointer;border-radius:.9rem;flex-direction:column;align-items:flex-start;gap:.6rem;width:15.5rem;padding:1.2rem 1.25rem 1.3rem;transition:transform .15s,border-color .15s,box-shadow .15s;display:flex;position:relative;overflow:hidden}.addcard:before{content:"";background:var(--jl-accent);height:3px;position:absolute;top:0;left:0;right:0}.addcard:hover{border-color:color-mix(in oklab, var(--jl-accent) 60%, transparent);box-shadow:0 16px 34px -14px color-mix(in oklab, var(--jl-accent) 65%, transparent);transform:translateY(-3px)}.addcard .track-badge{border-radius:.8rem;width:2.6rem;height:2.6rem}.addcard-title{font-family:var(--font-display);letter-spacing:-.01em;font-size:1.25rem;font-weight:700}.addcard-text{color:var(--jl-muted);font-size:.85rem;line-height:1.4}.dropzone{border:1px dashed var(--jl-line-strong);border-radius:.6rem;transition:border-color .12s,background-color .12s}.dropzone[data-over=true]{border-color:var(--jl-accent);background:color-mix(in oklab, var(--jl-accent) 10%, transparent);color:var(--jl-text)}.recbtn{background:var(--jl-mic);color:#fff;cursor:pointer;height:2.25rem;box-shadow:0 6px 16px -6px color-mix(in oklab, var(--jl-mic) 70%, transparent);border-radius:999px;align-items:center;gap:.6rem;padding:0 1rem 0 .8rem;font-weight:700;transition:transform .12s;display:inline-flex}.recbtn:hover{transform:scale(1.03)}.recbtn[data-recording=true]{background:#e62e2e}.recbtn[data-recording=true] .rec-dot{animation:1s ease-in-out infinite recblink}.rec-dot{background:currentColor;border-radius:999px;width:.6rem;height:.6rem}@keyframes recblink{50%{opacity:.2}}.waveform--reversed ::part(canvases){transform:scaleX(-1)}.scenes{background:var(--jl-panel);border-bottom:1px solid var(--jl-line);flex-shrink:0;align-items:center;gap:.5rem;min-height:2.75rem;padding:.3rem .9rem;display:flex}.scenes .eyebrow{margin-right:.35rem}.scenes-list{flex-wrap:wrap;align-items:center;gap:.35rem;min-width:0;display:flex}.ctab{border:1px solid var(--jl-line);background:var(--jl-raised);height:2rem;color:var(--jl-muted);cursor:pointer;border-radius:.55rem;align-items:center;gap:.5rem;padding:0 .75rem;font-size:.82rem;transition:background-color .12s,color .12s,border-color .12s,box-shadow .12s;display:inline-flex}.ctab:hover{color:var(--jl-text);border-color:var(--jl-line-strong)}.ctab[data-active=true]{color:var(--jl-text);border-color:color-mix(in oklab, var(--jl-brand) 65%, transparent);background:color-mix(in oklab, var(--jl-brand) 14%, var(--jl-raised));box-shadow:0 0 0 3px color-mix(in oklab, var(--jl-brand) 14%, transparent)}.ctab:focus-visible{outline:2px solid var(--jl-brand);outline-offset:2px}.ctab-name{font-family:var(--font-display);font-weight:700}.ctab-input{background:var(--jl-cell);width:9rem;height:1.4rem;color:var(--jl-text);font:inherit;outline:2px solid var(--jl-brand);border-radius:.3rem;padding:0 .3rem;font-weight:600}.ctab-dots{align-items:center;gap:2px;display:inline-flex}.ctab-dot{border-radius:999px;width:.45rem;height:.45rem}.ctab-count{font-family:var(--font-mono);color:var(--jl-muted);flex-shrink:0;font-size:.7rem}.dock{flex:0 0 var(--jl-dock-w);background:var(--jl-panel);z-index:8;flex-direction:column;min-height:0;display:flex;position:relative}.dock--left{--jl-dock-w:25rem;border-right:1px solid var(--jl-line);box-shadow:12px 0 30px -24px #00000080}.dock--right{--jl-dock-w:23rem;border-left:1px solid var(--jl-line);box-shadow:-12px 0 30px -24px #00000080}.dock-bar{border-bottom:1px solid var(--jl-line);height:2.75rem;color:var(--jl-muted);flex-shrink:0;align-items:center;gap:.5rem;padding:0 .5rem 0 .9rem;display:flex}.dock-title{font-family:var(--font-display);color:var(--jl-text);font-weight:700}.dock-note{white-space:nowrap;text-overflow:ellipsis;font-size:.72rem;overflow:hidden}.dock-body{flex-direction:column;flex:auto;gap:.5rem;min-height:0;padding:.9rem;display:flex;overflow:auto}@media (width<=71.9rem){.dock{width:min(var(--jl-dock-w), 100%);position:absolute;top:0;bottom:0}.dock--left{left:0;box-shadow:20px 0 50px -20px #0000008c}.dock--right{right:0;box-shadow:-20px 0 50px -20px #0000008c}}.detail-scope{background:color-mix(in oklab, var(--jl-accent) 10%, var(--jl-raised));height:1.9rem;box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--jl-accent) 40%, var(--jl-line));color:var(--jl-text);white-space:nowrap;border-radius:.55rem;align-items:center;gap:.45rem;min-width:0;padding:0 .75rem 0 .25rem;font-size:.8rem;font-weight:700;display:inline-flex}.detail-scope[data-empty=true]{background:var(--jl-bg);box-shadow:inset 0 0 0 1px var(--jl-line);color:var(--jl-muted)}.detail-scope-name{font-family:var(--font-display);text-overflow:ellipsis;overflow:hidden}.detail-tabs{border-bottom:1px solid var(--jl-line);flex-shrink:0;padding:0 .5rem;display:flex}.detail-tab{height:2.4rem;color:var(--jl-muted);white-space:nowrap;cursor:pointer;flex:1 1 0;justify-content:center;align-items:center;gap:.4rem;padding:0 .5rem;font-size:.8rem;font-weight:600;transition:color .12s,box-shadow .12s;display:inline-flex;box-shadow:inset 0 -2px #0000}.detail-tab:hover{color:var(--jl-text)}.detail-tab[data-active=true]{color:var(--jl-accent);box-shadow:inset 0 -2px 0 var(--jl-accent)}.detail-note{color:var(--jl-muted);font-size:.76rem;line-height:1.4}.detail-empty{text-align:center;color:var(--jl-muted);flex-direction:column;align-items:center;gap:.6rem;padding:2rem 1rem;font-size:.85rem;display:flex}.mixer-flow{color:var(--jl-line-strong);justify-content:center;display:flex}.strip{background:linear-gradient(180deg, color-mix(in oklab, var(--jl-accent) 12%, transparent), transparent 6rem), var(--jl-raised);box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--jl-accent) 35%, var(--jl-line));border-radius:.9rem;flex-direction:column;gap:.75rem;padding:.9rem 1rem 1rem;display:flex}.strip-head{align-items:center;gap:.6rem;display:flex}.strip-title{flex-direction:column;gap:.1rem;min-width:0;display:flex}.strip-name{font-family:var(--font-display);letter-spacing:-.01em;white-space:nowrap;text-overflow:ellipsis;font-size:1.05rem;font-weight:700;overflow:hidden}.strip-note{color:var(--jl-muted);font-size:.76rem;line-height:1.4}.strip-level{background:var(--jl-bg);box-shadow:inset 0 0 0 1px var(--jl-line);border-radius:.7rem;justify-content:center;gap:1.5rem;padding:.6rem .75rem;display:flex}.strip-rack{flex-direction:column;gap:.5rem;display:flex}.settings{flex-direction:column;align-items:stretch;gap:1rem;display:flex}.settings .setting-row{flex-wrap:wrap}.setting-row--tall{gap:1.25rem;padding:.6rem .75rem}.setting-canvas{background:var(--jl-bg);box-shadow:inset 0 0 0 1px var(--jl-line);border-radius:.5rem}.rack{flex-direction:column;gap:.75rem;display:flex}.chain{flex-wrap:wrap;align-items:center;gap:.35rem;display:flex}.chain-end{color:var(--jl-muted);align-items:center;gap:.25rem;margin:0 .25rem;font-size:.72rem;display:inline-flex}.chain-arrow{width:.85rem;height:.85rem;color:var(--jl-line-strong);margin:0 -.2rem}.rack--compact .chain{gap:.25rem}.rack--compact .chain-end{margin:0 .1rem;font-size:.66rem}.rack--compact .chain-arrow{display:none}.rack--compact .chip{gap:.3rem;height:1.6rem;padding:0 .5rem;font-size:.74rem}.rack--compact .device-knobs{gap:.6rem 1rem;padding:.6rem .75rem}.device{background:var(--jl-raised);box-shadow:inset 0 0 0 1px var(--jl-line);border-radius:.7rem;overflow:hidden}.device-head{border-bottom:1px solid var(--jl-line);align-items:center;gap:.5rem;height:2.4rem;padding:0 .75rem;display:flex}.device-name{font-family:var(--font-display);font-weight:700}.device-pos{font-family:var(--font-mono);color:var(--jl-muted);font-size:.7rem}.device-knobs{flex-wrap:wrap;gap:.75rem 1.75rem;padding:.75rem 1rem;display:flex}.knob{-webkit-user-select:none;user-select:none;flex-direction:column;align-items:center;gap:.25rem;display:flex}.knob-dial{cursor:ns-resize;touch-action:none;border-radius:999px;outline:none;position:relative}.knob-dial:focus-visible{box-shadow:0 0 0 2px var(--jl-bg), 0 0 0 4px var(--jl-accent)}.knob-track{fill:none;stroke:var(--jl-cell-hover);stroke-linecap:round}.knob-value{fill:none;stroke:var(--jl-accent);stroke-linecap:round;filter:drop-shadow(0 0 4px color-mix(in oklab, var(--jl-accent) 60%, transparent));transition:stroke-dasharray 50ms linear}.knob-pointer{fill:var(--jl-text)}.knob-readout{font-family:var(--font-mono);color:var(--jl-text);pointer-events:none;justify-content:center;align-items:center;font-size:.7rem;font-weight:700;transition:transform .12s,color .12s;display:flex;position:absolute;inset:0}.knob--dragging .knob-readout,.knob-dial:hover .knob-readout{color:var(--jl-accent)}.knob--dragging .knob-readout{transform:scale(1.15)}.knob-label{color:var(--jl-muted);white-space:nowrap;font-size:.72rem}:root{--jl-lane-head:13rem;--jl-lane-h:4.6rem}.toolbar{background:var(--jl-panel);border-bottom:1px solid var(--jl-line);flex-wrap:wrap;flex-shrink:0;align-items:center;gap:.5rem;min-height:2.75rem;padding:.3rem .9rem;display:flex}.toolbar-title{align-items:baseline;gap:.75rem;min-width:0;display:flex}.toolbar-title h2{font-family:var(--font-display);letter-spacing:-.01em;font-size:1.1rem;font-weight:700}.toolbar-meta{color:var(--jl-muted);white-space:nowrap;font-size:.78rem}.toolbar-meta b{font-family:var(--font-mono);color:var(--jl-text);font-weight:700}.toolbar-meta i{color:var(--jl-line-strong);margin:0 .15rem;font-style:normal}.song-hint{background:var(--jl-overlay);border:1px dashed color-mix(in oklab, var(--jl-brand) 60%, transparent);border-radius:999px;padding:.35rem .8rem;font-size:.8rem;font-weight:600;animation:2.4s ease-in-out infinite hintfloat}.palette{border-bottom:1px solid var(--jl-line);flex-wrap:wrap;flex-shrink:0;align-items:center;gap:.5rem;min-height:2.75rem;padding:.3rem .9rem;display:flex}.palette .eyebrow{margin-right:.35rem}.palette-item{border:1px solid color-mix(in oklab, hsl(var(--jl-clip-hue) 80% 60%) 45%, var(--jl-line));background:var(--jl-panel);height:2rem;color:var(--jl-text);cursor:grab;touch-action:none;border-radius:.55rem;align-items:center;gap:.5rem;padding:0 .75rem 0 .6rem;font-size:.82rem;transition:box-shadow .12s,transform .12s;display:inline-flex}.palette-item:hover{box-shadow:0 0 0 3px color-mix(in oklab, hsl(var(--jl-clip-hue) 80% 60%) 20%, transparent)}.palette-item:active{cursor:grabbing;transform:scale(.98)}.palette-item[data-empty=true]{opacity:.5;cursor:not-allowed}.palette-item:focus-visible{outline:2px solid var(--jl-brand);outline-offset:2px}.palette-name{font-family:var(--font-display);font-weight:700}.palette-swatch{background:linear-gradient(135deg, hsl(var(--jl-clip-hue) 85% 66%), hsl(calc(var(--jl-clip-hue) + 25) 85% 56%));border-radius:.25rem;width:.75rem;height:.75rem}.palette-hint{color:var(--jl-muted);font-size:.74rem}.arranger{background:var(--jl-bg);flex:auto;min-height:0;position:relative;overflow:auto}.arranger--dragging,.arranger--dragging *{cursor:grabbing!important}.arranger--cut .clip{cursor:crosshair}.arranger--paint .arr-lane{cursor:cell}.arr-inner{flex-direction:column;width:max-content;min-width:100%;min-height:100%;padding-bottom:.6rem;display:flex;position:relative}.arr-row{align-items:stretch;display:flex}.arr-row--ruler{z-index:5;background:var(--jl-panel);border-bottom:1px solid var(--jl-line);position:sticky;top:0}.arr-corner,.arr-head{z-index:4;flex:0 0 var(--jl-lane-head);width:var(--jl-lane-head);background:var(--jl-panel);border-right:1px solid var(--jl-line);min-width:0;position:sticky;left:0;overflow:hidden}.arr-corner{align-items:flex-end;padding:0 .9rem .4rem;display:flex}.arr-row--ruler .arr-corner{z-index:6}.arr-ruler{width:calc(var(--jl-song-steps) * var(--jl-song-step));cursor:pointer;height:2rem;display:flex}.arr-bar{flex:0 0 calc(16 * var(--jl-song-step));border-left:1px solid var(--jl-line-strong);font-family:var(--font-mono);color:var(--jl-line-strong);align-items:flex-end;padding:0 0 .3rem .4rem;font-size:.68rem;font-weight:700;display:flex}.arr-bar[data-inside=true]{color:var(--jl-muted)}.arr-ruler:hover .arr-bar{color:var(--jl-text)}.arr-head{border-bottom:1px solid var(--jl-line);flex-direction:column;justify-content:center;gap:.25rem;padding:.4rem .4rem .4rem .9rem;transition:opacity .2s;display:flex}.arr-head-title{align-items:center;gap:.4rem;min-width:0;display:flex}.arr-head-name{font-family:var(--font-display);white-space:nowrap;text-overflow:ellipsis;font-weight:700;overflow:hidden}.arr-head-tools{align-items:center;display:flex}.arr-row--muted .arr-head,.arr-row--muted .clip{opacity:.5}.arr-lane{flex:0 0 calc(var(--jl-song-steps) * var(--jl-song-step));height:var(--jl-lane-h);border-bottom:1px solid var(--jl-line);background:repeating-linear-gradient(90deg, var(--jl-line-strong) 0 1px, transparent 1px calc(16 * var(--jl-song-step))), repeating-linear-gradient(90deg, var(--jl-line) 0 1px, transparent 1px calc(4 * var(--jl-song-step)));touch-action:none;position:relative}.arr-empty{justify-content:center;width:100cqw;padding:1rem;display:flex;position:sticky;left:0}.clip{--jl-clip:hsl(var(--jl-clip-hue) 85% 62%);--jl-clip-2:hsl(calc(var(--jl-clip-hue) + 25) 85% 54%);background:radial-gradient(120% 90% at 50% 0%, #ffffff40, transparent 60%), linear-gradient(135deg, var(--jl-clip), var(--jl-clip-2));color:#14092b;box-shadow:inset 0 1px 0 #ffffff4d, 0 6px 16px -8px color-mix(in oklab, var(--jl-clip) 80%, transparent);cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none;border-radius:.5rem;flex-direction:column;justify-content:space-between;padding:.35rem .75rem .4rem;transition:box-shadow .12s,opacity .12s;display:flex;position:absolute;top:.4rem;bottom:.4rem;overflow:hidden}.clip:active{cursor:grabbing}.clip:focus-visible{outline:2px solid var(--jl-text);outline-offset:2px}.clip--selected{box-shadow:inset 0 0 0 2px var(--jl-text), inset 0 1px 0 #ffffff4d, 0 8px 20px -8px color-mix(in oklab, var(--jl-clip) 80%, transparent);z-index:2}.clip--lifted{opacity:.35}.clip--ghost{opacity:.75;pointer-events:none;z-index:3;outline-offset:-2px;outline:2px dashed #fffc}.clip--ghost[data-valid=false]{--jl-clip:#ef4444;--jl-clip-2:#b91c1c;color:#fff}.clip-title{font-family:var(--font-display);white-space:nowrap;text-overflow:ellipsis;font-size:.8rem;font-weight:700;line-height:1.1;overflow:hidden}.clip-preview{pointer-events:none;flex-direction:column;gap:2px;width:100%;display:flex;overflow:hidden}.clip-preview .preview{--preview-on:#14092bd9;--preview-off:#14092b24;width:max-content;height:.45rem}.clip .note-handle{opacity:1;background:#14092b40;border-radius:0;width:8px;top:0;bottom:0}.clip .note-handle--start{left:0}.clip .note-handle--end{right:0}.clip .note-handle:hover{background:#14092b80}.clip-cut{background:var(--jl-text);width:2px;box-shadow:0 0 6px var(--jl-text);pointer-events:none;margin-left:-1px;position:absolute;top:0;bottom:0}.clip-tools{background:var(--jl-panel);border-radius:.45rem;gap:1px;padding:1px;display:flex;position:absolute;top:.2rem;right:.3rem;box-shadow:0 2px 8px #00000040}.clip-tools .iconbtn{color:var(--jl-text)}.arr-playhead{background:linear-gradient(180deg, var(--jl-brand), var(--jl-brand-2));width:2px;box-shadow:0 0 10px color-mix(in oklab, var(--jl-brand-2) 70%, transparent);pointer-events:none;z-index:3;margin-left:-1px;position:absolute;top:0;bottom:0}.arr-row--section{position:relative}.arr-corner--section{border-bottom:1px solid var(--jl-line);align-items:center;gap:.5rem;height:1.9rem;padding:0 .9rem;display:flex}.arr-section-line{flex:0 0 calc(var(--jl-song-steps) * var(--jl-song-step));border-bottom:1px solid var(--jl-line);background:color-mix(in oklab, var(--jl-panel) 60%, transparent)}.arr-head--auto{gap:.35rem;padding-right:.5rem}.arr-head--auto .arr-head-title{gap:.35rem}.arr-head--auto .select{flex:1 1 0;width:0;min-width:0}.arr-row--auto{--jl-lane-color:var(--jl-auto)}.arr-lane--auto{cursor:crosshair;background:linear-gradient(180deg, color-mix(in oklab, var(--jl-auto) 6%, transparent), transparent), repeating-linear-gradient(90deg, var(--jl-line-strong) 0 1px, transparent 1px calc(16 * var(--jl-song-step))), repeating-linear-gradient(90deg, var(--jl-line) 0 1px, transparent 1px calc(4 * var(--jl-song-step)));height:4rem;position:relative}.auto-body[data-dragging=true]{cursor:grabbing}.auto-body[data-disabled=true]{cursor:not-allowed}.auto-curve{pointer-events:none;width:100%;height:100%;position:absolute;inset:0;overflow:visible}.auto-area{fill:var(--jl-auto);opacity:.16}.auto-line{fill:none;stroke:var(--jl-auto);stroke-width:2px;stroke-linejoin:round;filter:drop-shadow(0 0 4px color-mix(in oklab, var(--jl-auto) 60%, transparent))}.auto-point{z-index:2;background:var(--jl-panel);width:.8rem;height:.8rem;box-shadow:inset 0 0 0 2.5px var(--jl-auto), 0 0 8px color-mix(in oklab, var(--jl-auto) 50%, transparent);cursor:grab;touch-action:none;border-radius:999px;margin:-.4rem 0 0 -.4rem;transition:transform .1s;position:absolute}.auto-point:hover,.auto-point[data-active=true]{background:var(--jl-auto);transform:scale(1.3)}.auto-point[data-active=true]{cursor:grabbing}.auto-tag{background:var(--jl-text);color:var(--jl-bg);font-family:var(--font-mono);white-space:nowrap;pointer-events:none;border-radius:.35rem;padding:.15rem .45rem;font-size:.66rem;font-weight:700;position:absolute;bottom:calc(100% + .4rem);left:50%;transform:translate(-50%)}.auto-hint{color:var(--jl-muted);white-space:nowrap;pointer-events:none;font-size:.74rem;position:absolute;top:50%;left:1rem;transform:translateY(-50%)}.preview{--preview-on:var(--jl-accent);--preview-off:var(--jl-line);align-items:end;gap:1.5px;width:100%;height:.9rem;display:grid}.preview-step{background:var(--preview-off);border-radius:1px;height:30%}.preview-step[data-downbeat=true]{height:45%}.preview-step[data-on=true]{height:calc(45% + 55% * var(--level));background:var(--preview-on)}.welcome{z-index:50;background:radial-gradient(60rem 40rem at 50% 120%, color-mix(in oklab, var(--jl-brand) 22%, transparent), transparent 70%), color-mix(in oklab, var(--jl-bg) 92%, transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);justify-content:center;align-items:center;padding:1rem;display:flex;position:fixed;inset:0}.welcome-card{border:1px solid var(--jl-line);background:var(--jl-panel);width:100%;max-width:30rem;box-shadow:0 30px 80px -30px #0009, 0 0 0 1px color-mix(in oklab, var(--jl-brand) 25%, transparent);border-radius:1.25rem;flex-direction:column;align-items:flex-start;gap:1.25rem;padding:2.25rem;display:flex;position:relative;overflow:hidden}.welcome-card:before{content:"";background:radial-gradient(closest-side, color-mix(in oklab, var(--jl-brand) 28%, transparent), transparent);pointer-events:none;height:60%;position:absolute;inset:-40% -20% auto}.welcome-card>*{position:relative}.welcome-logo{height:2.25rem}.welcome-title{font-family:var(--font-display);letter-spacing:-.03em;font-size:2.6rem;font-weight:800;line-height:.98}.welcome-text{color:var(--jl-muted);line-height:1.55}.welcome-juice{gap:.5rem;display:flex}.welcome-modes{grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;width:100%;display:grid}.modecard{border:1px solid var(--jl-line);background:var(--jl-raised);text-align:left;cursor:pointer;border-radius:.9rem;flex-direction:column;align-items:flex-start;gap:.45rem;padding:1rem 1rem .9rem;transition:transform .15s,border-color .15s,box-shadow .15s;display:flex;position:relative}.modecard:hover{border-color:color-mix(in oklab, var(--jl-brand) 60%, transparent);box-shadow:0 16px 34px -14px color-mix(in oklab, var(--jl-brand) 65%, transparent);transform:translateY(-3px)}.modecard:focus-visible{outline:2px solid var(--jl-brand);outline-offset:2px}.modecard[data-current=true]{border-color:color-mix(in oklab, var(--jl-brand) 60%, transparent)}.modecard-icon{background:color-mix(in oklab, var(--jl-brand) 18%, transparent);width:2.2rem;height:2.2rem;color:var(--jl-brand);border-radius:.65rem;justify-content:center;align-items:center;display:inline-flex}.modecard[data-mode=pro] .modecard-icon{background:var(--jl-brand-gradient);color:var(--jl-brand-ink)}.modecard-title{font-family:var(--font-display);letter-spacing:-.01em;font-size:1.15rem;font-weight:700}.modecard-text{color:var(--jl-muted);font-size:.8rem;line-height:1.4}.modecard-go{color:var(--jl-brand);align-items:center;gap:.2rem;margin-top:.3rem;font-size:.78rem;font-weight:700;display:inline-flex}.welcome-foot{color:var(--jl-muted);font-size:.74rem}@media (width<=30rem){.welcome-modes{grid-template-columns:1fr}}.welcome-juice span{color:var(--jl-muted);align-items:center;gap:.35rem;font-size:.76rem;font-weight:600;display:inline-flex}.welcome-juice i{background:var(--jl-accent);width:.55rem;height:.55rem;box-shadow:0 0 8px var(--jl-accent);border-radius:999px}@media (width<=47.9rem){.app{height:100dvh}.transportbar{padding:.45rem .6rem;padding-top:max(.45rem, env(safe-area-inset-top));grid-template-columns:minmax(0,1fr) auto;gap:.4rem .5rem}.transportbar-left{gap:.5rem}.logo{height:1.6rem}.filebar{padding-left:.4rem}.modeswitch-item{padding:0 .6rem}.modeswitch-item>span{display:none}.transport{gap:.35rem}.readout{padding:0 .55rem 0 .5rem}.readout-unit,.tempo .vrule,.tempo .vrule+.iconbtn{display:none}.history{margin-left:0}.bottombar{padding:.3rem .5rem;padding-bottom:max(.3rem, env(safe-area-inset-bottom));background:var(--jl-panel);border-top:1px solid var(--jl-line);z-index:20;flex-shrink:0;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;gap:.25rem;display:grid;position:relative}.bottombar-item{letter-spacing:.02em;min-width:0;height:3rem;color:var(--jl-muted);white-space:nowrap;cursor:pointer;border-radius:.65rem;flex-direction:column;justify-content:center;align-items:center;gap:.15rem;font-size:.66rem;font-weight:700;text-decoration:none;transition:background-color .15s,color .15s;display:inline-flex}.bottombar-item[data-active=true]{color:var(--jl-brand);background:color-mix(in oklab, var(--jl-brand) 12%, transparent)}.bottombar-item:focus-visible{outline:2px solid var(--jl-brand);outline-offset:-2px}.dock{width:100%;box-shadow:none;border:0}.dock-body{padding:.75rem}.dock-note{display:none}.scenes{gap:.35rem;padding:.3rem .6rem}.scenes>.eyebrow,.scenes .chip>span{display:none}.scenes-list{scrollbar-width:none;flex-wrap:nowrap;flex:auto;margin:-2px;padding:2px;overflow-x:auto}.scenes-list::-webkit-scrollbar{display:none}.scenes-list .iconbtn>span{display:none}.scenes .chip{padding:0 .5rem}.timeline{--jl-lane:max(calc(100cqw - 2 * var(--jl-row-pad)), calc(8 * (4 * 2rem + 3 * var(--jl-cell-gap)) + 7 * var(--jl-beat-gap)))}.track-head,.autolane-head,.automation-foot-head{left:var(--jl-row-pad);width:calc(100cqw - 2 * var(--jl-row-pad));position:sticky}.track-head{gap:.3rem .5rem;padding:.35rem .4rem .35rem .7rem}.track-head>*{flex:100%}.track-actions{opacity:1}.tools{grid-template-columns:none;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column}.tools:has(>:nth-child(4)){grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:row}.addrow{flex-wrap:wrap;gap:.4rem;padding:.75rem .25rem 1.25rem}.addrow .eyebrow{flex-basis:100%;margin:0}.hero{gap:1.5rem;padding:1.5rem 1rem 2.5rem}.hero-title{font-size:2.1rem}:root{--jl-lane-head:7.5rem}.toolbar{gap:.4rem;padding:.4rem .6rem}.toolbar-meta{white-space:normal}.toolbar .viewswitch-item>span{display:none}.toolbar .viewswitch-item{padding:0 .6rem}.palette{padding:.4rem .6rem}.palette-hint,.song-hint{display:none}.arr-head,.arr-corner{padding-left:.6rem}}@media (width>=48rem){.bottombar{display:none}}@media (hover:none){.track-actions,.note-handle{opacity:1}.note-handle{width:6px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation:none!important}}