:root{--mist:#f4f8f1;--meadow:#c9ecd2;--lagoon:#3fb7c9;--teal:#0f5e63;--night:#18233f;--ember:#ff7a45;--dusk:#8a93a8;--ink:var(--night);--soft:#4a5670;}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0;background:var(--mist);color:var(--ink);font-family:Karla,system-ui,sans-serif;font-weight:400;font-size:clamp(1rem,0.96rem + 0.2vw,1.1rem);line-height:1.6;overflow-x:clip}h1,h2,h3{font-family:Rubik,system-ui,sans-serif;font-weight:700;line-height:1.08;margin:0}a{color:var(--teal)}:focus-visible{outline:3px solid var(--teal);outline-offset:3px}.hero{min-height:100dvh;display:grid;gap:clamp(1.25rem,4vw,3rem);align-content:start;padding:calc(env(safe-area-inset-top) + 1.25rem) max(1.25rem,env(safe-area-inset-right)) 2.5rem max(1.25rem,env(safe-area-inset-left));max-width:72rem;margin:0 auto}.brand{display:flex;align-items:center;gap:.75rem;min-height:72px}.brand img{width:clamp(64px,16vw,160px);height:auto;aspect-ratio:1;border-radius:22%;display:block}h1{font-size:clamp(2rem,1.4rem + 3.4vw,3.9rem);letter-spacing:-.02em;max-width:14ch;margin-top:.9rem}h1 .wm{display:block;color:var(--teal)}.lead{margin:.9rem 0 0;max-width:36ch;color:var(--soft)}.cta{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 1.9rem;margin-top:1.4rem;background:var(--ember);color:var(--night);font-family:Rubik,system-ui,sans-serif;font-weight:700;font-size:clamp(1.05rem,1rem + 0.3vw,1.2rem);text-decoration:none;border-radius:999px;box-shadow:0 10px 24px -12px rgba(24,35,63,.55);-webkit-tap-highlight-color:transparent}.cta:focus-visible{outline:3px solid var(--night);outline-offset:4px}@media (hover: hover) and (pointer: fine){.cta:hover{background:#ff8d5e}}.under{margin:.7rem 0 0;font-size:.95rem;color:var(--soft)}.stage{display:grid;gap:1rem;justify-items:center}.sw{display:inline-flex;align-items:center;gap:.6rem;min-height:48px;padding:.3rem .35rem;border:0;border-radius:999px;background:#fff;color:var(--night);font:600 1rem Karla,system-ui,sans-serif;cursor:pointer;box-shadow:0 1px 0 rgba(24,35,63,.08),0 8px 22px -14px rgba(24,35,63,.5);-webkit-tap-highlight-color:transparent}.sw .lab{padding:0 .5rem}.sw .track{position:relative;width:64px;height:36px;border-radius:999px;background:var(--dusk)}.sw .knob{position:absolute;top:4px;left:4px;width:28px;height:28px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(24,35,63,.35);transform:translateX(0)}.sw[aria-checked="true"] .track{background:var(--teal)}.sw[aria-checked="true"] .knob{transform:translateX(28px)}.sw[aria-checked="false"] .lab-home,.sw[aria-checked="true"] .lab-any{color:var(--night)}.sw[aria-checked="false"] .lab-any,.sw[aria-checked="true"] .lab-home{color:#6a7389}.card{width:min(100%,24rem);margin:0;background:#fff;border-radius:28px;padding:.6rem;box-shadow:0 1px 0 rgba(24,35,63,.06),0 30px 60px -36px rgba(24,35,63,.55)}.card svg{display:block;width:100%;height:auto;border-radius:22px}.card figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:.75rem;padding:.8rem .6rem .4rem}.card .place{font-family:Rubik,system-ui,sans-serif;font-weight:700;font-size:clamp(1.1rem,1rem + 0.5vw,1.3rem)}.card .state{font-size:.95rem;color:var(--soft);text-align:right}[hidden]{display:none !important}html[data-side="without"] body{background:#eceef2}.recipe{max-width:44rem;margin:0 auto;padding:clamp(4rem,10vw,8rem) 1.25rem}.jump{display:inline-flex;align-items:center;min-height:44px;font-weight:600}.recipe h2{font-size:clamp(1.7rem,1.3rem + 2vw,2.6rem);margin-top:1.2rem;max-width:18ch}.chips{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.4rem 0 0;padding:0;list-style:none}.chips li{background:var(--meadow);color:var(--teal);font-weight:600;border-radius:999px;padding:.35rem .95rem}.block{margin-top:clamp(3.5rem,8vw,6rem)}.block h3{font-size:clamp(1.2rem,1.1rem + 0.6vw,1.5rem);color:var(--teal)}.need{margin:1.2rem 0 0;padding:0;list-style:none;display:grid;gap:1rem}.need li{padding-left:1.6rem;position:relative}.need li::before{content:"";position:absolute;left:0;top:.55em;width:.65rem;height:.65rem;border-radius:50%;background:var(--lagoon)}.steps{margin:1.4rem 0 0;padding:0;list-style:none;counter-reset:s;display:grid;gap:clamp(2rem,5vw,3rem)}.steps li{counter-increment:s;display:grid;grid-template-columns:3rem 1fr;gap:1rem;align-items:start}.steps li::before{content:counter(s);display:grid;place-items:center;width:3rem;height:3rem;border-radius:50%;background:var(--night);color:#fff;font-family:Rubik,system-ui,sans-serif;font-weight:700;font-size:1.2rem}.steps strong{display:block;font-family:Rubik,system-ui,sans-serif;font-weight:700;font-size:1.1rem;margin-bottom:.2rem}.steps p,.tips p{margin:0;color:var(--soft)}.tips{display:grid;gap:1.6rem;margin-top:1.2rem}.tips p strong{display:block;color:var(--night);font-weight:600;margin-bottom:.2rem}.close{min-height:100dvh;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;padding:4rem max(1.25rem,env(safe-area-inset-right)) calc(env(safe-area-inset-bottom) + 3.5rem) max(1.25rem,env(safe-area-inset-left));background:var(--teal);color:#fff;max-width:none}.close .in{width:100%;max-width:44rem;margin:0 auto}.close h2{font-size:clamp(2rem,1.4rem + 3vw,3.4rem);max-width:13ch}.close p{margin:1rem 0 0;max-width:34ch;color:#e3f3f1}.close .cta{margin-top:2rem;box-shadow:none}footer{margin-top:3rem;padding:2.5rem 1.25rem calc(env(safe-area-inset-bottom) + 2.5rem);border-top:1px solid rgba(24,35,63,.12)}footer .in{max-width:44rem;margin:0 auto;display:grid;gap:1.2rem}.keys{display:flex;flex-wrap:wrap;gap:.7rem}.key{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 1rem;border-radius:10px;background:#fff;color:var(--night);text-decoration:none;font-weight:600;box-shadow:inset 0 -4px 0 #cfd6df,0 1px 0 rgba(24,35,63,.15);-webkit-tap-highlight-color:transparent}.key span{background:linear-gradient(currentColor,currentColor) left bottom / 0 2px no-repeat;transition:background-size .25s ease}.key:focus-visible span{background-size:100% 2px}@media (hover: hover){.key:hover span{background-size:100% 2px}}footer small{color:var(--soft);font-size:.95rem}@media (min-width: 900px){.hero{grid-template-columns:1.05fr .95fr;align-items:center;align-content:center;padding-top:2rem}.stage{justify-items:end}}@media (prefers-reduced-motion: reduce){.key span{transition:none}}