.routine{width:min(1120px,calc(100% - 48px));margin:0 auto;padding:64px 0 56px}
.routine h2{font-size:clamp(28px,3vw,42px);line-height:1.1;font-weight:400;letter-spacing:-.03em;color:var(--ink);text-wrap:balance}
.routine-lead{margin-top:8px;color:var(--muted);font-style:italic;font-size:17px}
.routine-track{position:relative;margin-top:8px;padding-top:100px}
.routine-steps{list-style:none;margin:0;padding:0;counter-reset:step}

.routine-step{position:relative;counter-increment:step;padding:18px 16px 20px 168px;border-radius:14px}
.routine-step__egg{display:none}
.routine-step__head{position:relative}
.routine-step h3{font-size:12px;line-height:18px;font-weight:700;letter-spacing:.12em;color:var(--muted)}
.routine-step__verb{display:inline-block;margin-left:2px;padding:1px 9px;border-radius:999px;background:var(--blue-wash);color:var(--blue);letter-spacing:.1em}
.routine-step__line{margin-top:4px;font-size:clamp(20px,2vw,26px);line-height:1.22;font-weight:500;letter-spacing:-.012em;color:var(--ink)}
.routine-step__mark{background:linear-gradient(rgba(168,199,250,.62),rgba(168,199,250,.62)) no-repeat 0 90%/100% .34em;padding:0 .04em}
.routine-step__more{margin-top:6px}
.routine-step__text{color:var(--body);font-size:16px;line-height:25px;max-width:36em}
.routine-step a{display:inline-block;margin-top:4px;color:var(--blue);font-weight:500;font-size:16px}
.routine-step a::after{content:" →"}
.routine-step a:hover{text-decoration:underline}

.routine-chain{margin-top:18px;color:var(--blue);font-weight:700;letter-spacing:.06em}
.routine-foot{margin-top:8px;color:var(--body);font-size:16px}
.routine-foot a{color:var(--blue);font-weight:500}
.routine-note{margin-top:4px;color:var(--muted);font-size:14px}

.routine-rail{display:none}
.routine-rail__line,.routine-rail__fill{position:absolute;left:132.5px;width:3px;border-radius:2px}
.routine-rail__line{background:var(--line)}
.routine-rail__fill{height:0;background:var(--blue);transition:height .5s var(--ease)}
.routine-rail__loop{position:absolute;left:8px;width:118px;border:2px dashed var(--blue-soft);border-right:0;border-radius:30px 0 0 30px;transition:border-color .5s}
.routine-rail__loop::after{content:"";position:absolute;right:-3px;top:-6px;border:6px solid transparent;border-left:8px solid var(--blue-soft);transition:border-left-color .5s}
.routine.is-looped .routine-rail__loop{border-color:var(--blue)}
.routine.is-looped .routine-rail__loop::after{border-left-color:var(--blue)}
.routine-rail__egg{position:absolute;left:70px;top:0;width:0;height:96px;transform-origin:50% 100%;will-change:transform}
.routine-rail__fig{position:absolute;left:0;bottom:0;height:96px;transform-origin:50% 100%}
.routine-rail__pose{position:absolute;left:0;bottom:0;height:96px;width:auto;max-width:none;transition:opacity .16s var(--ease)}
.routine-rail__pose--next{opacity:0}

