#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:12.5px;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:12.5px;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:11.5px}
#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:11.5px;text-transform:lowercase}
#db808 .ctl .v{width:54px;flex:none;text-align:right;color:var(--ink);font-size:12.5px;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:11.5px}
#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:11.5px;text-transform:lowercase}
#db808 #globals input[type=range]{width:150px}#db808 #globals .v{color:var(--ink);min-width:46px;text-align:right;font-size:12.5px;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:12.5px;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:10.5px;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:12.5px}
#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:10.5px}
#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:11.5px;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:11.5px;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:11.5px;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:10.5px;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:12.5px;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:11.5px;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:15px;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:12.5px;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:10.5px;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:12.5px;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:12.5px;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:8.5px;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:9.5px;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:15px;line-height:1.7;margin:2px 0 22px;color:var(--ink2)}
#db808 .info h3{font-family:var(--font);font-weight:700;font-size:13.5px;text-transform:lowercase;margin:30px 0 12px;padding-bottom:9px;border-bottom:1px solid var(--line);color:var(--ink)}
#db808 .info p{font-size:13.5px;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:9.5px;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:13.5px;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:28px;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:15px}
}
#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:10.5px;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:12.5px;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:10.5px;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:11.5px;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:13.5px;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:11.5px;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}
#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:22px;margin-bottom:4px}
#db808 .agbrand b{color:var(--acc)}
#db808 .agsub{color:var(--dim);font-size:12.5px;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%;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:11.5px;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:15px;flex:none}
#db808 .acct-id{min-width:0;flex:1}
#db808 .acct-name{font-weight:700;font-size:15px;line-height:1.15}
#db808 .acct-email{color:var(--dim);font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#db808 .acct-badge{font-size:10.5px;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:12.5px;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:10.5px;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:11.5px;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:12.5px;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:11.5px;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:14.5px;font-weight:700}
#db808 .pay-pro .pp-l small{font-size:10.5px;opacity:.85}
#db808 .pay-pro .pp-r{font-family:var(--mono);font-weight:700;font-size:18px;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:14.5px;letter-spacing:-.01em}
#db808 .pct small{font-size:10.5px;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}
#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:12.5px;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:11.5px;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:30px;color:var(--acc);margin-bottom:6px}
#db808 .oochead{font-size:19px;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:25px;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:9.5px;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:17px;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}