/* Progress guide widgets (see widgets.js). Light-DOM children are the no-JS
   fallback; once an element upgrades ([data-ready]) only its .pg-ui shows. */
pg-compare,pg-scrubber,pg-poses,pg-stepper,pg-trend-chart,pg-framing,pg-checklist{
  --pg-ink:#1d1d1f;--pg-muted:#6e6e73;--pg-panel:#f2f1ee;--pg-card:#fff;--pg-line:rgba(0,0,0,.09);--pg-fill:rgba(0,0,0,.055);
  --pg-orange:#ff8a1f;--pg-accent:#c25e00;--pg-cyan:#7fe9ff;--pg-hip:#c9a7ff;--pg-stage:#1c1c1e;
  --pg-good:#248a3d;--pg-warn:#c25e00;--pg-bad:#d70015;
  --pg-ease:cubic-bezier(.22,1,.36,1);
  display:block;margin:40px 0;color:var(--pg-ink);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",InterLocal,system-ui,sans-serif;
  -webkit-tap-highlight-color:transparent
}
@media (prefers-color-scheme:dark){
  pg-compare,pg-scrubber,pg-poses,pg-stepper,pg-trend-chart,pg-framing,pg-checklist{
    --pg-ink:#f5f5f7;--pg-muted:#98989d;--pg-panel:#141416;--pg-card:#1f1f22;--pg-line:rgba(255,255,255,.1);--pg-fill:rgba(255,255,255,.08);
    --pg-accent:#ff9f3f;--pg-stage:#0b0b0c;--pg-good:#30d158;--pg-warn:#ff9f3f;--pg-bad:#ff6961
  }
}
:is(pg-compare,pg-scrubber,pg-poses,pg-stepper,pg-trend-chart,pg-framing,pg-checklist)[data-ready]>:not(.pg-ui){display:none}
.pg-ui{position:relative;background:var(--pg-panel);border-radius:28px;padding:clamp(14px,3.6vw,28px);container-type:inline-size;font-size:16px;line-height:1.5}
.pg-ui :focus-visible{outline:2px solid var(--pg-orange);outline-offset:3px}
.pg-ui button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:pointer}
.pg-ui button:disabled{cursor:default;opacity:.35}
.pg-ui .pg-eyebrow{margin:0;font-size:13px;font-weight:650;letter-spacing:.01em;color:var(--pg-accent)}

/* Photo stage: always dark, like the homepage viewer */
.pg-stage{position:relative;width:min(100%,420px,calc((100svh - 230px) * .6));min-width:min(100%,260px);margin-inline:auto;aspect-ratio:3/5;border-radius:22px;overflow:hidden;background:var(--pg-stage);
  box-shadow:0 0 0 1px rgba(255,255,255,.06),0 30px 60px -30px rgba(0,0,0,.55);user-select:none;-webkit-user-select:none;touch-action:pan-y;isolation:isolate}
