*{box-sizing:border-box}body{color:#09090b;background:#fff;margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif}button,input,select,textarea{font:inherit}.app{background:radial-gradient(circle at 0 0,#ffd1ea 0,#0000 30%),radial-gradient(circle at 100% 0,#fff08a 0,#0000 25%),linear-gradient(135deg,#fff7fb,#faf5ff 45%,#ecfeff);min-height:100vh;padding:22px;position:relative;overflow:hidden}.float{z-index:0;opacity:.4;pointer-events:none;font-size:46px;animation:4s ease-in-out infinite float;position:fixed}.f1{top:120px;left:30px}.f2{top:170px;right:80px}.f3{bottom:130px;left:60px}.f4{bottom:230px;right:50px}.f5{top:55%;left:10px}.f6{top:45%;right:20px}@keyframes float{50%{transform:translateY(-18px)rotate(8deg)}}.nav,.hero,.grid{z-index:1;max-width:1320px;margin:auto;position:relative}.nav{-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);background:#ffffffa6;border:1px solid #fffc;border-radius:999px;justify-content:space-between;align-items:center;margin-bottom:48px;padding:12px 16px;display:flex;box-shadow:0 20px 60px #db27771f}.brand{align-items:center;gap:12px;display:flex}.brand span{color:#fff;background:linear-gradient(135deg,#ec4899,#a855f7,#facc15);border-radius:999px;place-items:center;width:48px;height:48px;display:grid}.brand small{color:#71717a;display:block}.nav button,.heroBtns button,.outTop button,.export button{color:#fff;cursor:pointer;background:#09090b;border:0;border-radius:18px;align-items:center;gap:8px;padding:13px 18px;font-weight:900;transition:all .2s;display:inline-flex;box-shadow:0 14px 30px #00000026}.nav button:hover,.heroBtns button:hover,.outTop button:hover,.export button:hover,.modes button:hover,.presets button:hover{transform:translateY(-2px)scale(1.02)}.hero{grid-template-columns:1.05fr .95fr;align-items:center;gap:44px;margin-bottom:36px;display:grid}.pill{color:#be185d;background:#ffffffbf;border:1px solid #fff;border-radius:999px;padding:10px 16px;font-weight:900;display:inline-flex}.hero h1{letter-spacing:-.06em;margin:18px 0;font-size:clamp(44px,7vw,88px);font-weight:1000;line-height:.92}.hero h1 span{background:linear-gradient(90deg,#ec4899,#a855f7,#facc15);color:#0000;-webkit-background-clip:text;background-clip:text}.lead{color:#52525b;max-width:720px;font-size:20px;line-height:1.7}.heroBtns{flex-wrap:wrap;gap:12px;margin-top:28px;display:flex}.heroBtns button:nth-child(2){background:#ec4899}.heroBtns button:nth-child(3){background:#2563eb}.heroBtns button:nth-child(4){background:#7c3aed}.preview{-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);background:#ffffff9e;border:1px solid #fff;border-radius:38px;padding:18px;box-shadow:0 30px 90px #a855f72e}.previewTop{justify-content:space-between;align-items:center;margin-bottom:14px;display:flex}.previewTop small{color:#71717a}.art{text-align:center;background:linear-gradient(135deg,#fff,#ffd1ea,#e9d5ff);border-radius:32px;place-items:center;min-height:480px;padding:36px;display:grid;position:relative;overflow:hidden;box-shadow:inset 0 0 60px #ffffffe6}.art:before{content:"";filter:drop-shadow(0 25px 20px #00000014);background:#ffffff6b;border:1px solid #ffffffe6;border-radius:60px 60px 30px 30px;position:absolute;inset:48px 80px}.art h2{text-transform:uppercase;background:linear-gradient(#fff176,#f59e0b 45%,#7c2d12);color:#0000;-webkit-text-stroke:2px #1e3a8a;filter:drop-shadow(0 9px #00000059);-webkit-background-clip:text;background-clip:text;margin:0;font-size:clamp(48px,7vw,96px);font-weight:1000;line-height:.85;position:relative}.art h3{color:#ec4899;margin:20px 0 0;font-size:34px;position:relative}.art p{color:#52525b;font-weight:900;position:relative}.artEmoji{font-size:44px;position:absolute}.e1{top:30px;left:36px}.e2{top:60px;right:34px}.e3{bottom:38px;right:70px}.grid{grid-template-columns:420px 1fr;gap:26px;display:grid}.panel,.output,.export{-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);background:#ffffffad;border:1px solid #fff;border-radius:34px;padding:24px;box-shadow:0 24px 70px #00000014}.sticky{height:max-content;position:sticky;top:18px}.panel h2,.output h2,.export h2{margin:0 0 20px;font-size:28px;font-weight:1000}.panel label{margin:15px 0;display:block}.panel label span{text-transform:uppercase;letter-spacing:.12em;color:#71717a;justify-content:space-between;margin-bottom:8px;font-size:12px;font-weight:1000;display:flex}.panel input,.panel select,.output textarea{background:#fff;border:1px solid #e4e4e7;border-radius:18px;outline:none;width:100%;padding:14px 15px;box-shadow:inset 0 2px 8px #00000008}.panel input:focus,.panel select:focus,.output textarea:focus{border-color:#ec4899;box-shadow:0 0 0 4px #ec48991f}input[type=range]{accent-color:#ec4899;box-shadow:none;padding:0}.content{gap:24px;display:grid}.modes,.presets{grid-template-columns:repeat(3,1fr);gap:14px;display:grid}.modes button,.presets button{text-align:left;cursor:pointer;background:linear-gradient(135deg,#fff,#fce7f3,#ede9fe);border:0;border-radius:24px;padding:20px;font-weight:1000;transition:all .2s;box-shadow:0 16px 36px #ec48991f}.presets{grid-template-columns:repeat(2,1fr)}.presets small{color:#71717a;margin-top:8px;line-height:1.4;display:block}.output{color:#fff;background:#09090b}.outTop{justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px;display:flex}.outTop h2{align-items:center;gap:10px;margin:0;display:flex}.outTop div{gap:10px;display:flex}.outTop button:nth-child(2){background:#ec4899}.output textarea{color:#bbf7d0;background:#18181b;border-color:#3f3f46;min-height:300px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;line-height:1.6}.variation{background:#ffffffbf;border:1px solid #f5d0fe;border-radius:24px;margin:12px 0;padding:18px}.variation p{color:#52525b;-webkit-line-clamp:3;-webkit-box-orient:vertical;font-size:13px;line-height:1.6;display:-webkit-box;overflow:hidden}.variation button{color:#fff;cursor:pointer;background:#09090b;border:0;border-radius:14px;padding:10px 12px;font-weight:900}.export{background:linear-gradient(135deg,#fff,#fce7f3,#fef3c7);justify-content:space-between;align-items:center;gap:14px;display:flex}.export p{color:#52525b;margin:0}.export button:nth-of-type(2){background:#ec4899}.export button:nth-of-type(3){background:#7c3aed}@media (width<=980px){.hero,.grid{grid-template-columns:1fr}.sticky{position:relative;top:0}.modes,.presets{grid-template-columns:1fr 1fr}.export{flex-direction:column;align-items:flex-start}.nav{border-radius:28px}.nav button{display:none}}@media (width<=560px){.app{padding:12px}.hero h1{font-size:44px}.lead{font-size:16px}.modes,.presets{grid-template-columns:1fr}.art{min-height:360px}.art h2{font-size:50px}.outTop{display:block}.outTop div{margin-top:12px}.grid{gap:16px}.panel,.output,.export,.preview{border-radius:26px;padding:18px}}.colorBox{margin:15px 0}.colorTitle{text-transform:uppercase;letter-spacing:.12em;color:#71717a;margin-bottom:8px;font-size:12px;font-weight:1000;display:block}.selectedColors{color:#52525b;text-transform:capitalize;background:#fff;border:1px solid #e4e4e7;border-radius:18px;margin-bottom:12px;padding:12px 14px;font-weight:900}.colorGrid{grid-template-columns:repeat(2,1fr);gap:10px;display:grid}.colorChip{cursor:pointer;text-transform:capitalize;background:#fff;border:1px solid #e4e4e7;border-radius:18px;align-items:center;gap:9px;padding:10px;font-size:12px;font-weight:900;transition:all .2s;display:flex;box-shadow:0 8px 20px #0000000d}.colorChip i{border:2px solid #00000014;border-radius:999px;width:24px;height:24px;box-shadow:inset 0 0 0 1px #fff9}.colorChip.active{background:#fce7f3;border-color:#ec4899;box-shadow:0 0 0 4px #ec48991f}.colorChip:hover{transform:translateY(-1px)scale(1.02)}