@font-face {
  font-family:Fraunces;
  src:url(fonts/fraunces.woff2) format('woff2');
  font-weight:400 500;
  font-display:swap
}
@font-face {
  font-family:'Source Sans 3';
  src:url(fonts/sourcesans3.woff2) format('woff2');
  font-weight:400 700;
  font-display:swap
}
/* Ontwerp A: the existing palette and fonts, shared by the learner portal and the database-free demo. */
.leeromgeving {
  --paper:#f6f2e9;
  --surface:#fffdf7;
  --ink:#293e32;
  --muted:#60695b;
  --accent:#344f3e;
  --hover:#243d2e;
  --soft:#e7e9df;
  --line:#cbd0c1;
  --control-line:#7d8978;
  --focus:#6b573d;
  --danger:#a13333;
  --content:78rem;
  --gutter:clamp(1.25rem,3.4vw,3rem);
  --heading:Fraunces,Georgia,serif;
  --body:'Source Sans 3','Segoe UI',sans-serif;
  --space:clamp(2rem,4vw,4rem);
  --radius:.25rem;
  --bs-body-color:var(--ink);
  --bs-body-bg:var(--paper);
  --bs-body-font-family:var(--body);
  --bs-border-color:var(--line)
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:400 1.1875rem/1.65 var(--body)
}
[hidden] {
  display:none!important
}
button,input,select,textarea {
  font:inherit
}
button,a,input,select,textarea,summary {
  touch-action:manipulation
}
a {
  color:var(--accent);
  text-underline-offset:.22em
}
a:hover {
  color:var(--hover)
}
button {
  color:inherit
}
button:disabled {
  opacity:.55;
  cursor:not-allowed
}
button {
  cursor:pointer
}
button,a,summary,input,select,textarea {
  scroll-margin:8rem
}
:focus-visible {
  outline:3px solid var(--focus);
  outline-offset:4px
}
h1,h2,h3,p {
  margin:0
}
h1,h2 {
  font-family:var(--heading);
  font-weight:400;
  letter-spacing:-.035em;
  line-height:1.14
}
h1 {
  font-size:clamp(2.5rem,2rem + 2vw,3.6rem)
}
h2 {
  font-size:clamp(2rem,1.6rem + 1vw,2.7rem)
}
h3 {
  font-size:1.25rem;
  font-weight:600;
  line-height:1.35
}
p+p {
  margin-top:1rem
}
img {
  max-width:100%;
  height:auto
}
small,.small {
  font-size:.9375rem;
  line-height:1.55
}
.muted {
  color:var(--muted)
}
.eyebrow {
  font-size:.8rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--muted)
}
.reading {
  max-width:62ch
}
.wrap {
  width:100%;
  max-width:var(--content);
  padding-inline:var(--gutter);
  margin-inline:auto
}
.icon {
  width:1.25em;
  height:1.25em;
  vertical-align:-.22em;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex-shrink:0
}
.skip-link {
  position:fixed;
  top:1rem;
  left:1rem;
  padding:.7rem 1rem;
  background:var(--surface);
  z-index:100;
  transform:translateY(-200%)
}
.skip-link:focus {
  transform:none
}
.prototype-note {
  font-size:.83rem;
  background:var(--soft);
  color:var(--muted);
  padding:.35rem var(--gutter);
  text-align:center
}
.prototype-note a {
  margin-left:.75rem
}
.app-header {
  background:var(--paper);
  border-bottom:1px solid var(--line)
}
.header-inner {
  display:flex;
  align-items:center;
  gap:2rem;
  min-height:6rem
}
.brand {
  display:flex;
  align-items:center;
  gap:.7rem;
  font:400 1.45rem/1.2 var(--heading);
  text-decoration:none;
  white-space:nowrap
}
.brand-mark {
  display:inline-block;
  width:2.7rem;
  height:1.7rem;
  background:currentColor;
  mask:url(/img/logo_small.png) center/contain no-repeat
}
.primary-nav {
  display:flex;
  align-self:stretch;
  gap:1.7rem;
  margin-left:auto
}
.primary-nav a {
  display:flex;
  align-items:center;
  gap:.5rem;
  font-size:1rem;
  text-decoration:none;
  border-bottom:2px solid transparent;
  padding:.7rem .1rem
}
.primary-nav a[aria-current=page] {
  border-bottom-color:var(--accent);
  font-weight:600
}
.primary-nav a:hover {
  background:var(--soft)
}
.account-button {
  border:0;
  background:transparent;
  display:flex;
  gap:.6rem;
  align-items:center;
  font-size:1rem;
  padding:.5rem;
  min-height:44px
}
.avatar {
  width:2.1rem;
  height:2.1rem;
  border:1px solid var(--line);
  border-radius:50%;
  display:grid;
  place-items:center;
  font-family:var(--heading)
}
.app-main {
  padding-top:var(--space);
  padding-bottom:4rem;
  min-height:70vh
}
.page-intro {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:2rem;
  margin-bottom:2.4rem
}
.page-intro .eyebrow {
  margin-bottom:.6rem
}
.page-intro p {
  color:var(--muted);
  margin-top:.8rem
}
.text-action {
  display:inline-flex;
  gap:.55rem;
  align-items:center;
  background:none;
  border:0;
  border-bottom:1px solid var(--control-line);
  padding:.35rem 0;
  text-decoration:none;
  font-size:1rem;
  min-height:44px
}
.text-action:hover {
  color:var(--hover);
  border-color:var(--ink)
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  border:1px solid var(--accent);
  border-radius:2rem;
  padding:.85rem 1.45rem;
  min-height:3.25rem;
  font:600 1rem/1.4 var(--body);
  background:var(--accent);
  color:var(--surface);
  text-decoration:none
}
.button:hover {
  background:var(--hover);
  color:var(--surface);
  border-color:var(--hover)
}
.button.secondary {
  background:transparent;
  color:var(--ink);
  border-color:var(--control-line)
}
.button.secondary:hover {
  background:var(--soft)
}
.button.quiet {
  background:transparent;
  color:var(--ink);
  border-color:transparent
}
.button.quiet:hover {
  background:var(--soft)
}
.button.compact {
  min-height:44px;
  padding:.6rem 1rem
}
.icon-button {
  border:1px solid var(--line);
  background:transparent;
  border-radius:50%;
  width:44px;
  height:44px;
  display:inline-grid;
  place-items:center;
  flex-shrink:0
}
.icon-button:hover {
  background:var(--soft)
}
.actions {
  display:flex;
  gap:.7rem;
  flex-wrap:wrap;
  align-items:center
}
.lesson-feature {
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.85fr);
  background:var(--soft);
  min-height:390px;
  overflow:hidden;
  border-radius:var(--radius)
}
.feature-copy {
  padding:clamp(1.8rem,4vw,3.5rem);
  align-self:center
}
.feature-copy h2 {
  font-size:clamp(2.3rem,3.3vw,3.2rem);
  margin:.8rem 0 1rem
}
.feature-copy p {
  max-width:37ch;
  margin-bottom:1.8rem
}
.feature-photo {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 52%;
  max-height:460px
}
.lesson-label {
  display:flex;
  align-items:center;
  gap:.65rem;
  color:var(--muted);
  font-size:.9375rem
}
.lesson-dot {
  width:.4rem;
  height:.4rem;
  border-radius:50%;
  background:var(--accent)
}
.quick-access {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  margin:2rem 0 3.5rem;
  border-bottom:1px solid var(--line)
}
.quick-access a,.quick-access button {
  background:none;
  border:0;
  display:flex;
  gap:.9rem;
  align-items:center;
  text-align:left;
  padding:1.3rem .7rem;
  color:var(--ink);
  text-decoration:none
}
.quick-access .icon {
  width:1.5rem;
  height:1.5rem
}
.quick-access strong {
  font-weight:600;
  font-size:1.05rem;
  display:block
}
.quick-access small {
  color:var(--muted)
}
.quick-access a:hover,.quick-access button:hover {
  background:var(--soft)
}
.dashboard-bottom {
  display:grid;
  grid-template-columns:1.12fr 1fr;
  gap:var(--space)
}
.intention {
  padding-right:2rem
}
.intention blockquote {
  font:400 clamp(1.45rem,2vw,1.85rem)/1.4 var(--heading);
  margin:1rem 0
}
.section-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:1.3rem
}
.section-head h2 {
  font-size:1.7rem
}
.progress-copy {
  padding:1.2rem 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  margin-bottom:1rem
}
.progress-copy strong {
  font-weight:600
}
.support-note {
  display:flex;
  gap:.8rem;
  align-items:center;
  margin-top:3.5rem;
  padding-top:1.5rem;
  border-top:1px solid var(--line);
  font-size:1rem;
  color:var(--muted)
}
.support-note img {
  width:48px;
  height:48px;
  object-fit:cover;
  object-position:50% 25%;
  border-radius:50%
}
.support-note a {
  white-space:nowrap;
  margin-left:auto
}
.app-footer {
  border-top:1px solid var(--line);
  padding:1.4rem 0 2rem;
  font-size:.9375rem;
  color:var(--muted)
}
.app-footer .wrap {
  display:flex;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap
}
.subnav {
  display:flex;
  gap:1.6rem;
  border-bottom:1px solid var(--line);
  margin-bottom:2rem
}
.subnav a,.subnav button {
  background:none;
  border:0;
  border-bottom:2px solid transparent;
  min-height:48px;
  padding:.65rem 0;
  text-decoration:none;
  font-size:1.05rem
}
.subnav [aria-current=page],.subnav [aria-pressed=true] {
  border-bottom-color:var(--accent);
  font-weight:600
}
.timer-layout {
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(250px,.65fr);
  gap:var(--space);
  align-items:start
}
.timer-stage {
  background:var(--surface);
  border:1px solid var(--line);
  padding:2.2rem 2rem;
  text-align:center;
  min-width:0;
  border-radius:var(--radius)
}
.duration-presets {
  display:flex;
  gap:.35rem;
  justify-content:center;
  flex-wrap:wrap;
  margin:1rem 0
}
.duration-presets button {
  border:1px solid transparent;
  background:none;
  min-width:54px;
  min-height:44px;
  font-size:1rem;
  border-radius:2rem
}
.duration-presets button[aria-pressed=true] {
  border-color:var(--accent);
  background:var(--soft);
  font-weight:600
}
.duration-presets button:hover {
  background:var(--soft)
}
.timer-dial {
  width:clamp(220px,25vw,300px);
  aspect-ratio:1;
  position:relative;
  margin:1.4rem auto 1.5rem;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column
}
.dial-ring {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  transform:rotate(-90deg);
  fill:none;
  stroke:var(--line);
  stroke-width:1
}
.dial-progress {
  stroke:var(--accent);
  stroke-width:1.4;
  stroke-dasharray:289;
  stroke-dashoffset:0
}
.timer-digits {
  font:400 clamp(3.8rem,6vw,5.3rem)/1.1 var(--heading);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.06em
}
.timer-phase {
  font-size:1rem;
  color:var(--muted);
  margin-top:.5rem
}
.timer-stage .actions {
  justify-content:center
}
.timer-stage .hint {
  margin-top:1.2rem;
  font-size:.9375rem;
  color:var(--muted)
}
.timer-aside h2 {
  font-size:1.6rem;
  margin-bottom:.9rem
}
.timer-aside p {
  font-size:1.05rem;
  color:var(--muted)
}
.quiet-photo {
  width:100%;
  max-height:180px;
  object-fit:cover;
  object-position:50% 46%;
  margin:1.5rem 0
}
.sound-line {
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-top:1px solid var(--line);
  padding-top:1.4rem;
  margin-top:1.8rem;
  font-size:1rem
}
.sound-line label {
  display:flex;
  align-items:center;
  gap:.6rem
}
.sound-line input {
  width:1.15rem;
  height:1.15rem;
  accent-color:var(--accent)
}
details.options {
  border-bottom:1px solid var(--line);
  margin-top:1rem;
  padding-bottom:1rem
}
summary {
  cursor:pointer;
  font-weight:600;
  font-size:1rem;
  min-height:48px;
  padding:.6rem 0
}
summary::marker {
  color:var(--muted)
}
.options-body {
  padding:.7rem 0 1rem;
  text-align:left
}
.field {
  display:flex;
  flex-direction:column;
  gap:.4rem;
  margin-bottom:1.2rem
}
.field label,.field-label {
  font-size:1.05rem;
  font-weight:600
}
.field input,.field select,.field textarea {
  border:1px solid var(--control-line);
  background:var(--surface);
  border-radius:var(--radius);
  padding:.7rem .9rem;
  width:100%;
  min-height:48px;
  color:var(--ink)
}
.field textarea {
  resize:vertical;
  line-height:1.65
}
.field input[type=range] {
  padding:0;
  accent-color:var(--accent)
}
.field input[type=checkbox] {
  width:1.2rem;
  height:1.2rem;
  min-height:0;
  accent-color:var(--accent)
}
.check-label {
  display:flex;
  gap:.7rem;
  align-items:center;
  font-size:1rem;
  margin:.8rem 0
}
.field-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem
}
.breath-settings {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:.5rem
}
.breath-settings label {
  font-size:.85rem
}
.breath-cue {
  height:1.8rem;
  margin-top:.4rem;
  font-size:1rem;
  color:var(--muted)
}
.focus-control {
  margin-top:1rem;
  font-size:.9375rem
}
.focus-mode .app-header,.focus-mode .prototype-note,.focus-mode .app-footer,.focus-mode .page-intro,.focus-mode .subnav,.focus-mode .timer-aside {
  display:none
}
.focus-mode .timer-layout {
  display:block;
  max-width:42rem;
  margin:auto
}
.focus-mode .app-main {
  padding-top:1rem
}
.focus-mode .timer-stage {
  border:0;
  background:var(--paper)
}
.focus-mode .sound-line,.focus-mode .options {
  display:none
}
.complete-panel {
  margin:1.6rem 0 .5rem;
  padding:1.7rem;
  background:var(--soft);
  text-align:left
}
.complete-panel h2 {
  font-size:1.8rem;
  margin-bottom:.6rem
}
.complete-panel p {
  margin-bottom:1rem;
  font-size:1.05rem
}
.journal-layout {
  display:grid;
  grid-template-columns:230px minmax(0,1fr);
  gap:3.5rem
}
.journal-sidebar {
  border-right:1px solid var(--line);
  padding-right:1.6rem
}
.journal-sidebar .field select {
  font-size:1rem
}
.journal-sidebar p {
  font-size:.9375rem;
  color:var(--muted)
}
.journal-list {
  min-width:0
}
.journal-entry {
  border-top:1px solid var(--line);
  padding:1.7rem 0 1.9rem
}
.journal-entry:last-child {
  border-bottom:1px solid var(--line)
}
.entry-heading {
  display:flex;
  gap:1.2rem;
  align-items:center;
  margin-bottom:1rem
}
.entry-heading img {
  width:52px;
  height:70px;
  object-fit:cover;
  border-radius:2px
}
.entry-heading h2 {
  font-size:1.65rem
}
.entry-heading time {
  font-size:.9375rem;
  color:var(--muted)
}
.journal-entry p {
  max-width:58ch
}
.entry-actions {
  display:flex;
  gap:1.4rem;
  margin-top:.6rem
}
.entry-state {
  font-size:.875rem;
  color:var(--muted);
  margin-left:auto
}
.empty-state {
  border-top:1px solid var(--line);
  padding:3rem 1rem;
  text-align:center
}
.empty-state h2 {
  font-size:2rem;
  margin:1rem 0
}
.empty-state p {
  max-width:40ch;
  margin:0 auto 1.5rem;
  color:var(--muted)
}
dialog {
  border:1px solid var(--line);
  background:var(--paper);
  color:var(--ink);
  border-radius:.5rem;
  width:min(720px,calc(100% - 2rem));
  max-height:90dvh;
  padding:0
}
dialog::backdrop {
  background:rgb(41 62 50 / .45)
}
.dialog-header {
  display:flex;
  gap:1rem;
  justify-content:space-between;
  align-items:flex-start;
  padding:1.5rem 2rem;
  border-bottom:1px solid var(--line);
  background:var(--paper)
}
.dialog-header h2 {
  font-size:2rem
}
.dialog-body {
  padding:1.5rem 2rem 2rem
}
.dialog-body p {
  margin-bottom:1rem
}
.dialog-body .actions {
  margin-top:1rem
}
.dialog-body .small {
  color:var(--muted)
}
.prompt {
  font-size:1.05rem;
  font-weight:600;
  display:block;
  margin-bottom:.6rem
}
.writing-area {
  min-height:180px
}
.form-error {
  color:var(--danger);
  font-size:1rem;
  margin-bottom:1rem
}
.form-notice {
  padding:.8rem 1rem;
  border-left:2px solid var(--accent);
  background:var(--soft);
  font-size:1rem;
  margin-bottom:1.2rem
}
.dialog-section {
  border-top:1px solid var(--line);
  padding-top:1.2rem;
  margin-top:1.5rem
}
.lesson-list {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.5rem
}
.lesson-item {
  display:flex;
  align-items:center;
  gap:1rem;
  border-top:1px solid var(--line);
  padding-top:1rem
}
.lesson-item img {
  width:64px;
  height:90px;
  object-fit:cover
}
.lesson-item h3 {
  font-size:1.1rem
}
.lesson-item p {
  font-size:.9375rem;
  margin:.3rem 0;
  color:var(--muted)
}
.lesson-item button {
  margin-top:.3rem
}
.lesson-item.locked img {
  opacity:.65
}
.lesson-status {
  font-size:.8rem;
  color:var(--muted)
}
.lesson-detail {
  display:grid;
  grid-template-columns:120px 1fr;
  gap:1.5rem;
  margin-bottom:1.5rem
}
.lesson-detail img {
  width:120px;
  height:178px;
  object-fit:cover
}
.lesson-detail h3 {
  font:400 1.8rem/1.2 var(--heading);
  margin:.5rem 0
}
.audio-row {
  display:flex;
  gap:1rem;
  align-items:flex-start;
  border-top:1px solid var(--line);
  padding:1.2rem 0
}
.audio-row>div {
  flex:1
}
.audio-row p {
  font-size:1rem;
  margin:.3rem 0 .4rem
}
.audio-row .icon-button {
  width:44px
}
.audio-row .icon-button[aria-pressed=true] {
  background:var(--soft)
}
.audio-player {
  width:100%;
  margin-top:.7rem;
  max-height:46px
}
.audio-row h2 {
  font-size:1.1rem
}
.stats-line {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1rem;
  border-block:1px solid var(--line);
  padding:1.2rem 0;
  margin:1.3rem 0
}
.stats-line strong {
  display:block;
  font:400 2rem/1.3 var(--heading)
}
.stats-line span {
  font-size:.9375rem;
  color:var(--muted)
}
.timeline-row {
  display:flex;
  justify-content:space-between;
  gap:1rem;
  border-top:1px solid var(--line);
  padding:.8rem 0;
  font-size:1rem
}
.toast {
  position:fixed;
  bottom:1rem;
  left:50%;
  transform:translateX(-50%);
  background:var(--accent);
  color:var(--surface);
  padding:.9rem 1.4rem;
  border-radius:var(--radius);
  max-width:calc(100% - 2rem);
  width:max-content;
  box-shadow:0 .4rem 2rem rgb(41 62 50 / .12);
  z-index:30;
  font-size:1rem;
  opacity:1;
  display:none
}
.toast.is-visible {
  display:block
}
@media(min-width:1400px) {
  .lesson-feature {
    grid-template-columns:1.1fr .9fr
  }
  .feature-photo {
    max-height:425px
  }
}
@media(max-width:1050px) {
  .header-inner {
    flex-wrap:wrap;
    gap:.6rem;
    min-height:0;
    padding-top:1rem
  }
  .brand {
    font-size:1.3rem
  }
  .account-button {
    margin-left:auto
  }
  .primary-nav {
    order:3;
    width:100%;
    justify-content:space-between;
    margin:0;
    gap:.8rem
  }
  .primary-nav a {
    min-height:56px
  }
  .dashboard-bottom {
    gap:2.5rem
  }
  .timer-layout {
    grid-template-columns:minmax(0,1fr) 260px;
    gap:1.5rem
  }
  .timer-stage {
    padding:1.5rem 1rem
  }
  .journal-layout {
    grid-template-columns:190px minmax(0,1fr);
    gap:2rem
  }
}
@media(max-width:767px) {
  .app-main {
    padding-top:1.8rem
  }
  .prototype-note {
    font-size:.75rem;
    padding:.4rem .8rem
  }
  .header-inner {
    padding-inline:1.25rem
  }
  .primary-nav {
    gap:0
  }
  .primary-nav a {
    flex:1;
    justify-content:center;
    flex-direction:column;
    gap:.2rem;
    font-size:.8rem;
    min-height:62px
  }
  .primary-nav .icon {
    width:1.2rem;
    height:1.2rem
  }
  .account-label {
    display:none
  }
  .brand {
    font-size:1.3rem
  }
  .page-intro {
    display:block;
    margin-bottom:1.6rem
  }
  .page-intro>.text-action {
    margin-top:.6rem
  }
  .page-intro p {
    font-size:1.05rem
  }
  .lesson-feature {
    grid-template-columns:1fr;
    min-height:0
  }
  .feature-copy {
    padding:1.65rem 1.5rem 1.8rem
  }
  .feature-copy p {
    margin-bottom:1.4rem
  }
  .feature-photo {
    height:200px;
    object-position:50% 52%
  }
  .quick-access {
    grid-template-columns:1fr 1fr;
    margin:1rem 0 2.5rem
  }
  .quick-access a,.quick-access button {
    padding:1rem .35rem;
    gap:.6rem;
    border-bottom:1px solid var(--line)
  }
  .quick-access small {
    font-size:.83rem
  }
  .quick-access strong {
    font-size:1rem
  }
  .dashboard-bottom {
    grid-template-columns:1fr;
    gap:2.5rem
  }
  .intention {
    padding-right:0
  }
  .section-head {
    flex-wrap:wrap
  }
  .support-note {
    flex-wrap:wrap;
    margin-top:2rem
  }
  .support-note p {
    flex:1;
    font-size:.9375rem
  }
  .support-note a {
    margin-left:3.8rem
  }
  .timer-layout {
    grid-template-columns:1fr
  }
  .timer-aside {
    margin-top:1rem
  }
  .timer-aside .quiet-photo {
    display:none
  }
  .timer-dial {
    width:250px
  }
  .timer-digits {
    font-size:4.5rem
  }
  .timer-stage {
    padding:1.5rem 1rem
  }
  .timer-stage .button {
    padding:.85rem 1.15rem
  }
  .timer-aside>p {
    max-width:55ch
  }
  .journal-layout {
    grid-template-columns:1fr;
    gap:1rem
  }
  .journal-sidebar {
    border:0;
    padding:0
  }
  .journal-sidebar p {
    display:none
  }
  .journal-sidebar .field {
    margin:0
  }
  .journal-entry {
    padding:1.4rem 0
  }
  .entry-heading {
    gap:.8rem
  }
  .entry-heading h2 {
    font-size:1.4rem
  }
  .entry-state {
    display:none
  }
  .entry-actions {
    gap:1rem;
    flex-wrap:wrap
  }
  .dialog-header {
    padding:1.2rem
  }
  .dialog-header h2 {
    font-size:1.7rem
  }
  .dialog-body {
    padding:1.2rem
  }
  .lesson-list {
    grid-template-columns:1fr
  }
  .lesson-detail {
    grid-template-columns:80px 1fr;
    gap:1rem
  }
  .lesson-detail img {
    width:80px;
    height:120px
  }
  .lesson-detail h3 {
    font-size:1.5rem
  }
  .breath-settings {
    grid-template-columns:1fr 1fr
  }
  .stats-line strong {
    font-size:1.6rem
  }
  .stats-line span {
    font-size:.8rem
  }
  .subnav {
    gap:1.2rem
  }
  .subnav a,.subnav button {
    font-size:1rem
  }
  .writing-area {
    min-height:220px
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    scroll-behavior:auto!important;
    animation:none!important;
    transition:none!important
  }
}
.preserve-lines {
  white-space:pre-wrap
}
.leeromgeving {
  overflow-wrap:anywhere
}
.dashboard-bottom>*,.feature-copy {
  min-width:0
}
.check-label input {
  accent-color:var(--accent);
  width:1.1rem;
  height:1.1rem;
  flex:none
}
.lesson-switch {
  display:flex;
  align-items:center;
  gap:.8rem;
  flex-wrap:wrap;
  margin:0 0 1.5rem;
  font-size:1rem
}
.lesson-switch select {
  max-width:100%;
  min-width:0;
  min-height:44px;
  padding:.55rem 2rem .55rem .75rem;
  border:1px solid var(--control-line);
  background:var(--surface);
  color:var(--ink);
  border-radius:var(--radius)
}
.journal-sidebar .lesson-switch {
  display:block
}
.journal-sidebar .lesson-switch label {
  display:block;
  margin-bottom:.5rem
}
.journal-sidebar .lesson-switch select {
  width:100%
}
.footer-links {
  display:flex;
  gap:1.5rem;
  flex-wrap:wrap
}
.app-footer>.wrap {
  display:flex;
  justify-content:space-between;
  gap:1.5rem;
  flex-wrap:wrap
}
.footer-links a,.footer-links button {
  font-size:.9375rem
}
.account-links {
  list-style:none;
  margin:0;
  padding:0
}
.account-links li {
  padding:.6rem 0
}
.account-links form {
  margin:0
}
.help-list dt {
  margin-top:1rem
}
.help-list dd {
  margin:0;
  font-size:1.05rem
}
.dialog-section h3 {
  font-size:1.1rem
}
.writing-layout {
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,5rem)
}
.writing-aside h2 {
  font-size:1.8rem;
  margin-bottom:1rem
}
.writing-aside p {
  font-size:1.05rem;
  color:var(--muted)
}
.journal-write {
  margin-bottom:1.5rem
}
.course-lessons .lesson-item {
  align-items:flex-start;
  padding-block:1.5rem
}
.course-lessons .lesson-item>div {
  min-width:0;
  flex:1
}
.course-lessons .lesson-item img {
  width:90px;
  height:auto;
  aspect-ratio:2/3;
  object-fit:cover
}
.course-lessons .lesson-item h2 {
  font-size:1.65rem
}
.course-lessons .lesson-item .actions {
  gap:.5rem 1rem;
  flex-wrap:wrap
}
.course-lessons details h3 {
  margin-top:.8rem
}
.lesson-progress {
  padding:1.5rem 0;
  border-top:1px solid var(--line)
}
.overview-details {
  padding:1rem 0
}
.overview-details>h2 {
  font-size:1.8rem;
  margin-bottom:1rem
}
.chart-row {
  display:grid;
  grid-template-columns:3rem minmax(0,1fr) 4rem;
  align-items:center;
  gap:1rem;
  font-size:.9375rem;
  margin:.7rem 0
}
.chart-row meter {
  width:100%;
  height:1rem;
  accent-color:var(--accent)
}
.chart-row meter::-webkit-meter-bar {
  background:var(--soft);
  border:0
}
.chart-row meter::-webkit-meter-optimum-value {
  background:var(--accent)
}
.audio-library {
  max-width:65rem
}
.audio-row>div {
  min-width:0
}
.audio-row h2 {
  font-family:var(--body);
  font-weight:600;
  letter-spacing:0;
  line-height:1.4;
  font-size:1.2rem
}
.audio-description {
  max-width:65ch
}
.audio-row .audio-history {
  font-size:.9375rem;
  color:var(--muted)
}
.focus-mode .lesson-switch {
  display:none
}
.focus-mode .timer-stage {
  min-height:80vh
}
.writing-panel,.writing-aside {
  min-width:0
}
.button,.text-action {
  max-width:100%
}
.text-action {
  white-space:normal
}
.table {
  --bs-table-bg:transparent;
  --bs-table-color:var(--ink)
}
@media(max-width:767px) {
  .writing-layout {
    grid-template-columns:1fr
  }
  .course-lessons .lesson-item img {
    width:70px
  }
  .course-lessons .lesson-item h2 {
    font-size:1.45rem
  }
  .footer-links {
    gap:.8rem 1.2rem
  }
  .lesson-switch select {
    flex:1 1 100%
  }
  .audio-row [data-audio-favorite] {
    align-self:start
  }
  .audio-row>div>.text-action {
    grid-column:1 / -1
  }
}
/* Keep the main timer action in view; retain the generous rhythm elsewhere. */
body:has(.timer-layout) .app-main {
  padding-top:2rem
}
body:has(.timer-layout) .page-intro {
  margin-bottom:1.2rem
}
body:has(.timer-layout) .subnav {
  margin-bottom:1.5rem
}
.timer-stage {
  padding-top:1.5rem
}
.timer-dial {
  width:250px;
  margin:1rem auto
}
.timer-stage .breath-cue:empty {
  height:0;
  margin:0
}
.support-note>.text-action {
  margin-left:auto;
  flex-shrink:0
}
.page-intro>.button {
  margin-top:1rem
}
.page-intro:has(>.button) {
  flex-wrap:wrap
}
.page-intro:has(>.button)>div {
  flex:1 1 30rem
}
.page-intro>.button {
  white-space:nowrap
}
body:has(dialog[open]) {
  overflow:hidden
}
.dialog-header {
  position:sticky;
  top:0;
  z-index:1
}
@media(max-width:767px) {
  body:has(.timer-layout) .app-main {
    padding-top:1.2rem
  }
  body:has(.timer-layout) .page-intro h1 {
    font-size:2.2rem
  }
  body:has(.timer-layout) .page-intro .eyebrow {
    display:none
  }
  body:has(.timer-layout) .page-intro p {
    margin-top:.6rem
  }
  body:has(.timer-layout) .subnav {
    margin-bottom:1rem
  }
  .timer-stage {
    padding:1.2rem .8rem
  }
  .timer-stage>.eyebrow {
    display:none
  }
  .timer-dial {
    width:200px;
    margin:.8rem auto 1rem
  }
  .timer-digits {
    font-size:3.8rem
  }
  .duration-presets {
    margin:.2rem 0;
    gap:.25rem
  }
  .duration-presets button {
    min-width:48px;
    padding:.5rem .4rem
  }
  .support-note p {
    flex-basis:calc(100% - 64px)
  }
  .support-note>.text-action {
    margin-left:3.8rem
  }
  .journal-sidebar p {
    display:block
  }
  .journal-sidebar p:first-of-type {
    display:none
  }
  .audio-row {
    display:grid;
    grid-template-columns:44px minmax(0,1fr) 44px;
    column-gap:.7rem
  }
  .audio-row>div {
    display:contents
  }
  .audio-row h2 {
    grid-column:2;
    grid-row:1
  }
  .audio-row p {
    grid-column:2 / -1
  }
  .audio-row [data-audio-play] {
    grid-column:1;
    grid-row:1 / span 2
  }
  .audio-row [data-audio-favorite] {
    grid-column:3;
    grid-row:1 / span 2
  }
  .audio-row .audio-player {
    grid-column:1 / -1;
    min-width:0;
    margin-top:.25rem
  }
}