.pg-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.pg-stage:focus-visible{outline:2px solid var(--pg-orange);outline-offset:4px}
.pg-grab{cursor:grab}.pg-grab:active{cursor:grabbing}
.pg-loading .pg-stage::after,.pg-loading .pg-view::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.07) 50%,transparent 70%) 0 0/250% 100%;animation:pg-shimmer 1.4s linear infinite}
@keyframes pg-shimmer{to{background-position:-250% 0}}
.pg-error .pg-stage::before{content:"Sample photos could not load.";position:absolute;inset:auto 0 45% 0;text-align:center;color:#8e8e93;font-size:14px}
.pg-glass,.pg-pill,.pg-align[aria-pressed=false],.pg-play,.pg-handle{color:#fff;background:rgba(40,40,40,.45);box-shadow:0 0 0 1px rgba(255,255,255,.2) inset;-webkit-backdrop-filter:blur(16px) saturate(1.6);backdrop-filter:blur(16px) saturate(1.6)}
.pg-pill{position:absolute;bottom:12px;z-index:2;height:28px;display:inline-flex;align-items:center;padding:0 12px;border-radius:999px;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;pointer-events:none;white-space:nowrap}
.pg-left{left:12px}.pg-right{right:12px}
.pg-ui .pg-align{position:absolute;top:12px;left:50%;z-index:3;transform:translateX(-50%);display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 14px 0 11px;border-radius:999px;font-size:14px;font-weight:600;color:#1a0d00;background:var(--pg-orange);
  box-shadow:0 0 0 1px rgba(255,255,255,.35) inset,0 6px 20px -6px rgba(255,138,31,.7);transition:background .25s,color .25s,box-shadow .25s,transform .2s var(--pg-ease)}
.pg-ui .pg-align[aria-pressed=false]{color:#fff;background:rgba(30,30,30,.55);box-shadow:0 0 0 1px rgba(255,255,255,.22) inset}
.pg-align:active{transform:translateX(-50%) scale(.95)}
.pg-align svg{width:15px;height:15px}
.pg-ui .pg-play{position:absolute;right:12px;bottom:12px;z-index:3;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;transition:transform .2s var(--pg-ease)}
.pg-play:active{transform:scale(.92)}
.pg-play svg{width:14px;height:14px}

/* Compare */
.pg-range{position:absolute;inset:0;z-index:1;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;touch-action:pan-y}
.pg-divider{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:2px;margin-left:-1px;background:rgba(255,255,255,.92);box-shadow:0 0 12px rgba(0,0,0,.35);pointer-events:none}
.pg-handle{position:absolute;top:50%;left:var(--pos,50%);z-index:2;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;display:grid;place-items:center;pointer-events:none;transition:box-shadow .2s}
.pg-handle svg{width:22px;height:22px}
.pg-range:focus-visible~.pg-handle{box-shadow:0 0 0 2px var(--pg-orange),0 8px 24px rgba(0,0,0,.35)}
.pg-range:active~.pg-handle{transform:scale(1.08)}

/* Filmstrip (scrubber) */
.pg-strip{position:relative;height:74px;margin:14px auto 0;max-width:520px;overflow:hidden;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none;
  -webkit-mask:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent);mask:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent)}
.pg-strip:active{cursor:grabbing}
.pg-strip-track{position:absolute;left:50%;top:7px;display:flex;gap:5px;will-change:transform}
.pg-strip-track canvas{width:44px;height:60px;border-radius:8px;flex:none;background:var(--pg-stage);opacity:.55;transition:opacity .2s}
.pg-strip-track canvas.sel{opacity:1}
.pg-strip-focus{position:absolute;left:50%;top:4px;width:50px;height:66px;margin-left:-25px;border-radius:11px;box-shadow:0 0 0 2px var(--pg-ink),0 4px 14px rgba(0,0,0,.25);pointer-events:none}

/* Footer: person switcher + sample note */
.pg-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin-top:16px}
.pg-ui .pg-note{margin:0 0 0 auto;font-size:12.5px;line-height:1.3;color:var(--pg-muted);text-align:right}
.pg-foot .pg-seg{max-width:100%}

