@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap";:root{--color-bg:#0f1117;--color-surface:#ffffff0a;--color-surface-hover:#ffffff14;--color-border:#ffffff14;--color-border-accent:#ffffff26;--color-text:#e8eaed;--color-text-muted:#9aa0a6;--color-text-dim:#5f6368;--color-primary:#7c4dff;--color-primary-hover:#651fff;--color-primary-glow:#7c4dff40;--color-accent:#00e5ff;--color-accent-glow:#00e5ff26;--color-success:#00c853;--color-danger:#ff5252;--color-danger-bg:#ff52521a;--color-canvas-bg:#fff;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:20px;--shadow-sm:0 1px 3px #0000004d;--shadow-md:0 4px 16px #0006;--shadow-lg:0 8px 32px #00000080;--shadow-glow:0 0 40px var(--color-primary-glow);--transition:.2s cubic-bezier(.4, 0, .2, 1);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:var(--color-text);background-color:var(--color-bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,system-ui,-apple-system,sans-serif;font-weight:400;line-height:1.5}*,:before,:after{box-sizing:border-box}body{background:var(--color-bg);background-image:radial-gradient(80% 50% at 50% -20%,#7c4dff26,#0000),radial-gradient(60% 40% at 80% 100%,#00e5ff14,#0000);min-width:320px;min-height:100vh;margin:0}#root{width:100%;margin:0 auto}.app-header{text-align:center;padding:2.5rem 2rem 1rem}.app-header h1{letter-spacing:-.03em;background:linear-gradient(135deg, var(--color-text) 0%, var(--color-accent) 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin:0 0 .25rem;font-size:2rem;font-weight:800}.app-header .subtitle{color:var(--color-text-muted);margin:0;font-size:.9rem;font-weight:400}.phase-stepper{justify-content:center;align-items:center;gap:0;max-width:500px;margin:1.5rem auto 2rem;display:flex}.phase-step{color:var(--color-text-dim);transition:var(--transition);white-space:nowrap;border-radius:100px;align-items:center;gap:.5rem;padding:.5rem 1rem;font-size:.8rem;font-weight:600;display:flex}.phase-step.active{background:var(--color-surface-hover);color:var(--color-text);box-shadow:0 0 20px var(--color-primary-glow)}.phase-step.completed{color:var(--color-success)}.phase-step .step-num{border:2px solid var(--color-text-dim);width:24px;height:24px;transition:var(--transition);border-radius:50%;justify-content:center;align-items:center;font-size:.7rem;font-weight:700;display:flex}.phase-step.active .step-num{background:var(--color-primary);border-color:var(--color-primary);color:#fff}.phase-step.completed .step-num{background:var(--color-success);border-color:var(--color-success);color:#fff}.phase-connector{background:var(--color-border);flex-shrink:0;width:32px;height:2px}.phase-connector.completed{background:var(--color-success)}.app-container{flex-direction:column;align-items:center;max-width:1100px;margin:0 auto;padding:0 2rem 3rem;display:flex}.workspace{justify-content:center;align-items:flex-start;gap:1.5rem;width:100%;display:flex}.canvas-container{background:var(--color-canvas-bg);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg), var(--shadow-glow);flex-shrink:0;padding:0;overflow:hidden}canvas{cursor:crosshair;display:block}.tools-panel{background:var(--color-surface);-webkit-backdrop-filter:blur(24px);border:1px solid var(--color-border);border-radius:var(--radius-xl);flex-direction:column;gap:1rem;width:280px;padding:1.25rem;display:flex}.instructions{color:var(--color-text-muted);background:var(--color-surface-hover);border-radius:var(--radius-md);border:1px solid var(--color-border);padding:.85rem 1rem;font-size:.82rem;line-height:1.6}.instructions strong{color:var(--color-text);margin-bottom:.35rem;font-size:.9rem;display:block}.tool-section h3{color:var(--color-text);text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--color-border);margin:0 0 .75rem;padding-bottom:.5rem;font-size:.85rem;font-weight:600}button{border-radius:var(--radius-sm);border:1px solid var(--color-border);background:var(--color-surface-hover);color:var(--color-text);cursor:pointer;transition:var(--transition);padding:.55em 1em;font-family:inherit;font-size:.85rem;font-weight:600}button:hover{border-color:var(--color-border-accent);background:#ffffff1f}button:active{transform:scale(.98)}button:disabled{opacity:.35;cursor:not-allowed;transform:none}.primary-button{background:var(--color-primary);color:#fff;box-shadow:0 4px 16px var(--color-primary-glow);border:none;padding:.75em 1.25em;font-size:.9rem;font-weight:700}.primary-button:hover{background:var(--color-primary-hover);box-shadow:0 6px 24px var(--color-primary-glow);transform:translateY(-1px)}.download-button{background:linear-gradient(135deg, var(--color-primary), #448aff);color:#fff;box-shadow:0 4px 16px var(--color-primary-glow);border:none;font-weight:700}.download-button:hover{box-shadow:0 8px 28px var(--color-primary-glow);transform:translateY(-1px)}.shape-grid{grid-template-columns:repeat(2,1fr);gap:.5rem;max-height:220px;padding-right:.35rem;display:grid;overflow-y:auto}.shape-grid::-webkit-scrollbar{width:4px}.shape-grid::-webkit-scrollbar-thumb{background:var(--color-border-accent);border-radius:4px}.shape-btn{border:1px solid var(--color-border);background:var(--color-surface);height:auto;min-height:44px;color:var(--color-text-muted);border-radius:var(--radius-sm);transition:var(--transition);justify-content:center;align-items:center;padding:.45rem .5rem;font-size:.78rem;font-weight:500;display:flex}.shape-btn:hover{background:var(--color-surface-hover);border-color:var(--color-border-accent);color:var(--color-text)}.shape-btn.active{border-color:var(--color-primary);color:var(--color-text);box-shadow:0 0 12px var(--color-primary-glow);background:#7c4dff1f}.color-grid{grid-template-columns:repeat(8,1fr);gap:2px;max-height:220px;padding-right:.35rem;display:grid;overflow-y:auto}.color-grid::-webkit-scrollbar{width:4px}.color-grid::-webkit-scrollbar-thumb{background:var(--color-border-accent);border-radius:4px}.color-btn{aspect-ratio:1;cursor:pointer;border:1px solid #ffffff0f;border-radius:3px;width:100%;padding:0;transition:transform .12s,box-shadow .12s;position:relative}.color-btn:hover{z-index:2;border-color:#ffffff4d;transform:scale(1.35);box-shadow:0 2px 8px #00000080}.color-btn.active{z-index:2;border:2px solid #fff;transform:scale(1.35);box-shadow:0 0 0 2px #fff3,0 2px 8px #00000080}.slider-label{color:var(--color-text-muted);text-align:left;margin-bottom:.35rem;font-size:.78rem;font-weight:500}input[type=range]{appearance:none;background:var(--color-border);border-radius:4px;outline:none;width:100%;height:4px;margin-bottom:1rem}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--color-primary);cursor:pointer;width:16px;height:16px;box-shadow:0 0 8px var(--color-primary-glow);transition:var(--transition);border-radius:50%}input[type=range]::-webkit-slider-thumb:hover{box-shadow:0 0 14px var(--color-primary-glow);transform:scale(1.2)}.delete-btn{background:var(--color-danger-bg);width:100%;color:var(--color-danger);border:1px solid #ff525233;font-size:.82rem;font-weight:600}.delete-btn:hover:not(:disabled){background:#ff52522e;border-color:#ff525266}.delete-btn:disabled{background:var(--color-surface);color:var(--color-text-dim);border-color:var(--color-border)}.controls{flex-direction:column;gap:.6rem;display:flex}.controls .secondary-btn{border:1px solid var(--color-border);color:var(--color-text-muted);background:0 0;font-size:.82rem}.controls .secondary-btn:hover{background:var(--color-surface-hover);color:var(--color-text)}.zodiac-overlay{pointer-events:none;border-radius:var(--radius-sm);background-position:50%;background-size:cover;width:90px;height:90px;position:absolute;top:16px;right:16px;box-shadow:0 2px 12px #00000026}@media (width<=900px){.workspace{flex-direction:column;align-items:center}.tools-panel{width:100%;max-width:700px}}