.hero svg circle:nth-of-type(2){animation:bob 4s ease-in-out infinite}
.hero svg path:nth-of-type(1){transform-origin:160px 300px;animation:breathe 4s ease-in-out infinite}
.hero svg path:nth-of-type(3){animation:wave 2s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-6px)}}
@keyframes breathe{50%{transform:scale(1.04,1.03)}}
@keyframes wave{50%{opacity:.35}}
.hero .btn{position:relative;overflow:hidden}
.hero .btn::after{content:"";position:absolute;top:-20%;bottom:-20%;left:-40%;width:30%;background:rgba(255,255,255,.65);transform:skewX(-20deg);animation:shine 3.4s ease-in-out infinite}
@keyframes shine{0%,62%{left:-40%}100%{left:130%}}

.posture{height:300vh;padding:0}
.posture-pin{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;background:var(--pbg,#efe3d2);overflow:hidden}
.posture-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:center;width:100%}
.kicker{font-size:14px;font-weight:700;color:var(--teal);margin-bottom:10px}
h1,h2,.lead,.map-big{word-break:auto-phrase;text-wrap:balance}
.posture h2{text-align:left;margin-bottom:14px;min-height:2.9em}
#pbody{min-height:3.7em}
.meter{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:700;margin-top:20px}
.meter div{flex:1;height:12px;border-radius:99px;background:rgba(15,92,92,.15);overflow:hidden}
.meter i{display:block;height:100%;width:100%;transform-origin:left;transform:scaleX(0);background:var(--teal);border-radius:99px}
#pfig{width:100%;height:auto;max-height:70vh}

.map-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,5fr);gap:32px;align-items:center;max-width:860px;margin:auto}
#body{width:100%;max-height:520px}
.zone{cursor:pointer;outline:none}
.zone .dot{fill:#ffc94d;stroke:#fff;stroke-width:3;transition:fill .2s,r .2s}
.zone .ring{fill:none;stroke:#e8820c;stroke-width:3;transform-box:fill-box;transform-origin:center;animation:ring 2s ease-out infinite}
.zone .hit{fill:transparent}
.zone text{font-family:inherit;font-size:15px;font-weight:700;fill:var(--ink);paint-order:stroke;stroke:var(--cream);stroke-width:4px}
.zone:hover .dot,.zone:focus-visible .dot{fill:#e8820c}
.zone[aria-pressed=true] .dot{fill:var(--teal);r:14}
.zone:focus-visible .hit{stroke:#e8820c;stroke-width:2}
@keyframes ring{0%{transform:scale(.7);opacity:.9}100%{transform:scale(1.8);opacity:0}}
.map-panel{background:#fff;border-radius:28px;padding:28px 24px;min-height:420px;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 34px rgba(15,92,92,.12)}
.map-panel>div{width:100%}
.map-big{font-weight:900;font-size:26px;line-height:1.5;color:var(--teal);text-align:center}
.map-note{font-size:14px;color:var(--sub);text-align:center;margin-top:10px}
#p-title{font-size:24px;font-weight:900;color:var(--teal);text-align:center}
#p-scene{text-align:center;font-size:15px;color:var(--sub)}
.timer{position:relative;width:120px;height:120px;margin:12px auto 6px}
.timer svg{width:100%;height:100%}
.timer circle{fill:none;stroke-width:10}
.timer .track{stroke:var(--mint)}
.timer .prog{stroke:var(--teal);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:0}
.timer-mid{position:absolute;inset:0;display:flex;align-items:baseline;justify-content:center;padding-top:40px;gap:2px}
.timer-mid strong{font-size:34px;font-weight:900;line-height:1}
.cue{text-align:center;font-weight:700;font-size:19px;min-height:1.9em}
.map-btns{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:6px}
.map-btns .btn{font-size:17px;padding:12px 28px}
.ghost{color:var(--teal);font-weight:700}
.ghost:focus-visible{outline:3px solid #e8820c;outline-offset:2px}

.slots-wrap{margin-bottom:12px}
.slots-title{font-weight:700;margin-bottom:6px}
.slots-title small{font-weight:500;color:var(--sub);margin-left:6px}
.slots{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 8px}
.slot{flex:0 0 66px;font:inherit;border:2px solid var(--line);border-radius:14px;background:#fff;padding:8px 2px;cursor:pointer;line-height:1.35;color:var(--ink);transition:transform .15s,background .15s}
.slot small{display:block;font-size:12px;color:var(--sub)}
.slot b{display:block;font-size:17px;font-weight:900}
.slot i{font-style:normal;font-size:12px;font-weight:700;color:var(--teal)}
.slot:hover:not(:disabled){transform:translateY(-2px)}
.slot:disabled{opacity:.45;cursor:not-allowed}
.slot[aria-pressed=true]{background:var(--teal);border-color:var(--teal);color:#fff}
.slot[aria-pressed=true] small,.slot[aria-pressed=true] i{color:#fff}
.slot:focus-visible{outline:3px solid #e8820c;outline-offset:2px}

.pop{opacity:0;transform:translateY(18px) scale(.97);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.9,.3,1.3);transition-delay:var(--d,0s)}
.pop.in{opacity:1;transform:none}

@media (max-width:760px){
  .posture-grid{grid-template-columns:1fr;gap:6px}
  .posture-text{order:2}
  #pfig{max-height:40vh}
  .posture h2{font-size:23px;min-height:0;margin-bottom:6px}
  #pbody{font-size:15px;min-height:4em}
  .meter{margin-top:6px}
  .map-grid{grid-template-columns:1fr;gap:16px}
  #body{max-height:380px}
  .map-panel{min-height:0}
}
@media (prefers-reduced-motion:reduce){
  .hero svg *,.hero .btn::after,.zone .ring{animation:none}
  .posture{height:auto}
  .posture-pin{position:static;height:auto;padding:56px 0}
  .pop{opacity:1;transform:none;transition:none}
}