:root{--bg:#1a1a1a;--panel-bg:#1e1e1ef2;--text:#e0e0e0;--accent:#50ff9e}*{box-sizing:border-box}body{background-color:var(--bg);color:var(--text);justify-content:center;align-items:center;min-height:100vh;margin:0;padding:0;font-family:Segoe UI,-apple-system,BlinkMacSystemFont,sans-serif;display:flex;overflow:hidden}#canvas-container{flex:auto;justify-content:center;align-items:center;min-width:0;display:flex;overflow:auto}canvas{image-rendering:pixelated;border:1px solid #ffffff1a;width:512px;height:512px;display:block;box-shadow:0 8px 40px #0009}#launch-link{color:var(--accent);background:#1e1e1ecc;border:1px solid #50ff9e4d;border-radius:6px;padding:8px 14px;font-size:.8rem;text-decoration:none;transition:all .25s}#launch-link:hover{border-color:var(--accent);background:#50ff9e1f}#top-bar{z-index:200;align-items:center;gap:12px;display:flex;position:fixed;top:16px;left:16px}#colors-link{color:var(--accent);background:#1e1e1ecc;border:1px solid #50ff9e4d;border-radius:6px;padding:8px 14px;font-size:.8rem;text-decoration:none;transition:all .25s}#colors-link:hover{border-color:var(--accent);background:#50ff9e1f}#webgpu-link:hover{border-color:var(--accent)!important;background:#50ff9e1f!important}#zoom-control{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#1e1e1ecc;border:1px solid #ffffff1a;border-radius:6px;align-items:center;gap:8px;padding:6px 12px;display:flex}#zoom-control label{color:#999;white-space:nowrap;font-size:.75rem}#zoom-control input[type=range]{width:100px;accent-color:var(--accent)}#zoom-control .val{color:var(--accent);text-align:right;min-width:24px;font-size:.75rem}#ui-panel{background:var(--panel-bg);-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);z-index:100;border:1px solid #ffffff1a;border-radius:12px;width:300px;max-height:calc(100vh - 40px);padding:20px;position:fixed;top:20px;right:20px;overflow-y:auto;box-shadow:0 8px 32px #0006}@media (width<=768px){body{min-height:100vh;display:block}#canvas-container{height:45vh;padding:56px 8px 8px;position:fixed;top:0;left:0;right:0}#ui-panel{border-bottom:none;border-left:none;border-right:none;border-radius:12px 12px 0 0;width:auto;max-height:none;padding:14px;inset:45vh 0 0}#top-bar{gap:8px;top:8px;left:8px}#zoom-control input[type=range]{width:70px}}#ui-panel::-webkit-scrollbar{width:8px}#ui-panel::-webkit-scrollbar-track{background:#ffffff0a;border-radius:4px}#ui-panel::-webkit-scrollbar-thumb{background:#50ff9e4d;border-radius:4px}#ui-panel::-webkit-scrollbar-thumb:hover{background:#50ff9e80}h1{text-transform:uppercase;letter-spacing:2px;color:#fff;border-bottom:2px solid #fff3;margin:0 0 16px;padding-bottom:10px;font-size:15px;font-weight:300}section{border-bottom:1px solid #ffffff14;margin-bottom:14px;padding-bottom:12px}section>h2{text-transform:uppercase;letter-spacing:1.5px;color:var(--accent);align-items:center;gap:8px;margin:0 0 10px;font-size:11px;font-weight:500;display:flex}section>h2 input[type=checkbox]{accent-color:var(--accent);cursor:pointer}.control-group{margin-bottom:10px}label{color:#aaa;letter-spacing:.3px;justify-content:space-between;margin-bottom:4px;font-size:11px;display:flex}label span.val{color:var(--accent);font-family:monospace;font-size:11px}input[type=range]{appearance:none;background:0 0;width:100%;height:18px}input[type=range]::-webkit-slider-runnable-track{background:#3a3a3a;border-radius:1.5px;width:100%;height:3px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--accent);cursor:pointer;border-radius:3px;width:12px;height:16px;margin-top:-7px}select{width:100%;color:var(--text);background:#2a2a2a;border:1px solid #ffffff26;border-radius:4px;padding:4px;font-size:11px}button#regen-btn{color:#fff;cursor:pointer;text-transform:uppercase;letter-spacing:1px;background:linear-gradient(135deg,#50ff9e26,#50ff9e00);border:1px solid #50ff9e66;border-radius:6px;width:100%;margin-top:4px;padding:10px;font-size:11px;transition:all .25s}button#regen-btn:hover{border-color:var(--accent);background:#50ff9e26}.color-mode-list{border:1px solid #ffffff1a;border-radius:6px;max-height:180px;padding:4px;overflow-y:auto}.color-mode-list::-webkit-scrollbar{width:6px}.color-mode-list::-webkit-scrollbar-track{background:#ffffff0a;border-radius:3px}.color-mode-list::-webkit-scrollbar-thumb{background:#50ff9e4d;border-radius:3px}.color-mode-item{cursor:pointer;border-radius:4px;align-items:center;gap:8px;padding:6px 8px;transition:background .2s;display:flex}.color-mode-item:hover{background:#ffffff0f}.color-mode-item.selected{background:#50ff9e1f;border:1px solid #50ff9e4d}.color-mode-item input[type=radio]{display:none}.color-mode-swatch{border:1px solid #ffffff26;border-radius:3px;flex-shrink:0;width:80px;height:18px}.color-mode-label{color:#ccc;white-space:nowrap;font-size:11px}button#reset-btn{color:#bbb;cursor:pointer;text-transform:uppercase;letter-spacing:1px;background:#ffffff0a;border:1px solid #ffffff26;border-radius:6px;width:100%;padding:10px;font-size:11px;transition:all .25s}button#reset-btn:hover{color:#fff;background:#ffffff14;border-color:#ffffff4d}.disabled-section{opacity:.45}.stats{color:#777;font-family:monospace;font-size:11px}.stats span{color:var(--accent)}.dep-dot{opacity:.25;vertical-align:middle;border-radius:50%;width:7px;height:7px;margin-left:5px;transition:opacity .2s,box-shadow .2s;display:inline-block}.dep-dot.dep-red{background:#e74c3c}.dep-dot.dep-yellow{background:#f1c40f}.dep-dot.dep-green{background:#2ecc71}.dep-dot.dep-blue{background:#3498db}.dep-dot.dep-purple{background:#9b59b6}.dep-dot.lit{opacity:1;animation:1s ease-in-out infinite dot-pulse;box-shadow:0 0 6px 1px}.dep-dot.dep-red.lit{box-shadow:0 0 6px 1px #e74c3c}.dep-dot.dep-yellow.lit{box-shadow:0 0 6px 1px #f1c40f}.dep-dot.dep-green.lit{box-shadow:0 0 6px 1px #2ecc71}.dep-dot.dep-blue.lit{box-shadow:0 0 6px 1px #3498db}.dep-dot.dep-purple.lit{box-shadow:0 0 6px 1px #9b59b6}@keyframes dot-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.3)}}