:root{--font-display:"Ubuntu","Ubuntu Mono",ui-monospace,Menlo,monospace;--font-ui:"Ubuntu","Ubuntu Mono",ui-monospace,Menlo,monospace;--font-mono:"Ubuntu","Ubuntu Mono",ui-monospace,Menlo,monospace;--font-num:"Ubuntu","Ubuntu Mono",ui-monospace,Menlo,monospace;--fs-label:10px;--ls-caps:.14em}:root{--paper:#eee;--ink:#111;--ink-soft:#111111e6;--ink-faint:#11111138;--hair:#11111124;--panel:#eeeeeeeb;--line-hair:1px;--line:1.25px;--line-accent:2px;--glass:#eeeeeeeb;--glass-strong:#eeeeeef7;--glass-line:#111;--shadow:none;--glow:#111}*{box-sizing:border-box}html,body{height:100%;margin:0}body{background:var(--paper);color:var(--ink);font:400 11px/1.4 var(--font-mono);overflow:hidden;-webkit-font-smoothing:antialiased}button{font:inherit;color:inherit;cursor:pointer;background:0 0;border:0;border-radius:0;padding:0}button:disabled{opacity:.3;cursor:default}input{font:inherit;color:inherit;border-radius:0}:focus-visible{outline:1px dashed var(--ink);outline-offset:3px}.visually-hidden{position:absolute!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important}.instrument__title,.trail__title,.recorder__title{display:flex;white-space:nowrap;font:500 10px/1.2 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink);align-items: center;gap:7px;margin:0}.instrument__title:after,.trail__title:after,.recorder__title:after{content:"";background:var(--ink-faint);flex:1;min-width:6px;height:1px}.sign{display:inline-block;overflow:visible;vertical-align:-1px;flex:none;width:10px;height:10px}.sign__ink{fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round}.sign__ink .dot{fill:currentColor;stroke:none}.sign__halo{fill:none;stroke:var(--paper);stroke-width:4.4;stroke-linecap:round}.sign__halo .dot{fill:var(--paper);stroke:var(--paper);stroke-width:3}body:after{content:"Лучше всего — на экране от 1024 px";display:none;position:fixed;z-index:50;pointer-events:none;background:var(--paper);color:var(--ink);border:1px solid var(--ink);font:500 10px var(--font-mono);letter-spacing:.08em;white-space:nowrap;padding:4px 12px;top:8px;left:50%;transform:translate(-50%)}@media (max-width:1023px){body:after{display:block}}:root{--instrument-w:1320px;--instrument-h:270px;--k:1}.stage{height:100vh;display:grid;grid-template-rows:minmax(0,1fr)auto auto;overflow:hidden;background:var(--paper);height:100dvh}.stage__visual{position:relative;overflow:hidden;border-bottom:1px solid var(--ink);min-height:40vh}.stage__visual>.world{position:absolute;z-index:0;inset:0}.stage__dock{position:relative;width:calc(var(--instrument-w)*var(--k));height:calc(var(--instrument-h)*var(--k));margin:6px auto 0}.stage__dock>.instrument{position:absolute;transform-origin:0 0;transform:scale(var(--k));top:0;left:0}.world{position:fixed;z-index:0;pointer-events:none;overflow:hidden;background:var(--paper,#eee);inset:0}.world canvas{display:block;position:absolute;inset:0;width:100%!important;height:100%!important}.hud{--halo:0 0 2px var(--paper),0 0 6px var(--paper),0 0 12px var(--paper),0 0 22px var(--paper);position:absolute;z-index:5;color:var(--ink);text-shadow:var(--halo);pointer-events:none;width:40%;max-width:40%;top:18px;left:2.5%}.hud>*{margin:0}.hud__overline{font:500 10px/1.5 var(--font-mono);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--ink-soft);max-width:34em}.hud__place{font:500 clamp(28px,min(4.2vw,8vh),64px)/1 var(--font-display);letter-spacing:-.005em;overflow-wrap:anywhere;margin-top:10px}.hud__meta{font:500 11px/1 var(--font-mono);letter-spacing:.12em;white-space:nowrap;margin-top:12px}.hud__hint{display:inline-block;border:1px solid var(--ink);background:var(--panel);text-shadow:none;font:500 10px/1.2 var(--font-mono);letter-spacing:var(--ls-caps);color:var(--ink);animation:2.4s ease-in-out infinite hud-pulse;margin-top:14px;padding:4px 8px}.hud__hint[hidden]{display:none}@keyframes hud-pulse{0%,to{opacity:1}50%{opacity:.4}}@media (prefers-reduced-motion:reduce){.hud__hint{animation:none}}.instrument{width:var(--instrument-w);height:var(--instrument-h);display:flex;background:var(--paper);color:var(--ink);border:1px solid var(--ink);box-shadow:inset 0 0 0 3px var(--paper),inset 0 0 0 4px var(--ink-faint);flex-direction:column;gap:6px;min-width:0;padding:10px}.instrument__row{display:flex;flex:1 1 0;gap:8px;min-width:0;min-height:0}.instrument__module{position:relative;display:flex;background:var(--paper);border:1px solid var(--ink);box-shadow:none;border-radius:0;flex-direction:column;gap:8px;min-width:0;padding:10px 12px 11px}.instrument__title .sign{vertical-align:0;width:11px;height:11px}.instrument__module--voice{flex:0 0 218px}.instrument__module--trail{flex:1 1 0}.instrument__module--mixer,.instrument__module--recorder{flex:0 0 218px}.instrument__sliders{display:flex;flex-direction:column;flex:1;justify-content:space-between;gap:6px;min-width:0}.instrument__glyph{position:absolute;background:var(--paper);pointer-events:none;padding:0 5px;line-height:0;top:-8px;left:12px}.instrument__glyph svg{fill:none;stroke:var(--ink);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;width:30px;height:14px}.instrument__module--b .instrument__glyph svg path:last-child{stroke-width:2.2}.wave-switch{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}.wave-switch__item{display:flex;color:var(--ink);background:0 0;border:1px solid #0000;border-radius:0;flex-direction:column;align-items: center;gap:5px;min-width:0;padding:7px 1px 6px}.wave-switch__item:hover{border-color:var(--ink)}.wave-switch__item.is-on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}.wave-switch__icon{overflow:visible;fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round;width:30px;height:22px}.wave-switch__name{font:500 7.5px var(--font-mono);letter-spacing:0;text-transform:uppercase;overflow:hidden;text-overflow:clip;white-space:nowrap;max-width:100%}.wave-switch__item:focus-visible{outline-offset:2px}.fader{--v:0;--thumb:14px;display:block;color:var(--ink)}.fader__track{position:relative;cursor:pointer;touch-action:none;outline:none;width:30px;height:100%}.fader__track:focus-visible{outline:1px dashed var(--ink);outline-offset:2px}.fader.is-drag .fader__track{cursor:grabbing}.fader__rail{position:absolute;left:50%;top:calc(var(--thumb)/2);bottom:calc(var(--thumb)/2);background:var(--ink-faint);width:1px;margin-left:-.5px}.fader__fill{position:absolute;height:calc(100%*var(--v));background:var(--ink);width:2px;margin-left:-1px;bottom:0;left:50%}.fader--b .fader__fill{background:linear-gradient(var(--ink),var(--ink))left/1px 100% no-repeat,linear-gradient(var(--ink),var(--ink))right/1px 100% no-repeat;width:5px;margin-left:-2.5px}.fader--p .fader__fill{background:radial-gradient(circle at 50% 50%,var(--ink).95px,transparent 1.25px)center bottom/4px 4px repeat-y;width:4px;margin-left:-2px}.fader__ticks{position:absolute;left:0;right:0;top:calc(var(--thumb)/2);bottom:calc(var(--thumb)/2);display:flex;pointer-events:none;flex-direction:column;justify-content:space-between}.fader__ticks i{display:block;background:linear-gradient(90deg,transparent 0 calc(100% - 3px),var(--ink-soft)calc(100% - 3px));width:100%;height:1px;margin:0 auto}.fader__thumb{position:absolute;width:var(--thumb);height:var(--thumb);margin-left:calc(var(--thumb)/-2);left:50%;bottom:calc((100% - var(--thumb))*var(--v));background:var(--paper);border:1px solid var(--ink);pointer-events:none}.fader__thumb:after{content:"";position:absolute;background:var(--ink);height:1px;margin-top:-.5px;top:50%;left:2px;right:2px}.fader__track:hover .fader__thumb,.fader.is-drag .fader__thumb{background:var(--ink)}.fader__track:hover .fader__thumb:after,.fader.is-drag .fader__thumb:after{background:var(--paper)}.meter{display:flex;flex-direction:column;justify-content:space-between;width:6px;height:100%}.meter__cell{display:block;border:1px solid var(--ink-soft);background:0 0;flex:none;width:6px;height:6px}.meter__cell.is-on{background:var(--ink);border-color:var(--ink)}.mixer__strips{display:grid;grid-template-columns:repeat(4,1fr);flex:1;min-height:0}.mixer__strip{display:flex;flex-direction:column;align-items: center;gap:8px;min-width:0;padding:0 2px}.mixer__strip>.slider{align-self:stretch}.mixer__strip+.mixer__strip{border-left:1px solid var(--hair)}.mixer__body{display:flex;flex:1;justify-content:center;align-items:stretch;gap:2px;min-height:0}.mixer__body .fader{height:100%}.mixer__body .meter{height:auto;margin:7px 0}.mixer__name{text-align:center;font:500 8px/1.2 var(--font-mono);letter-spacing:0;white-space:nowrap;max-width:100%}.slider{--v:0;--lo:0;--hi:0;--thumb:14px;--fill:4px;--rail:2px;display:block;color:var(--ink);min-width:0}.slider--compact{--thumb:12px;--fill:3px;--rail:2px}.slider__head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;line-height:1}.slider__label{display:inline-flex;font:500 10px var(--font-mono);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--ink-soft);white-space:nowrap;align-items: center;gap:6px}.slider__value{font:400 10.5px var(--font-num);color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}.slider__track{position:relative;cursor:pointer;touch-action:none;outline:none;height:22px;margin-top:1px}.slider__rail{position:absolute;left:calc(var(--thumb)/2);right:calc(var(--thumb)/2);height:var(--rail);margin-top:calc(var(--rail)/-2);background:var(--ink-faint);border-radius:2px;top:50%}.slider__fill{position:absolute;height:var(--fill);margin-top:calc(var(--fill)/-2);background:var(--ink);top:50%;left:calc(var(--thumb)/2 + (100% - var(--thumb))*var(--lo));width:calc((100% - var(--thumb))*(var(--hi) - var(--lo)));border-radius:2px}.slider--b .slider__fill{background:linear-gradient(var(--ink),var(--ink))top/100% 1.5px no-repeat,linear-gradient(var(--ink),var(--ink))bottom/100% 1.5px no-repeat;border-radius:0}.slider--p .slider__fill{background:repeating-linear-gradient(90deg,var(--ink)0 3px,transparent 3px 5px);border-radius:0}.slider[data-bipolar] .slider__rail:after{content:"";position:absolute;height:calc(var(--rail) + 8px);background:var(--ink-faint);width:1px;top:-4px;left:50%}.slider__thumb{position:absolute;width:var(--thumb);height:var(--thumb);margin-top:calc(var(--thumb)/-2);top:50%;left:calc((100% - var(--thumb))*var(--v));background:var(--ink);box-sizing:border-box;border-radius:50%;transition:box-shadow .12s}.slider__track:hover .slider__thumb{box-shadow:0 0 0 3px var(--ink-faint)}.slider.is-drag .slider__thumb{box-shadow:0 0 0 4px var(--ink-faint)}.slider.is-drag .slider__track{cursor:grabbing}.slider__track:focus-visible .slider__thumb{box-shadow:0 0 0 2px var(--paper),0 0 0 3px var(--ink)}.slider--compact .slider__head{flex-direction:column;align-items: center;gap:3px}.slider--compact .slider__label{letter-spacing:.04em;font-size:9px}.slider--compact .slider__value{font-size:9.5px}.slider--compact .slider__track{height:18px}.slider--b .slider__thumb{background:var(--paper);border:2px solid var(--ink)}.trail{padding-bottom:10px}.trail__body{display:grid;--lab:58px;grid-template-columns:var(--lab)minmax(0,1fr)var(--lab);grid-template-rows:minmax(0,1fr)auto;flex:1;gap:0 12px;min-height:0}.trail__labels{display:grid;grid-template-rows:14px 2fr repeat(4,1fr)}.trail__label{display:flex;font:500 10px var(--font-mono);letter-spacing:.06em;color:var(--ink);white-space:nowrap;align-items: center}.trail__field{position:relative;display:grid;grid-template-rows:14px 2fr repeat(4,1fr);min-width:0}.trail__nums,.trail__row,.trail__melody{display:grid;grid-template-columns:repeat(16,1fr)}.trail__row,.trail__melody{border-top:1px solid var(--hair)}.trail__num{text-align:center;font:400 8.5px/14px var(--font-num);letter-spacing:-.02em;color:var(--ink-soft)}.trail__num.is-beat{color:var(--ink)}.trail__num.is-now{outline:1px solid var(--ink);outline-offset:-1px;color:var(--ink);font-weight:500}.trail__now{position:absolute;pointer-events:none;border-left:1px solid var(--ink);border-right:1px solid var(--ink);width:6.25%;top:0;bottom:0;left:0}.trail__now[hidden]{display:none}.trail__cell{position:relative;display:grid;color:var(--ink);background:0 0;border:0;border-radius:0;place-items: center;min-width:0;padding:0}.trail__cell:before{content:"";background:var(--ink);opacity:.22;width:1px;height:6px}.trail__cell.is-beat:before{opacity:.4;height:10px}.trail__mark{position:absolute;fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round;opacity:0;width:15px;height:15px}.trail__cell:hover:before{opacity:.9}.trail__cell.is-on:before{opacity:0}.trail__cell.is-on .trail__mark{opacity:1}.trail__cell.is-on.is-now .trail__mark{transform:scale(1.3)}.trail__cell:focus-visible{outline-offset:-3px}.trail__tools{grid-column:2;display:flex;justify-content:space-between;align-items: center;gap:6px;padding-top:10px}.trail__tool{border:1px solid var(--ink);color:var(--ink);font:500 10px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;background:0 0;border-radius:0;height:22px;padding:0 10px}.trail__tool:hover,.trail__tool:active{background:var(--ink);color:var(--paper)}.trail__tool--icon{display:grid;place-items: center;width:26px;padding:0}.trail__tool--icon svg{fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round;width:11px;height:11px}.trail__label--melody{font-weight:500}.trail__melody{position:relative;cursor:crosshair;touch-action:none;user-select:none;border-bottom:1px solid var(--hair)}.trail__line{position:absolute;pointer-events:none;overflow:visible;width:100%;height:100%;inset:0}.trail__line path{fill:none;stroke:var(--ink);stroke-width:1;opacity:.4;vector-effect:non-scaling-stroke;stroke-linejoin:round}.trail__mcell{position:relative;color:var(--ink);cursor:inherit;background:0 0;border:0;border-radius:0;min-width:0;padding:0}.trail__mcell:before{content:"";position:absolute;background:var(--ink);opacity:.07;width:1px;top:8%;bottom:8%;left:50%}.trail__mcell.is-beat:before{opacity:.14}.trail__mcell:after{content:"";position:absolute;background:var(--ink);opacity:.3;width:7px;height:1px;margin-left:-3.5px;bottom:8%;left:50%}.trail__mcell.is-on:after{display:none}.trail__dash{position:absolute;left:50%;top:var(--top,50%);background:var(--ink);opacity:0;width:15px;height:2px;margin:-1px 0 0 -7.5px}.trail__mcell.is-on .trail__dash{opacity:1}.trail__mcell:hover:before{opacity:.35}.trail__mcell.is-now:before{opacity:0}.trail__mcell.is-now.is-on .trail__dash{height:4px;margin-top:-2px}.trail__melody.is-drawing .trail__mcell:before{opacity:.2}.trail__mcell:focus-visible{outline-offset:-3px}.places{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}.places__item{display:flex;box-sizing:border-box;border:1px solid var(--ink-faint);color:var(--ink);text-align:left;font:500 10px var(--font-mono);letter-spacing:var(--ls-caps);white-space:nowrap;align-items: center;gap:6px;min-width:0;height:22px;padding:0 6px}.places__item:hover{border-color:var(--ink)}.places__item.is-on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}.recorder{gap:8px}.recorder__main{display:grid;grid-template-columns:46px minmax(0,1fr);align-items: center;gap:10px}.recorder__rec{display:grid;flex:none;place-items: center;width:46px;height:46px}.recorder__rec svg{overflow:visible;width:46px;height:46px}.recorder__ring{transform-box:fill-box;transform-origin:center;fill:none;stroke:var(--ink);stroke-width:1.25;transform-origin:24px 24px}.recorder__core{fill:none;stroke:var(--ink);stroke-width:1.25;transition:fill .2s}.recorder__rec:hover .recorder__core{fill:var(--ink-faint)}.recorder__rec.is-on .recorder__core{fill:var(--ink)}.recorder__rec.is-on .recorder__ring{animation:2.8s ease-in-out infinite rec-ring}@keyframes rec-ring{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.08);opacity:.3}}.recorder__time{font:500 26px/1 var(--font-num);letter-spacing:.01em;font-variant-numeric:tabular-nums}.recorder__transport{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;height:30px}.recorder__btn{display:grid;border:1px solid var(--ink);color:var(--ink);place-items: center}.recorder__btn svg{width:14px;height:14px}.recorder__btn:hover:not(:disabled),.recorder__btn.is-on{background:var(--ink);color:var(--paper)}.recorder__btn:disabled{border-color:var(--ink-faint)}.recorder__deck{display:flex;flex-direction:column;flex:1 1 0;justify-content:flex-end;gap:8px;min-height:0}.recorder__deck .places{display:grid}.recorder__tempo{display:grid;grid-template-columns:22px minmax(0,1fr)22px;color:var(--ink);align-items: center;height:22px}.recorder__step{border:1px solid var(--ink);display:grid;font:500 14px/1 var(--font-num);color:var(--ink);place-items: center;width:22px;height:22px}.recorder__step:hover{background:var(--ink);color:var(--paper)}.recorder__bpm{text-align:center;font:500 13px var(--font-num);font-variant-numeric:tabular-nums}@media (prefers-reduced-motion:reduce){.recorder__rec.is-on .recorder__ring{animation:none}}