@import"https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700;12..96,800&family=Karla:wght@400;500;600;700&display=swap";*{margin:0;padding:0;box-sizing:border-box}:root{--tomato: #d8442c;--tomato-deep: #a72e1c;--squash: #e29a33;--butter: #f4e2bb;--blush: #f3d3c4;--basil: #2c6e49;--basil-deep: #1f5236;--paper: #f6eddd;--card: #fffaf1;--ink: #2a1f1c;--ink-print: #241a18;--rule: rgba(36, 26, 24, .9);--rule-soft: rgba(36, 26, 24, .16);--font-display: "Bricolage Grotesque", "Helvetica Neue", system-ui, sans-serif;--font-body: "Karla", system-ui, sans-serif;--radius: 14px;--radius-sm: 10px}*{box-sizing:border-box}html,body,#root{min-height:100%}body{margin:0;font-family:var(--font-body);line-height:1.5;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}.app{position:relative;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;padding:4vh 5vw 6vh;background-image:var(--paper-tex);background-size:320px 320px;background-repeat:repeat;background-color:var(--paper);overflow-x:clip}.grain{position:fixed;inset:0;z-index:20;pointer-events:none;opacity:.055;background-image:radial-gradient(circle at center,var(--ink-print) .6px,transparent .7px);background-size:4px 4px}.app__inner{position:relative;z-index:1;width:100%;max-width:34rem;display:flex;flex-direction:column;gap:1.6rem}.cutout{position:absolute;z-index:0;pointer-events:none;-webkit-user-select:none;user-select:none;width:34vw;max-width:150px;opacity:.92;filter:drop-shadow(2px 3px 0 rgba(36,26,24,.12));animation:drift 9s ease-in-out infinite}.cutout--tomato{top:-3vh;left:-7vw;transform:rotate(-12deg)}.cutout--herbs{right:-6vw;bottom:-2vh;width:30vw;max-width:130px;transform:rotate(14deg);animation-delay:-4s}.cutout--pasta{top:-4vh;right:-8vw;width:28vw;max-width:120px;transform:rotate(10deg)}.cutout--chilli{left:-7vw;bottom:6vh;width:22vw;max-width:95px;transform:rotate(-18deg);animation-delay:-5s}@keyframes drift{0%,to{translate:0 0}50%{translate:0 -10px}}.masthead{position:relative;z-index:1;text-align:center}.masthead__kicker{display:inline-block;font-family:var(--font-body);font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;font-weight:700;color:var(--card);background:var(--ink-print);padding:.35rem .8rem;transform:rotate(-1.2deg)}.masthead__title{font-family:var(--font-display);font-weight:800;font-size:clamp(2.2rem,10.5vw,3.2rem);letter-spacing:-.03em;line-height:.95;margin:.7rem 0 .5rem;color:var(--ink-print)}.masthead__title span{color:var(--tomato)}.masthead__sub{margin:0;font-size:.98rem;color:#2a1f1cb8}.app__inner--welcome{flex:1;justify-content:center;gap:2rem}.welcome{position:relative;text-align:center;background:var(--card);border:2px solid var(--rule);border-radius:var(--radius);padding:2.2rem 1.4rem 2rem;rotate:-.6deg;box-shadow:6px 7px #241a1824;animation:lay-down .55s cubic-bezier(.22,.9,.3,1.05) both}.welcome:after,.card:after{content:"";position:absolute;right:0;bottom:0;width:42%;height:30%;pointer-events:none;border-bottom-right-radius:var(--radius);background-image:radial-gradient(circle at center,var(--squash) 1.4px,transparent 1.6px);background-size:9px 9px;opacity:.3;mask-image:linear-gradient(315deg,#000 0%,transparent 72%);-webkit-mask-image:linear-gradient(315deg,#000 0%,transparent 72%)}.welcome>*{position:relative;z-index:1;rotate:.6deg}.welcome__plate{display:block;width:min(48vw,190px);height:auto;margin:0 auto;animation:sway 6s ease-in-out infinite}.welcome__title{font-family:var(--font-display);font-weight:800;font-size:clamp(2.1rem,9.5vw,2.9rem);letter-spacing:-.035em;line-height:.98;margin:1.1rem 0 .9rem;color:var(--ink-print);text-wrap:balance}.welcome__title span{color:var(--tomato);position:relative;white-space:nowrap}.welcome__title span:after{content:"";position:absolute;left:0;right:0;bottom:-.1em;height:.14em;border-radius:999px;background:var(--squash);opacity:.75;rotate:-1deg}.welcome__sub{margin:0 auto 1.7rem;max-width:26rem;font-size:1.02rem;line-height:1.6;color:#2a1f1cc7}.welcome__cta{width:100%}@keyframes lay-down{0%{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}@keyframes sway{0%,to{rotate:-3deg}50%{rotate:3deg}}.card{position:relative;background:var(--card);border:2px solid var(--rule);border-radius:var(--radius);padding:1.4rem 1.2rem 1.6rem;rotate:-.4deg;box-shadow:6px 7px #241a1824;animation:lay-down .45s cubic-bezier(.22,.9,.3,1.05) both}.card>*{position:relative;z-index:1;rotate:.4deg}.progress{display:flex;align-items:center;gap:.9rem;margin-bottom:1.3rem;padding-bottom:1rem;border-bottom:2px dashed var(--rule-soft)}.progress__meta{display:flex;flex-direction:column;gap:.15rem;font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--tomato-deep)}.progress__meta span:last-child{color:#2a1f1c80;letter-spacing:.1em}.progress__plate{position:relative;flex:0 0 auto;width:62px;height:62px;border-radius:50%;border:2px solid var(--rule);background:var(--butter);overflow:hidden;box-shadow:inset 0 0 0 4px var(--card)}.progress__dots{position:absolute;inset:0}.progress__dot{position:absolute;inset:0;transform-origin:50% 50%;clip-path:polygon(50% 50%,55.2% -99.9%,189.1% -6.2%);background:transparent;transition:background .35s ease}.progress__dot:nth-child(1){rotate:0deg}.progress__dot:nth-child(2){rotate:72deg}.progress__dot:nth-child(3){rotate:144deg}.progress__dot:nth-child(4){rotate:216deg}.progress__dot:nth-child(5){rotate:288deg}.progress__dot--done{background:var(--basil)}.progress__dot--active{background:var(--tomato)}.question__title{font-family:var(--font-display);font-weight:700;font-size:clamp(1.45rem,6.2vw,1.9rem);letter-spacing:-.025em;line-height:1.12;margin:0 0 .4rem;color:var(--ink-print);text-wrap:balance}.question__hint{margin:0 0 1.2rem;font-size:.88rem;font-weight:600;color:var(--basil)}.options{display:grid;gap:.6rem}.option{position:relative;display:flex;align-items:center;gap:.8rem;width:100%;text-align:left;font-family:var(--font-body);font-size:1.02rem;font-weight:600;color:var(--ink);background:var(--card);border:2px solid var(--rule);border-radius:var(--radius-sm);padding:.8rem 1rem;min-height:56px;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;box-shadow:3px 3px 0 var(--ink-print);transition:transform .12s ease,box-shadow .12s ease,background .16s ease,color .16s ease}.option__emoji{font-size:1.4rem;line-height:1;filter:saturate(.9)}.option__label{flex:1;min-width:0;line-height:1.25;overflow-wrap:break-word;text-wrap:balance}.option__tick{flex:0 0 auto;width:1.6rem;height:1.6rem;display:grid;place-items:center;border-radius:50%;border:2px solid var(--rule);background:var(--card);font-size:.95rem;font-weight:700;color:var(--ink-print);rotate:-8deg;transition:background .16s ease,color .16s ease}@media(hover:hover){.option:hover{background:var(--butter)}}.option--on{background:var(--basil);color:var(--card);box-shadow:3px 3px 0 var(--basil-deep);rotate:-.8deg}@media(hover:hover){.option.option--on:hover{background:var(--basil)}}.option--on .option__tick{background:var(--butter);color:var(--basil-deep);border-color:var(--basil-deep)}.option:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink-print)}.option:focus-visible,.btn:focus-visible,.back:focus-visible{outline:3px solid var(--basil);outline-offset:3px}.btn--continue{width:100%;margin-top:1.2rem;animation:nudge .3s ease both}.btn--continue:disabled{background:var(--butter);color:#2a1f1c6b;box-shadow:3px 3px 0 var(--rule-soft);border-color:var(--rule-soft);cursor:not-allowed}.btn--continue:disabled:active{transform:none;box-shadow:3px 3px 0 var(--rule-soft)}@keyframes nudge{0%{transform:translateY(6px);opacity:0}to{transform:none;opacity:1}}.back{display:inline-flex;align-items:center;min-height:44px;margin-top:1.1rem;background:none;border:none;font-family:var(--font-body);font-size:.92rem;font-weight:700;color:var(--tomato-deep);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;padding:.4rem .2rem;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}.back:disabled{opacity:.35;cursor:not-allowed}.result__badge{display:inline-block;font-family:var(--font-body);font-size:.66rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--card);background:var(--basil);padding:.3rem .7rem;margin-bottom:.9rem;rotate:-1.5deg}.result__perf{display:block;height:2px;margin:1.1rem 0 1.2rem;background-image:radial-gradient(circle at center,var(--rule) 1.4px,transparent 1.6px);background-size:10px 2px;opacity:.7}.result__emoji{font-size:3rem;line-height:1;display:block;animation:sway 5s ease-in-out infinite}.result__name{font-family:var(--font-display);font-weight:800;font-size:clamp(1.85rem,7.6vw,2.4rem);letter-spacing:-.035em;line-height:1.02;overflow-wrap:break-word;margin:.5rem 0;color:var(--tomato-deep);text-wrap:balance}.result__desc{margin:0 0 1rem;font-size:1rem;line-height:1.6;color:#2a1f1cd9}.result__tags{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem}.diet-tag{display:inline-flex;align-items:center;background:var(--blush);border:2px solid var(--rule);color:var(--ink-print);font-weight:700;font-size:.8rem;padding:.32rem .7rem;border-radius:999px}.result__time{position:relative;display:inline-flex;align-items:center;gap:.4rem;background:var(--ink-print);color:var(--card);font-weight:700;font-size:.9rem;padding:.4rem .85rem;border-radius:999px}.result__time:before{content:"";position:absolute;top:-12px;left:12px;width:8px;height:12px;border-left:2px solid var(--rule-soft);border-radius:60% 0;animation:steam 3s ease-in-out infinite}@keyframes steam{0%{opacity:0;translate:0 4px}40%{opacity:1}to{opacity:0;translate:3px -8px}}.swaps{margin-top:1.3rem;background:var(--blush);border:2px solid var(--rule);border-radius:var(--radius-sm);padding:.95rem 1.05rem;box-shadow:3px 3px #241a1826}.swaps h3{font-family:var(--font-display);font-weight:700;font-size:1.05rem;letter-spacing:-.02em;margin:0 0 .5rem;color:var(--tomato-deep)}.swaps ul{margin:0;padding-left:1.1rem;display:grid;gap:.4rem;font-size:.92rem;line-height:1.5}.result__section{margin-top:1.5rem}.result__section h3{font-family:var(--font-display);font-weight:700;font-size:.82rem;letter-spacing:.18em;text-transform:uppercase;margin:0 0 .7rem;padding-bottom:.35rem;border-bottom:2px solid var(--rule);color:var(--ink-print)}.chips{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;padding:0;margin:0}.chips li{background:var(--butter);border:2px solid var(--rule-soft);border-radius:var(--radius-sm);padding:.38rem .7rem;font-size:.9rem;font-weight:600}.steps{list-style:none;counter-reset:step;margin:0;padding:0;display:grid;gap:.8rem}.steps li{counter-increment:step;display:flex;gap:.75rem;align-items:flex-start;line-height:1.55}.steps li:before{content:counter(step);flex:0 0 auto;width:1.85rem;height:1.85rem;display:grid;place-items:center;border-radius:50%;background:var(--tomato);border:2px solid var(--rule);color:var(--card);font-family:var(--font-display);font-weight:800;font-size:.95rem;rotate:-6deg}.result__answers{margin-top:1.4rem;margin-bottom:0;font-size:.84rem;color:#2a1f1ca6;line-height:1.6}.actions{display:grid;gap:.6rem;margin-top:1.6rem}.result__only{margin:.9rem 0 0;padding:.7rem .85rem;border:1px dashed rgba(42,31,28,.28);border-radius:10px;font-size:.82rem;line-height:1.5;color:#2a1f1cb8;background:#f7b73124}.btn{font-family:var(--font-display);font-size:1.08rem;font-weight:700;letter-spacing:-.01em;border-radius:var(--radius-sm);border:2px solid var(--rule);padding:.85rem 1.2rem;min-height:56px;max-width:100%;overflow-wrap:break-word;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:transform .12s ease,box-shadow .12s ease,background .16s ease}.btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink-print)}.btn--primary{background:var(--tomato);color:var(--card);box-shadow:3px 3px 0 var(--ink-print)}@media(hover:hover){.btn--primary:hover{background:var(--tomato-deep)}}.btn--ghost{background:var(--card);color:var(--ink-print);box-shadow:3px 3px 0 var(--ink-print)}@media(hover:hover){.btn--ghost:hover{background:var(--butter)}}.footer{position:relative;z-index:1;text-align:center;font-size:.78rem;letter-spacing:.02em;color:#2a1f1c80;margin:0}@media(max-width:640px){.app{padding:1.6vh 4vw 1.4rem}.app__inner{gap:.9rem}.masthead__kicker{font-size:.66rem;padding:.28rem .65rem}.masthead__title{font-size:1.75rem;margin:.45rem 0 0}.masthead__sub{display:none}.app__inner--welcome{gap:1.2rem}.welcome{padding:1.8rem 1.1rem 1.6rem}.welcome__sub{margin-bottom:1.4rem}.card{padding:1.1rem 1rem 1.3rem}.progress{position:sticky;top:0;z-index:6;gap:.8rem;margin-bottom:1.1rem;padding-top:.5rem;padding-bottom:.7rem;background:var(--card);box-shadow:0 0 0 1rem var(--card)}.progress__plate{width:50px;height:50px;box-shadow:inset 0 0 0 3px var(--card)}.progress__meta{font-size:.75rem;letter-spacing:.12em}.question__title{font-size:1.5rem;margin-bottom:.3rem}.question__hint{font-size:.92rem;margin-bottom:1rem}.options{gap:.6rem}.option{font-size:1rem;padding:.75rem .9rem}.btn--continue{position:sticky;bottom:.75rem;z-index:5;margin-top:1rem;box-shadow:3px 3px 0 var(--ink-print),0 0 0 .75rem var(--card)}.btn--continue:active{box-shadow:0 0 0 var(--ink-print),0 0 0 .75rem var(--card)}.btn--continue:disabled,.btn--continue:disabled:active{box-shadow:3px 3px 0 var(--rule-soft),0 0 0 .75rem var(--card)}.back{margin-top:.9rem;font-size:.95rem}.result__badge{font-size:.72rem;letter-spacing:.18em}.result__time{font-size:.95rem;padding:.5rem .9rem}.diet-tag{font-size:.86rem;padding:.36rem .7rem}.result__section{margin-top:1.35rem}.result__section h3{font-size:.86rem;letter-spacing:.16em}.chips li{font-size:.95rem;padding:.45rem .75rem}.steps{gap:.9rem}.steps li{font-size:1rem}.swaps ul{font-size:.95rem}.result__answers{font-size:.92rem}.result__only{font-size:.9rem}.actions{gap:.7rem;margin-top:1.5rem}.footer{font-size:.82rem}}@media(max-width:379px){.cutout{display:none}.app{padding-left:3vw;padding-right:3vw}.card{padding:1rem .85rem 1.2rem}.option{gap:.6rem;padding:.7rem .75rem}.btn{font-size:1.02rem;padding:.8rem .9rem}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.cutout,.result__time:before{animation:none}}