/* Segmented control */
.pg-seg{position:relative;display:inline-flex;max-width:100%;padding:3px;border-radius:999px;background:var(--pg-fill);overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}
.pg-seg::-webkit-scrollbar{display:none}
.pg-seg.pg-fade-r{-webkit-mask:linear-gradient(90deg,#000 calc(100% - 36px),transparent);mask:linear-gradient(90deg,#000 calc(100% - 36px),transparent)}
.pg-seg.pg-fade-l{-webkit-mask:linear-gradient(90deg,transparent,#000 36px);mask:linear-gradient(90deg,transparent,#000 36px)}
.pg-seg.pg-fade-l.pg-fade-r{-webkit-mask:linear-gradient(90deg,transparent,#000 36px calc(100% - 36px),transparent);mask:linear-gradient(90deg,transparent,#000 36px calc(100% - 36px),transparent)}
.pg-seg-thumb{position:absolute;top:3px;bottom:3px;left:0;border-radius:999px;background:var(--pg-card);box-shadow:0 1px 2px rgba(0,0,0,.08),0 3px 10px -2px rgba(0,0,0,.12);transition:transform .38s var(--pg-ease),width .38s var(--pg-ease)}
.pg-ui .pg-seg button{position:relative;flex:none;height:32px;padding:0 15px;border-radius:999px;font-size:14px;font-weight:550;color:var(--pg-muted);white-space:nowrap;transition:color .25s}
.pg-ui .pg-seg button[aria-pressed=true]{color:var(--pg-ink)}
.pg-ui .pg-seg button:focus-visible{outline-offset:-2px}
@media (prefers-color-scheme:dark){.pg-seg-thumb{background:rgba(255,255,255,.16);box-shadow:none}}
.pg-seg-slot{display:flex;justify-content:center;margin-bottom:16px}
@container (max-width:420px){.pg-ui .pg-seg button{padding:0 11px;font-size:13.5px}}

/* Poses */
.pg-poses-grid{display:grid;gap:18px}
.pg-poses-photo .pg-stage{width:min(100%,340px)}
.pg-ui .pg-cue-title{margin:0 0 6px;font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.pg-cues{display:grid}
.pg-ui .pg-cues>*{grid-area:1/1;margin:0;color:var(--pg-muted);font-size:16.5px;line-height:1.55;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .3s,transform .4s var(--pg-ease),visibility 0s .3s}
.pg-ui .pg-cues>.on{opacity:1;visibility:visible;transform:none;transition:opacity .35s .05s,transform .45s .05s var(--pg-ease)}
@container (min-width:600px){
  .pg-poses-grid{grid-template-columns:minmax(0,340px) 1fr;align-items:center;gap:32px}
  .pg-poses-text{padding-bottom:24px}
  .pg-ui .pg-cue-title{font-size:26px}
}
@container (max-width:599px){.pg-poses-text{text-align:center;max-width:34em;margin-inline:auto}}

/* Stepper */
.pg-rail{position:relative;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));margin:14px 0 22px;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.pg-rail-track{position:absolute;top:13px;left:calc(50% / var(--n));right:calc(50% / var(--n));height:4px;border-radius:2px;background:var(--pg-fill);overflow:hidden;pointer-events:none}
.pg-rail-fill{position:absolute;inset:0;background:linear-gradient(90deg,#ff9f3f,#ff6a1f 60%,#ff4f6d);transform-origin:left;transform:scaleX(0);transition:transform .5s var(--pg-ease)}
.pg-ui .pg-tab{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0;padding:4px 2px;border-radius:12px}
.pg-tab-dot{position:relative;width:22px;height:22px;border-radius:50%;background:var(--pg-panel);box-shadow:inset 0 0 0 2px var(--pg-line);transition:box-shadow .3s,transform .35s var(--pg-ease),background .3s}
.pg-tab-dot::after{content:"";position:absolute;inset:6px;border-radius:50%;background:var(--pg-muted);opacity:.5;transition:background .3s,opacity .3s,transform .3s var(--pg-ease)}
.pg-tab.done .pg-tab-dot{box-shadow:inset 0 0 0 2px var(--pg-orange)}
.pg-tab.done .pg-tab-dot::after{background:var(--pg-orange);opacity:1}
.pg-tab[aria-selected=true] .pg-tab-dot{background:var(--pg-orange);box-shadow:0 0 0 5px rgba(255,138,31,.2);transform:scale(1.12)}
.pg-tab[aria-selected=true] .pg-tab-dot::after{background:#fff;opacity:1;transform:scale(.8)}
.pg-tab:hover .pg-tab-dot{transform:scale(1.08)}
.pg-tab-label{max-width:100%;font-size:13.5px;font-weight:600;line-height:1.2;color:var(--pg-muted);text-align:center;font-variant-numeric:tabular-nums;transition:color .25s;overflow-wrap:anywhere}
.pg-tab[aria-selected=true] .pg-tab-label{color:var(--pg-ink)}
@container (max-width:460px){.pg-rail[style*="--n:6"] .pg-tab-label,.pg-rail[style*="--n:7"] .pg-tab-label,.pg-rail[style*="--n:8"] .pg-tab-label,.pg-rail[style*="--n:9"] .pg-tab-label{font-size:11.5px}}
.pg-panels{display:grid}
.pg-panel{grid-area:1/1;min-width:0;padding:22px;border-radius:20px;background:var(--pg-card);opacity:0;visibility:hidden;transform:translateX(calc(var(--dir,1) * 18px));
  transition:opacity .25s,transform .4s var(--pg-ease),visibility 0s .25s}
.pg-panel.on{opacity:1;visibility:visible;transform:none;transition:opacity .35s .08s,transform .5s .04s var(--pg-ease)}
.pg-ui .pg-panel>:first-child{margin-top:0}.pg-ui .pg-panel>:last-child{margin-bottom:0}
.pg-ui .pg-panel h3,.pg-ui .pg-panel h4{margin:0 0 8px;font-size:20px;letter-spacing:-.015em;line-height:1.25}
.pg-ui .pg-panel p,.pg-ui .pg-panel ul,.pg-ui .pg-panel ol{margin:0 0 12px;color:var(--pg-muted)}
.pg-panel strong{color:var(--pg-ink)}
.pg-ui .pg-panel-media{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;margin:0 0 16px;border-radius:14px;background:var(--pg-panel)}
.pg-stepnav{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:14px}
.pg-ui .pg-nav-btn{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--pg-fill);transition:transform .2s var(--pg-ease),background .2s}
.pg-ui .pg-nav-btn:not(:disabled):hover{background:var(--pg-line)}
.pg-ui .pg-nav-btn:not(:disabled):active{transform:scale(.92)}
.pg-nav-btn svg{width:15px;height:15px}
.pg-count{min-width:4.5em;text-align:center;font-size:13px;font-weight:600;color:var(--pg-muted);font-variant-numeric:tabular-nums}

/* Trend chart */
.pg-chart-head{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px}
.pg-chips{display:flex;flex-wrap:wrap;gap:8px}
.pg-ui .pg-chip{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 14px 0 12px;border-radius:999px;font-size:14px;font-weight:600;background:var(--pg-card);box-shadow:inset 0 0 0 1px var(--pg-line);transition:opacity .2s,background .2s,transform .2s var(--pg-ease)}
.pg-ui .pg-chip[aria-pressed=false]{opacity:.5;background:transparent}
.pg-chip:active{transform:scale(.96)}
.pg-chip i{width:9px;height:9px;border-radius:50%;background:var(--pg-ink);opacity:.55}
.pg-chip-trend i{width:16px;height:4px;border-radius:2px;background:linear-gradient(90deg,#ff9f3f,#ff4f6d);opacity:1}
.pg-plot{position:relative;aspect-ratio:16/8;min-height:240px;touch-action:pan-y;cursor:crosshair;border-radius:12px}
.pg-plot canvas{position:absolute;inset:0;width:100%;height:100%}
.pg-readout{position:absolute;top:-6px;left:0;display:flex;flex-direction:column;gap:1px;padding:8px 12px;border-radius:12px;font-size:12.5px;line-height:1.35;white-space:nowrap;pointer-events:none;
  background:var(--pg-card);box-shadow:0 0 0 1px var(--pg-line),0 8px 24px -8px rgba(0,0,0,.25);opacity:0;transition:opacity .15s}
.pg-readout.on{opacity:1}
.pg-readout b{font-size:13px}
.pg-readout span{color:var(--pg-muted)}
.pg-readout em{font-style:normal;font-weight:600;color:var(--pg-ink);font-variant-numeric:tabular-nums}
.pg-r-trend em{color:var(--pg-accent)}
.pg-ui .pg-chart-summary{margin:0;font-size:14px;color:var(--pg-muted);flex:1 1 260px}
@container (max-width:480px){.pg-plot{aspect-ratio:4/3.4}}

/* Framing simulator */
.pg-framing-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:14px;align-items:stretch}
.pg-scene-box{position:relative;min-height:220px;border-radius:18px;overflow:hidden;background:radial-gradient(120% 90% at 50% 35%,var(--pg-card),var(--pg-panel))}
.pg-scene{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}
.pg-scene.dragging{cursor:grabbing}
.pg-hint{position:absolute;left:0;right:0;bottom:10px;text-align:center;font-size:12px;font-weight:500;color:var(--pg-muted);pointer-events:none}
.pg-view{position:relative;aspect-ratio:3/4;border-radius:18px;overflow:hidden;background:var(--pg-stage);box-shadow:0 0 0 1px var(--pg-line),0 18px 40px -24px rgba(0,0,0,.45)}
.pg-view canvas{position:absolute;inset:0;width:100%;height:100%}
.pg-view .pg-pill{top:10px;bottom:auto;left:10px;height:24px;padding:0 9px;font-size:11.5px}
.pg-sliders{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;margin-top:20px}
.pg-slider{display:grid;gap:8px}
.pg-slider-head{display:flex;justify-content:space-between;gap:8px;font-size:14px;font-weight:600}
.pg-slider output{font-weight:500;color:var(--pg-muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.pg-slider input{-webkit-appearance:none;appearance:none;width:100%;height:28px;margin:0;background:transparent;cursor:pointer;touch-action:pan-y}
.pg-slider input::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(90deg,var(--pg-orange) var(--fill,50%),var(--pg-fill) var(--fill,50%))}
.pg-slider input::-moz-range-track{height:6px;border-radius:3px;background:linear-gradient(90deg,var(--pg-orange) var(--fill,50%),var(--pg-fill) var(--fill,50%))}
.pg-slider input::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;margin-top:-9px;border-radius:50%;background:#fff;box-shadow:0 0 0 .5px rgba(0,0,0,.12),0 3px 8px rgba(0,0,0,.2);transition:transform .2s var(--pg-ease)}
.pg-slider input::-moz-range-thumb{width:24px;height:24px;border:0;border-radius:50%;background:#fff;box-shadow:0 0 0 .5px rgba(0,0,0,.12),0 3px 8px rgba(0,0,0,.2)}
.pg-slider input:active::-webkit-slider-thumb{transform:scale(1.12)}
.pg-slider input:focus-visible{outline:none}
.pg-slider input:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--pg-orange)}
.pg-slider input:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px var(--pg-orange)}
.pg-ui .pg-verdict{display:flex;gap:10px;align-items:flex-start;margin:18px 0 0;padding:12px 14px;border-radius:14px;background:var(--pg-card);font-size:15px;font-weight:550;line-height:1.4}
.pg-ui .pg-verdict::before{content:"";flex:none;width:10px;height:10px;margin-top:5px;border-radius:50%;background:var(--c,var(--pg-muted));box-shadow:0 0 0 4px color-mix(in srgb,var(--c,var(--pg-muted)) 22%,transparent)}
.pg-verdict[data-status=good]{--c:var(--pg-good)}.pg-verdict[data-status=warn]{--c:var(--pg-warn)}.pg-verdict[data-status=bad]{--c:var(--pg-bad)}
@container (max-width:520px){.pg-sliders{grid-template-columns:1fr}.pg-framing-grid{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:10px}.pg-scene-box{min-height:190px}.pg-hint{font-size:11px;bottom:6px}}

/* Checklist */
.pg-check-head{display:flex;align-items:baseline;gap:12px}
.pg-check-count{margin-left:auto;font-size:14px;font-weight:600;color:var(--pg-muted);font-variant-numeric:tabular-nums}
.pg-ui .pg-reset{font-size:14px;font-weight:600;color:var(--pg-accent)}
.pg-progress{display:block;height:6px;margin:12px 0 10px;border-radius:3px;background:var(--pg-fill);overflow:hidden}
.pg-progress-fill{display:block;height:100%;background:linear-gradient(90deg,#ff9f3f,#ff6a1f 60%,#ff4f6d);transform-origin:left;transform:scaleX(0);transition:transform .45s var(--pg-ease)}
pg-checklist .pg-ui .pg-check-list{list-style:none;margin:0;padding:0}
pg-checklist .pg-ui .pg-check-list li{margin:0;border-top:1px solid var(--pg-line)}
pg-checklist .pg-ui .pg-check-list li:first-child{border-top:0}
pg-checklist .pg-ui li::marker{content:none}
.pg-ui .pg-check{display:flex;gap:14px;align-items:flex-start;padding:13px 4px;cursor:pointer;border-radius:12px}
.pg-check-input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.pg-box{flex:none;width:24px;height:24px;margin-top:1px;border-radius:50%;display:grid;place-items:center;color:#fff;box-shadow:inset 0 0 0 2px var(--pg-line);transition:background .25s,box-shadow .25s,transform .3s var(--pg-ease)}
.pg-box svg{width:14px;height:14px;stroke-dasharray:16;stroke-dashoffset:16;transition:stroke-dashoffset .3s var(--pg-ease)}
.pg-check:hover .pg-box{box-shadow:inset 0 0 0 2px var(--pg-muted)}
.pg-check-input:checked+.pg-box{background:var(--pg-orange);box-shadow:none;transform:scale(1.06)}
.pg-check-input:checked+.pg-box svg{stroke-dashoffset:0}
.pg-check-input:checked+.pg-box svg path{stroke:#1a0d00}
.pg-check-input:focus-visible+.pg-box{outline:2px solid var(--pg-orange);outline-offset:3px}
.pg-check-text{flex:1;min-width:0;font-size:16.5px;line-height:1.45;transition:color .25s}
.pg-check-text a{color:var(--pg-accent)}
li.done .pg-check-text{color:var(--pg-muted)}
pg-checklist.complete .pg-check-count{color:var(--pg-accent)}
pg-checklist.complete .pg-ui{box-shadow:inset 0 0 0 1.5px rgba(255,138,31,.45);transition:box-shadow .4s}

@media (prefers-reduced-motion:reduce){
  pg-compare *,pg-scrubber *,pg-poses *,pg-stepper *,pg-trend-chart *,pg-framing *,pg-checklist *{transition:none!important;animation:none!important}
}