:root{--cream:#fff8ec;--paper:#fffdf7;--cocoa:#6b3f25;--ink:#34251d;--tan:#c99d70;--line:rgba(107,63,37,.22);--shadow:0 24px 60px rgba(91,55,30,.14);--serif:"Gowun Batang",serif;--sans:"DM Sans",sans-serif}*{box-sizing:border-box}html{background:var(--cream);scroll-behavior:smooth}body{margin:0;color:var(--ink);font-family:var(--sans);background:radial-gradient(circle at 15% 10%,#fff 0,transparent 28%),radial-gradient(circle at 90% 35%,rgba(237,194,128,.14),transparent 24%),var(--cream);min-height:100vh;overflow-x:hidden}.grain{position:fixed;inset:0;pointer-events:none;opacity:.22;z-index:20;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E")}.decor{position:fixed;pointer-events:none;z-index:0;opacity:.65}.decor-sprinkles{width:min(680px,70vw);right:-190px;top:8vh;transform:rotate(-13deg)}.decor-crumbs{width:min(560px,62vw);left:-220px;bottom:4vh;transform:rotate(12deg)}.app-shell{width:min(100%,760px);margin:auto;min-height:calc(100vh - 52px);position:relative;z-index:1;padding:0 28px 80px}.topbar{height:105px;display:flex;align-items:center;justify-content:space-between}.brand-button{width:148px;border:0;padding:0;background:none;cursor:pointer}.brand-button img{display:block;width:100%;height:auto}.progress-dots{display:flex;gap:6px}.progress-dots i{width:6px;height:6px;background:var(--line);border-radius:50%;transition:.3s}.progress-dots i.active{width:22px;border-radius:10px;background:var(--cocoa)}.screen{display:none;min-height:calc(100vh - 180px);animation:screenIn .65s cubic-bezier(.2,.75,.2,1)}.screen.active{display:flex;flex-direction:column}@keyframes screenIn{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:none}}.eyebrow{font-size:11px;letter-spacing:.22em;font-weight:700;color:var(--cocoa)}h1,h2,h3,p{margin-top:0}h1,h2,h3{font-family:var(--serif);font-weight:700}h1{font-size:clamp(42px,9vw,72px);line-height:1.14;letter-spacing:-.055em;margin:20px 0 22px}h1 em{font-style:normal;color:#d66b46;position:relative}h1 em:after{content:"";position:absolute;left:-4px;right:-4px;bottom:1px;height:8px;background:#f3cf7b;z-index:-1;border-radius:50%}h2{font-size:clamp(38px,8vw,58px);line-height:1.1;letter-spacing:-.05em;margin:12px 0 16px}h3{font-size:32px;line-height:1.18;letter-spacing:-.04em}.hero-copy p,.section-heading p{font-family:var(--serif);font-size:16px;line-height:1.8;color:#725c4d}.hero-object{width:min(76vw,390px);margin:28px auto 24px;position:relative;filter:drop-shadow(0 24px 24px rgba(107,63,37,.15))}.hero-object img{width:100%;display:block;animation:cookieFloat 4s ease-in-out infinite}.orbit-copy{position:absolute;left:-48px;top:46%;font-size:9px;letter-spacing:.18em;transform:rotate(-90deg);color:var(--tan)}.stamp{position:absolute;right:-10px;top:5%;background:var(--cocoa);color:#fff;border-radius:50%;width:64px;height:64px;display:grid;place-content:center;text-align:center;font-family:var(--serif);font-size:21px;line-height:.8;transform:rotate(9deg);box-shadow:0 8px 0 rgba(107,63,37,.12)}.stamp small{font-family:var(--sans);font-size:7px;letter-spacing:.12em}@keyframes cookieFloat{50%{transform:translateY(-8px) rotate(1deg)}}button{font:inherit}.primary-button{margin-top:auto;min-height:58px;border:1px solid var(--cocoa);background:var(--cocoa);color:#fff;border-radius:3px;padding:15px 22px;font-weight:600;letter-spacing:.01em;display:flex;align-items:center;justify-content:center;gap:16px;cursor:pointer;box-shadow:0 10px 0 rgba(107,63,37,.12);transition:.2s}.primary-button:hover{transform:translateY(-2px);box-shadow:0 13px 0 rgba(107,63,37,.12)}.primary-button:active{transform:translateY(2px);box-shadow:0 7px 0 rgba(107,63,37,.12)}.primary-button:disabled{background:#cbbbae;border-color:#cbbbae;cursor:not-allowed;box-shadow:none;transform:none}.text-button{border:0;background:none;color:var(--cocoa);padding:21px;cursor:pointer;text-decoration:underline;text-underline-offset:5px}.back-button{align-self:flex-start;border:0;background:none;color:var(--cocoa);padding:3px 0 28px;cursor:pointer;font-size:13px}.section-heading{margin:10px 0 26px}.section-heading.compact{text-align:center;margin-top:24px}.upload-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:12px}.photo-slot{height:292px;position:relative;border:1px dashed var(--tan);background:rgba(255,253,247,.65);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;transition:.25s}.photo-slot.optional{height:246px;margin-top:46px}.photo-slot:hover{background:#fff;transform:rotate(-.5deg)}.photo-slot input{position:absolute;opacity:0;width:1px;height:1px}.photo-slot .plus{font-family:var(--serif);font-size:34px;color:var(--tan);margin-bottom:9px}.photo-slot strong{font-family:var(--serif);font-size:15px}.photo-slot small{font-size:9px;letter-spacing:.15em;color:#967b69;margin-top:6px}.photo-slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none}.photo-slot.has-image img{display:block}.photo-slot.has-image:after{content:"Change";position:absolute;right:8px;bottom:8px;background:rgba(52,37,29,.82);color:#fff;padding:6px 9px;font-size:8px;letter-spacing:.12em}.privacy-note{text-align:center;font-size:10px;color:#927d70;margin:18px 0 22px}.loading-screen{align-items:center;justify-content:center;text-align:center}.mixing-bowl{position:relative;width:min(64vw,310px);margin-bottom:45px}.mixing-bowl img{display:block;width:100%;animation:slowSpin 8s linear infinite}.scan-line{position:absolute;left:8%;right:8%;height:2px;top:12%;background:#e68f60;box-shadow:0 0 15px #e68f60;animation:scan 2s ease-in-out infinite alternate}@keyframes slowSpin{to{transform:rotate(360deg)}}@keyframes scan{to{top:88%}}.loading-screen h2{font-size:34px;margin:12px 0}.loading-screen p{font-family:var(--serif);color:#806b5c}.loading-dots:after{content:"";animation:dots 1.4s steps(4,end) infinite}@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%,100%{content:"..."}}.loading-bar{height:2px;width:min(72%,280px);background:var(--line);margin-top:18px;overflow:hidden}.loading-bar i{display:block;height:100%;background:var(--cocoa);animation:load 3.2s ease forwards}@keyframes load{from{width:3%}to{width:100%}}.result-screen{padding-bottom:20px}.result-intro{text-align:center}.result-intro h2{font-size:clamp(48px,11vw,76px);color:var(--cocoa);margin-bottom:8px}.flavor-note{font-family:var(--serif);color:#725c4d}.result-cookie-wrap{width:min(88vw,530px);align-self:center;position:relative;margin:18px 0 40px}.result-cookie-wrap img{width:100%;display:block;position:relative;z-index:2;filter:drop-shadow(0 35px 26px rgba(74,45,26,.2));animation:revealCookie .8s cubic-bezier(.2,.9,.3,1)}@keyframes revealCookie{from{opacity:0;transform:scale(.65) rotate(-12deg)}to{opacity:1;transform:none}}.halo{position:absolute;inset:8%;border-radius:50%;border:1px solid var(--tan);outline:1px solid rgba(201,157,112,.28);outline-offset:15px;animation:pulse 2.5s ease-in-out infinite}@keyframes pulse{50%{transform:scale(1.04);opacity:.45}}.flavor-number{position:absolute;right:-2%;top:8%;z-index:3;background:var(--paper);border:1px solid var(--line);padding:9px 12px;font-size:10px;letter-spacing:.14em}.reason-card,.match-card{background:var(--paper);border:1px solid var(--line);padding:26px;box-shadow:var(--shadow);position:relative}.reason-card:before{content:"";position:absolute;inset:7px;border:1px solid rgba(107,63,37,.08);pointer-events:none}.reason-card>span,.match-card>span{font-size:9px;letter-spacing:.2em;font-weight:700;color:var(--cocoa)}.reason-card p,.match-card p{font-family:var(--serif);font-size:17px;line-height:1.8;margin:15px 0 20px}.trait-row{display:flex;flex-wrap:wrap;gap:7px}.trait-row i{font-style:normal;border:1px solid var(--line);border-radius:30px;padding:7px 11px;font-size:10px;color:var(--cocoa)}.jar-story{margin:74px -28px 0;padding:62px 28px 20px;background:#ede1cf;display:grid;grid-template-columns:.85fr 1.15fr;align-items:center;overflow:hidden}.jar-copy{z-index:3}.jar-copy h3{margin:12px 0}.jar-copy p{font-family:var(--serif);font-size:13px;line-height:1.7;color:#735f51}.jar-stage{position:relative;height:430px;margin-right:-90px}.jar-image{position:absolute;height:100%;width:auto;left:50%;transform:translateX(-50%);z-index:2}.jar-cookie{position:absolute;width:58%;left:22%;bottom:4%;z-index:1;transform:rotate(-7deg);filter:drop-shadow(0 15px 12px rgba(50,30,20,.22))}.share-card{text-align:center;margin:0 -28px;padding:72px 28px 10px;background:var(--paper)}.share-card h3{font-size:40px;margin:12px 0}.share-card p{font-family:var(--serif);color:#735f51;line-height:1.7}.share-card .primary-button{width:100%;margin-top:28px}.share-status{min-height:26px;font-size:11px!important}.friend-invite{text-align:center;background:var(--paper);border:1px solid var(--line);padding:24px;box-shadow:var(--shadow)}.friend-invite img{width:140px;display:block;margin:12px auto;filter:drop-shadow(0 14px 10px rgba(74,45,26,.15))}.friend-invite p{font-family:var(--serif);line-height:1.6;margin-bottom:0}.friend-slot{height:220px;width:100%;margin-bottom:24px}.compare-screen{text-align:center}.compare-screen>h2{margin-top:12px}.cookie-pair{display:grid;grid-template-columns:1fr 30px 1fr;align-items:center;margin:30px 0}.cookie-pair div{display:flex;flex-direction:column;align-items:center}.cookie-pair img{width:100%;filter:drop-shadow(0 20px 14px rgba(74,45,26,.16))}.cookie-pair strong{font-family:var(--serif);font-size:15px;color:var(--cocoa)}.cookie-pair small{font-size:8px;letter-spacing:.18em;margin-top:4px;color:#927d70}.pair-mark{font-family:var(--serif);font-size:28px;color:var(--tan)}.match-card{margin-bottom:25px}.flavors-screen h2{font-size:56px}.five-flavors{width:100%;display:block;margin:auto;filter:drop-shadow(0 22px 18px rgba(74,45,26,.1))}footer{height:52px;background:var(--ink);color:#f5ead8;display:flex;justify-content:space-between;align-items:center;padding:0 max(22px,calc((100vw - 704px)/2));font-size:8px;letter-spacing:.16em}.toast{position:fixed;z-index:99;bottom:28px;left:50%;transform:translate(-50%,20px);background:var(--ink);color:#fff;padding:12px 18px;border-radius:2px;font-size:12px;opacity:0;pointer-events:none;transition:.3s}.toast.show{opacity:1;transform:translate(-50%,0)}@media(max-width:520px){.app-shell{padding-left:20px;padding-right:20px}.topbar{height:88px}.brand-button{width:125px}.jar-story,.share-card{margin-left:-20px;margin-right:-20px}.jar-story{padding-left:20px;padding-right:20px}.share-card{padding-left:20px;padding-right:20px}.jar-stage{height:340px;margin-right:-90px}.jar-copy h3{font-size:27px}.decor{opacity:.42}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}