@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,500;9..144,700&family=Kaushan+Script&family=Space+Grotesk:wght@400;500;600;700&display=swap");:root{color-scheme:dark;--bg-0:#0b0b14;--bg-1:#141a2b;--bg-2:#1f1735;--ink-0:#f7f4ff;--ink-1:#d6d2e7;--ink-2:#a59fb6;--accent:#ff9a62;--card:rgba(16,18,30,.78);--card-border:rgba(247,244,255,.08);--shadow:0 20px 50px rgba(0,0,0,.38);--surface:hsla(0,0%,100%,.06);--surface-border:hsla(0,0%,100%,.12)}[data-theme=light]{color-scheme:light;--bg-0:#f6f2ff;--bg-1:#e9fbf7;--bg-2:#fff6eb;--ink-0:#0d0d12;--ink-1:#2a2d37;--ink-2:#5c6270;--accent:#f04e31;--card:hsla(0,0%,100%,.85);--card-border:rgba(13,13,18,.08);--shadow:0 18px 40px rgba(24,26,33,.14);--surface:hsla(0,0%,100%,.65);--surface-border:rgba(13,13,18,.12)}*{box-sizing:border-box}body,html{margin:0;padding:0}body{min-height:100vh;display:flex;flex-direction:column;font-family:Space Grotesk,system-ui,-apple-system,sans-serif;color:var(--ink-0);background:radial-gradient(circle at top left,var(--bg-1) 0,transparent 55%),radial-gradient(circle at 35% 80%,var(--bg-2) 0,transparent 52%),linear-gradient(145deg,var(--bg-0),var(--bg-0) 62%)}a{color:inherit;text-decoration:none}main{flex:1 1;gap:2rem;padding:3.5rem clamp(1.5rem,5vw,4.5rem)}header,main{display:flex;flex-direction:column}header{gap:.75rem;max-width:680px;position:relative;padding-right:6.5rem}h1{font-family:Kaushan Script,cursive;font-size:clamp(2.4rem,5vw,4rem);font-weight:400;letter-spacing:-.02em}h1,p{margin:0}p{color:var(--ink-2);line-height:1.6}.app-shell{display:grid;grid-gap:2rem;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}.card{background:var(--card);border:1px solid var(--card-border);border-radius:24px;padding:1.5rem;box-shadow:var(--shadow);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.uploader{border:1.5px dashed var(--surface-border);border-radius:18px;padding:1.2rem;display:grid;grid-gap:.75rem;gap:.75rem;background:var(--surface)}.uploader input[type=file]{width:100%}.toolbar{display:grid;grid-gap:1rem;gap:1rem}.label{font-size:.9rem;color:var(--ink-2);margin-bottom:.35rem}.controls{display:grid;grid-gap:1rem;gap:1rem}.control-row{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}input[type=range]{width:100%}button,input[type=color],select{font-family:inherit;padding:.55rem .9rem;border-radius:999px;border:1px solid var(--surface-border);background:var(--surface);color:var(--ink-1);cursor:pointer;transition:transform .15s ease,border-color .15s ease,background .15s ease}button.primary{background:var(--ink-0);color:var(--bg-0);border:none}[data-theme=light] button.primary{color:#fff}button:disabled{opacity:.5;cursor:not-allowed}.preview-wrap{display:grid;grid-gap:1rem;gap:1rem;justify-items:center}.preview-frame{width:min(360px,100%);aspect-ratio:1/1;display:grid;place-items:center;border-radius:28px;background:radial-gradient(circle at 30% 20%,hsla(0,0%,100%,.12),hsla(0,0%,100%,.02));border:1px solid var(--surface-border);position:relative;overflow:hidden}.preview-frame canvas{width:100%;height:100%}.preview-frame.picking{cursor:crosshair}.hint{font-size:.85rem;color:var(--ink-2)}.size-buttons{display:flex;gap:.6rem;flex-wrap:wrap}.badge{display:inline-flex;align-items:center;gap:.4rem;font-size:.82rem;color:var(--ink-2)}.badge span{width:.7rem;height:.7rem;border-radius:50%;display:inline-block}.header-actions{position:absolute;top:0;right:0;display:flex;gap:.6rem}.icon-button{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:14px;background:linear-gradient(135deg,hsla(0,0%,100%,.18),hsla(0,0%,100%,.04));border:1px solid hsla(0,0%,100%,.18);color:var(--ink-0);box-shadow:0 12px 26px rgba(0,0,0,.2);position:relative;overflow:hidden}.icon{width:20px;height:20px;pointer-events:none}[data-theme=light] .icon-button{color:var(--ink-0);border:1px solid rgba(13,13,18,.12);background:linear-gradient(135deg,hsla(0,0%,100%,.9),hsla(0,0%,100%,.6));box-shadow:0 12px 26px rgba(24,26,33,.12)}.icon-button .sun{transform:translate(-50%,-50%) rotate(0deg) scale(1)}.icon-button .moon,.icon-button .sun{position:absolute;top:50%;left:50%;transition:transform .22s ease,opacity .22s ease}.icon-button .moon{transform:translate(-50%,-50%) rotate(90deg) scale(.6);opacity:0}[data-theme=light] .icon-button .sun{opacity:0;transform:translate(-50%,-50%) rotate(-90deg) scale(.6)}[data-theme=light] .icon-button .moon{opacity:1;transform:translate(-50%,-50%) rotate(0deg) scale(1)}.heart{color:#ff6b8a;animation:heartbeat 1.6s ease-in-out infinite}@keyframes heartbeat{0%,to{transform:scale(1)}30%{transform:scale(1.15)}60%{transform:scale(.95)}}.content{display:grid;grid-gap:2rem;gap:2rem;flex:1 1}footer{width:100%;border-top:1px solid var(--surface-border);background:var(--surface);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.support-content{display:grid;grid-gap:1rem;gap:1rem;color:var(--ink-2);font-size:.95rem;line-height:1.6}.support-link{display:inline-flex;align-items:center;justify-content:center;padding:.6rem 1.2rem;border-radius:999px;background:var(--ink-0);color:var(--bg-0);font-weight:600}.support-divider{border-top:1px solid var(--surface-border);padding-top:1.2rem;display:grid;grid-gap:.6rem;gap:.6rem}.support-title{color:var(--ink-0);font-weight:600}.support-link-alt{color:var(--accent);font-weight:600}.footer-inner,.support-subtitle{font-size:.85rem;color:var(--ink-2)}.footer-inner{max-width:1080px;margin:0 auto;padding:1rem clamp(1.5rem,4vw,4.5rem);display:flex;flex-direction:column;gap:.6rem;align-items:center;text-align:center}.footer-badges{display:inline-flex;gap:.5rem;align-items:center;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.footer-pill{background:var(--surface);border-radius:999px;padding:.15rem .5rem;border:1px solid var(--surface-border)}.modal-backdrop{position:fixed;inset:0;background:rgba(5,6,10,.65);display:grid;place-items:center;z-index:20}.modal{width:min(420px,90vw);background:var(--card);border:1px solid var(--card-border);border-radius:20px;padding:1.4rem;box-shadow:var(--shadow);display:grid;grid-gap:1rem;gap:1rem}.modal input[type=text]{width:100%;padding:.65rem .9rem;border-radius:12px;border:1px solid var(--surface-border);background:var(--surface);color:var(--ink-0)}.modal-actions{display:flex;gap:.6rem;justify-content:flex-end;flex-wrap:wrap}@media (max-width:720px){main{padding:2.5rem 1.5rem}}