.course-return:not([hidden]) {
  margin: 1rem auto;
  /* Matches the drawers and the idea step, since the banner now sits beside them. */
  width: min(100% - 3rem, 76rem);
  /* Land fully below the sticky header (about 102px on desktop). */
  scroll-margin-top: 7rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--control-edge);
  border-left: 3px solid var(--control-edge);
  background: var(--bg);
  color: var(--text);
  overflow-wrap: anywhere;
}
.course-return p { margin: .5rem 0; max-width: 75ch; }
@media (max-width: 42rem) {
  /* Phone drawers run nearly edge to edge; a 3rem inset left the banner narrower than its neighbours. */
  .course-return:not([hidden]) { width: calc(100% - 1rem); }
}
.course-return button { min-height: 2.9rem; padding: .5rem .8rem; }
.detail-task-action { margin: 1rem 0; padding: 1rem; border: 1px solid var(--control-edge); }
.detail-task-action p { margin: .65rem 0 0; font-size: .9rem; }

* {
  box-sizing: border-box;
}

/* Keep assistive labels available without adding a visible layout column. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

html {
  scroll-behavior: smooth;
  /* The desktop header is about 102px; 5.5rem (88px) left targets 14px under it. */
  scroll-padding-top: 7rem;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  min-width: 20rem;
  margin: 0;
  font-size: 1rem;
}

/* Paper is a separate whole-course mode. The dark course never mixes in white bands. */
a {
  color: inherit;
}

button,
input,
select,
textarea {
  font: inherit;
}

/* The interface stays architectural and square; the soft shapes belong to the art. */
button,
input,
select,
textarea,
summary,
.snapshot-link,
.starter-progress li span,
.guide-intro > span,
.guided-check,
.legend-dot::before,
.starter-track-choice > span::before {
  border-radius: 0;
}

button,
select {
  cursor: pointer;
}

/* The focus ring is theme.css's (3px, offset 3px, sky on night and deep sky on paper). */

.skip-link {
  /* Absolute, not fixed: nothing on the page is position: fixed (the header is the only sticky thing). */
  position: absolute;
  z-index: 100;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.65rem 0.85rem;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: translateY(0);
}

.site-header {
  position: sticky;
  z-index: 20;
  top: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 4.65rem;
  padding: 0 max(16px, calc((100% - 1312px) / 2));
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  min-width: 0;
  min-height: 2.75rem;
  text-decoration: none;
}

.wordmark strong,
.wordmark small {
  display: block;
}

.wordmark strong {
  white-space: nowrap;
}

.wordmark strong em {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.14rem 0.32rem;
  border: var(--ol-thin) solid var(--control-edge);
  color: var(--text);
  font: 700 max(12px, 0.55rem)/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  vertical-align: 0.12rem;
}

.wordmark small {
  overflow: hidden;
  max-width: min(46vw, 34rem);
  color: var(--text-dim);
  font-size: 0.75rem;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.header-explore,
.header-tools > summary {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  font-size: 0.95rem;
  gap: 0.4rem;
}

.header-tools {
  position: relative;
}

.header-tools > summary {
  gap: 0.4rem;
  cursor: pointer;
  list-style: none;
}

.header-tools > summary::-webkit-details-marker {
  display: none;
}

.header-tools > summary::after {
  content: "+";
  color: var(--text-dim);
}

.header-tools[open] > summary::after {
  content: "−";
}

.suite-nav {
  position: absolute;
  top: calc(100% + 0.45rem);
  right: 0;
  display: grid;
  width: 19rem;
  padding: 8px;
}

.suite-nav a {
  display: grid;
  gap: 0.12rem;
  min-height: 2.75rem;
  padding: 0.65rem 0.75rem;
  font-size: 0.88rem;
  text-decoration: none;
  text-align: left;
}

.suite-nav a strong,
.suite-nav a small {
  display: block;
}

.suite-nav a small {
  font-size: 0.8rem;
  line-height: 1.35;
}

/* One icon column keeps long names and descriptions aligned in both themes. */
.suite-nav a strong {
  display: flex;
  align-items: center;
  gap: .6rem;
}
.suite-nav strong > [data-ui-icon] {
  width: 1.5rem;
  height: 1.5rem;
  flex: 0 0 1.5rem;
}
.suite-nav a > small {
  padding-inline-start: 2.1rem;
}

main {
  overflow-x: clip;
}

/* Beginner entrance: one visible decision, with every expert layer folded below. */
.starter {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(28rem, 0.95fr) minmax(20rem, 0.65fr);
  gap: clamp(1.5rem, 5vw, 7rem);
  align-items: stretch;
  width: min(100% - clamp(2rem, 6vw, 6.5rem), 92rem);
  min-height: calc(100svh - 4.65rem);
  margin-inline: auto;
  padding: clamp(1.4rem, 3vw, 3rem) 0;
}

.starter::before {
  position: absolute;
  z-index: -1;
  top: 7%;
  left: -12%;
  width: 38rem;
  height: 38rem;
  border: 1px solid var(--divider);
  content: "";
}

.starter-panel {
  position: relative;
  z-index: 2;
  align-self: stretch;
  min-width: 0;
  padding: clamp(1rem, 2vw, 1.65rem);
  border: 1px solid var(--divider);
  border-top: var(--ol) solid var(--edge);
  border-left: var(--ol) solid var(--edge);
  background: var(--surface);
  box-shadow: var(--pop) var(--pop) 0 var(--edge);
}

.starter-progress {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.35rem;
  margin: 0;
  padding: 0 0 1rem;
  border-bottom: 1px solid var(--divider);
  list-style: none;
}

.starter-progress li {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.42rem;
  color: var(--text-dim);
  font-size: 0.78rem;
}

.starter-progress li span {
  display: grid;
  width: 1.65rem;
  height: 1.65rem;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--divider);
  font: 700 max(12px, 0.7rem)/1 var(--mono);
}

.starter-progress li[aria-current="step"] {
  color: var(--text);
}

.starter-progress li[aria-current="step"] span {
  border-color: var(--edge);
  color: var(--on-picked);
  background: var(--picked);
}

.starter-progress li[data-complete] {
  color: var(--text-dim);
}

.starter-progress li[data-complete] span {
  border-color: var(--control-edge);
  color: var(--text-dim);
  background: transparent;
}

.starter-step {
  padding: clamp(1.2rem, 3vw, 2.25rem) clamp(0rem, 1vw, 0.6rem) 0.4rem;
}

.guide-intro {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: 0.65rem;
  align-items: center;
  margin-bottom: 1.1rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--divider);
  border-left: 0.3rem solid var(--divider);
  background: transparent;
}

.guide-intro > span {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border: 1px solid var(--text);
  color: var(--text);
}

.guide-intro p {
  margin: 0;
  color: var(--text);
  font-size: 0.88rem;
  line-height: 1.42;
}

.guide-intro strong {
  color: var(--text);
}

.starter-kicker {
  margin: 0 0 0.45rem;
  color: var(--text-dim);
  font: 700 max(12px, 0.72rem)/1.3 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.starter-step h1 {
  max-width: 15ch;
  font-size: clamp(2.45rem, 5vw, 4.7rem);
}

.starter-context-heading {
  max-width: 19ch !important;
}

.starter-context-heading > span {
  display: block;
  overflow: hidden;
  margin: 0 0 0.45rem;
  color: var(--text);
  font-size: clamp(0.88rem, 1.6vw, 1.15rem);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.starter-context-heading > strong {
  display: block;
  font: inherit;
}

.starter-help {
  margin: 0.8rem 0 1rem;
  color: var(--text-dim);
  font-size: 1.05rem;
}

.starter-field {
  display: grid;
  gap: 0.45rem;
}

.starter-field > span {
  color: var(--text-dim);
  font-size: 0.85rem;
  font-weight: 700;
}

.starter-field textarea,
.starter-field input {
  width: 100%;
  min-height: 52px;
  padding: 14px 18px;
  font-size: 1.05rem;
  line-height: 1.45;
  resize: vertical;
}

.starter-field textarea {
  min-height: 6.4rem;
}

.starter-actions,
.guided-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
  margin-top: 1rem;
}

.primary-action,
.quiet-action,
.back-action,
.app-action,
.copy-inline {
  display: inline-flex;
  min-height: 3rem;
  align-items: center;
  justify-content: center;
  padding: 0 1.25rem;
  font-size: 1rem;
  gap: 0.5em;
}

.primary-action {
  padding: 0 24px;
}

.back-action {
  min-height: 44px;
  padding: 0 0.25rem;
}

.starter-safety,
.device-note {
  margin: 0.75rem 0 0;
  color: var(--text-dim);
  font-size: 0.82rem;
}

.starter-safety span {
  margin-right: 0.35rem;
  color: var(--text-dim);
}

.visual-pack-alert {
  margin: 0.65rem 0 0;
  padding: 0.6rem 0.7rem;
  font-size: 0.84rem;
}

.starter-track-fieldset {
  margin: 0.9rem 0 0;
  padding: 0;
  border: 0;
}

.starter-track-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}

.starter-track-choice {
  position: relative;
  display: block;
  min-width: 0;
  cursor: pointer;
}

.starter-track-choice input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.starter-track-choice > span {
  position: relative;
  display: block;
  min-height: 6.8rem;
  padding: 2.15rem 0.7rem 0.7rem;
  border: 1px solid var(--divider);
  background: var(--surface);
}

.starter-track-choice > span::before {
  position: absolute;
  top: 0.62rem;
  left: 0.7rem;
  width: 1rem;
  height: 1rem;
  border: 2px solid var(--control-edge);
  border-radius: 0;
  content: "";
  transform: rotate(45deg);
  opacity: 0.7;
}

.starter-track-choice:nth-child(3n + 2) > span::before {
  border-color: var(--text);
  border-radius: 0;
}

.starter-track-choice:nth-child(3n) > span::before {
  border-color: var(--text);
  border-radius: 0;
}

.starter-track-choice strong,
.starter-track-choice small {
  display: block;
}

.starter-track-choice strong {
  font-size: 0.9rem;
}

.starter-track-choice small {
  margin-top: 0.22rem;
  color: var(--text-dim);
  font-size: 0.75rem;
  line-height: 1.35;
}

.starter-track-choice input:checked + span {
  border-color: var(--control-edge);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--control-edge);
}

.starter-track-choice input:focus-visible + span {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.starter-ready blockquote {
  margin: 1rem 0;
  padding: 0.8rem 0.9rem;
  border-left: 3px solid var(--control-edge);
  color: var(--text);
  background: transparent;
}

.starter-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}

.starter-summary span {
  padding: 0.65rem;
  border: 1px solid var(--divider);
  color: var(--text);
  background: var(--surface);
}

.starter-summary b {
  display: block;
  margin-bottom: 0.15rem;
  color: var(--text-dim);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.human-control-note {
  margin-top: 0.65rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--divider);
  border-left: 3px solid var(--text);
  background: transparent;
}

.human-control-note strong {
  color: var(--text);
}

.human-control-note p {
  margin: 0.2rem 0 0;
  color: var(--text-dim);
  font-size: 0.86rem;
}

.starter-note-details,
.smart-details {
  margin-top: 0.7rem;
  border: 1px solid var(--divider);
  background: var(--surface);
}

.starter-note-details > summary,
.smart-details > summary {
  min-height: 2.8rem;
  padding: 0.65rem 0.8rem;
  cursor: pointer;
  color: var(--text-dim);
  font-size: 0.85rem;
}

.starter-note-details pre {
  margin: 0;
  padding: 0.85rem;
  overflow-x: auto;
  border-top: 1px solid var(--divider);
  color: var(--text-dim);
  font: 600 0.95rem/1.45 var(--display);
  white-space: pre-wrap;
}

.copy-status {
  min-height: 1.3rem;
  margin: 0.45rem 0 0;
  color: var(--text-dim);
  font-size: 0.82rem;
}

