/* Uses the original piano.bnts.pl design tokens and controls. */
.stage{padding:16px 18px 24px}.brand{margin-bottom:24px}.device{max-width:1440px}.session-label{font-size:10px;letter-spacing:.12em;color:#7b8ca4;margin-left:10px}#saveState{margin-left:auto;font-size:10px;color:#7b8ca4}.document-tab #rename{padding:10px 14px;height:37px;box-shadow:none;background:transparent;font-size:11px;color:#345a93}.transport{height:auto;min-height:32px;flex-wrap:wrap;margin:0 0 12px;gap:8px}.transport .transport-buttons{order:0}.transport #position{order:0;min-width:100px;font-size:12px}.transport label{display:flex;align-items:center;gap:6px;font-size:10px}.transport input[type=range]{width:95px;accent-color:#075cff;box-shadow:none}.transport select{height:28px}.chip{height:30px}.accent{color:var(--blue);background:#e1eafa}.separator{height:20px;width:1px;background:#bcc7d6;margin:0 3px}.edit-toolbar{margin-bottom:10px}.audio-timeline{height:clamp(360px,57vh,690px);overflow:auto;position:relative;border:1px solid #b9c5d5;border-radius:8px;background:#eaf0f7;overscroll-behavior:contain;scrollbar-width:thin}#canvas{position:relative;min-height:100%;--step:48px}.audio-ruler{position:sticky;top:0;z-index:8;height:30px;background:#dfe6ef;border-bottom:1px solid #a3b3c9;cursor:crosshair;touch-action:none}.audio-ruler .tick{position:absolute;top:0;height:30px;border-left:1px solid #acbdd3;padding:6px 4px;font-size:9px;pointer-events:none;white-space:nowrap}.ruler-title{position:sticky;left:0;display:block;width:178px;height:30px;background:#dfe6ef;border-right:1px solid #a3b3c9;font-size:9px;letter-spacing:.1em;padding:8px 12px;z-index:9}.audio-track{height:112px;position:relative;border-bottom:1px solid #b4c3d7;background-image:repeating-linear-gradient(90deg,transparent 0,transparent calc(var(--step) - 1px),#b0bfd24a calc(var(--step) - 1px),#b0bfd24a var(--step));background-position:178px 0}.audio-track:nth-child(even){background-color:#e2eaf4}.audio-track.active{background-color:#dbe7f7}.track-header{position:sticky;left:0;width:178px;height:112px;padding:9px 10px;background:#e4e8ee;border-right:1px solid #9fadc0;z-index:6;display:flex;flex-direction:column;gap:7px;box-shadow:3px 0 5px #9bacc322}.track-name{font-size:10px;font-weight:650;box-shadow:none;text-align:left;background:transparent;max-width:135px;overflow:hidden;text-overflow:ellipsis;padding:0}.track-top{display:flex;justify-content:space-between;gap:5px}.track-remove{box-shadow:none;background:transparent;width:19px;font-size:16px;padding:0;color:#7e8ca1}.track-controls{display:flex;align-items:center;gap:6px}.track-controls button{width:25px;height:23px;font-size:9px}.track-controls output{margin-left:auto;font-size:9px;font-variant-numeric:tabular-nums}.track-header label{font-size:9px;display:flex;gap:6px;align-items:center}.track-header input{width:105px;accent-color:#075cff}.track-header .pan{width:88px}.audio-clip{position:absolute;top:8px;height:94px;min-width:3px;border:1px solid #0052d4;border-radius:4px;background:linear-gradient(135deg,#3889ff,#0759e9);color:#fff;box-shadow:none;cursor:grab;overflow:hidden;user-select:none;touch-action:none;padding:0}.audio-track:nth-child(2n) .audio-clip{background:linear-gradient(135deg,#fc6978,#dc2147);border-color:#cc1940}.audio-clip:hover{color:white}.audio-clip.selected{outline:2px solid #ec9624;outline-offset:0;z-index:4}.audio-clip .clip-label{position:absolute;left:8px;right:8px;top:5px;text-align:left;font-size:10px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none}.audio-clip canvas{position:absolute;left:0;top:25px;width:100%;height:65px;pointer-events:none}.audio-clip .edge{width:9px;z-index:2}.audio-clip .edge:after{top:30px;bottom:24px;left:4px}.audio-clip .fade-mark{position:absolute;top:22px;height:68px;pointer-events:none;background:#fff2}.audio-clip .fade-in{left:0;clip-path:polygon(0 0,100% 100%,0 100%)}.audio-clip .fade-out{right:0;clip-path:polygon(0 100%,100% 0,100% 100%)}#playhead{left:178px;z-index:5;top:0}.head-grip{position:absolute;top:0;left:-5px;width:12px;height:28px;pointer-events:auto;cursor:ew-resize;touch-action:none}.head-grip:before{content:'';position:absolute;top:0;left:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:10px solid #ed334b}#empty{top:100px;left:178px;right:0;text-align:center;display:flex;flex-direction:column;gap:14px;align-items:center;background:none;pointer-events:auto}#empty strong{font-size:17px;font-weight:500;color:#667c9b}#empty span{font-size:12px}#empty small{font-size:10px}#inspector{padding:14px 0 8px;border-bottom:1px solid #bec9d8}.inspector-heading{display:flex;gap:12px;font-size:11px;margin-bottom:10px}.inspector-heading span{color:#7b8ca4}.inspector-fields{display:flex;flex-wrap:wrap;gap:12px}.inspector-fields label{display:grid;gap:5px;font-size:9px;color:#667c9b}.inspector-fields input{width:120px;padding:6px 8px;box-shadow:var(--press);font-size:11px}.footline{align-items:center;flex-wrap:wrap;margin-top:12px}.footline details{position:relative;margin-left:auto}.help-panel{position:absolute;right:0;bottom:24px;z-index:20;width:min(500px,85vw);background:#e9edf3;border:1px solid #bdc8d8;box-shadow:var(--raise);border-radius:8px;padding:12px;color:#485467;font-size:11px;line-height:1.7}#status{margin-top:12px;font-size:11px;min-height:20px}#status.error{color:#b62738}.dialog-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:20px;flex-wrap:wrap}.export-options{display:flex;gap:20px;margin-top:18px}.export-options select{padding:8px;box-shadow:var(--press)}dialog .check{display:flex;align-items:center;gap:8px;margin-top:20px;font-size:11px}dialog .check input{width:auto}#exportInfo{font-size:11px;color:#667c9b}#progress{display:flex;align-items:center;gap:12px;font-size:10px}progress{accent-color:#075cff;width:200px}.busy .file-toolbar button,.busy .edit-toolbar button{pointer-events:none;opacity:.45}.drop-active .audio-timeline{outline:2px dashed #075cff;outline-offset:4px}
@media(max-width:700px){.stage{padding:10px 8px}.brand{margin-bottom:18px}.session-label{display:none}.transport input[type=range]{width:70px}.transport-spacer{display:none}.chip{height:34px;font-size:10px}.transport #position{margin-right:auto}.track-header,.ruler-title{width:140px}.track-header{padding:9px 7px}.track-header input{width:85px}.track-header .pan{width:65px}.audio-track{background-position:140px 0}#empty{left:140px}.footline>span:nth-child(2){display:none}.inspector-fields input{width:100px}.audio-timeline{height:55dvh;min-height:330px}.track-name{max-width:110px}}
/* Keep the audio toolbars as wrapping controls on mobile. */
.transport{display:flex}.transport>button{flex:0 0 auto}.transport>#position{grid-column:auto;grid-row:auto}.file-toolbar .transport-spacer{display:block}.footline>span{max-width:100%}
@media(max-width:700px){.file-toolbar .transport-spacer{display:none}.transport{gap:8px}.file-toolbar .separator,.edit-toolbar .separator{display:none}.transport>#position{margin-left:0}.document-tabs-row{max-width:100%}}