/* RepRoom V3 — visual system. Loaded last so storage and application logic stay unchanged. */
:root,:root[data-theme="dark"]{
  --bg:#09090B;--panel:#18181B;--panel2:#232328;--panel3:#292831;--line:#35343D;
  --text:#FAFAFA;--muted:#B6B3C1;--faint:#9793A3;--navbg:#121115;
  --mint:#FACC15;--mint-bg:#352B0A;--warm:#A855F7;--purple:#A855F7;--purple-strong:#9333EA;
  --yellow:#FACC15;--yellow-bright:#FDE047;--yellow-ink:#221B04;
  --gold-soft:#383009;--gold-border:#70611D;--purple-soft:#29203C;--purple-border:#523873;
  --input:#151519;--tint:#201A2B;--active:#332C14;--accent-contrast:#241B07;
  --r-card:18px;--r-control:12px;--r-pill:999px;--motion-fast:140ms;--motion-mid:240ms;
  --ease-out:cubic-bezier(.22,1,.36,1);
}
:root[data-theme="light"]{
  color-scheme:light;--bg:#FAFAFA;--panel:#FFFFFF;--panel2:#F5F3F8;--panel3:#F0ECF5;--line:#E6E1EB;
  --text:#18181B;--muted:#585365;--faint:#777080;--navbg:#FFFFFF;
  --mint:#EAB308;--mint-bg:#FFF5BA;--warm:#7E22CE;--purple:#7E22CE;--purple-strong:#9333EA;
  --yellow:#EAB308;--yellow-bright:#FACC15;--yellow-ink:#241B04;
  --gold-soft:#FFF8D1;--gold-border:#D8B42F;--purple-soft:#F3EAFF;--purple-border:#DAC4F2;
  --input:#FFFFFF;--tint:#FFF9DD;--active:#FFF4C4;--accent-contrast:#241B04;
}
@media(prefers-color-scheme:light){
 :root[data-theme="system"]{color-scheme:light;--bg:#FAFAFA;--panel:#FFFFFF;--panel2:#F5F3F8;--panel3:#F0ECF5;--line:#E6E1EB;--text:#18181B;--muted:#585365;--faint:#777080;--navbg:#FFFFFF;--mint:#EAB308;--mint-bg:#FFF5BA;--warm:#7E22CE;--purple:#7E22CE;--purple-strong:#9333EA;--yellow:#EAB308;--yellow-bright:#FACC15;--yellow-ink:#241B04;--gold-soft:#FFF8D1;--gold-border:#D8B42F;--purple-soft:#F3EAFF;--purple-border:#DAC4F2;--input:#FFFFFF;--tint:#FFF9DD;--active:#FFF4C4;--accent-contrast:#241B04;--r-card:18px;--r-control:12px;--r-pill:999px;--motion-fast:140ms;--motion-mid:240ms;--ease-out:cubic-bezier(.22,1,.36,1)}
}
/* Foundational type, layout and focus rhythm */
html{color:var(--text);background:var(--bg);-webkit-tap-highlight-color:transparent}
body{font-size:14px;line-height:1.5;background:var(--bg)}
h1,h2,h3{font-weight:800;text-wrap:balance}
h1{letter-spacing:-.048em;line-height:1.13}
h2{letter-spacing:-.035em}
h3{line-height:1.32}
p{line-height:1.55}
button{touch-action:manipulation;transition:background-color var(--motion-mid) ease,color var(--motion-mid) ease,border-color var(--motion-mid) ease,transform var(--motion-fast) var(--ease-out),box-shadow var(--motion-mid) ease;}
button:active:not(:disabled){transform:scale(.965)}
:where(button,a,input,select,textarea):focus-visible{outline:2px solid var(--yellow)!important;outline-offset:3px}
:where(input,select,textarea){border-radius:var(--r-control);background:var(--input);color:var(--text);transition:border-color .16s ease,box-shadow .16s ease}
:where(input,select,textarea):focus{border-color:var(--purple)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--purple) 16%,transparent)}
:where(input,select,textarea)::placeholder{color:var(--faint)}
input[type="checkbox"]{accent-color:var(--yellow)}
::selection{background:var(--yellow);color:var(--yellow-ink)}
/* Consistent components */
.panel,.routine-card,.stat,.record-tile{border:1px solid var(--line);border-radius:var(--r-card);background:var(--panel);box-shadow:none}
.panel{padding:21px}.panel.tinted{background:var(--panel);border:1px solid var(--gold-border)}
.button{background:var(--yellow);color:var(--yellow-ink)!important;border-color:var(--yellow);border-radius:var(--r-control);font-weight:800;min-height:43px;box-shadow:none}
.button:hover:not(:disabled){filter:none;background:var(--yellow-bright);border-color:var(--yellow-bright);box-shadow:0 0 0 2px color-mix(in srgb,var(--yellow) 13%,transparent)}
.button.secondary{background:var(--purple-soft);border-color:var(--purple-border);color:var(--purple)!important}
.button.secondary:hover:not(:disabled){background:color-mix(in srgb,var(--purple-soft) 78%,var(--purple) 22%);border-color:var(--purple)}
.button.ghost{color:var(--muted)!important;background:transparent;border-color:var(--line)}
.button.ghost:hover:not(:disabled){background:var(--panel2);color:var(--text)!important}
.button.danger{background:color-mix(in srgb,var(--red) 12%,var(--panel));color:var(--red)!important;border-color:color-mix(in srgb,var(--red) 35%,var(--line))}
.button.small{min-height:37px;border-radius:10px;font-size:12px;padding:8px 12px}
.pill-link,.mini-action,.inline-link{color:var(--purple);font-weight:750}
.mini-action{border-radius:10px;transition:background .17s,color .17s}
.mini-action:hover{background:var(--purple-soft)}
.chip.good{background:var(--gold-soft);color:var(--yellow);border-color:var(--gold-border)}
:root[data-theme="light"] .chip.good{color:#785F00}
@media(prefers-color-scheme:light){:root[data-theme="system"] .chip.good{color:#785F00}}
.eyebrow,.kicker{color:var(--purple);font-weight:800}
.brand-mark{background:var(--yellow);color:var(--yellow-ink);border-radius:12px;box-shadow:0 0 0 3px color-mix(in srgb,var(--yellow) 13%,transparent)}
.brand .end{color:var(--purple)}
.page-head{gap:12px}.page-head p{max-width:650px}
.section-head{gap:12px}.section-head h2{font-weight:800}
.sidebar{background:var(--navbg);border-color:var(--line)}
.nav-btn.active{background:var(--gold-soft);color:var(--text);border-color:var(--gold-border);position:relative}
.nav-btn.active:before{content:'';width:3px;background:var(--yellow);border-radius:10px;position:absolute;left:4px;top:10px;bottom:10px}
.nav-icon{transition:transform var(--motion-mid) var(--ease-out)}
.nav-btn.active .nav-icon,.mobile-nav button.active .nav-icon{transform:translateY(-2px)}
/* Home — one clear call to action; no gradient haze or permanent glow */
.hero.tinted{background:var(--panel);position:relative;overflow:hidden;border-color:var(--line);border-left:4px solid var(--yellow)}
.hero.tinted:after{content:'';position:absolute;right:-38px;top:-65px;width:210px;height:210px;border:38px solid color-mix(in srgb,var(--purple) 13%,transparent);border-radius:50%;pointer-events:none}
.hero .eyebrow{color:var(--purple)}
.hero h2{font-size:clamp(23px,4vw,32px);max-width:530px}
.hero .illustration{isolation:isolate;color:var(--purple);font-size:48px;min-width:70px;display:grid;place-items:center}
.hero-glyph{font-size:64px;line-height:1;color:var(--purple)}
.hero-actions .button:first-child{min-width:145px}
.stat{position:relative;min-width:0;padding:18px}
.stat .value{font-size:clamp(24px,3vw,31px);font-weight:850;letter-spacing:-.055em;color:var(--text)}
.stat .label{font-weight:650;line-height:1.4}
.grid3>.stat:first-child{border-top:3px solid var(--yellow)}
.grid3>.stat:nth-child(2){border-top:3px solid var(--purple)}
.grid3>.stat:nth-child(3){border-top:3px solid var(--line)}
.routine-card{gap:12px;position:relative;overflow:hidden;transition:border-color .18s ease,transform .18s var(--ease-out),background-color .18s}
.routine-card:hover{border-color:var(--purple-border)}
.routine-card h3{font-size:17px;line-height:1.28}
.routine-card>.button{align-self:stretch}
.routine-card .kicker{font-size:10px}
/* active session and progress */
.session-top{background:var(--bg);border-bottom:1px solid var(--line);backdrop-filter:blur(10px);padding:13px 0 11px}
.session-top h1{font-size:clamp(21px,4vw,28px)}
.session-top>.row{align-items:center}
.session-summary{font-weight:550;margin-top:6px}
.workout-meter{height:5px;background:var(--panel3);border-radius:20px;overflow:hidden;margin-top:13px}
.workout-meter>span{display:block;height:100%;border-radius:20px;background:var(--yellow);transition:width 300ms var(--ease-out)}
.exercise-card{border-radius:var(--r-card);border-color:var(--line);margin:14px 0}
.exercise-head{padding:18px 18px 15px;background:var(--panel)}
.exercise-head .title{font-size:17px;font-weight:850;color:var(--text);line-height:1.32;letter-spacing:-.025em}
.exercise-head .mini{margin-top:5px;color:var(--muted);line-height:1.5}
.exercise-controls{gap:5px}.exercise-controls button{border-radius:9px;min-width:36px;min-height:36px}
.sets{padding:14px 16px 9px}.sets .head{font-size:10px;letter-spacing:.075em;color:var(--faint)}
.set{border-radius:11px;padding:4px;transition:background .2s,border-color .2s;gap:7px}
.set.done{background:var(--gold-soft);box-shadow:inset 2px 0 0 var(--yellow)}
.set input{border-radius:9px;font-weight:700;font-variant-numeric:tabular-nums;font-size:16px;height:44px;background:var(--input)}
.set.done input{background:color-mix(in srgb,var(--gold-soft) 80%,var(--input));border-color:var(--gold-border);color:var(--text)}
.set-id{border-radius:9px;color:var(--muted);min-height:43px}
.set-id.warmup{background:var(--purple-soft);color:var(--purple);border-color:var(--purple-border)}
.set .complete{min-width:43px;min-height:43px;height:43px;border-radius:11px;font-size:21px;font-weight:900;color:var(--muted);background:var(--panel2);border:1px solid var(--line)}
.set.done .complete{background:var(--yellow);border-color:var(--yellow);color:var(--yellow-ink)}
.set.just-completed .complete{animation:completed-pop .52s var(--ease-out) both}
.set.just-completed{animation:set-warmth .55s ease both}
@keyframes completed-pop{0%{transform:scale(.8)}42%{transform:scale(1.15)}100%{transform:scale(1)}}
@keyframes set-warmth{0%{background:color-mix(in srgb,var(--yellow) 34%,var(--panel))}100%{background:var(--gold-soft)}}
.set-extras{padding:8px 4px 9px}.set-extras .hint{font-size:11px}
.exercise-foot{background:var(--panel2);padding:12px 16px;border-color:var(--line);flex-wrap:wrap;gap:9px}
.exercise-foot .button{min-height:38px}
.exercise-foot>.button:first-child{background:var(--purple-soft);color:var(--purple)!important;border-color:var(--purple-border)}
/* Favorites: state persists and animation only plays when user adds one. */
.favorite-toggle{position:relative;display:grid;place-items:center;flex:none;min-width:43px;min-height:43px;padding:9px;background:var(--panel2);color:var(--faint);border:1px solid var(--line);border-radius:12px;isolation:isolate;overflow:visible}
.favorite-toggle svg{display:block;overflow:visible;transition:color var(--motion-mid) ease,transform var(--motion-mid) var(--ease-out),filter var(--motion-mid) ease}
.favorite-toggle svg path{fill:transparent;transition:fill .22s ease}
.favorite-toggle:hover{color:var(--yellow);border-color:var(--gold-border)}
.favorite-toggle.is-favorite{color:var(--yellow);border-color:var(--gold-border);background:var(--gold-soft)}
.favorite-toggle.is-favorite svg path{fill:currentColor}
.favorite-toggle.favorite-burst svg{animation:star-satisfy .42s var(--ease-out) both}
.favorite-toggle .favorite-sparkles{position:absolute;inset:-9px;border-radius:50%;opacity:0;pointer-events:none;background:conic-gradient(from 5deg,transparent 0deg 13deg,var(--yellow) 15deg 18deg,transparent 20deg 66deg,var(--yellow-bright) 68deg 72deg,transparent 74deg 125deg,var(--yellow) 128deg 132deg,transparent 134deg 185deg,var(--yellow-bright) 188deg 193deg,transparent 195deg 245deg,var(--yellow) 248deg 252deg,transparent 254deg 308deg,var(--yellow-bright) 310deg 314deg,transparent 316deg);mask:radial-gradient(circle,transparent 0 48%,#000 49% 53%,transparent 62%)}
.favorite-toggle.favorite-burst .favorite-sparkles{animation:favorite-shine .43s ease-out both}
@keyframes star-satisfy{0%{transform:scale(.79)}40%{transform:scale(1.26);filter:drop-shadow(0 0 7px color-mix(in srgb,var(--yellow) 75%,transparent))}100%{transform:scale(1)}}
@keyframes favorite-shine{0%{opacity:0;transform:scale(.55) rotate(-20deg)}42%{opacity:.9}100%{opacity:0;transform:scale(1.5) rotate(18deg)}}
.exercise-detail-top{display:flex;gap:12px;align-items:center;justify-content:space-between;margin-bottom:12px}
.exercise-row{gap:10px;padding:13px 15px;transition:background .15s ease}
.exercise-row:hover{background:color-mix(in srgb,var(--purple) 6%,var(--panel))}
.exercise-row>.row{flex-shrink:0;gap:5px}
.exercise-row strong{font-size:14px;line-height:1.35}
.exercise-row .meta{font-size:11px;line-height:1.5}
#library-items .exercise-row:has(.favorite-toggle.is-favorite) strong:before{content:'★';font-size:11px;color:var(--yellow);margin-right:6px}
.toolstrip .searchbox input{border-radius:12px}
/* History and performance — two semantic accents */
.history-item{gap:10px;padding:16px 0;transition:background-color .16s}
.history-item strong{letter-spacing:-.015em}
.history-item .sub{line-height:1.55}
.calendar-day{border-radius:10px;transition:background .15s,color .15s,transform .13s}
.calendar-day.has-workout{position:relative;border-color:var(--line)}
.calendar-day.has-workout:not(.chosen):after{content:'';position:absolute;bottom:3px;width:4px;height:4px;border-radius:50%;background:var(--yellow)}
.calendar-day.chosen{background:var(--yellow);color:var(--yellow-ink);border-color:var(--yellow);font-weight:850}
.quick-filters .mini-action{border-color:var(--line);color:var(--muted)}
.quick-filters .mini-action:active{background:var(--gold-soft);color:var(--text)}
.chart .trace{stroke:var(--yellow);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.chart circle{fill:var(--purple);stroke:var(--panel);stroke-width:2px}
.chart .grid{stroke:var(--line)}
.record-tile{position:relative;border-color:var(--gold-border);background:var(--panel);padding:17px;overflow:hidden}
.record-tile:before{content:'✦';position:absolute;right:13px;top:8px;color:var(--yellow);font-size:24px;opacity:.9}
.record-tile .kicker{color:var(--purple)}
.record-tile .record-value{font-size:23px;color:var(--yellow)}
:root[data-theme="light"] .record-tile .record-value{color:#916D00}
.week-bar{background:var(--purple);border-radius:6px 6px 3px 3px}
.week-bar-item:last-child .week-bar{background:var(--yellow)}
.week-stats>div{border-radius:13px}.week-stats strong{color:var(--text)}
/* Timer: functional timestamp countdown with clear yellow dial */
.timer.rest-premium{border:1px solid var(--gold-border);background:var(--panel);border-radius:17px;padding:10px 12px;gap:11px;box-shadow:0 7px 26px #00000020}
.rest-time-icon{width:42px;height:42px;display:grid;place-items:center;flex:none;border-radius:50%;font-size:23px;font-weight:800;color:var(--yellow);background:radial-gradient(farthest-side,var(--panel) 75%,transparent 77%),conic-gradient(var(--yellow) var(--remaining),var(--panel3) 0)}
.rest-time-main{display:grid;gap:0;min-width:58px}.rest-time-main>span{font-size:10px;color:var(--muted);font-weight:700}.rest-time-main strong{color:var(--text);font-variant-numeric:tabular-nums;font-size:19px}
.rest-actions{display:flex;gap:6px;flex-wrap:wrap}.rest-actions .button{white-space:nowrap;min-width:45px;font-size:11px}
/* Positive moments and empty states */
.summary-hero{border:1px solid var(--gold-border);border-left:4px solid var(--yellow);background:var(--gold-soft);padding:22px 22px 22px 58px;position:relative;border-radius:var(--r-card)}
.summary-hero:before{content:'★';position:absolute;left:18px;top:20px;color:var(--yellow);font-size:25px}
.summary-hero strong{font-size:23px;font-weight:850}
.summary-stats .stat:first-child{border-top:3px solid var(--yellow)}
.empty{background:var(--panel);border:1px dashed var(--line);border-radius:var(--r-card);color:var(--muted);padding:31px 18px;line-height:1.6}
.empty strong{color:var(--text);font-size:15px}
.empty .button{margin-top:12px}
.toast{border:1px solid var(--purple-border);background:var(--panel3);color:var(--text);box-shadow:0 10px 25px #0003;font-weight:700;animation:toast-enter .2s var(--ease-out) both}
.toast[data-tone="achievement"],.toast[data-tone="success"]{border-color:var(--gold-border);background:var(--gold-soft);color:var(--text)}
.toast[data-tone="error"]{border-color:var(--red)}
@keyframes toast-enter{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.modal{border-radius:var(--r-card);border-color:var(--line);background:var(--panel)}
.modal-head{padding-bottom:9px}.modal h3{font-weight:800}
.profile-avatar{background:var(--purple-soft);border-color:var(--purple-border);color:var(--purple)}
/* Main navigation, comfortable reach and visual hierarchy */
.mobile-nav{background:var(--navbg);border-top:1px solid var(--line);box-shadow:0 -2px 14px #00000011}
.mobile-nav button{border-radius:11px;position:relative;color:var(--muted);transition:color .2s,background .2s,transform .14s}
.mobile-nav button.active{background:var(--gold-soft);color:var(--text)!important;font-weight:800}
.mobile-nav button.active:before{content:'';position:absolute;top:0;left:25%;right:25%;height:3px;border-radius:0 0 5px 5px;background:var(--yellow)}
.mobile-nav button.active .nav-icon{color:var(--yellow)}
/* Do not let visual effects sacrifice small-screen usability */
@media(max-width:920px){
 .content{padding-top:19px}
 .mobile-nav{padding-bottom:max(6px,env(safe-area-inset-bottom,0px));height:calc(74px + env(safe-area-inset-bottom,0px))}
 .content{padding-bottom:calc(119px + env(safe-area-inset-bottom,0px))}
 .timer.rest-premium{bottom:calc(81px + env(safe-area-inset-bottom,0px))}
}
@media(max-width:580px){
 .panel{padding:16px}.hero{padding:21px 17px}.hero .illustration{display:none}
 .hero-actions{gap:8px}.hero-actions .button{flex:1 1 140px}
 .exercise-card{padding:0}.exercise-head{padding:15px 14px}.sets{padding:12px 10px 8px}
 .set{grid-template-columns:30px minmax(0,1fr) minmax(0,1fr) 44px;gap:5px;padding:4px 3px}
 .set input{width:100%;min-width:0;font-size:16px;padding:7px 4px}
 .set-id{padding-inline:1px}.exercise-foot{padding:10px;justify-content:flex-start}
 .exercise-foot .button{flex:0 1 auto}.exercise-foot .favorite-toggle{margin-left:auto}
 .routine-card{padding:15px}.routine-card .row.wrap{gap:5px}
 .timer.rest-premium{left:8px;right:8px;justify-content:space-between;gap:7px;padding:8px}
 .rest-time-icon{width:34px;height:34px;font-size:18px}.rest-time-main strong{font-size:16px;min-width:47px}
 .rest-actions{flex-wrap:nowrap;gap:4px}.rest-actions .button{padding:7px 5px;font-size:10px;min-width:37px}
 .summary-hero{padding:17px 16px 17px 48px}.summary-hero:before{left:14px;top:15px}
 .records-grid{gap:9px}.grid3>.stat{min-width:0}
 .toast{top:max(10px,env(safe-area-inset-top,0px));right:10px;left:10px;max-width:none}
}
@media(max-width:335px){
 .mobile-nav button{font-size:8px}.mobile-nav .nav-icon{font-size:17px!important}
 .set{grid-template-columns:26px minmax(0,1fr) minmax(0,1fr) 39px;gap:3px}
 .set .complete{min-width:39px;width:39px}.rest-time-icon{display:none}
 .exercise-foot .button{font-size:11px;padding-inline:8px}
 .panel{padding:14px}.exercise-card{padding:0}
}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition-duration:0ms!important;scroll-behavior:auto!important}
 .favorite-toggle.favorite-burst .favorite-sparkles{display:none}
}
/* Last-mile legibility adjustments found in 390px visual review. */
.hero.tinted>div{position:relative;z-index:1}
.hero.tinted:after{right:-110px;top:-90px;width:195px;height:195px;border-width:28px;opacity:.6;z-index:0}
.button[aria-pressed="true"]:not(.favorite-toggle){border-color:var(--gold-border);background:var(--gold-soft);color:var(--text)!important}
@media(max-width:580px){
 .exercise-head{grid-template-columns:minmax(0,1fr);gap:10px}
 .exercise-controls{display:flex;flex-wrap:nowrap;gap:6px;justify-content:flex-end;width:100%}
 .exercise-controls button{flex:none;min-height:34px;min-width:36px}
}

/* Active logging controls remain visible when the exercise name is long. */
@media(max-width:580px){.exercise-controls{justify-content:flex-end!important;margin-left:auto;max-width:none!important}}
/* Feedback should not cover the timer, Add Set or the Android bottom navigation. */
.undo-toast{top:calc(12px + env(safe-area-inset-top,0px));bottom:auto;left:50%;border-color:var(--gold-border);background:var(--panel);box-shadow:0 8px 24px #0003}

/* One short acknowledgement on real milestones; no perpetual effects. */
.summary-hero:after{content:'✦';position:absolute;right:24px;top:12px;font-size:23px;color:var(--yellow);opacity:0;pointer-events:none;animation:achievement-glint .72s ease-out .15s 1 both}
.toast[data-tone="achievement"]:before{content:'★';color:var(--yellow);margin-right:8px}
@keyframes achievement-glint{0%{opacity:0;transform:scale(.4) rotate(-18deg)}42%{opacity:1;transform:scale(1.2) rotate(12deg)}100%{opacity:.55;transform:scale(1)}}

/* V3 media demo browser: self-contained diagrams. */
.exercise-motion-player{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--panel2);margin:14px 0 18px;min-width:0}
.motion-window{aspect-ratio:380/264;background:#0b0d16;max-height:56svh;overflow:hidden}
.motion-object{width:100%;height:100%;display:block;border:0}
.motion-actions{display:flex;gap:8px;flex-wrap:wrap;padding:11px 12px 4px}
.motion-actions .button{flex:1;min-width:75px;min-height:44px}
.motion-disclosure{font-size:12px;line-height:1.55;color:var(--muted);padding:8px 12px 14px;margin:0}
@media(max-width:320px){.motion-actions{gap:4px;padding:8px 8px 2px}.motion-actions .button{font-size:12px;min-width:68px;padding:7px}}
@media(prefers-reduced-motion:reduce){.exercise-motion-player *{transition:none!important}}

.exercise-media-missing{padding:20px;border:1px dashed var(--line);border-radius:15px;background:var(--panel2);margin:14px 0 20px;line-height:1.6}
.exercise-media-missing strong{font-size:15px;color:var(--text)}
.exercise-media-missing p{font-size:13px;color:var(--muted);margin:8px 0 0}

/* V3.2: exercise-specific labeled pose sequences (no impact on workout data). */
.motion-phases { margin: 8px 0; border: 1px solid var(--stroke, #4e3f57); border-radius: 12px; padding: 11px 13px; }
.motion-phases summary { cursor:pointer; font-size:.92rem; font-weight:700; color:var(--text-primary,inherit); }
.motion-phases ol { margin:12px 0 0; padding-left:24px; line-height:1.6; }
.motion-phases li { padding:3px 0; }
@media (prefers-reduced-motion:reduce) { .motion-phases {scroll-behavior:auto} }