:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--paper:#fbfaf2;--paper-warm:#f5f1e4;--ink:#202020;--ink-rgb:32, 32, 32;--soft-ink:#1d1d1d7a;--surface:#fff;--surface-sunk:#fdfcf6;--grid-strong:#20202006;--grid-soft-x:#20202005;--grid-soft-y:#20202004;--track-line:#1d1d1d1c;--shadow-strong:#2020206b;--shadow-soft:#2020203d;--shadow-inset:#20202029;--shadow-light:#20202052;--shadow-faint:#2020201f;--clip-overlay:#ffffff2e;--clip-filter:none;--grain-opacity:.35}:root[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--paper:#1a1a20;--paper-warm:#20202a;--ink:#ece4cc;--ink-rgb:236, 228, 204;--soft-ink:#ece4cc8c;--surface:#2a2a34;--surface-sunk:#23232c;--grid-strong:#ece4cc09;--grid-soft-x:#ece4cc06;--grid-soft-y:#ece4cc05;--track-line:#ece4cc24;--shadow-strong:#0000008c;--shadow-soft:#0006;--shadow-inset:#00000059;--shadow-light:#00000080;--shadow-faint:#0000004d;--clip-overlay:#00000038;--clip-filter:saturate(.75) brightness(.78);--grain-opacity:.5}*{box-sizing:border-box}html,body{background:radial-gradient(circle at 18% 12%, var(--grid-strong), transparent 18rem), linear-gradient(90deg, var(--grid-soft-x) 1px, transparent 1px) 0 0 / 17px 17px, linear-gradient(0deg, var(--grid-soft-y) 1px, transparent 1px) 0 0 / 19px 19px, var(--paper);min-height:100%;color:var(--ink);margin:0;font-family:Marker Felt,Comic Sans MS,Bradley Hand,Arial,Helvetica,sans-serif;transition:background-color .4s,color .4s;overflow:hidden}body:before{content:"";pointer-events:none;z-index:1;opacity:var(--grain-opacity);mix-blend-mode:multiply;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");position:fixed;inset:0}:root[data-theme=dark] body:before{mix-blend-mode:screen}button,input{font:inherit}button{color:inherit}.synth-shell{z-index:2;grid-template-rows:minmax(0,1fr) auto;height:100vh;min-height:100vh;padding:0;display:grid;position:relative}.workspace{min-height:0;box-shadow:none;background:0 0;border:0;border-radius:0;position:relative;overflow:hidden}.center-line{z-index:5;background:var(--ink);width:2.5px;box-shadow:1.5px 0 0 rgba(var(--ink-rgb), .2), -1px 0 0 rgba(var(--ink-rgb), .16);pointer-events:none;position:absolute;top:-4px;bottom:-5px;left:50%;transform:translate(-50%)rotate(-.25deg)}.tracks{grid-template-rows:repeat(16,minmax(36px,1fr));height:100%;display:grid}.track-row{border-bottom:0;min-height:36px;position:relative}.track-row:after{content:"";background:var(--ink);transform-origin:50%;opacity:.92;border-radius:999px;height:3px;position:absolute;bottom:-2px;left:-4px;right:-5px;transform:rotate(.05deg)}.track-row:nth-child(2n):after{left:-7px;right:-2px;transform:rotate(-.08deg)}.track-row:nth-child(3n):after{height:2.5px;transform:rotate(.14deg)}.track-row:nth-child(5n):after{left:-2px;right:-8px;transform:rotate(-.16deg)}.track-line{background:var(--track-line);pointer-events:none;height:1px;position:absolute;bottom:50%;left:0;right:0;transform:rotate(-.06deg)}.clip{z-index:3;border:2.5px solid var(--ink);background:var(--clip);cursor:crosshair;min-width:44px;box-shadow:1px 1px 0 var(--shadow-strong), 2.5px 2.5px 0 var(--shadow-faint), -1px -1px 0 var(--shadow-inset) inset;filter:var(--clip-filter);border-radius:18px 15px 17px 20px/16px 20px 15px 18px;transition:box-shadow .18s,transform .18s,filter .4s;position:absolute;top:12%;bottom:12%;overflow:hidden;transform:rotate(-.25deg)}.clip:hover{box-shadow:1.5px 1.5px 0 var(--shadow-strong), 3.5px 3.5px 0 var(--shadow-faint), -1px -1px 0 var(--shadow-inset) inset}.clip.selected{outline:2px dashed rgba(var(--ink-rgb), .7);outline-offset:4px}.clip:nth-child(2n){border-radius:15px 20px 18px 14px/18px 16px 20px 15px;transform:rotate(.2deg)}.clip:nth-child(3n){border-radius:20px 14px 16px 19px/15px 19px 17px 21px;transform:rotate(-.12deg)}.clip:before{content:"";background:var(--clip-overlay);pointer-events:none;position:absolute;inset:0}.resize-handle{z-index:4;cursor:ew-resize;width:16px;position:absolute;top:0;bottom:0}.resize-handle.left{left:0}.resize-handle.right{right:0}.resize-handle:after{content:"";background:rgba(var(--ink-rgb), .24);border-radius:999px;width:2px;position:absolute;top:24%;bottom:24%}.resize-handle.left:after{left:5px}.resize-handle.right:after{right:5px}.curve{pointer-events:none;width:100%;height:calc(100% - 6px);position:absolute;inset:3px 4px}.curve path{fill:none;stroke:var(--ink);stroke-linecap:round;stroke-linejoin:round;stroke-width:2.9px;vector-effect:non-scaling-stroke;filter:drop-shadow(.8px .5px 0 rgba(var(--ink-rgb), .18))}.playbar{border:0;border-top:3px solid var(--ink);min-height:100px;box-shadow:none;background:0 0;border-radius:0;grid-template-columns:minmax(190px,.9fr) auto minmax(130px,.6fr) minmax(260px,1.35fr) minmax(250px,1fr) auto;align-items:center;gap:20px;padding:18px 28px;transition:border-color .4s;display:grid}.song-actions{justify-self:start;align-items:center;gap:14px;min-width:0;display:flex}.save-button{cursor:pointer;background:0 0;border:0;align-items:center;gap:8px;font-size:16px;transition:transform .18s;display:inline-flex;transform:rotate(-1.2deg)}.save-button:hover{transform:rotate(-1.2deg)translateY(-1px)}.transport{justify-content:center;align-items:center;gap:16px;display:flex}.icon-button,.play-button{border:3px solid var(--ink);cursor:pointer;box-shadow:1px 1px 0 var(--shadow-light), -1px -1px 0 var(--shadow-faint) inset;background:0 0;border-radius:50%;justify-content:center;align-items:center;transition:transform .16s,background-color .2s,color .2s,box-shadow .18s;display:inline-flex}.icon-button:hover,.play-button:hover{box-shadow:1.5px 1.5px 0 var(--shadow-light), 3px 3px 0 var(--shadow-faint), -1px -1px 0 var(--shadow-faint) inset}.icon-button:active,.play-button:active{box-shadow:.5px .5px 0 var(--shadow-light), -1px -1px 0 var(--shadow-faint) inset;transform:translate(1px,1px)rotate(-2deg)}.icon-button{border-radius:48% 52% 45% 55%/56% 44% 52% 48%;width:42px;height:42px;transform:rotate(-2deg)}.icon-button:nth-child(2n){transform:rotate(2deg)}.icon-button:nth-child(2n):active{transform:translate(1px,1px)rotate(2deg)}.icon-button.active{background:var(--ink);color:var(--paper)}.play-button{background:var(--surface);border-radius:51% 49% 54% 46%/44% 57% 43% 56%;width:62px;height:62px;transform:rotate(1deg)}.play-button:active{transform:translate(1px,1px)rotate(1deg)}.bar-control,.effects label{gap:6px;min-width:0;display:grid}.bar-control span,.effects span{color:var(--soft-ink);letter-spacing:.02em;font-size:12px}.effects{grid-template-columns:repeat(3,minmax(56px,1fr));gap:12px;display:grid}.scrub-control{cursor:pointer;align-items:center;min-width:0;height:28px;display:flex}.scrub-line{border:2.5px solid var(--ink);background:var(--surface-sunk);width:100%;height:10px;box-shadow:.8px .8px 0 var(--shadow-soft);border-radius:7px 9px 6px 8px/8px 6px 9px 7px;position:relative}.scrub-line span{border:2.5px solid var(--ink);background:var(--ink);border-radius:49% 51% 45% 55%/55% 44% 56% 45%;width:18px;height:18px;transition:transform .12s;position:absolute;top:50%;transform:translate(-50%,-50%)rotate(4deg)}.scrub-line span:hover{transform:translate(-50%,-50%)rotate(4deg)scale(1.08)}input[type=range]{width:100%;accent-color:var(--ink);appearance:none;background:0 0;height:20px}input[type=range]::-webkit-slider-runnable-track{border:2.5px solid var(--ink);background:var(--surface-sunk);height:8px;box-shadow:.8px .8px 0 var(--shadow-soft);border-radius:7px 9px 6px 8px/8px 6px 9px 7px}input[type=range]::-webkit-slider-thumb{appearance:none;border:2.5px solid var(--ink);background:var(--ink);cursor:pointer;border-radius:46% 54% 52% 48%/53% 45% 55% 47%;width:19px;height:19px;margin-top:-7px;transition:transform .12s}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.1)}input[type=range]::-moz-range-track{border:2.5px solid var(--ink);background:var(--surface-sunk);border-radius:8px;height:8px}input[type=range]::-moz-range-thumb{border:2.5px solid var(--ink);background:var(--ink);cursor:pointer;border-radius:46% 54% 52% 48%/53% 45% 55% 47%;width:17px;height:17px}.playbar-end{justify-self:end;align-items:center;gap:14px;display:inline-flex}.theme-toggle{border:2.5px solid var(--ink);width:38px;height:38px;color:var(--ink);cursor:pointer;box-shadow:1px 1px 0 var(--shadow-light), -1px -1px 0 var(--shadow-faint) inset;background:0 0;border-radius:49% 51% 46% 54%/54% 46% 53% 47%;justify-content:center;align-items:center;padding:0;transition:transform .18s,background-color .25s,color .25s,box-shadow .18s;display:inline-flex;transform:rotate(-3deg)}.theme-toggle:hover{box-shadow:1.5px 1.5px 0 var(--shadow-light), 3px 3px 0 var(--shadow-faint), -1px -1px 0 var(--shadow-faint) inset;transform:rotate(-3deg)translateY(-1px)}.theme-toggle:active{box-shadow:.5px .5px 0 var(--shadow-light), -1px -1px 0 var(--shadow-faint) inset;transform:translate(1px,1px)rotate(-3deg)}.modal-backdrop{z-index:20;background:#00000038;place-items:center;padding:24px;display:grid;position:fixed;inset:0}.song-modal{border:3px solid var(--ink);background:var(--paper);width:min(520px,100%);max-height:min(680px,100vh - 48px);box-shadow:4px 4px 0 var(--shadow-light), -1px -1px 0 var(--shadow-faint) inset;border-radius:18px 15px 17px 20px/16px 20px 15px 18px;padding:20px;overflow:auto}.song-modal-header{justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px;display:flex}.song-modal h2{letter-spacing:0;margin:0;font-size:25px;font-weight:700}.modal-close,.primary-action,.secondary-action,.text-action,.file-upload{font:inherit}.modal-close{border:2.5px solid var(--ink);width:36px;height:36px;color:var(--ink);cursor:pointer;background:0 0;border-radius:49% 51% 46% 54%/54% 46% 53% 47%;justify-content:center;align-items:center;display:inline-flex}.song-form{gap:16px;display:grid}.song-form label:not(.file-upload){gap:7px;display:grid}.song-form label span,.saved-song span,.song-message,.empty-state{color:var(--soft-ink);font-size:13px}.song-form input[type=text],.song-form input:not([type]){border:2.5px solid var(--ink);background:var(--surface-sunk);width:100%;min-height:42px;color:var(--ink);border-radius:8px;outline:none;padding:8px 11px}.song-form input:focus{box-shadow:0 0 0 3px rgba(var(--ink-rgb), .14)}.modal-actions{flex-wrap:wrap;gap:12px;display:flex}.primary-action,.secondary-action,.file-upload{border:2.5px solid var(--ink);cursor:pointer;border-radius:8px;justify-content:center;align-items:center;gap:8px;min-height:40px;padding:8px 13px;display:inline-flex}.primary-action{background:var(--ink);color:var(--paper)}.secondary-action,.file-upload{color:var(--ink);background:0 0}.text-action{color:var(--soft-ink);cursor:pointer;background:0 0;border:0;padding:8px 0}.saved-song-list{gap:10px;display:grid}.saved-song{border-bottom:2px solid rgba(var(--ink-rgb), .16);grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:0 0 10px;display:grid}.saved-song strong,.saved-song span{display:block}.saved-song strong{overflow-wrap:anywhere}.file-upload{justify-self:start;position:relative;overflow:hidden}.file-upload input{opacity:0;cursor:pointer;position:absolute;inset:0}.song-message,.empty-state{margin:0}@media (max-width:900px){.synth-shell{padding:0}.playbar{grid-template-columns:1fr;gap:12px}.song-actions,.playbar-end{justify-self:center}.saved-song{grid-template-columns:1fr;justify-items:start}}