/* Performance: a focused training workspace with a persistent desktop rail. */
body.ui-performance {
  --paper: #131713;
  --ink: #f2f5ed;
  --muted: #a0aa9b;
  --line: #364033;
  --green: #d6ff5b;
  --lime: #d6ff5b;
  --white: #1c221b;
  --orange: #d6ff5b;
  --soft: #252e22;
  --radius: 15px;
  --ui-bg: #131713;
  --ui-surface: #1c221b;
  --ui-accent: #d6ff5b;
  --ui-ink: #f2f5ed;
  --ui-text: #f2f5ed;
  --ui-muted: #a0aa9b;
  --ui-border: #364033;
  --pf-dark: #131713;
  --pf-panel: #1c221b;
  --pf-elevated: #252e22;
  --pf-lime: #d6ff5b;
  background: var(--paper);
  color: var(--ink);
  color-scheme: dark;
  font-family: "Manrope", "Arial", sans-serif;
  line-height: 1.55;
  min-height: 100dvh;
}

/* Desktop navigation is deliberately vertical, unlike the Pop composition. */
.ui-performance > header {height: 84px; background: var(--paper); color: var(--ink); border-bottom: 1px solid var(--line); padding: 0 35px; gap: 23px;}
.ui-performance .brand {font-size: 23px; font-weight: 850; letter-spacing: -1px; color: var(--ink); gap: 5px;}
.ui-performance .brand em {font-size: 15px; font-weight: 500; color: var(--muted); letter-spacing: -.4px; margin-left: 4px;}
.ui-performance .brand-icon {width: 36px; height: 36px; background: var(--pf-lime); color: var(--pf-dark); border-radius: 10px; font-size: 22px; margin-right: 7px;}
.ui-performance .header-account {border: 1px solid var(--line); background: var(--white); color: var(--ink); font-size: 12px; font-weight: 700; border-radius: 8px; padding: 8px 14px; min-height: 44px; line-height: 26px;}
.ui-performance .print-link {font-size: 11px; font-weight: 600; color: var(--muted); display: flex; align-items: center; min-height: 44px;}
.ui-performance .ui-header-link {background: var(--soft); color: var(--ink); border-color: var(--line); min-height: 44px; display: flex; align-items: center; padding: 9px 13px;}
.ui-performance .shell {display: grid; grid-template-columns: 225px minmax(0, 1fr); max-width: 1660px; margin: auto;}
.ui-performance .shell > aside {position: sticky; top: 0; align-self: start; height: calc(100dvh - 84px); padding: 32px 18px; background: var(--paper); border-right: 1px solid var(--line); overflow-y: auto;}
.ui-performance .shell > aside nav {display: grid; grid-template-columns: 1fr; gap: 8px; margin: 0; padding: 0; overflow: visible;}
.ui-performance .shell > aside nav a {display: flex; align-items: center; gap: 14px; justify-content: flex-start; color: var(--muted); min-height: 51px; padding: 13px 15px; border: 1px solid transparent; border-radius: 9px; transition: background .18s ease, border-color .18s ease;}
.ui-performance .shell > aside nav a > span {font-size: 12px; font-weight: 700; color: var(--muted);}
.ui-performance .shell > aside nav a .nav-icon {font-size: 21px !important; min-width: 22px; color: #a6b797;}
.ui-performance .shell > aside nav a:hover {background: var(--soft); color: var(--ink); border-color: var(--line);}
.ui-performance .shell > aside nav a.active {background: var(--pf-lime); color: var(--pf-dark); border-color: var(--pf-lime);}
.ui-performance .shell > aside nav a.active > span {color: var(--pf-dark); font-weight: 850;}
.ui-performance #main {padding: 38px 39px 80px; min-width: 0; max-width: 1370px; width: 100%;}
.ui-performance .page-head {margin: 0 0 30px; align-items: center;}
.ui-performance :is(.page-head h1, .ui-plan-heading h1) {font-family: "Space Grotesk", "Manrope", "Arial", sans-serif; font-size: clamp(42px, 4.9vw, 69px); font-weight: 850; line-height: 1.03; letter-spacing: -3.2px; margin: 13px 0 11px; color: var(--ink);}
.ui-performance .eyebrow {color: var(--pf-lime); font-size: 9px; font-weight: 850; letter-spacing: 1.6px;}
.ui-performance h2 {font-family: "Space Grotesk", "Manrope", "Arial", sans-serif; font-size: 24px; font-weight: 800; letter-spacing: -.8px; line-height: 1.25; color: inherit;}
.ui-performance h3 {font-size: 17px; font-weight: 750; letter-spacing: -.4px; color: inherit;}
.ui-performance .lead {font-size: 13px; line-height: 1.7; color: var(--muted);}
.ui-performance .tiny {font-size: 11px; color: var(--muted);}
.ui-performance .btn {min-height: 45px; padding: 11px 17px; border: 1px solid #4b5845; border-radius: 8px; background: var(--white); color: var(--ink); font-size: 12px; font-weight: 750; box-shadow: none; transition: background .18s ease, border-color .18s ease, transform .18s ease;}
.ui-performance .btn:hover {filter: none; background: #2e3927; border-color: #78876b; transform: translateY(-1px);}
.ui-performance .btn.primary {background: var(--pf-lime); border-color: var(--pf-lime); color: var(--pf-dark); font-weight: 850;}
.ui-performance .btn.primary:hover {background: #e2ff92; border-color: #e2ff92;}
.ui-performance .btn.soft {background: var(--soft); border-color: var(--line);}
.ui-performance .btn.quiet {background: transparent; color: var(--muted);}
.ui-performance .btn.danger {background: #993d33; border-color: #cc7362; color: white;}
.ui-performance .danger-outline {border-color: #985148; color: #f49b8a;}
.ui-performance .pill {color: var(--pf-lime); background: var(--soft); border: 1px solid #405236; border-radius: 5px; font-size: 9px; font-weight: 800; padding: 5px 9px;}
.ui-performance .pill.warm {background: #3a2a20; color: #f0ba8c; border-color: #694c36;}
.ui-performance :is(.panel, .routine-card, .source-item, .detail-facts > div, .journal-card) {background: var(--white); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius);}
.ui-performance .panel {padding: 25px;}
.ui-performance .panel.tint {background: var(--soft);}
.ui-performance .panel p, .ui-performance .panel li {font-size: 13px; line-height: 1.75;}
.ui-performance .section {margin-top: 32px;}
.ui-performance .section-head {margin-bottom: 20px;}
.ui-performance .note {background: #24321f; color: #ccd8c3; border: 1px solid #415435; border-left: 3px solid var(--pf-lime); border-radius: 8px; font-size: 12px;}
.ui-performance .note.attention {background: #3b2b21; border-color: #755236; color: #f4c7a4;}
.ui-performance details {border-color: var(--line);}
.ui-performance summary {min-height: 44px; font-size: 13px; font-weight: 750; color: var(--ink); line-height: 1.5;}
.ui-performance details p {font-size: 13px; line-height: 1.75;}
.ui-performance .rule {border-color: var(--line);}
.ui-performance .rule p {color: var(--muted); font-size: 12px; line-height: 1.75;}
.ui-performance .phase-line {border-color: var(--line);}
.ui-performance .phase-label {color: var(--pf-lime); font-weight: 800;}
.ui-performance .source-num {font-family: inherit; font-size: 26px; font-weight: 850; color: var(--pf-lime);}
.ui-performance .source-item .source-take {background: var(--soft); color: #d6e3ca; border-radius: 8px; border-left: 2px solid var(--pf-lime);}
.ui-performance .status-end {border-color: var(--line);}

/* The live day's launch card precedes programme reference information. */
.ui-performance.ui-route-plan #main {display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: start;}
.ui-performance.ui-route-plan #main > * {min-width: 0; margin-top: 0; margin-bottom: 0;}
.ui-performance.ui-route-plan #main > :is(.ui-plan-heading, .page-head) {order: 0;}
.ui-performance.ui-route-plan #main > .program-picker {order: 1;}
.ui-performance.ui-route-plan #main > .ui-session-summary {order: 2;}
.ui-performance.ui-route-plan #main > .plan-calendar {order: 3;}
.ui-performance.ui-route-plan #main > .plan-phase-strip {order: 4;}
.ui-performance.ui-route-plan #main > :is(.steel-session, .split) {order: 5;}
.ui-performance.ui-route-plan #main > .program-hero {order: 6;}
.ui-performance.ui-route-plan #main > .program-features {order: 7;}
.ui-performance.ui-route-plan #main > :is(.section:not(.plan-calendar), .routine-series, details) {order: 8;}
.ui-performance .ui-plan-heading {display: flex; align-items: end; justify-content: space-between; gap: 24px;}
.ui-performance .ui-plan-heading .lead {max-width: 380px; margin-bottom: 4px; font-size: 12px;}
.ui-performance .program-picker {display: grid; grid-template-columns: 86px minmax(0, 1fr); align-items: center; gap: 12px; padding: 13px; border: 1px solid var(--line); border-radius: 11px; background: var(--white);}
.ui-performance .program-options {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px;}
.ui-performance .program-option {display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 5px; min-height: 65px; min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--paper); color: var(--ink);}
.ui-performance .program-option b {font-size: 10px; font-weight: 850; line-height: 1.35;}
.ui-performance .program-option span {font-size: 8px; line-height: 1.45; margin: 0; color: var(--muted);}
.ui-performance .program-option.active {background: #27341d; color: var(--pf-lime); border-color: var(--pf-lime); box-shadow: inset 0 0 0 1px var(--pf-lime);}
.ui-performance .program-option.active span {color: #b9c8a8;}
.ui-performance .ui-session-summary {display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 0; min-height: 360px; border: 1px solid #52613f; border-radius: 17px; background: var(--white); color: var(--ink); overflow: hidden; position: relative;}
.ui-performance .ui-session-copy {display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 30px; align-self: stretch; min-width: 0;}
.ui-performance .ui-session-index {display: block; position: static; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: 1.6px; margin-bottom: 24px;}
.ui-performance .ui-session-copy .eyebrow {color: var(--pf-lime); font-size: 9px; letter-spacing: 1px; margin: 0 0 14px;}
.ui-performance .ui-session-copy h2 {font-family: "Space Grotesk", "Manrope", sans-serif; color: var(--ink); font-size: clamp(34px, 3.8vw, 52px); font-weight: 850; line-height: 1.05; letter-spacing: -2.3px; margin: 0 0 18px;}
.ui-performance .ui-session-meta {font-size: 12px; font-weight: 500; line-height: 1.75; color: var(--muted); margin: 0;}
.ui-performance .ui-session-copy .button-row {margin-top: 23px; gap: 10px;}
.ui-performance .ui-session-copy .btn {font-size: 11px; min-height: 47px; padding: 12px 16px;}
.ui-performance .ui-session-copy .btn.primary {background: var(--pf-lime); color: var(--pf-dark); border-color: var(--pf-lime);}
.ui-performance .ui-session-art {padding: 16px; border-left: 1px solid var(--line); background: #252d22; color: var(--ink); align-self: stretch; display: flex; flex-direction: column; justify-content: center; min-width: 0;}
.ui-performance .ui-session-motion {border: 1px solid #47523e; border-radius: 12px; overflow: hidden; width: 100%; background: #e9eddf;}
.ui-performance .ui-session-motion > img {height: 265px; width: 100%; object-fit: contain; display: block;}
.ui-performance .ui-session-motion .rig-stage {position: relative; top: 0; height: 265px; background: #e9eddf; border: 0; border-radius: 0;}
.ui-performance .ui-session-motion .rig-controls {background: #2b3624; border-top: 1px solid #47523e; padding: 9px;}
.ui-performance .ui-session-motion .rig-controls .btn {min-height: 44px; padding: 9px 13px; font-size: 10px;}
.ui-performance .ui-session-motion .rig-current {background: #182111dd; color: #f2f5ed;}
.ui-performance .ui-session-technique {color: var(--muted); font-size: 10px; font-weight: 700; padding: 10px 0 0; min-height: 44px; background: none; border: 0;}
.ui-performance .ui-session-technique:hover {color: var(--pf-lime);}
.ui-performance .ui-session-rest {background: var(--soft); color: var(--pf-lime); min-height: 315px; border: 1px solid var(--line); border-radius: 13px;}
.ui-performance .ui-session-rest > span {font-size: 98px; color: var(--pf-lime);}
.ui-performance .ui-session-rest > small {font-size: 10px; color: var(--muted); font-weight: 700;}
.ui-performance .plan-calendar {background: var(--paper); border: 0; padding: 0;}
.ui-performance .plan-calendar > h2 {font-size: 20px; margin: 0 0 15px;}
.ui-performance .plan-calendar .calendar {display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 7px; overflow: visible; margin: 0; padding: 0;}
.ui-performance .plan-calendar .day {display: flex; flex-direction: column; gap: 9px; align-items: flex-start; min-height: 97px; min-width: 0; padding: 11px 9px; background: var(--white); color: var(--ink); border: 1px solid var(--line); border-radius: 8px;}
.ui-performance .plan-calendar .day > span {font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin: 0;}
.ui-performance .plan-calendar .day b {font-size: 9px; font-weight: 750; line-height: 1.4; overflow-wrap: anywhere;}
.ui-performance .plan-calendar .day small {font-size: 8px; line-height: 1.4; color: var(--muted); margin-top: auto; white-space: normal;}
.ui-performance .plan-calendar .day.strength:not(.active) {background: #24301e; border-color: #425337;}
.ui-performance .plan-calendar .day.active {background: var(--pf-lime); color: var(--pf-dark); border-color: var(--pf-lime);}
.ui-performance .plan-calendar .day.active > span, .ui-performance .plan-calendar .day.active small {color: #405022;}
.ui-performance .plan-phase-strip {display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: var(--soft); color: var(--muted); border: 1px solid var(--line); border-radius: 8px; padding: 12px 16px; font-size: 10px;}
.ui-performance .plan-phase-strip b {color: var(--ink); font-weight: 800;}
.ui-performance .steel-session {margin: 0; border: 1px solid var(--line); background: var(--white); border-radius: 15px;}
.ui-performance .steel-session > .section-head h2 {font-size: 27px; margin: 6px 0 9px; letter-spacing: -1px;}
.ui-performance .steel-session > .section-head p {font-size: 12px; color: var(--muted);}
.ui-performance .steel-warmup, .ui-performance .workout-warmup {background: var(--soft); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 9px 15px;}
.ui-performance .steel-warmup ul {color: var(--muted);}
.ui-performance .steel-exercises {display: grid; grid-template-columns: 1fr; gap: 9px; margin: 20px 0;}
.ui-performance .steel-exercise {display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, .42fr); align-items: center; gap: 16px; padding: 12px 17px 12px 12px; background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: 10px;}
.ui-performance .steel-exercise-open {min-height: 74px; gap: 17px; color: var(--ink);}
.ui-performance .steel-preview {width: 77px; height: 77px; border-radius: 8px; background: #e9eddf; border: 1px solid #637056;}
.ui-performance .steel-exercise-copy small {font-size: 9px; font-weight: 750; letter-spacing: 1px; color: var(--muted);}
.ui-performance .steel-exercise-copy b {font-size: 16px; font-weight: 800; line-height: 1.35; letter-spacing: -.3px; margin: 5px 0;}
.ui-performance .steel-exercise-copy > span {color: var(--pf-lime); font-size: 10px; font-weight: 700;}
.ui-performance .steel-prescription {text-align: right; margin: 0;}
.ui-performance .steel-prescription > b {font-size: 18px; font-weight: 850; color: var(--pf-lime);}
.ui-performance .steel-prescription span, .ui-performance .steel-prescription small {color: var(--muted); font-size: 10px; line-height: 1.6; margin-top: 4px;}
.ui-performance .exercise-row {border-color: var(--line); padding: 13px 0;}
.ui-performance .exercise-row .num {color: var(--pf-lime); font-weight: 850; font-size: 10px;}
.ui-performance .exercise-link {color: var(--ink); font-size: 13px; font-weight: 750; min-height: 44px; text-decoration-color: #7b8f6c;}
.ui-performance .exercise-row .dose {font-size: 11px; color: var(--muted);}
.ui-performance .routine-card {padding: 22px; background: var(--white); border-color: var(--line); border-radius: 13px;}
.ui-performance .routine-card .tag {color: var(--pf-lime); font-size: 10px; font-weight: 800;}
.ui-performance .routine-card p {color: var(--muted); font-size: 12px;}

/* Programme emblems survive; large photographic covers become compact context. */
.ui-performance .program-hero {min-height: 0; height: auto; background: var(--white); color: var(--ink); border: 1px solid var(--line); border-left: 3px solid var(--pf-lime); border-radius: 13px; margin: 0; overflow: hidden;}
.ui-performance .program-cover {display: none;}
.ui-performance .program-hero::before {background: none;}
.ui-performance .program-hero-copy {display: grid; grid-template-columns: .95fr 1.3fr 1.1fr; gap: 12px 24px; max-width: none; padding: 25px 27px; position: relative;}
.ui-performance .program-hero .eyebrow {grid-column: 1; grid-row: 1; color: var(--pf-lime); font-size: 8px; letter-spacing: 1px;}
.ui-performance .program-hero h1 {grid-column: 1; grid-row: 2 / 4; color: var(--ink); font-family: "Space Grotesk", "Manrope", sans-serif; font-size: 32px; line-height: 1.02; font-weight: 850; letter-spacing: -1.3px; text-shadow: none; margin: 0;}
.ui-performance .program-hero h1 em {color: var(--pf-lime); font-style: normal;}
.ui-performance .program-seal {position: absolute; top: 24px; right: 24px; font-size: 22px; color: var(--pf-lime); margin: 0;}
.ui-performance .program-mantra {grid-column: 2; grid-row: 1; font-family: inherit; font-size: 11px; font-weight: 800; letter-spacing: 0; line-height: 1.5; color: var(--ink); margin: 0;}
.ui-performance .program-hero .program-goal {grid-column: 2; grid-row: 2 / 4; max-width: none; color: var(--muted); font-size: 10px; line-height: 1.8; margin: 0;}
.ui-performance .program-metrics {grid-column: 3; grid-row: 1 / 3; display: flex; flex-wrap: wrap; gap: 9px 17px; font-size: 8px; line-height: 1.5; color: var(--muted); padding-right: 24px; margin: 0;}
.ui-performance .program-metrics b {display: block; color: var(--pf-lime); font-size: 24px; font-weight: 850; line-height: 1.25;}
.ui-performance .program-cycle {grid-column: 3; grid-row: 3; display: flex; align-items: center; flex-wrap: wrap; gap: 12px; color: var(--muted); font-size: 9px;}
.ui-performance .program-cycle .week-select {margin: 0;}
.ui-performance .program-cycle label {color: var(--muted); font-size: 9px; font-weight: 750; margin-bottom: 5px;}
.ui-performance .program-cycle select {background: var(--paper); color: var(--ink); border: 1px solid #536248; border-radius: 7px; font-size: 13px; min-height: 44px; padding: 8px 10px;}
.ui-performance .home-hero-art {display: none;}
.ui-performance .program-features {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 0; border: 0; color: var(--muted); font-size: 9px; margin: 0;}
.ui-performance .program-features > span {display: flex; gap: 10px; align-items: center; padding: 12px 13px; border: 1px solid var(--line); background: var(--white); border-radius: 8px; line-height: 1.5;}
.ui-performance .program-features i {font-size: 8px; font-weight: 850; color: var(--pf-lime); margin: 0;}

/* Library cards prioritise movement silhouettes and consistent controls. */
.ui-performance .ui-atlas-search {background: var(--white); border-color: var(--line); border-radius: 10px; margin-bottom: 17px;}
.ui-performance .ui-atlas-search input {background: transparent; color: var(--ink); border: 0; min-height: 44px;}
.ui-performance .ui-atlas-search > span {color: var(--pf-lime);}
.ui-performance .filterbar {gap: 7px; margin-bottom: 26px;}
.ui-performance .filterbar .btn {font-size: 10px; padding: 11px 15px; background: var(--white); border-color: var(--line); box-shadow: none;}
.ui-performance .filterbar .btn.active {background: var(--pf-lime); border-color: var(--pf-lime); color: var(--pf-dark);}
.ui-performance .atlas-grid {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px;}
.ui-performance .atlas-card {border: 1px solid var(--line); border-radius: 14px; background: var(--white); overflow: hidden; box-shadow: none;}
.ui-performance .atlas-art {aspect-ratio: 1.13; width: 100%; background: #e9eddf; border-bottom: 1px solid var(--line); padding: 8px 4px;}
.ui-performance .atlas-copy {padding: 17px; background: var(--white); color: var(--ink);}
.ui-performance .atlas-copy .tiny {font-size: 8px; font-weight: 800; letter-spacing: .6px; color: var(--pf-lime); margin-bottom: 9px;}
.ui-performance .atlas-copy h3 {font-size: 18px; font-weight: 800; line-height: 1.2; letter-spacing: -.5px; margin: 0 0 18px; min-height: 44px;}
.ui-performance .atlas-copy .btn {width: 100%; min-height: 44px; font-size: 10px; font-weight: 750; padding: 10px; background: var(--soft); border-color: #47573c;}
.ui-performance .atlas-copy .btn:hover {border-color: var(--pf-lime); color: var(--pf-lime);}

/* A weekly menu is presented as a clear comparison, without cover imagery. */
.ui-performance .food-menu > .section-head {margin-bottom: 12px;}
.ui-performance .food-menu > .tiny {font-size: 10px; line-height: 1.65;}
.ui-performance .food-menu > details {padding: 4px 0 13px; margin-bottom: 18px;}
.ui-performance .menu-grid {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px;}
.ui-performance .food-day {background: var(--white); color: var(--ink); border: 1px solid var(--line); border-radius: 13px; padding: 18px;}
.ui-performance .food-day h3 {font-size: 21px; font-weight: 850; letter-spacing: -.6px; margin-bottom: 17px; align-items: flex-start; gap: 8px;}
.ui-performance .food-day h3 > .tiny {font-size: 8px; line-height: 1.6; text-align: right; color: var(--pf-lime); font-weight: 700; letter-spacing: 0;}
.ui-performance .menu-meal {grid-template-columns: 1fr; gap: 0; padding: 7px 0; margin: 0; border-top: 1px solid var(--line);}
.ui-performance .menu-meal > span {color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: .3px;}
.ui-performance .menu-meal .exercise-link {font-size: 11px; font-weight: 650; line-height: 1.55; padding: 7px 0; min-height: 44px;}
.ui-performance .count-picker {font-size: 12px; font-weight: 650; gap: 14px;}
.ui-performance .count-picker input {width: 78px; background: var(--white); color: var(--ink); border: 1px solid var(--line);}
.ui-performance .shop-grid {grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;}
.ui-performance .shop-group {background: var(--white); color: var(--ink); border: 1px solid var(--line); border-radius: 13px; padding: 20px;}
.ui-performance .shop-group h3 {font-size: 17px; color: var(--pf-lime); margin-bottom: 13px;}
.ui-performance .shop-row {border-bottom: 1px solid var(--line); min-height: 44px; font-size: 11px; padding: 10px 0;}
.ui-performance .shop-row input {width: 18px; height: 18px; accent-color: var(--pf-lime);}
.ui-performance .shop-row small {font-size: 9px; color: var(--muted); margin-top: 4px;}
.ui-performance .shop-row:has(input:checked) {color: #76846e;}
.ui-performance .food-reference {padding: 15px 23px; border: 1px solid var(--line); background: var(--white); border-radius: 13px;}
.ui-performance .frequency {background: var(--white); border-color: var(--line); color: var(--ink);}
.ui-performance .frequency.limit {background: #2b2920;}
.ui-performance .frequency .target {color: var(--pf-lime);}

/* Auth, PWA settings and the durable journal retain all original actions. */
.ui-performance :is(input:not([type=checkbox]):not([type=radio]), select, textarea) {background: var(--paper); color: var(--ink); border: 1px solid #4a5643; border-radius: 8px; min-height: 46px;}
.ui-performance input::placeholder, .ui-performance textarea::placeholder {color: #819078; opacity: 1;}
.ui-performance input[type=checkbox], .ui-performance input[type=radio] {accent-color: var(--pf-lime);}
.ui-performance .account-grid {grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 22px;}
.ui-performance .account-stack {gap: 18px;}
.ui-performance .account-form label {font-size: 11px; font-weight: 700; color: var(--ink);}
.ui-performance .account-form :is(input:not([type=checkbox]), select, textarea) {background: var(--paper); color: var(--ink); border: 1px solid #4a5643; min-height: 48px;}
.ui-performance .account-form input:disabled {background: #2b3227; color: var(--muted);}
.ui-performance .account-form small {font-size: 10px; font-weight: 500; color: var(--muted);}
.ui-performance .auth-benefits {display: block; background: var(--soft);}
.ui-performance .auth-benefits h2 {font-family: "Space Grotesk", "Manrope", sans-serif; font-size: 31px; font-weight: 850; line-height: 1.15; letter-spacing: -1.1px;}
.ui-performance .auth-benefits p {font-size: 12px; color: var(--muted);}
.ui-performance .account-tabs .btn.primary {background: var(--pf-lime); color: var(--pf-dark);}
.ui-performance .avatar {background: var(--pf-lime); color: var(--pf-dark); font-family: inherit; font-weight: 850; border-radius: 10px;}
.ui-performance .password-toggle {color: var(--pf-lime); font-weight: 700;}
.ui-performance .weekday-picker span {background: var(--paper); color: var(--muted); border-color: var(--line); border-radius: 6px;}
.ui-performance .weekday-picker input:checked+span {background: var(--pf-lime); color: var(--pf-dark); border-color: var(--pf-lime);}
.ui-performance .recovery-panel {background: #2a321d; border-color: #7b9742; color: var(--ink);}
.ui-performance .recovery-panel code {background: var(--paper); color: var(--pf-lime); border-color: #728749;}
.ui-performance .form-message.error {background: #412921; color: #ffb9a5;}
.ui-performance .form-message.success {background: #263a22; color: #d5f3b3;}
.ui-performance .import-file input::file-selector-button {background: var(--soft); color: var(--ink); border-color: var(--line);}
.ui-performance .journal-day-launcher {background: var(--soft); color: var(--ink); border-color: var(--line); border-radius: 13px;}
.ui-performance .journal-week-strip a {background: var(--paper); color: var(--ink); border-color: #4a5840; border-radius: 8px;}
.ui-performance .journal-week-strip a.active {background: var(--pf-lime); color: var(--pf-dark); border-color: var(--pf-lime);}
.ui-performance .journal-week-strip a.active > span:not(.journal-day-dot), .ui-performance .journal-week-strip a.active small {color: #435323;}
.ui-performance .journal-week-strip .active .journal-day-dot {background: var(--pf-dark);}
.ui-performance .journal-card {background: var(--white); border-color: var(--line);}
.ui-performance .journal-metrics span {background: var(--soft); color: var(--pf-lime); border-radius: 5px;}
.ui-performance .journal-feeling {background: var(--paper); color: var(--ink); border-left: 2px solid var(--pf-lime);}
.ui-performance .journal-empty {background: var(--white); border-color: #647453; color: var(--muted);}

/* Workout recording is an ordered list with a high-contrast completion control. */
.ui-performance .workout-overview {background: var(--soft); color: var(--ink); border: 1px solid #4d623c; border-radius: 15px;}
.ui-performance .workout-overview-copy h2 {color: var(--ink); font-size: 29px; font-weight: 850; letter-spacing: -1px;}
.ui-performance .workout-overview-copy p {color: var(--muted);}
.ui-performance .workout-overview-copy .pill {background: #36452b; color: var(--pf-lime); border-color: #5f7548;}
.ui-performance .workout-count strong {color: var(--pf-lime); font-weight: 850;}
.ui-performance .workout-count > span, .ui-performance .workout-count strong > span {color: var(--muted);}
.ui-performance .workout-progress {background: #3c4932;}
.ui-performance .workout-progress > span {background: var(--pf-lime);}
.ui-performance .workout-list {display: grid; grid-template-columns: 1fr; gap: 10px;}
.ui-performance .workout-item {background: var(--white); color: var(--ink); border: 1px solid var(--line); border-radius: 11px;}
.ui-performance .workout-item.is-done {background: #273522; border-color: #607a45;}
.ui-performance .workout-open {color: var(--ink); gap: 15px; padding: 13px 12px;}
.ui-performance .workout-preview {background: #e9eddf; color: var(--pf-dark); border: 1px solid #5b6b4a; border-radius: 8px; width: 78px; height: 78px;}
.ui-performance .workout-item-copy h3 {font-size: 16px; font-weight: 800; letter-spacing: -.3px; line-height: 1.35;}
.ui-performance .workout-item-copy p {font-size: 11px; line-height: 1.6; color: var(--muted);}
.ui-performance .workout-item-status {background: #314529; color: #d3ecbd; font-size: 9px; border-radius: 5px;}
.ui-performance .workout-chevron {color: var(--pf-lime);}
.ui-performance .workout-row-check {background: var(--paper); color: var(--muted); border: 1px solid #657953; width: 44px; height: 44px; border-radius: 8px;}
.ui-performance .workout-row-check[aria-pressed=true], .ui-performance .workout-item.is-done .workout-row-check {background: var(--pf-lime); color: var(--pf-dark); border-color: var(--pf-lime);}
.ui-performance .workout-date-nav :is(a, button) {background: var(--white); color: var(--ink); border-color: var(--line);}
.ui-performance .workout-block-picker {background: var(--white); color: var(--ink); border-color: var(--line); border-radius: 10px;}
.ui-performance .workout-presets button {background: var(--white); color: var(--ink); border-color: #4d5c41;}
.ui-performance .workout-presets button.active, .ui-performance .workout-presets button[aria-pressed=true] {background: var(--pf-lime); color: var(--pf-dark); border-color: var(--pf-lime);}
.ui-performance .workout-result {background: var(--soft); color: var(--ink); border-color: var(--line); border-radius: 13px;}
.ui-performance .workout-footer {background: #1c221bf5; color: var(--ink); border: 1px solid #70854e; border-radius: 10px; box-shadow: 0 12px 30px #0006;}
.ui-performance .workout-summary-metrics > div, .ui-performance .workout-summary-metrics > span {background: var(--white); color: var(--muted); border: 1px solid var(--line);}

/* All teaching controls remain available in the full 3D dialog. */
.ui-performance dialog {background: var(--paper); color: var(--ink); border: 1px solid #5d7149; border-radius: 17px; box-shadow: 0 20px 90px #0009;}
.ui-performance dialog::backdrop {background: #080b08a8; backdrop-filter: blur(6px);}
.ui-performance .dialog-top {background: var(--paper); color: var(--ink); border-color: var(--line);}
.ui-performance .dialog-top > span {font-size: 9px; color: var(--muted); font-weight: 750;}
.ui-performance .icon-button {background: var(--soft); color: var(--ink); border-color: #536843; border-radius: 8px; min-height: 44px; min-width: 44px;}
.ui-performance .rig-stage {background: #e9eddf; border-color: #60744c; border-radius: 13px; top: 10px;}
.ui-performance .rig-current {background: #192413e8; color: #f2f5ed; border-radius: 6px; font-size: 11px;}
.ui-performance .rig-badge {background: #26351df0; color: var(--pf-lime); border: 1px solid #638047; font-weight: 700;}
.ui-performance .rig-cue {background: var(--white); color: var(--ink); border-color: var(--line); border-left: 3px solid var(--pf-lime); border-radius: 8px;}
.ui-performance :is(.rig-cameras, .rig-keys, .rig-character-controls) .btn.active {background: var(--pf-lime); color: var(--pf-dark); border-color: var(--pf-lime);}
.ui-performance .rig-controls .btn, .ui-performance .rig-cameras .btn {font-size: 11px; padding: 10px 12px;}
.ui-performance .rig-character-controls .btn {font-size: 12px;}
.ui-performance .rig-keys .btn {font-size: 11px;}
.ui-performance .motion-stage {background: #e9eddf; border-color: #647b4c;}
.ui-performance .frame-buttons button {background: var(--white); color: var(--ink); border-color: var(--line);}
.ui-performance .frame-buttons button.active {background: var(--pf-lime); color: var(--pf-dark);}
.ui-performance .ingredients li {border-color: var(--line);}
.ui-performance #toast {background: var(--pf-lime); color: var(--pf-dark); border: 1px solid var(--pf-lime); font-size: 12px; font-weight: 650;}
.ui-performance #connection-status:not(:empty) {background: #354221; color: #def1c4; border-bottom: 1px solid #647c45;}
.ui-performance :is(button, a, input, select, textarea, summary):focus-visible {outline: 3px solid var(--pf-lime); outline-offset: 4px;}

/* Account design choices use the same interaction and durable preference. */
.ui-performance .ui-settings {background: var(--white); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; padding: 24px;}
.ui-performance .ui-settings > summary {font-size: 20px; font-weight: 800;}
.ui-performance .ui-design-options {gap: 15px;}
.ui-performance .ui-design-option {background: var(--paper); border: 1px solid #48573b; color: var(--ink); border-radius: 11px; padding: 0;}
.ui-performance .ui-design-option[aria-pressed=true] {border-color: var(--pf-lime); box-shadow: 0 0 0 1px var(--pf-lime);}
.ui-performance .ui-option-copy > b {font-size: 17px; font-weight: 850;}
.ui-performance .ui-option-copy > span {font-size: 11px; color: var(--muted);}
.ui-performance .ui-choice-check {color: var(--pf-lime);}

@media (max-width: 1250px) {
  .ui-performance .shell {grid-template-columns: 190px minmax(0, 1fr);}
  .ui-performance .shell > aside {padding-left: 14px; padding-right: 14px;}
  .ui-performance .shell > aside nav a {padding: 12px; gap: 12px;}
  .ui-performance #main {padding: 32px 28px 70px;}
  .ui-performance .program-picker {grid-template-columns: 1fr; gap: 10px;}
  .ui-performance .ui-session-copy {padding: 26px;}
  .ui-performance .ui-session-copy h2 {font-size: 39px; letter-spacing: -1.8px;}
  .ui-performance .ui-session-copy .button-row {gap: 8px;}
  .ui-performance .ui-session-copy .btn {font-size: 10px; padding: 11px 12px;}
  .ui-performance .ui-session-motion .rig-stage, .ui-performance .ui-session-motion > img {height: 240px;}
  .ui-performance .program-hero-copy {grid-template-columns: 1fr 1.1fr; gap: 14px 23px; padding: 24px;}
  .ui-performance .program-metrics {grid-column: 1; grid-row: 4; padding-right: 0; gap: 20px;}
  .ui-performance .program-cycle {grid-column: 2; grid-row: 4;}
  .ui-performance .program-mantra {padding-right: 25px;}
  .ui-performance .atlas-grid {grid-template-columns: repeat(2, minmax(0, 1fr));}
  .ui-performance .menu-grid, .ui-performance .shop-grid {grid-template-columns: repeat(2, minmax(0, 1fr));}
  .ui-performance .account-grid {grid-template-columns: 1fr;}
  .ui-performance .account-stack {grid-template-columns: repeat(2, minmax(0, 1fr));}
}

@media (max-width: 900px) {
  .ui-performance .shell {grid-template-columns: 162px minmax(0, 1fr);}
  .ui-performance .shell > aside {padding: 25px 10px;}
  .ui-performance .shell > aside nav a {gap: 9px; padding: 12px 10px;}
  .ui-performance .shell > aside nav a > span {font-size: 11px;}
  .ui-performance .shell > aside nav a .nav-icon {font-size: 19px !important;}
  .ui-performance #main {padding: 29px 23px 65px;}
  .ui-performance .program-options {grid-template-columns: repeat(2, minmax(0, 1fr));}
  .ui-performance .ui-session-summary {grid-template-columns: 1fr; min-height: 0;}
  .ui-performance .ui-session-copy {padding: 26px;}
  .ui-performance .ui-session-copy h2 {font-size: 39px;}
  .ui-performance .ui-session-art {border-left: 0; border-top: 1px solid var(--line); padding: 16px;}
  .ui-performance .ui-session-motion .rig-stage, .ui-performance .ui-session-motion > img {height: 240px;}
  .ui-performance .plan-calendar .calendar {grid-template-columns: repeat(4, minmax(0, 1fr));}
  .ui-performance .plan-calendar .day {min-height: 82px;}
  .ui-performance .steel-exercise {grid-template-columns: minmax(0, 1fr); gap: 10px;}
  .ui-performance .steel-prescription {text-align: left; border-top: 1px solid var(--line); padding-top: 9px; margin-left: 94px;}
  .ui-performance .steel-prescription > b, .ui-performance .steel-prescription > span {display: inline;}
  .ui-performance .steel-prescription > span {margin-left: 10px;}
  .ui-performance .program-features {grid-template-columns: 1fr;}
  .ui-performance .program-hero-copy {grid-template-columns: 1fr; gap: 12px;}
  .ui-performance .program-hero-copy > :is(.eyebrow, h1, .program-mantra, .program-goal, .program-metrics, .program-cycle) {grid-column: 1; grid-row: auto;}
  .ui-performance .program-hero .eyebrow {padding-right: 25px;}
  .ui-performance .program-hero h1 {max-width: 280px;}
  .ui-performance .program-metrics {margin-top: 4px;}
  .ui-performance .program-cycle {padding-top: 10px; border-top: 1px solid var(--line);}
  .ui-performance .account-stack {grid-template-columns: 1fr;}
}

@media (max-width: 720px), (max-width: 950px) and (max-height: 500px) {
  body.ui-performance {--mobile-nav-height: 76px; padding-bottom: calc(90px + var(--mobile-safe-bottom, 0px));}
  .ui-performance > header {height: calc(72px + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px)); gap: 8px;}
  .ui-performance .brand {font-size: 20px; letter-spacing: -.8px; gap: 3px;}
  .ui-performance .brand em {font-size: 11px; margin-left: 2px;}
  .ui-performance .brand-icon {width: 31px; height: 31px; font-size: 20px; border-radius: 8px; margin-right: 4px;}
  .ui-performance .header-account {max-width: 83px; min-height: 44px; padding: 8px 10px; font-size: 10px; border-radius: 7px;}
  .ui-performance .ui-header-link {font-size: 0; padding: 8px 10px; min-height: 44px;}
  .ui-performance .print-link {display: none;}
  .ui-performance .shell {display: block;}
  .ui-performance .shell > aside {position: fixed; inset: auto 0 0; top: auto; width: 100%; height: auto; max-height: none; padding: 0 5px var(--mobile-safe-bottom, 0px); border: 0; border-top: 1px solid #526141; background: #131713f7; z-index: 16; overflow: visible; backdrop-filter: blur(15px);}
  .ui-performance .shell > aside nav {display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px; margin: 0; padding: 7px 0;}
  .ui-performance .shell > aside nav a {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-height: 59px; padding: 7px 0; border-radius: 8px;}
  .ui-performance .shell > aside nav a > span:not(.nav-icon) {font-size: 9px; font-weight: 700; line-height: 1.2; white-space: nowrap;}
  .ui-performance .shell > aside nav a .nav-icon {font-size: 20px !important; min-width: 0;}
  .ui-performance .shell > aside nav a.active {background: var(--pf-lime); color: var(--pf-dark); border-color: var(--pf-lime);}
  .ui-performance #main {padding: 26px max(16px, env(safe-area-inset-right, 0px)) 35px max(16px, env(safe-area-inset-left, 0px));}
  .ui-performance .page-head {margin-bottom: 23px;}
  .ui-performance :is(.page-head h1, .ui-plan-heading h1) {font-size: 43px; font-weight: 850; line-height: 1.03; letter-spacing: -2px; margin: 12px 0 9px;}
  .ui-performance .eyebrow {font-size: 8px; letter-spacing: 1.3px;}
  .ui-performance .page-head .lead {font-size: 12px;}
  .ui-performance h2 {font-size: 23px;}
  .ui-performance h3 {font-size: 17px;}
  .ui-performance .btn {font-size: 11px; min-height: 44px; padding: 11px 14px;}
  .ui-performance .panel {padding: 20px;}
  .ui-performance.ui-route-plan #main {gap: 21px;}
  .ui-performance .ui-plan-heading {display: block;}
  .ui-performance .ui-plan-heading .lead {font-size: 11px; max-width: none;}
  .ui-performance .program-picker {padding: 12px; gap: 10px; border-radius: 10px;}
  .ui-performance .program-options {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px;}
  .ui-performance .program-option {min-height: 67px; padding: 9px 10px; gap: 5px;}
  .ui-performance .program-option b {font-size: 10px;}
  .ui-performance .program-option span {font-size: 8px;}
  .ui-performance .ui-session-summary {grid-template-columns: 1fr; gap: 0; border-radius: 15px;}
  .ui-performance .ui-session-copy {padding: 25px 22px;}
  .ui-performance .ui-session-index {font-size: 8px; letter-spacing: 1.3px; margin-bottom: 20px;}
  .ui-performance .ui-session-copy .eyebrow {font-size: 8px; margin-bottom: 13px; letter-spacing: .7px;}
  .ui-performance .ui-session-copy h2 {font-size: 37px; line-height: 1.07; letter-spacing: -1.7px; margin-bottom: 15px;}
  .ui-performance .ui-session-meta {font-size: 10px; line-height: 1.7;}
  .ui-performance .ui-session-copy .button-row {display: flex; flex-direction: row; align-items: stretch; margin-top: 22px; gap: 8px;}
  .ui-performance .ui-session-copy .btn {font-size: 10px; min-height: 45px; padding: 11px 13px;}
  .ui-performance .ui-session-art {padding: 13px 14px 8px;}
  .ui-performance .ui-session-motion .rig-stage, .ui-performance .ui-session-motion > img {height: 225px;}
  .ui-performance .ui-session-motion .rig-controls {padding: 8px;}
  .ui-performance .ui-session-motion .rig-controls .btn {min-height: 44px; font-size: 10px; padding: 8px 12px;}
  .ui-performance .ui-session-technique {min-height: 44px; font-size: 10px; padding: 10px 0 3px;}
  .ui-performance .ui-session-rest {min-height: 195px;}
  .ui-performance .ui-session-rest > span {font-size: 80px;}
  .ui-performance .ui-session-rest > small {font-size: 9px;}
  .ui-performance .plan-calendar > h2 {font-size: 21px; margin-bottom: 14px;}
  .ui-performance .plan-calendar .calendar {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; overflow: visible; margin: 0; padding: 0;}
  .ui-performance .plan-calendar .day {min-height: 79px; padding: 11px; gap: 8px;}
  .ui-performance .plan-calendar .day > span {font-size: 9px;}
  .ui-performance .plan-calendar .day b {font-size: 11px;}
  .ui-performance .plan-calendar .day:last-child {grid-column: 1 / -1; min-height: 66px;}
  .ui-performance .plan-phase-strip {display: grid; gap: 7px; padding: 13px 14px; font-size: 10px;}
  .ui-performance .steel-session > .section-head {flex-direction: column; align-items: stretch; gap: 13px;}
  .ui-performance .steel-session > .section-head h2 {font-size: 24px; letter-spacing: -.8px;}
  .ui-performance .steel-session > .section-head .btn {width: 100%;}
  .ui-performance .steel-exercises {gap: 10px; margin: 18px 0;}
  .ui-performance .steel-exercise {padding: 12px; gap: 10px; border-radius: 9px;}
  .ui-performance .steel-exercise-open {gap: 12px;}
  .ui-performance .steel-preview {width: 69px; height: 69px;}
  .ui-performance .steel-exercise-copy b {font-size: 14px; line-height: 1.3;}
  .ui-performance .steel-exercise-copy small {font-size: 8px;}
  .ui-performance .steel-exercise-copy > span {font-size: 9px;}
  .ui-performance .steel-prescription {margin-left: 81px; padding-top: 10px;}
  .ui-performance .steel-prescription > b {font-size: 16px;}
  .ui-performance .steel-prescription > span {font-size: 9px; margin-left: 7px;}
  .ui-performance .steel-prescription small {font-size: 9px; line-height: 1.6;}
  .ui-performance .exercise-row {grid-template-columns: 22px minmax(0, 1fr);}
  .ui-performance .exercise-row .dose {grid-column: 2; text-align: left; max-width: none; font-size: 10px;}
  .ui-performance .exercise-link {font-size: 12px;}
  .ui-performance .program-hero-copy {padding: 23px 21px; gap: 12px;}
  .ui-performance .program-hero h1 {font-size: 34px; letter-spacing: -1.4px; line-height: 1.02;}
  .ui-performance .program-hero .eyebrow {font-size: 7px;}
  .ui-performance .program-seal {top: 23px; right: 21px; font-size: 21px;}
  .ui-performance .program-mantra {font-size: 11px; padding-right: 0;}
  .ui-performance .program-hero .program-goal {font-size: 11px; line-height: 1.75;}
  .ui-performance .program-metrics {gap: 24px; font-size: 9px;}
  .ui-performance .program-metrics b {font-size: 23px;}
  .ui-performance .program-cycle select {font-size: 16px; max-width: 165px;}
  .ui-performance .program-features > span {font-size: 10px; padding: 12px;}
  .ui-performance .ui-atlas-search {padding: 10px 13px;}
  .ui-performance .filterbar {gap: 6px; margin-bottom: 22px;}
  .ui-performance .filterbar .btn {font-size: 9px; min-height: 44px; padding: 10px 11px;}
  .ui-performance .atlas-grid {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;}
  .ui-performance .atlas-card {border-radius: 11px;}
  .ui-performance .atlas-art {aspect-ratio: 1; padding: 5px 2px;}
  .ui-performance .atlas-copy {padding: 12px 11px;}
  .ui-performance .atlas-copy .tiny {font-size: 7px; letter-spacing: 0; line-height: 1.4; margin-bottom: 8px;}
  .ui-performance .atlas-copy h3 {font-size: 14px; letter-spacing: -.3px; min-height: 36px; margin-bottom: 13px;}
  .ui-performance .atlas-copy .btn {font-size: 9px; padding: 10px 7px; min-height: 44px;}
  .ui-performance .menu-grid, .ui-performance .shop-grid {grid-template-columns: 1fr; gap: 14px;}
  .ui-performance .food-menu > .section-head {flex-wrap: wrap; align-items: center; gap: 10px;}
  .ui-performance .food-menu > .section-head h2 {font-size: 23px;}
  .ui-performance .food-menu > .section-head .pill {font-size: 8px; margin: 0;}
  .ui-performance .food-day {padding: 19px; border-radius: 12px;}
  .ui-performance .food-day h3 {font-size: 25px; letter-spacing: -.7px; margin-bottom: 17px;}
  .ui-performance .food-day h3 > .tiny {font-size: 9px;}
  .ui-performance .menu-meal {grid-template-columns: 58px minmax(0, 1fr); gap: 9px; align-items: start; padding: 4px 0;}
  .ui-performance .menu-meal > span {font-size: 9px; padding-top: 14px;}
  .ui-performance .menu-meal .exercise-link {font-size: 12px; line-height: 1.5; min-height: 44px;}
  .ui-performance .shop-group {padding: 21px;}
  .ui-performance .shop-group h3 {font-size: 19px;}
  .ui-performance .shop-row {font-size: 12px; padding: 11px 0;}
  .ui-performance .shop-row small {font-size: 10px;}
  .ui-performance .food-reference {padding: 13px 18px;}
  .ui-performance .account-grid, .ui-performance .account-stack {grid-template-columns: 1fr; gap: 18px;}
  .ui-performance .auth-benefits h2 {font-size: 29px;}
  .ui-performance .workout-overview-copy h2 {font-size: 26px;}
  .ui-performance .workout-open {padding: 12px 8px; gap: 10px;}
  .ui-performance .workout-preview {width: 65px; height: 65px;}
  .ui-performance .workout-item-copy h3 {font-size: 13px;}
  .ui-performance .workout-item-copy p {font-size: 10px;}
  .ui-performance .workout-row-check {margin-right: 9px;}
  .ui-performance .workout-footer {bottom: calc(var(--mobile-nav-height, 76px) + var(--mobile-safe-bottom, 0px) + 10px);}
  .ui-performance .rig-stage {top: 8px; border-radius: 11px;}
  .ui-performance .rig-cameras .btn {font-size: 10px; padding: 8px 5px; min-height: 44px;}
  .ui-performance .rig-keys .btn {font-size: 10px; padding: 8px 6px; min-height: 65px;}
  .ui-performance .rig-character-controls .btn {font-size: 11px;}
  .ui-performance .rig-controls .btn {font-size: 11px; padding: 10px 11px;}
  .ui-performance .rig-controls select {font-size: 16px;}
  .ui-performance dialog {width: calc(100vw - 16px); max-height: calc(100dvh - 16px); border-radius: 13px;}
  .ui-performance .dialog-top {padding: 10px 13px;}
  .ui-performance .dialog-top > span {font-size: 8px; max-width: calc(100% - 60px);}
  .ui-performance #dialog-content {padding: 19px 16px;}
  .ui-performance .ui-settings {padding: 20px;}
  .ui-performance .ui-settings > summary {font-size: 18px;}
  .ui-performance .ui-design-options {gap: 11px;}
  .ui-performance .ui-option-copy > b {font-size: 15px;}
  .ui-performance .ui-option-copy > span {font-size: 10px;}
}

@media (max-width: 350px) {
  .ui-performance .brand {font-size: 18px; letter-spacing: -.7px;}
  .ui-performance .brand em {font-size: 10px;}
  .ui-performance .brand-icon {width: 28px; height: 28px; margin-right: 2px;}
  .ui-performance .header-account {max-width: 70px; padding: 8px 8px; font-size: 9px;}
  .ui-performance #main {padding-left: 14px; padding-right: 14px;}
  .ui-performance .shell > aside nav a > span:not(.nav-icon) {font-size: 8px;}
  .ui-performance :is(.page-head h1, .ui-plan-heading h1) {font-size: 38px; letter-spacing: -1.7px;}
  .ui-performance .ui-session-copy {padding: 22px 19px;}
  .ui-performance .ui-session-copy h2 {font-size: 33px; letter-spacing: -1.4px;}
  .ui-performance .ui-session-copy .button-row > * {flex: 1 1 120px;}
  .ui-performance .program-option b {font-size: 9px;}
  .ui-performance .program-option span {font-size: 7px;}
  .ui-performance .atlas-grid {grid-template-columns: 1fr; gap: 16px;}
  .ui-performance .atlas-art {aspect-ratio: 1.3;}
  .ui-performance .atlas-copy h3 {font-size: 21px; min-height: 0;}
  .ui-performance .atlas-copy .tiny {font-size: 8px;}
  .ui-performance .atlas-copy .btn {font-size: 11px;}
  .ui-performance .ui-design-options {grid-template-columns: 1fr;}
}

@media print {
  body.ui-performance {padding-bottom: 0; background: white; color: #182144; color-scheme: light;}
  .ui-performance > header, .ui-performance .shell > aside {display: none;}
  .ui-performance .shell {display: block;}
  .ui-performance #main {display: block; padding: 0;}
  .ui-performance .program-cover {display: none;}
}