/* Pop: a graphic, energetic workspace for the real plan, atlas and journal. */
body.ui-pop {
  --paper: #f7f4ec;
  --ink: #182144;
  --muted: #646b80;
  --line: #182144;
  --green: #3659fa;
  --lime: #fff4a6;
  --white: #fffdf6;
  --orange: #ff8a72;
  --soft: #ded4ff;
  --radius: 20px;
  --ui-bg: #f7f4ec;
  --ui-surface: #fffdf6;
  --ui-accent: #3659fa;
  --ui-ink: #182144;
  --ui-text: #182144;
  --ui-muted: #646b80;
  --ui-border: #182144;
  color-scheme: light;
  --pop-lavender: #cfc4ff;
  --pop-coral: #ff8a72;
  --pop-yellow: #fff4a6;
  --pop-blue: #3659fa;
  background: var(--paper);
  color: var(--ink);
  font-family: "Manrope", "Arial", sans-serif;
  line-height: 1.55;
  min-height: 100dvh;
}

/* A horizontal navigation rail gives this design its own spatial structure. */
.ui-pop > header {
  position: relative;
  z-index: 12;
  height: 88px;
  padding: 0 max(30px, calc((100vw - 1320px) / 2));
  gap: 22px;
  color: var(--ink);
  background: var(--paper);
  border-bottom: 2px solid var(--ink);
}
.ui-pop .brand {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -1.8px;
  color: var(--ink);
  gap: 5px;
}
.ui-pop .brand em {font-size: 16px; font-weight: 600; letter-spacing: -.5px; margin-left: 3px;}
.ui-pop .brand-icon {
  width: 38px;
  height: 38px;
  background: var(--pop-coral);
  color: var(--ink);
  border-radius: 0;
  clip-path: polygon(50% 0,59% 25%,79% 9%,76% 36%,100% 35%,82% 54%,97% 73%,70% 72%,66% 98%,50% 78%,34% 98%,30% 72%,3% 73%,18% 54%,0 35%,24% 36%,21% 9%,41% 25%);
  transform: rotate(12deg);
  font-size: 21px;
  margin-right: 6px;
}
.ui-pop .header-account {
  background: var(--pop-lavender);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 50px;
  font-size: 12px;
  font-weight: 800;
  padding: 8px 17px;
  min-height: 44px;
  line-height: 24px;
}
.ui-pop .print-link {color: var(--ink); font-size: 11px; font-weight: 700; min-height: 44px; display: flex; align-items: center;}
.ui-pop .shell {display: block; max-width: 1380px;}
.ui-pop .shell > aside {
  position: relative;
  top: auto;
  height: auto;
  overflow: visible;
  border: 0;
  padding: 17px 30px 0;
  background: var(--paper);
}
.ui-pop .shell > aside nav {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 8px;
  border: 2px solid var(--ink);
  border-radius: 15px;
  background: var(--white);
  overflow: visible;
}
.ui-pop .shell > aside nav a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  gap: 9px;
  padding: 10px 12px;
  border: 1.5px solid transparent;
  border-radius: 8px;
  color: var(--ink);
  transition: transform .18s ease, background .18s ease;
}
.ui-pop .shell > aside nav a > span {color: var(--ink); font-size: 12px; font-weight: 800;}
.ui-pop .shell > aside nav a .nav-icon {font-size: 21px !important; min-width: 22px;}
.ui-pop .shell > aside nav a:hover {background: var(--pop-yellow); transform: translateY(-2px);}
.ui-pop .shell > aside nav a.active {background: var(--ink); border-color: var(--ink); transform: rotate(-2deg);}
.ui-pop .shell > aside nav a.active > span {color: var(--white);}
.ui-pop #main {padding: 31px 30px 70px; min-width: 0;}
.ui-pop .page-head {margin: 4px 0 30px; align-items: center;}
.ui-pop :is(.page-head h1, .ui-plan-heading h1) {
  font-family: "Arial Black", "Manrope", sans-serif;
  font-size: clamp(45px, 5.7vw, 79px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -4px;
  margin: 13px 0 12px;
  color: var(--ink);
}
.ui-pop .eyebrow {font-size: 9px; font-weight: 900; letter-spacing: 1.2px; color: var(--pop-blue);}
.ui-pop .lead {font-size: 14px; line-height: 1.6; color: var(--muted);}
.ui-pop h2 {font-family: "Manrope", "Arial", sans-serif; font-size: 25px; font-weight: 900; letter-spacing: -1px; line-height: 1.2; color: inherit;}
.ui-pop h3 {font-size: 18px; font-weight: 850; letter-spacing: -.5px; color: inherit;}
.ui-pop .tiny {color: var(--muted);}
.ui-pop .btn {
  background: var(--white);
  color: var(--ink);
  border: 1.5px solid var(--ink);
  border-radius: 8px;
  padding: 11px 17px;
  min-height: 46px;
  font-size: 12px;
  font-weight: 850;
  box-shadow: 2px 2px 0 var(--ink);
  transition: transform .18s ease, box-shadow .18s ease;
}
.ui-pop .btn:hover {filter: none; transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ink);}
.ui-pop .btn.primary {background: var(--pop-blue); color: white; border-color: var(--ink); font-weight: 850;}
.ui-pop .btn.soft {background: var(--pop-lavender);}
.ui-pop .btn.quiet {background: transparent; box-shadow: none;}
.ui-pop .btn.danger, .ui-pop .danger-outline {color: #983529; border-color: #983529; box-shadow: none;}
.ui-pop .btn.danger {background: #983529; color: white;}
.ui-pop .pill {border: 1px solid var(--ink); color: var(--ink); background: var(--pop-yellow); border-radius: 50px; font-size: 10px; font-weight: 800; padding: 5px 10px;}
.ui-pop .pill.warm {background: var(--pop-coral); color: var(--ink);}
.ui-pop :is(.panel, .routine-card, .source-item, .detail-facts > div, .journal-card) {
  border: 1.5px solid var(--ink);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
}
.ui-pop .panel {padding: 25px;}
.ui-pop .panel.tint {background: var(--pop-yellow);}
.ui-pop .panel p, .ui-pop .panel li {font-size: 13px; line-height: 1.7;}
.ui-pop .section {margin-top: 30px;}
.ui-pop .section-head {margin-bottom: 20px;}
.ui-pop .note {background: var(--pop-lavender); border: 1.5px solid var(--ink); border-left: 5px solid var(--pop-blue); border-radius: 8px; color: var(--ink); font-size: 12px;}
.ui-pop .note.attention {background: #ffe2ce; border-left-color: #b64c25; color: #713116;}
.ui-pop details {border-color: #18214438;}
.ui-pop summary {font-size: 13px; font-weight: 800; min-height: 44px; line-height: 1.5; color: var(--ink);}
.ui-pop details p {font-size: 13px; line-height: 1.7;}
.ui-pop .rule {border-color: #18214438;}
.ui-pop .rule p {font-size: 12px; line-height: 1.75; color: var(--muted);}
.ui-pop .phase-line {border-color: #18214438;}
.ui-pop .phase-label {color: var(--pop-blue); font-weight: 800;}
.ui-pop .source-num {font-family: "Arial Black", sans-serif; color: var(--pop-blue); font-size: 30px; letter-spacing: -2px;}
.ui-pop .source-item .source-take {background: var(--pop-yellow); color: var(--ink); border-radius: 9px;}

/* Actionable plan first; programme context follows the day and week. */
.ui-pop.ui-route-plan #main {display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 23px; align-items: start;}
.ui-pop.ui-route-plan #main > * {grid-column: 1 / -1; min-width: 0; margin-top: 0; margin-bottom: 0;}
.ui-pop.ui-route-plan #main > :is(.ui-plan-heading, .page-head) {order: 0;}
.ui-pop.ui-route-plan #main > .program-picker {order: 1;}
.ui-pop.ui-route-plan #main > .ui-session-summary {order: 2;}
.ui-pop.ui-route-plan #main > .plan-calendar {order: 3;}
.ui-pop.ui-route-plan #main > .program-hero {order: 4;}
.ui-pop.ui-route-plan #main > .program-features {order: 5;}
.ui-pop.ui-route-plan #main > .plan-phase-strip {order: 6;}
.ui-pop.ui-route-plan #main > :is(.steel-session, .split) {order: 7;}
.ui-pop.ui-route-plan #main > :is(.section:not(.plan-calendar), .routine-series, details) {order: 8;}
.ui-pop .ui-plan-heading {display: flex; align-items: flex-end; justify-content: space-between; gap: 25px;}
.ui-pop .ui-plan-heading .lead {margin-bottom: 4px; max-width: 430px; font-size: 12px;}
.ui-pop .program-picker {display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 15px; padding: 12px 15px; border: 1.5px solid var(--ink); border-radius: 13px; background: var(--white);}
.ui-pop .program-options {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px;}
.ui-pop .program-option {display: flex; align-items: flex-start; justify-content: center; flex-direction: column; gap: 4px; min-height: 67px; padding: 11px 12px; border: 1.5px solid var(--ink); background: var(--paper); color: var(--ink); border-radius: 8px;}
.ui-pop .program-option b {font-size: 11px; font-weight: 900; line-height: 1.3;}
.ui-pop .program-option span {font-size: 8px; font-weight: 500; line-height: 1.4; color: var(--muted); margin: 0;}
.ui-pop .program-option.active {background: var(--pop-lavender); border-color: var(--ink); box-shadow: 2px 2px 0 var(--ink); transform: rotate(-1deg);}
.ui-pop .ui-session-summary {position: relative; display: grid; grid-template-columns: 1.2fr 1fr; align-items: stretch; border: 2px solid var(--ink); border-radius: 25px; min-height: 335px; background: var(--pop-blue); color: white; overflow: hidden; isolation: isolate;}
.ui-pop .ui-session-copy {padding: 30px 35px; display: flex; align-items: flex-start; justify-content: center; flex-direction: column; min-width: 0; position: relative;}
.ui-pop .ui-session-copy .eyebrow {color: var(--pop-yellow); font-size: 9px; letter-spacing: 1.4px; margin-bottom: 19px;}
.ui-pop .ui-session-copy h2 {font-family: "Arial Black", "Manrope", sans-serif; font-size: clamp(36px, 4.4vw, 61px); font-weight: 900; letter-spacing: -3px; line-height: 1.02; margin: 0 0 19px; color: white; max-width: 600px;}
.ui-pop .ui-session-meta {color: #ffffffd9; font-size: 11px; font-weight: 600; line-height: 1.65; margin-bottom: 22px;}
.ui-pop .ui-session-copy .button-row {gap: 11px;}
.ui-pop .ui-session-copy .btn.primary {background: var(--pop-coral); color: var(--ink); font-size: 12px; min-height: 48px; padding: 13px 19px; transform: rotate(-2deg); box-shadow: 3px 3px 0 var(--ink);}
.ui-pop .ui-session-copy .btn:not(.primary) {background: transparent; color: white; border-color: #ffffff80; box-shadow: none; font-size: 11px;}
.ui-pop .ui-session-art {position: relative; min-width: 0; padding: 15px 26px 23px; display: flex; align-items: center; justify-content: center; flex-direction: column; border: 0; border-left: 2px solid var(--ink); border-radius: 90px 0 0 0; background: var(--pop-yellow); color: var(--ink); overflow: hidden; min-height: 335px;}
.ui-pop .ui-session-visual {position: relative; width: 100%; height: 265px; min-width: 0; background: transparent;}
.ui-pop .ui-session-visual img {width: 100%; height: 100%; object-fit: contain; display: block; mix-blend-mode: multiply;}
.ui-pop .ui-session-art > span {padding: 8px 15px; border: 1.5px solid var(--ink); border-radius: 50px; background: var(--white); font-size: 10px; font-weight: 900; line-height: 1.4;}
.ui-pop .ui-session-art::after {content: ""; position: absolute; top: 28px; right: 27px; width: 49px; height: 49px; background: var(--pop-coral); clip-path: polygon(50% 0,59% 25%,79% 9%,76% 36%,100% 35%,82% 54%,97% 73%,70% 72%,66% 98%,50% 78%,34% 98%,30% 72%,3% 73%,18% 54%,0 35%,24% 36%,21% 9%,41% 25%); transform: rotate(14deg); pointer-events: none;}
.ui-pop .ui-session-index {position: absolute; top: 21px; right: 22px; padding: 8px 12px; border: 1.5px solid var(--ink); background: var(--pop-lavender); color: var(--ink); border-radius: 7px; font-size: 9px; font-weight: 900; transform: rotate(4deg); z-index: 2;}
.ui-pop .plan-calendar {padding: 20px 23px 23px; background: var(--white); border: 1.5px solid var(--ink); border-radius: 19px;}
.ui-pop .plan-calendar > h2 {font-size: 21px; margin: 0 0 16px;}
.ui-pop .plan-calendar .calendar {display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 9px; overflow: visible; margin: 0; padding: 0;}
.ui-pop .plan-calendar .day {display: flex; align-items: flex-start; flex-direction: column; gap: 9px; min-width: 0; min-height: 91px; padding: 12px; border: 1.5px solid var(--ink); background: var(--paper); color: var(--ink); border-radius: 11px;}
.ui-pop .plan-calendar .day > span {font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin: 0;}
.ui-pop .plan-calendar .day b {font-size: 10px; font-weight: 800; line-height: 1.35; overflow-wrap: anywhere;}
.ui-pop .plan-calendar .day small {font-size: 8px; line-height: 1.4; margin-top: auto; color: var(--muted); white-space: normal;}
.ui-pop .plan-calendar .day.strength:not(.active) {background: var(--pop-lavender); border-color: var(--ink);}
.ui-pop .plan-calendar .day.active {background: var(--pop-blue); color: white; border-color: var(--ink); box-shadow: 3px 3px 0 var(--pop-coral); transform: rotate(-1deg);}
.ui-pop .plan-calendar .day.active > span, .ui-pop .plan-calendar .day.active small {color: #ffffffc9;}
.ui-pop .program-hero {position: relative; min-height: 0; height: auto; background: var(--pop-yellow); border: 1.5px solid var(--ink); border-radius: 18px; overflow: hidden; color: var(--ink); margin: 0;}
.ui-pop .program-cover {display: none;}
.ui-pop .program-hero::before {background: none;}
.ui-pop .program-hero-copy {display: grid; grid-template-columns: 1fr 1.05fr 1.15fr; gap: 12px 29px; position: relative; padding: 26px 28px; max-width: none;}
.ui-pop .program-hero .eyebrow {grid-column: 1; grid-row: 1; font-size: 8px; letter-spacing: 1px; color: var(--pop-blue); padding-right: 15px;}
.ui-pop .program-hero h1 {grid-column: 1; grid-row: 2 / 4; font-family: "Arial Black", "Manrope", sans-serif; font-size: 35px; line-height: 1; letter-spacing: -1.8px; font-weight: 900; color: var(--ink); text-shadow: none; margin: 0;}
.ui-pop .program-hero h1 em {color: var(--pop-blue); font-style: normal;}
.ui-pop .program-mantra {grid-column: 2; grid-row: 1; color: var(--ink); font-family: inherit; font-size: 11px; font-weight: 900; line-height: 1.5; letter-spacing: 0; margin: 0;}
.ui-pop .program-hero .program-goal {grid-column: 2; grid-row: 2 / 4; color: var(--muted); font-size: 11px; line-height: 1.75; max-width: none; margin: 0;}
.ui-pop .program-seal {position: absolute; top: 24px; right: 26px; color: var(--pop-blue); font-size: 23px; line-height: 1; margin: 0;}
.ui-pop .program-metrics {grid-column: 3; grid-row: 1 / 3; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 9px 18px; padding-right: 30px; color: var(--muted); font-size: 9px; margin: 0;}
.ui-pop .program-metrics b {display: block; color: var(--ink); font-size: 24px; line-height: 1.25; font-weight: 900;}
.ui-pop .program-cycle {grid-column: 3; grid-row: 3; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; color: var(--muted); font-size: 9px;}
.ui-pop .program-cycle .week-select {margin: 0;}
.ui-pop .program-cycle label {color: var(--ink); font-size: 9px; font-weight: 800; margin: 0 0 5px;}
.ui-pop .program-cycle select {background: var(--white); color: var(--ink); border: 1.5px solid var(--ink); border-radius: 7px; min-height: 44px; font-size: 13px; padding: 8px 11px;}
.ui-pop .home-hero-art {display: none;}
.ui-pop .program-features {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; border: 0; padding: 0; margin: 0; color: var(--ink); font-size: 10px; font-weight: 700;}
.ui-pop .program-features > span {display: flex; align-items: center; gap: 9px; padding: 13px 15px; background: var(--white); border: 1.5px solid var(--ink); border-radius: 10px; min-width: 0;}
.ui-pop .program-features > span:nth-child(2) {background: var(--pop-lavender);}
.ui-pop .program-features > span:nth-child(3) {background: var(--pop-coral);}
.ui-pop .program-features i {color: var(--ink); font-weight: 900; font-size: 9px; margin: 0;}
.ui-pop .plan-phase-strip {display: flex; align-items: center; justify-content: space-between; gap: 15px; flex-wrap: wrap; background: var(--white); border: 1.5px solid var(--ink); border-radius: 10px; padding: 13px 17px; font-size: 11px; color: var(--muted);}
.ui-pop .plan-phase-strip b {color: var(--ink);}
.ui-pop .steel-session {background: var(--white); border: 1.5px solid var(--ink); border-radius: 20px; margin: 0;}
.ui-pop .steel-session > .section-head h2 {font-size: 28px; letter-spacing: -1.2px; margin: 7px 0 8px;}
.ui-pop .steel-session > .section-head p {color: var(--muted); font-size: 12px;}
.ui-pop .steel-warmup, .ui-pop .workout-warmup {background: var(--pop-yellow); border: 1.5px solid var(--ink); border-radius: 10px; padding: 9px 15px;}
.ui-pop .steel-warmup ul {color: var(--ink);}
.ui-pop .steel-exercises {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; margin: 20px 0;}
.ui-pop .steel-exercise {display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding: 14px; border: 1.5px solid var(--ink); border-radius: 14px; background: var(--paper);}
.ui-pop .steel-exercise:nth-child(3n+1) {background: #e4dcff;}
.ui-pop .steel-exercise:nth-child(3n+2) {background: #fff7c7;}
.ui-pop .steel-exercise:nth-child(3n) {background: #ffe2d8;}
.ui-pop .steel-exercise-open {gap: 14px; min-height: 78px; color: var(--ink); width: 100%;}
.ui-pop .steel-preview {width: 89px; height: 89px; border-radius: 11px; background: #fffdf690; border: 1px solid #18214435;}
.ui-pop .steel-preview img {mix-blend-mode: multiply;}
.ui-pop .steel-exercise-copy small {font-size: 9px; font-weight: 800; color: var(--muted);}
.ui-pop .steel-exercise-copy b {font-size: 16px; font-weight: 900; letter-spacing: -.5px; line-height: 1.35; margin: 4px 0 7px;}
.ui-pop .steel-exercise-copy > span {font-size: 10px; color: var(--pop-blue); font-weight: 850;}
.ui-pop .steel-prescription {display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 10px; border-top: 1px solid #18214438; padding-top: 10px; text-align: left; margin: 0;}
.ui-pop .steel-prescription > b {font-size: 17px; color: var(--ink); line-height: 1.3;}
.ui-pop .steel-prescription span {font-size: 10px; color: var(--muted); margin: 0;}
.ui-pop .steel-prescription small {width: 100%; font-size: 10px; color: var(--muted); margin: 0;}
.ui-pop .exercise-row {border-color: #18214438; padding: 13px 0; gap: 12px;}
.ui-pop .exercise-row .num {font-weight: 900; color: var(--pop-blue);}
.ui-pop .exercise-link {color: var(--ink); font-size: 13px; font-weight: 800; text-decoration-color: #18214458; min-height: 44px;}
.ui-pop .exercise-row .dose {color: var(--muted); font-size: 11px;}
.ui-pop .routine-card:nth-child(3n+1) {background: var(--pop-lavender);}
.ui-pop .routine-card:nth-child(3n+2) {background: var(--pop-yellow);}
.ui-pop .routine-card:nth-child(3n) {background: var(--pop-coral);}
.ui-pop .routine-card .tag {color: var(--ink); font-weight: 900;}
.ui-pop .routine-card p {color: var(--ink); font-size: 12px; line-height: 1.65;}

/* The atlas is a large, legible movement library, with room for the 3D model. */
.ui-pop .filterbar {gap: 9px; margin-bottom: 26px;}
.ui-pop .filterbar .btn {border-radius: 50px; box-shadow: none; padding: 10px 18px; font-size: 11px; background: var(--white);}
.ui-pop .filterbar .btn.active {background: var(--pop-blue); color: white; border-color: var(--ink); transform: rotate(-1deg);}
.ui-pop .atlas-grid {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px;}
.ui-pop .atlas-card {border: 2px solid var(--ink); border-radius: 19px; background: var(--pop-lavender); box-shadow: 3px 3px 0 var(--ink); overflow: hidden;}
.ui-pop .atlas-card:nth-child(3n+2) {background: var(--pop-yellow);}
.ui-pop .atlas-card:nth-child(3n) {background: var(--pop-coral);}
.ui-pop .atlas-art {width: 100%; aspect-ratio: 1.05; background: transparent; padding: 12px 9px 0; min-width: 0;}
.ui-pop .atlas-art img {mix-blend-mode: multiply;}
.ui-pop .atlas-copy {padding: 14px 19px 19px; background: transparent; color: var(--ink);}
.ui-pop .atlas-copy .tiny {font-size: 8px; font-weight: 850; letter-spacing: .5px; color: #1821449c; margin-bottom: 9px;}
.ui-pop .atlas-copy h3 {font-size: 21px; font-weight: 900; line-height: 1.15; letter-spacing: -.9px; min-height: 49px; margin: 0 0 19px;}
.ui-pop .atlas-copy .btn {justify-content: space-between; background: var(--white); width: 100%; font-size: 10px; padding: 10px 12px; border-radius: 7px; box-shadow: none; margin-top: auto;}

/* Weekly menu and shopping remain real controls, organised into two work areas. */
.ui-pop.ui-route-food #main {display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(270px, 1fr); gap: 27px; align-items: start;}
.ui-pop.ui-route-food #main > * {min-width: 0; grid-column: 1 / -1; margin: 0;}
.ui-pop.ui-route-food #main > .page-head {grid-column: 1 / -1;}
.ui-pop.ui-route-food #main > .food-menu {grid-column: 1;}
.ui-pop.ui-route-food #main > .section:has(#shopping) {grid-column: 2; padding: 24px 22px; background: var(--pop-blue); color: white; border: 2px solid var(--ink); border-radius: 20px; box-shadow: 3px 3px 0 var(--ink); transform: rotate(.6deg);}
.ui-pop .food-menu > .section-head {margin-bottom: 12px;}
.ui-pop .food-menu > .tiny {font-size: 10px; line-height: 1.6; margin-bottom: 14px;}
.ui-pop .food-menu > details {padding: 4px 0 12px; margin-bottom: 17px;}
.ui-pop .menu-grid {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;}
.ui-pop .food-day {border: 1.5px solid var(--ink); border-radius: 15px; background: var(--pop-yellow); padding: 19px; box-shadow: 2px 2px 0 var(--ink);}
.ui-pop .food-day:nth-child(3n+2) {background: var(--pop-lavender);}
.ui-pop .food-day:nth-child(3n) {background: var(--pop-coral);}
.ui-pop .food-day h3 {font-size: 20px; font-weight: 900; letter-spacing: -.8px; margin-bottom: 16px; align-items: flex-start; gap: 10px;}
.ui-pop .food-day h3 .tiny {color: #1821449c; font-size: 9px; line-height: 1.5; text-align: right; font-weight: 600; letter-spacing: 0;}
.ui-pop .menu-meal {grid-template-columns: 49px minmax(0, 1fr); align-items: start; gap: 9px; margin: 5px 0; padding: 5px 0; border-top: 1px solid #1821442b;}
.ui-pop .menu-meal > span {color: #182144a1; font-size: 8px; font-weight: 800; padding-top: 14px;}
.ui-pop .menu-meal .exercise-link {font-size: 11px; font-weight: 750; line-height: 1.5; min-height: 44px; padding: 8px 0;}
.ui-pop.ui-route-food .section:has(#shopping) h2 {color: white; font-family: "Arial Black", "Manrope", sans-serif; font-size: 34px; letter-spacing: -1.7px; line-height: 1.05;}
.ui-pop.ui-route-food .section:has(#shopping) > .tiny {color: #ffffffbf; font-size: 10px;}
.ui-pop.ui-route-food .section:has(#shopping) summary, .ui-pop.ui-route-food .section:has(#shopping) details p {color: white;}
.ui-pop.ui-route-food .section:has(#shopping) details {border-color: #ffffff50;}
.ui-pop .count-picker {font-size: 10px; font-weight: 800; margin: 20px 0; gap: 13px;}
.ui-pop .count-picker input {width: 76px; border: 1.5px solid var(--ink); background: var(--pop-yellow); color: var(--ink); font-size: 16px; font-weight: 850;}
.ui-pop .shop-grid {display: grid; grid-template-columns: 1fr; gap: 19px;}
.ui-pop .shop-group {border: 0; border-radius: 0; padding: 0; background: transparent; color: inherit;}
.ui-pop .shop-group h3 {font-size: 15px; margin: 0 0 10px; color: var(--pop-yellow); letter-spacing: -.2px;}
.ui-pop .shop-row {font-size: 11px; gap: 10px; padding: 10px 0; min-height: 44px; border-bottom: 1px solid #ffffff40;}
.ui-pop .shop-row input {width: 18px; height: 18px; margin-top: 2px; accent-color: var(--pop-yellow);}
.ui-pop .shop-row > span {min-width: 0; line-height: 1.55;}
.ui-pop .shop-row small {font-size: 9px; color: #ffffffaf; margin-top: 4px;}
.ui-pop .shop-row:has(input:checked) {color: #ffffff80;}
.ui-pop .food-reference {padding: 19px 24px; border: 1.5px solid var(--ink); border-radius: 18px; background: var(--white);}
.ui-pop .frequency {background: var(--white); border-color: var(--ink); border-radius: 13px;}
.ui-pop .frequency .target {color: var(--pop-blue);}
.ui-pop .frequency.limit {background: var(--pop-yellow);}

/* Account forms and saved workout controls keep their familiar functionality. */
.ui-pop :is(input:not([type=checkbox]):not([type=radio]), select, textarea) {background: var(--white); border: 1.5px solid var(--ink); color: var(--ink); border-radius: 8px; min-height: 46px;}
.ui-pop input[type=checkbox], .ui-pop input[type=radio] {accent-color: var(--pop-blue);}
.ui-pop .account-grid {grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 23px;}
.ui-pop .account-stack {gap: 18px;}
.ui-pop .account-form :is(input:not([type=checkbox]), select, textarea) {background: var(--white); color: var(--ink); border: 1.5px solid var(--ink); min-height: 48px;}
.ui-pop .account-form label {font-size: 11px; font-weight: 800; color: var(--ink);}
.ui-pop .account-form small {font-size: 10px; font-weight: 500; color: var(--muted);}
.ui-pop .auth-benefits {display: block; background: var(--pop-yellow);}
.ui-pop .auth-benefits h2 {font-family: "Arial Black", "Manrope", sans-serif; font-size: 35px; font-weight: 900; letter-spacing: -1.7px;}
.ui-pop .account-tabs .btn.primary {background: var(--ink); color: white;}
.ui-pop .avatar {background: var(--pop-lavender); color: var(--ink); border: 1.5px solid var(--ink); font-family: inherit; font-weight: 900;}
.ui-pop .password-toggle {color: var(--pop-blue); font-weight: 800;}
.ui-pop .weekday-picker span {border: 1.5px solid var(--ink); background: var(--paper); color: var(--ink); border-radius: 7px;}
.ui-pop .weekday-picker input:checked+span {background: var(--pop-blue); color: white; border-color: var(--ink);}
.ui-pop .recovery-panel {background: var(--pop-yellow); border-color: var(--ink);}
.ui-pop .recovery-panel code {background: var(--white); border-color: var(--ink); color: var(--ink);}
.ui-pop .journal-day-launcher {background: var(--pop-yellow); color: var(--ink); border: 1.5px solid var(--ink); border-radius: 19px;}
.ui-pop .journal-week-strip a {background: var(--white); color: var(--ink); border: 1.5px solid var(--ink); border-radius: 9px;}
.ui-pop .journal-week-strip a.active {background: var(--pop-blue); color: white; border-color: var(--ink); box-shadow: 2px 2px 0 var(--ink);}
.ui-pop .journal-week-strip a.active > span {color: #ffffffce;}
.ui-pop .journal-card {box-shadow: 2px 2px 0 var(--ink);}
.ui-pop .journal-metrics span {background: var(--pop-lavender); color: var(--ink);}
.ui-pop .journal-feeling {background: var(--pop-yellow);}
.ui-pop .journal-empty {border-color: var(--ink); background: var(--white);}
.ui-pop .workout-overview {background: var(--pop-blue); color: white; border: 2px solid var(--ink); border-radius: 22px;}
.ui-pop .workout-overview-copy h2 {color: white; font-size: 32px; font-weight: 900; letter-spacing: -1.5px;}
.ui-pop .workout-overview-copy .eyebrow, .ui-pop .workout-overview-copy p {color: #ffffffb8;}
.ui-pop .workout-overview-copy .pill {background: var(--pop-yellow); color: var(--ink); border-color: var(--ink);}
.ui-pop .workout-overview .btn.primary {background: var(--pop-coral); color: var(--ink); border-color: var(--ink);}
.ui-pop .workout-count strong {color: var(--pop-yellow); font-weight: 900;}
.ui-pop .workout-count > span, .ui-pop .workout-count strong > span {color: #ffffffc9;}
.ui-pop .workout-overview .workout-progress {background: #ffffff30;}
.ui-pop .workout-progress > span {background: var(--pop-yellow);}
.ui-pop .workout-list {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px;}
.ui-pop .workout-item {background: var(--white); border: 1.5px solid var(--ink); border-radius: 14px; color: var(--ink); min-width: 0;}
.ui-pop .workout-item:nth-child(3n+1) {background: #e4dcff;}
.ui-pop .workout-item:nth-child(3n+2) {background: #fff7c7;}
.ui-pop .workout-item:nth-child(3n) {background: #ffe2d8;}
.ui-pop .workout-item.is-done {background: #d4ead0; border-color: var(--ink);}
.ui-pop .workout-open {padding: 14px 10px; gap: 12px; color: var(--ink);}
.ui-pop .workout-preview {background: #fffdf6b5; border: 1px solid #18214438; border-radius: 10px; width: 76px; height: 76px;}
.ui-pop .workout-preview img {mix-blend-mode: multiply;}
.ui-pop .workout-item-copy h3 {font-size: 15px; font-weight: 900; line-height: 1.3; letter-spacing: -.4px;}
.ui-pop .workout-item-copy p {font-size: 10px; color: var(--muted); line-height: 1.5;}
.ui-pop .workout-chevron {color: var(--pop-blue);}
.ui-pop .workout-item-status {background: var(--pop-lavender); color: var(--ink); font-size: 9px;}
.ui-pop .workout-row-check {border: 1.5px solid var(--ink); background: var(--white); color: var(--ink); width: 44px; height: 44px;}
.ui-pop .workout-row-check[aria-pressed=true], .ui-pop .workout-item.is-done .workout-row-check {background: var(--pop-blue); color: white; border-color: var(--ink);}
.ui-pop .workout-block-picker {background: var(--white); color: var(--ink); border: 1.5px solid var(--ink); border-radius: 12px;}
.ui-pop .workout-date-nav :is(button, a) {background: var(--pop-lavender); color: var(--ink); border: 1.5px solid var(--ink);}
.ui-pop .workout-result {background: var(--pop-yellow); color: var(--ink); border: 1.5px solid var(--ink); border-radius: 19px;}
.ui-pop .workout-presets button {background: var(--white); color: var(--ink); border: 1.5px solid var(--ink);}
.ui-pop .workout-presets button.active {background: var(--pop-blue); color: white; border-color: var(--ink);}
.ui-pop .workout-footer {background: var(--white); color: var(--ink); border: 2px solid var(--ink); border-radius: 12px; box-shadow: 3px 3px 0 var(--ink);}

/* The teaching dialog remains a complete 3D workspace. */
.ui-pop dialog {background: var(--paper); color: var(--ink); border: 2px solid var(--ink); border-radius: 21px; box-shadow: 6px 6px 0 #18214460;}
.ui-pop dialog::backdrop {background: #18214487; backdrop-filter: blur(5px);}
.ui-pop .dialog-top {background: var(--paper); color: var(--ink); border-bottom: 1.5px solid var(--ink);}
.ui-pop .dialog-top > span {color: var(--muted); font-weight: 800; font-size: 9px;}
.ui-pop .icon-button {background: var(--pop-coral); color: var(--ink); border: 1.5px solid var(--ink); min-height: 44px; min-width: 44px;}
.ui-pop .rig-stage {background: var(--pop-yellow); border: 1.5px solid var(--ink); border-radius: 17px; top: 12px;}
.ui-pop .rig-current {background: var(--ink); color: var(--white); border-radius: 7px; font-size: 11px;}
.ui-pop .rig-cue {background: var(--white); color: var(--ink); border: 1.5px solid var(--ink); border-left: 5px solid var(--pop-blue); border-radius: 9px;}
.ui-pop .rig-badge {background: var(--pop-lavender); color: var(--ink); border: 1px solid var(--ink); font-weight: 800;}
.ui-pop :is(.rig-cameras, .rig-keys, .rig-character-controls) .btn.active {background: var(--pop-blue); color: white; border-color: var(--ink);}
.ui-pop .rig-controls .btn, .ui-pop .rig-cameras .btn {font-size: 11px; padding: 10px 12px;}
.ui-pop .rig-character-controls .btn {font-size: 12px;}
.ui-pop .rig-keys .btn {font-size: 11px;}
.ui-pop .motion-stage {background: var(--pop-yellow); border-color: var(--ink);}
.ui-pop .frame-buttons button {border-color: var(--ink); color: var(--ink); background: var(--white);}
.ui-pop .frame-buttons button.active {background: var(--pop-blue); color: white;}
.ui-pop .ingredients li {border-color: #18214438;}
.ui-pop #toast {background: var(--ink); color: var(--white); border: 1.5px solid var(--ink); box-shadow: 3px 3px 0 var(--pop-coral); font-size: 12px;}
.ui-pop #connection-status:not(:empty) {background: var(--pop-yellow); color: var(--ink); border-bottom: 1px solid var(--ink);}
.ui-pop :is(button, a, input, select, textarea, summary):focus-visible {outline: 3px solid var(--pop-blue); outline-offset: 4px;}

/* User-selectable design settings live with the other real account controls. */
.ui-pop .ui-settings {border: 1.5px solid var(--ink); border-radius: 19px; background: var(--white); padding: 24px;}
.ui-pop .ui-settings h2 {font-size: 25px; font-weight: 900;}
.ui-pop .ui-design-options {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;}
.ui-pop .ui-design-option {text-align: left; min-width: 0; min-height: 44px; border: 1.5px solid var(--ink); border-radius: 12px; background: var(--paper); padding: 12px; color: var(--ink);}
.ui-pop .ui-design-option[aria-pressed=true] {background: var(--pop-lavender); box-shadow: 3px 3px 0 var(--ink); transform: rotate(-1deg);}
.ui-pop .ui-design-option b {font-size: 13px; font-weight: 900;}
.ui-pop .ui-design-option p {font-size: 10px; line-height: 1.55; color: var(--muted);}
.ui-pop .ui-design-mini {border: 1px solid var(--ink); border-radius: 7px; overflow: hidden;}

@media (max-width: 1100px) {
  .ui-pop > header {padding-left: 25px; padding-right: 25px;}
  .ui-pop .shell > aside {padding-left: 25px; padding-right: 25px;}
  .ui-pop #main {padding-left: 25px; padding-right: 25px;}
  .ui-pop .program-picker {grid-template-columns: 1fr; gap: 10px;}
  .ui-pop .ui-session-summary {min-height: 312px;}
  .ui-pop .ui-session-copy {padding: 27px 28px;}
  .ui-pop .ui-session-copy h2 {font-size: 45px; letter-spacing: -2.1px;}
  .ui-pop .ui-session-art {min-height: 312px; padding: 18px;}
  .ui-pop .ui-session-visual {height: 237px;}
  .ui-pop .ui-session-copy .button-row {gap: 8px;}
  .ui-pop .ui-session-copy .btn {font-size: 10px; padding: 11px 13px;}
  .ui-pop .plan-calendar {padding: 18px;}
  .ui-pop .plan-calendar .calendar {gap: 7px;}
  .ui-pop .plan-calendar .day {padding: 10px 8px; min-height: 96px;}
  .ui-pop .plan-calendar .day b {font-size: 9px;}
  .ui-pop .program-hero-copy {grid-template-columns: 1fr 1fr; gap: 13px 24px; padding: 24px;}
  .ui-pop .program-metrics {grid-column: 1; grid-row: 4; gap: 22px; padding-right: 0;}
  .ui-pop .program-cycle {grid-column: 2; grid-row: 4;}
  .ui-pop .program-seal {display: block; top: 23px; right: 23px;}
  .ui-pop .program-mantra {padding-right: 26px;}
  .ui-pop .atlas-grid {grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 17px;}
  .ui-pop .atlas-copy {padding: 13px 15px 16px;}
  .ui-pop .atlas-copy h3 {font-size: 19px;}
  .ui-pop.ui-route-food #main {grid-template-columns: minmax(0, 1.5fr) minmax(255px, 1fr); gap: 20px;}
  .ui-pop .food-day {padding: 15px;}
  .ui-pop .food-day h3 {font-size: 18px; flex-wrap: wrap;}
  .ui-pop .food-day h3 .tiny {text-align: left;}
  .ui-pop .menu-meal {grid-template-columns: 1fr; gap: 0;}
  .ui-pop .menu-meal > span {padding-top: 5px; font-size: 8px;}
  .ui-pop .menu-meal .exercise-link {font-size: 10px;}
  .ui-pop .account-grid {grid-template-columns: 1fr;}
  .ui-pop .account-stack {grid-template-columns: repeat(2, minmax(0, 1fr));}
  .ui-pop .workout-list {grid-template-columns: 1fr;}
}

@media (max-width: 780px) {
  .ui-pop .shell > aside nav {gap: 3px; padding: 7px;}
  .ui-pop .shell > aside nav a {padding: 8px 4px; gap: 5px;}
  .ui-pop .shell > aside nav a > span {font-size: 10px;}
  .ui-pop .program-options {grid-template-columns: repeat(2, minmax(0, 1fr));}
  .ui-pop .ui-session-copy h2 {font-size: 39px;}
  .ui-pop .ui-session-copy {padding: 25px 22px;}
  .ui-pop .ui-session-copy .btn:not(.primary) {border: 0; padding: 6px 0;}
  .ui-pop .ui-session-art {border-radius: 67px 0 0 0;}
  .ui-pop .plan-calendar .calendar {grid-template-columns: repeat(4, minmax(0, 1fr));}
  .ui-pop .plan-calendar .day {min-height: 78px;}
  .ui-pop .plan-calendar .day b {font-size: 10px;}
  .ui-pop .program-features {grid-template-columns: 1fr; gap: 8px;}
  .ui-pop .atlas-grid {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;}
  .ui-pop.ui-route-food #main {grid-template-columns: 1fr;}
  .ui-pop.ui-route-food #main > :is(.food-menu, .section:has(#shopping)) {grid-column: 1;}
  .ui-pop .menu-meal {grid-template-columns: 55px minmax(0, 1fr); gap: 8px;}
  .ui-pop .menu-meal > span {padding-top: 13px;}
  .ui-pop .menu-meal .exercise-link {font-size: 12px;}
  .ui-pop .food-day h3 {flex-wrap: nowrap; font-size: 21px;}
  .ui-pop .food-day h3 .tiny {text-align: right;}
  .ui-pop.ui-route-food #main > .section:has(#shopping) {transform: none;}
  .ui-pop .shop-grid {grid-template-columns: repeat(2, minmax(0, 1fr));}
}

@media (max-width: 720px), (max-width: 950px) and (max-height: 500px) {
  body.ui-pop {--mobile-nav-height: 76px; padding-bottom: calc(90px + var(--mobile-safe-bottom, 0px));}
  .ui-pop > header {height: calc(73px + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) max(17px, env(safe-area-inset-right, 0px)) 0 max(17px, env(safe-area-inset-left, 0px)); gap: 9px;}
  .ui-pop .brand {font-size: 23px; letter-spacing: -1.4px; gap: 3px;}
  .ui-pop .brand em {font-size: 11px; margin-left: 1px;}
  .ui-pop .brand-icon {width: 31px; height: 31px; font-size: 18px; margin-right: 4px;}
  .ui-pop .header-account {font-size: 10px; padding: 8px 12px; max-width: 88px; flex: 0 1 auto; min-height: 44px;}
  .ui-pop .print-link {display: none;}
  .ui-pop .shell > aside {position: fixed; inset: auto 0 0; z-index: 16; top: auto; width: 100%; padding: 0 5px var(--mobile-safe-bottom, 0px); background: var(--paper); border-top: 2px solid var(--ink); backdrop-filter: none;}
  .ui-pop .shell > aside nav {display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); padding: 7px 0; margin: 0; gap: 2px; background: var(--paper); border: 0; border-radius: 0;}
  .ui-pop .shell > aside nav a {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-height: 58px; padding: 7px 0; border-radius: 8px; border-width: 1px; transform: none;}
  .ui-pop .shell > aside nav a > span:not(.nav-icon) {font-size: 9px; font-weight: 800; line-height: 1.2; white-space: nowrap;}
  .ui-pop .shell > aside nav a .nav-icon {font-size: 20px !important; min-width: 0;}
  .ui-pop .shell > aside nav a.active {background: var(--pop-blue); border-color: var(--ink); box-shadow: 2px 2px 0 var(--ink); transform: rotate(-2deg);}
  .ui-pop .shell > aside nav a:hover {transform: none;}
  .ui-pop #main {padding: 25px max(17px, env(safe-area-inset-right, 0px)) 35px max(17px, env(safe-area-inset-left, 0px));}
  .ui-pop .page-head {margin: 0 0 24px;}
  .ui-pop :is(.page-head h1, .ui-plan-heading h1) {font-size: 47px; font-weight: 900; line-height: 1.02; letter-spacing: -2.7px; margin: 12px 0 9px;}
  .ui-pop .page-head .lead {font-size: 12px; line-height: 1.6;}
  .ui-pop h2 {font-size: 23px; letter-spacing: -.9px;}
  .ui-pop h3 {font-size: 17px;}
  .ui-pop .eyebrow {font-size: 8px; letter-spacing: 1px;}
  .ui-pop .btn {font-size: 11px; min-height: 44px; padding: 11px 14px;}
  .ui-pop .panel {padding: 20px;}
  .ui-pop.ui-route-plan #main {grid-template-columns: 1fr; gap: 20px;}
  .ui-pop .ui-plan-heading {display: block;}
  .ui-pop .ui-plan-heading .lead {font-size: 11px; max-width: none;}
  .ui-pop .program-picker {padding: 13px; gap: 10px; border-radius: 13px;}
  .ui-pop .program-options {gap: 8px;}
  .ui-pop .program-option {min-height: 69px; padding: 9px 10px; gap: 4px; border-radius: 8px;}
  .ui-pop .program-option b {font-size: 10px; line-height: 1.3;}
  .ui-pop .program-option span {font-size: 8px; line-height: 1.35;}
  .ui-pop .ui-session-summary {grid-template-columns: minmax(0, 1fr); min-height: 0; border-radius: 20px;}
  .ui-pop .ui-session-copy {padding: 25px 22px 27px;}
  .ui-pop .ui-session-copy .eyebrow {font-size: 8px; margin-bottom: 19px;}
  .ui-pop .ui-session-copy h2 {font-size: 39px; letter-spacing: -2px; line-height: 1.05; margin-bottom: 15px; max-width: none;}
  .ui-pop .ui-session-meta {font-size: 10px; line-height: 1.7; margin-bottom: 20px;}
  .ui-pop .ui-session-copy .button-row {width: 100%; gap: 9px;}
  .ui-pop .ui-session-copy .btn.primary {font-size: 11px; min-height: 47px; padding: 12px 14px;}
  .ui-pop .ui-session-copy .btn:not(.primary) {font-size: 10px; border: 0; padding: 8px 0;}
  .ui-pop .ui-session-art {border-left: 0; border-top: 2px solid var(--ink); border-radius: 65px 0 0 0; min-height: 245px; height: 245px; padding: 12px 17px 16px;}
  .ui-pop .ui-session-visual {height: 184px; width: 100%;}
  .ui-pop .ui-session-art > span {font-size: 9px; padding: 6px 12px;}
  .ui-pop .ui-session-art::after {top: 25px; right: 23px; width: 38px; height: 38px;}
  .ui-pop .ui-session-index {top: auto; bottom: 197px; right: 18px; font-size: 8px; padding: 7px 10px;}
  .ui-pop .plan-calendar {padding: 18px 16px; border-radius: 16px;}
  .ui-pop .plan-calendar > h2 {font-size: 22px; margin-bottom: 15px;}
  .ui-pop .plan-calendar .calendar {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; overflow: visible; margin: 0; padding: 0;}
  .ui-pop .plan-calendar .day {min-height: 82px; padding: 12px; gap: 8px; border-radius: 9px;}
  .ui-pop .plan-calendar .day > span {font-size: 9px;}
  .ui-pop .plan-calendar .day b {font-size: 11px; line-height: 1.3;}
  .ui-pop .plan-calendar .day small {font-size: 8px;}
  .ui-pop .plan-calendar .day:last-child {grid-column: 1 / -1; min-height: 67px;}
  .ui-pop .program-hero-copy {padding: 24px 21px; grid-template-columns: 1fr; gap: 12px;}
  .ui-pop .program-hero-copy > :is(.eyebrow, h1, .program-mantra, .program-goal, .program-metrics, .program-cycle) {grid-column: 1; grid-row: auto;}
  .ui-pop .program-hero .eyebrow {font-size: 8px; padding-right: 25px;}
  .ui-pop .program-hero h1 {font-size: 35px; letter-spacing: -1.7px; max-width: 245px;}
  .ui-pop .program-mantra {font-size: 11px; margin-top: 2px; padding-right: 0;}
  .ui-pop .program-hero .program-goal {font-size: 11px; line-height: 1.7; max-width: none;}
  .ui-pop .program-metrics {gap: 23px; margin-top: 4px; padding-right: 0; font-size: 9px;}
  .ui-pop .program-metrics b {font-size: 24px;}
  .ui-pop .program-cycle {padding-top: 12px; border-top: 1px solid #18214438; gap: 14px; font-size: 9px;}
  .ui-pop .program-cycle select {font-size: 16px; max-width: 165px;}
  .ui-pop .program-cycle label {font-size: 9px;}
  .ui-pop .program-seal {top: 23px; right: 22px; font-size: 22px;}
  .ui-pop .program-features {gap: 8px;}
  .ui-pop .program-features > span {font-size: 10px; padding: 12px 14px; border-radius: 8px;}
  .ui-pop .plan-phase-strip {display: grid; gap: 7px; padding: 14px; font-size: 10px;}
  .ui-pop .steel-session > .section-head {display: flex; flex-direction: column; align-items: stretch; gap: 14px;}
  .ui-pop .steel-session > .section-head h2 {font-size: 25px; letter-spacing: -1px; margin-top: 8px;}
  .ui-pop .steel-session > .section-head .btn {width: 100%;}
  .ui-pop .steel-exercises {grid-template-columns: 1fr; gap: 12px; margin: 20px 0;}
  .ui-pop .steel-exercise {padding: 13px;}
  .ui-pop .steel-exercise-open {gap: 13px;}
  .ui-pop .steel-preview {width: 74px; height: 74px;}
  .ui-pop .steel-exercise-copy b {font-size: 14px; line-height: 1.3;}
  .ui-pop .steel-exercise-copy small {font-size: 8px;}
  .ui-pop .steel-exercise-copy > span {font-size: 9px;}
  .ui-pop .steel-prescription {padding-top: 11px; gap: 5px 8px;}
  .ui-pop .steel-prescription > b {font-size: 15px;}
  .ui-pop .steel-prescription span {font-size: 9px;}
  .ui-pop .exercise-row {grid-template-columns: 22px minmax(0, 1fr);}
  .ui-pop .exercise-row .dose {grid-column: 2; font-size: 10px; max-width: none; text-align: left;}
  .ui-pop .exercise-link {font-size: 12px;}
  .ui-pop .filterbar {gap: 7px; margin-bottom: 23px;}
  .ui-pop .filterbar .btn {font-size: 10px; padding: 10px 12px; min-height: 44px;}
  .ui-pop .atlas-grid {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px;}
  .ui-pop .atlas-card {border-radius: 14px; box-shadow: 2px 2px 0 var(--ink);}
  .ui-pop .atlas-art {aspect-ratio: 1; padding: 7px 3px 0;}
  .ui-pop .atlas-copy {padding: 10px 11px 13px;}
  .ui-pop .atlas-copy .tiny {font-size: 7px; letter-spacing: 0; line-height: 1.4; margin-bottom: 8px;}
  .ui-pop .atlas-copy h3 {font-size: 16px; letter-spacing: -.6px; line-height: 1.15; min-height: 37px; margin-bottom: 14px;}
  .ui-pop .atlas-copy .btn {font-size: 9px; padding: 10px 8px; min-height: 44px;}
  .ui-pop.ui-route-food #main {gap: 24px;}
  .ui-pop .food-menu > .section-head {gap: 10px; flex-wrap: wrap; align-items: center;}
  .ui-pop .food-menu > .section-head h2 {font-size: 23px;}
  .ui-pop .food-menu > .section-head .pill {font-size: 8px; margin: 0;}
  .ui-pop .food-menu > .tiny {font-size: 9px; margin-top: 12px;}
  .ui-pop .menu-grid {grid-template-columns: 1fr; gap: 14px;}
  .ui-pop .food-day {padding: 19px; border-radius: 15px;}
  .ui-pop .food-day h3 {font-size: 25px; letter-spacing: -1px; margin-bottom: 14px;}
  .ui-pop .food-day h3 .tiny {font-size: 9px;}
  .ui-pop .menu-meal {grid-template-columns: 59px minmax(0, 1fr); gap: 8px; padding: 4px 0;}
  .ui-pop .menu-meal > span {font-size: 9px; padding-top: 14px;}
  .ui-pop .menu-meal .exercise-link {font-size: 12px; line-height: 1.5; min-height: 44px;}
  .ui-pop.ui-route-food #main > .section:has(#shopping) {padding: 23px 21px;}
  .ui-pop.ui-route-food .section:has(#shopping) h2 {font-size: 37px; letter-spacing: -2px;}
  .ui-pop .shop-grid {grid-template-columns: 1fr; gap: 22px;}
  .ui-pop .shop-group h3 {font-size: 16px;}
  .ui-pop .shop-row {font-size: 12px; padding: 11px 0;}
  .ui-pop .shop-row small {font-size: 10px;}
  .ui-pop .food-reference {padding: 14px 18px;}
  .ui-pop .account-grid, .ui-pop .account-stack {grid-template-columns: 1fr; gap: 18px;}
  .ui-pop .auth-benefits {padding: 23px;}
  .ui-pop .auth-benefits h2 {font-size: 33px;}
  .ui-pop .ui-settings {padding: 20px;}
  .ui-pop .ui-design-options {gap: 11px;}
  .ui-pop .ui-design-option {padding: 10px;}
  .ui-pop .ui-design-option b {font-size: 12px;}
  .ui-pop .ui-design-option p {font-size: 9px;}
  .ui-pop .workout-overview-copy h2 {font-size: 28px;}
  .ui-pop .workout-list {grid-template-columns: 1fr; gap: 11px;}
  .ui-pop .workout-preview {width: 65px; height: 65px;}
  .ui-pop .workout-open {padding: 12px 8px; gap: 10px;}
  .ui-pop .workout-item-copy h3 {font-size: 13px;}
  .ui-pop .workout-item-copy p {font-size: 9px;}
  .ui-pop .workout-row-check {margin-right: 9px;}
  .ui-pop .workout-footer {bottom: calc(var(--mobile-nav-height, 76px) + var(--mobile-safe-bottom, 0px) + 10px);}
  .ui-pop .rig-stage {top: 8px; border-radius: 14px;}
  .ui-pop .rig-cameras .btn {font-size: 10px; padding: 8px 5px; min-height: 44px;}
  .ui-pop .rig-keys .btn {font-size: 10px; min-height: 65px; padding: 8px 6px;}
  .ui-pop .rig-character-controls .btn {font-size: 11px;}
  .ui-pop .rig-controls .btn {font-size: 11px; padding: 10px 11px;}
  .ui-pop .rig-controls select {font-size: 16px;}
  .ui-pop dialog {width: calc(100vw - 16px); max-height: calc(100dvh - 16px); border-radius: 16px; box-shadow: none;}
  .ui-pop .dialog-top {padding: 10px 13px;}
  .ui-pop .dialog-top > span {font-size: 8px; max-width: calc(100% - 60px);}
  .ui-pop #dialog-content {padding: 19px 16px;}
}

@media (max-width: 350px) {
  .ui-pop .brand {font-size: 21px; letter-spacing: -1.3px;}
  .ui-pop .brand em {font-size: 10px;}
  .ui-pop .brand-icon {width: 28px; height: 28px; margin-right: 2px;}
  .ui-pop .header-account {max-width: 72px; padding: 8px 9px; font-size: 9px;}
  .ui-pop #main {padding-left: 14px; padding-right: 14px;}
  .ui-pop .shell > aside nav a > span:not(.nav-icon) {font-size: 8px;}
  .ui-pop :is(.page-head h1, .ui-plan-heading h1) {font-size: 41px; letter-spacing: -2.2px;}
  .ui-pop .ui-session-copy {padding: 23px 18px;}
  .ui-pop .ui-session-copy h2 {font-size: 35px; letter-spacing: -1.7px;}
  .ui-pop .ui-session-copy .btn.primary {font-size: 10px;}
  .ui-pop .program-option b {font-size: 9px;}
  .ui-pop .program-option span {font-size: 7px;}
  .ui-pop .atlas-grid {grid-template-columns: 1fr; gap: 17px;}
  .ui-pop .atlas-art {aspect-ratio: 1.3;}
  .ui-pop .atlas-copy h3 {font-size: 23px; min-height: 0;}
  .ui-pop .atlas-copy .tiny {font-size: 8px;}
  .ui-pop .atlas-copy .btn {font-size: 11px;}
  .ui-pop .ui-design-options {grid-template-columns: 1fr;}
}

@media print {
  .ui-pop .shell > aside, .ui-pop > header {display: none;}
  body.ui-pop {padding-bottom: 0; color: #182144; background: white;}
  .ui-pop #main {display: block; padding: 0;}
  .ui-pop .program-cover {display: none;}
  .ui-pop .ui-session-summary {break-inside: avoid; box-shadow: none;}
  .ui-pop.ui-route-food #main {display: block;}
}