html,body{height:100%}
body{margin:0;background:#E6ECE1;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
.app{position:relative;display:flex;flex-direction:column;width:100%;max-width:480px;height:100vh;height:100dvh;margin:0 auto;overflow:hidden}
@media (min-width:600px){body{display:flex;align-items:center;justify-content:center;min-height:100vh}.app{height:min(900px,94vh);border-radius:36px;box-shadow:0 30px 80px rgba(30,54,61,.18)}}
.err{margin:0 0 10px;font-size:14px;line-height:1.6;color:#9B2C1F;background:#FBE9E5;border-radius:12px;padding:10px 14px}
.consent{margin:0;font-size:13px;line-height:1.7;color:#566669}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
*{box-sizing:border-box}
a{color:#3B6E1C}a:hover{color:#1E363D}
.app{font-family:'IBM Plex Sans Arabic',system-ui,sans-serif;color:#1C2A2D;background:#F3F6EF}

/* motion */
@keyframes enter{from{opacity:0;transform:translateX(-28px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes rise{from{opacity:0;transform:translateY(24px);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes drift{0%,100%{transform:translate(0,0) rotate(0deg)}50%{transform:translate(12px,-16px) rotate(16deg)}}
@keyframes fall{0%{transform:translateY(-80px) rotate(0deg);opacity:0}12%{opacity:.9}100%{transform:translateY(920px) rotate(540deg);opacity:0}}
@keyframes draw{from{stroke-dashoffset:40}to{stroke-dashoffset:0}}
@keyframes pop{0%{transform:scale(.4);opacity:0}65%{transform:scale(1.08);opacity:1}100%{transform:scale(1)}}
@keyframes sway{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
@keyframes breathe{0%,100%{transform:scale(1,1)}50%{transform:scale(1.02,1.01)}}
@keyframes wrap{0%{stroke-dashoffset:80}35%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:80}}
@keyframes ticks{0%,30%{opacity:0}42%,78%{opacity:1}92%,100%{opacity:0}}
@keyframes shrink{from{transform:scaleX(1)}to{transform:scaleX(.84)}}
@keyframes grow{from{transform:scaleX(.88)}to{transform:scaleX(1)}}
@keyframes glow{0%,100%{opacity:1}50%{opacity:.8}}
@keyframes fillx{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes pulse{0%{transform:scale(.9);opacity:.5}100%{transform:scale(1.35);opacity:0}}
.enter>*{animation:enter .55s cubic-bezier(.2,.8,.2,1) both}
.enter>*:nth-child(2){animation-delay:.06s}
.enter>*:nth-child(3){animation-delay:.12s}
.enter>*:nth-child(4){animation-delay:.18s}
.enter>*:nth-child(5){animation-delay:.24s}
.enter>*:nth-child(6){animation-delay:.30s}
.enter>*:nth-child(7){animation-delay:.36s}
.w{display:inline-block;animation:rise .8s cubic-bezier(.2,.8,.2,1) both}
.fade{animation:fade .7s cubic-bezier(.2,.8,.2,1) both}

/* brand */
.brand{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px}
.brand img{width:26px;height:26px;border-radius:50%;object-fit:contain;background:#FFFFFF;border:1px solid #D7DED1}
.brand span{font-family:'Alexandria',sans-serif;font-weight:600;font-size:12px;letter-spacing:.26em;color:#1E363D;direction:ltr}

/* welcome */
.welcome{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:56px 24px calc(28px + env(safe-area-inset-bottom));position:relative;overflow:hidden}
.logo-wrap{position:relative;width:232px;height:232px;display:flex;align-items:center;justify-content:center;animation:float 5s ease-in-out infinite}
.ring{position:absolute;inset:0;width:232px;height:232px;animation:spin 40s linear infinite}
.ring circle{fill:none;stroke:#6BA539;stroke-width:2;stroke-dasharray:2 10;stroke-linecap:round}
.logo-card{width:184px;height:184px;border-radius:50%;background:#FFFFFF;box-shadow:0 18px 40px rgba(30,54,61,.14);display:flex;align-items:center;justify-content:center;overflow:hidden;animation:pop .9s cubic-bezier(.2,.8,.2,1) both}
.logo-card img{width:170px;height:170px;object-fit:contain}
.hello{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:36px 0 0;font-family:'Alexandria',sans-serif;font-weight:600;font-size:44px;line-height:1.2;color:#1E363D}
.hello .hl{color:#3B6E1C}
.lead{margin:16px 0 0;font-size:18px;line-height:1.7;color:#566669;max-width:300px}
.meta{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:24px}
.pill{font-size:14px;font-weight:500;color:#1E363D;background:#FFFFFF;border:1px solid #D7DED1;border-radius:999px;padding:8px 14px}
.deco{position:absolute;fill:#6BA539;opacity:.16;animation:drift 9s ease-in-out infinite}
.welcome .cta{margin-top:auto}

/* header */
.top{display:flex;align-items:center;gap:12px;padding:16px 20px 8px}
.back{width:44px;height:44px;border-radius:50%;border:1px solid #D7DED1;background:#FFFFFF;display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none;transition:transform .2s,border-color .2s}
.back:hover{border-color:#1E363D}
.back:active{transform:scale(.94)}
.back svg{width:20px;height:20px;fill:none;stroke:#1E363D;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.tape{position:relative;flex:1;height:22px;border-radius:6px;background-color:#E3E8DD;
  background-image:repeating-linear-gradient(to left,rgba(30,54,61,.28) 0 1px,transparent 1px 8px),repeating-linear-gradient(to left,rgba(30,54,61,.45) 0 1.5px,transparent 1.5px 40px);
  background-size:100% 7px,100% 12px;background-repeat:no-repeat;background-position:top right,top right}
.tape-fill{position:relative;height:100%;border-radius:6px;background-color:#6BA539;
  background-image:repeating-linear-gradient(to left,rgba(255,255,255,.55) 0 1px,transparent 1px 8px),repeating-linear-gradient(to left,rgba(255,255,255,.8) 0 1.5px,transparent 1.5px 40px);
  background-size:100% 7px,100% 12px;background-repeat:no-repeat;background-position:top right,top right;
  transition:width .7s cubic-bezier(.65,0,.35,1)}
.tape-fill::after{content:"";position:absolute;top:-3px;inset-inline-end:-6px;width:10px;height:28px;border-radius:3px;background:linear-gradient(#D3D8D4,#99A39E);box-shadow:0 2px 4px rgba(0,0,0,.15)}
.count{font-size:14px;font-weight:600;color:#566669;min-width:40px;text-align:center}

/* question */
.body{flex:1;overflow-y:auto;display:flex;flex-direction:column}
.q{padding:24px 24px 24px;display:flex;flex-direction:column;gap:12px}
.qnum{margin:0;font-family:'Alexandria',sans-serif;font-weight:600;font-size:15px;color:#3B6E1C;letter-spacing:.02em}
.qt{margin:0;font-family:'Alexandria',sans-serif;font-weight:600;font-size:30px;line-height:1.35;color:#1E363D}
.qh{margin:0 0 12px;font-size:16px;line-height:1.7;color:#566669}
.field{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.lbl{font-size:14px;font-weight:600;color:#1E363D}
.inp{width:100%;height:56px;border-radius:16px;border:1.5px solid #D7DED1;background:#FFFFFF;padding:0 16px;font:inherit;font-size:18px;color:#1C2A2D;transition:border-color .2s,box-shadow .2s}
.inp::placeholder,.area::placeholder{color:#8A9799}
.inp:focus,.area:focus{outline:none;border-color:#1E363D;box-shadow:0 0 0 4px #E7F0DD}
.ltr{direction:ltr;text-align:right}
.area{width:100%;min-height:132px;border-radius:16px;border:1.5px solid #D7DED1;background:#FFFFFF;padding:14px 16px;font:inherit;font-size:17px;line-height:1.7;color:#1C2A2D;resize:none;transition:border-color .2s,box-shadow .2s}

/* meter */
.meter{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px}
.step{width:52px;height:52px;border-radius:50%;border:1.5px solid #D7DED1;background:#FFFFFF;font-size:26px;line-height:1;color:#1E363D;cursor:pointer;transition:transform .15s,border-color .2s}
.step:hover{border-color:#1E363D}
.step:active{transform:scale(.92)}
.step:focus-visible,.cta:focus-visible,.back:focus-visible,.opt:focus-visible,.chip:focus-visible,.linkbtn:focus-visible{outline:3px solid #6BA539;outline-offset:3px}
.readout{margin:0;display:flex;align-items:baseline;gap:6px}
.num{font-family:'Alexandria',sans-serif;font-weight:600;font-size:76px;line-height:1;color:#1E363D;font-variant-numeric:tabular-nums}
.unit{font-size:20px;font-weight:600;color:#566669}
.ruler{position:relative;height:76px;border-radius:18px;background-color:#FFFFFF;border:1.5px solid #D7DED1;padding:0 6px;margin-top:12px;
  background-image:repeating-linear-gradient(to right,#9AA59C 0 1px,transparent 1px 9px),repeating-linear-gradient(to right,#1E363D 0 1.5px,transparent 1.5px 45px);
  background-size:100% 16px,100% 30px;background-repeat:no-repeat;background-position:left top,left top}
.range{-webkit-appearance:none;appearance:none;width:100%;height:76px;margin:0;background:transparent;cursor:grab}
.range:active{cursor:grabbing}
.range::-webkit-slider-runnable-track{height:76px;background:transparent}
.range::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:58px;margin-top:9px;border-radius:15px;background:#1E363D;border:4px solid #FFFFFF;box-shadow:0 6px 14px rgba(30,54,61,.3)}
.range::-moz-range-track{height:76px;background:transparent}
.range::-moz-range-thumb{width:22px;height:50px;border-radius:15px;background:#1E363D;border:4px solid #FFFFFF;box-shadow:0 6px 14px rgba(30,54,61,.3)}
.range:focus-visible{outline:3px solid #6BA539;outline-offset:6px;border-radius:14px}
.scale{display:flex;justify-content:space-between;font-size:13px;color:#566669;padding:0 8px}
.note{align-self:flex-start;margin-top:8px;font-size:15px;font-weight:600;color:#3B6E1C;background:#E7F0DD;border-radius:999px;padding:10px 16px;animation:fade .5s both}

/* options */
.opts{display:flex;flex-direction:column;gap:10px}
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.opt{display:flex;align-items:center;gap:14px;width:100%;min-height:68px;padding:14px 16px;border-radius:18px;border:1.5px solid #D7DED1;background:#FFFFFF;font:inherit;text-align:start;color:#1C2A2D;cursor:pointer;transition:border-color .2s,background-color .2s,transform .15s}
.opt:hover{border-color:#1E363D}
.opt:active{transform:scale(.98)}
.opt.is-on{border-color:#3B6E1C;background:#E7F0DD}
.otext{display:flex;flex-direction:column;gap:2px;flex:1}
.lab{font-size:18px;font-weight:600;color:#1E363D}
.sub{font-size:14px;color:#566669}
.leaves{display:flex;gap:1px;width:64px;flex:none;justify-content:flex-start}
.leaf{width:16px;height:16px;fill:#6BA539}
.opt.is-on .leaf{animation:sway 1.6s ease-in-out infinite;transform-origin:50% 100%}
.tick{width:26px;height:26px;border-radius:50%;border:1.5px solid #D7DED1;display:flex;align-items:center;justify-content:center;flex:none;transition:background-color .2s,border-color .2s}
.tick svg{width:16px;height:16px;fill:none;stroke:#FFFFFF;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40}
.opt.is-on .tick{background:#3B6E1C;border-color:#3B6E1C}
.opt.is-on .tick svg{animation:draw .35s ease-out forwards}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{height:48px;padding:0 20px;border-radius:999px;border:1.5px solid #D7DED1;background:#FFFFFF;font:inherit;font-size:16px;font-weight:500;color:#1E363D;cursor:pointer;transition:background-color .2s,border-color .2s,color .2s,transform .15s}
.chip:hover{border-color:#1E363D}
.chip:active{transform:scale(.96)}
.chip.is-on{background:#1E363D;border-color:#1E363D;color:#FFFFFF}
.reveal{display:flex;flex-direction:column;gap:8px;animation:fade .45s cubic-bezier(.2,.8,.2,1) both}

/* interstitials */
.inter{padding:8px 24px 16px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px}
.eyebrow{margin:0;font-size:14px;font-weight:600;color:#3B6E1C;background:#E7F0DD;border-radius:999px;padding:6px 14px}
.it{margin:0;font-family:'Alexandria',sans-serif;font-weight:600;font-size:27px;line-height:1.35;color:#1E363D}
.illo{position:relative;width:220px;height:184px;display:flex;align-items:center;justify-content:center}
.illo svg{width:220px;height:184px;overflow:visible}
.halo{fill:#E7F0DD}
.halo-ring{fill:none;stroke:#6BA539;stroke-width:1.5;stroke-dasharray:2 7;stroke-linecap:round;transform-box:fill-box;transform-origin:center;animation:spin 30s linear infinite}
.pulse{fill:none;stroke:#6BA539;stroke-width:1.5;transform-box:fill-box;transform-origin:center;animation:pulse 2.8s ease-out infinite}
.figure{transform-box:fill-box;transform-origin:50% 100%;animation:breathe 4s ease-in-out infinite}
.tape-arc{fill:none;stroke:#EEF1EC;stroke-width:8;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:80;animation:wrap 3.4s .5s cubic-bezier(.65,0,.35,1) infinite}
.tape-ticks{fill:none;stroke:#7F8B85;stroke-width:4;stroke-dasharray:1 4;opacity:0;animation:ticks 3.4s .5s linear infinite}
.oleaf{fill:#6BA539;transform-box:fill-box;transform-origin:center;animation:drift 6s ease-in-out infinite}
.facts{display:flex;flex-direction:column;gap:10px;width:100%;margin-top:4px}
.fact{display:flex;gap:12px;align-items:flex-start;text-align:start;background:#FFFFFF;border:1px solid #D7DED1;border-radius:18px;padding:12px 14px;animation:enter .6s cubic-bezier(.2,.8,.2,1) both}
.fact-ic{width:40px;height:40px;border-radius:12px;background:#E7F0DD;flex:none;display:flex;align-items:center;justify-content:center}
.fact-ic svg{width:22px;height:22px;fill:none;stroke:#3B6E1C;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.fact p{margin:0;font-size:15px;line-height:1.65;color:#1C2A2D}
.fact b{font-weight:600;color:#1E363D}
.bigdiff{margin:0;display:flex;align-items:baseline;gap:6px;direction:ltr;animation:pop .7s .35s cubic-bezier(.2,.8,.2,1) both}
.bigdiff .n{font-family:'Alexandria',sans-serif;font-weight:600;font-size:64px;line-height:1;color:#3B6E1C}
.bigdiff .u{font-size:22px;font-weight:600;color:#566669}
.fromto{margin:0;font-size:15px;font-weight:600;color:#1E363D;background:#FFFFFF;border:1px solid #D7DED1;border-radius:999px;padding:8px 16px}
.ip{margin:0;font-size:16px;line-height:1.8;color:#566669;max-width:320px}
.ghost{fill:none;stroke:#1E363D;stroke-width:1.4;stroke-dasharray:4 4;opacity:.45}
.solid{transform-box:fill-box;transform-origin:50% 100%}
.m-loss .solid{animation:shrink 1.6s .4s cubic-bezier(.65,0,.35,1) both}
.m-gain .ghost{transform-box:fill-box;transform-origin:50% 100%;transform:scaleX(.88)}
.m-gain .solid{animation:grow 1.6s .4s cubic-bezier(.65,0,.35,1) both}
.m-keep .solid{animation:glow 2.4s ease-in-out infinite}

/* uploads */
.sr{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;pointer-events:none}
.drop{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:220px;border-radius:22px;border:2px dashed #B6C4AC;background:#FFFFFF;cursor:pointer;overflow:hidden;text-align:center;padding:20px;transition:border-color .2s,background-color .2s}
.drop:hover{border-color:#3B6E1C;background:#FAFCF8}
.drop:focus-within{outline:3px solid #6BA539;outline-offset:3px}
.drop.small{min-height:92px;flex-direction:row;gap:12px}
.drop-ic{width:56px;height:56px;border-radius:50%;background:#E7F0DD;display:flex;align-items:center;justify-content:center}
.drop-ic svg{width:28px;height:28px;fill:none;stroke:#3B6E1C;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.drop-t{font-size:17px;font-weight:600;color:#1E363D}
.drop-s{font-size:14px;color:#566669}
.shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:pop .5s both}
.redo{position:absolute;bottom:12px;inset-inline-start:12px;font-size:13px;font-weight:600;color:#FFFFFF;background:rgba(30,54,61,.85);border-radius:999px;padding:6px 12px}
.slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.slot{position:relative;aspect-ratio:3/4;border-radius:18px;border:2px dashed #B6C4AC;background:#FFFFFF;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;cursor:pointer;overflow:hidden;transition:border-color .2s}
.slot:hover{border-color:#3B6E1C}
.slot:focus-within{outline:3px solid #6BA539;outline-offset:3px}
.slot svg{width:34px;height:52px;fill:none;stroke:#3B6E1C;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.slot-t{font-size:14px;font-weight:600;color:#1E363D}
.slot.has{border-style:solid;border-color:#3B6E1C}
.privacy{display:flex;gap:10px;align-items:flex-start;background:#FFFFFF;border:1px solid #D7DED1;border-radius:16px;padding:14px 16px;font-size:14px;line-height:1.7;color:#566669;margin:0}
.privacy svg{width:20px;height:20px;flex:none;margin-top:2px;fill:none;stroke:#3B6E1C;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* footer */
.bottom{padding:12px 20px calc(28px + env(safe-area-inset-bottom));background:linear-gradient(to top,#F3F6EF 75%,rgba(243,246,239,0))}
.cta{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:60px;border:none;border-radius:18px;background:#1E363D;color:#FFFFFF;font-family:'Alexandria',sans-serif;font-weight:600;font-size:19px;cursor:pointer;transition:background-color .2s,transform .15s,box-shadow .2s;box-shadow:0 10px 24px rgba(30,54,61,.22)}
.cta:hover{background:#2C4D55}
.cta:active{transform:scale(.98)}
.cta:disabled{background:#A9B5AF;box-shadow:none;cursor:not-allowed}
.cta svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.cta:hover svg{transform:translateX(-4px)}

/* done */
.done{flex:1;position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:40px 24px calc(28px + env(safe-area-inset-bottom))}
.fall{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.fleaf{position:absolute;top:0;fill:#6BA539;opacity:0;animation:fall 4s linear infinite}
.badge{width:88px;height:88px;border-radius:50%;background:#3B6E1C;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 10px #E7F0DD;animation:pop .7s cubic-bezier(.2,.8,.2,1) both;flex:none}
.badge svg{width:44px;height:44px;fill:none;stroke:#FFFFFF;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40;animation:draw .5s .45s ease-out forwards}
.done-t{margin:28px 0 0;font-family:'Alexandria',sans-serif;font-weight:600;font-size:30px;line-height:1.3;color:#1E363D}
.done-p{margin:10px 0 0;font-size:16px;line-height:1.8;color:#566669;max-width:310px}
.plan{position:relative;width:100%;margin-top:22px;background:#FFFFFF;border:1px solid #D7DED1;border-radius:22px;padding:18px 18px 16px;text-align:start}
.plan-l{margin:0;font-size:14px;font-weight:600;color:#3B6E1C}
.plan-big{margin:4px 0 0;font-family:'Alexandria',sans-serif;font-weight:600;font-size:36px;line-height:1.2;color:#1E363D}
.track{position:relative;margin:20px 0 0;height:60px}
.track-line{position:absolute;top:8px;right:20px;left:20px;height:4px;border-radius:2px;background:#E3E8DD;overflow:hidden}
.track-fill{position:absolute;inset:0;background:#6BA539;transform-origin:right center;animation:fillx 1.8s .6s cubic-bezier(.65,0,.35,1) both}
.stops{position:absolute;inset:0;display:flex;justify-content:space-between}
.stop{display:flex;flex-direction:column;align-items:center;gap:5px;width:44px;animation:pop .45s cubic-bezier(.2,.8,.2,1) both}
.dot{width:20px;height:20px;border-radius:50%;background:#FFFFFF;border:3px solid #6BA539}
.stop.first .dot{background:#1E363D;border-color:#1E363D}
.stop.last .dot{background:#3B6E1C;border-color:#3B6E1C;box-shadow:0 0 0 6px #E7F0DD}
.stop-v{font-size:13px;font-weight:600;color:#1E363D;direction:ltr}
.stop-t{font-size:12px;color:#566669;min-height:16px}
.plan-p{margin:12px 0 0;font-size:15px;line-height:1.7;color:#1C2A2D}
.plan-n{margin:6px 0 0;font-size:13px;line-height:1.6;color:#566669}
.linkbtn{margin-top:auto;background:none;border:none;font:inherit;font-size:15px;font-weight:600;color:#3B6E1C;text-decoration:underline;text-underline-offset:4px;cursor:pointer;min-height:44px;padding:0 12px}
.linkbtn:hover{color:#1E363D}
.done .linkbtn{margin-top:20px}
.done .brand{margin-top:auto;padding-top:16px}

/* journey (end screen) */
@keyframes jig{0%,100%{transform:scale(1)}50%{transform:scale(1.06,1.03)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
.done{padding:24px 20px calc(28px + env(safe-area-inset-bottom))}
.done-head{display:flex;align-items:center;gap:14px;width:100%;text-align:start}
.badge.sm{width:56px;height:56px;box-shadow:0 0 0 7px #E7F0DD}
.badge.sm svg{width:28px;height:28px}
.done-hd{flex:1}
.done-head .done-t{margin:0;font-size:22px}
.done-head .done-p{margin:4px 0 0;font-size:14px;line-height:1.6;max-width:none}
.journey{width:100%;margin-top:20px;background:#FFFFFF;border:1px solid #D7DED1;border-radius:24px;padding:18px 16px 16px;text-align:start;box-shadow:0 14px 34px rgba(30,54,61,.08)}
.j-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.replay{width:44px;height:44px;border-radius:50%;border:1px solid #D7DED1;background:#F3F6EF;display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none;transition:transform .2s,border-color .2s}
.replay:hover{border-color:#1E363D}
.replay:active{transform:rotate(-40deg)}
.replay:focus-visible,.scrub:focus-visible{outline:3px solid #6BA539;outline-offset:3px}
.replay svg{width:20px;height:20px;fill:none;stroke:#1E363D;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.j-body{display:flex;align-items:center;gap:12px;margin-top:8px}
.fig{width:118px;height:240px;flex:none}
.fig svg{width:118px;height:240px;overflow:visible}
.fig-halo{fill:#E7F0DD}
.body-fill{fill:url(#gBodyC)}
.arm{fill:none;stroke:url(#gBodyC);stroke-linecap:round}
.hair{fill:#1E363D}
.head{fill:url(#gBodyC)}
.fat{fill:url(#fatG);transform-box:fill-box;transform-origin:center;animation:jig 2.6s ease-in-out infinite}
.drop-b{fill:#8CCBEA;stroke:#FFFFFF;stroke-width:.6;opacity:.9;animation:bob 1.8s ease-in-out infinite}
.e-leaf{fill:#6BA539;transition:opacity .3s}
.j-stats{flex:1;display:flex;flex-direction:column;gap:10px;min-width:0}
.j-month{margin:0;font-size:13px;font-weight:600;color:#3B6E1C}
.j-kg{margin:0;display:flex;align-items:baseline;gap:4px;direction:ltr;justify-content:flex-end}
.j-kg .n{font-family:'Alexandria',sans-serif;font-weight:600;font-size:40px;line-height:1;color:#1E363D;font-variant-numeric:tabular-nums}
.j-kg .u{font-size:15px;font-weight:600;color:#566669}
.bar{display:flex;flex-direction:column;gap:4px}
.bar-l{font-size:12px;font-weight:600;color:#566669}
.bar-t{display:block;height:8px;border-radius:4px;background:#EEF1EA;overflow:hidden}
.bar-f{display:block;height:100%;border-radius:4px}
.bar-f.energy{background:#6BA539}
.bar-f.fatbar{background:#E9A52C}
.bar-f.muscle{background:#1E363D}
.legend{display:flex;gap:12px;flex-wrap:wrap}
.lg{display:flex;align-items:center;gap:6px;font-size:12px;color:#566669}
.sw{width:10px;height:10px;border-radius:50%}
.fat-sw{background:#F2B03A}
.water-sw{background:#8CCBEA}
.stage{margin-top:6px;background:#F3F6EF;border-radius:16px;padding:12px 14px}
.stage-h{margin:0;font-family:'Alexandria',sans-serif;font-weight:600;font-size:16px;color:#1E363D}
.stage-p{margin:4px 0 0;font-size:14px;line-height:1.7;color:#1C2A2D}
.chart{margin-top:14px}
.chart-svg{width:100%;height:auto;display:block;overflow:visible}
.grid{stroke:#E3E8DD;stroke-width:1}
.ylab{font-family:'IBM Plex Sans Arabic',sans-serif;font-size:11px;font-weight:600;fill:#566669}
.ylab.goal{fill:#3B6E1C}
.xlab{font-family:'IBM Plex Sans Arabic',sans-serif;font-size:11px;fill:#566669}
.xlab.end{text-anchor:end}
.xlab.mid{text-anchor:middle}
.band{fill:#E7F0DD}
.line{fill:none;stroke:#B6C4AC;stroke-width:2;stroke-dasharray:4 4}
.line-done{fill:none;stroke:#3B6E1C;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.cursor{stroke:#1E363D;stroke-width:1;stroke-dasharray:3 3;opacity:.35}
.goal-dot{fill:#FFFFFF;stroke:#3B6E1C;stroke-width:2.5}
.dot-pulse{fill:none;stroke:#6BA539;stroke-width:1.5;transform-box:fill-box;transform-origin:center;animation:pulse 1.8s ease-out infinite}
.dot-c{fill:#1E363D;stroke:#FFFFFF;stroke-width:2}
.scrub-wrap{margin:2px 3.2% 0 12.9%}
.scrub{-webkit-appearance:none;appearance:none;width:100%;height:36px;margin:0;background:transparent;cursor:grab}
.scrub::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:#E3E8DD}
.scrub::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;margin-top:-10px;border-radius:50%;background:#1E363D;border:4px solid #FFFFFF;box-shadow:0 4px 10px rgba(30,54,61,.3)}
.scrub::-moz-range-track{height:6px;border-radius:3px;background:#E3E8DD}
.scrub::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#1E363D;border:4px solid #FFFFFF;box-shadow:0 4px 10px rgba(30,54,61,.3)}
.scrub-hint{margin:2px 0 0;font-size:12px;color:#566669;text-align:center}
.done-foot{margin:18px 0 0;font-size:14px;color:#566669}

@media (prefers-reduced-motion: reduce){.app *,.app *::after{animation:none!important;transition:none!important}.tick svg,.badge svg,.tape-arc{stroke-dashoffset:0!important}.tape-ticks{opacity:1!important}.fleaf{display:none}}