:root{--bg:#0b0614;--panel:#1a1029cc;--pink:#ff3d9a;--cyan:#3df5ff;--green:#7dff6b;--yellow:#ffe14d;--dim:#8a7aa8;--line:#3a2456}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:#eee;font-family:'JetBrains Mono',monospace}
body{background:radial-gradient(ellipse at 20% -10%,#3a0f3f 0,transparent 50%),radial-gradient(ellipse at 100% 100%,#0a2f3d 0,transparent 50%),repeating-linear-gradient(90deg,transparent 0 59px,#ffffff06 60px),repeating-linear-gradient(0deg,transparent 0 59px,#ffffff06 60px),var(--bg);min-height:100vh;padding-bottom:20px}
#bgflick{position:fixed;inset:0;pointer-events:none;background:var(--pink);opacity:0;mix-blend-mode:screen;z-index:0}
header,main,section,footer,details{position:relative;z-index:1}
header{display:flex;justify-content:space-between;align-items:center;padding:18px 24px;gap:12px;flex-wrap:wrap}
h1{font-family:'Monoton',cursive;font-weight:400;font-size:clamp(28px,5vw,54px);margin:0;color:var(--pink);text-shadow:0 0 12px #ff3d9a99,0 0 30px #ff3d9a55;display:inline-block}
.sub{margin:4px 0 0;color:var(--dim);font-weight:200;font-size:13px}
.hright{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.chip{padding:5px 10px;border-radius:99px;font-size:12px;font-weight:800;border:1px solid}
.chip.live{color:var(--green);border-color:var(--green);box-shadow:0 0 10px #7dff6b55}
.chip.paused{color:var(--dim);border-color:var(--line)}
.chip.error{color:#ff5050;border-color:#ff5050}
#auth-status{font-size:12px;color:var(--dim)}
#auth-status a{color:var(--cyan);cursor:pointer}
main{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:0 24px}
@media(max-width:860px){main{grid-template-columns:1fr;padding:0 12px}}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px;backdrop-filter:blur(6px);box-shadow:0 0 30px #ff3d9a11}
.ptitle{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--cyan);text-transform:uppercase;letter-spacing:.15em;margin-bottom:10px;gap:8px}
.hint{color:var(--dim);text-transform:none;letter-spacing:0}
.editor{position:relative;height:150px;background:#05030a;border:1px solid #2a5a2a;border-radius:10px;overflow:hidden}
.editor pre,.editor textarea{position:absolute;inset:0;margin:0;padding:14px;font:400 17px/1.5 'JetBrains Mono',monospace;white-space:pre-wrap;word-break:break-all;overflow:auto;border:0}
.editor textarea{background:transparent;color:transparent;caret-color:var(--green);resize:none;outline:none;z-index:2}
.editor pre{color:var(--green);z-index:1;text-shadow:0 0 6px #7dff6b66}
.crt::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,#0000 0 2px,#0000004d 3px);z-index:3}
.k-t{color:var(--pink);font-weight:800}.k-n{color:var(--cyan)}.k-o{color:var(--yellow)}.k-p{color:#fff}.k-f{color:#c89bff}
.err{min-height:20px;color:#ff6060;font-size:12px;margin:6px 2px}
.transport{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:6px}
.playbtn{width:58px;height:58px;border-radius:50%;border:2px solid var(--pink);background:#2a0d1f;color:var(--pink);font-size:22px;cursor:pointer;flex-shrink:0}
.playbtn.on{animation:pulse 1s infinite;background:var(--pink);color:#000}
@keyframes pulse{50%{box-shadow:0 0 0 8px #ff3d9a33,0 0 24px var(--pink)}}
.btn,.seg button,.tabs button,select{background:#140b20;color:#ddd;border:1px solid var(--line);border-radius:8px;padding:8px 11px;font:400 12px 'JetBrains Mono',monospace;cursor:pointer}
.btn:hover,.seg button:hover,.tabs button:hover{border-color:var(--cyan);color:var(--cyan)}
.btn.small{padding:4px 8px}
.seg,.tabs{display:flex;gap:0}
.seg button,.tabs button{border-radius:0}
.seg button:first-child,.tabs button:first-child{border-radius:8px 0 0 8px}
.seg button:last-child,.tabs button:last-child{border-radius:0 8px 8px 0}
.seg .on,.tabs .on{background:var(--cyan);color:#000;border-color:var(--cyan)}
label{font-size:11px;color:var(--dim);display:flex;align-items:center;gap:6px}
.vol input{accent-color:var(--pink);width:90px}
.tcount{font-size:12px;color:var(--green);margin-left:auto;font-weight:800}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.vis-panel{display:flex;flex-direction:column}
.viswrap{position:relative;flex:1;min-height:300px;background:#020104;border-radius:10px;overflow:hidden;border:1px solid #1d3540}
.viswrap canvas{width:100%;height:100%;display:block;position:absolute;inset:0}
.vis-panel:fullscreen{padding:10px;background:var(--bg)}
.pastry{padding:16px 24px 0}
.presets{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px}
.card{min-width:200px;max-width:240px;background:#170d24;border:1px solid var(--line);border-radius:12px;padding:12px;cursor:pointer;transition:.2s;flex-shrink:0}
.card:hover{transform:translateY(-3px);border-color:var(--pink);box-shadow:0 6px 20px #ff3d9a33}
.card b{display:block;color:var(--pink);font-size:13px;margin-bottom:6px}
.card code{font-size:11px;color:var(--green);word-break:break-all}
.card.rand b{color:var(--yellow)}
.mybeats{margin:16px 24px 0}
@media(max-width:860px){.mybeats{margin:16px 12px 0}.pastry{padding:16px 12px 0}}
.list{display:flex;flex-direction:column;gap:6px;font-size:12px}
.row{display:flex;align-items:center;gap:8px;padding:8px;border:1px solid var(--line);border-radius:8px;background:#120a1c}
.row code{flex:1;color:var(--green);word-break:break-all}
.row .t{color:var(--pink);min-width:90px}
.row .who{color:var(--dim);font-size:10px}
.empty{color:var(--dim);font-style:italic}
.help{margin:16px 24px;color:#bbb;font-size:13px;line-height:1.6}
.help summary{cursor:pointer;color:var(--cyan)}
.help code{color:var(--yellow)}
.drawer{position:fixed;top:0;right:0;height:100%;width:min(420px,92vw);background:#120a1cf2;border-left:1px solid var(--pink);padding:16px;transform:translateX(105%);transition:.3s;z-index:20;overflow:auto}
.drawer.open{transform:none}
.toast{position:fixed;left:50%;bottom:30px;transform:translate(-50%,80px);background:var(--pink);color:#000;font-weight:800;padding:10px 18px;border-radius:99px;transition:.3s;z-index:30;font-size:13px;opacity:0}
.toast.show{transform:translate(-50%,0);opacity:1}
footer{text-align:center;color:var(--dim);font-size:12px;padding:20px}
footer a{color:var(--cyan)}
@media(max-width:860px){
  .transport{position:sticky;bottom:0;background:#0b0614ee;padding:8px;border-radius:12px;z-index:5;border:1px solid var(--line)}
  .tcount{width:100%;margin:0}
  .viswrap{min-height:240px}
}