:root { --ink:#202028; --cream:#fffaf0; --purple:#7657ed; --yellow:#ffd75b; --pink:#ff8dad; --line:#292835; --muted:#716f7d; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--cream); font-family:ui-rounded, "Avenir Next", Avenir, system-ui, sans-serif; }
button, input { font:inherit; }
button { cursor:pointer; }
main { width:min(1180px, calc(100% - 40px)); margin:auto; }
.site-header { height:86px; display:flex; align-items:center; justify-content:space-between; border-bottom:2px solid var(--line); }
.brand { color:var(--ink); text-decoration:none; font-size:22px; font-weight:800; letter-spacing:-1px; }.brand span { display:inline-grid; place-items:center; width:31px; height:31px; color:white; background:var(--purple); border:2px solid var(--line); border-radius:50%; font-size:19px; transform:rotate(-12deg); margin-right:5px; }
.site-header p { font:500 11px ui-monospace, SFMono-Regular, Menlo, monospace; color:var(--muted); letter-spacing:.08em; text-transform:uppercase; }
.hero { min-height:322px; padding:61px 7% 43px; display:flex; position:relative; overflow:hidden; }.hero-copy { max-width:735px; z-index:1; }.eyebrow { margin:0 0 16px; font:500 11px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing:.13em; }.hero h1 { margin:0; font-size:clamp(46px, 6.2vw, 78px); line-height:.98; letter-spacing:-.075em; font-weight:800; }.hero h1 em { color:var(--purple); font-style:normal; }.lede { max-width:610px; margin:24px 0 0; font-size:15px; line-height:1.65; color:#575563; }
.sticker-cluster span { position:absolute; display:grid; place-items:center; border:2px solid var(--line); color:var(--ink); font-weight:800; box-shadow:5px 5px 0 var(--line); }.s1 { width:88px; height:88px; border-radius:50%; background:var(--yellow); top:42px; right:16%; font-size:51px; transform:rotate(15deg); }.s2 { width:58px; height:58px; border-radius:12px; background:var(--pink); top:168px; right:7%; font-size:32px; transform:rotate(-13deg); }.s3 { width:42px; height:55px; border-radius:50%; background:#9fe1c2; top:55px; right:4%; font-size:27px; transform:rotate(13deg); }
.studio { display:grid; grid-template-columns:1fr 1fr 1.13fr; border:2px solid var(--line); border-bottom:0; }.panel { min-width:0; min-height:470px; padding:27px; border-right:2px solid var(--line); }.panel:last-child { border:0; background:var(--purple); color:white; }.panel-heading { display:flex; align-items:flex-start; gap:13px; margin-bottom:27px; }.step { flex:0 0 auto; display:grid; place-items:center; width:25px; height:25px; border:1.5px solid currentColor; border-radius:50%; font:500 11px 'DM Mono',monospace; }.panel h2 { font-size:17px; letter-spacing:-.04em; margin:0 0 3px; }.panel-heading p { color:var(--muted); font-size:11px; margin:0; line-height:1.5; }
.upload-zone { min-height:175px; padding:22px; border:2px dashed #a6a3b1; border-radius:8px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; transition:.15s ease; }.upload-zone.dragover { background:#f1edff; border-color:var(--purple); transform:scale(1.01); }.upload-zone input { position:absolute; width:1px; height:1px; opacity:0; }.upload-icon { display:grid; place-items:center; width:36px; height:36px; background:var(--yellow); border:1.5px solid var(--line); border-radius:50%; font-size:23px; font-weight:700; margin-bottom:9px; }.upload-zone strong { font-size:13px; }.upload-zone > span:last-child { color:var(--muted); font-size:11px; margin-top:3px; }.examples-label { display:flex; gap:9px; align-items:center; margin:22px 0 12px; color:var(--muted); font:500 9px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing:.08em; }.examples-label::after { content:""; height:1px; background:#d6d2cc; flex:1; }.examples { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }.example { padding:5px 3px 7px; color:var(--ink); border:1.5px solid transparent; background:transparent; border-radius:6px; font-size:9px; text-align:center; }.example.active { border-color:var(--line); background:white; }.example-art { display:grid; place-items:center; height:54px; margin-bottom:4px; border-radius:4px; font-weight:800; }.star-art { color:#4e37c8; background:#ffe37e; font-size:38px; }.cat-art { color:#f9f3e8; background:#272535; font:700 22px Georgia,serif; }.logo-art { color:white; background:#f16e84; font-size:32px; }.file-name { margin:16px 0 0; color:var(--muted); font:10px ui-monospace, SFMono-Regular, Menlo, monospace; text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.motion-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; }.motion { min-height:114px; padding:12px 8px; text-align:center; color:var(--ink); background:#fffef9; border:1.5px solid #cbc8d0; border-radius:7px; transition:transform .15s, border-color .15s, background .15s; }.motion:hover { transform:translateY(-2px); }.motion.active { border:2px solid var(--ink); background:var(--yellow); box-shadow:3px 3px 0 var(--ink); }.motion-icon { height:41px; display:block; font-size:31px; line-height:38px; }.motion strong, .motion small { display:block; }.motion strong { font-size:12px; letter-spacing:-.03em; }.motion small { color:var(--muted); font-size:9px; margin-top:2px; }.motion.active small { color:#4a4642; }.shake { animation:shake 1s infinite; }.bounce { animation:bounce 1s infinite; }.spin { animation:spin 1.2s linear infinite; } @keyframes shake { 0%,100%{transform:translate(0)}25%{transform:translate(-3px,2px)}75%{transform:translate(3px,-2px)} } @keyframes spin { to{transform:rotate(360deg)} } @keyframes bounce { 50%{transform:translateY(-8px)} }
.preview-heading { justify-content:space-between; align-items:center; }.preview-heading > div { display:flex; align-items:center; gap:12px; }.live-dot { font:500 10px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing:.1em; color:#372b81; background:#d8ccff; border-radius:12px; padding:5px 8px; }.preview-stage { height:285px; display:grid; place-items:center; background:#5e43d4; border:2px solid #29204c; border-radius:8px; overflow:hidden; background-image:radial-gradient(#947cf6 1px,transparent 1px); background-size:16px 16px; }.preview-stage canvas { width:min(100%, 285px); height:min(100%, 285px); image-rendering:auto; }.export-row { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:18px; }.export-row div { display:flex; flex-direction:column; }.export-row strong { font-size:15px; letter-spacing:-.03em; }.export-row span { color:#d9d0ff; font:10px ui-monospace, SFMono-Regular, Menlo, monospace; margin-top:3px; }.download-button { display:flex; align-items:center; gap:7px; padding:11px 14px; color:var(--ink); background:var(--yellow); border:2px solid var(--ink); box-shadow:3px 3px 0 #29204c; border-radius:5px; font-size:11px; font-weight:800; white-space:nowrap; }.download-button:active { transform:translate(2px,2px); box-shadow:1px 1px 0 #29204c; }.download-button:disabled { opacity:.65; cursor:wait; }.download-button span { color:inherit; margin:0; font:700 19px system-ui; }.privacy-note { margin:22px 0 0; padding-top:14px; border-top:1px solid #967ff4; color:#e3dcff; font-size:10px; }.privacy-note span { font-size:18px; vertical-align:middle; margin-right:4px; }
.how-it-works { padding:39px 4px 57px; display:flex; justify-content:space-between; align-items:center; gap:26px; }.how-it-works p { max-width:425px; margin:0; font-size:13px; line-height:1.6; color:#5d5a67; }.pills { display:flex; gap:6px; flex-wrap:wrap; }.pills span { border:1px solid var(--line); border-radius:20px; padding:7px 10px; font:500 9px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing:.08em; }
.toast { position:fixed; left:50%; bottom:24px; transform:translate(-50%, 20px); padding:11px 16px; color:white; background:var(--ink); border-radius:6px; font-size:12px; opacity:0; pointer-events:none; transition:.2s; box-shadow:4px 4px 0 var(--pink); }.toast.show { opacity:1; transform:translate(-50%,0); }
@media (max-width:900px) { .studio { grid-template-columns:1fr 1fr; }.preview-panel { grid-column:1 / -1; min-height:auto; border-top:2px solid var(--line)!important; }.preview-stage { height:320px; }.panel:nth-child(2) { border-right:0; }.hero { padding-left:2%; }.sticker-cluster { opacity:.6; } }
@media (max-width:570px) { main { width:min(100% - 24px, 520px); }.site-header { height:68px; }.site-header p { display:none; }.hero { min-height:270px; padding:43px 2px 31px; }.hero h1 { font-size:47px; }.lede { max-width:350px; font-size:13px; }.sticker-cluster { display:none; }.studio { display:block; }.panel, .panel:nth-child(2) { min-height:0; padding:22px; border-right:0; border-bottom:2px solid var(--line); }.preview-panel { border-top:0!important; border-bottom:0!important; }.preview-stage { height:280px; }.how-it-works { display:block; padding:29px 2px 42px; }.pills { margin-top:16px; }.motion { min-height:104px; } }