html, body { margin: 0; min-height: 100%; background: var(--t-bg); color: var(--t-text); font-family: var(--t-font); }
body { -webkit-font-smoothing: antialiased; }
.welcome, .welcome * { box-sizing: border-box; min-width: 0; }
.welcome { max-width: 35rem; min-height: 100vh; min-height: 100svh; margin: 0 auto; display: flex; flex-direction: column; }
.welcome__eyebrow { margin: .25rem 1rem .8rem; text-align: center; color: var(--t-text-muted); font-size: .65rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }
.welcome__main { flex: 1; min-width: 0; }
.welcome__track { display: flex; align-items: flex-start; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
.welcome__track::-webkit-scrollbar { display: none; }
.welcome__slide { flex: 0 0 100%; padding: .25rem 1rem .8rem; scroll-snap-align: center; scroll-snap-stop: always; }
.welcome__heading { padding: 0 .2rem; text-align: center; }
.welcome__slide h1 { max-width: 28rem; margin: 0 auto .7rem; font-family: var(--t-font-display); font-size: clamp(1.15rem, 6vw, 1.5rem); font-weight: 800; line-height: 1.25; letter-spacing: -.025em; text-wrap: balance; overflow-wrap: normal; }
.welcome__description { max-width: 26rem; margin: 0 auto 1.15rem; color: var(--t-text-muted); font-size: .85rem; line-height: 1.5; text-wrap: pretty; }
.welcome__sample { position: relative; border: 1px solid var(--t-border); border-radius: 1.5rem; background: var(--t-card); box-shadow: var(--t-row-shadow); overflow: hidden; }
.welcome__sample h2 { margin: .4rem 0 0; font-size: 1.1rem; line-height: 1.3; font-weight: 800; }
.welcome__sample-label { display: flex; align-items: center; gap: .3rem; color: var(--t-text-muted); font-size: .65rem; font-weight: 650; line-height: 1.4; }
.welcome__program-head { padding: .8rem 1rem .65rem; background: var(--t-hero-bg); }
.welcome .day-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .35rem; padding: .65rem .65rem .5rem; }
.welcome .day-tab { display: flex; flex-direction: column; justify-content: center; gap: .25rem; padding: .6rem .3rem; border: 1px solid var(--t-border); border-radius: .75rem; text-align: center; background: transparent; color: var(--t-text); font: inherit; touch-action: manipulation; }
.welcome .day-tab strong { font-size: .75rem; }
.welcome .day-tab small { font-size: .6rem; line-height: 1.2; color: var(--t-text-muted); }
.welcome .day-tab.is-on { border-color: var(--t-primary); background: var(--t-primary-tint); }
.welcome .day-tab.is-on strong { color: var(--t-primary); }
.welcome__exercise-list { display: grid; gap: .4rem; padding: 0 .65rem .65rem; }
.welcome__exercise-list[hidden] { display: none; }
/* Faithful, isolated presentation of the current program.php excard renderer. */
.welcome .excard { border: 1px solid var(--t-border); border-radius: .9rem; background: var(--t-card); overflow: hidden; }
.welcome .vbp-trigger-wrap { display: grid; grid-template-columns: 5rem minmax(0, 1fr) 1rem; gap: .65rem; padding: .3rem .6rem; align-items: center; }
.welcome .excard__thumb { display: block; width: 5rem; height: 4.1rem; overflow: hidden; border: 1px solid var(--t-border); border-radius: .65rem; background: var(--t-bg); }
.welcome .excard__thumb img { display: block; width: 100%; height: 100%; object-fit: contain; transform: scale(1.18); }
.welcome .excard__main { min-width: 0; }
.welcome .excard__name { display: block; font-size: .85rem; line-height: 1.25; font-weight: 800; }
.welcome .excard__chips { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .45rem; }
.welcome .ex-chip { display: inline-flex; align-items: center; gap: .2rem; padding: .15rem .35rem; border-radius: 1rem; font-size: .6rem; font-weight: 600; line-height: 1.4; color: var(--t-text-muted); }
.welcome .ex-chip--sets { color: var(--t-chip-primary-fg); background: var(--t-chip-primary-bg); }
.welcome .excard__chev { color: var(--t-text-muted); }
.welcome__example { display: block; padding: .45rem .75rem .55rem; color: var(--t-text-subtle); text-align: center; font-size: .6rem; }
.welcome__sample--sets { padding: .65rem .65rem 0; }
.welcome__logging-body { padding: .7rem .5rem .5rem; }
.welcome__working { display: flex; justify-content: space-between; gap: .4rem; margin-bottom: .6rem; font-size: .75rem; }
.welcome__working > span { color: var(--t-text-muted); font-variant-numeric: tabular-nums; }
/* Current vbp-setrows--menu: weight/repetitions on separate lines, numbered
   sets, violet completed state and yellow next-set state. No live writers. */
