/* v4.6.84: one continuous rest wash, and shared elements for the exhale. */
:root[data-rest-home="1"]{background-color:var(--rest-top)}
:root[data-header-mode="rest"]{background-color:var(--rest-top)}
:root[data-header-mode="live"]{background-color:var(--live)}
body.rest-home,body.rest-home #app{background:linear-gradient(180deg,var(--rest-top),var(--ground) 440px) fixed}
/* v4.6.208: a bounded, compositor-animated glow anchored to the floating
   header, not the mascot. Preserve the base wash/status tint and glass. */
body.rest-home{isolation:isolate}
:root[data-theme="light"] body.rest-home{--rest-glow-core:#72cd8a;--rest-glow-mid:#a5dfb4;--rest-glow-edge:#c7e9d0}
body.rest-home #app{background:transparent}
body.rest-home::before{content:"";position:fixed;top:0;left:0;right:0;height:calc(var(--rest-glow-y) + 290px);z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 95% 250px at 50% var(--rest-glow-y),var(--rest-glow-core) 0%,var(--rest-glow-mid) 24%,var(--rest-glow-edge) 48%,transparent 88%);
  transform-origin:50% var(--rest-glow-y);animation:rest-header-breathe 2.4s ease-in-out infinite}
@keyframes rest-header-breathe{0%,100%{opacity:.45;transform:scale(.96)}50%{opacity:1;transform:scale(1.07)}}
@media(prefers-reduced-motion:reduce){body.rest-home::before{animation:none;opacity:.93;transform:none}}
/* Rest uses the shared glass header; never expose sharp scrolling text behind it. */
.rest-home .su-hello-row{flex-direction:column-reverse;gap:4px;padding:16px 0 22px}
.rest-home .su-hello-row .su-mascot{width:224px;max-width:100%}
/* Compact: another 20% smaller (0.8 * 0.8), without moving the surrounding UI. */
.rest-home .su-hello-row .su-mascot img,.rest-home .su-hello-row .su-mascot canvas{transform:scale(.64);transform-origin:center}
.rest-home .hello{display:flex;flex-direction:column;align-items:center;gap:5px 6px;margin:0;text-align:center}
.rest-home .hello .hi{font-size:24px;line-height:1.2}
.rest-home .hello .hisub{font-size:11px;margin:0;color:var(--muted)}
/* v4.6.343: a rest day is not a planning screen -- the tool row stays on a training
   day; the plans are still a tap away on their cards (Sungjee, 2026-10-16) */
.rest-home .pw-home-tools{display:none}
:root body.rest-home #restBtn{display:block;min-height:44px;width:auto;margin:10px auto 19px;padding:8px 18px;background:transparent;border-color:transparent;box-shadow:none;color:var(--muted);font-size:11px}
.pw-rest-later{border-top:0}.pw-saved+.pw-rest-later{border-top:1px solid var(--line)}   /* v4.6.444: no line when nothing sits above it */
.pw-rest-later>summary{display:flex;align-items:center;gap:10px;padding:15px 16px;min-height:48px;cursor:pointer;list-style:none;font-size:11px;color:var(--accent-ink)}
.pw-rest-later>summary::-webkit-details-marker{display:none}
.pw-rest-later>summary small{margin-left:auto;font-size:10px;color:var(--muted)}
.rest-morph .su-hello-row .su-mascot{view-transition-name:rest-mascot}
.rest-morph .su-hello-row .hello{view-transition-name:rest-greeting}
.rest-morph .pw-home .pw-saved{view-transition-name:rest-plan}
.rest-morph .pw-home-tools{view-transition-name:rest-tools}
.rest-morph #restBtn{view-transition-name:rest-action}
.rest-morph::view-transition-group(*){animation-duration:850ms;animation-timing-function:var(--settle)}
.rest-morph::view-transition-old(root),.rest-morph::view-transition-new(root){animation-duration:650ms}
/* Decorative mascot slots never overlay a control or change the app header. */
.su-mascot{display:block;position:relative;width:180px;aspect-ratio:720/440;flex:none;pointer-events:none}
/* v4.1.2: only the live 3D mascot takes a tap. The poster PNG stays inert, so
   nothing answers before there is anything to answer with. The nudge is a
   press acknowledgement -- the reply itself is the 3D show. */
