:root{--desk:#1b1b1d;--body:#ecebe6;--panel:#e2e0da;--ink:#161616;--dim:#77746d;--line:#cfccc4;--orange:#ff5a1f;--blue:#2d6cdf;--green:#17b26a;--yellow:#ffcf2e;--pink:#ff6fae;--purple:#8a6cff;--mono:ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;--r:14px}*{box-sizing:border-box}html,body{min-height:100%;margin:0}body{background:var(--desk) radial-gradient(#ffffff12 1px, transparent 1px) 0 0 / 18px 18px;color:var(--ink);padding:1.25rem;font-family:system-ui,-apple-system,Helvetica Neue,sans-serif}.hidden{display:none}.device{background:linear-gradient(#f3f2ee, var(--body));border-radius:28px;grid-template:"top top top""session screen source""session tracks source""session bricks source""session editor source"minmax(16rem,1fr)/17rem minmax(0,1fr) 17rem;gap:.75rem;max-width:1500px;min-height:calc(100vh - 2.5rem);margin:0 auto;padding:1rem;display:grid;box-shadow:inset 0 1px #fff,inset 0 -3px #c9c6be,0 30px 60px -20px #000c}.top{grid-area:top}.session{grid-area:session}.screen{grid-area:screen}.tracks{grid-area:tracks}.bricks{grid-area:bricks}.editor{grid-area:editor}.source{grid-area:source}.panel{background:var(--panel);border-radius:var(--r);min-width:0;padding:.7rem;box-shadow:0 1px #fff,inset 0 1px 2px #0002}h2{font:700 .68rem/1 var(--mono);text-transform:uppercase;letter-spacing:.14em;align-items:baseline;gap:.6rem;margin:0 0 .6rem;display:flex}h2:before{content:"";background:var(--orange);border-radius:50%;align-self:center;width:.5rem;height:.5rem}.tracks h2:before{background:var(--blue)}.bricks h2:before{background:var(--yellow)}.editor h2:before{background:var(--green)}.source h2:before{background:var(--pink)}h2 small{letter-spacing:.04em;text-transform:none;color:var(--dim);font-weight:400}button,select{font:inherit;color:inherit;cursor:pointer}.key{font:700 .72rem var(--mono);text-transform:uppercase;letter-spacing:.08em;background:#fbfaf7;border:0;border-radius:10px;padding:.55rem .9rem;transition:transform 60ms;box-shadow:0 2px #bdb9b0,0 3px 6px #0002}.key:active,.brick:active,.clip:active{transform:translateY(2px);box-shadow:0 0 #bdb9b0}.top{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;padding:.2rem .3rem .4rem;display:flex}.brand{align-items:center;gap:.6rem;display:flex}.brand b{letter-spacing:-.04em;text-transform:lowercase;font-size:1.7rem;font-weight:900}.brand b:after{content:".";color:var(--orange)}.model{font:700 .65rem var(--mono);border:1.5px solid var(--ink);border-radius:4px;padding:.1rem .3rem}.sticker{text-transform:uppercase;background:var(--yellow);border-radius:4px;padding:.35rem .5rem;font:800 .7rem/1 system-ui;transform:rotate(-4deg);box-shadow:0 2px #0002}.transport{flex-wrap:wrap;align-items:center;gap:.6rem;display:flex}#play{background:var(--orange);color:#0000;border-radius:50%;width:3.6rem;height:3.6rem;font-size:0;position:relative;box-shadow:0 3px #b33a0e,0 6px 12px #ff5a1f55}#play:before{content:"";border-top:.62rem solid #0000;border-bottom:.62rem solid #0000;border-left:1rem solid #fff;width:0;height:0;margin:auto;position:absolute;inset:0;transform:translate(.15rem)}.live #play:before{background:#fff;border:0;border-radius:2px;width:.95rem;height:.95rem;transform:none}.lcd{color:#9be86a;min-width:20rem;font:.78rem var(--mono);background:#0b0b0b;border-radius:10px;grid-template-columns:1fr auto;gap:.1rem 1rem;padding:.5rem .8rem;display:grid;box-shadow:0 2px #fff,inset 0 2px 6px #000a}.lcd b{color:#fff;white-space:nowrap;text-overflow:ellipsis;grid-column:1/3;font-weight:700;overflow:hidden}#time{font-variant-numeric:tabular-nums}#where{color:var(--orange);text-align:right}.session{flex-direction:column;align-self:start;max-height:calc(100vh - 9rem);display:flex;position:sticky;top:1rem}.clips{gap:.35rem;padding:2px 2px 4px;display:grid;overflow:auto}.clip{--c:var(--orange);text-align:left;border:0;border-left:6px solid var(--c);background:#fbfaf7;border-radius:8px;grid-template-columns:1.4rem 1fr;align-items:start;gap:0 .4rem;padding:.45rem .5rem;display:grid;box-shadow:0 2px #c4c0b7}.clip .tri{background:var(--c);border-radius:4px;grid-row:1/3;width:1.4rem;height:1.4rem;position:relative}.clip .tri:before{content:"";border-top:.3rem solid #0000;border-bottom:.3rem solid #0000;border-left:.45rem solid #fff;width:0;height:0;margin:auto;position:absolute;inset:0;transform:translate(1px)}.clip b{font-size:.85rem}.clip small{font:.66rem/1.35 var(--mono);color:var(--dim);-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.clip.on{background:var(--c);color:#111;box-shadow:0 2px #0004}.clip.on small{color:#111c}.clip.on .tri{background:#111}.live .clip.on .tri{animation:.5s steps(2,end) infinite blink}@keyframes blink{50%{background:#fff}}.screen{border-radius:var(--r);background:#0b0b0b;padding:.5rem;box-shadow:0 2px #fff,inset 0 3px 10px #000b}#roll{border-radius:8px;width:100%;height:240px;display:block}.strip{padding:.4rem .2rem .1rem}input[type=range]{appearance:none;background:0 0;width:100%;height:1.2rem;margin:0}input[type=range]::-webkit-slider-runnable-track{background:#3a3a3a;border-radius:2px;height:4px}input[type=range]::-moz-range-track{background:#3a3a3a;border-radius:2px;height:4px}input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--orange);border:2px solid #fff;border-radius:50%;width:14px;height:14px;margin-top:-5px}input[type=range]::-moz-range-thumb{background:var(--orange);border:2px solid #fff;border-radius:50%;width:12px;height:12px}#voices{flex-wrap:wrap;gap:.35rem;display:flex}#voices button{--c:#888;font:700 .72rem var(--mono);background:#fbfaf7;border:0;border-radius:6px;align-items:center;gap:.4rem;padding:.35rem .6rem .35rem .4rem;display:inline-flex;box-shadow:0 2px #c4c0b7}#voices i{border-radius:3px;width:.9rem;height:.9rem;box-shadow:0 0 0 2px #0001}#voices small{color:var(--dim);font-weight:400}#voices button[aria-pressed=false]{opacity:.45;box-shadow:none;background:0 0;text-decoration:line-through}#voices button.fresh{outline:2px solid var(--yellow);animation:.6s ease-out pop}@keyframes pop{30%{transform:scale(1.15)}}#bricks{gap:.5rem;display:grid}.shelf{grid-template-columns:4.5rem 1fr;align-items:start;gap:.4rem;display:grid}.shelf>div{flex-wrap:wrap;gap:.45rem;display:flex}.shelf>span{font:700 .62rem var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--dim);padding-top:.5rem}.brick{--c:var(--orange);--d:#b33a0e;background:linear-gradient(#ffffff40, transparent 50%) var(--c);color:#111;box-shadow:0 3px 0 var(--d), 0 4px 8px #0003;cursor:grab;text-align:left;border:0;border-radius:6px;gap:.25rem;min-width:5.5rem;padding:.35rem .55rem .4rem;font:800 .72rem system-ui;display:grid}.brick[data-shelf=Bass]{--c:#6ea0ff;--d:#2d56b0}.brick[data-shelf=Akkorde]{--c:#4fd39a;--d:#148a52}.brick[data-shelf=Melodie]{--c:#ff8fc1;--d:#c2457e}.brick .steps{grid-template-columns:repeat(16,1fr);gap:1px;height:.45rem;display:grid}.brick .steps i{background:#0002;border-radius:1px}.brick .steps i.x{background:#111}.brick .steps i.h{background:#1118}.brick:hover{filter:brightness(1.06)}.dragging .screen,.dragging .editor{outline:3px dashed var(--yellow);outline-offset:2px}.editor{flex-direction:column;min-height:18rem;display:flex}#score{resize:vertical;width:100%;min-height:14rem;color:var(--ink);font:12.5px/1.5 var(--mono);tab-size:4;white-space:pre;background:#fbfaf7;border:0;border-radius:8px;outline:none;flex:1;padding:.7rem;box-shadow:inset 0 1px 3px #0002}#score:focus{box-shadow:0 0 0 2px var(--green), 0 1px 3px #0002 inset}#errors{color:#d6341a;min-height:1.4em;font:.75rem var(--mono);white-space:pre-wrap;margin:.5rem 0 0}#errors:empty:before{content:attr(data-ok);color:var(--green)}.source{flex-direction:column;align-self:start;gap:.8rem;display:flex}.pads{grid-template-columns:repeat(3,1fr);gap:.4rem;display:grid}.pad{aspect-ratio:1;font:700 .6rem var(--mono);text-transform:uppercase;letter-spacing:.04em;background:#fbfaf7;border:0;border-radius:10px;place-content:center;gap:.2rem;display:grid;box-shadow:0 3px #bdb9b0}.pad span{font-size:1.35rem}.pad.on{background:var(--ink);color:#fff;box-shadow:0 3px 0 #000, 0 0 0 2px var(--orange) inset}.fader{font:700 .65rem var(--mono);text-transform:uppercase;letter-spacing:.1em;grid-template-columns:1fr auto;gap:.3rem;display:grid}.fader input{grid-area:2/1/auto/3}.fader input::-webkit-slider-runnable-track{background:linear-gradient(90deg, var(--orange), var(--yellow), #cfccc4);border-radius:4px;height:8px}.fader input::-webkit-slider-thumb{background:var(--ink);border-radius:5px;width:20px;height:20px;margin-top:-6px}.fader input:disabled{opacity:.35}.toggle{font:700 .7rem var(--mono);text-transform:uppercase;letter-spacing:.08em;cursor:pointer;align-items:center;gap:.5rem;display:flex}.toggle input{appearance:none;cursor:pointer;background:#c9c6be;border-radius:1rem;width:2.3rem;height:1.3rem;margin:0;position:relative}.toggle input:after{content:"";background:#fff;border-radius:50%;width:calc(1.3rem - 6px);height:calc(1.3rem - 6px);transition:left .15s;position:absolute;top:3px;left:3px}.toggle input:checked{background:var(--green)}.toggle input:checked:after{left:calc(100% - 1.3rem + 3px)}.guide{border-top:1px solid var(--line);padding-top:.6rem;font-size:.8rem;line-height:1.45}.guide summary{cursor:pointer;font:700 .68rem var(--mono);text-transform:uppercase;letter-spacing:.14em}.guide a{color:var(--blue)}code{font-family:var(--mono);background:#fff;border-radius:3px;padding:0 .2rem}#unblock{background:var(--orange);color:#fff;border:0;border-radius:14px;width:16rem;height:5rem;margin:auto;font:800 1.2rem system-ui;position:fixed;inset:0;box-shadow:0 0 0 100vmax #000a}@media (width<=1100px){.device{grid-template-rows:none;grid-template-columns:15rem minmax(0,1fr);grid-template-areas:"top top""screen screen""session tracks""session bricks""session editor""source source"}.session{position:static}}@media (width<=720px){body{padding:.5rem}.device{border-radius:20px;grid-template-columns:minmax(0,1fr);grid-template-areas:"top""screen""session""tracks""bricks""editor""source";padding:.6rem}.session{max-height:18rem}.lcd{flex:1;min-width:0}}