/* Native, lightweight illustration of the farming cycle. */
.product-redesign .routine{padding-block:28px 96px;--routine-accent:#c395ef}
.routine-heading,.routine-stats-heading{display:flex;justify-content:space-between;align-items:center;gap:24px}
.routine .eyebrow{font-size:10px;letter-spacing:.18em;color:#c395ef;margin:0 0 12px}
.product-redesign .routine h2{font-size:clamp(28px,3vw,42px);margin:0;line-height:1.15}
.routine-motion{background:none;border:1px solid #ffffff25;color:#c8becf;border-radius:30px;padding:10px 16px;font:inherit;font-size:12px;cursor:pointer}
.routine-motion[hidden]{display:none}
.routine button:focus-visible{outline:2px solid #e1bbff;outline-offset:5px}
.routine-flow{position:relative;padding:88px 0 66px;margin-top:18px}
.routine-lines{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#4a3c55;stroke-width:1;vector-effect:non-scaling-stroke;pointer-events:none}
.routine-lines .routine-retry{stroke:#8a61ab;stroke-dasharray:4 5}
.routine-retry-label{position:absolute;top:0;left:17%;width:33%;text-align:center;color:#bca8ce;font-size:11px;background:#100e14;padding:0 8px}
.routine-steps{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px;list-style:none;margin:0;padding:0}
.routine-step{font:inherit;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:7px;width:100%;min-height:118px;padding:18px 14px;border:1px solid #ffffff1c;border-radius:12px;background:#18141d;color:#f2eaf8;transition:border-color .35s,background .35s,transform .35s}
.routine-step:hover{border-color:#b184d1;transform:translateY(-3px)}
.routine-step[aria-pressed=true]{border-color:#c395ef;background:#2b2035}
.routine-number{font-size:10px;color:#b695cc;letter-spacing:.1em}
.routine-step strong{font-size:15px;line-height:1.3;font-weight:500}
.routine-step>span:last-child{font-size:11px;line-height:1.4;color:#b5a9bf}
.routine-pulse{position:absolute;z-index:1;width:7px;height:7px;border-radius:50%;background:#e0baff;box-shadow:0 0 14px #c395ef99;left:calc((var(--routine-index,0) + .5)*100%/6);top:72px;transform:translateX(-50%);transition:left 1s ease;pointer-events:none}
.routine-return{position:absolute;bottom:0;margin:0;left:0;right:0;text-align:center;font-size:11px;color:#9e91aa}
.routine-caption{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px;min-height:92px;margin-top:24px;border-top:1px solid #ffffff16;border-bottom:1px solid #ffffff16;padding:18px 0}
.routine-current{font-size:11px;color:#c395ef;font-variant-numeric:tabular-nums;white-space:nowrap}
.routine-detail{font-size:14px;line-height:1.6;color:#c0b5ca;margin:0;max-width:65ch}
.routine .text-link{font-size:12px;white-space:nowrap}
.routine-stats{margin-top:48px;padding:30px 32px;background:linear-gradient(115deg,#221a2b,#17131d);border:1px solid #ffffff18;border-radius:16px}
.routine-stats h3{font-size:26px;letter-spacing:-.04em;font-weight:500;margin:0}
.routine-demo{font-size:11px;color:#bfb0ca;padding:8px 12px;border:1px solid #bda0d52e;border-radius:24px}
.routine-metrics{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin:32px 0;gap:24px}
.routine-metrics>div{border-left:1px solid #ffffff20;padding-left:24px}
.routine-metrics>div:first-child{border:0;padding-left:0}
.routine-metrics dt{font-size:12px;color:#bfb0ca;margin-bottom:12px}
.routine-metrics dd{margin:0;font-size:clamp(32px,3.5vw,48px);font-weight:500;letter-spacing:-.045em;line-height:1.1;font-variant-numeric:tabular-nums}
.routine-metrics dd span{font-size:.7em;margin-left:2px}
.routine-gold{color:#eed078}.routine-elixir{color:#c395ef}
.routine-lifetime{border-top:1px solid #ffffff16;padding-top:22px;display:flex;align-items:center;justify-content:space-between;gap:32px}
.routine-lifetime p{font-size:13px;line-height:1.8;color:#b5a9bf;max-width:68ch;margin:0}
.routine-lifetime strong{color:#e7dcec;font-weight:500}
@media(max-width:850px){
 .routine-steps{gap:8px}.routine-step{padding:14px 9px}.routine-step strong{font-size:13px}
 .routine-caption{grid-template-columns:auto 1fr}.routine-caption>a{grid-column:2}.routine-stats{padding:24px}
}
@media(max-width:600px){
 .product-redesign .routine{padding-block:24px 64px}.routine-heading{align-items:flex-start;gap:12px}.routine-motion{font-size:10px;padding:9px 11px;flex-shrink:0;margin-top:24px}
 .routine-flow{padding:0 0 0 25px;margin-top:32px}.routine-lines,.routine-retry-label{display:none}
 .routine-flow:before{content:'';position:absolute;top:30px;bottom:42px;left:4px;width:1px;background:#674b7c}
 .routine-steps{display:grid;grid-template-columns:1fr;gap:10px}.routine-step{min-height:76px;display:grid;grid-template-columns:25px 1fr;gap:3px 12px;padding:14px 16px}
 .routine-number{grid-row:span 2;align-self:center}.routine-step strong{font-size:16px}.routine-step>span:last-child{font-size:12px}
 .routine-step:hover{transform:none}.routine-pulse{left:4px;top:calc(var(--routine-index,0)*86px + 35px);transition:top 1s ease}
 .routine-return{position:static;text-align:left;margin-top:14px}.routine-caption{gap:10px 16px;min-height:136px;margin-top:20px;padding-block:20px}
 .routine-detail{font-size:13px}.routine-stats{padding:22px 20px;margin-top:30px}.routine-stats-heading{display:block}.routine-demo{display:inline-block;margin-top:16px;font-size:10px}
 .routine-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 18px;margin-block:28px}.routine-metrics>div{padding-left:16px}.routine-metrics>div:nth-child(odd){padding-left:0;border:0}.routine-metrics dt{font-size:11px}
 .routine-lifetime{display:block}.routine-lifetime>a{display:inline-block;margin-top:18px}
}
@media(prefers-reduced-motion:reduce){.routine-step,.routine-pulse{transition:none}.routine-step:hover{transform:none}}

/* Original native implementation inspired by Magic UI's path beams and
   Thinking Orbs' quiet activity rhythm; no third-party component code. */
.routine-lines{overflow:visible;stroke:#624b735c;stroke-width:1.25}
.routine-lines .routine-beam{stroke:#ddb0ff;stroke-width:2.5;stroke-linecap:round;filter:drop-shadow(0 0 4px #bd79ed)}
.routine-pulse{left:0;top:0;width:6px;height:6px;opacity:0;transform:none;transition:none;offset-anchor:center;box-shadow:0 0 6px #fff,0 0 18px #b877ec}
.routine-step{position:relative;overflow:hidden;isolation:isolate;transition:border-color .6s,background .6s,transform .65s cubic-bezier(.2,.8,.2,1.15),box-shadow .6s}
.routine-step:before{content:'';position:absolute;inset:-60%;z-index:-1;pointer-events:none;background:conic-gradient(from 0deg,transparent 0 60%,#b076de20 75%,transparent 90%);opacity:0;animation:routine-orbit 7s linear infinite;animation-play-state:paused;transition:opacity .6s}
.routine-step[aria-pressed=true]{box-shadow:0 8px 35px -15px #b073df65,inset 0 1px 0 #eac6ff20;transform:translateY(-4px)}
.routine-step[aria-pressed=true]:before{opacity:1}
.routine-running .routine-step[aria-pressed=true]:before{animation-play-state:running}
.routine-number{display:flex;align-items:center;gap:7px}
.routine-number:after{content:'';width:4px;height:4px;border-radius:50%;background:#d6a4fc;opacity:0;box-shadow:0 0 8px #ba7ae9;transition:opacity .5s}
.routine-step[aria-pressed=true] .routine-number:after{opacity:1}
.routine-retry-label{background:none;transition:color .4s;text-shadow:0 0 16px transparent}
.routine-search-again .routine-retry-label{color:#e5baff;text-shadow:0 0 16px #bb70f399}
@keyframes routine-orbit{to{transform:rotate(360deg)}}
@media(max-width:600px){.routine-lines{display:block}.routine-flow:before{display:none}.routine-step[aria-pressed=true]{transform:translateX(3px)}.routine-pulse{left:0;top:0;transition:none}}
@media(prefers-reduced-motion:reduce){.routine-step:before{animation:none;display:none}.routine-step[aria-pressed=true]{transform:none}.routine-step,.routine-number:after,.routine-retry-label{transition:none}.routine-pulse,.routine-beam{display:none}}

.routine-dark{color:#b6a5d0}