.su-mascot.su-ready{pointer-events:auto;cursor:pointer;-webkit-tap-highlight-color:transparent}
@media(prefers-reduced-motion:no-preference){
  .su-mascot.su-poke{animation:su-poke 260ms cubic-bezier(.22,.68,0,1)}
  @keyframes su-poke{0%{transform:scale(1)}38%{transform:scale(.94)}100%{transform:scale(1)}}
}
.su-mascot img,.su-mascot canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.su-mascot.su-ready img{visibility:hidden}
.su-mascot:not(.su-ready) canvas{visibility:hidden}
.su-first-day{margin:0 auto 5px}
.su-hello-row{display:flex;align-items:center;gap:8px}
.su-hello-row .hello{flex:1;min-width:0}
/* v4.1.4: 82 -> 94px, +15%. Rendered at 82, 94, 98 and 103 against the real
   greeting row and chosen there. Past 94 the mascot starts competing with
   "Morning, Sungjee." for the eye, and in that row the greeting should win --
   the mascot is a companion, not the headline. 94 makes the face legible
   without changing who is talking. */
.su-hello-row .su-mascot{width:94px}
.su-active-row{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:70px;margin:0 0 11px}
.su-active-row strong{display:block;font:600 21px/1.2 var(--disp);margin:0 0 5px}
.su-active-row span.mono{font-size:10px}
.su-active-row .su-mascot{width:104px}
.card.dayclosed .su-mascot{margin:-6px auto -8px;width:94px}
#dayDone .su-mascot{width:240px;max-width:100%;margin:0 auto 6px}
#dayDone .ddhero{width:240px;max-width:100%;position:relative;z-index:3}
/* v4.6.99: THE INK ENTRANCE. While the flood is up the overlay has no surface
   of its own -- the ink is what you see, the mascot crosses above it, and the
   drain is what reveals the summary underneath. visibility, not display, so
   the hero lands on the layout it will keep. */
/* v4.6.100: ddin -- the overlay's own 180ms fade-in -- is suppressed for the
   WHOLE life of an ink entrance, on a class that is never taken off again.
   v4.6.99 put animation:none on .dd-ink, which is removed at the landing: the
   property went from none back to ddin, and a changed animation-name starts a
   NEW animation, so the entire overlay -- flood, mascot and summary together
   -- fell to opacity 0 and faded back up at the exact moment of the landing.
   What you saw through it for those 180ms was Today. That was the blink. */
