:root{--bg1:#ff9a5c;--bg2:#ff5f7e;--bg3:#ffcf5a;--blob1:#ffd36e;--blob2:#ff7aa8;--blob3:#ff8f4d;--accent:#ff4b2b;--accent2:#ffb020;--accent-ink:#fff;--ink:#2b1d2f;--muted:#7d6a80;--panel:#ffffffd6;--panel-border:#ffffffb3;--card:#fff;--card-border:#2b1d2f14;--chip:#fff1ea;--selected:#fff4ec;--brand-ink:#fff;--font-display:"Fredoka", system-ui, sans-serif;--font-body:"Nunito", system-ui, sans-serif;--panel-w:440px;--radius:22px;--shadow:0 20px 60px #280a1e38, 0 2px 8px #280a1e14}*{box-sizing:border-box}html,body{height:100%;margin:0}body{font-family:var(--font-body);color:var(--ink);background:var(--bg2);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overflow:hidden}button{font:inherit;color:inherit;cursor:pointer}img{display:block}[hidden]{display:none!important}.bg{background:linear-gradient(135deg, var(--bg1), var(--bg2) 50%, var(--bg3));background-size:220% 220%;animation:18s ease-in-out infinite alternate bgshift;position:fixed;inset:0;overflow:hidden}@keyframes bgshift{0%{background-position:0 30%}to{background-position:100% 70%}}.blob{filter:blur(60px);opacity:.55;mix-blend-mode:screen;border-radius:50%;position:absolute}.b1{background:var(--blob1);width:46vmax;height:46vmax;animation:22s ease-in-out infinite alternate float1;top:-14vmax;left:-12vmax}.b2{background:var(--blob2);width:38vmax;height:38vmax;animation:26s ease-in-out infinite alternate float2;bottom:-12vmax;right:-10vmax}.b3{background:var(--blob3);width:30vmax;height:30vmax;animation:30s ease-in-out infinite alternate-reverse float1;bottom:-16vmax;left:30vw}@keyframes float1{to{transform:translate(8vmax,6vmax)scale(1.1)}}@keyframes float2{to{transform:translate(-6vmax,-8vmax)scale(.92)}}.stage{position:fixed;inset:0}#view{touch-action:none;cursor:grab;outline:none;width:100%;height:100%;display:block}#view:active{cursor:grabbing}.view-tools{gap:8px;display:flex;position:absolute;bottom:20px;left:20px}.tool{border:1px solid var(--panel-border);background:var(--panel);-webkit-backdrop-filter:blur(12px);border-radius:14px;place-items:center;width:44px;height:44px;transition:transform .15s,background .2s;display:grid;box-shadow:0 6px 18px #280a1e26}.tool:hover{transform:translateY(-2px)}.tool svg{fill:none;width:22px;height:22px;stroke:var(--ink);stroke-width:2px;stroke-linecap:round;stroke-linejoin:round}.tool[aria-pressed=true]{background:var(--accent)}.tool[aria-pressed=true] svg{stroke:var(--accent-ink)}#btn-sound .mute{display:none}#btn-sound[aria-pressed=false] .mute{display:inline}#btn-sound[aria-pressed=false] .wave{display:none}#btn-sound[aria-pressed=true]{background:var(--panel)}#btn-sound[aria-pressed=true] svg{stroke:var(--ink)}.hint{transform:translateX(calc(-50% - var(--panel-w) / 2));color:var(--brand-ink);text-shadow:0 1px 8px #00000040;opacity:.9;pointer-events:none;white-space:nowrap;font-size:14px;font-weight:700;transition:opacity .6s;position:absolute;bottom:26px;left:50%}.hint.gone{opacity:0}.brand{color:var(--brand-ink);pointer-events:none;align-items:center;gap:14px;display:flex;position:fixed;top:20px;left:24px}.logo{background:var(--panel);width:58px;height:58px;box-shadow:var(--shadow);border-radius:18px;place-items:center;font-size:34px;display:grid;overflow:hidden;transform:rotate(-6deg)}.logo img{object-fit:contain;width:100%;height:100%}.brand-name{font-family:var(--font-display);text-shadow:0 2px 12px #0000002e;font-size:30px;font-weight:700;line-height:1}.brand-tag{opacity:.92;text-shadow:0 1px 8px #0000002e;margin-top:4px;font-weight:700}.panel{width:var(--panel-w);background:var(--panel);border:1px solid var(--panel-border);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(22px)saturate(1.3);border-radius:30px;flex-direction:column;display:flex;position:fixed;top:18px;bottom:18px;right:18px;overflow:hidden}.steps{grid-template-columns:repeat(7,1fr);gap:4px;padding:16px 14px 10px;display:grid;position:relative}.step-dot{color:var(--muted);letter-spacing:.02em;background:0 0;border:0;flex-direction:column;align-items:center;gap:6px;padding:4px 0;font-size:10.5px;font-weight:800;display:flex;position:relative}.step-dot .num{background:var(--chip);width:34px;height:34px;font-family:var(--font-display);border-radius:50%;place-items:center;font-size:15px;transition:transform .25s cubic-bezier(.3,1.6,.5,1),background .25s,color .25s;display:grid}.step-dot.done .num{background:var(--accent2);color:var(--accent-ink)}.step-dot.active{color:var(--ink)}.step-dot.active .num{background:var(--accent);color:var(--accent-ink);box-shadow:0 6px 16px color-mix(in srgb, var(--accent) 45%, transparent);transform:scale(1.15)}.step-dot:after{content:"";background:var(--chip);border-radius:3px;width:calc(100% - 40px);height:3px;position:absolute;top:21px;left:calc(50% + 20px)}.step-dot:last-child:after{display:none}.step-dot.done:after{background:var(--accent2)}.step-body{scrollbar-width:thin;flex:1;padding:6px 20px 20px;overflow-y:auto}.step-title{font-family:var(--font-display);margin:8px 0 2px;font-size:28px;font-weight:700;line-height:1.1}.step-sub{color:var(--muted);margin:0 0 16px;font-weight:600}.anim-in>*{animation:.45s cubic-bezier(.2,.9,.3,1.2) both rise}.anim-in>:nth-child(2){animation-delay:40ms}.anim-in>:nth-child(3){animation-delay:80ms}.anim-in>:nth-child(4){animation-delay:.12s}.anim-in>:nth-child(5){animation-delay:.16s}@keyframes rise{0%{opacity:0;transform:translateY(14px)scale(.98)}}.grid2{grid-template-columns:1fr 1fr;gap:12px;display:grid}.opt{border:2px solid var(--card-border);background:var(--card);border-radius:var(--radius);text-align:left;flex-direction:column;gap:4px;padding:14px;transition:transform .18s cubic-bezier(.3,1.5,.5,1),border-color .2s,background .2s,box-shadow .2s;display:flex;position:relative}.opt:hover{transform:translateY(-3px);box-shadow:0 10px 24px #280a1e1a}.opt:active{transform:scale(.97)}.opt.on{border-color:var(--accent);background:var(--selected);box-shadow:0 10px 26px color-mix(in srgb, var(--accent) 25%, transparent)}.opt.on:after{content:"✓";background:var(--accent);width:24px;height:24px;color:var(--accent-ink);border-radius:50%;place-items:center;font-size:14px;font-weight:900;animation:.3s cubic-bezier(.3,1.8,.5,1) pop;display:grid;position:absolute;top:10px;right:10px}@keyframes pop{0%{transform:scale(0)}}.opt-name{font-family:var(--font-display);font-size:19px;font-weight:600;line-height:1.15}.opt-desc{color:var(--muted);font-size:13.5px;font-weight:600}.opt-price{color:var(--accent);margin-top:2px;font-size:14px;font-weight:800}.size-vis{place-items:center;height:84px;margin-bottom:6px;display:grid}.size-vis span{background:radial-gradient(circle,#ffd56b 0 58%,#f1b24f 64%,#c9792f 72%,#b66a28 100%);border-radius:50%;transition:transform .3s;display:block;box-shadow:inset 0 -3px 6px #00000026,0 4px 10px #0000001f}.opt.on .size-vis span{transform:rotate(25deg)scale(1.06)}.swatch{border-radius:50%;width:54px;height:54px;margin-bottom:6px;box-shadow:inset 0 -4px 8px #0003,inset 0 4px 6px #ffffff59,0 4px 10px #0000001f}.swatch.none{background:repeating-linear-gradient(45deg,#f3dfb8 0 6px,#e9cd98 6px 12px)}.levels{flex-direction:column;gap:10px;display:flex}.level{flex-direction:row;align-items:center;gap:14px;padding:12px 14px}.level .bars{flex:none;align-items:flex-end;gap:4px;width:74px;height:34px;display:flex}.level .bars i{background:var(--chip);border-radius:5px;flex:1}.level .bars i.f{background:linear-gradient(#ffe38a,#f6c64c)}.level .grow{flex:1}.crust-vis{flex:none;width:80px;height:34px}.crust-vis path{fill:#e2a04e;stroke:#b06a28;stroke-width:1.5px;stroke-linejoin:round}.bake-swatch{border-radius:14px;width:100%;height:46px;margin-bottom:8px;position:relative;overflow:hidden}.tool-row{gap:8px;margin-bottom:12px;display:flex}.search{border:2px solid var(--card-border);background:var(--card);color:var(--ink);font:inherit;border-radius:14px;outline:none;flex:1;min-width:0;padding:10px 14px;font-weight:600}.search:focus{border-color:var(--accent)}.chip{background:var(--chip);white-space:nowrap;border:0;border-radius:999px;padding:8px 14px;font-size:13.5px;font-weight:800;transition:background .2s,color .2s,transform .15s}.chip:hover{transform:translateY(-1px)}.chip.on{background:var(--accent);color:var(--accent-ink)}.chips{scrollbar-width:none;gap:6px;margin-bottom:12px;padding-bottom:4px;display:flex;overflow-x:auto}.chips::-webkit-scrollbar{display:none}.label{text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:4px 0 8px;font-size:12px;font-weight:800}.presets .chip{background:var(--card);border:2px solid var(--card-border)}.btn-dice{color:var(--accent-ink);background:var(--accent2)!important;border:0!important}.tgrid{grid-template-columns:repeat(3,1fr);gap:10px;display:grid}.tcard{border:2px solid var(--card-border);background:var(--card);border-radius:20px;flex-direction:column;transition:transform .2s cubic-bezier(.3,1.5,.5,1),border-color .2s,box-shadow .2s,background .2s;display:flex;position:relative}.tcard:hover{transform:translateY(-3px);box-shadow:0 10px 22px #280a1e1a}.tmain{text-align:center;background:0 0;border:0;border-radius:18px;flex-direction:column;align-items:center;gap:2px;padding:8px 6px 10px;display:flex}.tmain img{object-fit:contain;filter:drop-shadow(0 5px 5px #3c140a38)saturate(1.08);width:76px;height:76px;transition:transform .3s cubic-bezier(.3,1.6,.5,1)}.tcard:hover .tmain img{transform:scale(1.08)rotate(-5deg)}.tname{align-items:center;min-height:2.3em;font-size:13px;font-weight:800;line-height:1.15;display:flex}.tprice{color:var(--muted);font-size:12px;font-weight:800}.tcard.on{border-color:var(--accent);background:var(--selected)}.tcard.on .tprice{color:var(--accent)}.tcard .tick{background:var(--accent);width:22px;height:22px;color:var(--accent-ink);border-radius:50%;place-items:center;font-size:13px;font-weight:900;display:none;position:absolute;top:6px;right:6px}.tcard.on .tick{animation:.3s cubic-bezier(.3,1.8,.5,1) pop;display:grid}.tcard.bump{animation:.35s cubic-bezier(.3,1.6,.5,1) bump}@keyframes bump{50%{transform:scale(.92)}}.topts{flex-wrap:wrap;justify-content:center;gap:3px;padding:0 6px 8px;display:none}.tcard.on .topts{display:flex}.topts button{background:var(--card);width:30px;height:26px;box-shadow:inset 0 0 0 1.5px var(--card-border);border:0;border-radius:9px;place-items:center;padding:0;display:grid}.topts button.on{background:var(--accent);box-shadow:none}.topts button.on svg{fill:var(--accent-ink);stroke:var(--accent-ink)}.topts svg{width:16px;height:16px;fill:var(--ink);stroke:var(--ink);stroke-width:1.5px}.topts .x2{width:auto;padding:0 7px;font-size:11.5px;font-weight:900}.topts .x2.on{color:var(--accent-ink)}.empty{color:var(--muted);text-align:center;grid-column:1/-1;padding:30px 0;font-weight:700}.receipt{background:var(--card);border:2px solid var(--card-border);border-radius:var(--radius);margin-bottom:14px;padding:6px 16px}.line{border-bottom:1.5px dashed var(--card-border);justify-content:space-between;gap:12px;padding:10px 0;font-weight:700;display:flex}.line:last-child{border-bottom:0}.line small{color:var(--muted);font-weight:600;display:block}.line .amt{white-space:nowrap;font-weight:800}.line.total-line{font-family:var(--font-display);font-size:22px}.actions{grid-template-columns:1fr 1fr;gap:10px;display:grid}.actions .btn.primary{grid-column:1/-1;padding:16px;font-size:19px}.panel-foot{border-top:1px solid var(--card-border);background:color-mix(in srgb, var(--panel) 60%, transparent);justify-content:space-between;align-items:center;gap:10px;padding:14px 18px;display:flex}.total{flex-direction:column;display:flex}.total-label{color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-size:12px;font-weight:800}.total-price{font-family:var(--font-display);font-size:28px;font-weight:700;line-height:1}.total-price.tick{animation:.35s cubic-bezier(.3,1.8,.5,1) tick}@keyframes tick{50%{color:var(--accent);transform:scale(1.15)}}.nav-btns{gap:8px;display:flex}.btn{border:0;border-radius:16px;padding:12px 20px;font-size:16px;font-weight:800;transition:transform .15s,box-shadow .2s,opacity .2s}.btn:hover{transform:translateY(-2px)}.btn:active{transform:scale(.96)}.btn.primary{background:linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, var(--accent2)));color:var(--accent-ink);box-shadow:0 8px 20px color-mix(in srgb, var(--accent) 40%, transparent);font-family:var(--font-display);font-size:18px;font-weight:600}.btn.ghost{background:var(--chip)}.btn:disabled{opacity:.35;pointer-events:none}.brand-switch{max-width:calc(100vw - var(--panel-w) - 80px);flex-wrap:wrap;gap:6px;display:flex;position:fixed;top:96px;left:24px}.brand-switch a{color:var(--ink);background:var(--panel);border:1px solid var(--panel-border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:999px;padding:6px 12px;font-size:12.5px;font-weight:800;text-decoration:none}.brand-switch a.on{background:var(--accent);color:var(--accent-ink)}.brand-switch .lbl{color:var(--brand-ink);text-shadow:0 1px 6px #0003;padding:6px 2px;font-size:12.5px;font-weight:800}.loader{background:linear-gradient(135deg, var(--bg1), var(--bg2) 50%, var(--bg3));z-index:50;color:var(--brand-ink);place-content:center;justify-items:center;gap:18px;transition:opacity .6s,visibility .6s;display:grid;position:fixed;inset:0}.loader.done{opacity:0;visibility:hidden}.loader-pie{background:conic-gradient(#ffd56b 0 300deg, transparent 300deg);border-radius:50%;width:90px;height:90px;animation:1.1s linear infinite spin;box-shadow:inset 0 0 0 8px #e3a04a}@keyframes spin{to{transform:rotate(360deg)}}.loader-text{font-family:var(--font-display);font-size:22px;font-weight:600}.modal{z-index:40;background:#14061473;place-items:center;padding:20px;animation:.25s fade;display:grid;position:fixed;inset:0}@keyframes fade{0%{opacity:0}}.modal-card{background:var(--panel);border:1px solid var(--panel-border);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);text-align:center;width:100%;max-width:440px;box-shadow:var(--shadow);border-radius:30px;padding:30px;animation:.4s cubic-bezier(.2,.9,.3,1.3) rise}.modal-emoji{font-size:54px}.modal-card h2{font-family:var(--font-display);margin:6px 0;font-size:30px}.modal-card p{color:var(--muted);font-weight:600}.code{font-family:var(--font-display);letter-spacing:.12em;color:var(--accent);margin:10px 0 18px;font-size:34px}.modal-actions{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.toast{opacity:0;background:var(--ink);color:var(--card);z-index:45;pointer-events:none;border-radius:14px;padding:12px 20px;font-weight:800;transition:transform .35s cubic-bezier(.3,1.5,.5,1),opacity .25s;position:fixed;bottom:30px;left:50%;transform:translate(-50%,220%)}.toast.show{opacity:1;transform:translate(-50%)}.confetti{pointer-events:none;z-index:60;width:100%;height:100%;position:fixed;inset:0}@media (width<=860px){:root{--panel-w:0px}.stage{height:46svh;bottom:auto}.panel{border-bottom:0;border-radius:28px 28px 0 0;width:auto;inset:calc(46svh - 22px) 0 0}.brand{gap:10px;top:12px;left:14px}.logo{border-radius:13px;width:42px;height:42px;font-size:24px}.brand-name{font-size:21px}.brand-tag{font-size:12.5px}.brand-switch{display:none!important}.view-tools{flex-direction:column;gap:6px;inset:12px 12px auto auto}.tool{border-radius:12px;width:38px;height:38px}.tool svg{width:19px;height:19px}.hint{font-size:12.5px;bottom:32px;transform:translate(-50%)}.steps{padding:12px 10px 6px}.step-dot{font-size:9.5px}.step-dot .num{width:28px;height:28px;font-size:13px}.step-dot:after{width:calc(100% - 34px);top:18px;left:calc(50% + 17px)}.step-body{padding:4px 16px 16px}.step-title{font-size:23px}.tgrid{grid-template-columns:repeat(3,1fr);gap:8px}.tmain img{width:62px;height:62px}.panel-foot{padding:10px 16px calc(10px + env(safe-area-inset-bottom))}.total-price{font-size:24px}.btn{padding:11px 16px}}@media (width<=380px){.grid2{gap:8px}.opt{padding:11px}.tgrid{grid-template-columns:repeat(2,1fr)}}@media (prefers-reduced-motion:reduce){.bg,.blob{animation:none}}.opt.level{padding-right:44px}