@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--accent:#ef4c65;--line:#ffffff14;--muted:#928598;--font:'Space Grotesk',Arial,sans-serif;--mono:'IBM Plex Mono',monospace}*{box-sizing:border-box}body{margin:0;background:#111114;color:#ece8ef;font:13px var(--font)}button,input,select,textarea{font:inherit}button,a,label.file-label{-webkit-tap-highlight-color:transparent}button,.button{cursor:pointer;border:1px solid #ffffff26;background:#211c27;color:#e5dfe9;padding:10px 14px;transition:background .2s,border-color .2s;font-size:11px;white-space:nowrap;text-decoration:none}button:hover,.button:hover{background:#332737;border-color:#8c5869}button:disabled{opacity:.35;cursor:not-allowed}button.primary,.button.primary{background:var(--accent);border-color:var(--accent);color:#fff}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,canvas:focus-visible{outline:2px solid var(--accent);outline-offset:3px}input:not([type=range]):not([type=color]):not([type=checkbox]):not([type=file]),select,textarea{padding:10px 12px;border:1px solid #ffffff20;background:#100e14;color:#ece5ee;border-radius:0;min-width:0}input[type=range]{width:100%;display:block;margin:13px 0 0;accent-color:var(--accent);height:3px}input[type=color]{display:block;width:100%;height:34px;border:1px solid var(--line);background:#141017;padding:3px;margin-top:8px}input[type=checkbox]{accent-color:var(--accent)}textarea{width:100%;resize:vertical;line-height:1.7}select{cursor:pointer}.lab-header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:23px 32px;border-bottom:1px solid var(--line);background:#151218}.lab-word{display:flex;gap:18px;align-items:center;color:inherit;text-decoration:none;font-weight:600;font-size:13px;letter-spacing:2px}.lab-word img{width:58px}.lab-word b{color:var(--accent);font-weight:400}.lab-word small{display:block;color:#dedbe2;font:8px var(--mono);letter-spacing:2px;margin-top:6px}.header-end{display:flex;align-items:center;gap:35px}.version{font:8px var(--mono);letter-spacing:1px;color:#dedbe2}.header-end a{color:#dedbe2;text-decoration:none;font-size:10px}.header-end a span{color:var(--accent);margin-left:12px}.project-bar{padding:15px 32px;background:#17131b;border-bottom:1px solid var(--line);display:flex;gap:10px;align-items:center;flex-wrap:wrap}.compact{display:flex;gap:12px;align-items:center;font:8px var(--mono);letter-spacing:1px;color:#dedbe2}.compact select{max-width:185px;font:11px var(--font)}#project-name{width:190px;font-size:11px}#project-status{font-size:10px;color:#dedbe2;line-height:1.6;flex:1;min-width:120px}.lab-layout{max-width:1780px;margin:auto;display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:32px;padding:30px 32px 60px}.workspace{min-width:0}.preview-top{display:flex;align-items:center;justify-content:space-between;margin:0 0 20px}.eyebrow{font:8px var(--mono);letter-spacing:1.7px;color:#dedbe2}.preview-top h1{font-size:28px;font-weight:500;letter-spacing:-1px;margin:8px 0 0}.preview-top h1 span,.sub-heading h2 span{color:var(--accent)}.audio-state{font:8px var(--mono);letter-spacing:1px;display:flex;align-items:center;gap:8px;color:#dedbe2}.audio-state i{width:5px;height:5px;background:#5c4d64}.audio-state.live{color:#dedbe2}.audio-state.live i{background:var(--accent);box-shadow:0 0 10px #ef4c6566}.stage{position:relative;border:1px solid #ffffff1d;background:#08080e}.stage>canvas{display:block;width:100%;aspect-ratio:16/9;image-rendering:pixelated}.stage-corner{position:absolute;left:14px;bottom:12px;font:7px var(--mono);letter-spacing:1px;color:#dedbe2;pointer-events:none}.stage-corner span{margin-left:14px}.transport{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:16px 0 10px}.file-label{position:relative;overflow:hidden;display:inline-flex;align-items:center}.file-label input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}.file-label:focus-within{outline:2px solid var(--accent);outline-offset:3px}#site-audio{font-size:10px;max-width:190px}#audio-name{font:9px var(--mono);color:#dedbe2;overflow:hidden;text-overflow:ellipsis;max-width:180px}audio{display:block;width:100%;height:36px;margin:3px 0 22px;color-scheme:dark}.meters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;padding:20px 22px;background:#18131d;border:1px solid var(--line)}.meters>div>span{display:flex;justify-content:space-between;gap:8px;font:8px var(--mono);letter-spacing:1px;color:#dedbe2}.meters b{font-weight:400;color:#dedbe2}.meters meter{display:block;width:100%;height:5px;margin:12px 0;background:#302332;border:0}.meters meter::-webkit-meter-bar{background:#302332;border:0}.meters meter::-webkit-meter-optimum-value{background:var(--accent)}.meters small{display:block;color:#dedbe2;font:7px var(--mono);margin-top:9px}.beat-block>i{display:block;margin:10px 0;width:7px;height:7px;background:var(--accent);opacity:.12;box-shadow:0 0 12px #ef4c6533}.export-bar{margin-top:22px;display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding-top:22px;border-top:1px solid var(--line)}.export-bar>div{margin-right:auto}.export-bar p{font-size:10px;color:#dedbe2;margin:5px 0}.export-bar label{font-size:9px;color:#dedbe2}.export-bar select{font-size:10px;display:block;margin-top:6px;padding:7px 9px}.status{color:#dedbe2;font-size:10px;margin:15px 0;line-height:1.7}.status.error{color:#ff99a9}.template-section{margin-top:45px}.sub-heading{display:flex;justify-content:space-between;gap:15px;align-items:center;margin-bottom:20px}.sub-heading h2{font-size:21px;letter-spacing:-.6px;font-weight:400;margin:0}.sub-heading>span{font:7px var(--mono);letter-spacing:1px;color:#dedbe2}.template-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.template-card{display:block;text-align:left;padding:0;overflow:hidden;position:relative;background:#16121c;border:1px solid var(--line)}.template-card.selected{border-color:var(--accent)}.template-card canvas{display:block;width:100%;aspect-ratio:16/9;image-rendering:pixelated}.template-card>div{padding:13px}.template-card h3{font-size:12px;font-weight:500;margin:0 0 7px}.template-card small{font:6px var(--mono);color:#dedbe2;letter-spacing:.4px;white-space:normal;line-height:1.6;display:block}.template-card.selected:after{position:absolute;top:8px;right:8px;content:'';width:5px;height:5px;background:var(--accent)}.template-card:hover{transform:translateY(-2px)}.privacy{color:#dedbe2;font-size:10px;line-height:1.8;margin:25px 0}.inspector{position:sticky;top:20px;align-self:start;background:#18131d;border:1px solid var(--line);max-height:calc(100svh - 40px);overflow:auto;scrollbar-width:thin;scrollbar-color:#4c304e transparent}.inspector-tabs{display:flex;position:sticky;top:0;background:#18131d;z-index:5;border-bottom:1px solid var(--line)}.inspector-tabs>button{flex:1;padding:16px;background:none;border:0;border-bottom:2px solid transparent;font-size:11px;color:#dedbe2}.inspector-tabs>button.active{color:#f3e6ef;border-bottom-color:var(--accent);background:#ef4c6508}.panel{padding:24px}.panel[hidden]{display:none}.panel h2{font-weight:400;font-size:23px;letter-spacing:-.7px;margin:11px 0}.panel-intro{font-size:11px;line-height:1.85;color:#dedbe2;margin:0 0 24px}.control{font-size:10px;color:#dedbe2;display:block;margin:23px 0}.control output{float:right;font:9px var(--mono);color:#dedbe2}.control select,.control textarea{width:100%;display:block;margin-top:10px}.mini-note{font-size:9px;line-height:1.8;color:#dedbe2;margin:26px 0 0}.palette-picker{display:flex;gap:10px;padding-top:10px}.palette-picker button{width:25px;height:25px;padding:0;position:relative;border:2px solid transparent}.palette-picker button.active{border-color:white}.two-controls{display:grid;grid-template-columns:1fr 1fr;gap:20px}.draw-options{display:flex;align-items:center;gap:20px;font-size:9px;color:#dedbe2}.draw-options select{display:block;margin-top:7px;font-size:10px}.colour-label{flex:1}.draw-toolbar{display:flex;align-items:center;gap:5px;margin:18px 0 10px;flex-wrap:wrap}.draw-toolbar button{font-size:9px;padding:7px 9px}.draw-toolbar button.active{border-color:var(--accent);background:#ef4c651a}.draw-toolbar>label{font-size:9px;margin-left:auto;color:#dedbe2}.draw-toolbar input{vertical-align:middle}#pixel-editor{width:100%;height:auto;aspect-ratio:1;display:block;border:1px solid #715378;image-rendering:pixelated;touch-action:none;cursor:crosshair}.draw-bottom{display:flex;gap:5px;flex-wrap:wrap;margin-top:10px}.draw-bottom button,.draw-bottom .button{font-size:8px;padding:7px 9px}.draw-bottom .file-label{margin-left:auto}.swatches{display:flex;gap:8px;margin-top:20px;flex-wrap:wrap}.swatches button{width:19px;height:19px;padding:0;border:1px solid #ffffff30}.check{display:flex;gap:9px;align-items:center;font-size:10px;color:#dedbe2;margin:24px 0}.check input{margin:0}.recording .project-bar{opacity:.65}.recording .stage{border-color:var(--accent)}[hidden]{display:none!important}@media(min-width:1500px){.template-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}@media(max-width:1100px){.lab-layout{grid-template-columns:minmax(0,1fr) 295px;gap:22px;padding:25px 22px 40px}.panel{padding:20px}.meters{gap:12px;padding:18px}.template-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.export-bar>div{width:100%}.transport{gap:6px}.transport button,.transport .button{padding:10px;font-size:10px}#audio-name{max-width:130px}}@media(max-width:800px){.lab-header{padding:20px}.header-end .version{display:none}.lab-word{font-size:10px;letter-spacing:1px;gap:12px}.lab-word img{width:43px}.header-end a{font-size:9px}.project-bar{padding:14px 20px;gap:8px}#project-name{width:160px}.compact select{max-width:150px}.project-bar button{font-size:9px;padding:9px 10px}.lab-layout{grid-template-columns:1fr;padding:25px 20px 40px}.inspector{position:static;max-height:none;grid-row:2}.workspace{display:contents}.preview-top,.stage,.transport,#audio,.meters,.export-bar,#export-status{grid-column:1}.preview-top{grid-row:1;margin:0}.stage{grid-row:2}.transport{grid-row:3;padding:0}.lab-layout{row-gap:16px}#audio{grid-row:4;margin:0}.meters{grid-row:5}.export-bar{grid-row:6;margin:0;padding-top:16px}#export-status{grid-row:7;margin:0}.inspector{grid-row:8}.template-section{grid-row:9;margin-top:15px}.privacy{grid-row:10;margin:0}.template-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.panel{padding:24px}.preview-top h1{font-size:25px}.meters{gap:16px;padding:18px 14px}.meters>div>span{font-size:7px;letter-spacing:0}.meters small{font-size:6px}.template-card small{font-size:6px}#audio-name{max-width:180px}.sub-heading h2{font-size:20px}}

.motif-presets{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:18px 0 8px}.motif-presets button{min-height:44px;border-color:#68404f}.motif-presets button:hover{border-color:#ef4c65;background:#ef4c6518}

.drawing-library{border-top:1px solid #ffffff12;margin-top:18px;padding-top:18px}.drawing-library>button{width:100%;margin-bottom:14px}.control input[type=number],.drawing-library input{width:100%;min-width:0;background:#100f14;border:1px solid #ffffff22;color:#eee;padding:10px}.two-controls[hidden]{display:none}

.peak-controls{min-width:0;margin:22px 0;padding:16px;border:1px solid #ef4c6533;background:#ef4c6505}.peak-controls legend{font:10px var(--mono,monospace);letter-spacing:1px;color:#ef7184;padding:0 6px}.effect-level span{display:flex;justify-content:space-between;font:10px monospace;color:#dedbe2}.effect-level meter{width:100%;height:12px;accent-color:#ef4c65}.effect-level b{color:#ef7184}