:root{--bg:#141418;--panel:#1c1c22;--panel2:#24242c;--line:#2f2f39;--berry:#ff3e7f;--mint:#5cf2c4;--ink:#ecebf2;--dim:#8a8a99}
*{box-sizing:border-box}
html,body,#root{height:100%;margin:0}
body{background:radial-gradient(1200px 600px at 80% -10%,#3a1022 0%,transparent 60%),radial-gradient(900px 500px at -10% 110%,#0f2d27 0%,transparent 60%),var(--bg);color:var(--ink);font-family:'JetBrains Mono',monospace;font-size:12px;overflow:hidden}
.disp{font-family:'Syne',sans-serif}
.panel{background:var(--panel);border:1px solid var(--line)}
.checker{background-color:#d9d9de;background-image:linear-gradient(45deg,#b9b9c2 25%,transparent 25%),linear-gradient(-45deg,#b9b9c2 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#b9b9c2 75%),linear-gradient(-45deg,transparent 75%,#b9b9c2 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0}
.tbtn{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--dim);border:1px solid transparent;transition:all .15s;position:relative}
.tbtn:hover{color:var(--ink);background:var(--panel2);box-shadow:0 0 18px -4px var(--berry)}
.tbtn.on{color:#111;background:var(--mint);box-shadow:0 0 22px -4px var(--mint)}
.tbtn .key{position:absolute;right:3px;bottom:1px;font-size:8px;opacity:.6}
.btn{padding:6px 10px;border-radius:9px;background:var(--panel2);border:1px solid var(--line);color:var(--ink);transition:all .12s;white-space:nowrap}
.btn:hover{border-color:var(--berry);color:#fff}
.btn:disabled{opacity:.35;pointer-events:none}
.btn.hot{background:var(--berry);border-color:var(--berry);color:#fff;font-weight:700}
.btn.mint{background:var(--mint);border-color:var(--mint);color:#111;font-weight:700}
.chip{padding:5px 9px;border-radius:999px;border:1px solid var(--line);background:var(--panel2);cursor:pointer}
.chip:hover,.chip.on{border-color:var(--berry);color:var(--berry)}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px;background:var(--line);border-radius:4px;outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--berry);box-shadow:0 0 0 3px #ff3e7f33;cursor:pointer}
input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--berry);border:none}
input[type=text],select{background:var(--panel2);border:1px solid var(--line);color:var(--ink);border-radius:9px;padding:7px 9px;width:100%;outline:none;font-family:inherit;font-size:12px}
input[type=text]:focus,select:focus{border-color:var(--berry)}
.tab{padding:9px 4px;flex:1;text-align:center;color:var(--dim);border-bottom:2px solid transparent;font-family:'Syne';font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:10px}
.tab.on{color:var(--ink);border-color:var(--berry)}
.layer{display:flex;align-items:center;gap:8px;padding:6px;border-radius:10px;border:1px solid transparent;cursor:pointer}
.layer.on{border-color:var(--berry);background:#ff3e7f14}
.scroll::-webkit-scrollbar{width:6px;height:6px}.scroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:6px}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.rise{animation:rise .5s cubic-bezier(.2,.8,.2,1) both}
@keyframes spin{to{transform:rotate(360deg)}}
.spin{animation:spin 1s linear infinite}
.swatch{width:30px;height:30px;border-radius:8px;border:2px solid var(--line);cursor:pointer}
.swatch:hover{border-color:var(--berry)}