@property --track-height{syntax:'<length>';inherits:false;initial-value:84px}
@property --lane-width{syntax:'<length>';inherits:false;initial-value:1000px}
/* Visual finish: quiet chrome, luminous audio, immediate editing feedback. */
[hidden]{display:none!important}
#grid-division{font:inherit;font-size:10px;font-weight:600;font-variant-numeric:tabular-nums;width:60px;min-height:28px;border:1px solid #ffffff12;border-radius:5px;background:#222126;color:#d3d2d8;padding:4px 5px;cursor:pointer}#grid-division:hover{border-color:#a9a8b160}#grid-division:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}#grid-division option{background:#222126;color:#e9e8eb}
@font-face{font-family:Manrope;src:url('./manrope.ttf') format('truetype');font-style:normal;font-weight:200 800;font-display:swap}
:root{font-family:Manrope,"Segoe UI",sans-serif;--bg:#121116;--surface:#1d1d21;--muted:#85828f;--pink:#ef6a92;--cyan:#95d4d9;--sidebar:228px}
body{background:radial-gradient(ellipse at 15% 0%,#33323a 0,transparent 50%),radial-gradient(ellipse at 95% 100%,#253333 0,transparent 50%),#201f25;padding:20px}
.editor{border:1px solid #ffffff13;border-radius:14px;box-shadow:0 24px 90px #0007,0 1px 0 #ffffff05 inset;background:radial-gradient(ellipse at 60% 0%,#22212622,transparent 65%),var(--bg)}
.topbar{padding:18px 24px;min-height:96px;gap:26px;background:linear-gradient(125deg,#201f24aa,#18171b 38%,#19181c)}
.brand{position:relative;border-right:1px solid #ffffff10;padding-right:27px;gap:6px}.brand b{font-family:Manrope,sans-serif;font-weight:800;letter-spacing:-2.2px;font-size:28px}.brand small{font-size:6px;letter-spacing:2px;color:#9e92a8}.brand b span{color:#dd9bc3;text-shadow:0 0 16px #e99acc70}
.project-heading{gap:4px}.project-overline{font-size:8px;letter-spacing:2px;font-weight:600;color:#8d8a98}.project-overline span{color:#575660;margin:0 7px}.project-heading input{font-size:19px;font-weight:650;letter-spacing:-.6px}.project-heading>span{font-size:9px;color:#7a7787}.file-actions{gap:7px}.file-actions button{min-height:36px;font-size:11px;border-radius:7px;padding:8px 13px}.file-actions button.primary{background:linear-gradient(150deg,#ef6a92,#d03565);border-color:#dbdadf5a;box-shadow:0 2px 8px #0004,0 1px 0 #ffefef40 inset;color:#fff;font-weight:750}
button{transition:background-color .16s,border-color .16s,color .16s,box-shadow .16s,transform .12s}button:active:not(:disabled){transform:translateY(1px) scale(.97)}button.quiet{background:#ffffff03;border-color:#ffffff0c}button.quiet:hover{background:#ffffff08;border-color:#ffffff24}
.toolbar{min-height:62px;background:linear-gradient(#1e1d22,#1a191e);padding:12px 22px;gap:15px;border-top:1px solid #ffffff02;box-shadow:0 1px 0 #0004;z-index:8}.transport .play{width:37px;height:37px;min-height:37px;background:linear-gradient(150deg,#ef6a92,#b92756);box-shadow:0 3px 10px #0004,0 0 0 4px #d035650a;border:1px solid #dcdbe052}.transport .play:hover{box-shadow:0 3px 14px #0004,0 0 0 4px #d0356520}.transport output{font-size:17px;letter-spacing:.5px;color:#e0e0e3}.transport #stop{color:#868492}.tool-group{border-color:#ffffff09;padding-left:15px;gap:5px}.tool-group:nth-of-type(2){padding:3px;background:#10101240;border:1px solid #ffffff08;border-radius:8px}.tool-group:nth-of-type(2) button{width:33px;height:31px;min-height:31px}.tool-group button.active{background:linear-gradient(#5a586380,#3f3e4580);border-color:#9e9ca74a;box-shadow:0 1px 0 #ef6a9213 inset;color:#d8d7dc}.tool-group button:not(.active){color:#a19faa}.edits button#normalize{font-size:11px;font-weight:550;gap:8px}.rhythm{background:#16161940;border:1px solid #ffffff08;border-radius:7px;padding:3px 9px 3px 3px;gap:4px}.rhythm #grid{font-size:10px;padding:6px 9px;min-height:30px}.tempo{margin-left:8px}.tempo input{font-size:12px;letter-spacing:.5px}.tempo span{font-size:8px}.toolbar-spacer{min-width:0}
.ruler-row{background:#1a191d;height:36px;box-shadow:0 2px 4px #0002}.ruler-label{background:#1f1e24;padding:0 19px;font-size:8px;font-weight:600;letter-spacing:2px;color:#878592}.ruler-label span:last-child{color:#c0bfc6;font-size:10px}.ruler-mark{top:9px;color:#aeadb6;font-size:10px;border-color:#ffffff14}.ruler-mark small{font-size:8px;color:#605e69;margin-left:10px}
.track{border-bottom:1px solid #ffffff06}.track-header{background:linear-gradient(100deg,color-mix(in srgb,var(--track-color) 10%,#1f1e23),#1c1c20);border-left-width:2px;border-right:1px solid #ffffff08;padding:12px 15px 10px 14px;gap:8px;transition:background .2s,box-shadow .2s}.track-header:hover{box-shadow:inset 0 0 30px #ffffff03}.track.selected .track-header{background:linear-gradient(100deg,color-mix(in srgb,var(--track-color) 18%,#1f1e23),#212025);box-shadow:inset 0 1px #ffffff06}.track-top{gap:10px}.track-number{width:26px;min-width:26px;height:28px;border:1px solid color-mix(in srgb,var(--track-color) 20%,transparent);background:color-mix(in srgb,var(--track-color) 8%,transparent);color:var(--track-color);font-size:10px;opacity:1;display:grid;place-items:center;padding:0;border-radius:5px;align-self:center;box-shadow:0 2px 4px #0001}.track-name{color:color-mix(in srgb,var(--track-color) 48%,#f3f2f4);font-size:12px;font-weight:650;letter-spacing:.1px}.track-group{font-size:8px;letter-spacing:.2px;margin-top:2px;color:#a4a2ad}.track-switches{gap:4px}.track-switches button{width:24px;height:24px;min-height:24px;border-color:#ffffff11;background:#ffffff02;color:#8e8b99;border-radius:5px;font-size:9px;font-weight:650;box-shadow:0 1px 0 #ffffff04 inset}.track-switches button:hover{color:#ebebed;border-color:#ffffff30}.track-switches button.on{box-shadow:0 0 12px color-mix(in srgb,var(--track-color) 25%,transparent),0 1px 0 #ffffff40 inset}.track-volume{padding-left:36px;gap:8px}.track-volume input{height:2px;margin:5px 0;background:linear-gradient(to right,color-mix(in srgb,var(--track-color) 80%,transparent) 0 var(--volume),#ffffff12 var(--volume) 100%)}.track-volume input::-webkit-slider-thumb{width:7px;height:7px;border-radius:50%;background:#dedee1;box-shadow:0 0 0 3px #b9b7c014}.track-volume input:hover::-webkit-slider-thumb{box-shadow:0 0 0 5px #b9b7c020}.gain-value{font-family:Manrope,sans-serif;font-size:8px;color:#9d9ba6;min-width:42px}
.lane{background-color:#121215;background-image:linear-gradient(to right,#ffffff0a 1px,transparent 1px),linear-gradient(to right,#ffffff03 1px,transparent 1px)}.clip{top:4px;bottom:4px;border-radius:5px;border-color:color-mix(in srgb,var(--track-color) 18%,transparent);background:linear-gradient(180deg,color-mix(in srgb,var(--track-color) 12%,#161519),color-mix(in srgb,var(--track-color) 4%,#131316));box-shadow:0 2px 4px #0002,inset 0 1px 0 color-mix(in srgb,var(--track-color) 12%,transparent);transition:border-color .18s,filter .18s,opacity .2s,box-shadow .18s}.clip:hover{border-color:color-mix(in srgb,var(--track-color) 60%,transparent);filter:brightness(1.12)}.clip.selected{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--track-color) 25%,transparent),0 0 18px color-mix(in srgb,var(--track-color) 9%,transparent)}.clip-name{top:5px;left:9px;font-size:7px;font-weight:600;letter-spacing:.5px;opacity:.58}.clip.dragging{filter:brightness(1.3);box-shadow:0 8px 22px #0007;opacity:.8}.clip canvas{filter:drop-shadow(0 0 3px color-mix(in srgb,var(--track-color) 20%,transparent))}.track.inaudible .clip{opacity:.17;filter:saturate(.2)}
#playhead{top:36px;background:#e3e2e6ce;box-shadow:0 0 8px #ef6a925c}#playhead i{top:0;background:#dcdbdf;box-shadow:0 0 8px #ef6a9288;border-radius:1px}.is-playing .transport .play{animation:playHalo 2.4s ease-in-out infinite}.is-playing .local-dot{background:#a6d6c1;box-shadow:0 0 7px #a6d6c150}.is-playing #time{color:#dbdade}.is-playing #playhead{background:#f1f1f3}.navigation{min-height:40px;background:#19181c;border-color:#ffffff08;padding:4px 18px}.hint{font-size:9px;color:#7b7988;letter-spacing:.1px}.zoom-controls{gap:3px}.zoom-controls .icon-button{color:#b6b5bd;border-radius:5px}.zoom-controls .icon-button:hover{background:#ffffff08}.zoom-controls>span{font-size:7px;font-weight:700;letter-spacing:1.7px;color:#6c6a78}.zoom-controls button#fit{border:1px solid #ffffff0a;background:#ffffff03;font-size:9px;min-height:25px;padding:4px 9px;margin:0 3px}footer{min-height:32px;background:#131316;border-color:#ffffff06;padding:5px 18px;font-size:9px}.open-saved{font-size:8px;min-height:20px;padding:2px 8px;margin-right:12px;color:#9d9ba7}.local-dot{width:4px;height:4px;background:#849e90}.master{font-size:7px;letter-spacing:1.2px}.meter{height:4px;width:75px;background:repeating-linear-gradient(to right,#ffffff12 0 3px,transparent 3px 5px)}.meter i{background:repeating-linear-gradient(to right,#a5cbb9 0 3px,transparent 3px 5px);transition:width .08s}.master.clipping .meter i{background:repeating-linear-gradient(to right,#ec967f 0 3px,transparent 3px 5px)}.help-button{color:#94929f;border-color:#ffffff10;font-size:9px}
#viewport{scrollbar-color:#6e6c79 #17171a;scrollbar-width:thin}#viewport::-webkit-scrollbar{height:9px;width:9px}#viewport::-webkit-scrollbar-track{background:#17171a}#viewport::-webkit-scrollbar-thumb{background:#5b5965;border:2px solid #17171a;border-radius:9px}#viewport::-webkit-scrollbar-thumb:hover{background:#a6a4af}#viewport::-webkit-scrollbar-corner{background:#17171a}
dialog{background:linear-gradient(145deg,#2c2a32,#201f24 65%);border-color:#ef6a9220;box-shadow:0 30px 100px #0009,0 1px 0 #ffffff0c inset;border-radius:16px;animation:dialogIn .2s ease-out}dialog::backdrop{background:#09080a90;backdrop-filter:blur(7px)}.export-option{border-radius:8px;padding:18px 14px;border-color:#ffffff0b;transition:background .18s,transform .18s,border-color .18s}.export-option:hover{transform:translateX(3px);border-color:#ef6a9243;background:#a9a7b110}.export-option small{font-size:10px;color:#a7a5af}.eyebrow{font-weight:650;color:#a19dab}.fine{color:#918f9b}.dialog-actions .primary{background:linear-gradient(145deg,#ef6a92,#d03565)}
@keyframes playHalo{0%,100%{box-shadow:0 0 0 4px #d035650a,0 0 18px #d0356511}50%{box-shadow:0 0 0 5px #d035651a,0 0 24px #d0356527}}
@keyframes dialogIn{from{opacity:0;transform:translateY(9px) scale(.985)}to{opacity:1;transform:none}}
.role-preview{color:#aeadb6;font-size:9px;white-space:nowrap;text-decoration:none;border-left:1px solid #ffffff10;padding-left:10px;margin-left:5px}.review-summary{display:flex;gap:15px;align-items:center;margin:18px 0}.review-summary>span{font-size:11px;color:#b4b3bb;border:1px solid #ffffff10;border-radius:7px;padding:10px}.review-summary p{margin:0}.review-summary b{font-size:12px;font-weight:600;display:block;color:#e0e0e3}.review-summary small{display:block;font-size:10px;color:#9896a2;margin-top:5px}.wide{width:100%;margin-top:16px}#return-note{width:100%;background:#161519;border:1px solid #ffffff20;border-radius:7px;color:#e6e6e8;font:inherit;line-height:1.7;padding:12px;margin-top:10px;resize:vertical}.frozen-project .clip{cursor:default}.frozen-project .track-volume input{opacity:.6;cursor:default}.frozen-project #project-meta{color:#b2baa9}.frozen-project .project-heading input:disabled{color:#e3e2e6;opacity:1}#project-list .export-option{flex-direction:column;align-items:flex-start;gap:4px}.track-name{font-size:13px}.gain-value{font-size:9px}.toolbar .edits button#normalize{font-size:12px}
@media(min-width:1500px){body{padding:32px}.topbar{padding:22px 28px;min-height:104px}.toolbar{padding-inline:26px}}
@media(max-width:1100px){.toolbar{gap:9px;padding-inline:14px}.tool-group{padding-left:10px}.rhythm{padding:3px 7px 3px 3px}.topbar{gap:22px}.brand{padding-right:22px}.file-actions button{padding:7px 10px}}
@media(max-width:800px){body{padding:10px}:root{--sidebar:185px}.brand{border:0;padding:0}.topbar{padding:16px 18px;min-height:88px;gap:20px}.project-heading input{font-size:16px}.project-overline{font-size:7px;letter-spacing:1.5px}.toolbar{min-height:104px}.track-number{display:none}.track-volume{padding-left:0}.track-header{padding:11px 12px;gap:9px}.track-name{font-size:12px}.file-actions button{font-size:10px}.toolbar-spacer{display:none}.rhythm{margin-left:auto}.edits{margin-left:auto}.open-saved{margin-right:4px}}
@media(max-width:540px){body{padding:0}:root{--sidebar:148px}.editor{border:0;border-radius:0}.topbar{padding:16px 14px 10px;gap:12px;min-height:124px}.brand{width:42px}.brand b{font-size:25px}.project-heading input{font-size:17px}.project-overline{font-size:7px}.project-heading>span{font-size:8px}.file-actions{gap:6px}.file-actions button{height:30px;min-height:30px;font-size:10px;padding:5px 9px}.toolbar{padding:9px 10px;gap:7px;min-height:104px}.transport .play{width:32px;height:32px;min-height:32px}.transport output{font-size:14px;min-width:86px;padding:0 6px}.toolbar .tool-group:nth-of-type(2){padding:2px;gap:2px}.toolbar .tool-group:nth-of-type(2) button{width:28px;min-height:28px;height:28px;padding:5px}.tool-group{padding-left:7px;gap:1px}.toolbar .icon-button{width:29px;height:32px;min-height:32px}.toolbar .edits{order:3;margin:0;padding:0;gap:2px}.edits button#normalize{font-size:10px;gap:5px}.toolbar .rhythm{order:4;margin-left:auto;padding:2px 5px 2px 2px}.rhythm #grid{font-size:9px;min-height:27px;padding:4px 6px}.tempo{gap:2px;margin-left:4px}.tempo input{font-size:10px;width:28px}.tempo span{font-size:6px}.ruler-label{padding:0 10px;font-size:7px;letter-spacing:1.3px}.track-header{padding:10px 10px 10px 11px;gap:11px}.track-name{font-size:12px}.track-group{font-size:8px;max-width:68px;margin-top:5px}.track-switches{right:9px;bottom:34px}.track-switches button{width:24px;height:22px;min-height:22px}.track-volume{padding-left:0}.gain-value{min-width:37px;font-size:8px}.navigation{padding:4px 10px;min-height:42px}.zoom-controls .icon-button{width:34px;height:30px}.zoom-controls>span{font-size:8px}footer{font-size:8px;padding:5px 10px}.open-saved{display:none}.master .meter{width:28px}.master{font-size:6px}#playhead{top:36px}dialog{padding:26px 22px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
.lane{background-image:none}.lane::after,#ruler::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;background-image:linear-gradient(to right,var(--bar-line) 1px,transparent 1px),linear-gradient(to right,var(--half-line) 1px,transparent 1px),linear-gradient(to right,var(--beat-line) 1px,transparent 1px),linear-gradient(to right,var(--eighth-line) 1px,transparent 1px),linear-gradient(to right,var(--sixteenth-line) 1px,transparent 1px),linear-gradient(to right,var(--thirtysecond-line) 1px,transparent 1px);background-size:var(--bar) 100%,var(--half) 100%,var(--beat) 100%,var(--eighth) 100%,var(--sixteenth) 100%,var(--thirtysecond) 100%}.grid-off .lane::after,.grid-off #ruler::before{display:none}#ruler::before{top:auto;height:7px}.clip-name{z-index:1}
@media(max-width:540px){#grid-division{width:49px;font-size:9px;min-height:26px;padding:3px 2px}.toolbar .edits{gap:0}.toolbar .edits .icon-button{width:25px}.toolbar .edits button#normalize{font-size:9px;padding:4px 3px}.rhythm #grid{padding:4px;gap:4px}.rhythm #grid svg{width:13px}.toolbar .rhythm{gap:3px}.tempo{margin-left:1px}.tempo input{width:26px}}
@media(max-width:540px){.brand{width:50px}.topbar{column-gap:17px}footer{flex-wrap:wrap;gap:6px;min-height:54px}#status{flex-basis:calc(100% - 20px)}.open-saved{display:inline-flex;margin:0;padding:2px 4px}.role-preview{font-size:8px;margin-left:auto}.master{margin-left:auto}.help-button{margin-left:2px}.track-name{font-size:12px}.gain-value{font-size:8px}}

/* Edges reveal existing source samples without stretching the sound. */
.clip-edge{position:absolute;top:0;bottom:0;width:min(10px,25%);z-index:4;cursor:ew-resize;touch-action:none;opacity:0;transition:opacity .12s,background .12s;background:color-mix(in srgb,var(--track-color) 12%,transparent)}
.edge-start{left:0;border-left:2px solid var(--track-color)}.edge-end{right:0;border-right:2px solid var(--track-color)}
.clip-edge::after{content:'';position:absolute;top:38%;bottom:38%;width:2px;border-radius:2px;background:var(--track-color);box-shadow:0 0 5px #ffffff22}.edge-start::after{left:3px}.edge-end::after{right:3px}
.clip:hover .clip-edge,.clip.selected .clip-edge,.clip:focus-visible .clip-edge{opacity:.65}.clip .clip-edge:hover,.clip.trimming .clip-edge{opacity:1;background:color-mix(in srgb,var(--track-color) 26%,transparent)}
.clip.trimming{cursor:ew-resize;border-color:var(--track-color);box-shadow:0 0 0 1px color-mix(in srgb,var(--track-color) 25%,transparent);z-index:1}.clip.trimming-start .edge-start,.clip.trimming-end .edge-end{box-shadow:0 0 12px var(--track-color)}
.frozen-project .clip-edge{display:none}
@media(pointer:coarse){.clip-edge{width:min(18px,30%);opacity:.55}.clip.selected .clip-edge{opacity:1}}

/* Hover tools belong to the audio: corners fade, side edges trim. */
.clip-edge{top:19px}.fade-handle{position:absolute;top:0;width:min(20px,35%);height:19px;z-index:6;cursor:ew-resize;touch-action:none;opacity:0;outline-offset:-2px;transition:opacity .12s;background:transparent;border-radius:2px;color:var(--track-color)}
.fade-in{left:0}.fade-out{right:0}.fade-handle>i{position:absolute;top:4px;width:7px;height:7px;border:1px solid currentColor;background:#1c1b20;border-radius:2px;box-shadow:0 0 4px #0008;transform:rotate(45deg)}.fade-in>i{left:4px}.fade-out>i{right:4px}
.clip:hover .fade-handle,.clip.selected .fade-handle,.clip:focus-within .fade-handle,.fade-handle.has-fade{opacity:.8}.fade-handle:hover,.fade-handle:focus-visible,.clip.fading .fade-handle{opacity:1}.fade-handle.has-fade>i{background:var(--track-color);box-shadow:0 0 7px color-mix(in srgb,var(--track-color) 40%,transparent)}
.fade-tooltip{display:none;position:absolute;top:19px;left:4px;background:#1e1d22f5;border:1px solid color-mix(in srgb,var(--track-color) 30%,transparent);border-radius:5px;padding:5px 7px;font-size:9px;color:#e6e5e8;white-space:nowrap;pointer-events:none;box-shadow:0 4px 12px #0006;line-height:1.5;font-variant-numeric:tabular-nums}.fade-out .fade-tooltip{left:auto;right:4px}.fade-tooltip b{color:var(--track-color);font-weight:600}.fade-tooltip small{display:block;font-size:8px;color:#a6a4af}.fade-handle:hover .fade-tooltip,.fade-handle:focus-visible .fade-tooltip,.fading-in .fade-in .fade-tooltip,.fading-out .fade-out .fade-tooltip{display:block}
.clip.fading{z-index:1;border-color:var(--track-color)}.frozen-project .fade-handle{display:none}.clip-name{left:22px;right:22px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:none}
#cut-preview{position:absolute;top:36px;bottom:56px;width:1px;background:#ef6a92;z-index:3;pointer-events:none;box-shadow:0 0 5px #ef6a9269}#cut-preview>span{position:sticky;top:38px;display:flex;align-items:center;gap:5px;width:max-content;margin:2px 0 0 5px;background:#2c2b32ed;border:1px solid #ef6a9255;border-radius:4px;color:#e3e3e6;font-size:9px;font-variant-numeric:tabular-nums;padding:3px 6px;box-shadow:0 2px 8px #0005}#cut-preview b{font-size:12px;font-weight:400}#cut-preview.invalid{opacity:.4;background:repeating-linear-gradient(to bottom,#ef6a92 0 4px,transparent 4px 7px)}
@media(pointer:coarse){.fade-handle{height:24px;width:min(28px,35%);opacity:.8}.clip-edge{top:25px}.fade-handle>i{top:7px}.fade-in>i{left:7px}.fade-out>i{right:7px}}

.fade-tooltip{display:none!important}#fade-tip{position:fixed;z-index:1000;pointer-events:none;background:#222127f5;border:1px solid #b9b7c047;border-radius:6px;padding:7px 10px;box-shadow:0 6px 22px #0006;font-size:10px;color:#dddde0;font-variant-numeric:tabular-nums;width:max-content;max-width:234px}#fade-tip b{font-weight:600}#fade-tip small{display:block;font-size:8px;color:#a1a0aa;margin-top:4px}

/* A selected clip has one quiet vertical gain control, distinct from fade corners. */
.clip-gain-handle{position:absolute;left:50%;top:0;transform:translateX(-50%);width:min(26px,30%);height:22px;z-index:7;display:grid;place-items:center;opacity:0;pointer-events:none;cursor:ns-resize;touch-action:none;color:var(--track-color);transition:opacity .14s;outline-offset:-2px}
.clip-gain-handle>i{width:9px;height:9px;border-radius:50%;border:1px solid currentColor;background:#201f24;box-shadow:0 0 0 3px #0002,0 1px 4px #0006;transition:background .12s,box-shadow .12s;pointer-events:none}
.clip.selected .clip-gain-handle,.clip:focus-within .clip-gain-handle{opacity:1;pointer-events:auto}.clip-gain-handle:hover>i,.clip-gain-handle:focus-visible>i,.adjusting-gain .clip-gain-handle>i{background:var(--track-color);box-shadow:0 0 0 4px color-mix(in srgb,var(--track-color) 13%,transparent),0 0 12px color-mix(in srgb,var(--track-color) 35%,transparent)}
.clip-gain-value{position:absolute;bottom:3px;transform:translateX(-50%);max-width:100%;overflow:hidden;white-space:nowrap;font-size:8px;font-weight:650;font-variant-numeric:tabular-nums;color:var(--track-color);background:#141417bf;padding:2px 5px;border-radius:3px;pointer-events:none;z-index:3}.clip.adjusting-gain{border-color:var(--track-color);cursor:ns-resize}.frozen-project .clip-gain-handle{display:none}
@media(pointer:coarse){.clip-gain-handle{width:min(34px,30%);height:26px}.clip-gain-handle>i{width:11px;height:11px}}
.session-gate{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;padding:24px;text-align:center;background:#131316;color:#e2e2e5}.session-gate[hidden]{display:none}.session-gate b{font-size:24px;font-weight:600}.session-gate p{max-width:460px;line-height:1.7;color:#aeadb6}.session-gate a{color:#ef6a92}.cabinet-link{color:#aeadb6;font-size:9px;white-space:nowrap;text-decoration:none;border-left:1px solid #ffffff10;padding-left:10px;margin-left:5px}.cabinet-link:hover{color:#dedde1}


.lane::after,#ruler::before{background-position:var(--grid-origin,0px) 0}
#ruler{touch-action:none}#loop-band{position:absolute;top:36px;bottom:56px;border-inline:1px solid #c0bfc635;background:#baa5e508;pointer-events:none;z-index:2}#loop-band.enabled{background:#baa5e510;border-color:#c0bfc675}
#loop-range{position:absolute;top:0;height:100%;display:flex;align-items:flex-start;justify-content:space-between;border-top:3px solid #9a98a37a;z-index:3;background:#807d8c0d}#loop-range.enabled{border-color:#c3c2c8;background:#9694a115}#loop-range>span{font-size:8px;color:#c8c7cd;background:#232227e8;padding:2px 5px;white-space:nowrap;overflow:hidden;pointer-events:none;margin:0 auto;max-width:calc(100% - 20px)}#loop-range>button{min-height:28px;width:12px;min-width:12px;padding:0;cursor:ew-resize;border-radius:0;background:#c0bfc665;position:absolute;top:0;touch-action:none}#loop-range>button:first-child{left:0}#loop-range>button:last-child{right:0}#loop-range>button:after{content:'';height:12px;border-left:1px solid #f1f1f299}#loop.active{color:#dddce0;background:#9694a133;border-color:#b5b3bc55}
#tempo-detect{width:28px;min-height:28px;padding:5px;color:#b3b2ba}.tempo-fields{display:grid;grid-template-columns:1fr 1.4fr;gap:14px;margin-top:18px}.tempo-fields input{width:100%;min-width:0}#tempo-result{min-height:52px;line-height:1.6}#tempo-analyze{border-color:#a19faa42;color:#ef6a92}
@media(max-width:540px){.transport output{min-width:74px}.toolbar .rhythm{margin-left:0}.toolbar .edits{margin-left:auto}.tempo-fields{grid-template-columns:1fr}#loop-range>button{width:18px;min-width:18px}#loop-range>span{display:none}}
.tempo input{width:52px}@media(max-width:540px){.tempo input{width:45px;font-size:10px}.toolbar .edits{margin-left:0}}
.cabinet-link{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:8px 15px;margin:0 4px 0 0;border:1px solid #ff8db044;border-left:1px solid #ff8db044;border-radius:7px;background:linear-gradient(150deg,#ef6a92,#d03565);box-shadow:0 2px 10px #d0356555,0 1px 0 #ffefef40 inset;color:#fff;font-size:12px;font-weight:750;letter-spacing:.2px;white-space:nowrap;text-decoration:none;transition:filter .15s,box-shadow .15s}.cabinet-link:hover{color:#fff;filter:brightness(1.1);box-shadow:0 3px 16px #ef6a9277,0 1px 0 #ffefef40 inset}.cabinet-link:focus-visible{outline:2px solid #fff;outline-offset:2px}
.file-actions .zip-button{border-color:#7cc8ce55;color:#bfeef1}.file-actions .zip-button:hover{border-color:#7cc8ce99;background:#7cc8ce12}.file-actions button [data-icon]{display:inline-flex}.file-actions button svg{width:15px;height:15px}
.toolbar .track-order,.toolbar .zoom-top{display:flex;align-items:center;gap:4px}.toolbar .zoom-top{padding:3px 4px 3px 10px;border-left:1px solid #ffffff09}.toolbar .zoom-top .fit-top{min-height:31px;padding:5px 9px;font-size:10px}
.swatches{border:0;margin:14px 0 0;padding:0}.swatches legend{padding:0;margin-bottom:8px;font-size:11px;color:#b3b2ba}#track-swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(30px,1fr));gap:8px}.swatch{width:30px;height:30px;min-height:30px;padding:0;border-radius:50%;border:2px solid #ffffff1c;background:var(--swatch);box-shadow:0 0 12px color-mix(in srgb,var(--swatch) 45%,transparent);cursor:pointer;transition:transform .12s}.swatch:hover{transform:scale(1.1)}.swatch.on{border-color:#fff;box-shadow:0 0 0 2px #0008,0 0 16px var(--swatch)}.swatch:first-child{outline:1px dashed #ffffff40;outline-offset:3px}
@media(max-width:1100px){.toolbar .zoom-top .fit-top{display:none}}
@media(max-width:800px){.cabinet-link{padding:7px 11px;font-size:11px}.file-actions .zip-button span:last-child{display:none}.toolbar .zoom-top{display:none}}
@media(max-width:540px){.cabinet-link{min-height:30px;padding:5px 9px;font-size:10px}.toolbar .track-order{order:3}}
@media(max-width:800px){.file-actions{flex-wrap:wrap;justify-content:flex-end;row-gap:6px}}
@media(max-width:540px){.file-actions{width:100%;justify-content:flex-start}#open-saved .desktop-label{display:none}}
.file-actions .take-project{border-color:#7cc8ce66;color:#cff3f5;font-weight:650}.file-actions .take-project:hover{border-color:#7cc8ceaa;background:#7cc8ce14}
.file-actions .zip-button.zip-ready{background:linear-gradient(150deg,#3fb8c0,#227f86);border-color:#9ee6ea80;color:#fff;font-weight:750;box-shadow:0 0 14px #7cc8ce55;animation:zipReady 2.6s ease-in-out infinite}@keyframes zipReady{50%{box-shadow:0 0 22px #7cc8ce99}}@media(prefers-reduced-motion:reduce){.file-actions .zip-button.zip-ready{animation:none}}
#project-list .queue-empty{margin:0 0 12px;color:#b3b2ba;font-size:12px}#project-list .queue-rest{margin-top:14px;border-top:1px solid #ffffff12;padding-top:10px}#project-list .queue-rest summary{cursor:pointer;color:#b3b2ba;font-size:12px;margin-bottom:8px}#project-list .queue-rest .export-option{opacity:.75}
.normalize-mode .clip{cursor:copy}.normalize-mode .clip:hover{filter:brightness(1.12)}
/* Подсказка названия по звуку (Gemini) в окне «Название и цвет» */
.ai-suggest{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:6px 0 2px}.ai-suggest span{font-size:12px;line-height:1.4;color:#c9c4d0}.ai-suggest span:empty{display:none}#ai-audio-consent{max-width:460px}#ai-audio-consent p:not(.eyebrow){line-height:1.5}
/* Progress card, error banner, silence (2026-11-11) */
.progress-card{position:fixed;left:50%;bottom:74px;transform:translateX(-50%);z-index:60;width:min(440px,calc(100vw - 32px));padding:14px 16px 16px;border-radius:14px;background:linear-gradient(150deg,#2e2b34f2,#1d1c21f2);border:1px solid #ef6a9255;box-shadow:0 18px 60px #000a,0 0 26px #ef6a9233;backdrop-filter:blur(10px);animation:progressIn .25s ease-out}
.progress-head{display:flex;align-items:center;gap:10px}.progress-title{font-size:15px;font-weight:750;color:#fff}.progress-percent{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:750;color:#ff8fb1}
.progress-detail{margin:6px 0 10px;font-size:12.5px;color:#c9c6d2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.progress-bar{height:8px;border-radius:99px;background:#ffffff14;overflow:hidden}.progress-bar i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#d03565,#ff8fb1);box-shadow:0 0 12px #ef6a92aa;transition:width .25s ease}
.progress-card.indeterminate .progress-bar i{width:36%;animation:progressSlide 1.2s ease-in-out infinite}
.progress-spin{width:16px;height:16px;border-radius:50%;border:2px solid #ffffff2a;border-top-color:#ff8fb1;animation:progressSpin .8s linear infinite;flex:none}
@keyframes progressSpin{to{transform:rotate(360deg)}}@keyframes progressSlide{0%{transform:translateX(-100%)}100%{transform:translateX(280%)}}@keyframes progressIn{from{opacity:0;transform:translate(-50%,10px)}}
.error-banner{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:70;display:flex;align-items:flex-start;gap:12px;width:min(620px,calc(100vw - 32px));padding:14px 16px;border-radius:14px;background:linear-gradient(150deg,#4a1d2c,#2a1219);border:1px solid #ff6b8f;color:#fff;font-size:14px;line-height:1.45;box-shadow:0 0 0 1px #ff6b8f33,0 0 34px #ff3d6e66,0 18px 50px #000a}
.error-banner.pulse{animation:errorGlow 1.6s ease-in-out 3}.error-mark{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#ff3d6e;font-weight:900;box-shadow:0 0 14px #ff3d6e}
.error-text{flex:1}.error-close{flex:none;background:none;border:0;color:#ffc1d0;font-size:20px;line-height:1;cursor:pointer;padding:0 2px}
@keyframes errorGlow{50%{box-shadow:0 0 0 1px #ff6b8f77,0 0 52px #ff3d6eaa,0 18px 50px #000a}}
.silence-tool{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 11px;border-radius:9px;border:1px solid #f0b34a88;background:#f0b34a1c;color:#ffd58a;font-weight:700;font-size:12.5px;cursor:pointer;animation:silenceGlow 2.4s ease-in-out infinite}
.silence-tool b{min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:#f0b34a;color:#241a08;font-size:11px;display:grid;place-items:center}.silence-tool[hidden]{display:none}
@keyframes silenceGlow{50%{box-shadow:0 0 14px #f0b34a66}}
.silence-badge{margin-left:6px;padding:1px 6px;border-radius:99px;background:#f0b34a26;border:1px solid #f0b34a66;color:#ffd58a;font-size:10px;font-weight:700;letter-spacing:.02em}
.track.silent .clip{background-image:repeating-linear-gradient(135deg,#f0b34a14 0 8px,transparent 8px 16px)}.track.silent .track-header{box-shadow:inset 3px 0 0 #f0b34a}
.silence-note{color:#c9c6d2;font-size:13.5px;line-height:1.5;max-width:460px}.silence-list{list-style:none;margin:14px 0 0;padding:0;max-height:260px;overflow:auto;display:grid;gap:6px}
.silence-list li{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:9px;background:#ffffff08;font-size:13.5px}.silence-list em{margin-left:auto;font-style:normal;font-size:11.5px;color:#ffd58a}
.silence-dot{width:10px;height:10px;border-radius:50%;background:var(--track-color);flex:none}
.danger-button{background:linear-gradient(145deg,#e0566f,#b02444);color:#fff;border:0;border-radius:9px;padding:9px 16px;font-weight:750;cursor:pointer}.danger-button:disabled{opacity:.45;cursor:not-allowed}
@media(prefers-reduced-motion:reduce){.progress-card,.progress-spin,.progress-bar i,.error-banner.pulse,.silence-tool{animation:none}}
/* Mastering mode (2026-11-11): one version at a time, untouched files */
.mastering-mode .track-volume,.mastering-mode .track-switches [data-action="solo"],.mastering-mode .track-switches [data-action="mute"],.mastering-mode .clip-gain-handle,.mastering-mode [data-fade],.mastering-mode #normalize-tool{display:none!important}
.mastering-mode .track-switches{gap:6px}
.listen-button{height:28px;padding:0 10px;border-radius:8px;border:1px solid #ffffff24;background:#ffffff0d;color:#e9e6ef;font-size:12px;font-weight:700;cursor:pointer}
.listen-button.on{background:linear-gradient(145deg,#ef6a92,#d03565);border-color:#ff8fb1;color:#fff;box-shadow:0 0 14px #ef6a9277}
.download-button{width:28px;height:28px;display:grid;place-items:center;border-radius:8px;border:1px solid #7cc8ce66;background:#7cc8ce14;color:#9ee6ea;cursor:pointer}.download-button svg{width:15px;height:15px}
.mastering-mode .track:not(.inaudible) .track-header{box-shadow:inset 3px 0 0 #ef6a92}
.mastering-order{display:grid;gap:12px;margin:16px 0}.variant-choice{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.variant-choice label{display:flex;gap:10px;align-items:flex-start;padding:12px;border-radius:12px;border:1px solid #ffffff1c;background:#ffffff08;cursor:pointer}
.variant-choice label:has(input:checked){border-color:#ef6a92;background:#ef6a921a;box-shadow:0 0 18px #ef6a9233}
.variant-choice span{display:grid;gap:3px}.variant-choice small{color:#c9c6d2;font-size:12px}
.mastering-balance{margin:0;font-size:13.5px;color:#c9c6d2}.mastering-balance.short{color:#ffb4c4;font-weight:700}
.mastering-confirm{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.45;color:#e9e6ef}.mastering-confirm input{margin-top:3px}
.topup-link{justify-self:start;padding:8px 14px;border-radius:9px;border:1px solid #ef6a92;color:#ff8fb1;text-decoration:none;font-weight:700}
.export-option.new-mastering{display:grid;gap:3px;text-decoration:none;border:1px dashed #ef6a9288;margin-top:10px}
@media(max-width:540px){.variant-choice{grid-template-columns:1fr}}
.variant-choice label,label.mastering-confirm{display:flex!important;flex-direction:row!important;align-items:flex-start;text-align:left}.variant-choice input,.mastering-confirm input{width:16px!important;height:16px;min-height:0;flex:none;margin:2px 0 0!important;padding:0;accent-color:#ef6a92}
.mastering-mode .track-switches{flex:none;width:auto;display:flex;align-items:center}.listen-button{white-space:nowrap;flex:none;min-width:70px;font-size:11.5px;line-height:1}
.mastering-mode .track-top{flex-wrap:wrap;row-gap:8px}.mastering-mode .track-switches{order:3;flex-basis:100%;justify-content:flex-start;padding-left:2px}.mastering-mode .listen-button{flex:1;max-width:130px}
/* Master limiter meter (mixing only) */
.limit-meter{margin-right:10px;padding:3px 9px;border-radius:99px;border:1px solid #f0b34a77;background:#f0b34a1a;color:#ffd58a;font-size:11px;font-weight:700;white-space:nowrap}.limit-meter.hot{border-color:#ff6b8f;background:#ff3d6e26;color:#ffc1d0;box-shadow:0 0 14px #ff3d6e66;animation:errorGlow 1.6s ease-in-out infinite}.mastering-mode .limit-meter{display:none}@media(prefers-reduced-motion:reduce){.limit-meter.hot{animation:none}}
.project-row{display:flex;gap:8px;align-items:stretch}.project-row>.export-option{flex:1;min-width:0}.project-delete{flex:none;padding:0 14px;border-radius:10px;border:1px solid #ef6a9240;background:transparent;color:#f39ab4;font-size:12px;cursor:pointer}.project-delete:hover{background:#ef6a9218;border-color:#ef6a9280}
.tempo-value-row{display:flex;gap:6px;align-items:stretch}.tempo-value-row input{flex:1;min-width:84px}.tempo-step{flex:none;min-width:44px;padding:0 10px;border-radius:10px;border:1px solid #ffffff1f;background:#ffffff0a;color:#f2f1f5;font-weight:600;cursor:pointer}.tempo-step:hover{border-color:#ef6a9280;background:#ef6a9218;color:#fff}
.loop-out{position:absolute;top:36px;bottom:56px;pointer-events:none;z-index:2;background:#0a090d55;backdrop-filter:blur(1.5px) brightness(.7) saturate(.7);transition:background .25s,backdrop-filter .25s}.loop-out.enabled{background:#0a090d8a;backdrop-filter:blur(3px) brightness(.45) saturate(.5)}#loop-band.enabled{background:#ffffff0a;backdrop-filter:brightness(1.18) saturate(1.25);border-color:#ffffffa0;box-shadow:0 0 24px #ef6a9226 inset}
/* Owner 12.11: one bright palette button for name, group and colour; it glows and shifts colour on hover. */
.palette-button{position:relative;border-color:#ffffff24;background:linear-gradient(#1b1a20,#1b1a20) padding-box,conic-gradient(from 0deg,#ff3b6b,#ffc928,#2ee88f,#2fb4ff,#a35bff,#ff3b6b) border-box;border:1.5px solid transparent;overflow:hidden}
.palette-button svg{color:#fff;filter:drop-shadow(0 0 3px #ff4fc370)}
.palette-button:not(:disabled):hover{box-shadow:0 0 14px #ff4fc366,0 0 26px #2fb4ff40;animation:paletteHue 1.6s linear infinite}
.palette-button:disabled{filter:grayscale(.7) opacity(.55)}
@keyframes paletteHue{to{filter:hue-rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.palette-button:not(:disabled):hover{animation:none}}
.pauses-tool{min-height:32px;padding:0 12px;border-radius:9px;border:1px solid #ffffff1f;background:#ffffff08;color:#e9e8ee;font-size:12px;cursor:pointer}.pauses-tool:hover{border-color:#ef6a9270;background:#ef6a9214}.pauses-tool:disabled{opacity:.45;cursor:default}.pauses-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:14px 0 8px}.pauses-fields label{display:flex;flex-direction:column;gap:6px;font-size:12px;color:#b9b8c0}.pauses-fields select{min-width:0}.pauses-preview{min-height:20px;font-size:13px;color:#f2f1f5;margin:6px 0 2px}@media (max-width:600px){.pauses-fields{grid-template-columns:1fr}}
/* zoom frames: no blur recomposition while the scale moves */.zooming .loop-out,.zooming #loop-band.enabled{backdrop-filter:none;transition:none}
/* Owner 12.11: while playing the playhead glows softly and leaves a short trail */#playhead::before{content:'';position:absolute;top:0;bottom:0;right:0;width:56px;pointer-events:none;background:linear-gradient(to right,#ef6a9200,#ef6a9214 55%,#ef6a9238);opacity:0;transition:opacity .35s}#playhead::after{content:'';position:absolute;top:0;bottom:0;left:-3px;width:7px;pointer-events:none;background:radial-gradient(ellipse at center,#ff9cbb66,#ef6a9200 70%);opacity:0;transition:opacity .35s}.is-playing #playhead{box-shadow:0 0 6px #ff8fb0,0 0 16px #ef6a92aa,0 0 30px #ef6a9255;animation:playheadGlow 1.8s ease-in-out infinite}.is-playing #playhead::before,.is-playing #playhead::after{opacity:1}@keyframes playheadGlow{50%{box-shadow:0 0 8px #ffa3c0,0 0 22px #ef6a92cc,0 0 42px #ef6a9266}}@media (prefers-reduced-motion:reduce){.is-playing #playhead{animation:none}}
/* «Поделиться»: button, dialog and the listening-only page */.share-button svg{width:16px;height:16px}.share-link{display:flex;gap:8px;margin:18px 0 8px}.share-link input{flex:1;min-width:0;padding:10px 12px;background:#141317;color:#e9e9eb;border:1px solid #ef6a9255;border-radius:6px;font-size:12px}.share-meta{display:block;color:#8f8d99;font-size:10px}#share-dialog .danger{color:#f0a3a3;border-color:#f0a3a333}.share-error{color:#f2a08f;font-size:11px;line-height:1.5;margin:12px 0 0}.share-mode .file-actions,.share-mode .tool-group:not(.zoom-top):not(.rhythm),.share-mode #tempo-detect,.share-mode #pauses-tool,.share-mode #silence-tool,.share-mode #track-color,.share-mode [data-action=download],.share-mode .track-volume input,.share-mode .clip-edge,.share-mode [data-fade],.share-mode [data-clip-gain],.share-mode .clip-gain-value{display:none!important}.share-mode .clip{cursor:default}.share-banner{display:flex;align-items:center;gap:12px;margin-left:auto;padding:9px 14px;border:1px solid #ef6a9244;border-radius:999px;background:linear-gradient(120deg,#ef6a9214,#7cc8ce0d);font-size:11px;color:#c9c7d0;min-width:0}.share-banner b{color:#fff;font-weight:600;white-space:nowrap}.share-note{color:#9c9aa6;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.share-brand{color:#ef6a92;text-decoration:none;white-space:nowrap;font-weight:600}.share-brand:hover{text-decoration:underline}.share-dot{width:7px;height:7px;border-radius:50%;background:#ef6a92;box-shadow:0 0 10px #ef6a92;flex-shrink:0;animation:shareDot 2s ease-in-out infinite}@keyframes shareDot{50%{opacity:.45}}@media (max-width:900px){.share-note{display:none}}@media (prefers-reduced-motion:reduce){.share-dot{animation:none}}
.share-mode .project-heading{flex:1 1 200px;min-width:150px}.share-mode .project-heading input{width:100%}.share-banner{flex:0 1 auto}@media (max-width:640px){.share-mode .topbar{flex-wrap:wrap;gap:12px}.share-banner{order:3;width:100%;margin-left:0;justify-content:space-between}}
/* Owner 12.11 (still laggy): the playhead moves on the compositor — no repaint of the
   tracks under it each frame; the glow pulses by opacity, not by animating shadows. */
#playhead{left:0!important;will-change:transform}.is-playing #playhead{animation:none;box-shadow:0 0 6px #ff8fb0,0 0 16px #ef6a92aa,0 0 30px #ef6a9244}.is-playing #playhead::after{animation:playheadPulse 1.8s ease-in-out infinite}@keyframes playheadPulse{50%{opacity:.35}}@media (prefers-reduced-motion:reduce){.is-playing #playhead::after{animation:none}}
.lane{contain:layout paint style}
/* Track panel width (drag the edge of «ДОРОЖКИ») */
.ruler-label{position:sticky}.sidebar-grip{position:absolute;top:0;right:-5px;width:10px;height:100%;cursor:col-resize;z-index:8;touch-action:none}.sidebar-grip::after{content:'';position:absolute;left:4px;top:8px;bottom:8px;width:2px;border-radius:2px;background:#ffffff1c;transition:background .15s}.sidebar-grip:hover::after,.resizing-sidebar .sidebar-grip::after{background:#ef6a92}.resizing-sidebar,.resizing-sidebar *{cursor:col-resize!important;user-select:none}
#timeline.narrow-headers .track-group,#timeline.narrow-headers .gain-value,#timeline.narrow-headers .track-number,#timeline.narrow-headers .ruler-label span:first-child{display:none}#timeline.narrow-headers .track-header{padding:8px 6px 8px 8px;gap:6px}#timeline.narrow-headers .ruler-label{padding:0 8px}#timeline.narrow-headers .track-name{font-size:11px}
#timeline.tiny-headers .track-volume{display:none}#timeline.tiny-headers .track-top{flex-wrap:wrap;gap:4px}#timeline.tiny-headers .track-switches button{width:20px;height:20px;min-height:20px;font-size:9px}
/* Small rows (vertical zoom out) */
#timeline.rows-s .track-header{padding-top:4px;padding-bottom:4px;gap:4px}#timeline.rows-s .track-group{display:none}#timeline.rows-s .track-volume input{margin:2px 0}#timeline.rows-s .clip{top:3px;bottom:3px}
#timeline.rows-xs .track-volume,#timeline.rows-xs .track-number,#timeline.rows-xs .clip-name{display:none}#timeline.rows-xs .track-name{font-size:11px}#timeline.rows-xs .track-switches button{width:20px;height:18px;min-height:18px;font-size:9px}#timeline.rows-xs .clip{top:2px;bottom:2px}
/* Phone turned sideways (short screen): everything smaller so the tracks have room */
@media (max-height:520px){body{padding:0}.editor{border:0;border-radius:0}:root{--sidebar:124px}.topbar{min-height:0;padding:6px 12px;gap:12px}.brand b{font-size:19px}.brand small,.project-overline,.project-heading>span{display:none}.project-heading input{font-size:13px}.file-actions{gap:4px}.file-actions button,.file-actions a{min-height:26px;height:26px;font-size:10px;padding:3px 8px}.toolbar{min-height:0;padding:4px 10px;gap:6px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.toolbar button,.toolbar .icon-button{min-height:28px;height:28px}.transport .play{width:28px}.transport output{font-size:12px;min-width:76px}.navigation{min-height:30px;padding:2px 12px}.hint{display:none}footer{min-height:22px;padding:2px 12px;font-size:8px}.share-banner{padding:4px 10px;font-size:10px}.track-name{font-size:12px}}
#timeline.narrow-headers .track-top{flex-wrap:wrap;row-gap:4px}#timeline.narrow-headers .track-labels{flex-basis:100%}#timeline.narrow-headers .track-name{white-space:nowrap}#timeline.rows-xs.narrow-headers .track-top{flex-wrap:nowrap}#timeline.rows-xs.narrow-headers .track-labels{flex-basis:auto}
/* One grid layer instead of a pseudo-element per lane (zoom performance, 12.11) */.lane::after,#ruler::before{display:none!important}.grid-layer{position:absolute;pointer-events:none;background-repeat:repeat}#grid-layer{left:var(--sidebar);top:36px;z-index:3}#ruler-grid{inset:0;z-index:0}.grid-off .grid-layer{display:none}
/* Owner 12.11: a longer, softer trail behind the playhead */#playhead::before{width:170px;background:linear-gradient(to right,#ef6a9200,#ef6a9208 30%,#ef6a9218 60%,#ef6a9230 85%,#ef6a9250)}
/* One wave canvas per lane (12.11): the clip boxes are painted there; DOM clips stay for clicks */.lane{overflow:clip}.lane-wave{position:absolute;pointer-events:none;z-index:0;transform-origin:0 0}.clip{background:none;border-color:transparent;z-index:1}.track.silent .clip{background-image:repeating-linear-gradient(135deg,#f0b34a14 0 8px,transparent 8px 16px)}.clip.selected{border-color:var(--track-color)}.clip .drag-wave{position:absolute;top:1px;pointer-events:none}.clip:not(.dragging) .drag-wave{display:none}.track.inaudible .lane-wave{opacity:.17;filter:saturate(.2)}.track.inaudible .clip{opacity:1;filter:none}.zooming #tracks .clip{display:none}
/* Save state instead of «Черновик» (owner 12.11) */#save{gap:7px}#save .save-dot{width:7px;height:7px;border-radius:50%;background:#8f8d99;flex-shrink:0;transition:background .2s,box-shadow .2s}#save[data-state=saved]{color:#a9d8c3}#save[data-state=saved] .save-dot{background:#5fd39a;box-shadow:0 0 8px #5fd39a88}#save[data-state=saving] .save-dot{background:#ffc928;animation:saveBlink 1s ease-in-out infinite}#save[data-state=dirty] .save-dot{background:#ffc928}#save[data-state=error]{color:#f2a08f}#save[data-state=error] .save-dot{background:#ef6a5a}@keyframes saveBlink{50%{opacity:.3}}
/* Projects dialog */#project-list{display:flex;flex-direction:column;gap:6px}.project-new{border:1px dashed #ef6a9266!important;background:#ef6a920d!important;align-items:center}.project-new-plus{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#ef6a92;color:#fff!important;font-size:20px;flex-shrink:0}.project-current{border-color:#ef6a9277!important;background:#ef6a9212!important}.project-now{font-style:normal;font-size:9px;color:#ef6a92;margin-left:8px;letter-spacing:.4px;text-transform:uppercase}.project-when{color:#8f8d99}.queue-empty{color:#8f8d99;font-size:12px;margin:6px 2px}
/* Wave zoom */.wave-zoom-label{font-size:7px;font-weight:700;letter-spacing:1.7px;color:#6c6a78;margin-right:4px}.wave-zoom-value{min-width:34px;font-size:10px;font-variant-numeric:tabular-nums;padding:4px 6px;min-height:25px;color:#c9c7d0}
.project-new{flex-direction:row!important;align-items:center;gap:14px!important}.project-new>span:last-child{display:flex;flex-direction:column;gap:4px}
/* Owner 12.11: the playing clip's waveform lights up */.lane-lit{position:absolute;left:0;pointer-events:none;z-index:0;opacity:0;will-change:transform,opacity;transform-origin:36px 50%;overflow:hidden;contain:strict;-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.25) 31%,#000 63%,rgba(0,0,0,.45) 88%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.25) 31%,#000 63%,rgba(0,0,0,.45) 88%,transparent 100%)}.lit-strip{position:absolute;left:0;top:0;will-change:transform}.lit-strip canvas{position:absolute;left:0;top:0}.lit-col{position:absolute;left:26px;width:20px;opacity:0}.zooming .lane-lit,.zooming #glow-layer{opacity:0!important}@media (prefers-reduced-motion:reduce){.lane-lit,#glow-layer{display:none}}
/* Owner 12.11: the trail is drawn per track in the playing clip's colour; the limiter pill never changes the footer height */#playhead::before{display:none!important}.limit-meter{line-height:14px;padding:1px 9px;min-width:124px;text-align:center;box-sizing:border-box}
/* Analysis panel (owner 12.11) */.meter-panel{--meter-color:#ef6a92;position:absolute;right:14px;bottom:62px;z-index:9;width:356px;padding:10px 12px 10px;border-radius:12px;background:linear-gradient(160deg,#211f26f2,#17161bf2);border:1px solid color-mix(in srgb,var(--meter-color) 35%,#ffffff12);box-shadow:0 14px 40px #0009,0 0 22px color-mix(in srgb,var(--meter-color) 14%,transparent);backdrop-filter:blur(6px)}.meter-panel[hidden]{display:none}.meter-head{display:flex;align-items:center;gap:7px;margin-bottom:8px;min-width:0}.meter-dot{width:7px;height:7px;border-radius:50%;background:var(--meter-color);box-shadow:0 0 8px var(--meter-color);flex-shrink:0}.meter-what{font-size:8px;font-weight:700;letter-spacing:1.6px;color:#8f8d99;text-transform:uppercase}.meter-target{font-size:12px;color:var(--meter-color);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}.meter-close{width:24px;height:24px;min-height:24px;padding:0;color:#9d9ba7;font-size:16px}.meter-body{display:grid;grid-template-columns:1fr 92px;gap:8px}.meter-spectrum{width:100%;height:92px;border-radius:6px;background:#0f0e12}.meter-scope{width:92px;height:92px;border-radius:6px;background:#0f0e12}.meter-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin:8px 0 0}.meter-stats div{background:#ffffff06;border-radius:6px;padding:5px 6px}.meter-stats dt{font-size:7px;letter-spacing:1px;color:#7f7d8b;text-transform:uppercase}.meter-stats dd{margin:2px 0 0;font-size:11px;font-variant-numeric:tabular-nums;color:#e3e2e7;white-space:nowrap}.meter-stats dd.hot{color:#ff8f8f}.meters-toggle{font-size:9px;min-height:25px;padding:4px 9px;margin-right:8px;border:1px solid #ffffff10;color:#b6b5bd}.meters-toggle.active{color:#ef6a92;border-color:#ef6a9255;background:#ef6a9212}.share-mode .meter-panel{bottom:62px}
.meter-master{font-size:9px;min-height:22px;padding:2px 8px;border:1px solid #ffffff14;color:#c9c7d0}.meter-master:hover{border-color:#ef6a9277;color:#ef6a92}
/* owner 13.11: micro fades from «Паузы» (5–10 ms) do not show their handles on every piece; hover or selection still shows them */
.fade-handle.has-fade.micro{opacity:0}.clip:hover .fade-handle.micro,.clip.selected .fade-handle.micro,.clip:focus-within .fade-handle.micro{opacity:.8}.fade-handle.micro>i{background:#1c1b20;box-shadow:0 0 4px #0008}
/* owner 13.11: compact track panel (whole-project view) — small type, a small fader that stays */
#timeline.compact-headers .track-header{padding:3px 5px 3px 7px;gap:2px;justify-content:center}#timeline.compact-headers .track-top{flex-wrap:nowrap;gap:3px;align-items:center}#timeline.compact-headers .track-labels{flex:1 1 auto;min-width:0;flex-basis:auto}#timeline.compact-headers .track-name{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#timeline.compact-headers .track-group,#timeline.compact-headers .track-number,#timeline.compact-headers .gain-value{display:none}#timeline.compact-headers .track-switches{gap:2px;flex:none}#timeline.compact-headers .track-switches button{width:17px;height:15px;min-height:15px;font-size:8px;padding:0;border-radius:3px}#timeline.compact-headers .track-volume{display:flex!important;padding-left:0;gap:0}#timeline.compact-headers .track-volume input{margin:1px 0;height:2px}#timeline.compact-headers .track-volume input::-webkit-slider-thumb{width:6px;height:6px}#timeline.compact-headers .ruler-label{padding:0 6px}
#timeline.compact-headers.rows-xxs .track-volume{display:none!important}#timeline.rows-xxs .track-header{padding-top:1px;padding-bottom:1px}#timeline.rows-xxs .clip{top:1px;bottom:1px}#timeline.rows-xxs .track-switches button{height:13px;min-height:13px}
.fit-badge{position:absolute;left:50%;bottom:58px;transform:translateX(-50%);z-index:40;max-width:min(560px,calc(100% - 24px));padding:7px 14px;border-radius:999px;background:#1d1c22ee;border:1px solid #ef6a9255;color:#e9e7ee;font-size:11px;line-height:1.35;text-align:center;box-shadow:0 8px 24px #0008;pointer-events:none;transition:opacity .3s}.fit-badge.gone{opacity:0}
/* owner 13.11: on a phone the mix gets the screen — one scrolling row of project buttons and one of tools */
@media(max-width:540px){.topbar{min-height:0;padding:8px 12px 6px;gap:6px 10px;flex-wrap:wrap}.brand{width:auto}.brand b{font-size:19px}.brand small,.project-overline,.project-heading>span{display:none}.project-heading{min-width:0;flex:1}.project-heading input{font-size:14px}.file-actions{flex-basis:100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:5px}.file-actions>*{flex:none}.file-actions button,.file-actions a{height:28px;min-height:28px}.toolbar{min-height:0;padding:5px 10px;gap:6px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.toolbar>*{flex:none}.toolbar .rhythm{margin-left:0}.toolbar .icon-button{height:30px;min-height:30px}.navigation{min-height:36px}}
/* touch screens: fade handles appear on the selected clip only, never on every piece */
@media(pointer:coarse){.fade-handle,.fade-handle.has-fade{opacity:0}.clip.selected .fade-handle{opacity:.8}#timeline.rows-xs .fade-handle{display:none}}
#timeline.compact-headers .track-switches{position:static;right:auto;bottom:auto}
/* owner 13.11: two-finger zoom belongs to the editor, not to the page; undo after each touch edit */
@media(pointer:coarse){#viewport{touch-action:pan-x pan-y}}
.undo-toast{position:absolute;left:50%;bottom:58px;transform:translateX(-50%);z-index:41;display:flex;align-items:center;gap:12px;max-width:calc(100% - 24px);padding:6px 6px 6px 14px;border-radius:999px;background:#1d1c22f2;border:1px solid #ffffff1f;color:#e9e7ee;font-size:12px;box-shadow:0 8px 24px #0009;transition:opacity .25s}.undo-toast span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.undo-toast button{flex:none;min-height:30px;padding:4px 14px;border-radius:999px;border:0;background:#ef6a92;color:#fff;font-weight:700;font-size:12px}.undo-toast.gone{opacity:0}
/* owner 13.11: floating zoom pads on touch screens (semi-transparent, draggable) */
.zoom-pad{position:absolute;z-index:38;display:flex;align-items:center;height:40px;padding:0 4px 0 12px;border-radius:12px;background:#15141acc;border:1px solid #ffffff1c;box-shadow:0 6px 18px #0007;backdrop-filter:blur(6px);color:#e9e7ee;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;opacity:.82;cursor:grab}
.zoom-pad.moving{opacity:1;border-color:#ef6a9277;box-shadow:0 8px 24px #000a,0 0 0 1px #ef6a9233}
.zoom-pad-label{font-size:11px;font-weight:650;letter-spacing:.2px;padding-right:8px;white-space:nowrap;color:#d9d6e0}
.zoom-pad.no-label{padding-left:6px}.zoom-pad.no-label .zoom-pad-label{font-size:0;padding:0;margin-right:6px;width:10px;height:26px;background:radial-gradient(circle,#ffffff66 1.4px,transparent 1.7px) 0 0/5px 6px}
.zoom-pad button{width:38px;height:34px;min-height:34px;padding:0;border:0;border-radius:9px;background:transparent;color:#fff;font-size:22px;line-height:1;font-weight:500;touch-action:manipulation;box-shadow:none}
.zoom-pad button:active{background:#ef6a9240}
.zoom-pad i{width:2px;height:22px;border-radius:2px;background:#ffffffcc}
.zoom-pad[hidden]{display:none}
.zoom-pads-toggle{font-size:13px!important}
@media(pointer:fine){.zoom-pad,.zoom-pads-toggle{display:none!important}}
/* Owner 13.11: «Весь» is always lit, so the way back to the whole project is always visible. */
.zoom-controls button#fit,.toolbar .zoom-top .fit-top{color:#fff;border:1px solid #ff8db066;background:linear-gradient(150deg,#ef6a92cc,#d03565cc);box-shadow:0 0 10px #d0356566,0 1px 0 #ffefef33 inset;font-weight:750}.zoom-controls button#fit:hover,.toolbar .zoom-top .fit-top:hover{background:linear-gradient(150deg,#ef6a92,#d03565);box-shadow:0 0 14px #d0356599}
/* owner 14.11: peak check before the DAW export */
.peak-dialog{max-width:520px}.peak-list{list-style:none;margin:12px 0;padding:0;display:grid;gap:4px}.peak-list li{display:flex;justify-content:space-between;gap:12px;padding:6px 10px;border-radius:8px;background:#ff3b6b14;border:1px solid #ff3b6b33;font-size:12px}.peak-list li span{color:#ff6a8b;font-weight:700;font-variant-numeric:tabular-nums}.peak-list li.more{background:none;border:0;color:#9b98a5}.peak-actions{flex-wrap:wrap;gap:8px}.peak-actions .primary{flex:1 1 100%}

/* Owner 14.11: one glow layer at the playhead for all tracks (under the sticky track headers) */#glow-layer{position:absolute;left:0;top:0;z-index:2;pointer-events:none;opacity:0;will-change:transform}
/* owner 14.11: where the peak is — per-track place and actions */
.peak-list li{display:grid;gap:4px}.peak-list li .peak-row{display:flex;justify-content:space-between;gap:12px}.peak-list li small{color:#9b98a5;font-size:11px}.peak-row-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}.peak-row-actions button{font-size:11px;padding:4px 10px;min-height:26px}
/* owner 14.11: BPM and key in the ZIP name */
.export-key{display:grid;gap:4px;margin:10px 0 12px;padding:10px 12px;border-radius:12px;background:#ffffff0a;border:1px solid #ffffff14}.export-key-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}.export-key-row b{font-size:18px;font-variant-numeric:tabular-nums}.export-key label{display:flex;align-items:center;gap:8px;font-size:12px}.export-key select{min-width:150px}.export-key small{color:#9b98a5;font-size:11px}.export-key-name b{color:#e9e7ef;font-size:11px;word-break:break-all}
/* owner 14.11: parts of the song on the ruler + bars/time ruler */
#ruler.has-sections .ruler-mark{top:18px}#ruler.has-sections .ruler-mark small{margin-left:6px}
.ruler-mark.bar{color:#e9e7ef;border-color:#ffffff30}
.ruler-mode{margin-left:auto;padding:2px 6px;min-height:0;height:18px;border-radius:6px;font-size:8px;letter-spacing:1px;font-weight:700;color:#c0bfc6;background:#ffffff0d;border:1px solid #ffffff1a;cursor:pointer}.ruler-mode:hover{background:#ff3b6b22;color:#fff;border-color:#ff3b6b66}.ruler-label{display:flex;align-items:center;gap:6px}
#timeline.compact-headers .ruler-mode{padding:1px 4px;font-size:7px;letter-spacing:.5px}
#sections{position:absolute;left:0;top:1px;height:15px;right:0;z-index:4;pointer-events:none}
.section{position:absolute;top:0;height:15px;pointer-events:auto;cursor:grab;border-radius:5px 5px 2px 2px;overflow:hidden;background:linear-gradient(180deg,color-mix(in srgb,var(--c) 34%,transparent),color-mix(in srgb,var(--c) 14%,transparent));border-left:2px solid var(--c);box-shadow:inset 0 1px 0 #ffffff14;transition:background .25s,box-shadow .25s,filter .25s;touch-action:none}
.section span{position:sticky;left:calc(var(--sidebar,128px) + 4px);display:inline-block;max-width:100%;padding:0 6px;font-size:9px;line-height:15px;font-weight:700;letter-spacing:.3px;color:#f1eff6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 2px #0008}
.section-progress{position:absolute;inset:0;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,color-mix(in srgb,var(--c) 10%,transparent),color-mix(in srgb,var(--c) 42%,transparent));pointer-events:none;will-change:transform}
.section:hover{filter:brightness(1.25)}.section.selected{box-shadow:inset 0 0 0 1px var(--c),0 0 0 1px #0008}
.section.live{background:linear-gradient(180deg,color-mix(in srgb,var(--c) 62%,transparent),color-mix(in srgb,var(--c) 30%,transparent));box-shadow:0 0 12px color-mix(in srgb,var(--c) 70%,transparent),inset 0 1px 0 #ffffff40}
.section.live span{color:#fff}
.section.enter{animation:section-enter .7s ease-out}@keyframes section-enter{0%{filter:brightness(2.2) saturate(1.4)}100%{filter:none}}
.section.dragging{cursor:grabbing;filter:brightness(1.35);z-index:5;transition:none}
#section-lines{position:absolute;left:0;top:36px;width:100%;pointer-events:none;z-index:3}#section-lines i{position:absolute;top:0;bottom:0;width:1px;background:color-mix(in srgb,var(--c) 55%,transparent);box-shadow:0 0 6px color-mix(in srgb,var(--c) 35%,transparent)}
.section-add{white-space:nowrap}
.section-pop{position:fixed;z-index:60;background:#1d1c22f7;border:1px solid #ffffff1f;border-radius:14px;padding:12px;box-shadow:0 18px 50px #000a;backdrop-filter:none;display:grid;gap:10px;color:#e9e7ef}
.sp-head{display:flex;align-items:baseline;gap:8px}.sp-head b{font-size:14px}.sp-head span{font-size:10px;color:#9b98a5;flex:1}.sp-close{min-height:0;height:24px;width:24px;padding:0;border-radius:8px;background:#ffffff0d;color:#c0bfc6}
.sp-kinds{display:grid;grid-template-columns:repeat(2,1fr);gap:5px}.sp-kinds button{display:flex;align-items:center;gap:6px;min-height:30px;padding:4px 8px;border-radius:9px;background:#ffffff08;border:1px solid #ffffff12;color:#e9e7ef;font-size:11px;text-align:left}
.sp-kinds button i{width:9px;height:9px;border-radius:50%;background:var(--c);box-shadow:0 0 8px var(--c);flex:none}.sp-kinds button small{margin-left:auto;font-size:9px;color:#8f8c99}
.sp-kinds button:hover{background:color-mix(in srgb,var(--c) 18%,transparent);border-color:color-mix(in srgb,var(--c) 50%,transparent)}.sp-kinds button.on{background:color-mix(in srgb,var(--c) 28%,transparent);border-color:var(--c)}
.sp-name{display:grid;gap:4px;font-size:10px;color:#9b98a5}.sp-name input{height:32px;border-radius:9px;background:#0003;border:1px solid #ffffff1c;color:#fff;padding:0 10px;font-size:12px}
.sp-actions{display:flex;gap:6px;flex-wrap:wrap}.sp-actions button{flex:1;min-height:32px;border-radius:9px;font-size:11px}.sp-actions .danger{color:#ff8aa5;border-color:#ff3b6b55}
.sp-hint{margin:0;font-size:9px;color:#7f7c89}

/* owner 14.11: co-authors by link — link kinds, the editing pen, marks with comments */
.share-modes{display:grid;gap:6px;margin:4px 0 12px}.share-kind{display:grid;gap:2px;text-align:left;justify-items:start;padding:9px 12px;border-radius:11px;background:#ffffff08;border:1px solid #ffffff14;color:#e9e7ef;min-height:0}.share-kind b{font-size:12px}.share-kind small{font-size:10px;color:#9b98a5}.share-kind:hover{border-color:#ff3b6b55}.share-kind.on{background:#ff3b6b1f;border-color:#ff3b6b}.share-members{font-size:11px;color:#c0bfc6;margin:8px 0 0}
.pen-bar{flex:none;display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;margin:8px 24px 0;padding:7px 12px;border-radius:12px;background:#ffffff08;border:1px solid #ffffff14;font-size:11px;color:#c0bfc6}.pen-bar b{color:#f1eff6;font-size:12px}.pen-bar button{min-height:28px;padding:0 12px;font-size:11px;margin-left:auto}
.pen-dot{width:9px;height:9px;border-radius:50%;background:#9b98a5;flex:none}.pen-dot.live{background:#38e38a;box-shadow:0 0 8px #38e38a}.pen-dot.busy{background:#ffb02e;box-shadow:0 0 8px #ffb02e;animation:pen-pulse 1.6s ease-in-out infinite}@keyframes pen-pulse{50%{opacity:.45}}
.share-login{margin-left:auto;padding:7px 14px;border-radius:10px;background:linear-gradient(135deg,#ff3b6b,#c2185b);color:#fff;font-weight:700;font-size:12px;text-decoration:none;white-space:nowrap}
.comment-list b{display:inline-block;min-width:16px;margin-left:4px;padding:0 4px;border-radius:8px;background:#ff3b6b;color:#fff;font-size:10px;line-height:16px}.comment-list b:empty{display:none}
#comment-layer{position:absolute;left:0;top:36px;width:100%;pointer-events:none;z-index:6}
.cpin{position:absolute;pointer-events:auto;transform:translateX(-1px);transform-origin:0 50%;display:flex;align-items:center;gap:3px;min-height:0;height:18px;max-width:180px;padding:0 6px 0 4px;border-radius:2px 9px 9px 2px;background:#ff3b6b;border:1px solid #ffffff55;color:#fff;box-shadow:0 2px 8px #0008;cursor:pointer;transition:transform .15s,box-shadow .2s}
.cpin svg{width:12px;height:12px;fill:#fff;stroke:none}.cpin i{font-style:normal;font-size:9px;font-weight:800}.cpin:hover{transform:translateX(-1px) scale(1.08);z-index:2}.cpin.open{box-shadow:0 0 0 2px #fff,0 2px 10px #000a}
.cpin.done{background:#2f9d62;opacity:.75}.cpin.hit{box-shadow:0 0 14px #ff3b6b,0 0 0 2px #ffffffaa;animation:cpin-hit .6s ease-out}.cpin.done.hit{box-shadow:0 0 14px #38e38a}@keyframes cpin-hit{0%{transform:translateX(-1px) scale(1.25)}100%{transform:translateX(-1px) scale(1)}}
.cspan{position:absolute;height:3px;border-radius:2px;background:#ff3b6baa;pointer-events:none}.cspan.done{background:#2f9d6299}
.comment-pop{position:fixed;z-index:61;display:grid;gap:9px;padding:12px;border-radius:14px;background:#1d1c22f7;border:1px solid #ffffff1f;box-shadow:0 18px 50px #000a;color:#e9e7ef;max-height:min(520px,calc(100vh - 16px));overflow:auto}
.cp-head{display:flex;align-items:baseline;gap:8px}.cp-head b{font-size:14px}.cp-head span{flex:1;font-size:10px;color:#9b98a5}.cp-x{min-height:0;height:24px;width:24px;padding:0;border-radius:8px;background:#ffffff0d;color:#c0bfc6}
.cp-done{margin:0;font-size:11px;color:#38e38a}.cp-thread{display:grid;gap:7px}.cmsg{padding:8px 10px;border-radius:10px;background:#ffffff08;border:1px solid #ffffff10}.cmsg.mine{background:#ff3b6b12;border-color:#ff3b6b33}
.cmeta{display:flex;gap:8px;align-items:baseline}.cmeta b{font-size:11px}.cmeta span{font-size:9px;color:#8f8c99}.cbody{margin:4px 0 0;font-size:12px;line-height:1.45;white-space:pre-wrap;word-break:break-word}.ctrans{margin:6px 0 0;padding-top:6px;border-top:1px dashed #ffffff1c;font-size:12px;color:#d8d6de}.ctrans small{display:block;font-size:9px;color:#8f8c99;margin-bottom:2px}
.cacts{display:flex;gap:6px;margin-top:4px}.cacts button{min-height:0;padding:2px 8px;font-size:10px;border-radius:7px;background:none;border:1px solid #ffffff1a;color:#c0bfc6}.cacts .danger{color:#ff8aa5}
.cp-reply textarea,.cedit{width:100%;box-sizing:border-box;border-radius:10px;background:#0003;border:1px solid #ffffff1c;color:#fff;padding:8px 10px;font:inherit;font-size:12px;resize:vertical}
.cp-actions{display:flex;gap:6px;flex-wrap:wrap}.cp-actions button{flex:1;min-height:32px;border-radius:9px;font-size:11px}.cp-span{display:flex;align-items:center;gap:6px;font-size:11px;color:#c0bfc6}.cp-hint{margin:0;font-size:9px;color:#7f7c89}
.cp-list{display:grid;gap:5px}.cp-item{display:grid;gap:2px;text-align:left;padding:8px 10px;border-radius:10px;background:#ffffff08;border:1px solid #ffffff12;color:#e9e7ef;min-height:0}.cp-item span{font-size:9px;color:#9b98a5}.cp-item b{font-size:11px}.cp-item em{font-style:normal;font-size:11px;color:#d8d6de}.cp-item small{font-size:9px;color:#ff8aa5}.cp-item.done{opacity:.6}.cp-item:hover{border-color:#ff3b6b55}
.pen-bar[hidden]{display:none}@media(max-width:540px){.pen-bar{margin:6px 10px 0;font-size:10px}.pen-bar span:not(.pen-dot){display:none}}

/* Owner 14.11: marks sit on their track — a flag with a stem through the row, a short label, drag to move */.cstem{position:absolute;width:2px;margin-left:-1px;background:#ff3b6b;box-shadow:0 0 6px #ff3b6b99;pointer-events:none;border-radius:1px}.cstem.done{background:#2f9d62;box-shadow:none;opacity:.7}.cstem.hit{box-shadow:0 0 12px #ff3b6b,0 0 2px #fff}.cpin em{font-style:normal;font-size:10px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px}.cpin.whole{border-radius:9px 9px 9px 2px}.cpin.movable{cursor:grab;touch-action:none}.cpin.dragging{cursor:grabbing;transition:none;transform:translateX(-1px) scale(1.1);box-shadow:0 0 0 2px #fff,0 6px 16px #000b;z-index:3}body.comment-mode #viewport,body.comment-mode #viewport *{cursor:crosshair!important}body.comment-mode #tracks{outline:1px dashed #ff3b6b66;outline-offset:-1px}.comment-add.on{background:linear-gradient(135deg,#ff3b6b,#c2185b);color:#fff;border-color:#ff3b6b;box-shadow:0 0 14px #ff3b6b88}
/* Owner 14.11: section edges — the start and the boundary with the next part are drag handles */.section .sec-start,.section .sec-end{position:absolute;top:0;bottom:0;width:7px;cursor:col-resize;z-index:1}.section .sec-start{left:-2px}.section .sec-end{right:0}.section .sec-end::after{content:'';position:absolute;right:2px;top:3px;bottom:3px;width:2px;border-radius:1px;background:#ffffff55;opacity:0;transition:opacity .15s}.section:hover .sec-end::after,.section .sec-end:hover::after{opacity:1}.section .sec-start:hover~span,.section:hover{filter:brightness(1.2)}.section-progress{display:none}
/* Owner 14.11 (second pass): every part has the same soft glow in its colour; playing = brighter */#sections .section{background:linear-gradient(180deg,color-mix(in srgb,var(--c) 52%,transparent),color-mix(in srgb,var(--c) 24%,transparent));border-left:0;border-radius:6px;box-shadow:0 0 10px color-mix(in srgb,var(--c) 45%,transparent),inset 0 1px 0 #ffffff30,inset 0 0 0 1px color-mix(in srgb,var(--c) 70%,transparent);cursor:grab}#sections .section.live{background:linear-gradient(180deg,color-mix(in srgb,var(--c) 72%,transparent),color-mix(in srgb,var(--c) 38%,transparent));box-shadow:0 0 16px color-mix(in srgb,var(--c) 80%,transparent),inset 0 1px 0 #ffffff55,inset 0 0 0 1px var(--c)}#sections .section.selected{box-shadow:0 0 12px color-mix(in srgb,var(--c) 60%,transparent),inset 0 0 0 1.5px #fff}#sections .section .sec-start,#sections .section .sec-end{width:8px;left:auto;right:auto;cursor:ew-resize}#sections .section .sec-start{left:0}#sections .section .sec-end{right:0}#sections .section .sec-start::after,#sections .section .sec-end::after{content:'';position:absolute;top:3px;bottom:3px;width:2px;border-radius:1px;background:#fff;opacity:.35;transition:opacity .15s}#sections .section .sec-start::after{left:2px}#sections .section .sec-end::after{right:2px}#sections .section:hover .sec-start::after,#sections .section:hover .sec-end::after{opacity:.8}#sections .section.dragging{cursor:grabbing}#sections .section.dragging[data-drag=start],#sections .section.dragging[data-drag=end]{cursor:ew-resize}#sections .section.snapped{box-shadow:0 0 18px #fff8,inset 0 0 0 1.5px #fff}#sections .section span{left:calc(var(--sidebar,128px) + 8px)}#section-lines i.end{opacity:.55}.sp-len{display:flex;align-items:center;gap:6px;margin:8px 0 2px;font-size:11px;color:#a7a4b1}.sp-len button{min-height:0;padding:4px 10px;border-radius:8px;background:#ffffff0d;border:1px solid #ffffff1f;color:#fff;font-size:11px}.sp-len button:hover{border-color:#ff3b6b}
#section-tip{position:absolute;top:16px;z-index:8;transform:translateX(-50%);padding:2px 7px;border-radius:6px;background:#141317f2;border:1px solid #ffffff33;color:#fff;font-size:10px;font-weight:600;white-space:nowrap;pointer-events:none;box-shadow:0 4px 12px #000a}#section-tip[data-side=start]{transform:translateX(0)}#section-tip[data-side=end]{transform:translateX(-100%)}