:root{--bg:#07090f;--panel:#0d1220;--line:#1c2540;--cyan:#00f0ff;--green:#00ff9d;--red:#ff2e63;--amber:#ffb800;--mut:#7d8bb0}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:#dfe6ff;font-family:'Vazirmatn',sans-serif;
background-image:radial-gradient(ellipse at 10% -10%,rgba(0,240,255,.09),transparent 50%),radial-gradient(ellipse at 100% 0%,rgba(255,46,99,.07),transparent 45%),linear-gradient(rgba(28,37,64,.25) 1px,transparent 1px),linear-gradient(90deg,rgba(28,37,64,.25) 1px,transparent 1px);
background-size:auto,auto,32px 32px,32px 32px;min-height:100vh}
.mono{font-family:'JetBrains Mono',monospace;direction:ltr;unicode-bidi:embed}
.panel{background:rgba(13,18,32,.88);border:1px solid var(--line);border-radius:14px;backdrop-filter:blur(6px);animation:rise .5s both}
.panel:nth-child(2){animation-delay:.08s}.panel:nth-child(3){animation-delay:.16s}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.glow{text-shadow:0 0 12px var(--cyan),0 0 30px rgba(0,240,255,.4)}
.demo{position:fixed;top:10px;left:10px;z-index:60;background:var(--amber);color:#1a1200;font-weight:900;padding:5px 12px;border-radius:999px;font-size:12px;box-shadow:0 0 20px rgba(255,184,0,.6);animation:pulse 1.6s infinite}
@keyframes pulse{50%{box-shadow:0 0 4px rgba(255,184,0,.2);transform:scale(.97)}}
.beat{animation:beat 1s infinite}
@keyframes beat{0%,100%{transform:scale(1)}20%{transform:scale(1.35)}40%{transform:scale(1)}}
.chip{border:1px solid var(--line);border-radius:10px;padding:6px 10px;white-space:nowrap;cursor:pointer;transition:.2s}
.chip:hover{border-color:var(--cyan)}
.chip.on{border-color:var(--cyan);box-shadow:0 0 12px rgba(0,240,255,.35) inset}
.btn{border-radius:10px;padding:8px 14px;font-weight:700;transition:.2s;border:1px solid var(--line)}
.btn:hover{filter:brightness(1.2)}
input,select{background:#070b16;border:1px solid var(--line);border-radius:8px;padding:6px 8px;color:#fff;width:100%}
input[type=range]{padding:0;accent-color:var(--cyan)}
input[type=checkbox]{width:auto;accent-color:var(--cyan)}
.scroll::-webkit-scrollbar{height:6px;width:6px}.scroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:6px}
.swim{display:inline-block;animation:swim 2s ease-in-out infinite}
@keyframes swim{50%{transform:translateX(-8px) rotate(-6deg)}}
.toast{animation:rise .3s both}
table td,table th{padding:6px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
a{color:var(--cyan)}