:root{color-scheme:dark;font-family:Segoe UI,system-ui,-apple-system,sans-serif;line-height:1.5}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{min-height:100vh;background:#0f0f1a;color:#e8e8f0}.app{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:2rem 1.5rem 3rem}.title{font-size:2rem;font-weight:700;letter-spacing:-.03em;background:linear-gradient(135deg,#ff6b9d,#c084fc,#60a5fa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:.25rem}.subtitle{color:#ffffff73;font-size:.95rem;margin-bottom:2rem}.creator-layout{display:flex;gap:2.5rem;max-width:780px;width:100%;align-items:flex-start}@media(max-width:700px){.creator-layout{flex-direction:column;align-items:center}}.preview-panel{flex-shrink:0;width:320px;border-radius:1.25rem;padding:1.5rem 1.5rem 1rem;display:flex;flex-direction:column;align-items:center;gap:1rem;border:1px solid rgba(255,255,255,.08);box-shadow:0 8px 32px #0006;transition:background .3s ease}.preview-actions{display:flex;gap:.75rem;width:100%}.btn{flex:1;padding:.6rem 1rem;border:none;border-radius:.6rem;font-size:.85rem;font-weight:600;cursor:pointer;transition:all .15s ease}.btn-primary{background:linear-gradient(135deg,#7c3aed,#6366f1);color:#fff}.btn-primary:hover{filter:brightness(1.15);transform:translateY(-1px)}.btn-secondary{background:#ffffff14;color:#c4b5fd;border:1px solid rgba(255,255,255,.1)}.btn-secondary:hover{background:#ffffff24}.controls-panel{flex:1;display:flex;flex-direction:column;gap:1.1rem;min-width:0}.selector{display:flex;flex-direction:column;gap:.4rem}.selector-label{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:#ffffff73}.color-row{display:flex;gap:.5rem;flex-wrap:wrap}.color-btn{width:32px;height:32px;border-radius:50%;border:2.5px solid transparent;cursor:pointer;transition:all .15s ease;outline:none}.color-btn:hover{transform:scale(1.15)}.color-btn.active{border-color:#c084fc;box-shadow:0 0 0 2px #c084fc59;transform:scale(1.1)}.option-row{display:flex;gap:.5rem;flex-wrap:wrap}.option-btn{padding:.4rem .85rem;border-radius:.5rem;border:1px solid rgba(255,255,255,.1);background:#ffffff0a;color:#ffffffb3;font-size:.8rem;font-weight:500;cursor:pointer;transition:all .15s ease}.option-btn:hover{background:#ffffff1a;color:#fff}.option-btn.active{background:#7c3aed40;border-color:#7c3aed;color:#c4b5fd}