@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/InterVariable.ttf)format("truetype")}@font-face{font-family:Inter;font-style:italic;font-weight:100 900;font-display:swap;src:url(/fonts/InterVariable-Italic.ttf)format("truetype")}@font-face{font-family:LettersHome;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/letters-home.woff2)format("woff2")}:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--font-inter:Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-display:LettersHome, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--ink:#161922;--muted:#525866;--app-bg:oklch(97.02% 0 89.876);--surface:#fff;--surface-muted:#f7f7f8;--surface-hover:#f6f6f7;--surface-line:#1619221a;--control-border:#16192224;--about-surface:var(--surface);--progress-track:#1619221a;--progress-fill:#161922;--easter-glow:#f5c8423d;--icon-filter:none;--panel-shadow:0 0 0 1px #1619220f, 0 8px 32px #1619221f, 0 2px 8px #1619220f}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--ink:oklch(97.02% 0 89.876);--muted:oklch(97.02% 0 89.876/.62);--app-bg:oklch(19.13% 0 89.876);--surface:oklch(22.21% 0 89.876);--surface-muted:oklch(25.2% 0 89.876);--surface-hover:oklch(28.09% 0 89.876);--surface-line:oklch(97.02% 0 89.876/.1);--control-border:oklch(97.02% 0 89.876/.18);--about-surface:var(--surface);--progress-track:oklch(97.02% 0 89.876/.16);--progress-fill:#f5c842;--easter-glow:#f5c84257;--icon-filter:invert(1) brightness(1.3);--panel-shadow:0 0 0 1px oklch(97.02% 0 89.876/.08), 0 18px 42px oklch(0% 0 0/.28), 0 2px 8px oklch(0% 0 0/.18)}}.mochi-mode{--ink:#342137;--muted:#342137ad;--app-bg:oklch(96.5% .035 342);--surface:oklch(98.5% .025 342);--surface-muted:oklch(94% .052 342);--surface-hover:oklch(91% .07 342);--surface-line:#68365a24;--control-border:#68365a33;--about-surface:var(--surface);--progress-track:#68365a29;--progress-fill:#ff8bbe;--easter-glow:#ff8bbe52;--panel-shadow:0 0 0 1px #68365a1a, 0 18px 44px #68365a2e, 0 4px 14px #ff8bbe29}*{box-sizing:border-box}html,body,#app{min-height:100%;margin:0}body{color:var(--ink);background:var(--app-bg);font-family:var(--font-inter);-webkit-font-smoothing:antialiased}button,input,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed}img,svg,video{display:block}.app{font-family:var(--font-inter)}.desktop{flex-direction:column;width:100vw;height:100vh;display:flex;overflow:hidden}.desktop-nav{z-index:30;justify-content:space-between;align-items:center;display:flex;position:absolute;top:24px;left:24px;right:24px}.button-icon{flex-shrink:0}.brand-word{color:var(--ink);font-family:var(--font-display);letter-spacing:-.03em;padding:8px 0;font-size:34px;font-weight:400;line-height:1}.brand-signature{object-fit:contain;object-position:left center;width:135px;height:68px}.mochi-mode .brand-signature{filter:drop-shadow(0 8px 22px #ff8bbe59)}.desktop-stage{flex:1;position:relative;overflow:hidden}.desktop-stage:after,.compact:after{content:"";z-index:1100;pointer-events:none;opacity:0;background:radial-gradient(circle at 18% 22%, var(--easter-glow), transparent 22%), radial-gradient(circle at 82% 72%, #3b7cf52e, transparent 24%);transition:opacity .26s cubic-bezier(.23,1,.32,1);position:fixed;inset:0}.easter-egg-active .desktop-stage:after,.easter-egg-active .compact:after{opacity:1}.video-bg{z-index:0;pointer-events:none;position:absolute;inset:0}.video-bg img,.video-bg div{object-fit:cover;object-position:center;width:calc(38.5% + 40px);height:100%;position:absolute;top:0;left:calc(61.5% - 40px)}.video-bg div{mix-blend-mode:overlay;background:#00000029}.mochi-mode .video-bg img{filter:saturate(1.18)hue-rotate(312deg)brightness(1.06)}.mochi-mode .video-bg div{mix-blend-mode:soft-light;background:radial-gradient(circle at 78% 18%,#ff8bbe38,#0000 36%)}.side-panel{z-index:2;background:var(--surface);flex-direction:column;transition:width .5s cubic-bezier(.32,.72,0,1),border-radius .5s cubic-bezier(.32,.72,0,1);display:flex;position:absolute;top:0;bottom:0;left:0;overflow:hidden auto}.mochi-mode .side-panel{background:radial-gradient(circle at 18% 16%, #ff8bbe2e, transparent 28%), radial-gradient(circle at 82% 76%, #f5c84229, transparent 32%), var(--surface)}.side-content{flex-direction:column;flex:1;align-items:center;padding:120px 24px 48px;display:flex;overflow-y:auto}.side-content>*{width:100%;max-width:680px}.hero{text-align:center;flex-direction:column;align-items:center;gap:20px;margin-bottom:56px;display:flex}.hero h1{width:100%;color:var(--ink);font-family:var(--font-display);margin:0;font-size:32px;font-weight:500;line-height:40px}.hero p{width:100%;color:var(--muted);letter-spacing:-.176px;margin:0;font-size:16px;line-height:24px}.panel-toggle{z-index:10;background:0 0;border:0;width:44px;height:44px;padding:0;transition:left .5s cubic-bezier(.32,.72,0,1);position:absolute;top:50%;transform:translate(-50%,-50%)}.panel-toggle-frame{pointer-events:none;position:absolute;inset:-10.71% -17.86% -25%}.panel-toggle img{color:#0000;object-fit:contain;width:100%;height:100%;filter:var(--icon-filter);transition:transform .22s cubic-bezier(.23,1,.32,1);position:absolute;inset:0}.compact{background:var(--surface);flex-direction:column;min-height:100vh;display:flex}.compact-nav{justify-content:space-between;align-items:center;padding:24px 24px 0;display:flex}.compact-main{flex:1;justify-content:center;padding:48px 24px;display:flex}.compact-content{flex-direction:column;align-items:center;gap:40px;width:100%;max-width:560px;display:flex}.compact-hero{gap:12px;margin:0}.compact-hero h1{font-size:28px;line-height:36px}.compact-hero p{font-size:15px;line-height:22px}.compact-upload,.compact-loading{width:100%;height:320px}.compact-preview{border-radius:20px;width:100%;height:280px}.compact-controls{width:100%;margin-top:0}.compact-controls .control-row,.compact-controls{gap:32px}.compact-export-row{gap:8px}.export-row{align-items:center;gap:12px;display:flex}.soft-button{border:1px solid var(--control-border);background:var(--surface);height:44px;color:var(--ink);letter-spacing:-.084px;white-space:nowrap;border-radius:12px;justify-content:center;align-items:center;gap:6px;padding:8px 16px 8px 12px;font-size:14px;font-weight:500;line-height:20px;display:flex;box-shadow:0 0 0 1.5px #0000000d,0 4px 10px #00000008,0 1.5px 4px #00000008,0 1px 1px #0000000a,0 .5px .5px #0000000a}.export-gif-icon{filter:var(--icon-filter)}.soft-button.full{width:100%}.export-menu{align-items:center;display:flex;position:relative}.dropdown-caret{border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);width:7px;height:7px;transition:transform .18s;transform:translateY(-2px)rotate(45deg)}.dropdown-caret.open{transform:translateY(2px)rotate(225deg)}.export-dropdown{z-index:60;background:var(--surface);border:1px solid var(--control-border);min-width:220px;box-shadow:var(--panel-shadow);border-radius:14px;padding:6px;position:absolute;top:calc(100% + 8px);right:0}.export-dropdown button{width:100%;min-height:40px;color:var(--ink);text-align:left;white-space:nowrap;background:0 0;border:0;border-radius:10px;align-items:center;gap:8px;padding:8px 10px;font-size:14px;font-weight:500;display:flex}.export-dropdown button:hover:not(:disabled){background:var(--surface-hover)}.export-dropdown button:disabled{color:#9ca0aa}.code-export-icon{background:var(--surface-muted);width:28px;height:24px;color:var(--ink);letter-spacing:-.03em;border-radius:7px;flex-shrink:0;justify-content:center;align-items:center;font-size:9px;font-weight:750;display:inline-flex;box-shadow:inset 0 0 0 1px #16192212}.video-export-icon{width:38px}.mobile-export-menu{flex-direction:column;gap:8px;display:flex}.mobile-export-dropdown{width:100%;position:static}.menu-button,.close-button{color:var(--ink);background:0 0;border:0;padding:4px}.menu-button{flex-direction:column;gap:5px;display:flex}.menu-button span{background:var(--ink);border-radius:2px;width:22px;height:1.5px;display:block}.mobile-menu{z-index:100;background:color-mix(in oklab, var(--surface) 82%, transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);flex-direction:column;gap:16px;padding:24px;display:flex;position:fixed;inset:0}.mobile-menu-top{justify-content:space-between;align-items:center;margin-bottom:28px;display:flex}.upload-zone{background:0 0;border:1px dashed #d1d1d1;border-radius:24px;flex-direction:column;justify-content:center;align-items:center;gap:32px;height:450px;transition:background .16s,border-color .16s;display:flex}.upload-zone.active{background:var(--surface-muted);border-color:var(--ink)}.cards{width:150px;height:133px;position:relative}.cards img{transition:transform .22s cubic-bezier(.23,1,.32,1);position:absolute}.cards .back{z-index:0;width:87px;height:104px;top:10px;right:0;transform:translate(5px,5px)scale(1)}.cards .front{z-index:1;width:108px;height:133px;top:0;left:0;transform:translate(0)scale(1)}.mochi-mode .cards .back{transform:translate(6px,6px)scale(1)rotate(2deg)}.mochi-mode .cards .front{transform:translate(-1px)scale(1)rotate(-2deg)}.upload-zone.active .back{transform:translate(5px,8px)scale(1.06)}.upload-zone.active .front{transform:translate(-4px,-8px)scale(1.1)}.upload-zone h2{font-family:var(--font-display);margin:0 0 -24px;font-size:20px;font-weight:500;line-height:28px}.upload-zone p{color:var(--muted);letter-spacing:-.176px;margin:0;font-size:16px;line-height:24px}.error{color:var(--muted);text-align:center;font-size:14px}.loading-box{flex-direction:column;justify-content:center;align-items:center;gap:16px;height:450px;display:flex}.loading-box p{color:var(--muted);margin:0;font-size:14px}.progress{background:var(--progress-track);border-radius:999px;width:100%;height:2px;overflow:hidden}.progress span{border-radius:inherit;background:var(--progress-fill);transform-origin:0;height:100%;animation:2s cubic-bezier(.77,0,.175,1) forwards progress;display:block}@keyframes progress{0%{transform:scaleX(0)}to{transform:scaleX(1)}}.preview-card{border-radius:24px;justify-content:center;align-items:center;height:450px;transition:background .25s;display:flex;position:relative;overflow:hidden}.preview-card:after{content:"";border-radius:inherit;pointer-events:none;position:absolute;inset:0;box-shadow:inset 0 0 4px #00000017}.preview-inner{justify-content:center;align-items:center;width:100%;height:100%;padding:40px;display:flex}.replace-button{opacity:0;pointer-events:none;background:var(--surface);color:var(--ink);letter-spacing:-.084px;white-space:nowrap;border:0;border-radius:8px;padding:6px 12px;font-size:14px;font-weight:500;transition:opacity .18s;position:absolute;bottom:12px;left:50%;transform:translate(-50%);box-shadow:0 0 0 1.5px #0000000d,0 4px 10px #00000008,0 1.5px 4px #00000008}.controls{flex-direction:column;gap:32px;margin-top:56px;display:flex}.control-row{align-items:flex-start;gap:80px;display:flex}.control-group,.slider-control{flex-direction:column;flex:1;gap:16px;min-width:0;display:flex}.control-group label,.slider-control label{color:var(--ink);letter-spacing:-.084px;font-size:14px;font-weight:500}.swatches{flex-wrap:wrap;align-items:center;gap:14px;display:flex;position:relative}.custom-swatch,.swatch{border-radius:50%;flex-shrink:0;width:43px;height:43px;position:relative;overflow:hidden}.custom-swatch{cursor:pointer;background:0 0;border:0;padding:0}.custom-swatch span{background:radial-gradient(circle,#fff 0 36%,#0000 37%),conic-gradient(#ff4d4d,#ffd24d,#54c45f,#3b7cf5,#a855f7,#ff4d4d);border-radius:50%;transition:transform .14s cubic-bezier(.23,1,.32,1);position:absolute;inset:0}.custom-swatch:active span{transform:scale(.96)}.color-picker-popover{z-index:80;background:var(--surface);width:320px;max-width:min(320px,100vw - 32px);box-shadow:var(--panel-shadow);opacity:1;flex-direction:column;align-items:stretch;gap:18px;padding:18px;transition:opacity .18s cubic-bezier(.23,1,.32,1),transform .18s cubic-bezier(.23,1,.32,1);display:flex;position:fixed;transform:translateY(0)scale(1)}@starting-style{.color-picker-popover{opacity:0;transform:translateY(8px)scale(.97)}}@starting-style{.color-picker-popover.is-above{opacity:0;transform:translateY(-8px)scale(.97)}}.hsl-slider{flex-direction:column;gap:8px;display:flex}.hsl-slider span{color:var(--muted);font-size:12px;font-weight:500}.hsl-slider input{cursor:pointer;appearance:none;background:var(--track-gradient);border-radius:999px;outline:none;width:100%;height:21px;margin:0}.hsl-slider input::-webkit-slider-thumb{appearance:none;background:var(--knob-color);border:4px solid #fff;border-radius:50%;width:21px;height:21px;box-shadow:0 1px 2px #1619221f,0 0 0 1px #1619221a}.hsl-slider input::-moz-range-thumb{background:var(--knob-color);border:4px solid #fff;border-radius:50%;width:13px;height:13px;box-shadow:0 1px 2px #1619221f,0 0 0 1px #1619221a}.color-picker-done{background:var(--ink);height:36px;color:var(--surface);border:0;border-radius:999px;font-size:13px;font-weight:600}.swatch{cursor:pointer;box-shadow:inset 0 0 0 3.57px var(--swatch-ring,#161922), 0 0 0 1px #1619221a, 0 1px 2px #16192214;background:#fff;border:0;padding:0}.swatch:before{content:"";background:var(--swatch-fill,#161922);transform-origin:50%;border-radius:50%;transition:transform .3s cubic-bezier(.6,0,.35,1);position:absolute;inset:0;transform:scale(1);box-shadow:inset 0 0 0 1px #1619221f}.swatch.transparent{--swatch-ring:#c9ccd3;--swatch-fill:transparent;background-image:linear-gradient(45deg,#d9d9d9 25%,#0000 25% 75%,#d9d9d9 75%),linear-gradient(45deg,#d9d9d9 25%,#0000 25% 75%,#d9d9d9 75%);background-position:0 0,6px 6px;background-size:12px 12px}.swatch.selected:after{content:none}.swatch.selected:before{transition:transform .22s cubic-bezier(.2,0,0,1);transform:scale(.703)}.swatch:active:before{transform:scale(.66)}.slider-control>div{justify-content:space-between;align-items:center;display:flex}.slider-control span{color:#0a0d14;letter-spacing:-.084px;font-size:14px}.slider-control input{accent-color:#3e3c3c;width:100%}.about-button{z-index:1000;border:1px solid var(--control-border);background:var(--surface);height:40px;color:var(--ink);letter-spacing:-.08px;border-radius:40px;align-items:center;gap:7px;padding:0 16px 0 10px;font-size:13px;font-weight:500;display:flex;position:fixed;bottom:24px;right:24px;box-shadow:0 0 0 1px #1619220a,0 2px 8px #16192214,0 1px 2px #1619220f}.about-button img{object-fit:cover;border-radius:50%;width:22px;height:22px;box-shadow:0 0 0 1px #16192214}.about-panel{z-index:999;border:1px solid var(--surface-line);background:var(--about-surface);-webkit-backdrop-filter:blur(18px)saturate(1.12);opacity:0;pointer-events:none;transform-origin:100% 100%;width:368px;box-shadow:var(--panel-shadow);border-radius:18px;transition:opacity .22s,transform .22s cubic-bezier(.34,1.56,.64,1);position:fixed;bottom:76px;right:24px;overflow:hidden;transform:translateY(12px)scale(.97)}.about-panel.open{opacity:1;pointer-events:auto;transform:translateY(0)scale(1)}.about-header{border-bottom:1px solid var(--surface-line);align-items:center;gap:12px;padding:18px 20px 16px;display:flex}.about-header img{object-fit:cover;border-radius:50%;width:56px;height:56px;box-shadow:0 0 0 1px #16192214}.about-header h3,.about-section h4{color:var(--ink);font-family:var(--font-display);margin:0;font-weight:500}.about-header h3{font-size:18px;line-height:24px}.about-header p,.about-source{color:#8a8f9e;margin:3px 0 0;font-size:12px;line-height:16px}.about-section{padding:16px 20px 8px}.about-section h4{margin-bottom:10px;font-size:15px;line-height:22px}.about-links{gap:8px;display:grid}.about-links a,.about-sponsor{border:1px solid var(--surface-line);background:var(--surface-muted);min-height:38px;color:var(--ink);border-radius:12px;justify-content:space-between;align-items:center;padding:0 12px;font-size:13px;font-weight:500;text-decoration:none;display:flex}.about-sponsor{background:var(--ink);color:var(--surface);margin:8px 20px 16px}.about-source{margin:0;padding:0 20px 18px}.about-source a{color:var(--ink);text-underline-offset:2px;text-decoration:underline}.secret-toast{z-index:1200;border:1px solid var(--surface-line);background:color-mix(in oklab, var(--surface) 90%, #f5c842 10%);color:var(--ink);letter-spacing:-.03em;max-width:min(560px,100vw - 32px);box-shadow:var(--panel-shadow);text-align:center;border-radius:999px;padding:12px 18px;font-size:14px;font-weight:600;position:fixed;bottom:82px;left:50%;transform:translate(-50%)}.mochi-mode .secret-toast{background:linear-gradient(135deg,#fff0f7,#fff4bf)}@media (width<=899px){.about-panel{width:auto;left:16px;right:16px}.control-row{flex-direction:column;gap:32px}}@media (hover:hover) and (pointer:fine){.upload-zone:hover{background:var(--surface-muted);border-color:var(--ink)}.upload-zone:hover .back{transform:translate(5px,8px)scale(1.06)}.upload-zone:hover .front{transform:translate(-4px,-8px)scale(1.1)}.preview-card:hover .replace-button{opacity:1;pointer-events:auto}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important}.cards img,.custom-swatch span,.swatch:before,.panel-toggle img,.dropdown-caret,.replace-button,.color-picker-popover{transition-duration:1ms!important}.progress span{animation:.2s forwards progress}.color-picker-popover,.upload-zone:hover .back,.upload-zone.active .back,.upload-zone:hover .front,.upload-zone.active .front{transform:none!important}}