.guided-path {
  width: min(100% - clamp(2rem, 6vw, 6.5rem), 72rem);
  margin: 0 auto clamp(2.5rem, 7vw, 6rem);
  padding-top: clamp(1rem, 3vw, 2.5rem);
  scroll-margin-top: 5.5rem;
}

.guided-path[hidden] {
  display: none;
}

.guided-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
}

.guided-head h2 {
  margin: 0;
  font-size: clamp(1.8rem, 4vw, 3.4rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
}

.guided-head > p {
  flex: 0 0 auto;
  margin: 0 0 0.3rem;
  color: var(--text-dim);
  font: 700 0.82rem/1.3 var(--mono);
}

.guided-meter {
  height: 12px;
  margin-top: 1rem;
  overflow: hidden;
  border: var(--ol-thin) solid var(--control-edge);
  border-radius: var(--pill);
  background: var(--surface);
}

.guided-meter span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--picked);
  transition: width 240ms ease;
}

.guided-card {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(18rem, 0.75fr);
  gap: 0;
  margin-top: 0.65rem;
  overflow: hidden;
}

.guided-main,
.guided-finish,
.smart-details {
  margin: 0;
  background: transparent;
}

.guided-main,
.guided-finish {
  padding: clamp(1.2rem, 4vw, 2.4rem);
}