#dayDone.dd-inked{animation:none}
#dayDone.dd-ink{background:transparent}
#dayDone.dd-ink>:not(.ddink){visibility:hidden}
#dayDone.dd-ink .ddhero{visibility:visible}
#dayDone .ddink{position:fixed;inset:0;background:var(--accent);z-index:2;clip-path:circle(0px at 50% 50%);pointer-events:none}
/* the copy arrives as the ink drains, on the entrance's own stagger */
#dayDone.dd-copy .dddate{animation:ddcinema-copy 550ms ease-out both 80ms}
#dayDone.dd-copy .ddn{animation:ddcinema-number 750ms cubic-bezier(.2,.75,.25,1) both 180ms}
#dayDone.dd-copy .ddu{animation:ddcinema-copy 550ms ease-out both 300ms}
#dayDone.dd-copy .ddyou{animation:ddcinema-copy 550ms ease-out both 420ms}
#dayDone.dd-copy .ddsummary{animation:ddcinema-copy 600ms ease-out both 520ms}
/* Entrance motion wraps, rather than replaces, the mascot's own 3D jump. */
#dayDone[data-entrance]{animation:ddcinema-in 360ms ease-out both}
#dayDone[data-entrance] .ddhero{transform-origin:50% 85%;animation:ddcinema-rise 1050ms cubic-bezier(.2,.75,.25,1) both}
#dayDone[data-entrance="arc"] .ddhero{animation-name:ddcinema-arc}
#dayDone[data-entrance="land"] .ddhero{animation-name:ddcinema-land}
#dayDone[data-entrance] .dddate{animation:ddcinema-copy 550ms ease-out both 80ms}
#dayDone[data-entrance] .ddn{animation:ddcinema-number 750ms cubic-bezier(.2,.75,.25,1) both 180ms}
#dayDone[data-entrance] .ddu{animation:ddcinema-copy 550ms ease-out both 300ms}
#dayDone[data-entrance] .ddyou{animation:ddcinema-copy 550ms ease-out both 420ms}
#dayDone[data-entrance] .ddsummary{animation:ddcinema-copy 600ms ease-out both 520ms}
@keyframes ddcinema-in{from{opacity:0}to{opacity:1}}
@keyframes ddcinema-rise{0%{opacity:0;transform:translateY(36px) scale(.78)}60%{opacity:1;transform:translateY(-6px) scale(1.025)}100%{opacity:1;transform:none}}
@keyframes ddcinema-arc{0%{opacity:0;transform:translate(-38px,20px) rotate(-12deg) scale(.9)}55%{opacity:1;transform:translate(5px,-8px) rotate(3deg)}100%{opacity:1;transform:none}}
@keyframes ddcinema-land{0%{opacity:0;transform:translateY(-50px) scale(.86)}42%{opacity:1;transform:translateY(8px) scale(1.05,.94)}67%{transform:translateY(-10px) scale(.98,1.02)}100%{opacity:1;transform:none}}
@keyframes ddcinema-number{from{opacity:0;transform:translateY(18px) scale(.94)}to{opacity:1;transform:none}}
@keyframes ddcinema-copy{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(max-width:360px){#dayDone .ddhero{width:190px}}
@media(prefers-reduced-motion:reduce){#dayDone .ddink{display:none}#dayDone.dd-copy .dddate,#dayDone.dd-copy .ddn,#dayDone.dd-copy .ddu,#dayDone.dd-copy .ddyou,#dayDone.dd-copy .ddsummary{animation:none}#dayDone[data-entrance],#dayDone[data-entrance] .ddhero,#dayDone[data-entrance] .dddate,#dayDone[data-entrance] .ddn,#dayDone[data-entrance] .ddu,#dayDone[data-entrance] .ddyou,#dayDone[data-entrance] .ddsummary{animation:none;transform:none;opacity:1}}
#dayDone.su-celebration .ddbody{padding:12px 0 20px}
#dayDone.su-celebration .ddyou{margin:14px 0 10px}
.su-completion-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px 10px;width:100%;margin:10px auto 0}
#dayDone.su-celebration .ddsummary{width:100%}
.su-completion-metrics>div{display:flex;flex-direction:column;gap:4px 5px}
.su-completion-metrics b{font:600 21px/1.2 var(--disp);font-size:21px;color:var(--chalk);font-variant-numeric:tabular-nums}
.su-completion-metrics span{font:400 10px/1.316 var(--mono);color:var(--muted)}
.su-milestone{width:100%;margin:14px auto 0}
.su-milestone-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px 7px;width:126px;margin:auto}
.su-milestone-grid i{aspect-ratio:1;border-radius:5px;background:var(--accent);animation:su-box-in .36s var(--settle) both}
.su-milestone-note{font:400 11px/1.41 var(--mono);color:var(--muted);margin:0 0 10px}
#dayDone .ddyou::after{display:none}
/* Reflections belong to the 3D material. Static/reduced-motion PNGs are sampled
   from that same material, with no second CSS highlight or surrounding glow. */
:root[data-mascot-motion="off"] .su-mascot{display:none}
:root[data-mascot-motion="still"] .su-milestone-grid i{animation:none}
@keyframes su-box-in{from{opacity:0;transform:translateY(4px) scale(.82)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.su-milestone-grid i{animation:none}}
@media(max-width:360px){.su-hello-row .su-mascot,.card.dayclosed .su-mascot{width:71px}#dayDone .su-mascot{width:190px}}
/* v4.6.135: the secret gym film (js/mascot.js, js/gym-tour.js). Above everything,
   edge to edge including the safe areas; the film letterboxes itself in its own
   night colour, so upright it plays full width and sideways it fills the screen. */
#gymTour{position:fixed;inset:0;z-index:2147483000;background:#0B0D14;touch-action:none;cursor:pointer}
#gymTour canvas{position:absolute;inset:0;width:100%;height:100%;display:block;image-rendering:pixelated;image-rendering:crisp-edges}
html.gym-tour-open,html.gym-tour-open body{overflow:hidden}
/* the secret's door is the Today mascot itself: tappable in every motion setting */
#view .su-mascot{pointer-events:auto;-webkit-tap-highlight-color:transparent}

/* ShowUppp A welcomes; C marks completion. The functional UI keeps its type.
   Art is a traced vector, not live text. The mascot canvas has generous empty
   margins: compensate inside its column without scaling the lettering. */
.showuppp-lockup{display:grid;grid-template-columns:46% 54%;align-items:center;width:100%;max-width:360px;margin:0 auto}
.showuppp-character{position:relative;display:block;width:100%;aspect-ratio:1}
.showuppp-lockup .showuppp-character .su-mascot,#dayDone .ddbrand .showuppp-character .su-mascot{position:absolute;left:-40%;top:-5%;width:180%;max-width:none;margin:0}
.showuppp-lettering{display:block;width:100%;height:auto;min-width:0}
:root[data-theme="dark"] .showuppp-lettering{filter:brightness(0) invert(1)}
.onblogo:has(.showuppp-lockup){margin:0 0 14px}
.onblogo .showuppp-lockup{max-width:340px}
.showuppp-word-only,:root[data-mascot-motion="off"] .showuppp-lockup{display:block;max-width:190px}
:root[data-mascot-motion="off"] .showuppp-character{display:none}
#dayDone .ddhero.ddbrand{width:320px;max-width:100%;margin:0 auto 10px}
/* While the existing ink transition travels, only its flying mascot is visible. */
#dayDone.dd-ink .showuppp-lettering{visibility:hidden}
/* Brand introduces no extra animation loop. Existing hello/jump is stopped by
   the shared renderer for OS reduce / Still, with the PNG staying visible. */
:root[data-mascot-motion="still"] #dayDone .ddbrand,:root[data-mascot-motion="off"] #dayDone .ddbrand{animation:none;transform:none;opacity:1}
@media(prefers-reduced-motion:reduce){#dayDone .ddbrand{animation:none;transform:none;opacity:1}}
/* Approved smaller Lifted p trio: 124px x .9 x .9; mascot/Open gap unchanged. */
#dayDone .ddhero.ddbrand{width:211.04px;animation:none;transform:none;opacity:1}
.showuppp-c{position:relative;display:flex;gap:14px;align-items:center;justify-content:center;max-width:211.04px;min-height:83px}
.showuppp-c .showuppp-character{width:96.6px;height:59.892px;aspect-ratio:auto;flex:none;isolation:isolate}
#dayDone .ddbrand .showuppp-c .su-mascot{width:184.615%;left:-42.308%;top:-43.83%;pointer-events:none}
.showuppp-c .su-mascot img{transform-origin:50% 77%}
.showuppp-c .showuppp-lettering{width:100.44px;flex:none;overflow:visible;color:#2c2c2c;transform-origin:50% 60%}
:root[data-theme="dark"] .showuppp-c .showuppp-lettering{filter:none;color:#fff}
.showuppp-burst{position:absolute;width:4px;height:9px;border-radius:2px;background:var(--accent-ink);opacity:0;pointer-events:none}
.showuppp-burst:nth-of-type(even){height:4px;border-radius:50%;background:#84a0ff}
.showuppp-c [data-letter]{transform-box:fill-box;transform-origin:50% 100%}
.showuppp-ground{position:absolute;left:0;right:0;bottom:0;height:5px;border-radius:50%;background:radial-gradient(ellipse,#0003 0%,#00000014 48%,#0000 74%);filter:blur(.5px);z-index:-1}
:root[data-theme="dark"] .showuppp-ground{background:radial-gradient(ellipse,#0008 0%,#0003 48%,#0000 74%)}
#dayDone.dd-ink .showuppp-ground{visibility:hidden}
/* v4.6.311: the companion in Pip's place */
.su-companion{display:block;flex:none;pointer-events:none}
.su-companion:has(.crew-avatar){pointer-events:auto;animation:none!important;opacity:1!important;transform:none!important}
.crew-avatar{pointer-events:auto;cursor:pointer;--foot:0;--mid:.5;--fit:1}
.crew-avatar .crew-art,.crew-pip .crew-art{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;margin:0;transform:none!important;animation:none!important;filter:none!important}
/* v4.6.352: pinned to the box, not sized by percent. On a rest day the hello row is a column, and
   WebKit treats a column item's aspect-ratio height as indefinite: height:100% fell to 0 and Pip
   vanished on iPhone while the box kept its space (Chromium resolves it, so it looked fine there). */
.crew-pip>.crew-avatar{position:absolute;inset:0;width:auto;height:auto;margin:0}
/* On a floor (the plates, beside the day count) the crew stands with its body's base on the
   box's bottom edge and its body centred, wherever the art sits inside its square. */
.plate-comp .crew-art,.dd-companion .crew-art{top:calc(var(--foot,0)*100%);left:calc((.5 - var(--mid,.5))*100%);bottom:auto;right:auto}
/* Same visual weight for every crew (Sungjee, 2026-10-15): the art is scaled by --fit so each
   body covers the same area, then stood on the box's floor and centred. */
.crew-fit .crew-art{width:calc(var(--fit)*100%);height:calc(var(--fit)*100%);top:calc(100% - (1 - var(--foot))*var(--fit)*100%);left:calc(50% - var(--mid)*var(--fit)*100%);bottom:auto;right:auto}
.card.dayclosed .su-hello-comp{width:90px;height:90px;margin:-16px auto -5px}
/* One card height whoever is on it (Sungjee, 2026-10-15): Pip's art is wide and short, the crew's
   square, so Pip gets the difference above it and stands on the same floor over the number. */
.card.dayclosed>.su-mascot{margin-top:14px}
/* v4.6.377: approved +60% Pip, confined to the completed-day card. Scale the
   existing slot uniformly about the artwork's floor; keep card/count/header
   layout, the pinned WebKit child, and every other Crew/mascot slot unchanged. */
.card.dayclosed>.su-mascot{scale:1.6;transform-origin:50% 66.6%}
.crew-pip{pointer-events:auto}
.club-avatar.crew-avatar .club-pip-img{width:100%;height:100%;margin:0;animation:none!important}
.su-companion .club-avatar{width:100%;height:100%}
.su-hello-comp{width:68px;height:68px;margin-right:6px;animation:compIn .7s .25s cubic-bezier(.3,1.6,.5,1) both}
.rest-home .su-hello-comp{width:118px;height:118px}
.su-comp-rest .club-sprite{animation-duration:11s!important;filter:saturate(.75)}
.tipn .tip-comp{width:46px;height:46px;margin:-5px 0 -5px -4px;animation:tipWave 1.1s ease-in-out .35s both}
#dayDone .dd-numrow{display:inline-flex;align-items:flex-end;justify-content:center}
#dayDone .dd-numrow>.dd-companion{width:112px;height:112px;margin:0 -124px 11px 12px;animation:compHop 1.15s .55s cubic-bezier(.3,1.6,.5,1) both}
#dayDone .dd-wordonly .showuppp-lockup{margin:0 auto}
@keyframes compIn{from{opacity:0;transform:translateY(12px) scale(.6)}to{opacity:1;transform:none}}
@keyframes compHop{0%{opacity:0;transform:translate(30px,40px) scale(.4) rotate(12deg)}40%{opacity:1;transform:translate(0,-44px) scale(1.06) rotate(-6deg)}62%{transform:translate(0,4px) scale(1.12,.88)}78%{transform:translate(0,-8px) scale(.97,1.03)}100%{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.su-hello-row .su-hello-comp,.tipn .tip-comp,#dayDone .dd-numrow>.dd-companion{animation:none}}
:root[data-mascot-motion="still"] .su-companion{animation:none}
.su-comp-active .club-sprite{animation-duration:2.9s!important}
/* v4.6.312: the companion in setup */
#onb .ob-adopt .ad-in{padding-top:6px}
#onb .ob-adopt .ad-pip{width:96px;margin-bottom:8px}
#onb .ob-jump .ob-comp{width:120px;height:120px;opacity:0;animation:obJump .9s .25s cubic-bezier(.3,1.6,.5,1) forwards}
#dayDone .dd-crew{display:flex;align-items:center;justify-content:center;gap:8px;max-width:290px;margin:-3px auto 8px;text-align:left;font:400 13px/1.269 var(--body);color:var(--muted);animation:compIn .6s 2.1s cubic-bezier(.3,1.6,.5,1) both}#dayDone .dd-crew b{color:inherit;font-weight:600}
#dayDone .dd-crew svg{flex:none}
#dayDone .dd-companion{position:relative}
#dayDone .dd-comp-pin{position:absolute;right:-6px;top:-4px;width:36px;height:36px;border-radius:50%;background:var(--ground);display:grid;place-items:center;box-shadow:0 2px 8px rgba(0,0,0,.18);animation:ddPin .7s 2.2s cubic-bezier(.3,1.6,.5,1) both}
@keyframes ddPin{0%{opacity:0;transform:translateY(-60px) scale(1.8) rotate(-30deg)}70%{opacity:1;transform:translateY(2px) scale(.9) rotate(6deg)}100%{opacity:1;transform:none}}
#dayDone .dd-num-medal{flex:none;align-self:flex-start;margin:-5px -28px 0 -12px;position:relative;z-index:1;width:40px;height:40px;border-radius:50%;background:var(--ground);display:grid;place-items:center;box-shadow:0 2px 8px rgba(0,0,0,.18);animation:ddPin .7s 1.9s cubic-bezier(.3,1.6,.5,1) both}
/* v4.6.379: your crew takes the ink crossing too -- visible over the flood, white for the blue */
#dayDone.dd-ink .dd-numrow>.dd-companion{visibility:visible}
#dayDone.dd-inked .dd-numrow>.dd-companion{z-index:3}   /* over the ink, as Pip's lockup is */
#dayDone .dd-companion .dd-white-art{visibility:hidden}
#dayDone .dd-companion.dd-white .dd-white-art{visibility:visible}
#dayDone .dd-companion.dd-white .crew-art:not(.dd-white-art){visibility:hidden}
#dayDone .dd-numrow>.dd-companion.dd-white.dd-white-flat{filter:brightness(0) invert(1)}

/* v4.6.444: ON A REST DAY THE CREW IS WHITE. Its own white render sits over the colour art (which keeps
   playing underneath, unseen); tapping Rest day turns it, blue to white, after it lands (crewRestMorph). */
.su-comp-white .crew-white-art{z-index:3;pointer-events:none}
.su-comp-white .crew-art:not(.crew-white-art){opacity:0}

/* v4.6.444: REST, BREATHING. The resting crew rises and settles once every ~5.5s,
   from its floor; a tap and it stretches (a yawn), then settles back into the breath.
   Individual scale/rotate, so the glide's transform composes with it untouched. */
.rest-home .su-comp-rest .crew-avatar{transform-origin:50% 82%;animation:crewBreath 5.6s ease-in-out 1.4s infinite}
.rest-home .su-comp-rest .crew-avatar.yawn{animation:crewYawn 1.7s cubic-bezier(.45,0,.3,1) 1}
@keyframes crewBreath{0%,100%{scale:1 1}45%{scale:1.025 1.045}55%{scale:1.025 1.045}}
@keyframes crewYawn{0%{scale:1 1;rotate:0deg}18%{scale:1.04 .94;rotate:0deg}48%{scale:.95 1.12;rotate:-4deg}66%{scale:.97 1.1;rotate:3deg}84%{scale:1.03 .97;rotate:0deg}100%{scale:1 1;rotate:0deg}}
@media (prefers-reduced-motion:reduce){.rest-home .su-comp-rest .crew-avatar,.rest-home .su-comp-rest .crew-avatar.yawn{animation:none}}
.rest-home .hello .hisub.rest-tmw{display:block}