.practice-page { --guide-width: 76rem; }
.library-heading, .guide-panel, .reference-note, .handout-sources { width: min(var(--guide-width), calc(100% - 3rem)); margin-inline: auto; }
.library-heading { padding-block: 3rem 1.5rem; }
.library-heading h1 { font-size: 3rem; margin-bottom: 0.65rem; }
.library-heading > p:last-child { font-size: 1.125rem; color: var(--muted); }
.library-navigation { position: sticky; top: var(--header-height); z-index: 10; background: white; }
.library-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding-inline: max(1.5rem, calc((100% - var(--guide-width)) / 2)); background: white; border-bottom: 1px solid var(--stone); }
.library-tabs a { padding: 1rem 0.75rem; text-decoration: none; border-bottom: 3px solid transparent; font-weight: 750; text-align: center; }
.library-tabs a span { font-size: 0.875rem; color: var(--muted); margin-left: 0.5rem; font-weight: 400; }
.library-tabs a[aria-current="page"] { color: var(--jade); border-color: var(--jade); background: #f1f7f4; }
.reference-note { color: var(--muted); font-size: 0.875rem; padding-block: 1rem; border-bottom: 1px solid var(--stone); }
.guide-panel { padding-block: 2.25rem 3.5rem; scroll-margin-top: calc(var(--header-height) + var(--practice-nav-height, 6rem) + 1rem); }
.guide-heading { max-width: 52rem; margin-bottom: 2rem; }
.guide-heading h2 { font-size: 2.25rem; }
.guide-heading > p:last-child { color: var(--muted); }
.roadmap-overview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px solid var(--stone); padding: 1.25rem 0; margin: 0 0 1rem; gap: 1.5rem; }
.roadmap-overview dt { font-size: 0.875rem; color: var(--muted); }
.roadmap-overview dd { margin: 0.25rem 0 0; font-size: 1.35rem; font-weight: 700; }
.planning-note { max-width: 63rem; color: var(--muted); font-size: 0.9rem; margin-bottom: 2rem; }
.roadmap-stage { display: grid; grid-template-columns: 3rem minmax(0, 1fr) 11rem; gap: 1.5rem; padding-block: 2rem; border-top: 1px solid var(--stone); align-items: start; }
.stage-marker { color: var(--jade); font-size: 1.5rem; font-family: Georgia, serif; padding-top: 0.25rem; }
.stage-content h3 { font-family: Georgia, serif; font-size: 1.75rem; line-height: 1.2; margin-bottom: 0.75rem; }
.stage-content > p:not(.stage-weeks) { color: var(--muted); }
.stage-weeks { color: var(--jade); font-size: 0.875rem; font-weight: 700; margin-bottom: 0.75rem; }
.stage-weeks span { display: inline-block; font-weight: 400; color: var(--muted); margin-left: 1rem; }
.stage-details { border-block: 1px solid var(--stone); padding-block: 0.75rem; margin-bottom: 1rem; }
.stage-details summary { cursor: pointer; min-height: 2rem; font-weight: 650; }
.stage-details summary span { color: var(--muted); font-size: 0.875rem; font-weight: 400; margin-left: 0.75rem; }
.checklist-group { padding-top: 0.8rem; }
.checklist-group h4 { margin: 0 0 0.5rem; }
.checklist-group ul { margin: 0 0 1rem; padding-left: 1.25rem; }
.checklist-group li { padding-left: 0.25rem; margin-bottom: 0.5rem; }
.readiness { font-size: 0.9rem; }
.readiness strong { display: block; color: var(--ink); }
.stage-link { display: inline-flex; min-height: 44px; align-items: center; color: var(--jade); font-weight: 650; }
.pose-art { position: relative; overflow: hidden; width: 100%; aspect-ratio: 3 / 4; background: white; }
.pose-art img { position: absolute; width: calc(var(--columns) * 100%); height: calc(var(--rows) * 100%); max-width: none; left: calc(var(--column) * -100%); top: calc(var(--row) * -100%); object-fit: fill; border-radius: 0; box-shadow: none; }
.warmup-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2.5rem; }
.warmup-card { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1.25rem; padding-block: 2rem; border-top: 1px solid var(--stone); align-items: start; scroll-margin-top: 10rem; }
.warmup-card h3 { font-size: 1.125rem; line-height: 1.4; }
.warmup-card ol { padding-left: 1.15rem; margin: 1rem 0; }
.warmup-card li { margin-bottom: 0.75rem; }
.item-number { display: block; font-size: 0.875rem; font-weight: 700; color: var(--jade); margin-bottom: 0.5rem; }
.breathing { color: var(--muted); font-size: 0.95rem; }
.breathing strong { display: block; color: var(--ink); }
.repetitions { font-size: 0.875rem; color: var(--muted); }
.posture-tools { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto; align-items: end; gap: 1rem; margin-bottom: 2rem; }
.posture-tools label { font-weight: 600; }
.result-count { color: var(--muted); font-size: 0.875rem; padding-bottom: 0.75rem; margin: 0; min-width: 6rem; }
.posture-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.posture-card { border: 1px solid var(--stone); border-radius: 6px; overflow: hidden; }
.posture-open { display: block; border: 0; text-align: left; padding: 0; width: 100%; height: 100%; background: white; font: inherit; color: inherit; cursor: pointer; }
.posture-open:hover { background: #f2f7f4; }
.posture-open:focus-visible { outline-offset: -4px; }
.posture-caption { display: block; padding: 1rem; min-height: 8.75rem; }
.posture-name { font-weight: 600; line-height: 1.4; display: block; overflow-wrap: anywhere; }
.empty-postures { padding: 3rem 0; }
.handout-sources { padding-block: 2rem 3.5rem; border-top: 1px solid var(--stone); }
.handout-sources h2 { font-family: inherit; font-size: 1.25rem; }
.handout-sources p { max-width: 54rem; color: var(--muted); font-size: 0.9rem; }
.posture-dialog { width: min(38rem, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); padding: 1.25rem; border: 1px solid var(--stone); border-radius: 8px; color: var(--ink); overscroll-behavior: contain; }
.posture-dialog::backdrop { background: rgba(0, 0, 0, 0.55); }
.dialog-toolbar, .dialog-navigation { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.dialog-toolbar .item-number { margin: 0; }
.dialog-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 0.875rem; }
.dialog-breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; color: var(--jade); }
.posture-dialog .pose-art { width: min(96px, 100%); margin: 0 auto 1rem; }
.posture-dialog h2 { font-family: inherit; font-size: 1.5rem; line-height: 1.3; }
.dialog-note { color: var(--muted); font-size: 0.9rem; }
.icon-button { border: 1px solid var(--stone); border-radius: 4px; background: white; color: var(--ink); width: 44px; height: 44px; flex-shrink: 0; font: inherit; font-size: 1.6rem; cursor: pointer; }
.icon-button:disabled { opacity: 0.35; cursor: default; }
.dialog-navigation a { font-size: 0.875rem; text-align: center; }
body.dialog-open { overflow: hidden; }
@media (max-width: 1000px) {
  .warmup-list { grid-template-columns: minmax(0, 1fr); }
  .warmup-card { grid-template-columns: 12rem minmax(0, 1fr); }
  .posture-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .library-tabs { padding-inline: 1rem; }
  .library-tabs a { padding: 0.8rem 0.3rem; font-size: 0.95rem; }
  .library-tabs a span { display: block; margin: 0; font-size: 0.75rem; }
  .library-heading, .guide-panel, .reference-note, .handout-sources { width: calc(100% - 2rem); }
  .library-heading { padding-top: 2rem; }
  .library-heading h1 { font-size: 2.25rem; }
  .guide-heading h2 { font-size: 1.9rem; }
  .roadmap-overview { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .roadmap-overview div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
  .roadmap-overview dd { font-size: 1rem; text-align: right; }
  .roadmap-stage { grid-template-columns: 2rem minmax(0, 1fr) 5rem; gap: 0.75rem; }
  .stage-content { grid-column: 2 / 4; }
  .roadmap-stage > .pose-art { grid-column: 2 / 4; width: 10rem; }
  .stage-weeks span { display: block; margin-left: 0; }
  .stage-content h3 { font-size: 1.5rem; }
  .warmup-card { grid-template-columns: 7rem minmax(0, 1fr); gap: 1rem; }
  .posture-tools { grid-template-columns: minmax(0, 1fr); }
  .result-count { padding: 0; }
  .posture-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
  .posture-caption { padding: 0.75rem; min-height: 10rem; }
  .posture-name { font-size: 0.9rem; }
}
@media (max-width: 380px) {
  .warmup-card { grid-template-columns: minmax(0, 1fr); }
  .warmup-card .pose-art { width: 10rem; }
}
.warmup-card { grid-template-columns: minmax(0, 1fr); }
.roadmap-stage { grid-template-columns: 3rem minmax(0, 1fr); }
.stage-content { grid-column: 2; }
.photo-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.75rem; }
.photo-grid .posture-open { display: flex; flex-direction: column; }
.photo-grid .posture-caption { height: 8rem; width: 100%; min-height: 8rem; padding: 0.75rem; display: flex; flex-direction: column; }
.photo-grid .posture-name { font-size: 0.9rem; }
.frame-number { display: block; margin-top: auto; padding-top: 0.4rem; color: var(--muted); font-size: 0.75rem; }
.reference-art { display: grid; place-items: center; width: min(96px, 100%); aspect-ratio: 3 / 4; flex-shrink: 0; margin: 0.75rem auto 0; }
.reference-crop { position: relative; overflow: hidden; }
.artwork-credit { flex-basis: 100%; font-size: 0.75rem; color: #bdc4c1; }
.artwork-credit a { display: inline; min-height: 0; text-decoration: underline; }
@media (max-width: 1000px) { .photo-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.photo-credit { font-size: 0.9rem; }
.handout-heading { margin-top: 3rem; }
.handout-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2rem; }
.handout-item { display: flex; gap: 1rem; border-top: 1px solid var(--stone); padding-block: 1rem; }
.handout-item .item-number { min-width: 2rem; }
@media (max-width: 700px) {
  .photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .photo-grid .posture-caption { padding: 0.65rem; }
  .handout-list { grid-template-columns: minmax(0, 1fr); }
}
@media print {
  .site-header, .library-tabs, .posture-tools, .site-footer, dialog { display: none !important; }
  .guide-panel[hidden] { display: block !important; }
  .roadmap-stage, .warmup-card, .posture-card { break-inside: avoid; }
}
.checklist-progress { max-width: 48rem; padding-block: 1rem; border-block: 1px solid var(--stone); }
.checklist-progress label { display: flex; flex-wrap: wrap; justify-content: space-between; }
.checklist-progress progress { width: 100%; height: 0.75rem; accent-color: var(--jade); }
.checklist-progress p { margin: 0.5rem 0 0; font-size: 0.85rem; color: var(--muted); }
.training-section { max-width: 58rem; padding-top: 2.5rem; }
.training-section > h3 { font-family: Georgia, serif; font-size: 1.65rem; }
.training-group { margin: 1.5rem 0 0; padding: 0; border: 0; min-width: 0; }
.training-group legend { font-weight: 750; margin-bottom: 0.5rem; }
.training-item { display: flex; align-items: start; gap: 0.85rem; min-height: 44px; padding: 0.75rem 0; border-top: 1px solid var(--stone); font-weight: 400; cursor: pointer; }
.training-item input { width: 20px; height: 20px; min-height: 20px; flex-shrink: 0; margin: 0.2rem 0 0; padding: 0; accent-color: var(--jade); }
.training-item:has(input:checked) { color: var(--jade); }