.steps{--steps-gap:20px;gap:var(--steps-gap);margin:0;padding:0;list-style:none;display:grid}.step{--t0:0s;grid-template-columns:44px minmax(0,1fr);align-items:start;column-gap:14px;display:grid;position:relative}.step-num{z-index:1;background:var(--bordeaux);width:44px;height:44px;color:var(--on-bordeaux);font-family:var(--font-display);font-variant-numeric:lining-nums;box-shadow:0 0 0 6px var(--bordeaux-soft);border-radius:50%;place-items:center;font-size:1.35rem;font-weight:600;display:grid;position:relative}.step-line{top:50px;left:21px;bottom:calc(6px - var(--steps-gap));background:var(--bordeaux-line);border-radius:2px;width:2px;position:absolute;overflow:hidden}.step-line:after{content:"";background:var(--bordeaux);transform-origin:top;position:absolute;inset:0}.step-card{background:var(--paper);border:1px solid var(--bordeaux-line);border-radius:var(--radius-lg);height:100%;padding:14px 14px 20px}.step-card h3{font-family:var(--font-display);margin:0 4px 6px;font-size:1.55rem;font-weight:500;line-height:1.15}.step-card p{color:var(--ink-muted);margin:0 4px}.step-art{aspect-ratio:5/4;background:radial-gradient(circle at 18% 12%, #fffcf61f, transparent 55%), var(--bordeaux);color:var(--espresso);border-radius:18px;margin-bottom:16px;line-height:1.2;position:relative;overflow:hidden;container-type:inline-size}.step-art:before{content:"";aspect-ratio:1;background:var(--brass);border-radius:50%;width:7%;position:absolute;bottom:5%;right:4%}.step-art>*{font-size:4.6cqi}.step-art img{object-fit:cover;display:block}.a-card{background:var(--paper);border-radius:1em;flex-direction:column;justify-content:center;gap:.32em;padding:.7em .8em;display:flex;position:absolute;inset:8% 8% 9%;box-shadow:0 .8em 2em #14080c47}.a-head{justify-content:space-between;align-items:center;margin-bottom:.15em;font-weight:700;display:flex}.a-muted{color:var(--ink-muted);font-size:.85em;font-weight:600}.a-swap{display:inline-grid}.a-swap>*{grid-area:1/1}.a-swap>.from{opacity:0}.a-post{background:var(--paper);border-radius:.9em;width:56%;position:absolute;top:7%;left:7%;overflow:hidden;box-shadow:0 .6em 1.6em #14080c4d}.a-post img{aspect-ratio:8/5;width:100%;height:auto}.a-post-meta{align-items:center;gap:.4em;padding:.45em .55em;font-size:.8em;display:flex}.a-tag{background:var(--bordeaux);color:var(--on-bordeaux);border-radius:999px;flex-shrink:0;padding:.1em .5em;font-weight:700}.a-link{white-space:nowrap;text-overflow:ellipsis;min-width:0;color:var(--ink-muted);overflow:hidden}.a-toast{background:var(--paper);color:var(--bordeaux);white-space:nowrap;border-radius:999px;padding:.45em .8em;font-size:.82em;font-weight:700;position:absolute;top:16%;right:6%;box-shadow:0 .5em 1.4em #14080c4d}.a-sheet{background:var(--paper);border-radius:1.2em 1.2em 0 0;padding:.7em 7% .9em;position:absolute;bottom:0;left:0;right:0;box-shadow:0 -.5em 1.6em #14080c38}.a-sheet-title{color:var(--ink-muted);margin-bottom:.45em;font-size:.8em;font-weight:600;display:block}.a-apps{gap:.9em;display:flex}.a-app{background:#e6ddd5;border-radius:.7em;width:2.7em;height:2.7em;position:relative}.a-app:nth-child(2){background:#d9cfc6}.a-app:nth-child(4){background:#efe7e0}.a-app-haps{background:0 0}.a-app-haps svg{width:100%;height:100%}.a-app-haps:after{content:"";border:.16em solid var(--brass);opacity:0;border-radius:.95em;position:absolute;inset:-.3em}.a-chip>*{border-radius:999px;justify-self:end;padding:.12em .6em;font-size:.75em}.a-chip .from{border:1px solid var(--line);color:var(--ink-muted)}.a-chip .to{background:var(--bordeaux);color:var(--on-bordeaux)}.a-row{isolation:isolate;background:var(--cream);border-radius:.6em;grid-template-columns:4.4em minmax(0,1fr);align-items:center;padding:.45em .55em;display:grid;position:relative;overflow:hidden}.a-row:before{content:"";z-index:-1;border-radius:inherit;opacity:0;background:#b89a584d;position:absolute;inset:0}.a-qty{color:var(--bordeaux);font-weight:700}.a-row .from{color:var(--ink-muted);font-style:italic}.a-day{grid-template-columns:2.5em minmax(0,1fr);align-items:center;gap:.4em;display:grid}.a-dow{color:var(--ink-muted);letter-spacing:.04em;text-transform:uppercase;font-size:.78em;font-weight:700}.a-meal{background:var(--cream);white-space:nowrap;border-radius:.6em;align-items:center;gap:.5em;height:2.1em;padding:0 .5em 0 .22em;font-size:.95em;font-weight:600;display:flex;overflow:hidden}.a-meal img{border-radius:.4em;flex-shrink:0;width:1.65em;height:1.65em}.a-meal-quiet{color:var(--ink-muted);background:0 0;padding-left:.6em;font-weight:500}.a-day-target .a-dow{color:var(--bordeaux)}.a-slot,.a-meal-new{grid-area:1/2}.a-slot{border:.12em dashed var(--bordeaux-line);opacity:0;border-radius:.6em;height:2.1em}.a-meal-new{background:var(--bordeaux);color:var(--on-bordeaux);box-shadow:0 .4em 1em #14080c40}.a-cat{color:var(--ink-muted);letter-spacing:.06em;text-transform:uppercase;margin-top:.1em;font-size:.72em;font-weight:700}.a-item{align-items:center;gap:.6em;min-height:1.85em;font-weight:600;display:flex}.a-box{border:.13em solid var(--bordeaux-line);border-radius:.35em;flex-shrink:0;width:1.25em;height:1.25em;position:relative;overflow:hidden}.is-done .a-box{border-color:var(--bordeaux)}.is-done .a-box:before{content:"";background:var(--bordeaux);position:absolute;inset:0}.is-done .a-box:after{content:"";border:solid var(--on-bordeaux);border-width:0 .15em .15em 0;width:30%;height:58%;position:absolute;top:10%;left:32%;transform:rotate(45deg)}.a-text{position:relative}.is-done .a-text{color:var(--ink-muted)}.is-done .a-text:after{content:"";transform-origin:0;background:currentColor;height:.11em;position:absolute;top:55%;left:-.1em;right:-.1em}@media (width>=720px) and (width<=959px){.step-card{grid-template-rows:auto 1fr;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:20px;padding:14px;display:grid}.step-art{grid-row:1/span 2;margin:0}.step-card h3{align-self:end;margin-top:0}}@media (width>=960px){.steps{--steps-gap:16px;grid-template-columns:repeat(4,minmax(0,1fr))}.step{--t0:calc(var(--i) * 1.1s);grid-template-rows:auto 1fr;grid-template-columns:minmax(0,1fr);row-gap:18px}.step-num{justify-self:center}.step-line{width:calc(100% + var(--steps-gap) - 56px);height:2px;top:21px;bottom:auto;left:calc(50% + 28px)}.step-line:after{transform-origin:0}}@keyframes steps-num-on{0%{background:var(--paper);color:var(--bordeaux);transform:scale(.72)}}@keyframes steps-grow{0%{transform:scale(0)}}@keyframes steps-rise{0%{opacity:0;transform:translateY(var(--rise,18%))}}@keyframes steps-sheet{0%{transform:translateY(105%)}}@keyframes steps-pop{0%{opacity:0;transform:scale(.5)}70%{opacity:1;transform:scale(1.1)}to{opacity:1;transform:scale(1)}}@keyframes steps-ring{0%{opacity:0;transform:scale(1)}15%{opacity:1}to{opacity:0;transform:scale(1.7)}}@keyframes steps-swap-out{0%{opacity:1;transform:none}to{opacity:0;transform:translateY(-70%)}}@keyframes steps-swap-in{0%{opacity:0;transform:translateY(70%)}}@keyframes steps-flash{0%,to{opacity:0}35%{opacity:1}}@keyframes steps-drop{0%{opacity:0;transform:translate(18%,-190%)rotate(-5deg)}40%{opacity:1}80%{transform:translateY(6%)rotate(0)}to{opacity:1;transform:none}}@keyframes steps-slot{0%,75%{opacity:1}to{opacity:0}}@keyframes steps-fade{0%{opacity:0}}@keyframes steps-ink{0%{color:var(--ink-from,var(--espresso))}}@media (prefers-reduced-motion:no-preference){.steps.anim-ready .step *,.steps.anim-ready .step :before,.steps.anim-ready .step :after{animation-play-state:paused}.steps.anim-ready .step.in-view *,.steps.anim-ready .step.in-view :before,.steps.anim-ready .step.in-view :after{animation-play-state:running}.anim-ready .step-num{animation:steps-num-on .45s var(--t0) both cubic-bezier(.2, .9, .3, 1.3)}.anim-ready .step-line:after{animation:steps-grow .7s calc(var(--t0) + .4s) both cubic-bezier(.6, 0, .3, 1)}.anim-ready .a-post{--rise:-10%;animation:steps-rise .5s var(--t0) both ease-out}.anim-ready .a-sheet{animation:steps-sheet .5s calc(var(--t0) + .2s) both cubic-bezier(.2, .8, .2, 1)}.anim-ready .a-app-haps{animation:steps-pop .45s calc(var(--t0) + .6s) both}.anim-ready .a-app-haps:after{animation:steps-ring .9s calc(var(--t0) + .8s) both ease-out}.anim-ready .a-toast{animation:steps-pop .45s calc(var(--t0) + 1.1s) both}.anim-ready .a-row .from{animation:steps-swap-out .4s calc(var(--t0) + .5s + var(--r) * .25s) both ease-in}.anim-ready .a-row .to{animation:steps-swap-in .4s calc(var(--t0) + .62s + var(--r) * .25s) both ease-out}.anim-ready .a-row:before{animation:steps-flash .9s calc(var(--t0) + .5s + var(--r) * .25s) both}.anim-ready .a-chip .from{animation:steps-swap-out .3s calc(var(--t0) + 1.25s) both}.anim-ready .a-chip .to{animation:steps-pop .4s calc(var(--t0) + 1.3s) both}.anim-ready .a-slot{animation:steps-slot 1s calc(var(--t0) + .2s) both}.anim-ready .a-meal-new{animation:steps-drop .75s calc(var(--t0) + .35s) both cubic-bezier(.25, .8, .3, 1)}.anim-ready .a-day-target .a-dow{--ink-from:var(--ink-muted);animation:steps-ink .3s calc(var(--t0) + .9s) both}.anim-ready .art-week .a-head .a-muted{animation:steps-pop .4s calc(var(--t0) + 1.1s) both}.anim-ready .is-done .a-box:before{animation:steps-grow .25s calc(var(--t0) + .35s + var(--r) * .35s) both ease-out}.anim-ready .is-done .a-box:after{animation:steps-fade .2s calc(var(--t0) + .5s + var(--r) * .35s) both}.anim-ready .is-done .a-text{animation:steps-ink .3s calc(var(--t0) + .5s + var(--r) * .35s) both}.anim-ready .is-done .a-text:after{animation:steps-grow .3s calc(var(--t0) + .5s + var(--r) * .35s) both ease-out}.anim-ready .art-list .a-head .from{animation:steps-swap-out .3s calc(var(--t0) + 1.4s) both}.anim-ready .art-list .a-head .to{animation:steps-swap-in .3s calc(var(--t0) + 1.45s) both}}
