@import"https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600&display=swap";:root{--glass-bg: rgba(255, 255, 255, .1);--glass-border: rgba(255, 255, 255, .2);--glass-blur: blur(12px);--accent-color: #ffffff;--text-color: #ffffff}body{margin:0;padding:0;overflow:hidden;background:#000;font-family:Outfit,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}canvas{display:block}.color-tracker{position:fixed;top:24px;left:24px;z-index:100;pointer-events:auto;display:flex;flex-direction:column;gap:12px;background:#0f172aa6;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid rgba(255,255,255,.1);padding:12px 16px;border-radius:16px;box-shadow:0 16px 40px #0006,inset 0 1px #ffffff1a;max-width:320px;transition:all .3s cubic-bezier(.4,0,.2,1)}.color-tracker-header{display:flex;align-items:center;justify-content:space-between;gap:8px}.color-tracker-label{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#fffc;text-shadow:0 2px 4px rgba(0,0,0,.3)}.toggle-counts{background:#ffffff1a;border:1px solid rgba(255,255,255,.15);box-shadow:0 2px 6px #0003;color:#fff;width:24px;height:24px;border-radius:6px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);flex-shrink:0}.toggle-counts:hover{background:#fff3;transform:translateY(-1px);box-shadow:0 4px 12px #0000004d}.toggle-counts:active{transform:translateY(1px)}.toggle-counts svg{width:12px;height:12px;opacity:.9}.color-tracker.show-counts .toggle-counts{background:#6366f1cc;border-color:#818cf880;box-shadow:0 4px 16px #4f46e566}.color-bar{display:flex;gap:10px 8px;flex-wrap:wrap}.color-item{display:flex;flex-direction:column;align-items:center;min-width:24px;width:max-content}.color-swatch{width:24px;height:24px;border-radius:6px;border:1px solid rgba(255,255,255,.2);position:relative;transition:all .2s cubic-bezier(.34,1.56,.64,1);cursor:pointer;flex-shrink:0;box-shadow:0 2px 8px #0003,inset 0 2px #ffffff26}.color-swatch:hover{transform:translateY(-4px) scale(1.1);box-shadow:0 8px 16px #0006,inset 0 2px #fff3;z-index:2;border-color:#fff6}.color-swatch.selected{transform:translateY(-4px) scale(1.1);box-shadow:0 8px 24px #fff6,inset 0 2px #ffffff80;z-index:3;border:2px solid #ffffff}.color-swatch.remaining.selected{box-shadow:0 8px 24px #4ade8066,inset 0 2px #4ade8080;border-color:#4ade80}.color-swatch.over.selected{box-shadow:0 8px 24px #ef444466,inset 0 2px #ef444480;border-color:#ef4444}.color-tracker.show-counts .color-count--remaining{background:#22c55e33;color:#4ade80;border-color:#4ade804d;box-shadow:0 2px 10px #22c55e1a}.color-tooltip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%) translateY(4px);background:#0f172ae6;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#ffffffe6;padding:8px 12px;border-radius:8px;font-size:11px;line-height:1.5;white-space:nowrap;pointer-events:none;opacity:0;visibility:hidden;transition:all .2s cubic-bezier(.4,0,.2,1);z-index:1000;border:1px solid rgba(255,255,255,.1);box-shadow:0 4px 16px #0006;text-align:left}.color-tooltip:after{content:"";position:absolute;top:100%;left:50%;transform:translate(-50%);border-width:5px;border-style:solid;border-color:rgba(15,23,42,.9) transparent transparent transparent}.color-swatch:hover .color-tooltip{opacity:1;visibility:visible;transform:translate(-50%) translateY(0)}.color-count{height:0;opacity:0;overflow:hidden;font-size:10px;font-weight:700;color:#fff;background:#ffffff26;border-radius:12px;transition:all .3s cubic-bezier(.4,0,.2,1);white-space:nowrap;box-shadow:0 2px 6px #0003;border:1px solid rgba(255,255,255,.05);text-align:center}.color-tracker.show-counts .color-count{height:16px;opacity:1;padding:2px 4px;margin-top:4px;display:flex;align-items:center;justify-content:center}.color-tracker.show-counts .color-count--over{background:#ef4444e6;color:#fff;box-shadow:0 2px 10px #ef444466;border-color:#ef4444cc}.brush-tracker-header{margin-top:8px;display:flex;align-items:center;gap:8px;border-top:1px solid rgba(255,255,255,.1);padding-top:12px}.brush-bar{display:flex;gap:8px}#brush-bar-2{margin-top:6px}.brush-btn{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#fff;padding:6px 12px;border-radius:6px;font-size:12px;font-family:inherit;cursor:pointer;transition:all .2s;flex:1;display:flex;align-items:center;justify-content:center}.brush-divider{width:1px;background:#fff3;margin:2px 0;border-radius:1px}.brush-btn:hover{background:#fff3}.brush-btn.selected{background:#6366f1cc;border-color:#818cf880;box-shadow:0 2px 8px #4f46e566}.ui-overlay{position:fixed;bottom:24px;right:24px;z-index:100;pointer-events:none;display:flex;align-items:center;gap:10px}.rerun-button{pointer-events:auto;background:#ffffff1a;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.2);color:#fff;padding:8px 18px;border-radius:99px;font-size:14px;font-weight:500;font-family:Outfit,sans-serif;letter-spacing:.5px;text-transform:uppercase;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 15px #0003;display:flex;align-items:center;gap:8px;opacity:.85}.rerun-button:hover{background:#fff3;transform:translateY(-2px);opacity:1;box-shadow:0 6px 20px #0000004d;border-color:#fff6}.rerun-button:active{transform:translateY(0);background:#ffffff26}.rerun-button svg{width:14px;height:14px;transition:transform .5s ease}.rerun-button:hover svg{transform:rotate(180deg)}.rerun-button.save-success{background:#22c55e59;border-color:#4ade8099;box-shadow:0 4px 20px #22c55e66;opacity:1}.rerun-button.save-error{background:#ef444459;border-color:#ef444499;box-shadow:0 4px 20px #ef444466;opacity:1}.rerun-button:disabled{cursor:not-allowed;pointer-events:none}.cam-overlay{position:fixed;top:24px;right:24px;z-index:100;pointer-events:none;display:flex;align-items:center;gap:8px}.cam-toggle-btn{pointer-events:auto;background:#0f172aa6;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid rgba(255,255,255,.15);color:#fff;padding:8px 14px;border-radius:99px;font-size:13px;font-weight:500;font-family:Outfit,sans-serif;letter-spacing:.5px;cursor:pointer;display:flex;align-items:center;gap:7px;opacity:.88;box-shadow:0 4px 15px #0000004d,inset 0 1px #ffffff1a;transition:all .25s cubic-bezier(.4,0,.2,1)}.cam-toggle-btn:hover{background:#ffffff26;border-color:#ffffff59;opacity:1;transform:translateY(-2px);box-shadow:0 6px 20px #00000059,inset 0 1px #ffffff26}.cam-toggle-btn:active{transform:translateY(0)}.cam-toggle-btn svg{flex-shrink:0;transition:transform .45s cubic-bezier(.34,1.56,.64,1)}.cam-toggle-btn:hover svg{transform:rotate(20deg)}.cam-toggle-btn.active{background:#6366f1bf;border-color:#818cf899;box-shadow:0 4px 18px #4f46e580,inset 0 1px #fff3;opacity:1}.cam-toggle-btn.active:hover{background:#6366f1e6;border-color:#a5b4fcb3}.cam-toggle-btn.active svg{transform:rotate(360deg);transition:transform .5s cubic-bezier(.34,1.56,.64,1)}.bg-color-wrapper{position:relative;pointer-events:auto}.bg-color-popover{position:absolute;top:calc(100% + 10px);right:0;background:#0f172ad9;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:12px 14px;box-shadow:0 16px 40px #00000073,inset 0 1px #ffffff1a;display:flex;flex-direction:column;gap:10px;min-width:180px;opacity:0;pointer-events:none;transform:translateY(-6px) scale(.97);transform-origin:top right;transition:opacity .2s cubic-bezier(.4,0,.2,1),transform .2s cubic-bezier(.4,0,.2,1)}.bg-color-popover.open{opacity:1;pointer-events:auto;transform:translateY(0) scale(1)}.bg-popover-label{font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#ffffff80}.bg-swatch-row{display:flex;gap:8px;align-items:center}.bg-swatch{width:28px;height:28px;border-radius:8px;border:2px solid rgba(255,255,255,.15);cursor:pointer;transition:all .18s cubic-bezier(.34,1.56,.64,1);box-shadow:0 2px 8px #00000040,inset 0 1px #fff3;flex-shrink:0;padding:0}.bg-swatch:hover{transform:translateY(-4px) scale(1.12);border-color:#ffffff80;box-shadow:0 6px 16px #0006,inset 0 1px #ffffff4d}.bg-swatch.selected{border-color:#fff;box-shadow:0 0 0 3px #ffffff59,0 4px 12px #0000004d;transform:translateY(-2px) scale(1.06)}.tool-hint{position:fixed;bottom:28px;left:50%;transform:translate(-50%) translateY(10px);z-index:200;display:inline-flex;align-items:center;gap:6px;background:#0f172ab8;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.12);border-radius:99px;padding:8px 18px;box-shadow:0 8px 32px #00000073,inset 0 1px #ffffff14;font-family:Outfit,sans-serif;font-size:13px;font-weight:400;color:#ffffffbf;letter-spacing:.3px;white-space:nowrap;pointer-events:none;-webkit-user-select:none;user-select:none;opacity:0;visibility:hidden;transition:opacity .25s cubic-bezier(.4,0,.2,1),transform .25s cubic-bezier(.4,0,.2,1),visibility .25s}.tool-hint--visible{opacity:1;visibility:visible;transform:translate(-50%) translateY(0)}.tool-hint__text{color:#ffffffa6}.tool-hint__sep{display:inline-block;width:1px;height:11px;background:#fff3;border-radius:1px;margin:0 6px;flex-shrink:0;align-self:center}.tool-hint__key{display:inline-flex;align-items:center;justify-content:center;background:#ffffff1f;border:1px solid rgba(255,255,255,.22);border-bottom-width:2px;border-radius:5px;padding:1px 8px;font-family:Outfit,sans-serif;font-size:12px;font-weight:600;color:#ffffffe6;box-shadow:0 1px 3px #0000004d;letter-spacing:.5px}.tool-hint__icon{display:inline-flex;align-items:center;opacity:.7}.preset-panel{position:fixed;top:24px;left:360px;z-index:100;pointer-events:auto;width:220px;max-height:calc(100vh - 48px);overflow-y:auto;background:#0f172aa6;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid rgba(255,255,255,.1);border-radius:16px;box-shadow:0 16px 40px #0006,inset 0 1px #ffffff1a;padding:12px 14px;opacity:0;visibility:hidden;transform:translate(-8px);transition:opacity .2s cubic-bezier(.4,0,.2,1),transform .2s cubic-bezier(.4,0,.2,1),visibility .2s}.preset-panel--visible{opacity:1;visibility:visible;transform:translate(0)}.preset-panel__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;gap:8px}.preset-panel__title{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#fffc;text-shadow:0 2px 4px rgba(0,0,0,.3)}.preset-panel__save-btn{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#ffffffbf;padding:4px 10px;border-radius:99px;font-size:11px;font-family:inherit;cursor:pointer;transition:all .2s;white-space:nowrap}.preset-panel__save-btn:hover:not(:disabled){background:#6366f199;border-color:#818cf880;color:#fff}.preset-panel__save-btn:disabled{opacity:.35;cursor:not-allowed}.preset-panel__body{display:flex;flex-direction:column;gap:12px}.preset-section__label{font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:#fff6;margin-bottom:6px}.preset-section__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.preset-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 4px;border-radius:10px;border:1px solid rgba(255,255,255,.1);background:#ffffff0d;cursor:pointer;transition:all .2s cubic-bezier(.34,1.56,.64,1)}.preset-card:hover{background:#ffffff1f;border-color:#ffffff40;transform:translateY(-2px);box-shadow:0 6px 16px #00000059}.preset-card--active{background:#6366f140;border-color:#818cf88c;box-shadow:0 4px 14px #4f46e559}.preset-card__thumb{border-radius:6px;display:block;width:56px;height:56px;image-rendering:pixelated}.preset-card__label{font-size:10px;color:#ffffffa6;text-align:center;line-height:1.2;word-break:break-word}.preset-card__delete{position:absolute;top:3px;right:3px;width:16px;height:16px;border-radius:50%;background:#ef4444b3;border:none;color:#fff;font-size:11px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s;padding:0}.preset-card:hover .preset-card__delete{opacity:1}.preset-guide{display:flex;flex-direction:column;gap:2px}.preset-guide__heading{font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:#fff6;margin-bottom:8px}.preset-guide__step{display:flex;align-items:flex-start;gap:10px;padding:9px 10px;border-radius:10px;background:#ffffff0a;border:1px solid rgba(255,255,255,.07);transition:background .18s}.preset-guide__step+.preset-guide__step{margin-top:4px}.preset-guide__step:hover{background:#ffffff14;border-color:#ffffff21}.preset-guide__icon{font-size:15px;line-height:1;color:#a5b4fce6;flex-shrink:0;margin-top:1px;font-weight:700}.preset-guide__body{display:flex;flex-direction:column;gap:3px}.preset-guide__title{font-size:11px;font-weight:700;color:#ffffffd9;letter-spacing:.2px}.preset-guide__desc{font-size:10.5px;line-height:1.45;color:#ffffff80}#view-mode-overlay{position:fixed;top:24px;left:50%;transform:translate(-50%);z-index:1000;pointer-events:none}.view-mode-back-btn{pointer-events:auto;background:#0f172ad9;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid rgba(255,255,255,.2);color:#fff;padding:10px 20px;border-radius:99px;font-size:14px;font-weight:600;font-family:Outfit,sans-serif;letter-spacing:1px;cursor:pointer;display:flex;align-items:center;gap:8px;box-shadow:0 8px 32px #00000080,inset 0 1px #ffffff1a;transition:all .3s cubic-bezier(.4,0,.2,1)}.view-mode-back-btn:hover{background:#6366f1e6;border-color:#a5b4fc80;transform:translateY(-2px);box-shadow:0 12px 40px #4f46e566,inset 0 1px #fff3}.view-mode-tooltip{position:absolute;top:-9999px;left:-9999px;background:#0f172ad9;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.15);border-radius:12px;padding:8px 12px;display:flex;align-items:center;gap:12px;box-shadow:0 8px 24px #00000080;pointer-events:none;z-index:1000;transition:opacity .15s;opacity:0}.view-mode-color-swatch{width:24px;height:24px;border-radius:6px;border:1px solid rgba(255,255,255,.3);box-shadow:inset 0 2px 4px #0003}.view-mode-color-info{display:flex;flex-direction:column}.view-mode-color-hex{font-size:14px;font-weight:700;color:#fff;letter-spacing:.5px}.view-mode-color-name{font-size:11px;color:#fff9;letter-spacing:.5px;text-transform:uppercase}