#db808{ --acc:#4D4DFF; --ink:#1d1d1f; --ink2:#4b4b50; --dim:#8a8a90; --ink-rgb:29,29,31; --panel:#ececee; --card:#f7f7f9; --card2:#fcfcfd; --inset:#f1f1f4; --ctrl:#e9e9ee; --ctrlh:#e1e1e8; --fill:#d7d7de; --line:rgba(0,0,0,.08); --line2:rgba(0,0,0,.15); --acc-soft:color-mix(in srgb,var(--acc) 11%,transparent); --acc-tint:color-mix(in srgb,var(--acc) 6%,var(--card)); --paper:#f4f4f0; --rp:22px; --rc:16px; --rk:10px; --rs:7px; --sh:0 1px 2px rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.05); --shp:0 24px 70px rgba(0,0,0,.10),0 2px 6px rgba(0,0,0,.05); --tr:.15s ease; --font:'Inter',-apple-system,BlinkMacSystemFont,'SF Pro Text',system-ui,'Segoe UI',sans-serif; --mono:'IBM Plex Mono',ui-monospace,menlo,monospace; font:13px/1.45 var(--font); color:var(--ink); max-width:1180px; margin:22px auto; padding:20px 20px 40px; background:var(--panel); border-radius:var(--rp); box-shadow:var(--shp); -webkit-font-smoothing:antialiased; cursor:default; } #db808[data-theme="dark"]{ --acc:#6b6bff; --ink:#ececf2; --ink2:#b8b8c4; --dim:#82828e; --ink-rgb:236,236,242; --panel:#131318; --card:#191920; --card2:#1f1f27; --inset:#15151b; --ctrl:#262630; --ctrlh:#2e2e3a; --fill:#3c3c4a; --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.17); --paper:#0e0e12; --sh:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.35); --shp:0 24px 70px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.35); } #db808 .themectl{display:flex;align-items:center;gap:8px} #db808 .themebtn{font-size:13px;line-height:1;color:var(--ink2);background:var(--ctrl);border:1px solid var(--line);border-radius:8px;padding:4px 9px;cursor:pointer;transition:background var(--tr)} #db808 .themebtn:hover{background:var(--ctrlh)} #db808 *{box-sizing:border-box} #db808 ::selection{background:var(--acc-soft)} #db808 .topbar{display:flex;align-items:center;justify-content:space-between;padding:2px 4px 16px} #db808 .brand{font-family:var(--font);font-weight:800;font-size:20px;letter-spacing:-.02em;color:var(--ink);text-decoration:none;cursor:pointer;display:inline-block;transition:opacity .12s} #db808 a.brand:hover{opacity:.75} #db808 .brand b{color:var(--acc)} #db808 .tag{color:var(--dim);font-size:11px;letter-spacing:.05em;font-weight:500} #db808 .sec{display:flex;align-items:center;gap:11px;margin:30px 4px 12px} #db808 .sec .num{color:var(--acc);font-size:12px;font-weight:700} #db808 .sec h2{font-weight:600;font-size:13px;letter-spacing:.01em;text-transform:lowercase;margin:0;color:var(--ink)} #db808 .sec .ln{flex:1;height:1px;background:var(--line)} #db808 .screen,#db808 .panel,#db808 #globals,#db808 .fxmod,#db808 .mmod,#db808 .subpanel{background:var(--card);border:1px solid var(--line);border-radius:var(--rc);box-shadow:var(--sh)} #db808 .screen{margin-top:12px;padding:15px 17px;position:relative;background:#0b0b10;border:1px solid rgba(255,255,255,.09);border-radius:var(--rc);box-shadow:0 10px 34px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.05)} #db808 .screen .read{display:flex;justify-content:space-between;color:rgba(255,255,255,.42);font-size:11px;margin-bottom:9px} #db808 .screen .read b{color:rgba(255,255,255,.95);font-weight:600} #db808 .screen .read .hot{color:#8f8fff} #db808 .screen .dragtag{background:rgba(255,255,255,.06);color:#b9b9ff;border:1px solid rgba(255,255,255,.12)} #db808 .screen .dragtag:hover{background:rgba(255,255,255,.13)} #db808 .screen #envTog.off{opacity:.4} #db808 .screen .read{display:flex;justify-content:space-between;color:rgba(255,255,255,.5);font-size:11px;margin-bottom:8px} #db808 .screen .read b{color:#fff;font-weight:600} #db808 .screen .read .hot{color:#9a9aff} #db808 .readtools{display:flex;gap:10px;align-items:center} #db808 canvas#wave{width:100%;height:166px;background:transparent;display:block;border-radius:10px} #db808 .wavewrap{position:relative} #db808 #wave{cursor:crosshair;position:relative;z-index:1} #db808 canvas#waveadsr{position:absolute;left:0;top:0;width:100%;height:166px;display:block;z-index:2;touch-action:none;cursor:crosshair} #db808 .dragtag{margin-left:auto;font-family:var(--font);font-weight:600;font-size:11px;letter-spacing:.01em;color:var(--acc);background:var(--acc-soft);border:1px solid transparent;border-radius:var(--rs);padding:3px 10px;cursor:pointer;user-select:none;transition:background var(--tr)} #db808 .dragtag:hover{background:color-mix(in srgb,var(--acc) 17%,transparent)} #db808 #dragTag{cursor:pointer}#db808 #dragTag:active{opacity:.6} #db808 #envTog{cursor:pointer}#db808 #envTog.off{opacity:.4} #db808 .subtabs{display:flex;gap:6px;margin:18px 0 0} #db808 .stab{border:1px solid var(--line);background:var(--ctrl);color:var(--ink2);font:inherit;font-weight:500;font-size:12px;text-transform:lowercase;padding:7px 15px;cursor:pointer;border-radius:var(--rk);line-height:1;transition:all var(--tr)} #db808 .stab:hover{background:var(--ctrlh);color:var(--ink)} #db808 .stab.active{background:var(--acc);color:#fff;border-color:transparent} #db808 .subpanel{padding:16px 14px 8px;margin-top:8px} #db808 button{font:inherit;font-weight:500;font-size:12px;color:var(--ink);background:var(--ctrl);border:1px solid var(--line);border-radius:var(--rk);padding:8px 14px;letter-spacing:0;cursor:pointer;transition:all var(--tr)} #db808 button:hover{background:var(--ctrlh)} #db808 button.acc{background:var(--acc);color:#fff;border-color:transparent} #db808 button.acc:hover{filter:brightness(1.07);background:var(--acc)} #db808 button.active{background:var(--acc);color:#fff;border-color:transparent} #db808 button.mini{padding:5px 10px;font-size:11px} #db808 button:disabled{opacity:.4;cursor:not-allowed}#db808 button:disabled:hover{background:var(--ctrl);color:var(--ink)} #db808 select{appearance:none;-webkit-appearance:none;font:inherit;font-size:12px;color:var(--ink);background:var(--ctrl);border:1px solid var(--line);border-radius:var(--rk);padding:7px 26px 7px 11px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='10'%20height='6'%3E%3Cpath%20d='M1%201l4%204%204-4'%20fill='none'%20stroke='%238a8a8f'%20stroke-width='1.5'%20stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center;transition:all var(--tr)} #db808 select:hover{background-color:var(--ctrlh)} #db808 select:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-soft)} #db808 .transport{display:flex;gap:7px;align-items:center;margin-top:14px;flex-wrap:wrap} #db808 .transport .div{width:1px;align-self:stretch;background:var(--line2);margin:0 4px} #db808 .transport .sp{margin-left:auto} #db808 #status{color:var(--acc);font-size:12px;min-width:26px;font-weight:600} #db808 #layers{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start} #db808 .panel{padding:14px} #db808 .phead{display:flex;justify-content:space-between;align-items:center;margin-bottom:11px;border-bottom:1px solid var(--line);padding-bottom:9px} #db808 .phead label{font-weight:600;font-size:13px;display:flex;gap:9px;align-items:center;text-transform:lowercase} #db808 .phead select{padding:5px 24px 5px 9px} #db808 .pright{display:flex;gap:9px;align-items:center} #db808 #gallery{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px} #db808 .ghint{color:var(--dim);font-size:11px} #db808 .ctl{display:flex;align-items:center;gap:11px;margin:10px 0} #db808 .lk{width:12px;height:12px;border:1.5px solid var(--line2);border-radius:4px;cursor:pointer;flex:none;opacity:.5;transition:all .12s} #db808 .lk:hover{opacity:1} #db808 .lk.on{background:var(--acc);border-color:var(--acc);opacity:1} #db808 .ctl .lbl{color:var(--dim);width:62px;flex:none;font-size:11px;text-transform:lowercase} #db808 .ctl .v{width:54px;flex:none;text-align:right;color:var(--ink);font-size:13px;font-family:var(--mono);font-variant-numeric:tabular-nums} #db808 .ctl input[type=number],#db808 .ctl select{width:auto;background:var(--ctrl);color:var(--ink);border:1px solid var(--line);border-radius:8px;font:inherit;padding:6px 8px;font-size:11px} #db808 .ctl input[type=number]{width:58px} #db808 input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:20px;background:transparent;cursor:pointer} #db808 input[type=range]::-webkit-slider-runnable-track{height:5px;border-radius:3px;background:var(--fill)} #db808 input[type=range]::-moz-range-track{height:5px;border-radius:3px;background:var(--fill)} #db808 input[type=range]::-moz-range-progress{height:5px;border-radius:3px;background:var(--acc)} #db808 input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;border-radius:50%;background:#fff;border:1px solid rgba(0,0,0,.1);box-shadow:0 1px 3px rgba(0,0,0,.22);margin-top:-5px;cursor:pointer;transition:transform .1s} #db808 input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.14)} #db808 input[type=range]::-moz-range-thumb{width:15px;height:15px;border-radius:50%;background:#fff;border:1px solid rgba(0,0,0,.1);box-shadow:0 1px 3px rgba(0,0,0,.22);cursor:pointer} #db808 input[type=range]:disabled{opacity:.35} #db808 input[type=checkbox]{appearance:none;-webkit-appearance:none;width:18px;height:18px;border:1px solid var(--line2);border-radius:6px;background:var(--card2);cursor:pointer;flex:none;position:relative;transition:all var(--tr)} #db808 input[type=checkbox]:checked{background:var(--acc);border-color:var(--acc)} #db808 #globals{display:flex;flex-direction:column;gap:16px;margin-top:12px;padding:16px} #db808 #globals .grow{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center} #db808 .adsr-wrap{max-width:480px} #db808 .adsr-top{display:flex;justify-content:space-between;color:var(--dim);font-size:11px;margin-bottom:7px} #db808 .adsr-top span:last-child{color:var(--acc)} #db808 canvas#adsr{width:100%;max-width:480px;height:120px;background:var(--inset);border:1px solid var(--line);border-radius:12px;display:block;cursor:crosshair;touch-action:none} #db808 #globals .g{display:flex;align-items:center;gap:10px;color:var(--dim);font-size:11px;text-transform:lowercase} #db808 #globals input[type=range]{width:150px}#db808 #globals .v{color:var(--ink);min-width:46px;text-align:right;font-size:13px;font-family:var(--mono)} #db808 #rack{display:grid;grid-template-columns:repeat(auto-fill,minmax(236px,1fr));gap:10px;align-items:start} #db808 .fxmod{padding:12px 13px;transition:border-color var(--tr),background var(--tr),box-shadow var(--tr)} #db808 .fxmod.off{border-color:var(--line);opacity:.6;box-shadow:none;padding:10px 13px;background:var(--card2)} #db808 .fxmod.on{border-color:color-mix(in srgb,var(--acc) 42%,var(--line));background:var(--acc-tint)} #db808 .fxhead{display:flex;justify-content:space-between;align-items:center} #db808 .fxmod.on .fxhead{margin-bottom:9px} #db808 .fxhead .nm{font-weight:600;font-size:13px;text-transform:lowercase} #db808 .fxmod.on .fxhead .nm{color:var(--acc)}#db808 .fxmod.off .fxhead .nm{color:var(--dim)} #db808 .fxhead .lft{display:flex;gap:9px;align-items:center} #db808 .fxhead .rgt{display:flex;gap:8px;align-items:center} #db808 .ord button{padding:1px 6px;border:none;background:none;color:var(--dim);font-weight:700;border-radius:6px} #db808 .ord button:hover{color:var(--acc);background:var(--acc-soft)} #db808 .fxmod.off .ord{display:none} #db808 .ord button[data-act=rm]{color:var(--dim)} #db808 .ord button[data-act=rm]:hover{color:#e5484d;background:rgba(229,72,77,.1)} #db808 .fxcv{width:100%;height:50px;background:var(--card2);border:1px solid var(--line);border-radius:10px;margin-top:8px;display:block;touch-action:none} #db808 .route{padding:3px 8px;font-size:10px;background:var(--acc-soft);color:var(--acc);border:1px solid transparent;border-radius:6px;text-transform:lowercase} #db808 #rack.bypassed{opacity:.45;filter:grayscale(.6)} #db808 .grip{cursor:grab;color:var(--dim);font-size:14px;line-height:1;padding-right:3px;user-select:none} #db808 .grip:active{cursor:grabbing} #db808 .fxmod.dragging{opacity:.4} #db808 .fxmod.over{box-shadow:inset 0 3px 0 var(--acc),var(--sh)} #db808 .footer{display:flex;gap:8px;align-items:center;flex-wrap:wrap} #db808 #pname{background:var(--card2);color:var(--ink);border:1px solid var(--line);border-radius:var(--rk);font:inherit;padding:8px 12px;width:190px;font-size:13px} #db808 #pname:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-soft)} #db808 #bank{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px} #db808 .chip{display:flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--card2);border-radius:var(--rk);padding:4px 5px 4px 12px;font-size:12px} #db808 .chip button{padding:3px 9px;font-size:10px} #db808 .chip .x{border:none;color:var(--dim);padding:2px 6px;background:none}#db808 .chip .x:hover{color:#e5484d;background:transparent} #db808 textarea{width:100%;height:46px;background:var(--card2);color:var(--ink);border:1px solid var(--line);border-radius:var(--rk);font:12px var(--mono);margin-top:9px;padding:8px} #db808 textarea:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-soft)} #db808 .hint{color:var(--dim);font-size:11px;margin-top:22px;border-top:1px solid var(--line);padding-top:12px;line-height:1.6}#db808 .hint b{color:var(--ink)} #db808 .modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.28);display:none;align-items:center;justify-content:center;z-index:9999;backdrop-filter:blur(6px);overscroll-behavior:contain;padding:20px} #db808 .modal-bg.show{display:flex} #db808 .modal{background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.28);padding:22px;min-width:340px;max-width:90vw} #db808 .modal-h{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:16px;font-weight:600;text-transform:lowercase;font-size:14px} #db808 .modal-h span{color:var(--acc)}#db808 .modal-h button{border:none;background:none;color:var(--dim);padding:2px 6px}#db808 .modal-h button:hover{color:var(--acc)} #db808 .modal-row{display:flex;align-items:center;gap:10px;color:var(--dim);text-transform:lowercase;font-size:11px;margin-bottom:12px} #db808 .modal-row input{flex:1;background:var(--card2);color:var(--ink);border:1px solid var(--line);border-radius:var(--rk);font:inherit;padding:9px 12px;font-size:13px} #db808 .modal-note{color:var(--dim);font-size:11px;min-height:14px;margin-bottom:16px} #db808 .modal-actions{display:flex;gap:8px}#db808 .modal-actions button{flex:1} #db808 .smpbox{margin:8px 0} #db808 .dz{cursor:pointer;text-align:center;padding:16px 10px;border:1.5px dashed var(--line2);border-radius:12px;color:var(--dim);text-transform:lowercase;font-size:11px;transition:all var(--tr)} #db808 .dz.drag{border-color:var(--acc);color:var(--acc);background:var(--acc-soft)} #db808 .dz .info{margin-top:6px;color:var(--ink);font-size:11px;text-transform:none} #db808 .scope{width:100%;height:92px;display:block;background:var(--card2);border:1px solid var(--line);border-radius:10px;cursor:crosshair;margin:2px 0 10px} #db808 button.fold{border:1px solid var(--line);background:var(--ctrl);color:var(--ink2);font-weight:700;font-size:14px;line-height:1;padding:2px 9px;border-radius:8px} #db808 button.fold:hover{color:var(--acc);background:var(--acc-soft)} #db808 .panel.collapsed .pbody{display:none} #db808 .panel.collapsed{padding:11px 14px} #db808 .eqwrap,#db808 .ottwrap,#db808 .bloomwrap,#db808 .subwrap{margin-top:9px} #db808 .eqtop,#db808 .otttop,#db808 .bloomtop,#db808 .subtop{display:flex;justify-content:space-between;color:var(--dim);font-size:10px;text-transform:lowercase;margin-bottom:6px} #db808 .eqtop span:last-child,#db808 .otttop span:last-child,#db808 .bloomtop span:last-child,#db808 .subtop span:last-child{color:var(--acc)} #db808 .eqcv{width:100%;height:120px;background:var(--card2);border:1px solid var(--line);border-radius:12px;display:block;cursor:crosshair;touch-action:none} #db808 .ottcv{width:100%;height:150px;background:var(--card2);border:1px solid var(--line);border-radius:12px;display:block;cursor:crosshair;touch-action:none} #db808 .bloomcv,#db808 .subcv{width:100%;height:72px;background:var(--card2);border:1px solid var(--line);border-radius:12px;display:block;cursor:ew-resize;touch-action:none} #db808 .addfx{margin-top:8px} #db808 .addbtn{width:100%;font:inherit;font-weight:600;font-size:13px;color:var(--acc);background:var(--acc-soft);border:1.5px dashed var(--acc);border-radius:var(--rk);padding:12px;cursor:pointer;text-transform:lowercase;transition:all var(--tr)}#db808 .addbtn:hover{background:var(--acc);color:#fff;border-style:solid} #db808 .addbtn:hover{color:var(--acc);border-color:var(--acc);background:var(--acc-soft)} #db808 .addlist{display:none;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:6px;margin-top:6px} #db808 .addlist.open{display:grid} #db808 .addopt{border:1px solid var(--line);background:var(--ctrl);color:var(--ink);font:inherit;font-size:11px;text-transform:lowercase;padding:9px;cursor:pointer;border-radius:8px;transition:all .12s} #db808 .addopt:hover{background:var(--acc);color:#fff;border-color:transparent} #db808 #master{display:flex;flex-direction:column;gap:8px} #db808 .mmod{background:var(--card2)} #db808 .mhead{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-bottom:1px solid var(--line)} #db808 .mhead label{display:flex;align-items:center;gap:8px;font-size:12px;text-transform:lowercase;font-weight:600} #db808 .mtag{color:var(--dim);font-size:10px;text-transform:lowercase} #db808 .mbody{display:flex;flex-wrap:wrap;gap:14px;padding:12px} #db808 .browser{display:flex;align-items:stretch;gap:7px;margin:0 0 14px} #db808 .navbtn{flex:0 0 auto;width:42px;border:1px solid var(--line);background:var(--ctrl);color:var(--ink);font-size:16px;line-height:1;cursor:pointer;border-radius:var(--rk);transition:all var(--tr)} #db808 .navbtn:hover{background:var(--acc);color:#fff;border-color:transparent} #db808 .curpre{flex:1 1 auto;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:1px;border:1px solid var(--line);background:var(--card2);color:var(--ink);padding:7px 16px;cursor:pointer;text-align:left;border-radius:var(--rk);transition:all var(--tr)} #db808 .curpre:hover{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-soft)} #db808 .cplbl{font-family:var(--font);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);font-weight:600} #db808 .cpname{font-size:16px;font-weight:700;text-transform:lowercase} #db808 .pbmodal{position:fixed;inset:0;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;z-index:9999;padding:20px;backdrop-filter:blur(6px);overscroll-behavior:contain} #db808 .pbpanel{width:min(720px,94vw);max-height:80vh;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.3);overflow:hidden} #db808 .pbhead{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap;gap:8px} #db808 .pbtitle{font-family:var(--font);font-weight:600;font-size:14px;text-transform:lowercase} #db808 .pbacts{display:flex;gap:6px} #db808 .pbacts button{font-size:11px;text-transform:lowercase;padding:6px 11px} #db808 .pbbody{display:flex;min-height:0;flex:1 1 auto} #db808 .pbbanks{flex:0 0 38%;max-width:220px;overflow-y:auto;overscroll-behavior:contain;border-right:1px solid var(--line);padding:10px} #db808 .pbpresets{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;padding:10px;display:flex;flex-direction:column;gap:6px} #db808 .pbbank{display:flex;align-items:center;border:1px solid transparent;border-radius:10px;margin-bottom:3px;padding:2px 3px;gap:2px;transition:background .12s,border-color .12s} #db808 .pbbank:hover{background:var(--inset)} #db808 .pbbank.active{background:var(--acc-tint);border-color:var(--acc)} #db808 .pbbank.drop{background:var(--acc-soft);box-shadow:inset 0 0 0 1.5px var(--acc)} #db808 .pbbank-sel{flex:1 1 auto;min-width:0;display:flex;justify-content:space-between;align-items:center;gap:8px;border:none;background:none;color:var(--ink);font:inherit;font-size:13px;text-transform:lowercase;padding:10px 12px;cursor:pointer} #db808 .pbbank-sel .pbn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #db808 .pbbank.active .pbbank-sel{color:var(--acc)} #db808 .pbbank.active .pbcount{color:var(--acc);opacity:.6} #db808 .pbmini{flex:0 0 auto;display:flex;align-items:center;border:none;background:none;color:var(--dim);font:inherit;font-size:12px;line-height:1;padding:7px 8px;border-radius:7px;cursor:pointer;transition:background .12s,color .12s} #db808 .pbmini:hover{color:var(--acc);background:var(--acc-soft)} #db808 .pbbank.active .pbmini{color:var(--acc)} #db808 .pbbank.active .pbmini:hover{color:var(--acc);background:var(--acc-soft)} #db808 .pbnewbank{width:100%;border:1px dashed var(--line2);border-radius:10px;background:none;color:var(--dim);font:inherit;font-size:10px;text-transform:lowercase;padding:10px;cursor:pointer;margin-top:4px} #db808 .pbnewbank:hover{color:var(--acc);border-color:var(--acc)} #db808 .pbgrip{display:flex;align-items:center;color:var(--dim);font-size:12px;padding:0 2px 0 10px;cursor:grab;user-select:none} #db808 .pbprow.active .pbgrip{color:var(--acc)} #db808 .pbprow.dragging{opacity:.45} #db808 .pbcount{font-size:10px;opacity:.7;font-family:var(--mono)} #db808 .pbpre{text-align:left;border:1px solid var(--line);background:var(--card2);color:var(--ink);font:inherit;font-size:13px;text-transform:lowercase;padding:11px 13px;cursor:pointer;border-radius:10px} #db808 .pbpre:hover{border-color:var(--acc);color:var(--acc);background:var(--acc-tint)} #db808 .pbpre.active{background:var(--acc-tint);color:var(--acc);border-color:var(--acc)} #db808 .pbempty{color:var(--dim);font-size:12px;padding:14px;text-transform:lowercase} #db808 .pbprow{display:flex;align-items:stretch;border:1px solid var(--line);background:var(--card2);border-radius:10px;transition:all .12s} #db808 .pbprow:hover{border-color:var(--acc)} #db808 .pbprow.active{background:var(--acc-tint);border-color:var(--acc)} #db808 .pbprow .pbpre-btn{flex:1 1 auto;text-align:left;border:none;background:none;color:var(--ink);font:inherit;font-size:13px;text-transform:lowercase;padding:11px 13px;cursor:pointer} #db808 .pbprow.active .pbpre-btn{color:var(--acc)} #db808 .pbpx{border:none;background:none;color:var(--dim);padding:0 12px;cursor:pointer;font-size:12px} #db808 .pbpx:hover{color:#e5484d} #db808 .pbprow.active .pbpx{color:var(--acc)} #db808 .pbfoot{display:flex;flex-wrap:wrap;gap:6px;padding:14px 16px;border-top:1px solid var(--line)} #db808 .pbfoot input#pname{flex:1 1 150px;min-width:120px} #db808 .pbfoot button{font-size:11px;text-transform:lowercase;padding:8px 13px} #db808 .pbfoot input,#db808 .pbfoot textarea{border:1px solid var(--line);border-radius:var(--rk);background:var(--card2);color:var(--ink);font:inherit;font-size:13px;padding:9px 11px} #db808 .pbfoot textarea#presetBox{flex:1 1 100%;min-height:46px;resize:vertical} #db808 .chainbrowser{background:var(--card);border:1px solid var(--line);border-radius:var(--rc);box-shadow:var(--sh);padding:9px 11px;margin:0 auto 14px;max-width:584px} #db808 .chbrow-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 0 11px;padding:0 2px} #db808 .chbrow-title{font-size:13px;font-weight:600;color:var(--ink);text-transform:lowercase;letter-spacing:.01em} #db808 .chbrow-sub{font-size:10px;color:var(--dim);text-transform:lowercase} #db808 .chgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(146px,1fr));gap:8px} #db808 .chcard{position:relative;text-align:left;border:1px solid var(--line);background:var(--card2);border-radius:12px;padding:9px 11px 10px;cursor:pointer;font:inherit;display:flex;flex-direction:column;gap:7px;transition:border-color .12s,background .12s;overflow:hidden} #db808 .chcard:hover{border-color:var(--acc);background:var(--card)} #db808 .chcard.active{border-color:var(--acc);background:var(--acc-tint);box-shadow:inset 0 0 0 1px var(--acc)} #db808 .chcard-nm{font-size:12px;font-weight:600;color:var(--ink);text-transform:lowercase;letter-spacing:.01em} #db808 .chcard.active .chcard-nm{color:var(--acc)} #db808 .chcard-fx{display:flex;flex-wrap:wrap;gap:3px;align-items:center} #db808 .chtag{font-size:9px;font-family:var(--mono);text-transform:lowercase;color:var(--dim);background:var(--inset);border-radius:5px;padding:1.5px 5px;line-height:1.45;white-space:nowrap} #db808 .chcard:hover .chtag{background:var(--ctrl)} #db808 .chcard.active .chtag{color:var(--acc);background:var(--acc-soft)} #db808 .chtag.more{color:var(--acc)} #db808 .chcard-x{position:absolute;top:6px;right:7px;color:var(--dim);font-size:10px;line-height:1;opacity:0;transition:opacity .12s;padding:2px 3px;border-radius:4px} #db808 .chcard.saved:hover .chcard-x{opacity:1} #db808 .chcard-x:hover{color:#e5484d;background:var(--inset)} #db808 .chcard.chsave{border-style:dashed;background:transparent} #db808 .chcard.chsave .chcard-nm{color:var(--dim)} #db808 .chcard.chsave .chcard-fx{color:var(--dim);font-size:9px;font-family:var(--mono);text-transform:lowercase} #db808 .chcard.chsave:hover{border-color:var(--acc);border-style:solid} #db808 .chcard.chsave:hover .chcard-nm{color:var(--acc)} #db808 .seclock{font-family:var(--font);font-weight:600;font-size:10px;text-transform:lowercase;padding:3px 9px;border:1px solid var(--line);background:var(--ctrl);color:var(--dim);cursor:pointer;border-radius:7px;margin-left:8px;transition:all .12s} #db808 .seclock:hover{color:var(--ink)} #db808 .seclock.on{border-color:transparent;color:#fff;background:var(--acc)} #db808 span.v .vedit{width:46px;font-family:var(--mono);font-size:11px;padding:1px 3px;border:1px solid var(--acc);border-radius:5px;background:#fff;color:var(--ink);text-align:right;outline:none} #db808 .info{padding:4px 2px 10px;max-width:800px} #db808 .info-lead{font-size:16px;line-height:1.7;margin:2px 0 22px;color:var(--ink2)} #db808 .info h3{font-family:var(--font);font-weight:700;font-size:14px;text-transform:lowercase;margin:30px 0 12px;padding-bottom:9px;border-bottom:1px solid var(--line);color:var(--ink)} #db808 .info p{font-size:14px;line-height:1.65;margin:0 0 12px;color:var(--ink2)} #db808 .info b{font-weight:600;color:var(--ink)} #db808 .info .term{color:var(--acc);font-weight:600} #db808 .info-diagram{margin:14px 0 6px;border:1px solid var(--line);background:var(--card2);border-radius:12px;padding:16px;overflow-x:auto} /* keep guide diagrams from being squished inside the flex-column modal body */ #db808 .helpsheet .info-diagram,#db808 .helpsheet .info-mini,#db808 .helpsheet .info-mini figure{flex-shrink:0} #db808 .info-diagram svg{display:block;width:100%;height:auto;min-width:580px} #db808 .info-mini{display:flex;gap:14px;flex-wrap:wrap;margin:8px 0 14px} #db808 .info-mini figure{margin:0;border:1px solid var(--line);border-radius:12px;padding:14px;background:var(--card2);flex:1 1 240px} #db808 .info-mini figcaption{font-family:var(--mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);margin-top:8px} #db808 .info-mini svg{display:block;width:100%;height:auto} #db808 .fxtable{display:grid;grid-template-columns:max-content 1fr;gap:8px 18px;font-size:13px;line-height:1.5;margin:8px 0 14px} #db808 .fxtable dt{font-family:var(--mono);text-transform:lowercase;color:var(--acc);font-size:12px;align-self:start;padding-top:1px;font-weight:500} #db808 .fxtable dd{margin:0;color:var(--ink2)} #db808 .info-steps{margin:0 0 12px;padding-left:20px} #db808 .info-steps li{font-size:14px;line-height:1.6;margin-bottom:8px;color:var(--ink2)} #db808 .diag-box{fill:var(--card2);stroke:var(--line2);stroke-width:1.5} #db808 .diag-acc{fill:var(--acc);stroke:var(--acc)} #db808 .diag-t{fill:var(--ink);font-family:var(--font);font-size:12px;font-weight:600} #db808 .diag-s{fill:var(--dim);font-family:var(--mono);font-size:9px} #db808 .diag-tw{fill:#fff} #db808 .diag-arrow{stroke:var(--line2);stroke-width:1.5;fill:none} #db808 .diag-line{stroke:var(--line);stroke-width:1} #db808 #db808gate{display:none} #db808 .gatebox{width:min(380px,92vw);border:1px solid var(--line);background:var(--card);border-radius:20px;box-shadow:var(--shp);padding:36px 28px;text-align:center} #db808 .gatebrand{font-family:var(--font);font-weight:800;font-size:26px;letter-spacing:-.02em;color:var(--ink)} #db808 .gatesub{font-family:var(--font);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);font-weight:600;margin:6px 0 26px} #db808 .gatefield{display:flex;gap:8px} #db808 .gatefield input{flex:1 1 auto;min-width:0;border:1px solid var(--line);border-radius:var(--rk);background:var(--card2);color:var(--ink);font:inherit;font-size:14px;padding:12px;text-align:center;letter-spacing:.1em} #db808 .gatefield input:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-soft)} #db808 .gatefield button{border:none;background:var(--acc);color:#fff;font:inherit;font-weight:600;font-size:12px;text-transform:lowercase;padding:0 20px;cursor:pointer;border-radius:var(--rk)} #db808 .gatefield button:hover{filter:brightness(1.08)} #db808 .gateerr{display:none;color:#e5484d;font-family:var(--font);font-size:11px;text-transform:none;margin-top:14px} #db808 #db808mobile{display:none} #db808 .mobbox{width:min(360px,92vw);border:1px solid var(--line);background:var(--card);border-radius:20px;box-shadow:var(--shp);padding:36px 28px;text-align:center} #db808 .mobmsg{font-family:var(--font);font-size:13px;line-height:1.6;text-transform:none;color:var(--ink2);margin-top:14px} @media (max-width:760px){ #db808 #db808mobile{display:none!important} #db808 #app{padding:0 2px} #db808 .topbar{flex-wrap:wrap;gap:8px;padding:2px 2px 12px} #db808 .brand{font-size:16px} #db808 .themectl{gap:6px} #db808 #layers{grid-template-columns:1fr} #db808 .morphbar,#db808 .chnav{max-width:none} #db808 .piano{min-width:0} #db808 .transport{gap:6px} #db808 .sec{margin:22px 2px 10px;flex-wrap:wrap;row-gap:8px} #db808 .sec .ln{min-width:20px} #db808 .fxnum{order:5} #db808 .cmodal .csheet,#db808 .helpsheet{width:94vw;max-width:none} #db808 .modal.eqbig{width:96vw} #db808 .eqbigcv{height:240px} #db808 .kbgrid{grid-template-columns:1fr;gap:5px 12px} #db808 .fxguide{grid-template-columns:1fr} #db808 .fxcv{height:72px} #db808 .eqcv{height:150px} #db808 .subcv{height:88px} #db808 .bloomcv{height:92px} #db808 .read{flex-wrap:wrap;gap:7px 8px;align-items:center} #db808 #read2{margin-left:auto;text-align:right} #db808 .readtools{width:100%;order:5;justify-content:flex-start;gap:8px;margin-top:3px} #db808 .readtools .dragtag{margin-left:0} #db808 #envTog{margin-left:auto} #db808 .transport .div{display:none} #db808 .transport{gap:7px;justify-content:flex-start} #db808 .chaosctl{flex:1 1 auto;justify-content:flex-end;margin:0;min-width:140px} #db808 .chaosctl input[type=range]{flex:1;width:auto} } @media (max-width:420px){ #db808 .cc-nm{max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #db808 .brand{font-size:16px} } #db808 .kbd{display:flex;align-items:center;gap:12px;margin:14px 0 2px;flex-wrap:wrap} #db808 .kbd .octbox{display:flex;align-items:center;gap:6px;font-family:var(--font);font-size:11px;text-transform:lowercase;color:var(--dim)} #db808 .kbd .octbox b{color:var(--ink)} #db808 .kbd .octbox button{font-family:var(--font);border:1px solid var(--line);background:var(--ctrl);padding:4px 10px;line-height:1;font-size:13px;color:var(--ink);border-radius:8px} #db808 .piano{position:relative;display:flex;height:76px;flex:1;min-width:300px;border:1px solid var(--line);border-radius:12px;background:#fff;user-select:none;overflow:hidden;box-shadow:var(--sh)} #db808 .piano .wk{flex:1;position:relative;display:flex;align-items:flex-end;justify-content:center;padding-bottom:7px;background:#fff;transition:background .05s ease} #db808 .piano .wk:hover{background:#f2f2f6} #db808 .piano .wk+.wk{border-left:1px solid var(--line)} #db808 .piano .wk.on{background:var(--acc)} #db808 .piano .bk{position:absolute;top:0;height:60%;width:8%;background:#2a2a2e;z-index:2;display:flex;align-items:flex-end;justify-content:center;padding-bottom:5px;border-radius:0 0 5px 5px;box-shadow:0 2px 5px rgba(0,0,0,.3);transition:background .05s ease} #db808 .piano .bk.on{background:var(--acc)} #db808 .piano .kl{font-family:var(--font);font-size:9px;color:var(--dim);text-transform:uppercase;pointer-events:none} #db808 .piano .bk .kl{color:#fff;opacity:.85} #db808 .piano .wk.on .kl,#db808 .piano .bk.on .kl{color:#fff;opacity:1} #db808 .transport button svg{width:12px;height:12px;vertical-align:-1.5px;margin-right:5px;display:inline-block} #db808 .eqexp{border:1px solid var(--line);background:var(--card2);color:var(--acc);font:inherit;font-size:10px;text-transform:lowercase;padding:3px 8px;border-radius:7px;cursor:pointer;display:inline-flex;align-items:center;gap:4px} #db808 .eqexp svg{width:11px;height:11px} #db808 .eqexp:hover{background:var(--acc);color:#fff;border-color:transparent}#db808 .eqexp:hover svg{stroke:#fff} #db808 .modal.eqbig{width:min(700px,93vw);max-width:none;max-height:92vh;overflow:auto;overscroll-behavior:contain} #db808 .eqbigcv{width:100%;height:340px;background:var(--card2);border:1px solid var(--line);border-radius:12px;display:block;cursor:crosshair;touch-action:none} #db808 .eqbig-rd{display:flex;gap:8px;margin-top:12px} #db808 .eqbig-rd span{flex:1;text-align:center;font-size:11px;color:var(--dim);background:var(--inset);border-radius:8px;padding:8px 6px;font-family:var(--mono)} #db808 .eqbig-rd span b{color:var(--acc);text-transform:lowercase;font-family:var(--font);margin-right:3px} body.db808-lock{overflow:hidden!important} #db808 .chaosctl{display:inline-flex;align-items:center;gap:7px;font-size:10px;color:var(--dim);text-transform:lowercase;padding:0 2px;white-space:nowrap} #db808 .chaosctl input[type=range]{width:84px} #db808 .chaosctl b{color:var(--acc);font-family:var(--mono);font-size:10px;min-width:32px;text-align:right} #db808 .kbgrid{display:grid;grid-template-columns:auto 1fr;gap:7px 16px;padding:4px 2px} #db808 .kbk{font-family:var(--mono);font-size:11px;color:var(--acc);background:var(--acc-soft);border-radius:6px;padding:2px 8px;text-align:center;white-space:nowrap} #db808 .kbd{font-size:13px;color:var(--ink2);align-self:center} #db808 #kbHelp{min-width:26px} #db808 .info,#db808 .info p,#db808 .info h3,#db808 .info dt,#db808 .info dd{text-transform:lowercase} #db808 .chnav{display:flex;gap:8px;align-items:stretch;max-width:560px;margin:0 auto} #db808 .chnav .chcur{flex:1;min-width:0;display:flex;align-items:center;gap:10px;background:var(--card2);border:1px solid var(--line);border-radius:10px;padding:7px 12px;cursor:pointer;text-align:left;transition:border-color .15s,box-shadow .15s} #db808 .chnav .chcur:hover{border-color:var(--acc)} #db808 .chnav .cpname{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #db808 .chtags{display:flex;gap:4px;flex-wrap:nowrap;overflow:hidden;margin-left:auto} #db808 #fxbList{max-height:none} @media(max-width:560px){#db808 .chtags{display:none}} /* kill the browser focus ring that space/keyboard puts on the page & section */ #db808:focus,#db808:focus-visible,#db808 :focus:not(input):not(textarea):not(select){outline:none!important} body:focus,body:focus-visible,main:focus-visible{outline:none!important} html:focus-within{scroll-behavior:auto} #db808 #kbd{display:none!important} #db808 .readtools button.dragtag{appearance:none;-webkit-appearance:none;line-height:inherit;font:inherit;font-family:var(--font);font-weight:600;font-size:11px} #db808 .screen .dragtag.acc{background:rgba(122,122,255,.22);color:#dcdcff;border-color:rgba(140,140,255,.45)} #db808 .stpill{display:inline-block;vertical-align:middle;width:26px;height:15px;border-radius:9px;background:var(--fill);margin-left:8px;position:relative;transition:background var(--tr);cursor:pointer;flex:none} #db808 .stpill i{position:absolute;top:2px;left:2.5px;width:11px;height:11px;border-radius:50%;background:#fff;transition:left var(--tr);box-shadow:0 1px 2px rgba(0,0,0,.3)} #db808 .stpill.on{background:var(--acc)} #db808 .stpill.on i{left:12.5px} #db808 .stab{display:inline-flex;align-items:center} #db808 .stab.active .stpill{background:rgba(255,255,255,.32)} #db808 .stab.active .stpill.on{background:rgba(255,255,255,.95)} #db808 .stab.active .stpill.on i{background:var(--acc);box-shadow:none} #db808 .mab{font-family:var(--mono);font-size:10px;color:var(--dim);text-transform:lowercase;padding:0 2px} #db808 .polbtn{font-family:var(--mono);font-size:12px;line-height:1;color:var(--ink2);background:var(--ctrl);border:1px solid var(--line);border-radius:7px;padding:4px 8px;cursor:pointer;transition:all var(--tr)} #db808 .polbtn:hover{background:var(--ctrlh)} #db808 .polbtn.on{background:var(--acc);color:#fff;border-color:transparent} #db808 .morphbar{display:flex;align-items:center;gap:9px;max-width:560px;margin:0 auto 12px;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh);padding:8px 14px} #db808 .morphbar input[type="range"]{flex:1} #db808 .morphbar select{font-family:var(--mono);font-size:10px;text-transform:lowercase;color:var(--ink2);background:var(--ctrl);border:1px solid var(--line);border-radius:8px;padding:4px 7px;cursor:pointer} #db808 .morphbar .v{min-width:34px;text-align:right} #db808 .tipwrap{position:fixed;z-index:9999;pointer-events:none;max-width:230px;background:var(--ink);color:var(--card2);font-family:var(--font);font-size:11px;line-height:1.4;padding:7px 10px;border-radius:8px;box-shadow:0 6px 20px rgba(0,0,0,.28);opacity:0;transform:translateY(4px);transition:opacity .12s,transform .12s} #db808 .tipwrap.show{opacity:1;transform:translateY(0)} #db808[data-theme="dark"] .tipwrap{background:#000;color:#e8e8f0;border:1px solid var(--line)} #app .tabbar{display:inline-flex;gap:3px;margin:16px 4px 26px;padding:3px;background:var(--ctrl);border:1px solid var(--line);border-radius:12px} #app .tabbtn{font:inherit;font-weight:600;font-size:12px;padding:8px 20px;border-radius:9px;border:none;background:none;color:var(--ink2);cursor:pointer;transition:all var(--tr);text-decoration:none;display:inline-block;line-height:1.2} #app .tabbtn:hover{color:var(--ink)} #app .tabbtn.active{background:var(--acc);color:#fff} #app #cmview{display:none} #app.tab-cm > *:not(.topbar):not(.tabbar):not(#cmview):not(.cmodal):not(#authGate){display:none !important} #app.tab-cm #cmview{display:block} #app #cmframe{width:100%;height:auto;min-height:420px;border:none;border-radius:0;background:transparent;display:block;margin:2px 0 0;overflow:hidden} #db808 .cloudchip{display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:12px;color:var(--ink);background:var(--card2);border:1px solid var(--line);border-radius:20px;padding:4px 11px 4px 4px;cursor:pointer;transition:all var(--tr)} #db808 .cloudchip:hover{background:var(--ctrl);border-color:var(--line2)} #db808 .cloudchip .cc-av{width:24px;height:24px;border-radius:50%;background:var(--acc);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;flex:none} #db808 .cloudchip .cc-nm{font-weight:600;letter-spacing:-.01em;max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #db808 .cloudchip .cc-bal{display:inline-flex;align-items:center;gap:3px;font-size:11px;line-height:1;color:var(--ink2);background:var(--inset);border:1px solid var(--line);border-radius:12px;padding:3px 9px 3px 7px} #db808 .cloudchip .cc-bal b{color:var(--acc);font-weight:700;line-height:1;display:inline-flex;align-items:center} #db808 .cloudchip .cc-bal .cchip-ic{width:13px;height:13px;vertical-align:0;margin:0;display:block;opacity:1} #db808 .cloudchip .cc-signin{padding:2px 7px;font-weight:600;color:var(--ink2)} #db808 .cloudchip.pro{border-color:color-mix(in srgb,var(--acc) 34%,var(--line))} #db808 .cmodal{position:fixed;inset:0;z-index:140;display:none;align-items:center;justify-content:center;background:rgba(8,8,12,.55);backdrop-filter:blur(3px)} #db808 .cmodal.show{display:flex} #db808 .csheet{width:min(420px,94vw);max-height:90vh;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line2);border-radius:16px;box-shadow:0 24px 70px rgba(0,0,0,.45);overflow:hidden} #db808 .csheet .ch{flex:none;display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line)} #db808 .csheet .ch h3{margin:0;font-size:14px;font-weight:600} #db808 .csheet .cb{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:16px;display:flex;flex-direction:column;gap:10px} #db808 .csheet input{font:inherit;font-size:13px;color:var(--ink);background:var(--card2);border:1px solid var(--line2);border-radius:10px;padding:10px 12px} #db808 .csheet .muted{color:var(--dim);font-size:11px;line-height:1.5} #db808 .csheet .g2{background:var(--ctrl);color:var(--ink);border:1px solid var(--line)} #db808 #authGate{position:fixed;inset:0;z-index:300;display:none;align-items:center;justify-content:center;background:var(--panel)} #db808[data-theme="dark"] #authGate{background:#0e0e12} /* gate raised by an action during a logged-out /profile/ preview: translucent so the profile stays visible behind it */ #db808 #authGate.over-preview{background:rgba(12,12,18,.55);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)} #db808 #authGate.over-preview .agcard{box-shadow:0 24px 80px rgba(0,0,0,.5)} #db808 .agcard{width:min(360px,90vw);text-align:center;padding:30px 26px;background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:0 24px 70px rgba(0,0,0,.16)} #db808 .agbrand{font-weight:800;font-size:20px;margin-bottom:4px} #db808 .agbrand b{color:var(--acc)} #db808 .agsub{color:var(--dim);font-size:13px;margin-bottom:20px} #db808 .agcard input{width:100%;font:inherit;font-size:13px;color:var(--ink);background:var(--card2);border:1px solid var(--line2);border-radius:10px;padding:11px 12px;margin-bottom:10px} #db808 .agcard button{width:100%;display:flex;align-items:center;justify-content:center;gap:6px;text-align:center;font:inherit;font-weight:600;font-size:13px;padding:11px;border-radius:10px;cursor:pointer;border:1px solid var(--line);background:var(--ctrl);color:var(--ink);margin-bottom:8px} #db808 .agcard button.acc{background:var(--acc);color:#fff;border-color:transparent} #db808 .agor{color:var(--dim);font-size:11px;margin:6px 0} #db808 .agmsg{color:var(--acc);font-size:11px;min-height:16px;margin-top:6px} #db808 .cchip-ic{width:12px;height:12px;vertical-align:-2px;margin-right:2px;opacity:.9} #db808 .acct-top{display:flex;align-items:center;gap:11px;padding:2px 0 10px} #db808 .acct-av{width:38px;height:38px;border-radius:50%;background:var(--acc);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;flex:none} #db808 .acct-id{min-width:0;flex:1} #db808 .acct-name{font-weight:700;font-size:16px;line-height:1.15} #db808 .acct-email{color:var(--dim);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #db808 .acct-badge{font-size:10px;letter-spacing:.05em;font-weight:700;padding:4px 11px;border-radius:20px;background:var(--ctrl);color:var(--ink2);flex:none;margin-left:auto;align-self:center} #db808 .acct-badge.pro{background:linear-gradient(135deg,#ffdb85,#eaa81f 80%);color:#4a3600;border:none;font-weight:800} #db808 .pro-badge{display:inline-flex;align-items:center;font-weight:800;font-size:11px;letter-spacing:.05em;color:#4a3600;background:linear-gradient(135deg,#ffdb85,#eaa81f 80%);padding:5px 13px;border-radius:20px} #db808 .acct-prorow b,#db808 .acct-prorow span:first-child{color:var(--ink2)} #db808 .acct-cred{display:flex;align-items:center;justify-content:space-between;background:var(--card2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:13px;margin-bottom:4px} /* --- account modal: sectioned layout --- */ #db808 #cloudBody{gap:12px} #db808 .acct-top{margin-bottom:2px} #db808 .acct-sec{background:var(--card2);border:1px solid var(--line);border-radius:14px;padding:13px 14px 14px;display:flex;flex-direction:column;gap:9px} #db808 .acct-h{font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--dim);margin:0 0 1px} #db808 .acct-sec label.muted{margin-top:5px} #db808 .acct-sec label.muted:first-of-type{margin-top:0} #db808 .acct-sec>input,#db808 .acct-sec>textarea{width:100%;box-sizing:border-box} #db808 .acct-sec>input{background:var(--inset)} #db808 .acct-sec>textarea{resize:vertical;font:inherit;font-size:13px;background:var(--inset);color:var(--ink);border:1px solid var(--line2);border-radius:10px;padding:10px 12px;min-height:64px} #db808 .acct-sec>button{width:100%} #db808 .acct-sec .acct-cred{background:var(--inset);margin:0 0 3px} #db808 #cloudBody>#cloudOut{width:100%;margin-top:2px} #db808 .acct-cred b{color:var(--acc);font-family:var(--mono)} #db808 .agtoggle{color:var(--acc);font-size:11px;cursor:pointer;margin-top:2px} #db808 .agtoggle:hover{text-decoration:underline} #db808 #payModal .csheet{width:min(440px,94vw)} #db808 .pay-bal{font-family:var(--mono);font-size:13px;color:var(--ink2);background:var(--card2);border:1px solid var(--line);border-radius:10px;padding:9px 12px;text-align:center} #db808 .pay-bal b{color:var(--acc)} #db808 .pay-intro{font-size:11px;line-height:1.5} #db808 .pay-pro{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:14px 16px;border:none;border-radius:14px;background:var(--acc);color:#fff;cursor:pointer;transition:background .13s ease;text-align:left} #db808 .pay-pro:hover{background:color-mix(in srgb,var(--acc) 87%,#000)} #db808 .pay-pro .pp-l{display:flex;flex-direction:column;gap:2px} #db808 .pay-pro .pp-l b{font-size:14px;font-weight:700} #db808 .pay-pro .pp-l small{font-size:10px;opacity:.85} #db808 .pay-pro .pp-r{font-family:var(--mono);font-weight:700;font-size:20px;white-space:nowrap;text-align:right} #db808 .pay-pro .pp-r small{font-size:11px;opacity:.85;font-weight:500} #db808 .pay-div{display:flex;align-items:center;gap:10px;color:var(--dim);font-size:11px;margin:2px 0} #db808 .pay-div::before,#db808 .pay-div::after{content:'';height:1px;background:var(--line);flex:1} #db808 #packList{display:flex;flex-direction:column;gap:8px} #db808 .packbtn{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:13px 15px;border:1px solid var(--line);background:var(--card2);border-radius:13px;cursor:pointer;transition:transform .13s ease,border-color .13s ease,background .13s ease;font:inherit;color:var(--ink);text-align:left} #db808 .packbtn:hover{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 8%,transparent);transform:translateY(-1px)} #db808 .packbtn .pc{display:flex;align-items:center;gap:11px;min-width:0} #db808 .pcoins{display:flex;gap:1px;color:var(--acc);flex:none} #db808 .pcoins svg{width:15px;height:15px} #db808 .pct{display:flex;flex-direction:column;gap:1px;min-width:0} #db808 .pct b{font-weight:700;font-size:14px;letter-spacing:-.01em} #db808 .pct small{font-size:10px;color:var(--dim)} #db808 .packbtn .pp{font-family:var(--mono);font-size:14px;font-weight:700;color:#fff;background:var(--acc);padding:7px 13px;border-radius:9px;flex:none} #db808 .packbtn.featured{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc) inset} /* pack déjà obtenu : grisé, non cliquable. On le garde visible plutôt que de le retirer — un bouton qui disparaît ressemble à un bug, un bouton grisé confirme à l'utilisateur qu'il a bien eu l'offre. */ #db808 .packbtn.owned{opacity:.5;cursor:default;border-color:var(--line);background:var(--inset);box-shadow:none} #db808 .packbtn.owned:hover{border-color:var(--line);background:var(--inset);transform:none} #db808 .packbtn.owned .pp{background:var(--ctrl);color:var(--dim);font-size:11px;letter-spacing:.02em} /* pack de lancement (once_per_user) : surface en encre inversée — var(--ink) sur var(--panel), le même traitement que le bandeau promo. Sombre en thème clair, clair en thème sombre, AUCUNE couleur étrangère (l'or puis le rouge ont été essayés et rejetés). Badges (.pbadge) et pastille prix (.pp) gardent leur style d'origine — la pastille accent ressort très bien sur l'encre. */ #db808 .packbtn.launch{background:var(--ink);border-color:transparent;box-shadow:none;color:var(--panel)} #db808 .packbtn.launch:hover{border-color:transparent;background:color-mix(in srgb,var(--ink) 86%,var(--panel));transform:translateY(-1px)} #db808 .packbtn.launch .pct b,#db808 .packbtn.launch .pc{color:var(--panel)} #db808 .packbtn.launch .pct small{color:color-mix(in srgb,var(--panel) 72%,transparent)} #db808 .packbtn.launch.owned{background:var(--inset);color:var(--ink2);border-color:var(--line)} #db808 .packbtn.launch.owned .pct b{color:var(--ink2)} #db808 .packbtn.launch.owned .pct small{color:var(--dim)} #db808 .packbtn.launch.owned .pp{background:var(--ctrl);color:var(--dim)} #db808 .packbtn.launch.owned .pbadge{background:var(--ctrl);color:var(--dim)} /* ── bandeau promo (promo.js) ─────────────────────────────────────────────── HORS de #db808 (premier enfant de body) donc AUCUN token : couleurs littérales. Sobre et statique (demande drayki) : bande sombre en thème clair, claire en thème sombre. Le thème vit sur #db808[data-theme] côté workshop/account et sur body[data-theme] côté community — :has() couvre le premier cas. z-index 310 : au-dessus de la porte d'auth (fixed, z 300), son public premier étant les visiteurs non connectés. */ .sf-promo{position:relative;z-index:310;box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:100%;padding:11px 44px;background:#17171b;color:#ececf2;cursor:pointer;font:600 12px/1.2 Inter,-apple-system,system-ui,sans-serif;letter-spacing:.04em;text-align:center;user-select:none} .sf-promo:hover{background:#1f1f24} body:has(#db808[data-theme="dark"]) .sf-promo,body[data-theme="dark"] .sf-promo{background:#f2f2f5;color:#1d1d1f} body:has(#db808[data-theme="dark"]) .sf-promo:hover,body[data-theme="dark"] .sf-promo:hover{background:#e9e9ee} .sf-promo-x{position:absolute;top:50%;right:8px;transform:translateY(-50%);border:none;background:rgba(128,128,140,.18);color:inherit;font-size:13px;line-height:1;padding:4px 8px;border-radius:7px;cursor:pointer} .sf-promo-x:hover{background:rgba(128,128,140,.34)} #db808 .pbadge{display:inline-block;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:#fff;background:var(--acc);padding:2px 6px;border-radius:5px;vertical-align:2px;margin-left:7px} #db808 .iconpill{width:34px;height:34px;padding:0;display:inline-flex;align-items:center;justify-content:center;font-size:14px;line-height:1;color:var(--ink2);background:var(--card2);border:1px solid var(--line);border-radius:50%;cursor:pointer;transition:all var(--tr)} #db808 .iconpill:hover{background:var(--ctrl);border-color:var(--line2);color:var(--ink)} #db808 .helpsheet{width:min(680px,94vw);max-height:82vh;display:flex;flex-direction:column} #db808 .helpsheet .cb{overflow:auto;padding:2px 18px 18px} #db808 .cloudchip .cc-av{background:var(--acc)} #db808,#db808 *{text-transform:lowercase} #db808 .brand,#db808 .brand *,#db808 input,#db808 textarea,#db808 .cc-nm,#db808 .helpsheet,#db808 .helpsheet *{text-transform:none} #db808 .creditchip{display:inline-flex;align-items:center;gap:3px;font:inherit;font-size:12px;color:var(--ink2);background:var(--card2);border:1px solid var(--line);border-radius:20px;padding:7px 13px;cursor:pointer;transition:all var(--tr);line-height:1} #db808 .creditchip:hover{background:var(--ctrl);border-color:var(--line2)} #db808 .creditchip b{color:var(--acc);font-weight:700} #db808 .creditchip.pro{background:linear-gradient(135deg,#ffdb85,#eaa81f 80%);border:none;color:#4a3600;font-weight:800;letter-spacing:.09em;padding:7px 17px;pointer-events:none;cursor:default} #db808 .creditchip.pro:hover{filter:brightness(1.05)} #db808 .creditchip .cchip-ic{width:13px;height:13px;vertical-align:0;margin:0;display:block;opacity:1} #db808 .acct-colors{display:flex;flex-wrap:wrap;gap:7px;margin:2px 0 4px} #db808 .acct-colors .sw{width:22px;height:22px;border-radius:50%;border:2px solid var(--card);padding:0;cursor:pointer;box-shadow:0 0 0 1px var(--line);transition:transform .1s ease} #db808 .acct-colors .sw:hover{transform:scale(1.12)} #db808 .acct-colors .sw.on{box-shadow:0 0 0 2px var(--acc)} #db808 .helpsheet .info-lead{background:var(--card2);border:1px solid var(--line);border-left:3px solid var(--acc);border-radius:10px;padding:13px 15px;font-size:13px;line-height:1.6;margin:6px 0 20px;color:var(--ink2)} #db808 .helpsheet h3{display:flex;align-items:center;gap:8px;font-size:13px;margin:22px 0 9px;padding:0;border:none;color:var(--ink);font-weight:700} #db808 .helpsheet h3::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--acc);flex:none} #db808 .helpsheet p{font-size:13px;line-height:1.6;color:var(--ink2)} #db808 .helpsheet .term{color:var(--acc);font-weight:600} #db808 .fxnum{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--ink2);vertical-align:middle;margin-right:2px} #db808 .fxnum input[type=range]{width:88px;accent-color:var(--acc)} #db808 .fxnum b{font-family:var(--mono);color:var(--acc);min-width:14px;text-align:center} #db808 .acct-colors .sw-custom{position:relative;overflow:hidden;background:conic-gradient(from 0deg,#ff5c7a,#ff9f45,#ffd23f,#3ecf8e,#22c3e6,#4D4DFF,#a66bff,#ff6bd6,#ff5c7a);display:inline-flex;align-items:center;justify-content:center;box-shadow:0 0 0 1px var(--line)} #db808 .acct-colors .sw-custom input{position:absolute;inset:-4px;width:calc(100% + 8px);height:calc(100% + 8px);opacity:0;cursor:pointer;border:none;padding:0} #db808 input.pwmask{-webkit-text-security:disc;text-security:disc} #db808 .acct-colors .sw-apply{margin-left:4px;font-size:11px;font-weight:600;padding:5px 13px;border-radius:20px;background:var(--ctrl);color:var(--ink2);border:1px solid var(--line);cursor:pointer;transition:all var(--tr)} #db808 .acct-colors .sw-apply.ready{background:var(--acc);color:#fff;border-color:transparent} #db808 .stags{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 6px} #db808 .stag{font-size:11px;color:var(--ink2);background:var(--card2);border:1px solid var(--line);border-radius:20px;padding:6px 12px;cursor:pointer;transition:all var(--tr)} #db808 .stag:hover{border-color:var(--line2)} #db808 .stag.on{background:var(--acc);color:#fff;border-color:transparent} #db808 #oocGate{position:fixed;inset:0;z-index:130;display:none;align-items:center;justify-content:center;background:color-mix(in srgb,var(--panel) 92%,transparent);backdrop-filter:blur(3px)} #db808 .ooccard{max-width:360px;width:90%;text-align:center;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:30px 26px;box-shadow:0 20px 60px rgba(0,0,0,.4)} #db808 .oocic{font-size:26px;color:var(--acc);margin-bottom:6px} #db808 .oochead{font-size:20px;font-weight:800;color:var(--ink);margin-bottom:8px} #db808 .oocsub{font-size:13px;line-height:1.55;color:var(--ink2);margin:0 0 20px} #db808 .oocbtns{display:flex;gap:9px;justify-content:center} #db808 .oocbtns .acc{flex:1;padding:11px 10px;border-radius:11px;font-weight:700;cursor:pointer} #db808 .oocbtns .oocgold{background:linear-gradient(135deg,#ffeaa6,#f7c63d 55%,#e6a417);color:#4a3600;border:none;box-shadow:0 2px 10px rgba(240,178,40,.45)} #db808 .oocbtns .oocgold:hover{background:linear-gradient(135deg,#ffeaa6,#f7c63d 55%,#e6a417);filter:brightness(1.05)} #db808 #bootLoader{position:fixed;inset:0;z-index:99999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;background:var(--panel);transition:opacity .5s ease} #db808 #bootLoader.hide{opacity:0;pointer-events:none} #db808 .bl-logo,#db808 .bl-logo b{text-transform:none;font-size:26px;font-weight:800;letter-spacing:.01em} #db808 .bl-logo{color:var(--ink)} #db808 .bl-logo b{color:var(--acc)} #db808 .bl-spin{width:32px;height:32px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--acc);animation:blspin .8s linear infinite} @keyframes blspin{to{transform:rotate(360deg)}} #db808 .cloudchip .cc-pro{font-size:9px;font-weight:800;letter-spacing:.05em;color:#4a3600;background:linear-gradient(135deg,#ffdb85,#eaa81f 80%);padding:2px 8px;border-radius:20px;margin-left:5px;line-height:1.5} #db808 .fxguide{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:8px 0 4px} #db808 .fxg{display:flex;gap:11px;align-items:center;background:var(--card2);border:1px solid var(--line);border-radius:10px;padding:9px 11px} #db808 .fxg svg{width:60px;height:34px;flex:none;background:#0b0b10;border-radius:7px;padding:0} #db808 .fxg>div{font-size:11px;line-height:1.45;color:var(--ink2)} #db808 .fxg b{color:var(--ink)} @media(max-width:560px){#db808 .fxguide{grid-template-columns:1fr}} #db808 .addopt{display:flex;align-items:center;gap:0} #db808 .addopt-ic{display:inline-flex;align-items:center;width:20px;height:14px;color:var(--acc);flex:none;margin-right:9px;opacity:.9} #db808 .addopt-ic svg{width:20px;height:14px} #db808 .addopt:hover .addopt-ic{color:#fff} #db808 .bloomcv,#db808 canvas[id$="_scope"]{touch-action:none} #db808 #wave{touch-action:none} #db808 #playFab{display:none} @media (max-width:760px){ #db808 #playFab{display:flex;align-items:center;justify-content:center;position:fixed;right:16px;bottom:16px;z-index:120;width:52px;height:52px;border:none;border-radius:50%;background:var(--acc);color:#fff;font-size:16px;box-shadow:0 6px 20px rgba(0,0,0,.3),0 2px 6px rgba(0,0,0,.2);cursor:pointer;transition:transform .1s} #db808 #playFab:active{transform:scale(.93)} } #db808 .shoppill{display:inline-flex;align-items:center;gap:7px;padding:7px 15px;border-radius:20px;background:linear-gradient(135deg,color-mix(in srgb,var(--acc) 86%,#fff),var(--acc));color:#fff;font-size:12px;font-weight:700;letter-spacing:.01em;text-decoration:none;border:none;cursor:pointer;white-space:nowrap;box-shadow:0 2px 9px color-mix(in srgb,var(--acc) 38%,transparent);transition:transform .12s ease,box-shadow .12s ease,filter .12s ease} #db808 .shoppill::before{content:"";width:14px;height:14px;flex:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E");background-size:contain;background-repeat:no-repeat;background-position:center} #db808 .shoppill:hover{filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 5px 16px color-mix(in srgb,var(--acc) 48%,transparent)} #db808 .agforgot{cursor:pointer;opacity:.85} #db808 #bugText{font-family:var(--font);font-size:13px;padding:10px;border-radius:10px;border:1px solid var(--line);background:var(--card2);color:var(--ink);box-sizing:border-box} #db808 #resetModal{position:fixed;inset:0;z-index:310;display:none;align-items:center;justify-content:center;background:var(--panel)} #db808 #resetModal.show{display:flex} /* ========================================================================= MOBILE PASS Breakpoint scale used across the app: 760px = narrow / tablet (pre-existing, main workshop reflow) 560px = phone (header collapse, profile centring) 420px = small phone (final text clamps) ========================================================================= */ @media (max-width:560px){ /* header: "shop kits" collapses to its bag icon so the topbar stays one uncrowded row. The label is a bare text node, so font-size:0 is what hides it — the ::before icon is a background-image and is unaffected. */ #db808 .shoppill{width:34px;height:34px;padding:0;gap:0;font-size:0;justify-content:center;border-radius:50%;box-shadow:0 2px 7px color-mix(in srgb,var(--acc) 34%,transparent)} #db808 .shoppill::before{width:15px;height:15px} #db808 .shoppill:hover{transform:none} #db808 .topbar{padding:2px 2px 10px;gap:10px} #db808 .themectl{gap:7px} #app .tabbar{margin:10px 2px 18px;width:100%} #app .tabbtn{flex:1;text-align:center;padding:9px 10px} } @media (max-width:420px){ #db808 .themectl{gap:6px} #db808 .cloudchip{padding:4px 9px 4px 4px} } /* ---- icon buttons: fx-chain nav + 808 preset bar ----------------------- */ /* save / share / new moved out of the transport row and into the two browser bars, as icons — the row under the waveform was the most crowded strip. */ #db808 .chnav .chico{flex:0 0 auto;width:38px;padding:0;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);background:var(--ctrl);color:var(--ink2);border-radius:10px;cursor:pointer;transition:all var(--tr)} #db808 .chnav .chico svg{width:15px;height:15px;display:block} #db808 .chnav .chico:hover{background:var(--acc);border-color:transparent;color:#fff} #db808 .browser .prico{flex:0 0 auto;width:42px;padding:0;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);background:var(--ctrl);color:var(--ink2);border-radius:var(--rk);cursor:pointer;transition:all var(--tr)} #db808 .browser .prico svg{width:16px;height:16px;display:block} #db808 .browser .prico:hover{background:var(--acc);border-color:transparent;color:#fff} @media (max-width:560px){ /* keep the preset name readable once the two icons take their share */ #db808 .browser{gap:6px} #db808 .browser .navbtn{width:34px;font-size:16px} #db808 .browser .prico{width:38px} #db808 .curpre{padding:7px 12px;min-width:0} #db808 .cpname{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%} #db808 .chnav{gap:6px} #db808 .chnav .chico{width:34px} } /* small phones: the preset bar carries 6 items now (‹ name › save share new). Wrapping was tried first and orphaned a single stretched icon on row 2, so instead everything shrinks slightly and stays on one row. Budget at 320px: 30+30+3*32 + 5 gaps + 6 borders = 193, leaving ~100px for the name. */ @media (max-width:420px){ #db808 .browser{gap:5px} #db808 .browser .navbtn{width:30px;font-size:14px} #db808 .browser .prico{width:32px} #db808 .browser .prico svg{width:15px;height:15px} #db808 .curpre{padding:6px 10px} } /* ====================================================================== LOGIN GATE — credentials left, product showcase right Pure SVG/CSS: the gate renders before the audio engine boots, so none of this may depend on it. Four scenes cross-fade on a 20s loop (5s each). If a real screen recording ever exists, drop a