.guided-surface {
  margin: 0 0 0.5rem;
  color: var(--text-dim);
  font: 700 max(12px, 0.72rem)/1.3 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.guided-working-on {
  margin: 0 0 0.8rem;
  padding: 0.45rem 0.55rem;
  border-left: 2px solid var(--text);
  color: var(--text-dim);
  background: transparent;
  font-size: 0.82rem;
  font-weight: 700;
}

.guided-main h3,
.guided-finish h3 {
  max-width: 19ch;
  margin: 0;
  font-size: clamp(1.8rem, 4vw, 3.35rem);
  line-height: 1.03;
  letter-spacing: -0.03em;
}

.guided-instruction {
  max-width: 38rem;
  margin: 1rem 0;
  color: var(--text);
  font-size: 1.08rem;
}

.guided-example {
  max-width: 38rem;
  margin: 0;
  padding: 0.75rem;
  border-left: 2px solid var(--text);
  color: var(--text-dim);
  background: transparent;
  font-size: 0.9rem;
}

.guided-example b {
  display: block;
  margin-bottom: 0.2rem;
  color: var(--text);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.copy-inline {
  margin-top: 0.7rem;
}

.evidence-only-note {
  max-width: 22rem;
  padding: 0.65rem 0.75rem;
  border: 1px dashed var(--text);
  color: var(--text-dim);
  font-size: 0.82rem;
}

.smart-details {
  border: 0;
  border-left: 2px solid var(--divider);
}

.smart-details > summary {
  color: var(--text-dim);
  font-weight: 700;
}

.smart-details > div {
  padding: 0.1rem 1rem 1rem;
}

.smart-details h4 {
  margin: 0.85rem 0 0;
  color: var(--text);
  font-size: 0.78rem;
}

.smart-details p {
  margin: 0.18rem 0 0;
  color: var(--text-dim);
  font-size: 0.82rem;
}

.plain-status {
  display: inline-block;
  padding: 0.28rem 0.42rem;
  border: 1px solid var(--control-edge);
  color: var(--text-dim);
  font-size: 0.72rem;
}

.guided-check {
  display: grid;
  width: 3.2rem;
  height: 3.2rem;
  margin-bottom: 1rem;
  place-items: center;
  border-radius: 50%;
  color: var(--on-picked);
  background: var(--picked);
  font-size: 1.5rem;
}

.guided-finish {
  grid-column: 1 / -1;
}

.guided-honesty {
  margin: 0.7rem 0 0;
  color: var(--text-dim);
  font-size: 0.76rem;
}

.depth-drawer {
  width: min(100% - clamp(1rem, 4vw, 4rem), 112rem);
  margin: 0.65rem auto;
  scroll-margin-top: 5.25rem;
}

/* A picture with no words in it: a Desk screenshot here showed a builder sentence through the band. */
.depth-drawer > summary {
  position: relative;
  display: grid;
  grid-template-columns: minmax(9rem, 0.5fr) minmax(16rem, 0.9fr) minmax(18rem, 1.4fr) 2rem;
  gap: 1rem;
  align-items: center;
  min-height: 64px;
  padding: 16px 20px;
  cursor: pointer;
  list-style: none;
}

.depth-drawer button,
.depth-drawer a,
.depth-drawer input,
.depth-drawer select {
  min-height: 2.75rem;
}

.depth-drawer > summary::-webkit-details-marker {
  display: none;
}

.depth-drawer > summary::after {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  content: "";
}

.depth-drawer > summary span {
  font-size: 0.75rem;
  font-weight: 700;
}

.depth-drawer > summary strong {
  font-size: 1.02rem;
}

.depth-drawer > summary small {
  font-size: 0.86rem;
}

.course-constellation {
  display: grid;
  grid-template-columns: minmax(18rem, 0.7fr) minmax(16rem, 0.3fr);
  gap: 1rem;
  align-items: center;
  margin: 2rem 0 0;
  padding: 1rem;
  border: var(--ol-thin) solid var(--edge);
  background: var(--bg);
  border-radius: var(--r);
}

.course-constellation picture,
.course-constellation img {
  display: block;
  width: 100%;
}

.course-constellation img {
  height: auto;
}

.course-constellation figcaption {
  max-width: 18ch;
  color: var(--text);
  font-size: clamp(1.05rem, 2vw, 1.5rem);
}

.eyebrow,
.kicker {
  margin: 0 0 0.65rem;
  color: var(--text-dim);
  font: 700 0.76rem/1.35 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.kicker {
  margin-bottom: 0.28rem;
  color: var(--text-dim);
  font-size: 0.7rem;
}

/* Never inside a lesson video's frame: the frame is drawn the same in the Lab, on its page and in a poster. */
:where(h1, h2, h3, p):where(:not(.lesson-frame *)) {
  text-wrap: pretty;
}

h1 {
  max-width: 17ch;
  margin: 0;
  font-size: clamp(2.3rem, 4vw, 4.7rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.03em;
}

.course-promise {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.35rem;
}

.course-promise span {
  padding: 0.35rem 0.55rem;
  border-left: 2px solid var(--control-edge);
  color: var(--text-dim);
  background: transparent;
  font: 700 max(12px, 0.75rem)/1.35 var(--mono);
}

.panel-heading,
.section-title-row,
.portfolio-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
}

.panel-heading h2 {
  margin: 0;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  font-weight: 600;
  line-height: 1.25;
}

.panel-heading.compact {
  align-items: flex-end;
}

.text-button {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0;
  font: 700 1rem/1.4 var(--display);
  cursor: pointer;
}

.section-shell {
  width: min(100% - clamp(2rem, 6vw, 6.5rem), 112rem);
  margin-inline: auto;
  padding: clamp(4rem, 8vw, 7.5rem) 0;
}

.section-title-row h2,
.portfolio-heading h2,
.snapshot-board h2 {
  max-width: 24ch;
  margin: 0;
  font-size: clamp(1.6rem, 3.4vw, 2.2rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.vertical-portfolio {
  border-bottom: 1px solid var(--divider);
}

.vertical-intro {
  display: grid;
  grid-template-columns: minmax(20rem, 1.25fr) minmax(18rem, 0.75fr);
  gap: clamp(1.5rem, 5vw, 6rem);
  align-items: end;
}

.vertical-intro h2 {
  max-width: 22ch;
  margin: 0;
  font-size: clamp(1.6rem, 3.4vw, 2.2rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.vertical-intro > p {
  max-width: 45rem;
  margin: 0;
  color: var(--text-dim);
}

.vertical-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
  margin-top: 2.4rem;
}

.loading-copy {
  grid-column: 1 / -1;
  color: var(--text-dim);
}

.vertical-card {
  min-width: 0;
  overflow: hidden;
}

.vertical-card-select {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 28rem;
  padding: 1rem;
  border: 0;
  color: var(--text);
  background: transparent;
  text-align: left;
}

.vertical-meta,
.vertical-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  color: var(--text-dim);
  font: 700 max(12px, 0.68rem)/1.3 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.vertical-title {
  display: block;
  margin: 1.35rem 0 0;
  font-size: clamp(1.35rem, 2vw, 2rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.03em;
}

/* Keep studio pictures on the same baseline when neighbouring names wrap. */
html:not(.capture-requested) #course-types-drawer .vertical-meta {
  min-height: 2.6em;
}

html:not(.capture-requested) #course-types-drawer .vertical-title {
  min-height: 2.16em;
  font-size: clamp(1.35rem, 1.8vw, 1.8rem);
}

html:not(.capture-requested) #course-types-drawer .snapshot-thumb {
  flex-shrink: 0;
  border-width: 1px;
}

html:not(.capture-requested) #course-types-drawer .snapshot-thumb picture {
  height: clamp(7rem, 11vw, 8.5rem);
}

.vertical-case {
  display: block;
  margin: 0.8rem 0 1rem;
  color: var(--text-dim);
  font-size: 0.9rem;
  line-height: 1.5;
}

.vertical-surfaces {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.75rem;
}

.vertical-surfaces > span {
  padding: 0.24rem 0.38rem;
  border: var(--ol-thin) solid var(--control-edge);
  color: var(--text-dim);
  background: transparent;
  font: 700 max(12px, 0.63rem)/1.25 var(--mono);
  border-radius: var(--pill);
}

.vertical-aha,
.vertical-boundary {
  display: block;
  margin-top: 0.6rem;
  padding: 0.75rem;
  border-left: 2px solid var(--edge);
  background: transparent;
}

.vertical-boundary {
  border-left-color: var(--control-edge);
}

.vertical-aha b,
.vertical-aha > span,
.vertical-boundary b,
.vertical-boundary > span {
  display: block;
}

.vertical-aha b,
.vertical-boundary b {
  margin-bottom: 0.28rem;
  color: var(--text-dim);
  font: 700 max(12px, 0.68rem)/1.3 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.vertical-boundary b {
  color: var(--text-dim);
}

.vertical-aha > span,
.vertical-boundary > span {
  color: var(--text-dim);
  font-size: 0.79rem;
  line-height: 1.45;
}

.vertical-footer {
  margin-top: auto;
  padding-top: 1.2rem;
  color: var(--text-dim);
}

.vertical-footer span:last-child {
  color: var(--text-dim);
}

.story-deck {
  border-bottom: 1px solid var(--divider);
}

.story-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.4rem;
}

.story-tab {
  min-height: 46px;
  padding: 8px 16px;
  font-size: 0.95rem;
  line-height: 1.25;
}

.story-stage {
  display: grid;
  grid-template-columns: minmax(14rem, 0.8fr) minmax(20rem, 1.5fr) minmax(15rem, 0.75fr);
  gap: 0;
  margin-top: 2.2rem;
  border: var(--ol) solid var(--edge);
  background: var(--surface);
  box-shadow: var(--pop) var(--pop) 0 var(--edge);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.story-stage > div {
  min-height: 0;
  padding: clamp(1rem, 2.5vw, 1.5rem);
}

.story-stage > div + div {
  border-left: var(--ol-thin) solid var(--divider);
}

/* A story with no picture leaves no empty band. */
.story-stage > .story-visual:not(:has(*)) {
  display: none;
}

.story-code {
  display: grid;
  align-content: start;
  gap: 0.5rem;
}

.story-code span {
  color: var(--text-dim);
  font: 700 max(12px, 0.72rem)/1.3 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.story-code strong {
  display: block;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

/* (also inside a sheet, where h3 is otherwise a small kicker) */
.story-narrative h3, .lab-info-body .story-narrative h3 {
  max-width: 34ch;
  margin: 0;
  color: var(--text);
  font: 800 clamp(1.15rem, 1.8vw, 1.35rem)/1.25 var(--display);
  letter-spacing: -0.02em;
  text-transform: none;
}

.story-narrative h3 [data-ui-icon] {
  width: 1em;
  height: 1em;
}

.story-narrative p,
.story-question p {
  color: var(--text-dim);
}

.story-identities {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 1.25rem;
}

.story-identities span {
  padding: 3px 12px;
  border: var(--ol-thin) solid var(--control-edge);
  border-radius: var(--pill);
  color: var(--text-dim);
  font: 700 0.88rem/1.3 var(--display);
}

.story-question {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 0.6rem;
}

.story-question b {
  color: var(--text-dim);
  font: 700 max(12px, 0.72rem)/1.3 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.story-question p {
  margin: 0;
  color: var(--text);
  font-size: 1rem;
}

.portfolio {
  width: min(100% - clamp(2rem, 4vw, 4rem), 118rem);
  border-top: 1px solid var(--divider);
}

.portfolio-heading {
  align-items: end;
}

.portfolio-heading h2 {
  max-width: 26ch;
}

.portfolio-intro {
  max-width: 56ch;
  margin: 0.65rem 0 0;
  color: var(--text-dim);
  font-size: 1rem;
  line-height: 1.5;
}

.result-count {
  min-width: 11rem;
  margin: 0;
  padding-bottom: 0.35rem;
  color: var(--text-dim);
  font-size: 0.9rem;
  line-height: 1.5;
  text-align: right;
}

.portfolio-controls {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) auto;
  gap: 0.8rem;
  margin-top: 1.25rem;
  padding: 0;
}

.portfolio-controls label {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.35rem;
}

.portfolio-controls label > span {
  color: var(--text-dim);
  font-size: 0.9rem;
  line-height: 1.4;
}

.portfolio-more-filters {
  grid-column: 1 / -1;
  min-width: 0;
  padding-top: 0.7rem;
  border-top: 1px solid var(--divider);
}

.portfolio-more-filters > summary {
  cursor: pointer;
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.5;
}

.portfolio-more-filters > summary span {
  margin-left: 0.6rem;
  color: var(--text-dim);
  font-size: 0.85rem;
  overflow-wrap: anywhere;
}

.portfolio-extra-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
  padding-top: 0.8rem;
}

.portfolio-controls input,
.portfolio-controls select {
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  font-size: 1rem;
}

.reset-button {
  align-self: end;
  min-height: 44px;
  padding: 0 16px;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}

.portfolio-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(20rem, 0.75fr);
  gap: 1rem;
  margin-top: 1rem;
  align-items: start;
}

.portfolio-layout.is-empty {
  grid-template-columns: minmax(0, 1fr);
}

.workflow-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem 0.75rem;
}

.workflow-card {
  position: relative;
  display: flex;
  min-height: 12.2rem;
  flex-direction: column;
  width: 100%;
  padding: 18px;
  overflow: hidden;
  text-align: left;
}

/* Share natural row heights, so long titles never push one picture out of line. */
@supports (grid-template-rows: subgrid) {
  .workflow-card {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 5;
    row-gap: 0;
    min-width: 0;
  }

  .workflow-card > .workflow-meta { grid-row: 1; }
  .workflow-card > .workflow-card-title { grid-row: 2; }
  .workflow-card > .snapshot-thumb { grid-row: 3; }
  .workflow-card > .workflow-card-aha { grid-row: 4; }
  .workflow-card > .card-footer { grid-row: 5; }
}

.workflow-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  color: var(--text-dim);
  font: 700 max(12px, 0.69rem)/1.2 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.workflow-card-title {
  display: block;
  margin: 1.15rem 0 0;
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.workflow-card-aha {
  display: block;
  margin: 0.65rem 0 1rem;
  color: var(--text-dim);
  font-size: 0.875rem;
  line-height: 1.48;
}

.card-footer {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: auto;
}

.story-pips {
  display: flex;
  gap: 0.25rem;
}

.story-pips span {
  display: grid;
  width: 1.35rem;
  height: 1.35rem;
  place-items: center;
  border: 1px solid var(--divider);
  color: var(--text-dim);
  font: 700 max(12px, 0.65rem)/1 var(--mono);
}

.workflow-detail {
  position: sticky;
  top: 5.7rem;
  min-width: 0;
  overflow-wrap: anywhere;
  min-height: 36rem;
  max-height: calc(100svh - 6.6rem);
  padding: 20px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.detail-placeholder {
  max-width: 30ch;
  margin: 1rem;
  color: var(--text-dim);
}

.detail-head {
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--divider);
}


.detail-head h3 {
  margin: 0.7rem 0 0;
  font-size: clamp(1.35rem, 2.2vw, 2rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.detail-head p {
  margin: 0.65rem 0 0;
  color: var(--text-dim);
  font-size: 0.875rem;
}

.detail-chain {
  display: grid;
  gap: 0;
  margin-top: 0.8rem;
}

.detail-block {
  position: relative;
  padding: 0.82rem 0 0.9rem 1.2rem;
  border-left: 1px solid var(--control-edge);
}

.detail-block:last-child {
  border-left-color: transparent;
}

.detail-block b {
  display: block;
  color: var(--text-dim);
  font: 700 max(12px, 0.7rem)/1.2 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.detail-block p {
  margin: 0.32rem 0 0;
  color: var(--text-dim);
  font-size: 0.9rem;
  line-height: 1.52;
}

.detail-block.recovery {
  margin-top: 0.35rem;
  padding: 0.85rem;
  border: var(--ol-thin) dashed var(--text);
  background: transparent;
  border-radius: var(--r);
}

.detail-block.recovery::before {
  display: none;
}

.detail-block.recovery b {
  color: var(--text);
}

.detail-story-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 1rem;
}

.detail-story-row span {
  padding: 0.3rem 0.45rem;
  border: 1px solid var(--divider);
  color: var(--text-dim);
  font: 700 max(12px, 0.7rem)/1.3 var(--mono);
}

.empty-result {
  padding: clamp(1rem, 3vw, 2rem);
  color: var(--text-dim);
  text-align: center;
}

.empty-result strong {
  color: var(--text);
}

.empty-result p {
  margin: 0.5rem 0 1rem;
}

.empty-result-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}

.snapshot-board {
  display: grid;
  grid-template-columns: minmax(18rem, 1fr) minmax(18rem, 0.8fr);
  gap: clamp(2rem, 8vw, 10rem);
  align-items: end;
  border-top: 1px solid var(--divider);
}

.snapshot-board > div > p:not(.eyebrow) {
  max-width: 50rem;
  color: var(--text-dim);
}

.snapshot-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(8rem, 1fr));
  gap: 0.55rem;
}

.snapshot-link {
  display: grid;
  min-height: 3rem;
  place-items: center;
  font: 800 0.95rem/1.2 var(--display);
  text-decoration: none;
}

.snapshot-link[aria-disabled="true"] {
  pointer-events: none;
  color: var(--text-dim);
  background: var(--surface);
  border: var(--ol) dashed var(--control-edge);
  box-shadow: none;
}

.snapshot-actions p {
  grid-column: 1 / -1;
  margin: 0.2rem 0 0;
  color: var(--text-dim);
  font-size: 0.78rem;
}

/* Every explanation carries a visible Render lesson; proof depth stays folded. */
.explanation-shot {
  position: relative;
  min-width: 0;
  margin: 1rem 0 0;
  border: var(--ol-thin) solid var(--edge);
  background: var(--bg);
  border-radius: var(--r);
  overflow: hidden;
}

.explanation-shot[data-visual-class="reviewed-artifact"] {
  border-style: dashed;
}

.explanation-shot-frame {
  position: relative;
  overflow: hidden;
  background: var(--screen);
}

.explanation-shot-frame::after {
  position: absolute;
  inset: auto 0 0;
  height: 22%;
  pointer-events: none;
  background: linear-gradient(transparent, var(--scrim));
  content: "";
}

.explanation-shot picture,
.explanation-shot img {
  display: block;
  width: 100%;
}

.explanation-shot img {
  height: auto;
}

.snapshot-source {
  position: absolute;
  z-index: 2;
  top: 0.65rem;
  left: 0.65rem;
  max-width: calc(100% - 1.3rem);
  overflow-wrap: anywhere;
  padding: 0.28rem 0.42rem;
  border: var(--ol-thin) solid var(--edge);
  color: var(--text);
  background: var(--bg);
  font: 700 max(12px, 0.75rem)/1.2 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.explanation-shot > figcaption {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 0.6rem 1rem;
  padding: 0.72rem 0.8rem;
  border-top: 1px solid var(--divider);
}

.explanation-shot > figcaption > * {
  min-width: 0;
  overflow-wrap: anywhere;
}

.explanation-shot > figcaption strong {
  color: var(--text);
  font-size: 0.86rem;
  line-height: 1.38;
}

.explanation-shot > figcaption span {
  color: var(--text-dim);
  font-size: 0.78rem;
  line-height: 1.42;
}

.snapshot-proof {
  margin: 0;
  border: 0;
  border-top: 1px solid var(--divider);
  background: var(--bg);
}

.snapshot-proof > summary {
  display: flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.58rem 0.8rem;
  cursor: pointer;
  color: var(--text-dim);
  font: 700 0.76rem/1.3 var(--mono);
  list-style: none;
}

.snapshot-proof > summary::-webkit-details-marker {
  display: none;
}

.snapshot-proof > summary::after {
  content: "+";
}

.snapshot-proof[open] > summary::after {
  content: "−";
}

.snapshot-proof-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
  padding: 0 0.8rem 0.8rem;
}

.snapshot-proof-body > p {
  margin: 0;
  padding: 0.65rem;
  border: 1px solid var(--divider);
  color: var(--text-dim);
  background: var(--surface);
  font-size: 0.78rem;
  line-height: 1.45;
}

.snapshot-proof-body > p b {
  display: block;
  margin-bottom: 0.22rem;
  color: var(--text-dim);
  font: 700 max(12px, 0.64rem)/1.3 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.snapshot-proof-body dl {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  background: var(--divider);
}

.snapshot-proof-body dl > div {
  min-width: 0;
  padding: 0.48rem 0.55rem;
  background: var(--bg);
}

.snapshot-proof-body dt,
.snapshot-proof-body dd {
  margin: 0;
}

.snapshot-proof-body dt {
  color: var(--text-dim);
  font: 700 max(12px, 0.6rem)/1.3 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.snapshot-proof-body dd {
  margin-top: 0.14rem;
  overflow-wrap: anywhere;
  color: var(--text-dim);
  font-size: 0.72rem;
}

.snapshot-proof-body code {
  color: var(--text);
  font-size: 0.68rem;
}

.snapshot-proof-links {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.snapshot-proof-links a {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  padding: 0.48rem 0.65rem;
  border: 1px solid var(--control-edge);
  color: var(--text);
  font-size: 0.75rem;
  text-decoration: none;
}

.snapshot-proof-links a:hover {
  border-color: var(--edge);
  color: var(--text-dim);
}

.snapshot-thumb {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0.7rem 0 0;
  overflow: hidden;
  border: var(--ol-thin) solid var(--edge);
  background: var(--bg);
  border-radius: var(--r);
}

.snapshot-thumb picture,
.snapshot-thumb img {
  display: block;
  width: 100%;
}

.snapshot-thumb picture {
  height: 6.3rem;
}

/* Library labels grow below the picture instead of covering or clipping it. */
.workflow-card .snapshot-thumb > span {
  position: static;
  flex-wrap: wrap;
  margin: 0;
}

.workflow-card .snapshot-thumb > span > * {
  min-width: 0;
  overflow-wrap: anywhere;
}

.workflow-card .snapshot-thumb > span > b {
  flex: 1 1 12ch;
}

.snapshot-thumb img {
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.78;
  transition: opacity 160ms ease, transform 180ms ease;
}

button:hover .snapshot-thumb img,
button[aria-pressed="true"] .snapshot-thumb img {
  opacity: 1;
  transform: scale(1.015);
}

.snapshot-thumb > span {
  position: absolute;
  right: 0.3rem;
  bottom: 0.3rem;
  left: 0.3rem;
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.3rem 0.4rem;
  color: var(--text);
  background: var(--bg);
  font: 700 max(12px, 0.75rem)/1.25 var(--mono);
}

.snapshot-thumb > span b {
  color: var(--text-dim);
  font-weight: 700;
}

.starter-lesson-shot > figcaption {
  grid-template-columns: 1fr;
}

.guided-lesson-shot {
  margin-top: 1.1rem;
}

.guided-surface-help {
  margin: -0.15rem 0 0.75rem;
  color: var(--text-dim);
  font-size: 0.88rem;
  line-height: 1.45;
}

.app-settle-note {
  margin: 0.65rem 0 0;
  padding-left: 0.65rem;
  border-left: 2px solid var(--text);
  color: var(--text-dim);
  font-size: 0.78rem;
}

.story-visual {
  grid-column: 1 / -1;
  min-height: 0 !important;
  padding: 0 !important;
}

.story-shot {
  margin: 0;
  border: 0;
  border-top: 2px solid var(--text);
  box-shadow: none;
}

.workflow-lesson-shot {
  margin-top: 0.85rem;
}

.workflow-lesson-shot > figcaption {
  grid-template-columns: minmax(0, 1fr);
}

.detail-source-actions {
  display: grid;
  gap: 0.55rem;
  padding: 0.8rem;
  border-top: 1px solid var(--divider);
  background: transparent;
}

.detail-source-actions > span {
  color: var(--text-dim);
  font: 700 max(12px, 0.7rem)/1.3 var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.detail-source-actions > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.source-action {
  display: inline-flex;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
}

.detail-source-actions > p {
  margin: 0;
  color: var(--text);
  font-size: 0.78rem;
}

.site-footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2rem;
  padding: 24px 16px 32px;
}

.site-footer p {
  margin: 0.2rem 0 0;
  color: var(--text-dim);
  font-size: 0.8rem;
}

/* The one control left in the footer: the way back up, a 44px target at the right (its three builder chips,
   "Model output ≠ observed behavior" and the rest, are said once behind the About sheet's "i"). */
.site-footer > a {
  display: inline-flex;
  grid-column: 3;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  justify-self: end;
  font-size: 0.8rem;
  text-decoration: none;
}

.footer-rule {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.45rem;
}

.footer-rule span {
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--divider);
  color: var(--text-dim);
  font: 700 max(12px, 0.68rem)/1.2 var(--mono);
}

@media (max-width: 78rem) {
  .legend-mini {
    display: none;
  }

  .starter {
    grid-template-columns: minmax(25rem, 1fr) minmax(16rem, 0.52fr);
    gap: 1.5rem;
  }

  .course-promise {
    grid-column: 2;
  }

  .vertical-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .portfolio-controls {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) auto;
  }

  .workflow-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 58rem) {
  .starter {
    grid-template-columns: minmax(0, 1fr) minmax(12rem, 0.36fr);
  }

  .starter-track-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .guided-card {
    grid-template-columns: 1fr;
  }

  .smart-details {
    border-left: 0;
    border-top: 1px solid var(--divider);
  }

  .depth-drawer > summary {
    grid-template-columns: minmax(8rem, 0.5fr) minmax(14rem, 1fr) 2rem;
  }

  .depth-drawer > summary small {
    grid-column: 1 / 3;
    grid-row: 2;
  }

  .depth-drawer > summary::after {
    grid-column: 3;
    grid-row: 1 / 3;
  }

  .vertical-intro {
    grid-template-columns: 1fr;
  }

  .story-stage {
    grid-template-columns: 1fr 1.5fr;
  }

  .story-question {
    grid-column: 1 / -1;
    min-height: auto !important;
  }

  .story-stage > .story-question {
    border-left: 0;
    border-top: var(--ol-thin) solid var(--divider);
  }

  .course-constellation {
    grid-template-columns: 1fr;
  }

  .course-constellation figcaption {
    max-width: 38ch;
  }

  .portfolio-layout {
    grid-template-columns: 1fr;
  }

  .workflow-detail {
    position: static;
    min-height: 0;
    max-height: none;
    grid-row: 1;
  }

  .snapshot-board {
    grid-template-columns: 1fr;
  }

  .site-footer {
    grid-template-columns: 1fr auto;
  }

  .footer-rule {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: flex-start;
  }
}

@media (max-width: 42rem) {
  /* One fixed row: nothing in the header changes height while typing. */
  .site-header {
    position: sticky;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "brand actions";
    min-height: 62px;
    padding: 0 16px;
  }

  .wordmark {
    grid-area: brand;
    min-width: 0;
    gap: 8px;
  }

  .wordmark strong {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
  }

  .wordmark strong em {
    margin-left: 0;
    font-size: 0.48rem;
  }

  .header-actions {
    grid-area: actions;
    min-width: max-content;
    gap: 6px;
  }

  .header-explore,
  .header-tools > summary {
    min-width: 44px;
    min-height: 44px;
    line-height: 1;
    white-space: nowrap;
  }

  .header-explore {
    max-width: none;
  }

  .suite-nav {
    width: min(18rem, calc(100vw - 1rem));
  }

  .starter {
    display: block;
    width: min(100% - 1rem, 92rem);
    min-height: calc(100svh - 3.9rem);
    padding: 0.6rem 0 0.8rem;
  }

  .starter-panel {
    padding: 0.75rem;
    background: var(--surface);
  }

  .starter-progress {
    padding-bottom: 0.65rem;
  }

  .starter-progress li {
    display: grid;
    justify-items: center;
    gap: 0.2rem;
    font-size: 0.75rem;
  }

  .starter-progress li span {
    width: 1.45rem;
    height: 1.45rem;
  }

  .starter-step {
    padding: 0.75rem 0 0.2rem;
  }

  .guide-intro {
    margin-bottom: 0.75rem;
    padding: 0.55rem 0.6rem;
  }

  .guide-intro p {
    font-size: 0.875rem;
  }

  .starter-step h1 {
    font-size: clamp(2.05rem, 10vw, 2.65rem);
    line-height: 1;
  }

  .starter-help {
    margin: 0.55rem 0 0.65rem;
    font-size: 0.95rem;
  }

  .starter-field textarea {
    min-height: 5.4rem;
  }

  .starter-actions {
    margin-top: 0.7rem;
  }

  .primary-action,
  .quiet-action,
  .back-action,
  .app-action,
  .copy-inline {
    min-height: 2.75rem;
    padding: 0.58rem 0.75rem;
    font-size: 1rem;
  }

  .starter-safety {
    margin-top: 0.55rem;
    font-size: 0.875rem;
  }

  .starter-track-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .starter-track-choice > span {
    min-height: 6.35rem;
    padding: 2rem 0.55rem 0.55rem;
  }

  .starter-track-choice small {
    font-size: 0.8rem;
  }

  .starter-summary {
    grid-template-columns: 1fr;
  }

  .guided-path {
    width: min(100% - 1rem, 72rem);
    margin-bottom: 2rem;
  }

  /* On a phone the step line ("Question 1 of 8 · What do you really know about your idea?") stands
     under the heading and wraps, so neither squeezes the other or runs past the screen. */
  .guided-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
  }

  .guided-head > p {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    margin: 0;
  }

  .guided-head h2 {
    font-size: 1.75rem;
  }

  .guided-main,
  .guided-finish {
    padding: 1rem;
  }

  .guided-main h3,
  .guided-finish h3 {
    font-size: 2rem;
  }

  .guided-instruction {
    font-size: 1rem;
  }

  .explanation-shot > figcaption,
  .snapshot-proof-body,
  .snapshot-proof-body dl {
    grid-template-columns: 1fr;
  }

  .snapshot-proof-body > p,
  .snapshot-proof-body dl,
  .snapshot-proof-links {
    grid-column: 1;
  }

  .snapshot-thumb picture {
    height: 7rem;
  }

  .depth-drawer {
    width: calc(100% - 1rem);
    margin-block: 0.5rem;
  }

  .depth-drawer > summary {
    grid-template-columns: 1fr 2rem;
    gap: 0.2rem 0.7rem;
    min-height: 4.75rem;
    padding: 0.7rem;
  }

  .depth-drawer > summary span,
  .depth-drawer > summary strong,
  .depth-drawer > summary small {
    grid-column: 1;
  }

  .depth-drawer > summary span {
    font-size: 0.65rem;
  }

  .depth-drawer > summary strong {
    font-size: 0.94rem;
  }

  .depth-drawer > summary small {
    grid-row: auto;
    font-size: 0.75rem;
  }

  .depth-drawer > summary::after {
    grid-column: 2;
    grid-row: 1 / 4;
  }

  .course-constellation {
    padding: 0.55rem;
  }

  h1 {
    font-size: clamp(2.25rem, 14vw, 3.6rem);
  }

  .section-shell {
    width: min(100% - 1.4rem, 112rem);
  }

  .panel-heading,
  .section-title-row,
  .portfolio-heading {
    flex-direction: column;
    align-items: stretch;
  }

  .story-tabs {
    justify-content: stretch;
  }

  .story-tab {
    flex: 1;
  }

  .story-stage {
    grid-template-columns: 1fr;
  }

  .story-stage > div {
    min-height: auto;
  }

  .story-stage > div + div {
    border-left: 0;
    border-top: var(--ol-thin) solid var(--divider);
  }

  .story-question {
    grid-column: 1;
  }

  .vertical-grid,
  .workflow-grid {
    grid-template-columns: 1fr;
  }

  .vertical-card-select {
    min-height: auto;
  }

  .portfolio-controls {
    grid-template-columns: 1fr;
  }

  .portfolio-extra-controls {
    grid-template-columns: 1fr;
  }

  .portfolio-more-filters > summary span {
    display: block;
    margin: 0.2rem 0 0;
  }

  .portfolio-controls input,
  .portfolio-controls select,
  .reset-button {
    font-size: 1rem;
  }

  .result-count {
    text-align: left;
  }

  .site-footer {
    grid-template-columns: 1fr;
  }

  .site-footer > a {
    grid-column: 1;
    justify-self: start;
    font-size: 1rem;
  }

  .footer-rule {
    grid-column: 1;
    grid-row: auto;
  }
}

@media (max-width: 42rem) and (max-height: 44rem) {
  .site-header {
    padding-block: 0.3rem;
  }


  .starter {
    padding-top: 0.35rem;
  }

  .starter-panel {
    padding: 0.55rem;
  }

  .starter-progress {
    padding-bottom: 0.4rem;
  }

  .starter-step {
    padding-top: 0.45rem;
  }

  .guide-intro {
    margin-bottom: 0.45rem;
    padding: 0.38rem 0.48rem;
  }

  .guide-intro p {
    font-size: 0.8rem;
    line-height: 1.32;
  }

  .starter-step h1 {
    font-size: 1.7rem;
  }

  .starter-help {
    margin: 0.35rem 0 0.45rem;
    font-size: 0.88rem;
  }

  .starter-field textarea {
    min-height: 4.25rem;
    padding-block: 0.62rem;
  }

  .starter-actions {
    margin-top: 0.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  /* Nothing moves, and nothing fades: a theme change, a hover or a press is instant. */
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

@media print {
  :root {
    color-scheme: light;
  }

  body {
    color: var(--text);
    background: var(--bg);
  }

  .site-header,
  .starter,
  .guided-path,
  .portfolio-controls,
  .snapshot-board,
  .site-footer {
    display: none;
  }

  details:not([open]) > :not(summary) {
    display: block;
  }

  .depth-drawer {
    width: 100%;
    border: 0;
  }

  .depth-drawer > summary {
    display: none;
  }

  .vertical-card,
  .vertical-card-select,
  .workflow-card,
  .workflow-detail,
  .story-stage > div {
    color: var(--text);
    background: var(--bg) !important;
    box-shadow: none;
  }

  .vertical-card,
  .workflow-card {
    break-inside: avoid;
  }
}

/* Deterministic lesson cards captured by render.darksoc.org. */
html.capture-requested body > * {
  visibility: hidden;
}

body.capture-body {
  min-width: 0;
  min-height: 100vh;
  overflow: hidden;
  background: var(--bg);
}

.capture-surface {
  display: grid;
  grid-template-columns: minmax(19rem, 0.72fr) minmax(36rem, 1.55fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 1.15rem 1.35rem;
  width: 100vw;
  height: 100vh;
  padding: clamp(1.1rem, 2.2vw, 2rem);
}

.capture-surface[data-visual-class="reviewed-artifact"] .capture-sources {
  border-style: dashed;
}

.capture-header {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 2.8rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--divider);
  color: var(--text-dim);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.capture-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--text);
  letter-spacing: 0.04em;
}

.capture-brand img {
  width: 2rem;
  height: 2rem;
}

.capture-copy {
  align-self: center;
  min-width: 0;
  padding: 0.45rem 0.3rem 0.45rem 0;
}

.capture-kicker,
.capture-exercise {
  margin: 0 0 0.75rem;
  color: var(--text-dim);
  font: 800 0.72rem/1.2 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.capture-exercise {
  display: flex;
  justify-content: space-between;
  max-width: 18rem;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--divider);
  background: transparent;
}

.capture-exercise span {
  color: var(--text-dim);
}

.capture-copy h1 {
  max-width: 13ch;
  margin: 0;
  font-size: clamp(2.5rem, 4.1vw, 4.9rem);
  line-height: 0.94;
  letter-spacing: -0.03em;
}

.capture-caption {
  max-width: 34rem;
  margin: 1.05rem 0 0;
  color: var(--text);
  font-size: clamp(1.05rem, 1.55vw, 1.4rem);
  font-weight: 700;
  line-height: 1.3;
}

.capture-look {
  max-width: 34rem;
  margin-top: 1.35rem;
  padding: 0.85rem 1rem;
  border-left: 0.25rem solid var(--edge);
  background: var(--surface);
}

.capture-look span,
.capture-yes,
.capture-no {
  display: block;
  color: var(--text-dim);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.capture-look p {
  margin: 0.3rem 0 0;
  color: var(--text-dim);
  font-size: 0.93rem;
  line-height: 1.42;
}

.capture-guide-rail {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.28rem;
  max-width: 31rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.capture-guide-rail li {
  display: grid;
  place-items: center;
  gap: 0.16rem;
  padding: 0.42rem 0.2rem;
  border: 1px solid var(--divider);
  color: var(--text-dim);
  font-size: 0.62rem;
}

.capture-guide-rail li span {
  font: 800 0.72rem/1 var(--mono);
}

.capture-guide-rail li[aria-current="step"] {
  border-color: var(--edge);
  color: var(--on-accent);
  background: var(--picked);
}

.capture-evidence-ladder {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.34rem;
  max-width: 32rem;
  margin: 0 0 1rem;
  color: var(--text-dim);
  font: 800 0.68rem/1.2 var(--mono);
  text-transform: uppercase;
}

.capture-evidence-ladder span,
.capture-evidence-ladder strong {
  padding: 0.42rem 0.5rem;
  border: 1px solid var(--divider);
}

.capture-evidence-ladder strong {
  border-color: var(--text);
  color: var(--text);
}

.capture-evidence-ladder b {
  flex-basis: 100%;
  color: var(--danger);
  letter-spacing: 0.12em;
}

.capture-sources {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--source-columns, 1), minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  align-self: stretch;
  min-width: 0;
  min-height: 0;
  padding: 0.55rem;
  overflow: hidden;
  border: var(--ol-thin) solid var(--edge);
  background: var(--bg);
  box-shadow: var(--pop-lg) var(--pop-lg) 0 var(--edge);
  border-radius: var(--r);
}

.capture-sources:has(.capture-source-card:nth-of-type(2)) {
  --source-columns: 2;
  gap: 0.42rem;
}

.capture-source-card {
  position: relative;
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  border: var(--ol-thin) solid var(--edge);
  background: var(--bg);
  border-radius: var(--r);
}

.capture-source-card picture,
.capture-source-card img {
  display: block;
  width: 100%;
  height: 100%;
}

.capture-source-card picture {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.capture-source-card img {
  object-fit: cover;
  object-position: top center;
}

.capture-source-card[data-phone-evidence="society-focus"] .capture-source-primary img {
  object-fit: contain;
  object-position: center top;
}

/* A single wide source keeps both horizontal edges: guide text and controls
   must not disappear when the lesson card is narrower than the captured app. */
@media (min-width: 42.01rem) {
  .capture-source-card[data-source-count="1"] .capture-source-primary img {
    object-fit: contain;
    object-position: center;
  }
}

.capture-source-detail {
  display: none;
}

.capture-source-card figcaption {
  position: absolute;
  right: 0.55rem;
  bottom: 0.55rem;
  left: 0.55rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.48rem 0.62rem;
  border: 1px solid var(--divider);
  color: var(--text);
  background: var(--bg);
  font-size: 0.66rem;
}

.capture-source-card figcaption span {
  color: var(--text-dim);
  font-weight: 800;
}

.capture-source-card figcaption b {
  overflow: hidden;
  color: var(--text-dim);
  font: 700 0.6rem/1 var(--mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.capture-source-card[data-phone-evidence="campaign-bottom"] figcaption {
  top: 0.55rem;
  right: 0.55rem;
  bottom: auto;
  left: auto;
  max-width: 46%;
}

.capture-source-proof {
  flex-basis: 100%;
  color: var(--text);
  font: 700 0.56rem/1.25 var(--mono);
  letter-spacing: 0.04em;
}

.capture-pixel-label {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 2;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--divider);
  color: var(--text-dim);
  background: var(--bg);
  font: 800 0.62rem/1.1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.capture-surface[data-capture-id="workflow-29"] .capture-pixel-label,
.capture-surface[data-capture-id="workflow-30"] .capture-pixel-label,
.capture-surface[data-capture-id="workflow-31"] .capture-pixel-label {
  right: 1rem;
  left: auto;
}

.capture-limits {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 0.75rem;
  align-items: start;
  padding-top: 0.85rem;
  border-top: 1px solid var(--divider);
}

.capture-limits > div {
  padding: 0.68rem 0.8rem;
  border: 1px solid var(--divider);
  background: var(--surface);
}

.capture-limits p {
  margin: 0.28rem 0 0;
  color: var(--text-dim);
  font-size: 0.73rem;
  line-height: 1.38;
}

.capture-no {
  color: var(--danger);
}

.capture-limits small {
  align-self: center;
  color: var(--text-dim);
  font: 700 0.65rem/1.45 var(--mono);
  text-align: right;
}

.capture-sources.capture-sources--diagram {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) 5rem;
  grid-auto-flow: row;
  gap: 0.6rem;
  padding: 0.8rem;
}

.capture-guide-example {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: clamp(1rem, 2.3vw, 2.5rem);
  border: 1px solid var(--divider);
  background: var(--bg);
}

.capture-example-label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  color: var(--text-dim);
  font-size: 0.8rem;
  font-weight: 800;
}

.capture-example-label img { width: 2rem; height: 2rem; }
.capture-example-main { margin: auto 0; padding: 1.3rem 0; }
.capture-example-main h2 { margin: 0 0 1rem; font-size: clamp(1.5rem, 2.6vw, 3rem); line-height: 1.08; }
.capture-example-main p { color: var(--text-dim); font-size: 1.05rem; line-height: 1.35; }
.capture-example-main .capture-example-answer { padding: 1rem; border-left: 3px solid var(--control-edge); color: var(--text); background: var(--surface); font-size: clamp(1.3rem, 2vw, 2.1rem); }
.capture-example-types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; padding: 0; list-style: none; }
.capture-example-types li { padding: 1rem 0.65rem; border: 1px solid var(--edge); color: var(--text); font-size: 1.05rem; }
.capture-example-summary { display: grid; gap: 0.8rem; margin: 0; }
.capture-example-summary > div { display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; }
.capture-example-summary dt { color: var(--text-dim); }
.capture-example-summary dd { margin: 0; color: var(--text); font-size: 1.3rem; }
.capture-example-journey { display: grid; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.capture-example-journey li { display: flex; align-items: center; gap: 0.8rem; }
.capture-example-journey li > span { display: grid; place-items: center; flex: 0 0 2rem; height: 2rem; border: 1px solid var(--edge); color: var(--text-dim); }
.capture-example-journey strong { display: block; font-size: 1.1rem; }
.capture-example-journey small { display: block; margin-top: 0.2rem; color: var(--text-dim); font-size: 0.82rem; line-height: 1.3; }
.capture-example-choices { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.capture-example-choices span { padding: 0.75rem; border: 1px solid var(--edge); color: var(--text); font-size: 0.95rem; }
.capture-example-boundary { margin: 0; padding-top: 0.8rem; border-top: 1px solid var(--danger); color: var(--text); font-size: 0.9rem; line-height: 1.35; }
.capture-guide-reference { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 0.8rem; min-height: 0; align-items: center; }
.capture-guide-reference .capture-source-card { height: 100%; }
.capture-guide-reference .capture-source-primary img { object-fit: contain; object-position: center; }
.capture-guide-reference .capture-source-card figcaption { display: none; }
.capture-guide-reference p { margin: 0; font-size: 0.8rem; color: var(--text-dim); }
.capture-guide-reference span { display: block; margin-top: 0.25rem; color: var(--text-dim); font-size: 0.72rem; line-height: 1.3; }

.capture-error {
  display: grid;
  place-content: center;
  min-height: 100vh;
  padding: 2rem;
}

.capture-error p {
  color: var(--danger);
  font-weight: 800;
  text-transform: uppercase;
}

@media (min-width: 42.01rem) {
  .capture-source-card[data-source-count="2"][data-phone-evidence="stacked"] img {
    object-fit: contain;
    object-position: center;
  }
}

@media (max-width: 42rem) {
  .capture-sources.capture-sources--diagram { grid-template-rows: minmax(0, 1fr) 2.6rem; gap: 0.3rem; padding: 0.35rem; }
  .capture-guide-example { padding: 0.65rem; }
  .capture-example-label { gap: 0.35rem; font-size: 0.59rem; }
  .capture-example-label img { width: 1.2rem; height: 1.2rem; }
  .capture-example-main { padding: 0.55rem 0; }
  .capture-example-main h2 { margin-bottom: 0.55rem; font-size: 1.25rem; }
  .capture-example-main p { margin: 0.5rem 0; font-size: 0.74rem; }
  .capture-example-main .capture-example-answer { padding: 0.6rem; font-size: 1.1rem; }
  .capture-example-types { gap: 0.3rem; margin: 0; }
  .capture-example-types li { padding: 0.6rem 0.35rem; font-size: 0.7rem; }
  .capture-example-summary { gap: 0.45rem; }
  .capture-example-summary > div { grid-template-columns: 2.4rem 1fr; gap: 0.45rem; }
  .capture-example-summary dt { font-size: 0.68rem; }
  .capture-example-summary dd { font-size: 0.91rem; }
  .capture-example-journey { gap: 0.35rem; }
  .capture-example-journey li { gap: 0.5rem; }
  .capture-example-journey li > span { flex-basis: 1.25rem; height: 1.25rem; font-size: 0.65rem; }
  .capture-example-journey strong { font-size: 0.76rem; }
  .capture-example-journey small { margin-top: 0.12rem; font-size: 0.62rem; }
  .capture-example-choices { gap: 0.3rem; }
  .capture-example-choices span { padding: 0.45rem; font-size: 0.68rem; }
  .capture-example-boundary { padding-top: 0.5rem; font-size: 0.68rem; }
  .capture-guide-reference { grid-template-columns: 3.8rem minmax(0, 1fr); gap: 0.5rem; }
  .capture-guide-reference p { font-size: 0.6rem; }
  .capture-guide-reference span { margin-top: 0.1rem; font-size: 0.52rem; }

  .capture-surface {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto minmax(13.5rem, 1fr) auto;
    gap: 0.55rem;
    padding: 0.7rem;
  }

  .capture-header {
    min-height: 2rem;
    padding-bottom: 0.42rem;
    font-size: 0.56rem;
  }

  .capture-brand {
    gap: 0.35rem;
  }

  .capture-brand img {
    width: 1.45rem;
    height: 1.45rem;
  }

  .capture-copy {
    padding: 0;
  }

  .capture-kicker,
  .capture-exercise {
    margin-bottom: 0.42rem;
    font-size: 0.55rem;
  }

  .capture-exercise {
    max-width: 100%;
    padding: 0.3rem 0.45rem;
  }

  .capture-copy h1 {
    max-width: 19ch;
    font-size: clamp(1.72rem, 8vw, 2.1rem);
    line-height: 0.98;
    letter-spacing: -0.03em;
  }

  .capture-caption {
    margin-top: 0.42rem;
    font-size: 0.84rem;
    line-height: 1.24;
  }

  .capture-look {
    margin-top: 0.48rem;
    padding: 0.45rem 0.58rem;
  }

  .capture-look span,
  .capture-yes,
  .capture-no {
    font-size: 0.5rem;
  }

  .capture-look p {
    margin-top: 0.15rem;
    font-size: 0.64rem;
    line-height: 1.28;
  }

  .capture-guide-rail {
    gap: 0.12rem;
    margin-bottom: 0.5rem;
  }

  .capture-guide-rail li {
    padding: 0.22rem 0.05rem;
    font-size: 0.42rem;
  }

  .capture-guide-rail li span {
    font-size: 0.52rem;
  }

  .capture-evidence-ladder {
    gap: 0.18rem;
    margin-bottom: 0.45rem;
    font-size: 0.48rem;
  }

  .capture-evidence-ladder span,
  .capture-evidence-ladder strong {
    padding: 0.26rem 0.3rem;
  }

  .capture-sources,
  .capture-sources:has(.capture-source-card:nth-of-type(2)) {
    --source-columns: 1;
    grid-template-columns: 1fr;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 0.2rem;
    padding: 0.25rem;
  }

  .capture-sources:has(.capture-source-card[data-phone-evidence="stacked"]) {
    grid-template-columns: 1fr;
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-auto-rows: minmax(0, 1fr);
  }

  .capture-sources:has(.capture-source-card[data-phone-evidence="quad"]) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-auto-rows: minmax(0, 1fr);
  }

  .capture-source-card[data-phone-evidence="split"],
  .capture-source-card[data-phone-evidence="split-center"] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .capture-source-card[data-phone-evidence="split"] .capture-source-primary img,
  .capture-source-card[data-phone-evidence="split-center"] .capture-source-primary img {
    object-position: left top;
  }

  .capture-source-card[data-phone-evidence="split"] .capture-source-detail,
  .capture-source-card[data-phone-evidence="split-center"] .capture-source-detail {
    display: block;
    min-width: 0;
    object-position: right top;
  }

  .capture-source-card[data-phone-evidence="split-center"] .capture-source-detail {
    object-position: 72% top;
  }

  .capture-source-card[data-phone-evidence="society-focus"] {
    display: grid;
    grid-template-rows: minmax(0, 0.42fr) minmax(0, 0.79fr) minmax(0, 0.79fr);
    gap: 0.2rem;
  }

  .capture-source-card[data-phone-evidence="society-focus"] .capture-source-primary,
  .capture-source-card[data-phone-evidence="society-focus"] .capture-source-detail {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
  }

  .capture-source-card[data-phone-evidence="society-focus"] .capture-source-primary img {
    object-fit: cover;
    object-position: center top;
  }

  .capture-source-card[data-phone-evidence="society-focus"] .capture-source-detail {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .capture-source-card[data-phone-evidence="society-focus"] .capture-source-detail--left {
    object-position: center top;
    transform: scale(1.58);
    transform-origin: 0 10%;
  }

  .capture-source-card[data-phone-evidence="society-focus"] .capture-source-detail--right {
    object-position: center 34%;
    transform: scale(1.72);
    transform-origin: 72% 48%;
  }

  .capture-surface[data-capture-id="workflow-29"] .capture-source-detail--right {
    transform-origin: 0 52%;
  }

  .capture-source-card[data-phone-evidence="society-focus"] figcaption {
    top: 0.25rem;
    right: 0.25rem;
    bottom: auto;
    left: auto;
    max-width: 44%;
  }

  .capture-source-card[data-phone-evidence="contain"] img,
  .capture-source-card[data-phone-evidence="contain-phone"] img,
  .capture-source-card[data-phone-evidence="quad"] img {
    object-fit: contain;
    object-position: center;
  }

  .capture-source-card[data-phone-evidence="campaign-bottom"] img {
    object-position: left bottom;
    transform: scale(2);
    transform-origin: left bottom;
  }

  .capture-source-card[data-phone-evidence="empty-center"] img {
    object-position: center top;
  }

  .capture-source-card[data-phone-evidence="campaign-bottom"] figcaption {
    top: 0.25rem;
    right: 0.25rem;
    bottom: auto;
    left: auto;
    max-width: 46%;
  }

  .capture-source-card[data-phone-evidence="map-left"] img {
    object-position: left top;
  }

  .capture-source-card[data-phone-evidence="map-right"] img {
    object-position: right top;
  }

  .capture-surface[data-capture-id="guide-01-idea"] .capture-source-card img {
    object-position: center bottom;
  }

  .capture-source-card[data-phone-evidence="stacked"] img {
    object-position: top center;
  }

  .capture-source-card figcaption {
    right: 0.25rem;
    bottom: 0.25rem;
    left: 0.25rem;
    padding: 0.25rem 0.34rem;
    font-size: 0.48rem;
  }

  .capture-source-card figcaption b {
    display: block;
    max-width: 54%;
    font-size: 0.43rem;
  }

  /* Stacked subscription evidence keeps the complete artifact provenance. */
  .capture-surface[data-capture-id="vertical-saas-growth"] .capture-source-card figcaption b {
    flex: 1 1 12ch;
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    text-overflow: clip;
    text-align: right;
    line-height: 1.3;
  }

  .capture-source-card[data-source-count="1"]:not(:has(.capture-source-proof)) figcaption b {
    display: none;
  }

  .capture-source-proof {
    font-size: 0.42rem;
  }

  .capture-pixel-label {
    top: 0.48rem;
    right: auto;
    left: 0.48rem;
    padding: 0.27rem 0.34rem;
    font-size: 0.45rem;
  }

  .capture-surface[data-capture-id="workflow-29"] .capture-pixel-label,
  .capture-surface[data-capture-id="workflow-30"] .capture-pixel-label,
  .capture-surface[data-capture-id="workflow-31"] .capture-pixel-label {
    right: auto;
    left: 0.48rem;
  }

  .capture-limits {
    grid-template-columns: 1fr 1fr;
    gap: 0.3rem;
    padding-top: 0.45rem;
  }

  .capture-limits > div {
    padding: 0.4rem 0.46rem;
  }

  .capture-limits p {
    margin-top: 0.14rem;
    font-size: 0.5rem;
    line-height: 1.25;
  }

  .capture-limits small {
    grid-column: 1 / -1;
    font-size: 0.48rem;
    line-height: 1.1;
    text-align: left;
  }
}

/* Course polish: a calm first move, with the full evidence library underneath.
   Capture pages deliberately keep their reviewed, deterministic presentation. */
html:not(.capture-requested) .starter {
  grid-template-columns: minmax(0, 1.3fr) minmax(19rem, 0.85fr);
  gap: clamp(1rem, 2.4vw, 2rem);
  width: min(100% - 3rem, 76rem);
  min-height: 0;
  padding: clamp(1.25rem, 3vw, 2.5rem) 0 1.5rem;
}

html:not(.capture-requested) .starter[hidden],
html:not(.capture-requested) .course-tool-tour[hidden] {
  display: none;
}

html:not(.capture-requested) .starter::before {
  display: none;
}

html:not(.capture-requested) .starter-panel {
  padding: clamp(1.1rem, 2.2vw, 1.8rem);
  border: var(--ol) solid var(--edge);
  background: var(--surface);
  box-shadow: none;
  backdrop-filter: none;
}

html:not(.capture-requested) .starter-progress {
  padding-bottom: 0.8rem;
  border-color: var(--divider);
}

html:not(.capture-requested) .starter-progress li {
  color: var(--text-dim);
}

html:not(.capture-requested) .starter-progress li[aria-current="step"] {
  color: var(--text);
}

html:not(.capture-requested) .starter-progress li[aria-current="step"] span {
  box-shadow: none;
}

html:not(.capture-requested) .starter-step {
  padding: 1.25rem 0 0;
}

html:not(.capture-requested) .guide-intro {
  margin-bottom: 1.15rem;
  padding: 0;
  border: 0;
  background: transparent;
}

html:not(.capture-requested) .guide-intro p {
  color: var(--text-dim);
  line-height: 1.5;
}

html:not(.capture-requested) .starter-step h1 {
  max-width: 21ch;
  font-size: clamp(2.1rem, 3.7vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
}

html:not(.capture-requested) .starter-help {
  margin: 0.75rem 0 1.1rem;
  color: var(--text-dim);
  font-size: 1rem;
}

html:not(.capture-requested) .starter-field textarea {
  min-height: 5.7rem;
}

html:not(.capture-requested) .starter-example {
  margin-top: 1.1rem;
  border-top: 2px solid var(--divider);
}

html:not(.capture-requested) .starter-example > summary {
  min-height: 2.75rem;
  padding: 0.75rem 0;
  color: var(--text-dim);
  font-size: 0.84rem;
  cursor: pointer;
}

html:not(.capture-requested) .starter-example[open] > summary {
  color: var(--text-dim);
}

html:not(.capture-requested) .course-tool-tour {
  display: block;
  width: min(100% - 3rem, 76rem);
  margin: 0 auto 2.5rem;
}

html:not(.capture-requested) .course-tool-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

html:not(.capture-requested) .course-tool-tour-heading h2 {
  margin: 0;
  font-size: clamp(1.6rem, 3.4vw, 2.2rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
}

html:not(.capture-requested) .course-tool-tour-heading p {
  margin: 0.35rem 0 0;
  color: var(--text-dim);
  font-size: 0.92rem;
}

html:not(.capture-requested) .course-tool-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 18px;
  text-decoration: none;
  cursor: pointer;
}

html:not(.capture-requested) .course-tool-picture {
  margin: 0 0 1rem;
}

html:not(.capture-requested) .course-tool-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

html:not(.capture-requested) .course-tool-action {
  display: block;
  margin-top: auto;
  padding-top: 0.85rem;
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: underline 3px var(--link-line);
  text-underline-offset: 0.3em;
}

html:not(.capture-requested) .course-tool-kicker {
  font-weight: 700;
}

html:not(.capture-requested) .course-tool-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 7;
  margin-bottom: 0;
  object-fit: cover;
  object-position: top center;
}

/* The quick-check illustration needs its whole flow visible. */
html:not(.capture-requested) .course-tool-card[data-tool="society"] img {
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: contain;
  object-position: center;
}

html:not(.capture-requested) .course-tool-card h3 {
  margin: 0.4rem 0;
  font-size: 1.2rem;
  line-height: 1.2;
  letter-spacing: -0.03em;
}

html:not(.capture-requested) .course-tool-card p {
  margin: 0.3rem 0;
  color: var(--text-dim);
  font-size: 0.9rem;
  line-height: 1.5;
}

html:not(.capture-requested) .tool-status {
  display: block;
  margin-top: 0.5rem;
  color: var(--text-dim);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.4;
}

html:not(.capture-requested) .guided-path {
  width: min(100% - 3rem, 68rem);
  margin-bottom: 2.5rem;
  padding-top: 1.5rem;
}

html:not(.capture-requested) .guided-head h2 {
  font-size: clamp(1.6rem, 3.4vw, 2.2rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
}


html:not(.capture-requested) .guided-task {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 1.5rem;
  align-items: start;
  margin-top: 1.25rem;
}

html:not(.capture-requested) .guided-task-copy {
  min-width: 0;
  padding-top: 0.2rem;
}

html:not(.capture-requested) .guided-task-copy .guided-instruction {
  margin-top: 0.5rem;
}

html:not(.capture-requested) .chapter-rail {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.4rem;
  margin: 0;
  padding: 1rem 1rem 0;
  background: transparent;
  list-style: none;
}

html:not(.capture-requested) .chapter-rail li span {
  display: inline-block;
  margin-right: 0.35rem;
  color: var(--text-dim);
  font-weight: 700;
}

html:not(.capture-requested) .chapter-rail li {
  min-width: 0;
  padding: 0.55rem 0.65rem;
  color: var(--text-dim);
  font-size: 0.8rem;
  line-height: 1.4;
  border: var(--ol-thin) solid var(--control-edge);
  border-radius: var(--r);
  background: var(--surface);
}

html:not(.capture-requested) .chapter-rail li[aria-current="step"] span { color: inherit; }

html:not(.capture-requested) .chapter-rail li[aria-current="step"] {
  border-color: var(--edge);
  color: var(--on-picked);
  background: var(--picked);
  font-weight: 800;
}

html:not(.capture-requested) .guided-card {
  grid-template-columns: 1fr;
}

html:not(.capture-requested) .guided-main,
html:not(.capture-requested) .guided-finish,
html:not(.capture-requested) .guided-card > .smart-details {
  padding: clamp(1.1rem, 3vw, 2rem);
  background: transparent;
}

html:not(.capture-requested) .guided-card > .smart-details {
  padding: 0;
  border: 0;
  border-top: 2px solid var(--divider);
}

html:not(.capture-requested) .guided-main h3,
html:not(.capture-requested) .guided-finish h3 {
  max-width: 30ch;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
}

html:not(.capture-requested) .guided-instruction {
  max-width: 46rem;
  color: var(--text);
}

html:not(.capture-requested) .guided-lesson-shot {
  max-width: 47rem;
  margin: 1.25rem 0;
  border-width: 1px;
  box-shadow: none;
}

html:not(.capture-requested) .guided-picture-preview {
  max-width: 47rem;
  min-width: 0;
  margin: 0;
}

html:not(.capture-requested) .guided-picture-preview .guided-lesson-shot {
  margin: 0;
}

html:not(.capture-requested) .guided-picture-preview .explanation-shot img {
  height: 16rem;
  object-fit: contain;
}

html:not(.capture-requested) .guided-picture-preview .explanation-shot > figcaption {
  grid-template-columns: 1fr;
  gap: 0.35rem;
}

html:not(.capture-requested) .guided-picture-preview .explanation-shot-frame::after {
  display: none;
}

html:not(.capture-requested) .picture-full-link {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  color: var(--text-dim);
  font-size: 0.82rem;
  text-underline-offset: 0.2em;
}

html:not(.capture-requested) .guided-result {
  margin: 1.1rem 0;
  padding: 0.75rem 0.9rem;
  border-left: 6px solid var(--picked);
  color: var(--text);
  background: var(--bg);
  font-size: 0.95rem;
  border-radius: var(--r);
}

html:not(.capture-requested) .guided-note {
  display: grid;
  gap: 0.45rem;
  max-width: 46rem;
  margin-top: 1.25rem;
  color: var(--text-dim);
  font-size: 0.9rem;
  font-weight: 700;
}

html:not(.capture-requested) .guided-note textarea {
  width: 100%;
  min-height: 6rem;
  padding: 0.75rem;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  resize: vertical;
}

html:not(.capture-requested) .guided-honesty {
  color: var(--text-dim);
  line-height: 1.5;
}

html:not(.capture-requested) .launch-plan {
  margin: 1.5rem 0;
}

html:not(.capture-requested) dl.launch-plan {
  display: grid;
  gap: 0;
  margin: 0;
  background: var(--surface);
  overflow: hidden;
}

html:not(.capture-requested) .launch-plan > div {
  padding: 0.9rem 1rem;
  background: transparent;
}

html:not(.capture-requested) .plan-notes {
  padding: 0 1rem 1rem;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  font: 0.95rem/1.6 var(--display);
}

/* The course map is a compact chooser, not the older full-screen desk grid. */
html:not(.capture-requested) #course-map .course-promise {
  margin-top: 0.75rem;
}

html:not(.capture-requested) .launch-plan dt {
  margin: 0 0 0.3rem;
  color: var(--text-dim);
  font-size: 0.8rem;
  font-weight: 700;
}

html:not(.capture-requested) .launch-plan dd {
  margin: 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  font-size: 0.95rem;
}

html:not(.capture-requested) .depth-drawer {
  width: min(100% - 3rem, 76rem);
}

html:not(.capture-requested) .depth-drawer > summary {
  min-height: 64px;
  padding: 16px 20px;
}

html:not(.capture-requested) .depth-drawer > summary span {
  font-size: 0.95rem;
}

html:not(.capture-requested) .depth-drawer > summary small {
  font-size: 0.95rem;
}

html:not(.capture-requested) .depth-drawer > .section-shell {
  background: transparent;
}

/* Sections folded into a drawer read as one sequence: the same rhythm, a rule
   between neighbours, and one heading size for the shorter lab sections. */
html:not(.capture-requested) .depth-drawer > .section-shell {
  padding-block: clamp(2.5rem, 4vw, 3.5rem);
}

html:not(.capture-requested) .depth-drawer > section + section {
  border-top: 1px solid var(--divider);
}

html:not(.capture-requested) .depth-drawer > :is(.lab-device-examples, .lab-practice-section, #society-quick-check-lab) h2 {
  font-size: clamp(1.6rem, 2.4vw, 1.9rem);
}

@media (max-width: 58rem) {
  html:not(.capture-requested) .starter {
    grid-template-columns: minmax(0, 1.4fr) minmax(13rem, 0.75fr);
    width: min(100% - 2rem, 76rem);
    gap: 1rem;
  }

  html:not(.capture-requested) .course-tool-tour,
  html:not(.capture-requested) .guided-path,
  html:not(.capture-requested) .depth-drawer {
    width: calc(100% - 2rem);
  }
}

@media (max-width: 42rem) {
  html:not(.capture-requested) .starter {
    display: block;
    width: calc(100% - 1rem);
    padding: 0.75rem 0 1.25rem;
  }

  html:not(.capture-requested) .starter-panel {
    padding: 1rem;
  }

  html:not(.capture-requested) .starter-progress li {
    display: flex;
    justify-content: center;
    gap: 0.3rem;
    font-size: 0.75rem;
  }

  html:not(.capture-requested) .starter-progress li span {
    width: 1.3rem;
    height: 1.3rem;
    font-size: 0.65rem;
  }

  html:not(.capture-requested) .starter-step {
    padding-top: 0.9rem;
  }

  html:not(.capture-requested) .guide-intro {
    gap: 0.6rem;
    margin-bottom: 1rem;
  }

  html:not(.capture-requested) .starter-step h1 {
    max-width: 19ch;
    font-size: clamp(1.85rem, 8vw, 2.3rem);
    line-height: 1.09;
  }

  html:not(.capture-requested) .starter-help {
    font-size: 0.93rem;
  }

  html:not(.capture-requested) .starter-safety {
    font-size: 0.8rem;
    line-height: 1.45;
  }

  html:not(.capture-requested) .course-tool-tour {
    width: calc(100% - 2rem);
    margin-bottom: 1.75rem;
  }

  html:not(.capture-requested) .course-tool-grid {
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }

  html:not(.capture-requested) .course-tool-card {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr);
    gap: 0.2rem 0.85rem;
    padding: 0.8rem;
  }

  html:not(.capture-requested) .course-tool-picture {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
  }

  html:not(.capture-requested) .course-tool-card img {
    height: 6rem;
    aspect-ratio: auto;
    margin: 0;
    object-fit: cover;
  }

  html:not(.capture-requested) .course-tool-copy {
    grid-column: 2;
    grid-row: 1;
  }

  html:not(.capture-requested) .course-tool-card h3 {
    margin: 0.15rem 0;
    font-size: 1.06rem;
  }

  html:not(.capture-requested) .course-tool-card p {
    margin: 0.2rem 0;
    font-size: 0.85rem;
  }

  html:not(.capture-requested) .tool-status {
    font-size: 0.78rem;
  }

  html:not(.capture-requested) .guided-head {
    flex-direction: column;
    align-items: start;
    gap: 0.35rem;
  }

  html:not(.capture-requested) .guided-head > p {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    font-size: 0.75rem;
  }

  html:not(.capture-requested) .chapter-rail {
    gap: 0.2rem;
    margin: 0;
    padding: 0.7rem 0.6rem 0;
  }

  html:not(.capture-requested) .chapter-rail li {
    display: flex;
    min-height: 36px;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.4rem;
    font-size: 0.8rem;
    overflow-wrap: anywhere;
  }

  html:not(.capture-requested) .chapter-rail li span {
    margin: 0;
  }

  html:not(.capture-requested) .chapter-rail li[aria-current="step"] {
    justify-content: flex-start;
    gap: 0.35rem;
  }

  html:not(.capture-requested) .guided-main,
  html:not(.capture-requested) .guided-finish {
    padding: 1rem;
  }

  html:not(.capture-requested) .guided-main h3,
  html:not(.capture-requested) .guided-finish h3 {
    font-size: 1.8rem;
  }

  html:not(.capture-requested) .guided-lesson-shot {
    margin: 1rem 0;
  }

  html:not(.capture-requested) .guided-task {
    grid-template-columns: 1fr;
    gap: 0.9rem;
    margin-top: 1rem;
  }

  html:not(.capture-requested) .guided-picture-preview .explanation-shot img {
    height: 13.75rem;
  }

  html:not(.capture-requested) .guided-picture-preview .explanation-shot > figcaption {
    padding: 0.6rem;
    gap: 0.35rem;
  }

  html:not(.capture-requested) .guided-picture-preview .explanation-shot > figcaption strong,
  html:not(.capture-requested) .guided-picture-preview .explanation-shot > figcaption span {
    font-size: 0.74rem;
  }

  html:not(.capture-requested) #course-types-drawer .vertical-title {
    min-height: 0;
  }

  html:not(.capture-requested) .guided-instruction {
    font-size: 1rem;
  }

  html:not(.capture-requested) .depth-drawer {
    width: calc(100% - 1rem);
  }

  html:not(.capture-requested) .depth-drawer > summary {
    min-height: 6rem;
    padding: 0.9rem 1rem;
  }
}
/* Short course practice: real source snapshots when reviewed, a labelled guide
   diagram until then. No fabricated app chrome or model results. */
.course-practice-picture { margin: 0; border: 1px solid var(--control-edge); min-width: 0; }
.course-practice-picture img { display: block; width: 100%; height: auto; }
.course-practice-picture figcaption { padding: 0.8rem; font-size: 0.9rem; line-height: 1.5; }
.course-practice-diagram { display: grid; align-content: center; min-height: 16rem; }
.course-practice-diagram > div { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 0.6rem; padding: 1rem; }
.course-practice-diagram span { border-block: 1px solid var(--control-edge); padding: 1rem 0; font-weight: 700; }
.course-practice-diagram b { color: var(--text-dim); }
.course-advanced ol { padding-left: 1.25rem; line-height: 1.7; }
.course-advanced a { overflow-wrap: anywhere; }
.course-live-module { margin-top: 0.8rem; padding: 0.75rem; border: 1px solid var(--control-edge); min-width: 0; }
.course-live-module > summary { cursor: pointer; font-weight: 700; }
.course-live-module > p { font-size: 0.9rem; line-height: 1.5; }
.course-live-module iframe { display: block; width: 100%; min-height: 44rem; border: 1px solid var(--control-edge); margin-block: 0.75rem; background: var(--screen); }
@media (max-width: 42rem) {
  .course-practice-diagram { min-height: 12rem; }
  .course-practice-diagram > div { gap: 0.35rem; font-size: 0.86rem; }
}

/* What the learner actually did in an app, brought back into the lesson.
   Observation only: it never claims a completed, saved or published result. */
html:not(.capture-requested) .lesson-receipt {
  margin: 1.1rem 0;
  padding: 16px 18px;
  background: var(--surface);
  color: var(--text);
}
html:not(.capture-requested) .lesson-receipt__head { margin: 0 0 0.35rem; font-weight: 700; }
html:not(.capture-requested) .lesson-receipt[data-tried="true"] .lesson-receipt__head::before { content: "\2713 "; color: var(--text-dim); }
html:not(.capture-requested) .lesson-receipt__list { margin: 0 0 0.35rem; padding-left: 1.1rem; }
html:not(.capture-requested) .lesson-receipt__list li { margin: 0.15rem 0; }
html:not(.capture-requested) .lesson-receipt__hint,
html:not(.capture-requested) .lesson-receipt__limit { margin: 0.2rem 0 0; color: var(--text-dim); font-size: 0.85rem; }

/* Digital glyphs share the course mark's geometry; text remains the label. */
.header-explore,.primary-action,.quiet-action,.back-action,.app-action,.copy-inline{gap:.35em}
.guide-intro > [data-ui-icon]{padding:.3rem}
.guided-check[data-ui-icon]{padding:.65rem}
.header-tools > summary::after{content:none}
.header-tools[open] > summary::after{content:none}

/* Phones: Lessons and Tools show their icon only (the words stay for screen readers), so the
   wordmark keeps its whole name on one line beside them and the switch, down to 360px. */
@media (max-width: 639px) {
  .header-explore .header-label,
  .header-tools > summary .header-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .header-explore,
  .header-tools > summary { width: 44px; min-width: 44px; height: 44px; padding: 0; }
  /* The round buttons sit 6px apart here, so their ring hugs them (1px off, 3px wide): it never runs into the
     next button's edge, and in light it lies on paper, not on the ink shadow beside it. */
  .site-header :is(.theme-switch, .header-explore, .header-tools > summary, .guide-meter):focus-visible { outline-offset: 1px; }
}
/* Phones: the guide meter's light joins the header row only once Jev has answered this visit. Before that it has
   nothing to tell a visitor ("Jev off", "Jev on", a check), and a fourth round button would push the site's name
   off the first screen. Once it is there, the name would not fit under 420px: only then is it read, not shown
   (the link keeps its name, "Product Starting Lab home"). */
@media (max-width: 639px) {
  .site-header .guide-meter:not([data-answered]) { display: none; }
}
@media (max-width: 419px) {
  .site-header:has(.guide-meter[data-answered]:not([hidden])) .wordmark strong { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}
/* Under 360px (a 320px phone, or a large display size) the Lab's three header buttons leave no room for the
   name either: it is read, not shown, there too. The case, videos and player pages have one button and keep it. */
@media (max-width: 359px) {
  .site-header:has(.header-explore) .wordmark strong { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}
/* Phones: the Tools menu is a sheet across the screen inside the 16px gutters, just under the header, so
   nothing of the page shows beside it; its rows are a little tighter (and tighter still on a short phone, below). */
@media (max-width: 639px) {
  .header-tools { position: static; }
  .suite-nav { top: calc(100% + 8px); right: 16px; left: 16px; width: auto; }
  .suite-nav a { padding-block: 0.5rem; }
}
/* Nine apps since IndustrialPM joined (2026-10): on a short phone (360x740) the rows close up a little more, so
   all nine still fit without scrolling inside the menu. Taller phones keep the spacing above. */
@media (max-width: 639px) and (max-height: 780px) {
  .suite-nav { padding: 4px; }
  .suite-nav a { gap: 0; padding-block: 0.3rem; }
}
/* Laptops: the menu's right edge lines up with the header's own (under the switch beside Tools), so on a wide
   screen it opens well clear of the entrance's lime button instead of 2px from it. */
@media (min-width: 1024px) {
  .suite-nav { right: calc(-44px - 10px); }
}

/* ---- Lesson player: the page around the frame and the controls under it ----
   (player.html and the Lab's watch sheet; the frame itself is player.css's and never changes.)
   Colours, edges and type are theme.css's roles, so both themes work. */
:where(.lesson-player) { color: var(--text); }
:where(.lesson-player) .lesson-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; margin-top: 0.75rem; }
:where(.lesson-player) .lesson-play {
  display: inline-flex; align-items: center; gap: 0.45rem;
  min-width: 44px; min-height: 44px; padding: 0 16px;
  font-size: 0.95rem; cursor: pointer;
}
/* Each dot's list item is a plain box, so a page's own list styles (margins, line boxes) never
   lift the dots off the row the Play button sits on. */
:where(.lesson-player) .lesson-dots { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; }
:where(.lesson-player) .lesson-dots > li { display: flex; margin: 0; padding: 0; line-height: 0; }
:where(.lesson-player) .lesson-dot { position: relative; display: block; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; }
:where(.lesson-player) .lesson-dot::before { content: ""; position: absolute; left: 15px; top: 15px; width: 14px; height: 14px; box-sizing: border-box; border: var(--ol-thin) solid var(--control-edge); border-radius: 50%; }
/* The scene on screen is a pill: the shape, not a colour, says "here". */
:where(.lesson-player) .lesson-dot[aria-current="step"]::before { width: 30px; left: 7px; border-radius: var(--pill); border-color: var(--edge); background: var(--picked); }
:where(.lesson-player) .lesson-dot:focus-visible { outline: 3px solid var(--focus); outline-offset: -4px; border-radius: var(--pill); }
/* Download video: a text link (theme.css's role) right after the dots, 44px tall; on a phone it takes the next line. */
:where(.lesson-player) .lesson-download { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; margin-left: 0.25rem; padding: 0 0.25rem; font-size: 0.95rem; white-space: nowrap; }
:where(.lesson-player) .lesson-download [data-ui-icon] { flex: none; }
/* The screen's bezel, on the page and in the Lab's sheet: a ring the room's colour can see (plum on
   night, ink on paper) and the hard shadow. Drawn outside the frame: nothing inside it changes. */
:where(.lesson-holder, #info-sheet) .lesson-frame { border-radius: var(--r); box-shadow: 0 0 0 var(--ol) var(--rule), var(--pop-lg) var(--pop-lg) 0 var(--ol) var(--edge); }
/* In the Lab's sheet the sheet is the sticker: the screen keeps only its ring there. */
:where(#info-sheet) .lesson-frame { box-shadow: 0 0 0 var(--ol) var(--rule); }
/* The controls are painted after the frame (both positioned) and sit clear of the screen's hard shadow (up to 12px
   plus a 5px spread on a laptop, 6px plus 3px on a phone), so Play's focus ring is whole and on the room. */
:where(.lesson-holder) .lesson-controls { position: relative; margin-top: 1.1rem; }
@media (min-width: 640px) { :where(.lesson-holder) .lesson-controls { margin-top: 1.6rem; } }
/* The page's own column lets the screen's shadow show (main clips sideways overflow elsewhere). */
body.tutorial-page main.lesson-page { overflow: visible; }

body.tutorial-page, body.tutorial-embed { margin: 0; }
body.tutorial-embed .lesson-embed-holder { padding: 16px; }
body.tutorial-page .lesson-page { width: min(62rem, 100% - 32px); margin: 0.75rem auto 3rem; }
/* The screen is as wide as the column, but never so tall that the page's one door ("Open … in …") and the
   next video's link fall under a laptop's first screen: its width follows the window's height (425px is the
   header, the heading above the screen and the controls, the door and the link under it). On a short window
   it keeps 33rem, wide enough for the frame's wide layout (the tall phone layout starts under 520px). */
body.tutorial-page .lesson-holder { width: min(100%, max(33rem, calc((100svh - 425px) * 16 / 9))); }
body.tutorial-page .lesson-back { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; }
/* The kicker keeps its 44px line, so the "i" sits on it without lifting the heading. */
body.tutorial-page .lesson-kicker { display: block; margin: 0.25rem 0 0; line-height: 44px; }
body.tutorial-page .lesson-kicker-words { line-height: 1.4; }
body.tutorial-page .lesson-kicker-place { white-space: nowrap; }
body.tutorial-page .lesson-heading .lp-nobr { white-space: nowrap; }
body.tutorial-page .lesson-kicker-tail { white-space: nowrap; }
@media (max-width: 520px) {
  body.tutorial-page .lesson-kicker-question { display: block; line-height: 1.4; }
  body.tutorial-page .lesson-kicker-sep { display: none; }
  body.tutorial-page .lesson-kicker-place { white-space: normal; }
}
body.tutorial-page .lesson-info {
  display: inline-grid; place-items: center; width: 44px; height: 44px; margin-left: 0.15rem; padding: 0; vertical-align: middle;
  border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer;
}
body.tutorial-page .lesson-info-mark::before { content: "i"; }
body.tutorial-page .lesson-heading { max-width: none; margin: 0.1rem 0 0.9rem; font-size: clamp(1.6rem, 3.4vw, 2.2rem); font-weight: 800; line-height: 1.08; letter-spacing: -0.03em; }
body.tutorial-page .lesson-doors { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.2rem; margin-top: 1rem; }
body.tutorial-page .lesson-open { gap: 0.45rem; }
/* The quiet way on, under the one door: the next video in the path, or, after the last one, what
   the path was for and the way back to its eight questions. */
body.tutorial-page .lesson-next-row { margin: 0.35rem 0 0; }
body.tutorial-page .lesson-next { display: inline-flex; align-items: center; min-height: 44px; }
body.tutorial-page .lesson-path-close { margin-top: 1.1rem; padding-top: 0.9rem; border-top: var(--ol-thin) solid var(--divider); }
body.tutorial-page .lesson-promise { max-width: 40rem; margin: 0; font-size: 1.1rem; font-weight: 700; line-height: 1.4; }
body.tutorial-page .lesson-dialog { width: min(40rem, 100% - 32px); max-height: 88vh; padding: 0; }
body.tutorial-page .lesson-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 14px 14px 14px 22px; }
body.tutorial-page .lesson-dialog-title { margin: 0; font-size: 1.25rem; font-weight: 800; }
body.tutorial-page .lesson-dialog-close { width: 44px; height: 44px; cursor: pointer; }
body.tutorial-page .lesson-dialog-body { padding: 18px 22px 22px; }
body.tutorial-page .lesson-dialog-body p { margin: 0 0 0.5rem; line-height: 1.45; }

/* Who does the work (over the idea box): Dot (automatic mode, the default, the lime pill) or step by step by hand. */
.lead-mode { display: inline-flex; gap: 6px; margin: 14px auto 4px; padding: 4px; border: var(--ol-thin, 2px) solid var(--control-edge, currentColor); border-radius: 999px; background: var(--surface); }
.lead-mode-option { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 16px; border: 0; border-radius: 999px; color: var(--text-dim); background: transparent; font: 700 0.95rem/1.1 var(--display, inherit); cursor: pointer; }
.lead-mode-option[aria-pressed="true"] { color: var(--on-accent); background: var(--accent); box-shadow: 0 0 0 2px var(--edge) inset; }
.lead-mode-option:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.lead-mode-dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid currentColor; }
.lead-mode-option[aria-pressed="true"] .lead-mode-dot { background: currentColor; }
.lead-dot-door { display: inline-block; margin-left: 18px; font-weight: 700; }
.lead-dot-door[hidden] { display: none; }