:root{--bg:#0d1020;--panel:#151a33;--line:#262d55;--mag:#ff3fa4;--cyan:#2ef2ff;--amber:#ffb53d;--text:#e8e9ff;--dim:#8a8fb8}
.light{--bg:#f4efe4;--panel:#fffaf0;--line:#e0d6c2;--text:#1d1a2e;--dim:#6d6880}
body{margin:0;font-family:'IBM Plex Mono',monospace;background:var(--bg);color:var(--text)}
#root>div{min-height:100vh;background:radial-gradient(circle at 15% 0%,rgba(255,63,164,.13),transparent 40%),radial-gradient(circle at 90% 30%,rgba(46,242,255,.1),transparent 40%),var(--bg);color:var(--text)}
.display{font-family:'Bungee',cursive}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:16px}
.pad{border:1px solid var(--line);border-radius:10px;background:var(--panel);box-shadow:0 4px 0 var(--line);transition:transform .08s,box-shadow .08s}
.pad:active{transform:translateY(3px);box-shadow:0 1px 0 var(--line)}
.pad-hot{background:var(--mag);color:#fff;border-color:var(--mag);box-shadow:0 4px 0 #a01d68}
.chip{border:1px solid var(--line);border-radius:999px;padding:4px 10px;font-size:12px;cursor:pointer}
.chip:hover{border-color:var(--cyan);color:var(--cyan)}
.vinyl{width:120px;height:120px;border-radius:50%;background:repeating-radial-gradient(circle,#111 0 3px,#222 3px 5px);position:relative;transition:transform 2s}
.vinyl::after{content:'';position:absolute;inset:40px;border-radius:50%;background:var(--mag)}
.drop:hover .vinyl,.spin{animation:spin 3s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.eq span{display:inline-block;width:4px;margin:0 1px;background:var(--cyan);animation:eq 1s ease-in-out infinite}
@keyframes eq{0%,100%{height:6px}50%{height:22px}}
.fadein{animation:fi .5s ease both}
@keyframes fi{from{opacity:0;transform:translateY(8px)}}
textarea,input,select{background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:10px}
.dim{color:var(--dim)}