.welcome .vbp-setrows { display: grid; gap: .4rem; }
.welcome .vbp-setrow { border: 1px solid var(--t-border); border-radius: .75rem; background: var(--t-card); padding: .4rem .45rem; }
.welcome .vbp-setrow__line1 { display: grid; grid-template-columns: 28px minmax(0, 1fr) 40px; gap: 6px; align-items: center; }
.welcome .vbp-setrow__num { grid-column: 1; grid-row: 1 / 3; display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--t-primary); border-radius: 50%; color: var(--t-primary); font-size: .75rem; font-weight: 800; }
.welcome .vbp-setrow--done .vbp-setrow__num { background: var(--t-action-violet); border-color: var(--t-action-violet); color: var(--t-on-primary); }
.welcome .vbp-active-set-next .vbp-setrow__num { background: var(--t-accent); border-color: var(--t-accent); color: var(--t-cta-fg); }
.welcome :is(.vbp-setrow__load, .vbp-setrow__metric) { grid-column: 2; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 6px; align-items: center; }
.welcome .vbp-setrow__load { grid-row: 1; }
.welcome .vbp-setrow__metric { grid-row: 2; }
.welcome :is(.vbp-setrow__weight-group, .vbp-setrow__reps-group) { display: grid; grid-template-columns: 36px minmax(0, 1fr) 36px; align-items: center; text-align: center; }
.welcome .vbp-setrow__adj { display: grid; place-items: center; height: 36px; width: 36px; border: 1px solid var(--t-border-strong); border-radius: 50%; color: var(--t-primary); font-size: .9rem; font-weight: 700; }
.welcome :is(.vbp-setrow__wt, .vbp-setrow__reps) { display: grid; align-items: center; min-height: 36px; font-size: .85rem; font-variant-numeric: tabular-nums; }
.welcome .vbp-setrow__wt { border: 1px solid var(--t-border-strong); border-radius: .4rem; }
.welcome .vbp-setrow__field-label { font-size: .65rem; line-height: 1.25; font-weight: 650; overflow-wrap: anywhere; }
.welcome .vbp-setrow__prev { display: block; color: var(--t-text-muted); font-weight: 400; font-size: .6rem; margin-top: .15rem; }
.welcome .vbp-set-check { grid-column: 3; grid-row: 1 / 3; display: grid; place-items: center; width: 40px; height: 40px; border: 1.5px solid var(--t-border-strong); border-radius: 50%; color: var(--t-primary); background: transparent; padding: 0; touch-action: manipulation; }
.welcome .vbp-set-check.done { background: var(--t-action-violet); border-color: var(--t-action-violet); color: var(--t-on-primary); }
.welcome .vbp-setrow--done :is(.vbp-setrow__adj, .vbp-setrow__wt, .vbp-setrow__reps) { opacity: .55; }
.welcome__rest { display: flex; align-items: center; gap: .45rem; margin-top: .65rem; padding: .65rem .5rem; border-radius: .8rem; background: var(--t-primary-tint); color: var(--t-primary); font-size: .65rem; }
.welcome__rest span { flex: 1; }
.welcome__rest strong { color: var(--t-text); font-size: 1rem; font-variant-numeric: tabular-nums; }
.welcome__media { position: relative; height: 12.5rem; background: var(--t-bg); overflow: hidden; }
.welcome__media > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.welcome__media::after { content: ''; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, var(--t-bg)); }
.welcome__media-play { display: grid; place-items: center; position: absolute; z-index: 1; top: 42%; left: 50%; transform: translate(-50%, -50%); width: 3.3rem; height: 3.3rem; border-radius: 50%; background: var(--t-cta-bg); color: var(--t-cta-fg); }
.welcome__media-play svg { margin-left: .15rem; }
.welcome__media-name { position: absolute; z-index: 1; left: 1rem; right: 1rem; bottom: 1rem; font-size: 1rem; font-weight: 800; }
.welcome__media-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .25rem; padding: .6rem .65rem; border-bottom: 1px solid var(--t-border); }
.welcome__media-tabs > span { display: flex; align-items: center; justify-content: center; gap: .25rem; padding: .55rem .15rem; font-size: .65rem; font-weight: 650; color: var(--t-text-muted); border-radius: .65rem; }
.welcome__media-tabs > .is-on { color: var(--t-primary); background: var(--t-primary-tint); }
.welcome__technique-copy { padding: .7rem 1rem .5rem; }
.welcome__technique-copy strong { font-size: .8rem; }
.welcome__technique-copy p { font-size: .75rem; color: var(--t-text-muted); line-height: 1.5; margin: .4rem 0 0; }
.welcome__progress { padding: 1rem 1rem .25rem; }
.welcome__progress-head { display: flex; justify-content: space-between; gap: .5rem; }
.welcome__progress-head h2 { font-size: .9rem; }
.welcome__progress-icon { display: grid; place-items: center; flex: 0 0 2.5rem; height: 2.5rem; border-radius: .85rem; background: var(--t-primary-tint); color: var(--t-primary); }
.welcome__metric { display: grid; grid-template-columns: 1fr auto; gap: .15rem .5rem; margin: 1rem 0 .3rem; }
.welcome__metric > strong { font-size: 2rem; line-height: 1; font-variant-numeric: tabular-nums; }
.welcome__metric > strong small { color: var(--t-text-muted); font-size: .85rem; font-weight: 500; }
.welcome__metric > span:not(.welcome__metric-change) { grid-column: 1; color: var(--t-text-muted); font-size: .7rem; }
.welcome__metric-change { grid-column: 2; grid-row: 1 / 3; display: flex; align-self: center; align-items: center; gap: .25rem; color: var(--t-accent); font-size: .75rem; font-weight: 650; }
.welcome__chart { display: block; width: 100%; height: auto; color: var(--t-primary); }
.welcome__chart-grid { stroke: var(--t-border); fill: none; stroke-dasharray: 3 5; }
.welcome__chart-area { fill: var(--t-primary-tint); }
.welcome__chart-line { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linejoin: round; }
.welcome__chart circle { fill: var(--t-accent); stroke: var(--t-card); stroke-width: 3; }
.welcome__chart-dates { display: flex; justify-content: space-between; gap: .5rem; padding: .2rem 0 .85rem; color: var(--t-text-muted); font-size: .6rem; }
.welcome__history { display: flex; align-items: center; gap: .6rem; padding: .6rem 0; border-top: 1px solid var(--t-border); }
.welcome__history > div { flex: 1; }
.welcome__history strong { display: block; font-size: .75rem; }
.welcome__history small { display: block; margin-top: .2rem; font-size: .65rem; line-height: 1.35; color: var(--t-text-muted); }
.welcome__history > svg { color: var(--t-text-muted); }
.welcome__history-icon { display: grid; place-items: center; flex: 0 0 2.3rem; height: 2.3rem; border-radius: .75rem; color: var(--t-primary); background: var(--t-primary-tint); }
.welcome__actions { margin-top: .3rem; padding: .3rem 1rem max(.65rem, env(safe-area-inset-bottom, 0px)); background: var(--t-bg); }
.welcome__dock.ob-action-dock { padding: .75rem; border-radius: 1.5rem; }
.welcome__dots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: -.75rem -.75rem -.25rem; }
.welcome__dots button { display: flex; align-items: flex-start; width: 100%; height: 1.3rem; border: 0; background: transparent; padding: 0; touch-action: manipulation; }
.welcome__dots span { width: 100%; height: 3px; background: color-mix(in srgb, var(--t-hero-text) 12%, transparent); transition: background-color 150ms ease; }
.welcome__dots button + button span { border-left: 2px solid var(--t-hero-bg); }
.welcome__dots [aria-pressed="true"] span { background: var(--t-cta-bg); }
.welcome__navigation { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .4rem; }
.welcome__navigation .ob-step-counter { margin-right: auto; font-size: .65rem; }
.welcome__navigation button { display: flex; align-items: center; justify-content: center; gap: .35rem; min-width: 2.75rem; min-height: 2.75rem; border: 0; border-radius: .8rem; background: transparent; color: var(--t-hero-text); font: inherit; font-size: .75rem; font-weight: 650; padding: .4rem; touch-action: manipulation; }
.welcome__navigation button:disabled { opacity: .25; }
.welcome__navigation button:active { background: color-mix(in srgb, var(--t-hero-text) 8%, transparent); }
.welcome__actions a { display: flex; align-items: center; justify-content: center; gap: .45rem; min-height: 3rem; padding: .75rem .6rem; text-align: center; text-decoration: none; line-height: 1.3; touch-action: manipulation; }
.welcome__actions .welcome__primary { border-radius: .9rem; background: var(--t-cta-bg); color: var(--t-cta-fg); font-size: .9rem; font-weight: 750; }
.welcome__account-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.welcome__account-actions a { min-height: 2.75rem; padding: .65rem .75rem; border: 1px solid var(--t-border-strong); border-radius: .8rem; color: var(--t-hero-text); font-size: .8rem; font-weight: 650; white-space: nowrap; }
.welcome__account-actions .welcome__register { flex: 2 1 11rem; }
.welcome__account-actions .welcome__login { flex: 1 1 4rem; }
.welcome__actions a:active { opacity: .8; }
@media (max-width: 359px) { .welcome__slide { padding-inline: .75rem; } .welcome__actions { padding-inline: .75rem; } .welcome .vbp-trigger-wrap { grid-template-columns: 4rem minmax(0, 1fr) .85rem; gap: .45rem; } .welcome .excard__thumb { width: 4rem; height: 3.8rem; } .welcome :is(.vbp-setrow__load, .vbp-setrow__metric) { grid-template-columns: minmax(0, 1fr); } .welcome .vbp-setrow__field-label { grid-row: 2; text-align: center; overflow-wrap: normal; } }
@media (prefers-reduced-motion: reduce) { .welcome__dots span { transition: none; } }