/* Self-hosted OFL faces. See assets/fonts/LICENSE.*.txt. */
@font-face {
  font-family: "Roboto Slab";
  src: url("./assets/fonts/roboto-slab-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("./assets/fonts/public-sans-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("./assets/fonts/public-sans-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
/* The mat is the ground: cobalt panel, chalk lines, red only where a wrestler
   is warned. Every on-colour pair is named so a scheme switch cannot invert
   one half of it. */
:root {
  color-scheme: dark;
  --bg: #123353;
  --paper: #17406a;
  --raised: #1c4d7f;
  --ink: #eef4fa;
  --muted: #a8c3dd;
  --line: #2f689e;
  --accent: #eef4fa;
  --accent-ink: #10304e;
  --stage: #eef4fa;
  --stage-bg: #0f2b46;
  /* The red is a surface colour (a warning band, the out-of-bounds line). As
     text it is too dark against the lighter panel blue, so destructive labels
     use the tinted --warn-text, which clears 4.5:1 on every surface here. */
  --warn: #ff6a53;
  --warn-ink: #2a0d08;
  --warn-text: #ff9b88;
  --radius: 3px;
  --heading: "Roboto Slab", Georgia, serif;
  --sans: "Public Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  font-synthesis: none;
}
/* The light scheme: chalk ground, navy ink, the mat blue kept for the accent
   and the stage, red kept for warnings. Every token above is redefined here.
   The block is written twice on purpose: once for the explicit choice, once for
   a system preference that no choice overrides; CSS cannot share one block
   between a media query and an attribute selector. Posters and the stage keep
   their own dark ground in both schemes. */
:root[data-scheme="light"] {
  color-scheme: light;
  --bg: #f2f5f8;
  --paper: #ffffff;
  --raised: #e4ebf2;
  --ink: #10304e;
  --muted: #43607c;
  --line: #b8c9da;
  --accent: #123353;
  --accent-ink: #eef4fa;
  --stage: #eef4fa;
  --stage-bg: #10304e;
  --warn: #b3261e;
  --warn-ink: #ffffff;
  --warn-text: #9b1c12;
}
/* The panels that stand on the stage's ground keep the mat palette in both
   schemes: the same values as the dark tokens above, so this is a no-op there
   and the on-colour pairs inside them stay readable on chalk. */
.session-summary,
.note-panel,
.entry-note,
.study-canvas,
.composer-canvas,
.player-visual,
.atlas-map,
.drill-card,
.mat-resume,
.position-rows a:hover {
  --bg: #123353;
  --paper: #17406a;
  --raised: #1c4d7f;
  --ink: #eef4fa;
  --muted: #a8c3dd;
  --line: #2f689e;
  --accent: #eef4fa;
  --accent-ink: #10304e;
  --warn-text: #ff9b88;
  color: var(--ink);
}
@media (prefers-color-scheme: light) {
  :root:not([data-scheme="dark"]) {
    color-scheme: light;
    --bg: #f2f5f8;
    --paper: #ffffff;
    --raised: #e4ebf2;
    --ink: #10304e;
    --muted: #43607c;
    --line: #b8c9da;
    --accent: #123353;
    --accent-ink: #eef4fa;
    --stage: #eef4fa;
    --stage-bg: #10304e;
    --warn: #b3261e;
    --warn-ink: #ffffff;
    --warn-text: #9b1c12;
  }
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  line-height: 1.5;
}
button,
input,
select,
textarea {
  font: inherit;
}
button,
a,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}
button,
a {
  touch-action: manipulation;
}
button {
  cursor: pointer;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  color: inherit;
}
button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 4px;
}
button {
  border: 0;
  background: none;
}
h1,
h2,
h3,
p,
figure {
  margin: 0;
}
h1,
h2,
h3 {
  font-family: var(--heading);
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -0.045em;
}
h1 {
  font-size: clamp(44px, 6vw, 84px);
}
h2 {
  font-size: clamp(30px, 3.4vw, 48px);
}
h3 {
  font-size: 28px;
}
p {
  color: var(--muted);
}
small,
.fine {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.65;
}
.eyebrow {
  font-size: 11px;
  letter-spacing: 0.14em;
  font-weight: 700;
  line-height: 1.5;
  color: var(--muted);
}
.skip {
  position: fixed;
  z-index: 100;
  left: 20px;
  top: -100px;
  background: var(--accent);
  padding: 12px;
}
.skip:focus {
  top: 12px;
}
main {
  max-width: 1440px;
  margin: auto;
  padding: 0 56px 80px;
  min-height: 70vh;
  outline: none;
}
main:fullscreen {
  background: var(--bg);
  padding: 30px;
  overflow: auto;
}
.site-header {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 0 56px;
  border-bottom: 1px solid var(--line);
  max-width: 1552px;
  margin: auto;
}
.brand {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.06em;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.brand-mark {
  width: 32px;
  height: 36px;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: var(--bg);
  font-size: 27px;
  line-height: 1;
  border-radius: 3px;
}
.site-header nav {
  display: flex;
  gap: 24px;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
}
.site-header nav a {
  padding: 15px 0;
  position: relative;
}
.site-header nav a[aria-current="page"]:after {
  position: absolute;
  content: "";
  bottom: 5px;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--ink);
}
.header-cta {
  border: 1px solid var(--ink);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  gap: 25px;
  padding: 12px 16px;
  border-radius: var(--radius);
}
.header-cta span {
  font-size: 18px;
  line-height: 1;
}
.hero {
  display: grid;
  grid-template-columns: 1.06fr 1fr;
  gap: 48px;
  padding: 62px 0 48px;
  align-items: center;
}
.hero-copy h1 {
  margin: 27px 0 25px;
  line-height: 0.97;
}
.hero-copy .intro {
  font-size: 17px;
  max-width: 390px;
  line-height: 1.7;
}
.status-dot {
  display: inline-block;
  background: currentColor;
  height: 7px;
  width: 7px;
  border-radius: 50%;
  margin-right: 8px;
}
.hero-photo {
  position: relative;
  height: 515px;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--stage-bg);
}
.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-photo:after {
  content: "";
  position: absolute;
  inset: 50% 0 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.55));
  pointer-events: none;
}
.hero-photo figcaption {
  position: absolute;
  z-index: 1;
  bottom: 22px;
  left: 24px;
  right: 24px;
  display: flex;
  justify-content: space-between;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.hero-actions {
  display: flex;
  gap: 25px;
  align-items: center;
  margin: 32px 0;
}
.button {
  /* Buttons do not inherit colour from the page, so on-colour is explicit here
     and overridden only by .primary. Without it a transparent .quiet button
     falls back to the user agent's own button colour. */
  color: var(--ink);
  min-height: 46px;
  padding: 13px 20px;
  border-radius: var(--radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  transition:
    transform 0.15s,
    background 0.15s;
}
.button:hover {
  transform: translateY(-2px);
}
.primary {
  background: var(--accent);
  color: var(--accent-ink);
}
.secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
}
.quiet {
  background: transparent;
  color: var(--ink);
  padding-left: 12px;
  padding-right: 12px;
}
.quiet.danger {
  color: var(--warn-text);
}
.text-link {
  font-size: 12px;
  font-weight: 700;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 16px;
  font-size: 10px;
  color: var(--muted);
  margin-top: 40px;
}
.hero-proof span + span:before {
  content: "·";
  margin-right: 16px;
}
.start-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  gap: 20px;
}
.start-strip div {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
}
.start-strip b {
  color: var(--muted);
  font-size: 11px;
  border: 1px solid var(--line);
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  border-radius: 50%;
}
.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin: 56px 0 24px;
}
.section-head h2 {
  font-size: 34px;
  margin-top: 10px;
}
.program-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.program-card {
  padding: 28px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
}
.card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.pill {
  display: inline-block;
  font-size: 10px;
  border: 1px solid var(--line);
  border-radius: 50px;
  padding: 5px 10px;
  white-space: nowrap;
  color: var(--ink);
}
.program-card h3 {
  margin: 28px 0 14px;
}
.program-card p {
  font-size: 13px;
  min-height: 42px;
  line-height: 1.7;
}
.program-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  font-size: 11px;
  color: var(--muted);
  margin: 24px 0 14px;
}
.program-meta span + span:before {
  content: "·";
  margin-right: 15px;
}
.card-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 50px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  font-weight: 700;
  margin-top: 20px;
  padding: 15px 0 0;
  text-align: left;
}
.card-link span {
  font-size: 23px;
}
.feature-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 70px 0 60px;
  gap: 72px;
  align-items: center;
}
.feature-split h2 {
  white-space: pre-line;
  margin: 18px 0 20px;
}
.feature-split p {
  max-width: 400px;
  font-size: 15px;
  line-height: 1.8;
}
.feature-split .button {
  margin-top: 28px;
}
.feature-art {
  background: var(--stage-bg);
  color: var(--stage);
  height: 330px;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
}
.feature-art > span {
  font-size: 54px;
  letter-spacing: -0.06em;
  line-height: 1;
  font-weight: 700;
  z-index: 1;
  white-space: pre-line;
}
.orbit {
  position: absolute;
  border: 1px solid currentColor;
  opacity: 0.18;
  border-radius: 50%;
  width: 250px;
  height: 250px;
}
.o1 {
  left: -20px;
}
.o2 {
  right: -20px;
}
.o3 {
  width: 370px;
  height: 370px;
}
.faq {
  border-top: 1px solid var(--line);
}
details {
  border-bottom: 1px solid var(--line);
  padding: 22px 0;
}
summary {
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  min-height: 28px;
}
details p {
  max-width: 850px;
  margin-top: 16px;
  line-height: 1.8;
  font-size: 14px;
}
footer {
  max-width: 1552px;
  margin: auto;
  border-top: 1px solid var(--line);
  padding: 40px 56px;
  display: flex;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
}
footer p {
  font-size: 12px;
}
footer > div {
  margin-left: auto;
  display: flex;
  gap: 20px;
  font-size: 11px;
}
footer a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
footer small {
  flex-basis: 100%;
  font-size: 10px;
}
.page-title {
  padding: 56px 0 36px;
  max-width: 950px;
}
.page-title h1 {
  font-size: clamp(38px, 4.6vw, 62px);
  margin: 18px 0;
}
.page-title > p:last-child:not(:first-child) {
  font-size: 16px;
  max-width: 620px;
}
.filterbar {
  display: flex;
  gap: 22px;
  align-items: end;
  margin: 12px 0 24px;
}
.search-label {
  flex: 1;
}
label {
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}
input,
select,
textarea {
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink);
  min-height: 46px;
  padding: 12px 14px;
  border-radius: var(--radius);
  width: 100%;
  min-width: 0;
  line-height: 1.4;
}
select {
  padding-right: 30px;
}
textarea {
  resize: vertical;
}
.check-label {
  flex-direction: row;
  align-items: center;
  min-height: 46px;
  padding: 0 10px;
  white-space: nowrap;
}
.check-label input,
input[type="checkbox"] {
  width: 19px;
  min-height: 19px;
  height: 19px;
  accent-color: var(--ink);
}
.chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 28px;
}
.chip {
  padding: 11px 18px;
  font-size: 12px;
  border: 1px solid var(--line);
  border-radius: 50px;
  min-height: 44px;
  background: var(--paper);
}
.chip.active {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.drill-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.drill-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper);
}
.drill-art {
  background: var(--stage-bg);
  color: var(--stage);
  display: block;
  position: relative;
  width: 100%;
  height: 225px;
  overflow: hidden;
  padding: 0;
}
.drill-art svg {
  height: 100%;
  width: 100%;
}
.art-arrow {
  position: absolute;
  right: 15px;
  bottom: 15px;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: var(--paper);
  color: var(--ink);
  font-size: 18px;
}
.drill-body {
  padding: 20px 24px;
}
.favorite {
  width: 44px;
  height: 44px;
  font-size: 25px;
}
.drill-body h2 {
  font-size: 24px;
  margin: 4px 0 14px;
}
.drill-body h2 button {
  text-align: left;
  font: inherit;
  letter-spacing: inherit;
  padding: 0;
  min-height: 44px;
}
.drill-body p {
  font-size: 13px;
  line-height: 1.75;
  min-height: 65px;
}
.drill-body .program-meta {
  margin-bottom: 0;
}
.empty {
  padding: 60px 30px;
  border: 1px dashed var(--line);
  text-align: center;
  grid-column: 1/-1;
}
.empty h2 {
  font-size: 26px;
}
.empty p {
  max-width: 450px;
  margin: 20px auto;
}
.empty-mark {
  font-size: 50px;
  display: block;
  margin-bottom: 24px;
}
.study-layout,
.composer-layout {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 48px;
}
.study-canvas,
.composer-canvas {
  padding: 24px;
  background: var(--stage-bg);
  border-radius: var(--radius);
  color: var(--stage);
}
.study-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.study-label .eyebrow {
  color: var(--stage);
}
.motion-stage {
  max-width: 650px;
  margin: auto;
  width: 100%;
  color: var(--stage);
}
.motion-stage svg {
  display: block;
  width: 100%;
  height: auto;
}
.study-progress {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.beat {
  border: 1px solid var(--line);
  padding: 10px 12px;
  border-radius: 4px;
  font-size: 11px;
  min-height: 44px;
  background: var(--paper);
  color: var(--ink);
}
.beat.selected {
  background: var(--ink);
  color: var(--bg);
}
.beat span {
  margin-left: 5px;
}
.study-controls {
  display: flex;
  gap: 10px;
  align-items: end;
  flex-wrap: wrap;
  margin: 25px 0 16px;
}
.study-controls label {
  font-size: 10px;
}
.study-controls select {
  min-height: 44px;
}
.study-notes {
  padding: 22px 0;
}
.study-notes h2 {
  margin: 20px 0;
  font-size: 42px;
}
.study-notes > p {
  line-height: 1.8;
}
.cue-list {
  list-style: none;
  counter-reset: cue;
  padding: 0;
  margin: 28px 0;
}
.cue-list li {
  counter-increment: cue;
  position: relative;
  padding: 18px 0 18px 40px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.8;
}
.cue-list li:before {
  content: "0" counter(cue);
  position: absolute;
  left: 0;
  font-size: 11px;
  color: var(--muted);
}
.full {
  width: 100%;
  margin-top: 12px;
}
.study-notes .fine {
  margin-top: 24px;
}
.builder-layout {
  display: grid;
  grid-template-columns: 1.65fr 1fr;
  gap: 35px;
  align-items: start;
}
.builder-toolbar {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  align-items: end;
  margin-bottom: 24px;
}
.builder-toolbar > label {
  flex: 1;
}
.builder-toolbar > div {
  display: flex;
  gap: 5px;
}
.block {
  display: flex;
  gap: 18px;
  padding: 22px 18px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 14px;
}
.block-num {
  font-size: 13px;
  font-weight: 700;
  margin-top: 25px;
}
.block-main {
  flex: 1;
  min-width: 0;
}
.block-inputs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 16px;
}
.block-actions {
  display: flex;
  flex-direction: column;
}
.block-actions button,
.icon-button {
  min-width: 44px;
  min-height: 44px;
  font-size: 21px;
}
.add-block {
  border: 1px dashed var(--muted);
  width: 100%;
  padding: 18px;
  min-height: 54px;
  font-size: 13px;
  border-radius: var(--radius);
}
.session-summary {
  padding: 30px;
  background: var(--stage-bg);
  color: var(--stage);
  border-radius: var(--radius);
  position: sticky;
  top: 24px;
}
.summary-time {
  font-size: clamp(50px, 5vw, 80px);
  font-weight: 600;
  letter-spacing: -0.07em;
  line-height: 1.3;
  margin: 16px 0;
}
.summary-stats {
  display: flex;
  gap: 25px;
  font-size: 12px;
}
.summary-stats b {
  font-size: 18px;
  margin-right: 5px;
}
.timeline {
  display: flex;
  gap: 4px;
  margin: 25px 0;
}
.timeline > div {
  min-width: 14px;
  height: 36px;
  display: grid;
  place-items: center;
  background: var(--stage);
  color: var(--stage-bg);
  font-size: 10px;
  border-radius: 2px;
}
.session-summary p {
  font-size: 13px;
  /* The panel keeps the stage's dark ground in both schemes, so its text takes
     the stage's chalk rather than the page's muted ink, which is navy in the
     light scheme and failed contrast there. */
  color: var(--stage);
}
.session-notice {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  line-height: 1.8;
}
.custom-sequence {
  font-size: 11px;
  margin-top: 10px;
}
.sequence-track {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sequence-track button {
  background: var(--paper);
  color: var(--ink);
  padding: 14px;
  display: flex;
  gap: 14px;
  align-items: center;
  border-radius: var(--radius);
  min-height: 50px;
  font-size: 10px;
}
.sequence-track b {
  font-size: 12px;
}
.sequence-track span {
  font-size: 18px;
}
.action-palette {
  padding: 24px 0;
}
.action-palette h2 {
  margin: 18px 0 25px;
}
.action-palette > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.action-palette > div button {
  padding: 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  min-height: 48px;
  text-align: left;
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.atlas-layout {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 48px;
  align-items: start;
}
.atlas-map {
  position: relative;
  aspect-ratio: 1;
  min-height: 370px;
  background: var(--stage-bg);
  border-radius: var(--radius);
  color: var(--stage);
}
.atlas-map > svg {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}
.atlas-legend {
  position: absolute;
  left: 20px;
  right: 20px;
  top: 20px;
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  letter-spacing: 0.1em;
}
.position-node {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 15px;
  min-height: 50px;
  padding: 14px 16px;
  white-space: nowrap;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 12px;
}
.position-node.selected {
  background: var(--stage);
  color: var(--stage-bg);
}
.atlas-map > .fine {
  position: absolute;
  bottom: 18px;
  left: 24px;
  right: 24px;
  font-size: 10px;
}
.position-detail {
  padding: 24px 0;
}
.position-detail h2 {
  margin: 22px 0;
}
.position-detail blockquote {
  font-family: Georgia, serif;
  font-size: 28px;
  line-height: 1.45;
  margin: 24px 0;
}
.position-detail > p {
  font-size: 14px;
  line-height: 1.8;
}
.linked-positions {
  margin-top: 30px;
}
.linked-positions .eyebrow {
  margin-bottom: 12px;
}
.linked-positions button {
  margin: 5px;
}
.journal-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 25px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: 30px;
}
.journal-stats > div {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.journal-stats b {
  font-size: 44px;
  line-height: 1.2;
  letter-spacing: -0.05em;
}
.journal-stats span {
  font-size: 12px;
  color: var(--muted);
}
.journal-layout {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
}
.journal-layout .section-head {
  margin-top: 5px;
}
.journal-list article {
  padding: 24px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 18px;
}
.journal-list h3 {
  font-size: 25px;
  margin: 10px 0;
}
.entry-note {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 14px;
}
.note-panel {
  padding: 30px;
  background: var(--stage-bg);
  border-radius: var(--radius);
  align-self: start;
}
.note-panel h2 {
  font-size: 30px;
  margin: 18px 0 24px;
}
.note-panel form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.form-row {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 16px;
}
.settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}
.panel {
  padding: 32px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.panel h2 {
  font-size: 29px;
  margin-bottom: 24px;
}
.panel p {
  font-size: 14px;
  line-height: 1.8;
  margin: 18px 0;
}
.toggle-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.toggle-row span {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.toggle-row small {
  font-weight: 400;
  max-width: 320px;
}
.file-label {
  margin: 24px 0 10px;
}
.file-label input {
  font-size: 12px;
  padding: 10px;
}
.danger {
  color: var(--warn-text);
}
.player-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 0;
  gap: 20px;
}
.player {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 30px;
  align-items: center;
  min-height: 550px;
}
.player-left {
  padding: 24px 0;
}
.player-state {
  display: flex;
  /* The slab and grotesk pair is wider than the previous system font, so the
     phase and round labels are allowed to wrap rather than force an overflow
     at 320 px. */
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: center;
  font-size: 11px;
  letter-spacing: 0.1em;
  font-weight: 700;
}
.player-state #round-label {
  margin-left: auto;
  color: var(--muted);
}
.player h1 {
  font-size: 36px;
  margin-top: 35px;
  min-height: 80px;
}
.player-clock {
  font-size: clamp(90px, 12vw, 165px);
  font-weight: 600;
  letter-spacing: -0.09em;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.player progress {
  display: block;
  width: 100%;
  height: 5px;
  border: 0;
  background: var(--line);
  accent-color: var(--ink);
  margin: 25px 0;
}
.player progress::-webkit-progress-bar {
  background: var(--line);
}
.player progress::-webkit-progress-value {
  background: var(--ink);
}
#player-cue {
  min-height: 54px;
  font-size: 14px;
  max-width: 420px;
}
.player-controls {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 20px 0;
}
.player-visual {
  background: var(--stage-bg);
  padding: 24px;
  border-radius: var(--radius);
  color: var(--stage);
}
.action-label {
  text-align: center;
  font-size: 24px;
  color: var(--stage);
  font-weight: 600;
}
.player-visual .fine {
  text-align: center;
  margin: 20px 0 10px;
}
.player-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid var(--line);
  padding: 25px 0;
  font-size: 10px;
  color: var(--muted);
}
.storage-warning {
  padding: 15px 30px;
  background: var(--warn);
  color: var(--warn-ink);
  font-size: 13px;
  text-align: center;
}
.storage-warning[hidden] {
  display: none;
}
#toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translate(-50%, 25px);
  background: var(--ink);
  color: var(--bg);
  padding: 16px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 13px;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: 0.2s;
  width: max-content;
  max-width: calc(100% - 32px);
  box-shadow: 0 12px 40px #0002;
}
#toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}
dialog {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 35px;
  max-width: 470px;
  width: calc(100% - 32px);
  color: var(--ink);
  background: var(--paper);
}
dialog::backdrop {
  background: #061726cc;
  backdrop-filter: blur(5px);
}
dialog h2 {
  font-size: 30px;
}
dialog p {
  margin: 22px 0;
  font-size: 14px;
  line-height: 1.8;
}
.dialog-actions {
  display: flex;
  gap: 12px;
  justify-content: end;
}
.large-controls .button,
.large-controls input,
.large-controls select {
  min-height: 60px;
  font-size: 16px;
}
.policy {
  max-width: 800px;
  margin: auto;
  padding-top: 60px;
}
.policy h1 {
  font-size: 52px;
  margin-bottom: 30px;
}
.policy h2 {
  font-size: 28px;
  margin: 35px 0 18px;
}
.policy p,
.policy li {
  font-size: 15px;
  line-height: 1.9;
  margin-bottom: 18px;
}
.policy a {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.policy .button {
  text-decoration: none;
}
.reduced-motion * {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
body {
  background: var(--bg);
  color: var(--ink);
}
.hero-boxing .hero-photo {
  height: 540px;
  transform: rotate(1.5deg);
}
.hero-boxing h1 {
  text-transform: uppercase;
  font-weight: 850;
  letter-spacing: -0.075em;
  font-size: clamp(50px, 6.8vw, 96px);
}

.hero-wrestling {
  grid-template-columns: 1fr 1.15fr;
  gap: 50px;
}
.hero-wrestling .hero-photo {
  border-radius: 50% 50% 6px 6px;
  height: 490px;
}
.hero-wrestling h1 {
  font-weight: 800;
  letter-spacing: -0.06em;
}
.hero-wrestling .hero-proof {
  padding: 15px 0;
  border-top: 2px solid var(--ink);
  margin-top: 30px;
}

body[data-theme="wrestling"] .start-strip {
  border-top: 3px solid var(--ink);
  border-bottom: 0;
}
body[data-theme="wrestling"] .program-card {
  border-top: 5px solid var(--accent);
}
body[data-theme="wrestling"] .feature-art {
  border-radius: 50%;
  aspect-ratio: 1;
  height: auto;
  max-width: 400px;
  margin: auto;
  width: 100%;
}
.hero-muaythai {
  grid-template-columns: 1fr 1fr;
  gap: 60px;
}
.hero-muaythai .hero-photo {
  border-radius: 150px 150px 3px 3px;
  height: 560px;
}
.hero-muaythai h1 {
  font-weight: 400;
  letter-spacing: -0.055em;
  font-size: clamp(50px, 6.7vw, 91px);
}
.hero-bjj {
  grid-template-columns: 1.15fr 1fr;
  gap: 55px;
}
.hero-bjj h1 {
  font-size: clamp(46px, 6vw, 80px);
  font-weight: 400;
  letter-spacing: -0.05em;
}
.hero-bjj .hero-photo {
  height: 450px;
  border-radius: 10px 100px 10px 10px;
}
.hero-bjj .hero-proof {
  max-width: 360px;
}
.hero-bjj .hero-actions {
  flex-wrap: wrap;
  gap: 15px;
}
@media (min-width: 1600px) {
  .site-header {
    padding-left: 80px;
    padding-right: 80px;
  }
}
@media (max-width: 1100px) {
  main {
    padding: 0 32px 60px;
  }
  .site-header {
    padding: 0 32px;
    gap: 20px;
  }
  .site-header nav {
    gap: 15px;
  }
  .settings-link {
    display: none;
  }
  .brand {
    font-size: 17px;
  }
  .header-cta {
    gap: 10px;
  }
  .hero,
  .hero-wrestling,
  .hero-muaythai,
  .hero-bjj {
    gap: 30px;
  }
  .hero-photo,
  .hero-boxing .hero-photo,
  .hero-muaythai .hero-photo {
    height: 440px;
  }
  .hero-actions {
    gap: 14px;
    flex-wrap: wrap;
  }
  .hero-proof {
    font-size: 9px;
  }
  .start-strip {
    gap: 12px;
  }
  .start-strip .eyebrow {
    max-width: 120px;
  }
  .start-strip div {
    font-size: 11px;
    gap: 7px;
  }
  .program-card {
    padding: 23px;
  }
  .program-card h3 {
    font-size: 25px;
  }
  .feature-split {
    gap: 40px;
  }
  .builder-layout {
    grid-template-columns: 1.5fr 1fr;
    gap: 24px;
  }
  .session-summary {
    padding: 23px;
  }
  .block {
    gap: 10px;
    padding: 18px 12px;
  }
  .block-inputs {
    gap: 7px;
  }
  .block-actions button {
    min-width: 38px;
  }
  .journal-layout,
  .study-layout,
  .composer-layout,
  .atlas-layout {
    gap: 28px;
  }
  .study-controls .button {
    padding: 12px;
  }
  .player-clock {
    font-size: 120px;
  }
  .player h1 {
    font-size: 32px;
  }
  footer {
    padding: 30px 32px;
  }
  .study-notes h2 {
    font-size: 35px;
  }
}
@media (max-width: 800px) {
  .site-header {
    height: auto;
    min-height: 90px;
    padding-top: 18px;
    padding-bottom: 14px;
    flex-wrap: wrap;
    gap: 12px;
  }
  .site-header nav {
    order: 3;
    width: 100%;
    /* The labels here are words, not one-word stubs, so the row wraps rather
       than stretching edge to edge and pushing the last item off the page. */
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 4px 22px;
  }
  .site-header nav a {
    font-size: 12px;
    padding: 10px 0;
  }
  .settings-link {
    display: inline-block;
  }
  .header-cta {
    margin-left: auto;
  }
  .hero,
  .hero-wrestling,
  .hero-muaythai,
  .hero-bjj {
    padding-top: 40px;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
  }
  .hero-copy h1 {
    font-size: 55px;
  }
  .hero-copy .intro {
    font-size: 14px;
  }
  .hero-photo,
  .hero-boxing .hero-photo,
  .hero-muaythai .hero-photo,
  .hero-wrestling .hero-photo,
  .hero-bjj .hero-photo {
    height: 400px;
  }
  .hero-proof {
    margin-top: 22px;
    gap: 7px;
  }
  .hero-proof span + span:before {
    margin-right: 8px;
  }
  .hero-photo figcaption {
    left: 15px;
    right: 15px;
    font-size: 7px;
  }
  .hero-photo figcaption span:last-child {
    display: none;
  }
  .start-strip {
    flex-wrap: wrap;
    padding: 22px 0;
  }
  .start-strip > .eyebrow {
    flex-basis: 100%;
    max-width: none;
  }
  .program-grid {
    gap: 14px;
  }
  .program-card {
    padding: 20px;
  }
  .program-card h3 {
    font-size: 23px;
  }
  .program-card .card-top {
    align-items: start;
    flex-direction: column;
  }
  .program-card p {
    font-size: 12px;
  }
  .card-link {
    font-size: 11px;
    gap: 10px;
  }
  .drill-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .study-layout,
  .composer-layout,
  .builder-layout,
  .atlas-layout {
    grid-template-columns: 1fr;
  }
  .session-summary {
    position: static;
  }
  .builder-toolbar {
    gap: 20px;
  }
  .block {
    padding: 20px;
    gap: 20px;
  }
  .block-actions button {
    min-width: 44px;
  }
  .summary-time {
    font-size: 70px;
  }
  .session-summary {
    display: block;
  }
  .study-notes {
    padding: 0;
  }
  .study-notes h2 {
    font-size: 35px;
  }
  .study-layout {
    gap: 10px;
  }
  .study-canvas .motion-stage {
    max-width: 430px;
  }
  .action-palette > div {
    grid-template-columns: repeat(3, 1fr);
  }
  .atlas-map {
    max-width: 560px;
    width: 100%;
    margin: auto;
  }
  .journal-layout {
    grid-template-columns: 1fr;
  }
  .note-panel {
    order: -1;
  }
  .settings-grid {
    grid-template-columns: 1fr;
  }
  .player {
    grid-template-columns: 1fr 1fr;
    min-height: 400px;
    gap: 20px;
  }
  .player-clock {
    font-size: 100px;
  }
  .player-visual {
    padding: 15px;
  }
  .player h1 {
    font-size: 28px;
  }
  .player-heading > .eyebrow {
    max-width: 230px;
  }
  .player-controls .button {
    padding: 12px;
  }
  .feature-split {
    gap: 30px;
  }
  .feature-art {
    height: 280px;
  }
  .feature-art > span {
    font-size: 40px;
  }
  .feature-split h2 {
    font-size: 32px;
  }
  .feature-split p {
    font-size: 13px;
  }
  .section-head h2 {
    font-size: 30px;
  }
  footer > div {
    margin-left: 0;
  }
  footer {
    gap: 15px 30px;
  }
}
@media (max-width: 600px) {
  main {
    padding: 0 20px 48px;
  }
  .site-header {
    padding: 18px 20px 12px;
  }
  .brand {
    font-size: 17px;
  }
  .brand-mark {
    width: 26px;
    height: 30px;
    font-size: 22px;
  }
  .header-cta {
    font-size: 10px;
    padding: 10px 12px;
    min-height: 44px;
  }
  .site-header nav {
    overflow-x: auto;
    white-space: nowrap;
    gap: 20px;
    justify-content: flex-start;
  }
  .hero,
  .hero-wrestling,
  .hero-muaythai,
  .hero-bjj {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 36px 0 34px;
  }
  .hero-copy h1,
  .hero-boxing h1 {
    font-size: 68px;
    margin: 23px 0 20px;
    line-height: 0.97;
  }
  .hero-copy .intro {
    font-size: 15px;
    max-width: 420px;
  }
  .hero-actions {
    margin: 25px 0 20px;
  }
  .hero-proof {
    margin-top: 25px;
    font-size: 10px;
    gap: 10px;
  }
  .hero-photo,
  .hero-boxing .hero-photo,
  .hero-muaythai .hero-photo,
  .hero-wrestling .hero-photo,
  .hero-bjj .hero-photo {
    height: 340px;
    transform: none;
  }
  .hero-wrestling .hero-photo {
    border-radius: 90px 90px 5px 5px;
  }
  .hero-muaythai .hero-photo {
    border-radius: 100px 100px 3px 3px;
  }
  .hero-bjj .hero-photo {
    border-radius: 10px 80px 10px 10px;
  }
  .hero-photo figcaption {
    font-size: 9px;
    left: 20px;
    right: 20px;
  }
  .hero-photo figcaption span:last-child {
    display: block;
  }
  .start-strip {
    gap: 18px 12px;
    display: grid;
    grid-template-columns: 1fr;
  }
  .start-strip div {
    font-size: 13px;
    gap: 14px;
  }
  .start-strip .eyebrow {
    margin-bottom: 5px;
  }
  .program-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .program-card {
    padding: 25px;
  }
  .program-card .card-top {
    flex-direction: row;
    align-items: center;
  }
  .program-card h3 {
    font-size: 30px;
    margin-top: 24px;
  }
  .program-card p {
    min-height: 0;
    font-size: 14px;
  }
  .program-meta {
    font-size: 12px;
  }
  .card-link {
    font-size: 13px;
  }
  .section-head {
    margin-top: 40px;
    align-items: center;
    gap: 15px;
  }
  .section-head h2 {
    font-size: 30px;
  }
  .section-head .text-link {
    font-size: 11px;
    white-space: nowrap;
  }
  .feature-art {
    height: 280px;
  }
  .feature-split h2 {
    font-size: 38px;
  }
  .feature-split p {
    font-size: 15px;
  }
  .page-title {
    padding: 36px 0 25px;
  }
  .page-title h1 {
    font-size: 40px;
  }
  .page-title > p:last-child:not(:first-child) {
    font-size: 14px;
  }
  .filterbar {
    flex-wrap: wrap;
    gap: 16px;
  }
  .search-label {
    flex-basis: 100%;
  }
  .filterbar > label:not(.search-label) {
    flex: 1;
  }
  .check-label {
    padding: 0;
    white-space: normal;
  }
  .drill-grid {
    gap: 14px;
  }
  .drill-art {
    height: 160px;
  }
  .drill-body {
    padding: 12px 15px 18px;
  }
  .drill-body h2 {
    font-size: 22px;
    margin-top: 0;
  }
  .drill-body p {
    font-size: 12px;
    min-height: 0;
  }
  .drill-body .eyebrow {
    font-size: 9px;
    letter-spacing: 0.08em;
  }
  .drill-body .program-meta {
    font-size: 10px;
    gap: 5px;
    margin-top: 16px;
  }
  .program-meta span + span:before {
    margin-right: 8px;
  }
  .drill-body .program-meta span + span:before {
    content: "";
    margin: 0;
  }
  .drill-body .program-meta span {
    display: block;
    flex-basis: 100%;
  }
  .art-arrow {
    width: 30px;
    height: 30px;
    right: 8px;
    bottom: 8px;
  }
  .favorite {
    font-size: 22px;
    min-width: 36px;
  }
  .study-canvas,
  .composer-canvas {
    padding: 16px;
  }
  .study-controls {
    gap: 8px;
  }
  .study-controls .button {
    font-size: 12px;
  }
  .study-notes h2 {
    font-size: 32px;
  }
  .cue-list li {
    font-size: 13px;
  }
  .builder-toolbar {
    flex-wrap: wrap;
    gap: 15px;
  }
  .builder-toolbar > label {
    flex-basis: 100%;
  }
  .builder-toolbar > div {
    width: 100%;
    justify-content: end;
  }
  .block {
    padding: 16px 12px;
    gap: 10px;
    position: relative;
  }
  .block-num {
    font-size: 11px;
  }
  .block-actions {
    flex-direction: row;
    position: absolute;
    top: 10px;
    right: 10px;
    gap: 4px;
  }
  /* These were 36 px square, which is under the 44 px a thumb needs and is
     the width where they are most likely to be tapped by one. Four of them at
     44 px with a 4 px gap is 188 px, well inside a 320 px screen. */
  .block-actions button {
    min-width: 44px;
    min-height: 44px;
  }
  .block-main {
    padding-top: 54px;
  }
  .block-inputs {
    gap: 8px;
  }
  .block-inputs label {
    font-size: 9px;
  }
  .block-inputs input {
    padding: 10px;
  }
  .block-main > label {
    font-size: 11px;
  }
  .session-summary {
    padding: 25px;
  }
  .action-palette > div {
    grid-template-columns: repeat(2, 1fr);
  }
  .sequence-track button {
    gap: 8px;
    padding: 10px;
  }
  .atlas-map {
    min-height: 340px;
  }
  .position-node {
    font-size: 11px;
    padding: 11px;
    gap: 8px;
    min-height: 44px;
  }
  .atlas-legend {
    font-size: 8px;
  }
  .atlas-map > .fine {
    font-size: 9px;
    left: 16px;
    right: 16px;
    bottom: 10px;
  }
  .position-detail blockquote {
    font-size: 25px;
  }
  .journal-stats {
    gap: 10px;
  }
  .journal-stats b {
    font-size: 34px;
  }
  .journal-stats span {
    font-size: 10px;
  }
  .note-panel,
  .panel {
    padding: 23px;
  }
  .form-row {
    gap: 10px;
    grid-template-columns: 1.1fr 1fr;
  }
  .journal-list article {
    padding: 20px;
  }
  .journal-list h3 {
    font-size: 24px;
  }
  .player-heading {
    padding: 20px 0;
    gap: 10px;
    flex-wrap: wrap;
  }
  .player-heading > .eyebrow {
    order: 3;
    flex-basis: 100%;
    max-width: none;
  }
  .player {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .player-left {
    padding: 0;
  }
  .player h1 {
    min-height: 0;
    font-size: 30px;
    margin-top: 20px;
  }
  .player-clock {
    font-size: 116px;
  }
  .player #player-cue {
    min-height: 44px;
  }
  .player-visual {
    max-width: 440px;
    width: 100%;
    margin: auto;
  }
  .player-visual .motion-stage {
    max-width: 280px;
  }
  .player-controls {
    gap: 6px;
  }
  .player-controls .button {
    font-size: 12px;
    padding: 12px 14px;
  }
  .player-bottom {
    font-size: 9px;
    flex-wrap: wrap;
    gap: 12px;
  }
  .player-bottom > span:first-child {
    max-width: 140px;
  }
  .study-label .pill {
    font-size: 9px;
  }
  .study-label .eyebrow {
    font-size: 9px;
  }
  .policy {
    padding-top: 36px;
  }
  .policy h1 {
    font-size: 40px;
  }
  .policy h2 {
    font-size: 26px;
  }
  footer {
    padding: 25px 20px;
    display: block;
  }
  footer p {
    margin: 15px 0;
  }
  footer > div {
    display: flex;
    flex-wrap: wrap;
    gap: 0 20px;
  }
  footer small {
    display: block;
    margin-top: 15px;
  }
  .dialog-actions {
    flex-wrap: wrap;
  }
  dialog {
    padding: 25px;
  }
  dialog h2 {
    font-size: 27px;
  }
}
@media (max-width: 360px) {
  main {
    padding-left: 16px;
    padding-right: 16px;
  }
  .site-header {
    padding-left: 16px;
    padding-right: 16px;
  }
  .header-cta {
    padding: 10px;
    font-size: 9px;
    gap: 8px;
  }
  .brand {
    font-size: 15px;
    gap: 7px;
  }
  .hero-copy h1,
  .hero-boxing h1 {
    font-size: 58px;
  }
  .hero-proof {
    font-size: 9px;
  }
  .hero-proof span + span:before {
    margin-right: 6px;
  }
  .hero-photo figcaption {
    font-size: 8px;
  }
  .drill-grid {
    grid-template-columns: 1fr;
  }
  .drill-art {
    height: 215px;
  }
  .drill-body {
    padding: 18px 20px;
  }
  .drill-body .program-meta span {
    flex-basis: auto;
  }
  .drill-body p {
    font-size: 13px;
  }
  .block {
    padding-left: 9px;
    padding-right: 9px;
    gap: 6px;
  }
  .block-inputs {
    gap: 5px;
  }
  .block-inputs label {
    font-size: 8px;
  }
  .atlas-map {
    min-height: 300px;
  }
  .position-node {
    font-size: 10px;
    padding: 10px 8px;
    gap: 4px;
  }
  .atlas-legend {
    left: 12px;
    right: 12px;
  }
  .atlas-map > .fine {
    font-size: 8px;
  }
  .section-head h2 {
    font-size: 26px;
  }
  .player-clock {
    font-size: 105px;
  }
  .note-panel,
  .panel {
    padding: 19px;
  }
  .form-row {
    grid-template-columns: 1fr;
  }
  .hero-actions {
    gap: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
  }
}
@media (forced-colors: active) {
  .button,
  .position-node,
  .chip {
    border: 1px solid ButtonText;
  }
  .program-card,
  .drill-card,
  .panel {
    border: 1px solid CanvasText;
  }
  .motion-stage {
    color: CanvasText;
  }
  .brand-mark {
    border: 1px solid CanvasText;
  }
}
@media print {
  body {
    background: #fff !important;
    color: #000 !important;
    font-size: 11pt;
  }
  header,
  footer,
  .skip,
  #toast,
  dialog,
  .builder-toolbar > div,
  .block-actions,
  .add-block,
  .session-summary .button,
  .storage-warning {
    display: none !important;
  }
  main {
    padding: 0;
    max-width: none;
  }
  .page-title {
    padding: 0 0 20px;
  }
  .page-title h1 {
    font-size: 26pt;
  }
  .builder-layout {
    display: block;
  }
  .block {
    break-inside: avoid;
    border: 1px solid #777;
    background: #fff;
    padding: 12px;
  }
  .block-main {
    padding: 0;
  }
  .block-num {
    margin-top: 0;
  }
  .block-inputs {
    display: flex;
    gap: 25px;
  }
  .block-inputs label {
    font-size: 10pt;
  }
  .session-summary {
    position: static;
    background: white;
    color: black;
    padding: 15px 0;
  }
  .summary-time {
    font-size: 30pt;
  }
  input,
  select {
    border: 0 !important;
    background: white !important;
    color: black !important;
    padding: 0;
    min-height: 0;
    appearance: none;
  }
  .timeline {
    display: none;
  }
  .session-summary p,
  .session-summary .eyebrow {
    color: black !important;
  }
  .hero-photo {
    height: 220px !important;
  }
  .program-grid {
    display: block;
  }
  .program-card {
    break-inside: avoid;
  }
  .player-controls {
    display: none;
  }
}