@media (prefers-reduced-motion:no-preference){
  html.js:not(.egg-static) .routine-rail{display:block;position:absolute;inset:0;z-index:3;pointer-events:none}
  html.js:not(.egg-static) .routine-step{cursor:pointer;transition:background .3s}
  html.js:not(.egg-static) .routine-step:not(.is-active):hover{background:rgba(255,255,255,.65)}
  html.js:not(.egg-static) .routine-step:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
  
  html.js:not(.egg-static) .routine-step__head::before{content:counter(step);position:absolute;z-index:4;left:-48px;top:50%;width:28px;height:28px;margin-top:-14px;border:2px solid var(--line);border-radius:50%;background:#fff;color:var(--muted);font:700 13px/24px var(--font);text-align:center;transition:background .3s,border-color .3s,color .3s}
  html.js:not(.egg-static) .routine-step.is-done .routine-step__head::before,
  html.js:not(.egg-static) .routine-step.is-active .routine-step__head::before{border-color:var(--blue);background:var(--blue);color:#fff}
  html.js:not(.egg-static) .routine-step.is-pop .routine-step__head::before{animation:node-pulse .45s var(--ease) 1}
  
  html.js:not(.egg-static) .routine-step__line{color:var(--body);transition:color .3s}
  html.js:not(.egg-static) .routine-step.is-active .routine-step__line{color:var(--ink)}
  html.js:not(.egg-static) .routine-step__mark{background-size:0% .34em;transition:background-size .6s var(--ease) .2s}
  html.js:not(.egg-static) .routine-step.is-active .routine-step__mark{background-size:100% .34em}
  
  .routine-rail__fig.loop-start{animation:egg-sigh 4s var(--ease) 1}
  .routine-rail__fig.loop-check{animation:egg-sweep 3s ease-in-out 1}
  .routine-rail__fig.loop-getfound{animation:egg-tap 1.2s ease-in-out 1}
  .routine-rail__fig.loop-connect{animation:egg-settle .5s var(--ease) 1}
  .routine-rail__fig.loop-visible{animation:egg-bob 3s ease-in-out 1}
  .routine-rail__fig.loop-meet{animation:egg-wave 1.4s ease-in-out 1}
  .routine-rail__fig.loop-community{animation:egg-bob 1.6s ease-in-out 1}
}

@media (min-width:860px) and (prefers-reduced-motion:no-preference){
  html.js:not(.egg-static) .routine-steps{max-width:720px}
  html.js:not(.egg-static) .routine-step{position:static}
  html.js:not(.egg-static) .routine-step__more{position:absolute;top:100px;left:calc(54% + 40px);right:0;margin:0;padding:30px 34px 32px;border-radius:22px;background:#fff;box-shadow:0 18px 44px rgba(32,33,36,.08);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .16s linear,transform .2s var(--ease),visibility 0s .16s}
  html.js:not(.egg-static) .routine-step__more::before{content:counter(step,decimal-leading-zero);display:block;margin-bottom:10px;color:var(--blue);font-size:44px;line-height:1;font-weight:300;letter-spacing:-.02em}
  html.js:not(.egg-static) .routine-step.is-shown .routine-step__more{opacity:1;visibility:visible;transform:none;transition:opacity .3s var(--ease) .18s,transform .35s var(--ease) .18s,visibility 0s .18s}
  html.js:not(.egg-static) .routine-step__text{font-size:19px;line-height:30px;color:var(--ink)}
  html.js:not(.egg-static) .routine-step__more a{margin-top:16px;font-size:17px}
}

@keyframes node-pulse{0%{transform:scale(.85)}60%{transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes egg-sigh{0%,100%{transform:scale(1,1)}50%{transform:scale(1,.97)}}
@keyframes egg-sweep{0%,100%{transform:rotate(0)}25%{transform:rotate(-2deg)}75%{transform:rotate(2deg)}}
@keyframes egg-tap{0%,30%,60%,100%{transform:translateY(0)}15%,45%{transform:translateY(-3px)}}
@keyframes egg-settle{0%{transform:translateY(-3px)}100%{transform:translateY(0)}}
@keyframes egg-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes egg-wave{0%,100%{transform:rotate(0)}30%{transform:rotate(-3deg)}65%{transform:rotate(3deg)}}

@media (max-width:859px){
  .routine{width:calc(100% - 32px);padding:48px 0 40px}
  .routine-track{padding-top:76px}
  .routine-step{padding:10px 12px 12px 90px}
  .routine-step__line{font-size:19px}
  .routine-rail__line,.routine-rail__fill{left:62.5px}
  .routine-rail__loop{display:none}
  .routine-rail__egg{left:28px;height:60px}
  .routine-rail__fig,.routine-rail__pose{height:60px}
}
@media (max-width:859px) and (prefers-reduced-motion:no-preference){
  html.js:not(.egg-static) .routine-step__head::before{left:-40px}
  html.js:not(.egg-static) .routine-step__more{max-height:0;overflow:hidden;opacity:0;margin-top:0;transition:max-height .45s var(--ease),opacity .3s,margin-top .3s}
  html.js:not(.egg-static) .routine-step.is-shown .routine-step__more{max-height:220px;opacity:1;margin-top:6px}
}

@media (prefers-reduced-motion: reduce){
  .routine-rail{display:none!important}
  .routine-step__egg{display:block!important;position:absolute;left:30px;top:12px;height:84px;width:auto}
  .routine-step__more{max-height:none!important;opacity:1!important;visibility:visible!important;position:static!important}
  .routine-step,.routine-rail__fig,.egg-cta__egg{animation:none!important;transition:none!important}
}
html.egg-static .routine-rail{display:none!important}
html.egg-static .routine-step__egg,html:not(.js) .routine-step__egg{display:block!important;position:absolute;left:30px;top:12px;height:84px;width:auto}
html.egg-static .routine-step__more{max-height:none!important;opacity:1!important;visibility:visible!important;position:static!important}
@media (max-width:859px){
  html.egg-static .routine-step__egg,html:not(.js) .routine-step__egg{left:6px;height:60px}
}

.egg-cta{width:min(1080px,calc(100% - 48px));margin:0 auto;padding:80px 0 120px;display:grid;grid-template-columns:minmax(0,1fr) 220px;align-items:center;gap:32px}
.egg-cta h2{font-size:clamp(34px,4.2vw,56px);line-height:1.06;font-weight:400;letter-spacing:-.035em;color:var(--ink)}
.egg-cta p{margin-top:14px;color:var(--body);font-size:18px}
.egg-cta .button{margin-top:24px;background:var(--blue);color:#fff}
.egg-cta .button:hover{background:var(--blue-dark)}
.egg-cta__more{margin-top:18px}
.egg-cta__more a{color:var(--blue);font-weight:500}
.egg-cta__egg{width:220px;height:250px;pointer-events:none}
html.js .egg-cta__egg{opacity:0;transition:opacity .4s var(--ease)}
html.js .egg-cta__egg.is-in,html.egg-static .egg-cta__egg{opacity:1}
@media (prefers-reduced-motion: reduce){html.js .egg-cta__egg{opacity:1}}
@media (max-width:700px){
  .egg-cta{width:calc(100% - 32px);grid-template-columns:minmax(0,1fr) 110px;gap:12px;padding:56px 0 110px}
  .egg-cta__egg{width:110px;height:125px}
}

.egg-launcher{position:fixed;z-index:520;right:22px;bottom:22px;min-height:56px;display:flex;align-items:center;gap:10px;border:0;border-radius:999px;background:var(--blue);box-shadow:0 16px 38px rgba(32,33,36,.2);color:#fff;padding:0 20px 0 6px;font:500 16px/24px var(--font);cursor:pointer}
.egg-launcher__avatar{position:relative;width:44px;height:44px;border-radius:50%;overflow:hidden;background:#fff;flex:none}
.egg-launcher__avatar img{position:absolute;inset:0;width:44px;height:44px;transition:opacity .15s var(--ease)}
.egg-launcher__avatar img+img{opacity:0}
.egg-launcher[data-state="thinking"] .egg-launcher__avatar img:first-child{opacity:0}
.egg-launcher[data-state="thinking"] .egg-launcher__avatar img+img{opacity:1}
@media (max-width:700px){
  .egg-launcher{right:14px;bottom:14px;width:56px;padding:0;justify-content:center;font-size:0}
}