/* Presentation layer. Existing state colors and functional IDs remain authoritative. */
.ui-icon { width: 1em; height: 1em; display: inline-block; vertical-align: -.12em; flex: 0 0 auto; overflow: visible; }
body.zen-mode {
  color-scheme: dark;
  background: radial-gradient(ellipse at 50% 0, #152332 0, #090e16 65%) !important;
  padding: 24px 16px !important;
  --text-muted: #a8b6c9;
  --text-dim: #93a3b8;
}
.zen-mode .app-container.zen-layout {
  max-width: 940px !important;
  padding: 24px 32px !important;
  gap: 18px !important;
  background: linear-gradient(155deg, #121c29, #0d141f 70%) !important;
  border: 1px solid #293443 !important;
  border-radius: 28px !important;
  box-shadow: 0 28px 80px #0005 !important;
}
.zen-mode .brand-title { font-size: 1.05rem !important; letter-spacing: -.035em; }
.zen-mode .brand-logo { border-radius: 11px !important; box-shadow: none !important; }
.zen-mode .badge-clinical { background: #18313d !important; border: 1px solid #2d4b58; color: #9dd9e9 !important; font-weight: 600 !important; letter-spacing: .06em; }
.zen-mode .header-actions .btn-subtle { min-height: 40px !important; min-width: 40px !important; border-radius: 12px !important; background: #16212e !important; box-shadow: none !important; }
.zen-mode .zen-status-ribbon { max-width: 540px !important; background: #111d2b !important; border: 1px solid #2a384a !important; border-radius: 16px !important; padding: 12px 18px !important; box-shadow: none !important; }
.zen-mode .ribbon-label { color: #a9b8cc !important; font-size: .71rem !important; letter-spacing: .025em; }
.zen-mode .ribbon-val { font-size: 1.4rem !important; font-variant-numeric: tabular-nums; }
.zen-mode .visualizer-wrapper { min-height: 240px !important; }
.zen-mode .pulse-center { width: 218px !important; height: 218px !important; min-width: 218px !important; min-height: 218px !important; border-width: 2px !important; background: radial-gradient(circle at 50% 30%, #192f41, #0e1928 75%) !important; }
.zen-mode .zen-ring-bpm { font-size: 2.15rem !important; letter-spacing: -.055em; }
.zen-mode .zen-ring-bpm .unit { font-size: .85rem !important; letter-spacing: .05em; color: #afc3d5; }
.zen-mode .zen-ring-bpm .bps-sub { color: #a6bdce !important; font-size: .8rem !important; letter-spacing: 0; }
.zen-mode .zen-ring-instruction { display: -webkit-box !important; font-size: .74rem !important; line-height: 1.4 !important; }
.zen-mode .zen-arousal-dock, .zen-mode .arousal-section { max-width: 560px !important; }
.zen-mode .arousal-tactile-strip { max-width: 560px !important; padding: 4px 6px !important; gap: 4px !important; background: #09111c !important; border: 1px solid #223144 !important; border-radius: 9999px !important; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4) !important; display: flex !important; justify-content: space-between !important; align-items: center !important; }
.zen-mode .arousal-tap-btn { flex: 1 1 0 !important; width: 36px !important; max-width: 38px !important; min-width: 0 !important; height: 36px !important; min-height: 36px !important; border-radius: 50% !important; aspect-ratio: 1 / 1 !important; position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; background: transparent !important; border: none !important; cursor: pointer !important; touch-action: manipulation !important; -webkit-tap-highlight-color: transparent !important; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important; }
.zen-mode .arousal-tap-btn::before { content: '' !important; position: absolute !important; top: -8px !important; bottom: -8px !important; left: -2px !important; right: -2px !important; }
.zen-mode .arousal-tap-btn.active { border-radius: 50% !important; transform: scale(1.12) !important; }
.zen-mode .zen-zone-pill { opacity: 1 !important; color: #a7b6c9 !important; font-size: .7rem !important; }
.zen-mode .zen-zone-pill.active { color: #91e8cc !important; text-shadow: none !important; }
.zen-mode .zen-arousal-guidance-callout { padding: 7px 10px !important; }
.zen-mode .guidance-text { color: #aebed0 !important; font-size: .76rem !important; line-height: 1.5 !important; }
.zen-mode .primary-controls { max-width: 660px !important; gap: 10px !important; margin: 2px auto !important; }
.zen-mode .primary-controls .btn { min-height: 46px !important; border-radius: 12px !important; box-shadow: none !important; font-weight: 600 !important; }
.zen-mode #btn-start-pause { background: #61c7de !important; color: #09202b !important; border: 1px solid #83d9e9 !important; }
.zen-mode #btn-climax-end { background: #25243a !important; border-color: #514c6a !important; }
.zen-mode #btn-reset-session { background: #172231 !important; border-color: #334357 !important; }
.zen-mode .btn:disabled { opacity: .5 !important; cursor: not-allowed !important; }
.zen-mode .btn-drawer-toggle { min-height: 42px; background: transparent !important; border: 1px solid #344256 !important; border-radius: 12px !important; color: #b3c5d7 !important; box-shadow: none !important; padding: 10px 20px !important; }
.zen-mode .zen-drawer-container.collapsed { visibility: hidden; }
.zen-mode .zen-drawer-container.open { max-height: none; visibility: visible; overflow: visible; margin-top: 8px; }
.zen-drawer-content { display: grid; gap: 20px; min-width: 0; padding-top: 22px; border-top: 1px solid #2b394b; }
.zen-mode .mode-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0; background: none; border: 0; }
.zen-mode .mode-tab { min-width: 0; border: 1px solid #314055; border-radius: 14px; padding: 16px; background: #14202e; text-align: left; box-shadow: none; }
.zen-mode .mode-tab.active { background: #183341; border-color: #5892a8; }
.zen-mode .tab-title { font-size: .86rem; color: #d7e7f1; }
.zen-mode .tab-desc { color: #a8bace !important; line-height: 1.5; margin-top: 5px; }
.zen-mode :is(.settings-card, .history-card, .progression-card, .telemetry-card, .guide-card, .wave-sequencer-card, .levels-selector-bar, .tempo-control-panel) { background: #111d2a !important; border: 1px solid #2d3c50 !important; box-shadow: none !important; border-radius: 16px !important; padding: 22px !important; min-width: 0; }
.zen-mode .wave-selector-presets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; }
.zen-mode .wave-preset-btn { white-space: normal; text-align: left; justify-content: flex-start; padding: 12px; line-height: 1.6; border-radius: 10px; }
.zen-mode .settings-grid { gap: 22px; }
.zen-mode .settings-grid > * { min-width: 0; }
.zen-mode .custom-select { width: 100%; max-width: 100%; min-height: 44px; background-color: #0d1723; border-color: #3c4f66; border-radius: 10px; color: #dfebf5; text-overflow: ellipsis; }
.zen-mode input { accent-color: #67c9de; }
.zen-mode :is(button, input, select, a):focus-visible { outline: 3px solid #b0edff !important; outline-offset: 4px !important; }
.zen-mode button:not(:disabled):hover { filter: brightness(1.12); }
@media (max-width: 600px) {
  body.zen-mode { padding: 10px 8px !important; }
  .zen-mode .app-container.zen-layout { padding: 16px 12px !important; gap: 15px !important; border-radius: 20px !important; }
  .zen-mode .brand-title { font-size: .95rem !important; }
  .zen-mode .badge-clinical { font-size: .55rem !important; }
  .zen-mode .zen-status-ribbon { padding: 10px 4px !important; }
  .zen-mode .ribbon-label { font-size: .63rem !important; }
  .zen-mode .visualizer-wrapper { min-height: 180px !important; }
  .zen-mode .pulse-center { width: 175px !important; height: 175px !important; min-width: 175px !important; min-height: 175px !important; }
  .zen-mode .arousal-tactile-strip { display: flex !important; width: 100% !important; max-width: 100% !important; padding: 3px 4px !important; gap: 2px !important; border-radius: 9999px !important; justify-content: space-between !important; box-sizing: border-box !important; }
  .zen-mode .arousal-tap-btn { flex: 1 1 0 !important; width: 30px !important; height: 30px !important; min-width: 26px !important; min-height: 26px !important; max-width: 33px !important; border-radius: 50% !important; aspect-ratio: 1 / 1 !important; }
  .zen-mode .arousal-tap-btn .btn-lvl-num { font-size: 0.84rem !important; font-weight: 600 !important; }
  .zen-mode .zen-arousal-header-bar { flex-wrap: nowrap !important; gap: 4px !important; }
  .zen-mode .zen-arousal-zones-legend { flex-wrap: nowrap !important; gap: 8px !important; justify-content: center !important; }
  .zen-mode .primary-controls .btn { line-height: 1.3 !important; }
  .zen-mode #btn-climax-end .climax-icon { display: inline-flex !important; font-size: 0.85rem !important; }
  .zen-mode #btn-climax-end .climax-text-wrap { min-width: 0; white-space: normal; }
  .zen-mode .zen-ring-instruction { max-width: 140px !important; }
  .zen-mode .zen-zone-pill { font-size: .63rem !important; }
  .zen-mode .mode-nav, .zen-mode .wave-selector-presets { grid-template-columns: 1fr; }
  .zen-mode :is(.settings-card, .history-card, .progression-card, .telemetry-card, .guide-card, .wave-sequencer-card, .levels-selector-bar, .tempo-control-panel) { padding: 16px !important; }
}
@media (min-width: 601px) and (max-height: 850px) {
  body.zen-mode { padding: 12px 16px !important; }
  .zen-mode .app-container.zen-layout { padding: 18px 28px !important; gap: 10px !important; }
  .zen-mode .visualizer-wrapper { min-height: 200px !important; }
  .zen-mode .pulse-center { width: 190px !important; height: 190px !important; min-width: 190px !important; min-height: 190px !important; }
  .zen-mode .zen-status-ribbon { padding: 8px 18px !important; }
  .zen-mode .zen-arousal-guidance-callout { padding: 3px 10px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .zen-mode *, .zen-mode *::before, .zen-mode *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Restrained system appearance: one accent, neutral surfaces, readable hierarchy. */
body.zen-mode {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  background: #0a0a0b !important;
  color: #f5f5f7;
  --text-muted: #a1a1a6;
  --text-dim: #939398;
}
.zen-mode button, .zen-mode input, .zen-mode select { font-family: inherit; }
.zen-mode .font-mono { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; font-variant-numeric: tabular-nums; }
.zen-mode .app-container.zen-layout { background: #171719 !important; border-color: #303033 !important; box-shadow: 0 24px 70px #0004 !important; }
.zen-mode .brand-logo { background: #303034 !important; color: #f5f5f7 !important; font-size: .75rem !important; font-weight: 600; }
.zen-mode .brand-title { font-weight: 600 !important; letter-spacing: -.04em; }
.zen-mode .badge-clinical { color: #a1a1a6 !important; background: transparent !important; border: 0 !important; padding-left: 0 !important; font-weight: 400 !important; letter-spacing: .01em; }
.zen-mode .header-actions .btn-subtle { background: #252527 !important; border: 1px solid #39393d !important; color: #d2d2d7 !important; }
.zen-mode .header-actions .ui-icon { width: 17px; height: 17px; }
.zen-mode .zen-status-ribbon { background: transparent !important; border: 0 !important; border-bottom: 1px solid #323235 !important; border-radius: 0 !important; }
.zen-mode .ribbon-label { color: #a1a1a6 !important; letter-spacing: 0; }
.zen-mode .ribbon-val { font-weight: 500 !important; letter-spacing: -.04em; }
.zen-mode .ribbon-separator { background: #353538 !important; }
.zen-mode .pulse-center { background: #1b1b1e !important; border-color: #737a85 !important; box-shadow: 0 0 0 7px #ffffff03 !important; }
.zen-mode .pulse-aura { opacity: .08 !important; }
.zen-mode .canvas-ambient-container { opacity: .35 !important; }
.zen-mode .zen-ring-heart { color: #d1d1d6 !important; filter: none !important; text-shadow: none !important; }
.zen-mode .zen-ring-heart .ui-icon { width: 22px; height: 22px; }
.zen-mode .zen-ring-bpm { font-size: 2.7rem !important; font-weight: 500 !important; letter-spacing: -.06em; }
.zen-mode .zen-ring-bpm .unit { color: #b6b6bc !important; font-size: .72rem !important; font-weight: 500; }
.zen-mode .zen-ring-bpm .bps-sub, .zen-mode .zen-ring-instruction { color: #a1a1a6 !important; font-weight: 400 !important; }
.zen-mode .zen-arousal-title { color: #c7c7cc !important; letter-spacing: .03em !important; font-weight: 500 !important; }
.zen-mode .zen-arousal-range-hint { color: #929298 !important; }
.zen-mode .arousal-tactile-strip { background: #222225 !important; border-color: #36363a !important; }
.zen-mode .arousal-tap-btn { color: #c7c7cc !important; font-weight: 500 !important; }
.zen-mode .arousal-tap-btn.active { background: #e8e8ed !important; color: #1d1d1f !important; border-color: transparent !important; box-shadow: none !important; text-shadow: none !important; }
.zen-mode .arousal-badge { background: #29292d !important; border-color: #404046 !important; color: #d2d2d7 !important; box-shadow: none !important; font-weight: 500 !important; }
.zen-mode .zen-zone-pill, .zen-mode .zen-zone-pill.active { color: #a1a1a6 !important; text-shadow: none !important; }
.zen-mode .zone-dot { box-shadow: none !important; }
/* Zone glyphs: small line icons in the zone's colour, replacing the coloured dots. */
.zen-zone-pill .zone-glyph {width:13px;height:13px;border-radius:0;background:none !important;flex-shrink:0;opacity:.85;transition:opacity 180ms ease,filter 180ms ease;}
.zen-zone-pill .zone-glyph.dot-calm {color:#5fcfa6;}
.zen-zone-pill .zone-glyph.dot-plateau {color:#e2b45e;}
.zen-zone-pill .zone-glyph.dot-edge {color:#ee8f4a;}
.zen-zone-pill .zone-glyph.dot-brink {color:#e9737f;}
.zen-zone-pill.active .zone-glyph {opacity:1;filter:drop-shadow(0 0 4px currentColor);}
@media(max-width:600px) {.zen-zone-pill .zone-glyph {width:12px;height:12px;}}
.zen-mode .guidance-text { color: #a1a1a6 !important; }
.zen-mode #btn-start-pause { background: #0a84ff !important; border-color: #0a84ff !important; color: #fff !important; }
.zen-mode #btn-climax-end, .zen-mode #btn-reset-session { background: #2c2c2e !important; border-color: #3a3a3c !important; color: #e5e5ea !important; }
.zen-mode #btn-climax-end .climax-text-wrap { font-size: .72rem; letter-spacing: .02em; }
.zen-mode #btn-edge-trigger { box-shadow: none !important; }
.zen-mode .primary-controls .btn { border-radius: 11px !important; font-weight: 500 !important; }
.zen-mode .btn-drawer-toggle { border: 0 !important; color: #a1a1a6 !important; font-weight: 400 !important; font-size: .8rem !important; }
.zen-mode .btn-drawer-toggle .ui-icon:first-child { display: none; }
.zen-mode .zen-drawer-content { border-color: #38383b; }
.zen-mode .mode-tab { background: #232326; border-color: #38383d; }
.zen-mode .mode-tab.active { background: #293342; border-color: #56779e; box-shadow: none; }
.zen-mode .tab-title { color: #e5e5ea; font-weight: 500; }
.zen-mode .tab-desc { color: #a1a1a6 !important; }
.zen-mode :is(.settings-card, .history-card, .progression-card, .telemetry-card, .guide-card, .wave-sequencer-card, .levels-selector-bar, .tempo-control-panel) { background: #202023 !important; border-color: #363639 !important; }
.zen-mode .custom-select { background-color: #29292c; border-color: #444449; color: #e5e5ea; }
.zen-mode .section-heading, .zen-mode h3 { font-weight: 600; letter-spacing: -.015em; }
.zen-mode input { accent-color: #0a84ff; }
.zen-mode :is(button, input, select, a):focus-visible { outline-color: #64aaff !important; }
.zen-mode .modal-card { background: #202023 !important; border: 1px solid #444448; }
.zen-mode .modal-badge-icon .ui-icon { width: 36px; height: 36px; color: #a1a1a6; }
body.zen-mode .primary-controls :where(#btn-start-pause, #btn-edge-trigger, #btn-climax-end, #btn-reset-session) { border-radius: 999px !important; box-shadow: none !important; }
body.zen-mode #arousal-tactile-strip .arousal-tap-btn { border-radius: 13px !important; color: var(--scale-ink) !important; --scale-color: #249b7b; --scale-ink: #78bda9; }
body.zen-mode #arousal-tactile-strip .arousal-tap-btn:nth-child(n+4) { --scale-color: #a98427; --scale-ink: #c8b76f; }
body.zen-mode #arousal-tactile-strip .arousal-tap-btn:nth-child(n+6) { --scale-color: #e76b20; --scale-ink: #c49b73; }
body.zen-mode #arousal-tactile-strip .arousal-tap-btn:nth-child(n+8) { --scale-color: #c95565; --scale-ink: #c58d97; }
body.zen-mode #arousal-tactile-strip .arousal-tap-btn.active { background: var(--scale-color) !important; color: #fff !important; box-shadow: 0 0 16px color-mix(in srgb, var(--scale-color) 24%, transparent) !important; border-color: transparent !important; }
body.zen-mode #arousal-tactile-strip .arousal-tap-btn .btn-lvl-num { color: inherit !important; text-shadow: none !important; }
body.zen-mode #arousal-tactile-strip { background: #151d28 !important; border-color: #2e3c4e !important; border-radius: 18px !important; box-shadow: none !important; }
body.zen-mode .zen-arousal-dock { --badge-accent: #63bf9f; }
body.zen-mode .zen-arousal-dock:has(.arousal-tap-btn.active:nth-child(n+4)) { --badge-accent: #d4b561; }
body.zen-mode .zen-arousal-dock:has(.arousal-tap-btn.active:nth-child(n+6)) { --badge-accent: #ee8a3c; }
body.zen-mode .zen-arousal-dock:has(.arousal-tap-btn.active:nth-child(n+8)) { --badge-accent: #e37d8b; }
body.zen-mode .zen-arousal-dock #arousal-val-badge { color: var(--badge-accent) !important; background: color-mix(in srgb, var(--badge-accent) 14%, #141b25) !important; border: 1px solid color-mix(in srgb, var(--badge-accent) 40%, transparent) !important; border-radius: 999px !important; }
@media (max-width: 600px) {
  .zen-mode .badge-clinical { display: none !important; }
  .zen-mode .brand-title { font-size: 1rem !important; }
  .zen-mode .zen-ring-bpm { font-size: 2.45rem !important; }
}

/* Focused review: clear hierarchy, reserved announcements, fast privacy access. */
body.zen-mode #btn-discrete {
  min-height: 52px !important; padding: 0 18px !important;
  background: #e8e8ed !important; color: #1d1d1f !important;
  border: 0 !important; border-radius: 16px !important;
  font-size: .9rem !important; font-weight: 650 !important; gap: 9px !important;
}
body.zen-mode #btn-discrete .btn-text { display: inline !important; }
.privacy-shortcut { font: inherit; font-size: .65rem; opacity: .6; border: 1px solid currentColor; border-radius: 5px; padding: 2px 4px; }
body.zen-mode #pulse-center { width: 270px !important; height: 270px !important; min-width: 270px !important; min-height: 270px !important; padding: 22px !important; }
body.zen-mode #disp-current-bpm { font-size: 3.3rem !important; }
body.zen-mode #disp-phase-instruction { max-width: 205px !important; font-size: .82rem !important; line-height: 1.45 !important; }
body.zen-mode #main-visualizer-deck { min-height: 332px !important; justify-content: flex-start !important; gap: 10px; }
body.zen-mode #visualizer-notification-zone { min-height: 52px !important; height: 52px; margin: 0 !important; flex-shrink: 0; }
body.zen-mode #speed-trend-banner { width: min(100%, 410px); min-height: 46px; border-radius: 15px !important; padding: 8px 14px !important; background: #1b2734 !important; border: 1px solid #40576e !important; box-shadow: none !important; gap: 12px; }
body.zen-mode #speed-trend-banner.trend-down { background: transparent !important; border: 0 !important; }
body.zen-mode #speed-trend-banner.trend-warning { background: transparent !important; border: 0 !important; }
body.zen-mode #speed-trend-banner.trend-max { background: transparent !important; border: 0 !important; }
body.zen-mode #trend-main-text { font-size: .85rem !important; font-weight: 600 !important; text-transform: none !important; color: #f5f5f7 !important; white-space: normal !important; }
body.zen-mode #trend-main-text .ui-icon { display: none; }
body.zen-mode #trend-sub-text { font-size: .76rem !important; background: none !important; color: #bac5d1 !important; padding: 0 !important; white-space: normal !important; }
body.zen-mode .trend-text-group { flex: 1; min-width: 0; align-items: flex-start; }
body.zen-mode #trend-countdown-badge { width: 30px; height: 30px; min-width: 30px; background: #e5e5ea !important; color: #1d1d1f !important; box-shadow: none !important; }
body.zen-mode #cadence-trend-pill { display: none !important; }
body.zen-mode #zen-arousal-zones { display: grid !important; grid-template-columns: repeat(4, minmax(0,1fr)); width: 100%; gap: 8px !important; margin-top: 9px !important; }
body.zen-mode #zen-arousal-zones .zen-zone-pill { justify-content: center; padding: 7px 3px !important; border-radius: 10px !important; border: 1px solid transparent; font-size: .72rem !important; white-space: nowrap; }
body.zen-mode #zen-arousal-zones .zen-zone-pill.active { background: #ffffff07 !important; border-color: #ffffff16; color: #e5e5ea !important; }
body.zen-mode #zen-arousal-zones .ui-icon { display: none; }
body.zen-mode #btn-toggle-advanced { font-size: .76rem !important; min-height: 44px; padding: 8px 16px !important; opacity: .85; }
body.zen-mode #btn-toggle-advanced:hover { opacity: 1; background: #ffffff06 !important; }
@media(max-width:600px) {
  body.zen-mode #btn-discrete { min-height: 48px !important; padding: 0 12px !important; font-size: .78rem !important; border-radius: 14px !important; }
  .privacy-shortcut { display: none; }
  body.zen-mode .brand-logo { display: none !important; }
  body.zen-mode #pulse-center { width: 240px !important; height: 240px !important; min-width: 240px !important; min-height: 240px !important; }
  body.zen-mode #main-visualizer-deck { min-height: 302px !important; }
  body.zen-mode #zen-arousal-zones { gap: 2px !important; }
  body.zen-mode #zen-arousal-zones .zen-zone-pill { font-size: .61rem !important; }
}
body.zen-mode #btn-discrete .privacy-shortcut { background: transparent !important; color: #343438 !important; border-color: #99999f !important; box-shadow: none !important; }
@media(min-width:601px) and (max-height:950px) {
  body.zen-mode .app-container.zen-layout { gap: 10px !important; padding-top: 16px !important; padding-bottom: 16px !important; }
  body.zen-mode #main-visualizer-deck { min-height: 320px !important; gap: 0; }
  body.zen-mode .zen-arousal-guidance-callout { padding: 3px 10px !important; }
}

/* Session summary: compact hierarchy with persistent actions. */
/* The selected level drives a soft upward wash beneath the tactile controls. */
body.zen-mode #arousal-tactile-strip {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  --glow-position: 25%;
  --glow-strength: .32;
  --glow-duration: 4.5s;
}
body.zen-mode #arousal-tactile-strip:has([data-val="1"].active) { --glow-position: 5%; }
body.zen-mode #arousal-tactile-strip:has([data-val="2"].active) { --glow-position: 15%; }
body.zen-mode #arousal-tactile-strip:has([data-val="3"].active) { --glow-position: 25%; }
body.zen-mode #arousal-tactile-strip:has([data-val="4"].active) { --glow-position: 35%; --glow-strength: .4; }
body.zen-mode #arousal-tactile-strip:has([data-val="5"].active) { --glow-position: 45%; --glow-strength: .4; }
body.zen-mode #arousal-tactile-strip:has([data-val="6"].active) { --glow-position: 55%; --glow-strength: .48; --glow-duration: 3.6s; }
body.zen-mode #arousal-tactile-strip:has([data-val="7"].active) { --glow-position: 65%; --glow-strength: .48; --glow-duration: 3.6s; }
body.zen-mode #arousal-tactile-strip:has([data-val="8"].active) { --glow-position: 75%; --glow-strength: .54; --glow-duration: 3s; }
body.zen-mode #arousal-tactile-strip:has([data-val="9"].active) { --glow-position: 85%; --glow-strength: .54; --glow-duration: 3s; }
body.zen-mode #arousal-tactile-strip:has([data-val="10"].active) { --glow-position: 95%; --glow-strength: .54; --glow-duration: 3s; }
body.zen-mode #arousal-tactile-strip::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  inset: 0;
  background: radial-gradient(ellipse 48% 120% at var(--glow-position) 120%, var(--badge-accent), transparent 78%);
  opacity: var(--glow-strength);
  transition: background 600ms ease, opacity 600ms ease;
  animation: scale-glow-breathe var(--glow-duration) ease-in-out infinite;
}
body.zen-mode #arousal-tactile-strip::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  left: -10%; right: -10%; bottom: -20%; height: 80%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--badge-accent) 28%, transparent), transparent 72%);
  animation: scale-glow-rise calc(var(--glow-duration) * 1.5) ease-in-out infinite;
}
@keyframes scale-glow-breathe {
  0%, 100% { transform: translateY(9%) scaleX(.95); opacity: calc(var(--glow-strength) * .65); }
  50% { transform: translateY(-5%) scaleX(1.06); opacity: var(--glow-strength); }
}
@keyframes scale-glow-rise {
  0%, 100% { transform: translateY(25%); opacity: .2; }
  50% { transform: translateY(-20%); opacity: .65; }
}
@media(max-width:600px) {
  body.zen-mode #arousal-tactile-strip { --glow-position: 50% !important; }
}
@media(prefers-reduced-motion:reduce) {
  body.zen-mode #arousal-tactile-strip::before, body.zen-mode #arousal-tactile-strip::after { animation: none !important; transition: none !important; }
}
body.zen-mode #climax-modal { background: #08080bbf; backdrop-filter: blur(12px); padding: 20px !important; }
body.zen-mode #climax-modal .climax-modal-card { position: relative; text-align: left; max-width: 600px !important; padding: 30px 28px 0 !important; border-radius: 26px !important; background: #1c1c1f !important; border: 1px solid #3a3a40 !important; box-shadow: 0 28px 90px #0008 !important; scrollbar-width: thin; scrollbar-color: #55555c transparent; }
.summary-close { position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: #323237; color: #d2d2d7; display: grid; place-items: center; cursor: pointer; }
.summary-eyebrow { font-size: .65rem; font-weight: 600; letter-spacing: .14em; color: #91919a; margin-bottom: 8px; }
body.zen-mode #climax-modal .modal-title { font-size: 1.8rem; font-weight: 600; letter-spacing: -.045em; line-height: 1.2; margin: 0 40px 8px 0; }
body.zen-mode #climax-modal .modal-desc { color: #a1a1aa; font-size: .88rem; line-height: 1.5; margin-bottom: 22px; }
body.zen-mode #climax-modal .modal-stats-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0; background: #242428; border: 1px solid #35353b; border-radius: 18px; padding: 0; overflow: hidden; margin-bottom: 20px; }
body.zen-mode #climax-modal .m-stat { padding: 13px 16px; border-bottom: 1px solid #35353b; gap: 4px; min-width: 0; }
body.zen-mode #climax-modal .m-stat:nth-child(odd) { border-right: 1px solid #35353b; }
body.zen-mode #climax-modal .m-stat:nth-last-child(-n+2) { border-bottom: 0; }
body.zen-mode #climax-modal .m-label { color: #a1a1aa; font-size: .72rem; text-transform: none; letter-spacing: 0; }
body.zen-mode #climax-modal .m-val { color: #f5f5f7 !important; font-size: 1.13rem; font-weight: 500; letter-spacing: -.025em; }
body.zen-mode #climax-modal .m-stat:nth-child(-n+2) .m-val { font-size: 2rem; letter-spacing: -.05em; }
/* Duration benchmark: a recessed leather track; the reached tier sits in it as a raised chip. */
body.zen-mode #climax-benchmark-card { background: transparent; border: 0; border-top: 1px solid #ffffff0f; border-radius: 0; padding: 20px 0 0; margin-bottom: 16px; box-shadow: none; }
body.zen-mode #climax-modal .benchmark-header-row { gap: 8px; margin-bottom: 10px; }
body.zen-mode #climax-modal .benchmark-label { color: #d3dae0; letter-spacing: 0; font-size: .82rem; font-weight: 500; text-transform: none; }
body.zen-mode #climax-benchmark-badge { --tier-ink: #d8a27f; font-size: .62rem; font-weight: 500; letter-spacing: .08em; padding: 4px 10px; box-shadow: none; background: #ffffff06; border: 1px solid #ffffff10; color: var(--tier-ink); }
body.zen-mode #climax-benchmark-badge.tier-early { --tier-ink: #e0b283; }
body.zen-mode #climax-benchmark-badge.tier-functional { --tier-ink: #d9c98a; }
body.zen-mode #climax-benchmark-badge.tier-plateau { --tier-ink: #9fd3b8; }
body.zen-mode #climax-benchmark-badge.tier-mastery { --tier-ink: #9ccbe4; }
body.zen-mode #climax-benchmark-badge.tier-elite { --tier-ink: #c7b3e6; }
body.zen-mode #climax-benchmark-status { font-size: .83rem; font-weight: 500; color: #e2e8ec; }
body.zen-mode #climax-benchmark-gap { font-size: .74rem; color: #a1a1aa; line-height: 1.5; }
body.zen-mode #climax-modal .benchmark-scale-track {
  gap: 3px; margin-top: 12px; padding: 4px; border-radius: 14px;
  border: 1px solid #ffffff08;
  background: linear-gradient(180deg,#151718,#1b1d1f 70%,#1e2022);
  box-shadow: inset 0 2px 5px #0008, inset 0 1px 1px #0006, inset 0 -1px 0 #ffffff08;
}
body.zen-mode #climax-modal .b-segment {
  display: grid; gap: 2px; place-items: center; min-width: 0;
  border-radius: 10px; background: transparent; border: 1px solid transparent; padding: 7px 3px; box-shadow: none;
}
body.zen-mode #climax-modal .b-seg-label { font-size: .72rem; font-weight: 500; color: #8f979e; font-family: inherit; letter-spacing: -.01em; }
body.zen-mode #climax-modal .b-seg-sub { display: block; font-size: .6rem; color: #666d73; letter-spacing: .02em; text-transform: none; }
body.zen-mode #climax-modal .b-segment.active {
  --tier-ink: #e0a07a;
  border-color: #ffffff0f;
  background: radial-gradient(120% 95% at 50% -18%,#ffffff12,transparent 62%), linear-gradient(180deg,#2e3134,#242628 58%,#202224);
  box-shadow: inset 0 1px 0 #ffffff12, inset 0 -1px 0 #00000060, 0 1px 2px #0006;
}
body.zen-mode #climax-modal .b-segment.active.b-seg-2 { --tier-ink: #e0b283; }
body.zen-mode #climax-modal .b-segment.active.b-seg-3 { --tier-ink: #d9c98a; }
body.zen-mode #climax-modal .b-segment.active.b-seg-4 { --tier-ink: #9fd3b8; }
body.zen-mode #climax-modal .b-segment.active.b-seg-5 { --tier-ink: #9ccbe4; }
body.zen-mode #climax-modal .b-segment.active.b-seg-6 { --tier-ink: #c7b3e6; }
body.zen-mode #climax-modal .b-segment.active .b-seg-label { color: var(--tier-ink); }
body.zen-mode #climax-modal .b-segment.active .b-seg-sub { color: color-mix(in srgb, var(--tier-ink) 70%, #7c8288); }
body.zen-mode #climax-advice-box {
  padding: 14px 16px; margin: 0 0 16px; border-radius: 14px;
  background: linear-gradient(180deg,#1a1c1e,#1e2022); border: 1px solid #ffffff09;
  box-shadow: inset 0 1px 2px #0006, inset 0 -1px 0 #ffffff06;
  font-size: .77rem; line-height: 1.6; color: #b3bcc3;
}
body.zen-mode #climax-advice-box strong { color: #dfe6ea; font-weight: 500; }
body.zen-mode #climax-modal .modal-actions { position: sticky; bottom: 0; background: #1c1c1ff5; backdrop-filter: blur(12px); padding: 16px 0; margin: 0; border-top: 1px solid #39393e; display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px !important; }
body.zen-mode #climax-modal .modal-actions .btn { min-height: 46px; border-radius: 999px; justify-content: center; font-size: .85rem; box-shadow: none; }
body.zen-mode #btn-climax-modal-close { background: #0a84ff; border-color: #0a84ff; }
body.zen-mode #btn-download-climax-json { background: #2c2c30; border-color: #424249; color: #dedee3; }
@media(max-width:600px) {
  body.zen-mode #climax-modal { padding: 10px !important; }
  body.zen-mode #climax-modal .climax-modal-card { padding: 24px 18px 0 !important; max-height: 94dvh !important; border-radius: 22px !important; }
  body.zen-mode #climax-modal .modal-title { font-size: 1.6rem; }
  body.zen-mode #climax-modal .m-stat { padding: 12px; }
  body.zen-mode #climax-modal .benchmark-scale-track { grid-template-columns: repeat(6,minmax(0,1fr)) !important; }
}

/* One status line per message: subdued surface, clear target, readable countdown. */
body.zen-mode #speed-trend-banner { width: min(100%, 430px) !important; background: #23262b !important; border: 1px solid #42474f !important; border-radius: 16px !important; min-height: 50px; animation: none !important; transform: none !important; }
body.zen-mode #speed-trend-banner .trend-text-group { display: flex !important; flex-direction: row !important; align-items: baseline !important; justify-content: space-between; gap: 12px; white-space: normal !important; }
body.zen-mode #trend-main-text { font-size: .82rem !important; font-weight: 500 !important; }
body.zen-mode #trend-sub-text { color: #f5f5f7 !important; font-size: .88rem !important; font-weight: 600 !important; }
body.zen-mode #trend-icon { color: #aab9c9; font-size: 1rem; }
body.zen-mode #trend-countdown-badge { background: #353a43 !important; color: #f5f5f7 !important; width: 34px; min-width: 34px; height: 34px; border: 1px solid #59616d; border-radius: 50%; font-size: .82rem !important; animation: none !important; }
body.zen-mode .zen-arousal-dock #arousal-val-badge { background: transparent !important; border: 0 !important; padding: 2px 0 !important; font-size: .8rem !important; letter-spacing: 0; font-weight: 500 !important; }
@media(max-width:600px) {
  body.zen-mode #speed-trend-banner .trend-text-group { gap: 6px; }
  body.zen-mode #trend-main-text { font-size: .75rem !important; }
}
body.zen-mode #trend-sub-text { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
body.zen-mode #main-visualizer-deck { gap: 8px !important; }

/* Product surfaces: shared spacing, typography and interaction treatment. */
body.zen-mode { --surface-raised: #242427; --line-soft: #ffffff12; --label-secondary: #aaaab2; }
body.zen-mode .app-container.zen-layout { background: linear-gradient(160deg,#1c1c1f,#151517 65%) !important; border-color: #ffffff13 !important; }
body.zen-mode .brand-title { font-size: 1.12rem !important; letter-spacing: -.045em; }
body.zen-mode .brand-logo { background: #ffffff09 !important; border: 1px solid #ffffff10; }
body.zen-mode .ribbon-val { font-size: 1.6rem !important; font-weight: 450 !important; }
body.zen-mode #pulse-center { border-color: #858a934d !important; background: radial-gradient(circle at 50% 35%,#28282c,#1c1c20 75%) !important; box-shadow: 0 0 0 8px #ffffff02, inset 0 1px 0 #ffffff0a !important; }
body.zen-mode #disp-current-bpm { font-weight: 450 !important; letter-spacing: -.065em !important; }
body.zen-mode .btn:disabled { filter: saturate(.25); }
body.zen-mode .zen-drawer-content { padding-top: 28px; gap: 22px; }
body.zen-mode .mode-nav { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 5px; background: #101012; border: 1px solid var(--line-soft); border-radius: 18px; padding: 5px; }
body.zen-mode .mode-tab { padding: 14px 10px; background: transparent; border: 1px solid transparent; border-radius: 13px; text-align: center; }
body.zen-mode .mode-tab.active { background: #303034; border-color: #ffffff12; box-shadow: 0 3px 8px #0003; }
body.zen-mode .tab-title { font-size: .84rem; font-weight: 550; }
body.zen-mode .tab-title .ui-icon { margin-right: 4px; }
body.zen-mode .tab-desc { font-size: .68rem; margin-top: 5px; line-height: 1.4; }
body.zen-mode .settings-header, body.zen-mode .section-heading { font-size: .95rem; letter-spacing: -.02em; text-transform: none; }
body.zen-mode .settings-card { padding: 24px !important; }
body.zen-mode .settings-grid { column-gap: 24px; row-gap: 24px; }
body.zen-mode .setting-item > label { font-size: .78rem; font-weight: 500; color: #bdbdc6; margin-bottom: 8px; }
body.zen-mode .custom-select { background-color: #29292e; border: 1px solid #ffffff16; min-height: 46px; font-size: .82rem; border-radius: 12px; }
body.zen-mode #btn-preview-beat, body.zen-mode #btn-preview-completion { display: inline-flex; width: fit-content; min-height: 36px; margin-top: 6px; border: 1px solid #ffffff12; border-radius: 999px; padding: 7px 12px; font-size: .73rem; color: #bdc9d9; background: #ffffff05; }
body.zen-mode .settings-row { border-top: 1px solid var(--line-soft); padding-top: 10px; gap: 0 !important; }
body.zen-mode .settings-row .toggle-control { padding: 13px 0; border-bottom: 1px solid var(--line-soft); display: flex; width: 100%; }
body.zen-mode .settings-row .toggle-control:last-child { border-bottom: 0; }
body.zen-mode .settings-row .toggle-label { order: -1; flex: 1; font-size: .83rem; color: #d2d2da; }
body.zen-mode .toggle-slider { flex-shrink: 0; }
.settings-disclosure { border: 1px solid #ffffff12; background: #1c1c20; border-radius: 17px; overflow: hidden; }
.settings-disclosure > summary { display: flex; align-items: center; justify-content: space-between; list-style: none; padding: 18px 20px; cursor: pointer; font-size: .9rem; font-weight: 500; color: #e3e3ea; }
.settings-disclosure > summary::-webkit-details-marker { display: none; }
.settings-disclosure > summary small { display: block; font-size: .73rem; color: #9797a2; font-weight: 400; margin-top: 4px; }
.settings-disclosure > summary svg { color: #9696a1; transition: transform 180ms ease; }
.settings-disclosure[open] > summary svg { transform: rotate(180deg); }
.settings-disclosure[open] > summary { border-bottom: 1px solid #ffffff10; }
.settings-disclosure > summary:focus-visible { outline: 2px solid #64aaff; outline-offset: -4px; border-radius: 16px; }
body.zen-mode .settings-disclosure > section { border: 0 !important; background: transparent !important; border-radius: 0 !important; margin: 0; }
body.zen-mode .settings-disclosure .history-header h3, body.zen-mode .settings-disclosure .guide-title { display: none; }
body.zen-mode .wave-preset-btn { background: #ffffff03; border-color: #ffffff12; font-size: .75rem; font-weight: 450; }
body.zen-mode .wave-preset-btn.active { background: #253241; border-color: #6683a266; box-shadow: none; }
@media(max-width:600px) {
  body.zen-mode .mode-nav { grid-template-columns: repeat(2,minmax(0,1fr)); }
  body.zen-mode .settings-card { padding: 18px !important; }
  body.zen-mode .tab-desc { font-size: .7rem; }
  .settings-disclosure > summary { padding: 16px; }
}
@media(prefers-reduced-motion:reduce) {
  .settings-disclosure > summary svg { transition: none; }
}
.sound-preview-actions { display: flex; gap: 8px; flex-wrap: wrap; }
body.zen-mode .setting-item input[type="range"] { flex: 0 0 44px; height: 44px; width: 100%; background: transparent; border: 0; cursor: pointer; }
body.zen-mode .setting-item input[type="range"]::-webkit-slider-runnable-track { height: 5px; border-radius: 999px; background: #4c4c56; }
body.zen-mode .setting-item input[type="range"]::-webkit-slider-thumb { margin-top: -7px; height: 19px; width: 19px; background: #eeeef2; box-shadow: 0 1px 5px #0006; }
body.zen-mode .setting-item input[type="range"]::-moz-range-track { height: 5px; border-radius: 999px; background: #4c4c56; }
body.zen-mode .setting-item input[type="range"]::-moz-range-thumb { height: 19px; width: 19px; border: 0; background: #eeeef2; box-shadow: 0 1px 5px #0006; }

/* Beat phase, selected level and stage timing share one quiet visual language. */
body.zen-mode #pulse-center { animation: none !important; transform: scale(var(--beat-scale,1)) !important; }
body.zen-mode .canvas-ambient-container { opacity: .85 !important; }
body.zen-mode #arousal-tactile-strip::before { animation: none !important; opacity: calc(.18 + var(--beat-energy,0) * .36); transform: translateY(calc(10% - var(--beat-energy,0) * 16%)); transition: background 300ms ease; }
body.zen-mode #arousal-tactile-strip::after { animation: none !important; opacity: calc(var(--beat-energy,0) * .45); transform: translateY(calc(20% - var(--beat-energy,0) * 35%)); }
.stage-timeline { width: 100%; margin: 0 0 14px; color: var(--badge-accent); }
.stage-timeline-labels { display: flex; justify-content: space-between; gap: 12px; font-size: .7rem; font-variant-numeric: tabular-nums; margin-bottom: 9px; }
#stage-elapsed { color: #9d9da8; }
#stage-next { text-align: right; }
#stage-progress { height: 3px; width: 100%; border-radius: 999px; background: #ffffff12; overflow: hidden; }
#stage-progress::before { content: ''; display: block; width: var(--stage-progress,0%); height: 100%; background: currentColor; border-radius: inherit; transition: width 300ms linear; }
@media(prefers-reduced-motion:reduce) { #stage-progress::before { transition: none; } }
@media (max-width:1100px) {
  body.zen-mode .primary-controls { display: flex !important; flex-direction: column !important; max-width: 560px !important; }
  body.zen-mode .primary-controls .controls-row { display: flex !important; width: 100% !important; gap: 10px !important; }
  body.zen-mode .primary-controls .controls-row .btn { flex: 1 1 0 !important; min-width: 0 !important; white-space: normal !important; padding: 12px 10px !important; }
}

/* Mobile action dock: predictable rows, generous hit areas, no squeezed labels. */
@media (max-width: 600px) {
  body.zen-mode .primary-controls {
    display: flex !important; flex-direction: column !important;
    width: 100% !important; max-width: 100% !important;
    gap: 12px !important; padding: 4px 2px !important; margin: 8px 0 !important;
  }
  body.zen-mode .primary-controls .controls-row {
    display: grid !important; width: 100% !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr);
    gap: 10px !important; align-items: stretch !important;
  }
  body.zen-mode .primary-controls .controls-row.secondary-actions {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  }
  body.zen-mode .primary-controls .controls-row :where(#btn-start-pause, #btn-edge-trigger, #btn-climax-end, #btn-reset-session) {
    width: 100% !important; min-width: 0 !important; max-width: none !important;
    min-height: 56px !important; height: auto !important;
    padding: 12px 14px !important; margin: 0 !important;
    justify-content: center !important; align-items: center !important;
    gap: 7px !important; font-size: .8rem !important; line-height: 1.3 !important;
    white-space: normal !important; box-sizing: border-box !important;
    border-radius: 28px !important;
  }
  body.zen-mode .primary-controls :is(#start-btn-text, #btn-edge-main-text, .climax-text-wrap, .btn-climax-text) {
    min-width: 0 !important; max-width: 100% !important;
    white-space: normal !important; overflow-wrap: normal; text-align: center;
    font-size: .8rem !important; line-height: 1.3 !important;
  }
  body.zen-mode .primary-controls .btn-icon { flex-shrink: 0; }
  body.zen-mode .primary-controls #btn-climax-end .climax-icon { display: none !important; }
}

/* Banner text must wrap within its own column, including long status messages. */
body.zen-mode #visualizer-notification-zone {
  height: auto !important; min-height: 56px !important; flex-shrink: 0;
}
body.zen-mode #speed-trend-banner {
  display: grid !important; grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center !important; max-width: 100% !important;
  box-sizing: border-box !important; white-space: normal !important;
}
body.zen-mode #speed-trend-banner.hidden { display: none !important; }
body.zen-mode #speed-trend-banner .trend-text-group {
  display: flex !important; flex-direction: column !important;
  align-items: flex-start !important; justify-content: center !important;
  min-width: 0 !important; width: 100%; gap: 3px !important;
}
body.zen-mode #speed-trend-banner :is(#trend-main-text, #trend-sub-text) {
  display: block !important; min-width: 0 !important; max-width: 100% !important;
  white-space: normal !important; overflow-wrap: anywhere !important;
  word-break: normal !important; line-height: 1.35 !important;
  text-align: left !important; height: auto !important;
}
body.zen-mode #speed-trend-banner #trend-sub-text { font-size: .76rem !important; font-weight: 400 !important; color: #b9c2cf !important; }
body.zen-mode #speed-trend-banner #trend-countdown-badge { align-self: center; }

/* Keep countdown and status in normal flow, even with long legacy labels. */
body.zen-mode #speed-trend-banner {
  grid-template-columns: 18px minmax(0, 1fr) 34px !important;
  column-gap: 10px !important; overflow: hidden !important;
}
body.zen-mode #speed-trend-banner #trend-icon { grid-column: 1; position: static !important; }
body.zen-mode #speed-trend-banner .trend-text-group { grid-column: 2; overflow: hidden; }
body.zen-mode #speed-trend-banner #trend-countdown-badge {
  grid-column: 3; position: static !important; inset: auto !important;
  transform: none !important; margin: 0 !important;
  width: 34px !important; min-width: 34px !important; max-width: 34px !important;
  height: 34px !important; flex-shrink: 0 !important;
}
body.zen-mode #zen-arousal-header {
  display: flex !important; flex-wrap: wrap !important;
  align-items: center !important; justify-content: space-between !important;
  width: 100% !important; min-width: 0 !important; gap: 6px 12px !important;
}
body.zen-mode #zen-arousal-header .zen-arousal-title-group {
  min-width: 0 !important; max-width: 100% !important; flex-wrap: wrap !important;
}
body.zen-mode #zen-arousal-header .zen-arousal-status-pill {
  min-width: 0 !important; max-width: 100% !important; flex: 0 1 auto !important;
}
body.zen-mode #zen-arousal-header #arousal-val-badge {
  display: block !important; max-width: 100% !important; min-width: 0 !important;
  white-space: normal !important; overflow-wrap: anywhere !important;
  line-height: 1.4 !important; text-align: left !important;
}

/* Stronger beat presence without moving the tempo text or changing layout. */
body.zen-mode #pulse-center {
  transform: none !important;
  border-color: color-mix(in srgb, var(--beat-color,#858a93) calc(25% + var(--beat-energy,0) * 40%), #626570) !important;
  box-shadow: 0 0 calc(7px + var(--beat-energy,0) * 24px) color-mix(in srgb, var(--beat-color,#858a93) calc(var(--beat-energy,0) * 28%), transparent), inset 0 0 calc(var(--beat-energy,0) * 16px) color-mix(in srgb, var(--beat-color,#858a93) 8%, transparent) !important;
}
body.zen-mode #arousal-tactile-strip::before { opacity: calc(.18 + var(--beat-energy,0) * .50); transform: translateY(calc(10% - var(--beat-energy,0) * 22%)); }
body.zen-mode #arousal-tactile-strip::after { opacity: calc(var(--beat-energy,0) * .58); }
/* A physical beat: expanding shell, outward ripple and rising light. */
body.zen-mode #pulse-center {
  position: relative;
  overflow: visible !important;
  transform: scale(var(--beat-scale,1)) !important;
  transition: none !important;
  isolation: isolate;
}
/* The ring scales with every beat and its children take the inverse scale so they stay still. That has
   to win, so it stays here in the ordinary cascade. */
body.zen-mode #pulse-center > :not(.beat-wash) {
  transform: scale(calc(1 / var(--beat-scale,1)));
}
/* The position and stacking this selector also handed out were a side effect, and they silently
   outranked anything a child asked for afterwards: a plain `#some-child { position: absolute }` lost to
   it and landed in flow instead. In a cascade layer they still apply as the default, but any ordinary
   rule outside the layer now wins whatever its specificity, so a new child just works. Children that
   already force their own position with !important are unaffected either way. */
@layer ring-children {
  body.zen-mode #pulse-center > :not(.beat-wash) {
    position: relative;
    z-index: 2;
  }
}
body.zen-mode #pulse-center::after {
  content: '';
  position: absolute;
  inset: -3px;
  border: 1.5px solid var(--beat-color,#63bf9f);
  border-radius: 50%;
  pointer-events: none;
  transform: scale(calc(1 + var(--beat-travel,1) * .34));
  opacity: calc((1 - var(--beat-travel,1)) * .65);
}
body.zen-mode #pulse-center .beat-wash {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
body.zen-mode #pulse-center .beat-wash::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, transparent 10%, color-mix(in srgb,var(--beat-color,#63bf9f) 22%,transparent) 45%, color-mix(in srgb,var(--beat-color,#63bf9f) 38%,transparent) 55%, transparent 80%);
  transform: translateY(calc(100% - var(--beat-travel,1) * 200%));
  opacity: calc(1 - var(--beat-travel,1));
}
body.zen-mode #arousal-tactile-strip::after {
  inset: 0;
  background: linear-gradient(to top,transparent 10%,color-mix(in srgb,var(--arousal-color,#63bf9f) 55%,transparent) 50%,transparent 90%);
  transform: translateY(calc(100% - var(--beat-travel,1) * 200%));
  opacity: calc((1 - var(--beat-travel,1)) * .85);
}
/* Recovery belongs to the same quiet, rounded interface. */
body.zen-mode #hands-off-banner {
  width: min(100%, 560px) !important;
  box-sizing: border-box;
  margin: 8px auto 18px !important;
  padding: 16px 20px !important;
  border: 1px solid #e37d8b40 !important;
  border-radius: 22px !important;
  background: #271e22 !important;
  box-shadow: none !important;
  gap: 14px !important;
  text-align: left;
}
body.zen-mode #hands-off-banner h2 {font-size: 17px !important;line-height:1.35 !important;color:#f1dce0 !important;letter-spacing:0 !important;margin:0 0 4px !important;}
body.zen-mode #hands-off-banner p {font-size:13px !important;line-height:1.55 !important;color:#b9a9ae !important;margin:0 !important;}
body.zen-mode #hands-off-banner .alert-icon {font-size:22px !important;color:#e9a6b1 !important;flex-shrink:0;}
body.zen-mode .phase-stop #pulse-center {border-color:#b9828a80 !important;background:radial-gradient(circle,#30252a,#1c1c20 75%) !important;box-shadow:none !important;}
body.zen-mode .phase-stop #visualizer-notification-zone {display:none !important;}
body.zen-mode .controls-row {display:grid !important;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) !important;gap:12px !important;width:min(100%,620px) !important;margin-inline:auto !important;}
body.zen-mode .controls-row > button {min-width:0 !important;white-space:normal !important;height:auto !important;min-height:52px !important;padding:12px 18px !important;line-height:1.3 !important;}
#btn-apply-prescription {background:#e4e4e9 !important;color:#202024 !important;box-shadow:none !important;border:0 !important;border-radius:14px !important;min-height:44px;padding:10px 18px !important;white-space:normal !important;}
@media(max-width:600px) {
 body.zen-mode #hands-off-banner {padding:14px 16px !important;margin-bottom:14px !important;}
 body.zen-mode .controls-row {gap:10px !important;}
 body.zen-mode .controls-row > button {padding:12px !important;font-size:12px !important;}
}
.cadence-window-labels {display:flex;justify-content:space-between;width:100%;padding:0 12px;box-sizing:border-box;font-size:10px;letter-spacing:.04em;color:#74747e;pointer-events:none;}
.cadence-window-labels span:nth-child(2) {color:#a0a0aa;}
body.zen-mode .rhythm-ring-stage {margin-top:12px !important;}
/* The ribbon shares the circle's centerline; arousal light rises beneath it. */
body.zen-mode .rhythm-ring-stage {width:100%;isolation:isolate;}
body.zen-mode .rhythm-ring-stage .canvas-ambient-container {height:340px !important;z-index:0 !important;opacity:1 !important;}
body.zen-mode .canvas-ambient-container #live-wave-canvas {height:340px !important;opacity:1 !important;filter:none !important;}
body.zen-mode .rhythm-ring-stage #pulse-center {z-index:2;}
@media(max-width:600px) {
 body.zen-mode .rhythm-ring-stage .canvas-ambient-container,
 body.zen-mode .canvas-ambient-container #live-wave-canvas {height:300px !important;}
}
.cadence-window-labels {display:grid;grid-template-columns:1fr 1fr 1fr;}
.cadence-window-labels span:nth-child(2) {text-align:center;}
.cadence-window-labels span:last-child {text-align:right;}
/* Stable status geometry: only the value and colour change. */
body.zen-mode #zen-arousal-header {display:grid !important;grid-template-columns:minmax(0,1fr) 20ch !important;column-gap:12px !important;}
body.zen-mode #zen-arousal-header .zen-arousal-status-pill {width:100% !important;min-width:0 !important;animation:none !important;transform:none !important;}
body.zen-mode #zen-arousal-header #arousal-val-badge {width:100% !important;box-sizing:border-box;white-space:nowrap !important;font-variant-numeric:tabular-nums;animation:none !important;transform:none !important;box-shadow:none !important;transition:color 180ms ease !important;}
body.zen-mode .cadence-window-labels {display:grid !important;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) !important;align-items:center;justify-content:normal !important;padding:0 12px !important;width:100%;box-sizing:border-box;}
body.zen-mode .cadence-window-labels > span {min-width:0;}
body.zen-mode .cadence-window-labels > span:nth-child(2) {text-align:center !important;}
body.zen-mode .cadence-window-labels > span:last-child {text-align:right !important;}
@media(max-width:600px) {
 body.zen-mode #zen-arousal-header {grid-template-columns:minmax(0,1fr) 145px !important;column-gap:8px !important;}
 body.zen-mode #zen-arousal-header #arousal-val-badge {font-size:11px !important;}
}
/* A continuous directional cue: one travel per beat, soft at each reversal. */
body.zen-mode #pulse-center .beat-wash::before {
  /* One soft body of light with continuous falloff on every side; the wash element clips it to the circle. */
  inset:-20% -12%;
  background:radial-gradient(ellipse 58% 30% at 50% 50%,color-mix(in srgb,#83b6ec calc(var(--motion-mix,50) * 1%),#73cbb5) 0%,color-mix(in srgb,color-mix(in srgb,#83b6ec calc(var(--motion-mix,50) * 1%),#73cbb5) 55%,transparent) 38%,transparent 72%);
  transform:translateY(calc(var(--motion-y,0) * .72%));
  opacity:calc(var(--motion-opacity,0) * .9);
  transition:none;
  filter:blur(16px);
  will-change:transform,opacity;
}
@media(prefers-reduced-motion:reduce) {
 body.zen-mode #pulse-center .beat-wash::before {opacity:0 !important;}
}
/* Reveal passing rhythm without sacrificing numeral contrast. */
body.zen-mode .rhythm-ring-stage #pulse-center {
 background:radial-gradient(circle at 50% 40%,rgba(30,30,34,.76),rgba(28,28,32,.42) 76%) !important;
 backdrop-filter:none !important;
}
body.zen-mode #pulse-center .zen-tempo-center,
body.zen-mode #pulse-center .zen-ring-instruction {
 text-shadow:0 1px 5px #151518,0 0 12px #151518;
}
/* A single centred tempo cue, without a card or badge chrome. */
body.zen-mode #speed-trend-banner {
 display:flex !important;justify-content:center !important;align-items:center !important;
 width:100% !important;max-width:100% !important;min-height:44px !important;
 padding:6px 0 !important;margin:0 !important;gap:10px !important;
 background:transparent !important;border:0 !important;border-radius:0 !important;
 box-shadow:none !important;backdrop-filter:none !important;
}
body.zen-mode #speed-trend-banner.hidden {display:none !important;}
body.zen-mode #speed-trend-banner #trend-icon {display:none !important;}
body.zen-mode #speed-trend-banner .trend-text-group {
 display:flex !important;flex-direction:row !important;justify-content:center !important;align-items:baseline !important;
 flex-wrap:wrap !important;gap:6px 10px !important;width:auto !important;
}
body.zen-mode #speed-trend-banner #trend-main-text {font-size:15px !important;font-weight:700 !important;line-height:1.4 !important;text-align:center !important;color:inherit !important;}
body.zen-mode #speed-trend-banner #trend-sub-text {font-size:12px !important;font-weight:500 !important;line-height:1.4 !important;color:inherit !important;opacity:.65;background:transparent !important;padding:0 !important;border:0 !important;box-shadow:none !important;}
body.zen-mode #speed-trend-banner #trend-countdown-badge {
 position:static !important;min-width:0 !important;width:auto !important;max-width:none !important;height:auto !important;
 padding:0 !important;margin:0 !important;border:0 !important;border-radius:0 !important;background:transparent !important;
 box-shadow:none !important;color:inherit !important;font-size:12px !important;font-weight:600 !important;
 animation:none !important;transform:none !important;
}
body.zen-mode #speed-trend-banner #trend-countdown-badge::after {content:'s';}
body.zen-mode #speed-trend-banner.trend-up {color:#8dbde8 !important;}
body.zen-mode #speed-trend-banner.trend-down {color:#85c8b3 !important;}
body.zen-mode #speed-trend-banner.trend-max {color:#e8b978 !important;}

/* Status variants inherit the same unboxed typography. */
body.zen-mode #speed-trend-banner:is(.trend-up,.trend-down,.trend-max,.trend-warning) {
 background:none !important;border:0 !important;box-shadow:none !important;
 width:fit-content !important;max-width:100% !important;margin-inline:auto !important;
 min-height:36px !important;padding:4px 0 !important;
}
body.zen-mode #speed-trend-banner #trend-main-text {font-size:14px !important;font-weight:600 !important;letter-spacing:0 !important;}
body.zen-mode #speed-trend-banner #trend-sub-text {font-size:12px !important;font-weight:400 !important;color:#9898a3 !important;opacity:1 !important;}
body.zen-mode #speed-trend-banner::before,
body.zen-mode #speed-trend-banner::after {content:none !important;display:none !important;}
body.zen-mode #hands-off-banner .recovery-care-note {
 margin-top:10px;padding-top:10px;border-top:1px solid #ffffff0b;
 color:#c2b9bf;font-size:12px;line-height:1.5;font-weight:400;
}
body.zen-mode #hands-off-banner .recovery-care-note.hidden {display:none;}
/* A balanced action deck with a clear hierarchy and generous hit areas. */
body.zen-mode .zen-action-dock .primary-controls {
 width:min(100%,560px) !important;margin-inline:auto !important;display:grid !important;gap:10px !important;
}
body.zen-mode .zen-action-dock .controls-row {
 width:100% !important;display:grid !important;grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;gap:10px !important;margin:0 !important;
}
body.zen-mode .zen-action-dock .controls-row > button {
 display:flex !important;align-items:center !important;justify-content:center !important;gap:10px !important;
 width:100% !important;min-width:0 !important;min-height:62px !important;margin:0 !important;padding:14px 18px !important;
 border-radius:18px !important;font-family:inherit !important;font-size:15px !important;font-weight:600 !important;
 letter-spacing:-.01em !important;text-transform:none !important;line-height:1.3 !important;
 box-shadow:none !important;animation:none !important;transition:background 150ms ease,color 150ms ease,opacity 150ms ease !important;
}
body.zen-mode .zen-action-dock #btn-climax-end,
body.zen-mode .zen-action-dock #btn-reset-session {min-height:48px !important;font-size:13px !important;border-radius:14px !important;}
body.zen-mode .zen-action-dock .climax-icon {order:-1;display:flex !important;color:#aaaab8 !important;margin:0 !important;animation:none !important;}
body.zen-mode .zen-action-dock .btn-icon,
body.zen-mode .zen-action-dock .action-stop-icon {display:flex !important;flex:0 0 auto;align-items:center;justify-content:center;}
body.zen-mode .zen-action-dock button .btn-subtext {display:none !important;}
body.zen-mode .zen-action-dock .btn-climax-text {font-size:inherit !important;font-weight:inherit !important;white-space:normal !important;}
@media(max-width:600px) {
 body.zen-mode .zen-action-dock .controls-row > button {padding:12px 10px !important;min-height:58px !important;font-size:14px !important;gap:7px !important;}
 body.zen-mode .zen-action-dock #btn-climax-end,
 body.zen-mode .zen-action-dock #btn-reset-session {font-size:12px !important;min-height:48px !important;}
}
body.zen-mode .zen-action-dock #btn-start-pause,
body.zen-mode .zen-action-dock #btn-edge-trigger {
 min-height:62px !important;height:62px !important;border-radius:18px !important;
 flex-direction:row !important;padding:14px 18px !important;width:100% !important;
}
body.zen-mode .zen-action-dock #btn-climax-end .climax-icon {order:-1 !important;}
@media(max-width:600px) {
 body.zen-mode .zen-action-dock #btn-start-pause,
 body.zen-mode .zen-action-dock #btn-edge-trigger {height:58px !important;min-height:58px !important;padding:12px 10px !important;}
}
/* Recovery is a calm typographic state, not a warning card. */
body.zen-mode #hands-off-banner {
 display:flex;flex-direction:column !important;align-items:center !important;justify-content:center !important;
 width:100% !important;max-width:100% !important;margin:4px auto 12px !important;padding:8px 12px !important;
 background:none !important;border:0 !important;border-radius:0 !important;box-shadow:none !important;
 gap:0 !important;text-align:center !important;animation:none !important;
}
body.zen-mode #hands-off-banner.hidden {display:none !important;}
body.zen-mode #hands-off-banner .alert-icon {display:none !important;}
body.zen-mode #hands-off-banner .alert-text {width:100%;text-align:center;}
body.zen-mode #hands-off-banner h2 {font-size:17px !important;font-weight:600 !important;letter-spacing:-.02em !important;color:#dfb9c0 !important;margin:0 0 5px !important;}
body.zen-mode #hands-off-banner p {font-size:12px !important;color:#96939d !important;line-height:1.5 !important;max-width:38ch;margin:0 auto !important;}
body.zen-mode #hands-off-banner .recovery-care-note {border:0 !important;margin-top:8px !important;padding:0 !important;font-size:12px !important;color:#b5b2bc !important;}
body.zen-mode #hands-off-banner::before,
body.zen-mode #hands-off-banner::after {display:none !important;content:none !important;}
.session-recovery-summary {font-size:13px;line-height:1.6;color:#b7b7c1;padding:14px 0;margin:0;border-bottom:1px solid #ffffff0c;}
.session-recovery-summary:empty {display:none;}
body.zen-mode .zen-action-dock #btn-end-session {border-radius:14px !important;min-height:48px !important;height:48px !important;font-size:13px !important;}
body.zen-mode .zen-action-dock .reset-actions {display:flex !important;justify-content:center !important;}
body.zen-mode .zen-action-dock .reset-actions #btn-reset-session {width:auto !important;min-height:32px !important;height:32px !important;background:transparent !important;border:0 !important;padding:6px 14px !important;color:#92929c !important;}
.action-explainer {margin:0;text-align:center;font-size:11px;line-height:1.5;color:#9696a0;}
.recovery-check-prompt {width:100%;margin:4px 0 20px;padding:0;text-align:left;}
.recovery-check-prompt.hidden {display:none;}
.recovery-check-heading {display:flex;align-items:center;justify-content:space-between;gap:14px;}
.recovery-check-heading strong {font-size:20px;font-weight:600;letter-spacing:-.025em;color:#eeeef2;}
#recovery-check-seconds {font-size:24px;font-weight:500;font-variant-numeric:tabular-nums;color:#9fd2bf;}
.recovery-check-prompt p {margin:5px 0 12px;font-size:16px;color:#c4c4ce;}
.recovery-check-track {height:3px;background:#ffffff0b;border-radius:3px;overflow:hidden;}
#recovery-check-progress {height:100%;background:#87baa7;transition:width 1s linear;}
.recovery-check-prompt small {display:block;margin-top:8px;font-size:12px;color:#92929f;}
.settings-reset-row {display:flex;justify-content:flex-end;margin:0 0 16px;}
body.zen-mode .settings-reset-row #btn-reset-session {background:transparent !important;border:1px solid #ffffff18 !important;border-radius:10px !important;color:#a4a4ae !important;min-height:36px !important;padding:8px 12px !important;font-size:12px !important;box-shadow:none !important;}
body.zen-mode #pulse-center .beat-wash::before {transition:opacity 250ms ease;}
@media(prefers-reduced-motion:reduce) {#recovery-check-progress,body.zen-mode #pulse-center .beat-wash::before {transition:none;}}
.recovery-check-prompt {margin:4px 0 18px;}
.recovery-check-heading strong {font-size:16px;font-weight:600;color:#dedee5;}
#recovery-check-seconds {font-size:13px;color:#9595a2;}
.recovery-confirm-row {display:flex;align-items:center;justify-content:space-between;gap:16px;margin:10px 0 12px;color:#a4a4af;font-size:13px;}
#btn-confirm-recovery {min-height:44px;min-width:116px;padding:10px 20px;border:1px solid #ffffff15;border-radius:12px;background:#e8e8ee;color:#24242a;font:600 14px system-ui;cursor:pointer;}
#btn-confirm-recovery:focus-visible {outline:2px solid #9bbbef;outline-offset:3px;}
.recovery-target-setting {margin-bottom:18px;}
.recovery-target-setting small {display:block;color:#9696a0;font-size:12px;line-height:1.5;margin-top:6px;}

/* Recovery guidance stays in view beside its action, above the rhythm. */
body.zen-mode #recovery-check-prompt {max-width:430px;width:calc(100% - 32px);margin:12px auto 20px;}
.recovery-breath-label {text-align:center;color:#bbd9cd;font:600 20px/1.4 system-ui;letter-spacing:-.02em;margin:8px 0 14px;}
.recovery-breath-label.hidden {display:none;}
body.zen-mode #btn-confirm-recovery {min-height:50px;min-width:132px;font-size:16px;}

/* A quiet recovery confirmation with one clear, generous tap target. */
body.zen-mode #recovery-check-prompt {max-width:430px;margin:16px auto 24px;}
#recovery-check-prompt .recovery-confirm-row {margin:0 0 16px;gap:18px;}
#recovery-check-prompt .recovery-check-heading {display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-width:0;}
#recovery-check-prompt .recovery-check-heading strong {font:500 19px/1.25 system-ui;letter-spacing:-.035em;color:#ededf0;}
#recovery-estimate-label {font:400 13px/1.5 system-ui;color:#a1a8a7;font-variant-numeric:tabular-nums;}
body.zen-mode #btn-confirm-recovery {display:inline-flex;align-items:center;justify-content:center;gap:9px;flex-shrink:0;min-height:48px;min-width:126px;padding:12px 19px;border-radius:15px;border:1px solid #91bdac40;background:linear-gradient(180deg,#30433d,#263730);color:#d4eee2;font:500 14px/1.2 system-ui;letter-spacing:-.01em;box-shadow:inset 0 1px 0 #ffffff08,0 3px 10px #00000012;transition:background .18s,border-color .18s,transform .18s;}
body.zen-mode #btn-confirm-recovery:hover {background:linear-gradient(180deg,#3b5148,#30433b);border-color:#a4d2bf70;}
body.zen-mode #btn-confirm-recovery:active {transform:scale(.97);}
#recovery-check-prompt .recovery-check-track {height:2px;background:#ffffff0a;}
#recovery-check-prompt #recovery-check-progress {background:#789d8c;}
.recovery-check-footer {display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:9px;}
#recovery-check-prompt .recovery-check-footer small {margin:0;color:#909695;font:400 11px/1.5 system-ui;}
#recovery-check-prompt #recovery-check-seconds {color:#a3aaa7;font:400 11px/1.5 system-ui;font-variant-numeric:tabular-nums;flex-shrink:0;}
@media(max-width:380px) {body.zen-mode #btn-confirm-recovery {min-width:110px;padding-inline:14px;} #recovery-check-prompt .recovery-check-heading strong {font-size:17px;}}
@media(prefers-reduced-motion:reduce) {body.zen-mode #btn-confirm-recovery {transition:none;}}

/* One continuous recovery breath: gather into the core, release upward. */
.recovery-flow {position:absolute;inset:-70px -6% -35px;pointer-events:none;opacity:0;transition:opacity 1.2s ease;overflow:hidden;z-index:0;}
.recovery-breathing .recovery-flow {opacity:1;}
.recovery-flow i {position:absolute;left:50%;top:50%;width:470px;height:390px;border-radius:50%;background:radial-gradient(ellipse, #82c9ff30 0%,#398bd530 24%,#2264ab20 43%,transparent 69%);transform:translate(-50%,calc(-50% + var(--breath-lift, -90px))) scale(calc(.48 + var(--breath-expansion,1) * .85));opacity:calc(.5 + var(--breath-expansion,1) * .35);will-change:transform;}
.recovery-flow i:nth-child(2) {width:640px;height:500px;transition:transform .45s linear;opacity:.45;}
.recovery-flow i:nth-child(3) {width:800px;height:580px;transition:transform .85s linear;opacity:.25;}
body.zen-mode .recovery-breathing #pulse-center {transform:scale(calc(.96 + var(--breath-expansion,1) * .08)) !important;border-color:#83bce580 !important;box-shadow:0 0 45px #418ed525,inset 0 0 44px #3677b51a !important;background:radial-gradient(circle,#1d304044,#17242b44 65%,#19202855) !important;transition:border-color 1s,background 1s !important;}
body.zen-mode .recovery-breathing #pulse-center > :not(.beat-wash) {transform:scale(calc(1 / (.96 + var(--breath-expansion,1) * .08)));}
body.zen-mode .recovery-breathing #pulse-center::after {opacity:0 !important;}
.recovery-breathing #recovery-breath-label {color:#a9d6f7;}
@media(prefers-reduced-motion:reduce) {.recovery-flow i {transform:translate(-50%,-50%);transition:none;will-change:auto;} body.zen-mode .recovery-breathing #pulse-center,body.zen-mode .recovery-breathing #pulse-center > :not(.beat-wash) {transform:none !important;}}

/* Keep confirmation with the level control, leaving the breathing stage clear. */
body.zen-mode .zen-arousal-section #recovery-check-prompt {width:100%;max-width:none;margin:12px 0 18px;}
body.zen-mode .zen-arousal-section #recovery-check-prompt .recovery-confirm-row {margin-bottom:10px;}
body.zen-mode .zen-arousal-section #recovery-check-prompt .recovery-check-heading strong {font-size:17px;}

/* Stable scene geometry: status changes occupy one reserved area. */
body.zen-mode #main-visualizer-deck {
 display:grid !important;grid-template-columns:minmax(0,1fr) !important;
 grid-template-rows:112px 18px 340px !important;gap:8px !important;
 align-items:center !important;justify-items:center !important;
 height:auto !important;min-height:0 !important;overflow-anchor:none;
}
body.zen-mode #visualizer-notification-zone {grid-area:1 / 1;align-self:start;width:100%;margin:0 !important;}
body.zen-mode #hands-off-banner {grid-area:1 / 1;align-self:start;margin:0 !important;padding:4px 12px !important;}
body.zen-mode #recovery-breath-label {grid-area:1 / 1;align-self:end;margin:0 0 6px !important;}
body.zen-mode .cadence-window-labels {grid-area:2 / 1;margin:0 !important;}
body.zen-mode .rhythm-ring-stage {grid-area:3 / 1;height:340px !important;min-height:340px !important;margin:0 !important;display:flex !important;align-items:center !important;justify-content:center !important;}
body.zen-mode #pulse-center {flex-shrink:0;}
body.zen-mode .zen-arousal-dock {overflow-anchor:none;}
@media(max-width:600px) {
 body.zen-mode #main-visualizer-deck {grid-template-rows:112px 18px 300px !important;}
 body.zen-mode .rhythm-ring-stage {height:300px !important;min-height:300px !important;}
}

/* Recovery uses the core itself; no extra instruction stack above the scene. */
body.zen-mode .recovery-breathing #hands-off-banner {visibility:hidden !important;pointer-events:none;}
body.zen-mode .recovery-breathing #pulse-phase-icon,
body.zen-mode .recovery-breathing #disp-phase-name,
body.zen-mode .recovery-breathing .zen-tempo-center,
body.zen-mode .recovery-breathing #disp-phase-instruction {visibility:hidden !important;}
body.zen-mode #pulse-center #recovery-breath-label {position:absolute !important;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;margin:0 !important;font:500 36px/1.1 system-ui;letter-spacing:-.04em;color:#c4e6ff;z-index:4;text-shadow:0 2px 18px #071c30;pointer-events:none;}
body.zen-mode #pulse-center #recovery-breath-label.hidden {display:none !important;}
body.zen-mode #pulse-center #recovery-breath-label::after {content:'Gently · at your own pace';font:400 12px/1.5 system-ui;letter-spacing:0;color:#a7c3d8;}
body.zen-mode .rhythm-ring-stage {position:relative !important;}
body.zen-mode .recovery-flow {z-index:1;inset:-40px 0 -20px;}
body.zen-mode .recovery-flow i {background:radial-gradient(ellipse,#9bdcff45 0%,#4aa9f35c 28%,#287cc13d 48%,transparent 70%);border:1px solid #74c3ff35;box-shadow:inset 0 0 38px #65b4ef20;}
body.zen-mode .recovery-breathing #pulse-center {border-color:#8dceffb3 !important;box-shadow:0 0 50px #438fcc45,inset 0 0 45px #428aca30 !important;background:radial-gradient(circle,#1c354033,#15243140) !important;}

body.zen-mode #pulse-center #recovery-breath-label {align-self:stretch !important;width:100%;height:100%;top:0;left:0;box-sizing:border-box;}
body.zen-mode .recovery-flow {mask-image:linear-gradient(transparent,black 18%,black 78%,transparent);}

/* Confirmation occupies the supporting text area beneath the level strip. */
body.zen-mode .zen-arousal-section #recovery-check-prompt {margin:16px 0 12px;}
body.zen-mode .zen-arousal-section:has(#recovery-check-prompt:not(.hidden)) #zen-arousal-zones,
body.zen-mode .zen-arousal-section:has(#recovery-check-prompt:not(.hidden)) #zen-arousal-guidance-callout {display:none !important;}

/* Only reserve the single-line stage cue; breathing instructions live in the core. */
body.zen-mode #main-visualizer-deck {grid-template-rows:44px 18px 340px !important;gap:4px !important;}
body.zen-mode #visualizer-notification-zone {height:44px !important;min-height:44px !important;max-height:44px !important;align-self:center;}
body.zen-mode #speed-trend-banner {max-height:44px !important;margin:0 !important;}
@media(max-width:600px) {body.zen-mode #main-visualizer-deck {grid-template-rows:44px 18px 300px !important;}}

/* Session workspace: controls stay on screen; the visualizer takes remaining space. */
body.zen-mode {padding:0 !important;min-height:100dvh;}
body.zen-mode .app-container.zen-layout {box-sizing:border-box;height:100dvh;max-height:100dvh;width:100%;margin:0 auto !important;padding:12px 20px !important;display:grid !important;grid-template-rows:48px 54px minmax(120px,1fr) 170px 120px 28px;gap:6px !important;}
body.zen-mode .zen-header {margin:0 !important;padding:0 !important;min-height:0 !important;}
body.zen-mode .zen-status-ribbon {margin:0 auto !important;padding:4px 14px !important;width:100%;box-sizing:border-box;}
body.zen-mode #main-visualizer-deck {width:100%;height:100% !important;min-height:0 !important;grid-template-rows:28px 14px minmax(0,1fr) !important;gap:2px !important;margin:0 !important;padding:0 !important;}
body.zen-mode #visualizer-notification-zone {height:28px !important;min-height:28px !important;max-height:28px !important;}
body.zen-mode .rhythm-ring-stage {height:100% !important;min-height:0 !important;container-type:size;}
/* 88cqh left the ring only 12 percent of its own container to breathe in, about 17px above and
   below, and the 6px grid gap under that put the timeline rule 23px from the glass at 1280x800:
   close enough that the circle read as resting on the rule. 80cqh roughly doubles the clearance.
   Only short windows are affected: once there is room for 270px the cap binds and this does
   nothing, so tall screens keep exactly the ring they had. */
body.zen-mode .rhythm-ring-stage #pulse-center {width:min(270px,80cqh) !important;height:min(270px,80cqh) !important;min-width:0 !important;min-height:0 !important;}
body.zen-mode .rhythm-ring-stage .canvas-ambient-container {height:100% !important;}
body.zen-mode .rhythm-ring-stage #live-wave-canvas {height:100% !important;}
body.zen-mode .zen-arousal-dock {margin:0 !important;padding:0 !important;width:100%;align-self:start;}
body.zen-mode .zen-arousal-section {margin:0 auto !important;padding:0 !important;}
body.zen-mode .stage-timeline {margin:0 0 8px !important;}
body.zen-mode .zen-arousal-header-bar {margin:0 0 6px !important;}
body.zen-mode #zen-arousal-zones {margin-top:6px !important;}
body.zen-mode #zen-arousal-guidance-callout {margin-top:4px !important;font-size:11px !important;line-height:1.35 !important;}
body.zen-mode .zen-arousal-section #recovery-check-prompt {margin:8px 0 0 !important;}
body.zen-mode #recovery-check-prompt .recovery-confirm-row {margin-bottom:5px !important;}
body.zen-mode #recovery-check-prompt .recovery-check-footer {margin-top:4px;}
body.zen-mode .zen-action-dock,body.zen-mode .primary-controls {margin:0 auto !important;padding:0 !important;width:100%;max-width:560px;gap:8px !important;}
body.zen-mode .zen-action-dock .controls-row {margin:0 !important;gap:10px !important;display:grid !important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
body.zen-mode .zen-action-dock #btn-start-pause,body.zen-mode .zen-action-dock #btn-edge-trigger {height:60px !important;min-height:60px !important;width:100% !important;}
body.zen-mode .zen-action-dock #btn-climax-end,body.zen-mode .zen-action-dock #btn-end-session {height:50px !important;min-height:50px !important;width:100% !important;}
body.zen-mode .zen-drawer-toggle-row {margin:0 !important;padding:0 !important;}
body.zen-mode #btn-toggle-advanced {padding:4px 12px !important;min-height:28px !important;}
body.zen-mode #zen-advanced-drawer:not(.collapsed) {position:fixed;inset:76px auto 44px 50%;transform:translateX(-50%);width:min(100% - 24px,var(--drawer-width,940px));z-index:50;background:#1c1c1f;overflow:auto;padding:20px;box-sizing:border-box;border:1px solid #ffffff20;border-radius:20px;}
@media(max-width:600px) {body.zen-mode .app-container.zen-layout {padding:8px 12px !important;gap:4px !important;}body.zen-mode #disp-current-bpm {font-size:clamp(28px,17cqh,48px) !important;}body.zen-mode #pulse-center #recovery-breath-label {font-size:30px;}}

body.zen-mode .app-container.zen-layout {grid-template-rows:52px 58px minmax(100px,1fr) 196px 120px 28px;}
body.zen-mode .zen-arousal-dock {justify-self:center;max-width:560px;min-height:0 !important;}
body.zen-mode .zen-arousal-section {width:100% !important;max-width:560px !important;gap:0 !important;}
body.zen-mode #zen-arousal-guidance-callout {display:none !important;}
body.zen-mode .zen-drawer-toggle-row {justify-self:center;}

body.zen-mode .paused-breathing #pulse-center #recovery-breath-label::after {content:"Breathe · resume when ready";}

/* Centered breath field: feathered light, wider horizontally, no upward travel. */
body.zen-mode .rhythm-ring-stage .recovery-flow {inset:0 !important;overflow:hidden;mask-image:none;}
body.zen-mode .recovery-flow i {
 left:50%;top:50%;width:min(270px,88cqh);height:min(270px,88cqh);
 border:0 !important;box-shadow:none !important;border-radius:50%;
 background:radial-gradient(ellipse at center,#8ad0ff4d 0%,#519fdc42 25%,#327bb42b 45%,#25699e12 64%,transparent 82%);
 transform:translate(-50%,-50%) scaleX(calc(1.1 + var(--breath-expansion,1) * 1.5)) scaleY(calc(1 + var(--breath-expansion,1) * .3)) !important;
 opacity:.8;transition:none !important;will-change:transform;
}
body.zen-mode .recovery-flow i:nth-child(2) {width:min(350px,114cqh);height:min(270px,88cqh);opacity:.4;}
body.zen-mode .recovery-flow i:nth-child(3) {width:min(430px,140cqh);height:min(270px,88cqh);opacity:.22;}
@media(prefers-reduced-motion:reduce) {body.zen-mode .recovery-flow i {transform:translate(-50%,-50%) scaleX(1.5) !important;will-change:auto;}}

body.zen-mode .rhythm-ring-stage .recovery-flow {mask-image:radial-gradient(ellipse at center,black 25%,#000b 55%,transparent 76%);}

body.zen-mode .recovery-breathing #pulse-center .beat-wash {opacity:0 !important;}
body.zen-mode .recovery-breathing #pulse-aura {opacity:0 !important;}

/* Keep the core focused; supporting pace data lives in session settings. */
body.zen-mode #pulse-center .bps-sub,
body.zen-mode .zen-arousal-range-hint {display:none !important;}
.session-pace-details {display:grid;gap:7px;padding:0 0 18px;margin-bottom:18px;border-bottom:1px solid #ffffff12;color:#b0b5bc;font-size:13px;}
.session-pace-details .pace-details-title {font-size:11px;color:#9198a1;letter-spacing:.04em;}
body.zen-mode .session-pace-details #disp-phase-instruction {font:400 13px/1.5 system-ui !important;color:#b0b5bc !important;text-align:left !important;margin:0 !important;max-width:none !important;}

/* Action controls: consistent geometry, restrained contrast, no neon halo. */
body.zen-mode .zen-action-dock .primary-controls {display:flex !important;flex-direction:column !important;gap:8px !important;}
body.zen-mode .zen-action-dock .controls-row {gap:8px !important;}
body.zen-mode .zen-action-dock :is(#btn-start-pause,#btn-edge-trigger,#btn-climax-end,#btn-end-session) {
 display:flex !important;align-items:center !important;justify-content:center !important;gap:9px !important;
 min-width:0 !important;padding:12px 16px !important;border-radius:16px !important;
 font:500 14px/1.2 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif !important;
 letter-spacing:-.015em !important;text-transform:none !important;animation:none !important;
}
body.zen-mode .zen-action-dock :is(.btn-climax-text,#start-btn-text,.btn-edge-text) {font-weight:500 !important;font-size:14px !important;}
body.zen-mode .zen-action-dock :is(.btn-icon,.action-stop-icon,.climax-icon) {display:inline-flex !important;align-items:center;font-size:16px !important;opacity:.85;}
@media(max-width:380px) {body.zen-mode .zen-action-dock :is(#btn-start-pause,#btn-edge-trigger,#btn-climax-end,#btn-end-session) {padding:10px 8px !important;gap:6px !important;font-size:13px !important;}body.zen-mode .zen-action-dock :is(.btn-climax-text,#start-btn-text,.btn-edge-text) {font-size:13px !important;}}

.effort-check {border:0;padding:0;margin:0 0 22px;min-width:0;}
.effort-check legend {font-size:14px;font-weight:500;margin-bottom:10px;color:#e0e5e9;}
.effort-options {display:flex;gap:8px;}
.effort-options button {flex:1;min-height:46px;border:1px solid #ffffff16;border-radius:12px;background:#25282c;color:#bdc5cc;font:500 13px system-ui;cursor:pointer;}
.effort-options button[aria-pressed="true"] {background:#30483f;color:#d1eadf;border-color:#759a88;}
.effort-options button:focus-visible {outline:2px solid #91bde4;outline-offset:3px;}
.effort-check small {display:block;margin-top:8px;color:#a0a8b0;font-size:12px;line-height:1.5;}

/* Progress follows animation frames instead of easing then stopping each second. */
#stage-progress::before {transition:none !important;}

/* One live information row above the wave; the lower rail is progress only. */
body.zen-mode #main-visualizer-deck {grid-template-rows:0px 26px minmax(0,1fr) !important;}
body.zen-mode #visualizer-notification-zone {visibility:hidden !important;height:0 !important;min-height:0 !important;}
body.zen-mode .cadence-window-labels {font-size:11px;letter-spacing:0;line-height:1.35;font-variant-numeric:tabular-nums;gap:10px;}
body.zen-mode .cadence-window-labels #stage-next {text-align:right;}
body.zen-mode .stage-timeline {margin:0 0 10px !important;}
/* The middle label stays centred under the stats at every width; the sides share what's left equally. */
@media(max-width:450px) {body.zen-mode .cadence-window-labels {font-size:10px;padding-inline:0 !important;gap:6px;}}

/* One field of light: it gathers on the selected level and settles onto its zone label. */
body.zen-mode #arousal-tactile-strip {--selected-position:25%;border:0 !important;box-shadow:none !important;background:transparent !important;overflow:visible !important;isolation:isolate;}
body.zen-mode #arousal-tactile-strip .arousal-tap-btn,
body.zen-mode #arousal-tactile-strip .arousal-tap-btn.active {background:transparent !important;border:0 !important;box-shadow:none !important;transform:none !important;}
body.zen-mode #arousal-tactile-strip .arousal-tap-btn.active {color:#fff !important;text-shadow:0 0 10px color-mix(in srgb,var(--scale-color) 70%,transparent);}
body.zen-mode #arousal-tactile-strip::before {content:'';position:absolute;inset:auto !important;left:var(--selected-position) !important;top:50% !important;width:104px !important;height:78px !important;transform:translate(-50%,-50%) !important;background:radial-gradient(ellipse at center,color-mix(in srgb,var(--scale-color) 78%,transparent) 0%,color-mix(in srgb,var(--scale-color) 30%,transparent) 34%,transparent 70%) !important;opacity:.8 !important;border:0 !important;border-radius:0 !important;filter:blur(8px);z-index:-1;animation:none !important;transition:left .65s cubic-bezier(.22,.68,.2,1),background .6s !important;pointer-events:none;}
body.zen-mode #arousal-tactile-strip::after {display:none !important;content:none !important;}
body.zen-mode #zen-arousal-zones .zen-zone-pill,
body.zen-mode #zen-arousal-zones .zen-zone-pill.active {background:transparent !important;border:0 !important;box-shadow:none !important;}
@media(prefers-reduced-motion:reduce) {body.zen-mode #arousal-tactile-strip::before {transition:none !important;}}

/* A quiet ready state within the existing core, without moving the scene. */
body.zen-mode #pulse-center .ready-core {position:absolute !important;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .45s ease;}
body.zen-mode .session-ready #pulse-center .ready-core {opacity:1;visibility:visible;}
body.zen-mode .session-ready #pulse-phase-icon,body.zen-mode .session-ready .zen-tempo-center {visibility:hidden;}
.ready-core > span {font:500 9px/1.2 system-ui;letter-spacing:.18em;color:#9babbb;}
.ready-core strong {font:450 clamp(21px,13cqh,34px)/1.08 system-ui;letter-spacing:-.045em;color:#e6edf2;}
.ready-core small {font:400 10px/1.4 system-ui;color:#a4b1bc;}
body.zen-mode .session-ready #pulse-center {background:radial-gradient(ellipse at 50% 65%,#31475c40,transparent 72%) !important;border-color:#8da7ba70 !important;box-shadow:0 0 30px #6a9ab412 !important;}
body.zen-mode .paused-breathing #pulse-center #recovery-breath-label {font-size:clamp(20px,12cqh,30px);}
body.zen-mode .paused-breathing #pulse-center #recovery-breath-label::after {content:'Your session is waiting.';}
/* The offer of zen during a pause replaces the waiting text for ten seconds (zen-immersion.js). */
.zen-offer {position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:10% 10% 0;text-align:center;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .6s ease,visibility 0s linear .6s;}
.zen-offer.is-on {opacity:1;visibility:visible;pointer-events:auto;transition:opacity .6s ease .3s,visibility 0s;}
.zen-offer p {margin:0;max-width:16em;font:500 clamp(15px,7cqh,22px)/1.25 system-ui;letter-spacing:-.02em;color:#c4e6ff;text-shadow:0 2px 18px #071c30;}
.zen-offer-actions {display:flex;justify-content:center;gap:8px;}
.zen-offer button {min-height:40px;padding:0 16px;white-space:nowrap;border-radius:999px;font:600 14px/1 system-ui;cursor:pointer;border:1px solid #9fd6c466;background:#151a19e6;color:#d6f0e7;}
.zen-offer button.zen-offer-open {background:#2f6f5ee6;border-color:#86efac80;color:#effcf6;}
.zen-offer button:hover {filter:brightness(1.15);}
.zen-offer button:focus-visible {outline:2px solid #91bde4;outline-offset:3px;}
body.zen-mode .zen-offering #pulse-center #recovery-breath-label {opacity:0;}
@media(max-width:450px) {.zen-offer {gap:10px;}.zen-offer button {min-height:36px;padding:0 12px;font-size:13px;}}
@media(prefers-reduced-motion:reduce) {.zen-offer,.zen-offer.is-on {transition:none;}}
@media(prefers-reduced-motion:reduce) {body.zen-mode #pulse-center .ready-core {transition:none;}}

body.zen-mode #zen-arousal-header {display:flex !important;justify-content:space-between !important;align-items:center;gap:12px;padding-inline:6px !important;}
body.zen-mode #zen-arousal-header .zen-arousal-status-pill {width:auto !important;min-width:0 !important;margin-left:auto;text-align:right;}
body.zen-mode #zen-arousal-header #arousal-val-badge {font:500 12px/1.4 system-ui !important;letter-spacing:0 !important;text-align:right !important;white-space:nowrap;}

/* The bridge follows both ends: the selected number above and the active zone label below. */
body.zen-mode .zen-arousal-dock {--number-center:25%;--zone-center:12.5%;}
body.zen-mode .zen-arousal-dock:has([data-val="1"].active) {--number-center:5%;}
body.zen-mode .zen-arousal-dock:has([data-val="2"].active) {--number-center:15%;}
body.zen-mode .zen-arousal-dock:has([data-val="3"].active) {--number-center:25%;}
body.zen-mode .zen-arousal-dock:has([data-val="4"].active) {--number-center:35%;}
body.zen-mode .zen-arousal-dock:has([data-val="5"].active) {--number-center:45%;}
body.zen-mode .zen-arousal-dock:has([data-val="6"].active) {--number-center:55%;}
body.zen-mode .zen-arousal-dock:has([data-val="7"].active) {--number-center:65%;}
body.zen-mode .zen-arousal-dock:has([data-val="8"].active) {--number-center:75%;}
body.zen-mode .zen-arousal-dock:has([data-val="9"].active) {--number-center:85%;}
body.zen-mode .zen-arousal-dock:has([data-val="10"].active) {--number-center:95%;}
body.zen-mode .zen-arousal-dock:has(.zen-zone-pill:nth-child(2).active) {--zone-center:37.5%;}
body.zen-mode .zen-arousal-dock:has(.zen-zone-pill:nth-child(3).active) {--zone-center:62.5%;}
body.zen-mode .zen-arousal-dock:has(.zen-zone-pill:nth-child(4).active) {--zone-center:87.5%;}
body.zen-mode #zen-arousal-zones {position:relative;isolation:isolate;overflow:visible;}
body.zen-mode #zen-arousal-zones::before {content:'';position:absolute;z-index:-1;pointer-events:none;border:0;
 left:calc(min(var(--number-center),var(--zone-center)) - 44px);
 width:calc(max(var(--number-center),var(--zone-center)) - min(var(--number-center),var(--zone-center)) + 88px);
 top:-30px;height:66px;
 background:radial-gradient(ellipse at 50% 50%,color-mix(in srgb,var(--badge-accent,#63bf9f) 16%,transparent) 0%,color-mix(in srgb,var(--badge-accent,#63bf9f) 7%,transparent) 45%,transparent 74%);
 filter:blur(12px);transition:left .6s cubic-bezier(.22,.68,.2,1),width .6s cubic-bezier(.22,.68,.2,1),background .6s;}
body.zen-mode #zen-arousal-zones::after {display:none !important;content:none !important;}
body.zen-mode #zen-arousal-zones .zen-zone-pill {position:relative;overflow:visible;}
body.zen-mode #zen-arousal-zones .zen-zone-pill.active::before {content:'';position:absolute;inset:-8px -6px;z-index:-1;pointer-events:none;border:0;background:radial-gradient(ellipse at 50% 40%,color-mix(in srgb,var(--badge-accent,#63bf9f) 20%,transparent) 0%,transparent 72%);filter:blur(7px);}
body.zen-mode #zen-arousal-zones .zen-zone-pill.active .zone-name {color:#f0f2f5 !important;text-shadow:0 0 8px color-mix(in srgb,var(--badge-accent,#63bf9f) 55%,transparent);}
@media(prefers-reduced-motion:reduce) {body.zen-mode #zen-arousal-zones::before {transition:none;}}

body.zen-mode #btn-confirm-recovery #recovery-check-seconds {font:400 12px/1 system-ui;color:#a6c5b7;min-width:3ch;text-align:right;font-variant-numeric:tabular-nums;margin-left:3px;}
body.zen-mode #recovery-check-prompt .recovery-confirm-row {margin-bottom:8px !important;}

.visual-intensity-setting {display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 20px;}
.visual-intensity-setting label {font:500 14px system-ui;color:#e0e5e9;}
.visual-intensity-setting select {width:auto;max-width:58%;min-height:44px;border-radius:12px;background:#25282c;color:#d5dce2;border:1px solid #ffffff16;padding:8px 12px;}
body.zen-mode #pulse-center::after {transform:scale(calc(1 + var(--beat-travel,1) * .34 * var(--visual-intensity,1)));border-width:calc(1.5px * var(--visual-intensity,1));opacity:calc((1 - var(--beat-travel,1)) * .65 * var(--visual-intensity,1));}

.visual-intensity-dock {margin-top:10px;}
.visual-intensity-caption {display:block;font:400 10px/1.3 system-ui;color:#919ba5;margin-bottom:3px;}
#visual-intensity-strip {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));position:relative;isolation:isolate;min-height:38px;border-radius:14px;background:linear-gradient(90deg,#83b6cb08,#69a8cd14,#599dd021);}
#visual-intensity-strip::before {content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(ellipse 24% 100% at var(--intensity-position,50%) 65%,#8dcde947,transparent 85%);z-index:-1;}
#visual-intensity-strip button {appearance:none;border:0;background:transparent;color:#929fab;font:500 12px system-ui;min-height:38px;cursor:pointer;border-radius:12px;transition:color .25s,text-shadow .25s;}
#visual-intensity-strip button[aria-pressed="true"] {color:#e1f4ff;text-shadow:0 0 14px #8dcde9a0;}
#visual-intensity-strip button:focus-visible {outline:2px solid #93bddd;outline-offset:-2px;}
body.zen-mode .app-container.zen-layout {grid-template-rows:52px 58px minmax(100px,1fr) 226px 120px 28px;}

body.zen-mode .visual-intensity-dock {width:100%;align-self:stretch;}
body.zen-mode #visual-intensity-strip {width:100%;}


/* Grip strength: the chosen setting is a recessed chip; the live intensity is a small light that slides beneath the row. */
body.zen-mode #visual-intensity-strip {background:transparent !important;border:0 !important;border-radius:0 !important;box-shadow:none !important;overflow:visible;padding-bottom:5px;}
body.zen-mode #visual-intensity-strip::before {inset:auto 0 0 0;height:3px;border-radius:0;background:radial-gradient(ellipse 22px 4px at var(--intensity-position,50%) 50%,#a9d9f0cc,#8dcde955 40%,transparent 100%);filter:blur(1px);transition:none;}
body.zen-mode #visual-intensity-strip button {border:0 !important;background:transparent !important;box-shadow:none !important;text-shadow:none !important;}
body.zen-mode #visual-intensity-strip button[aria-pressed="true"] {color:#e6f3fb;text-shadow:none;}

/* An inset, segmented beat accent. Only the moving sector is illuminated. */
body.zen-mode #pulse-center > .pulse-strength-arc {position:absolute !important;inset:0;width:100%;height:100%;z-index:1;transform:none !important;pointer-events:none;overflow:visible;opacity:var(--arc-opacity,.16);mask-image:conic-gradient(from var(--arc-angle,0deg),transparent 0deg,#0005 12deg,#000 32deg,#000 66deg,#0005 82deg,transparent 98deg,transparent 360deg);transition:opacity .4s ease;}
.pulse-strength-arc circle {fill:none;stroke:var(--beat-color,#96bbce);stroke-width:var(--arc-width,4);stroke-dasharray:22 3;stroke-linecap:round;transform:rotate(-85deg);transform-origin:center;vector-effect:non-scaling-stroke;}
body.zen-mode .recovery-breathing #pulse-center > .pulse-strength-arc {opacity:0;}
@media(prefers-reduced-motion:reduce) {body.zen-mode #pulse-center > .pulse-strength-arc {mask-image:none;opacity:.16;transition:none;}}

/* Fixed vertical illumination follows the wash, without orbiting. */
body.zen-mode #pulse-center > .pulse-strength-arc {mask-image:linear-gradient(to bottom,transparent calc(var(--arc-reveal,100%) - 24%),#000 var(--arc-reveal,100%));}
.pulse-strength-arc circle {stroke:url(#pulse-strength-shading);transform:none;}
.pulse-strength-arc .arc-top-stop {stop-color:var(--beat-color,#96bbce);stop-opacity:var(--arc-top-alpha,.35);}
.pulse-strength-arc .arc-bottom-stop {stop-color:var(--beat-color,#96bbce);stop-opacity:var(--arc-bottom-alpha,.6);}
@media(prefers-reduced-motion:reduce) {body.zen-mode #pulse-center > .pulse-strength-arc {mask-image:none;}}

.pulse-strength-arc .tapered-strength-ring {fill:url(#pulse-strength-shading);stroke:none;}
.pulse-strength-arc :is(.arc-top-stop,.arc-bottom-stop) {stop-color:color-mix(in srgb,var(--beat-color,#96bbce),#e2f3fc var(--arc-contrast,0%));}

.pulse-pattern-custom {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:20px;}
.pulse-pattern-custom[hidden] {display:none;}
.pulse-pattern-custom label {display:grid;gap:6px;font:400 12px system-ui;color:#a5b3bf;}
.pulse-pattern-custom select {min-width:0;width:100%;min-height:40px;background:#25282c;color:#d5dce2;border:1px solid #ffffff16;border-radius:10px;padding:6px;}


body.zen-mode #btn-help-mode {display:inline-flex;align-items:center;justify-content:center;min-width:40px;min-height:40px;padding:8px;}
body.zen-mode #btn-help-mode[aria-pressed="true"] {background:#29404e !important;color:#c8e6f6 !important;border-color:#779db7 !important;}
#control-help-tip {position:fixed;z-index:10000;max-width:min(270px,calc(100vw - 24px));box-sizing:border-box;padding:10px 13px;border-radius:12px;background:#30363df5;color:#ecf0f4;box-shadow:0 6px 24px #0005;font:400 12px/1.45 system-ui;pointer-events:none;}
#control-help-tip[hidden] {display:none;}

/* Give the core more room and remove unused space above the action dock. */
body.zen-mode .app-container.zen-layout {grid-template-rows:52px 58px minmax(100px,1fr) 194px 120px 28px;}
/* Even very short stages reserve nine pixels on each side for the spline and its stroke. */
body.zen-mode .rhythm-ring-stage #pulse-center {width:min(330px,92cqh,calc(100cqh - 18px)) !important;height:min(330px,92cqh,calc(100cqh - 18px)) !important;}
body.zen-mode .recovery-flow i {width:min(330px,92cqh);height:min(330px,92cqh);}
body.zen-mode .visual-intensity-dock {margin-top:5px;}
/* Phones: one column that always fits. Header, stats, ring (takes what's left), scale, actions, footer.
   Rows size to their content so nothing overlaps; the ring absorbs the difference on short screens. */
@media(max-width:600px) {
  body.zen-mode .app-container.zen-layout {grid-template-rows:auto auto minmax(120px,1fr) auto auto auto !important;padding:max(8px,env(safe-area-inset-top)) 12px max(6px,env(safe-area-inset-bottom)) !important;gap:6px !important;}
  body.zen-mode .rhythm-ring-stage #pulse-center {width:min(260px,92cqh,72vw,calc(100cqh - 18px)) !important;height:min(260px,92cqh,72vw,calc(100cqh - 18px)) !important;}
  /* Arousal scale: all ten levels in one row, each a comfortable tap target. */
  body.zen-mode #arousal-tactile-strip {display:grid !important;grid-template-columns:repeat(10,minmax(0,1fr)) !important;gap:0 !important;padding:0 !important;width:100% !important;}
  body.zen-mode #arousal-tactile-strip .arousal-tap-btn {width:100% !important;max-width:none !important;min-width:0 !important;height:40px !important;min-height:40px !important;padding:0 !important;}
  body.zen-mode #arousal-tactile-strip .arousal-tap-btn .btn-lvl-num {font-size:15px !important;}
  body.zen-mode #zen-arousal-header {margin-bottom:0 !important;}
  body.zen-mode #zen-arousal-zones {margin-top:2px !important;gap:0 !important;}
  body.zen-mode #zen-arousal-zones .zen-zone-pill {font-size:11px !important;padding:4px 0 !important;gap:4px;}
  body.zen-mode .visual-intensity-dock {margin-top:4px !important;}
  body.zen-mode #visual-intensity-strip button {font-size:12px !important;min-height:36px !important;padding:0 2px !important;}
  /* Actions: four equal buttons in two rows, tall enough to hit, short enough to leave room for the ring. */
  body.zen-mode .zen-action-dock .controls-row {gap:8px !important;}
  body.zen-mode .zen-action-dock :is(#btn-start-pause,#btn-edge-trigger) {height:52px !important;min-height:52px !important;}
  body.zen-mode .zen-action-dock :is(#btn-climax-end,#btn-end-session) {height:46px !important;min-height:46px !important;}
  body.zen-mode .zen-action-dock .primary-controls {gap:8px !important;}
  body.zen-mode #btn-toggle-advanced, body.zen-mode #btn-open-history {min-height:36px !important;}
}
/* Very small phones (≤360 wide or ≤680 tall): tighten the stats and labels a little more. */
@media(max-width:600px) and (max-height:700px), (max-width:360px) {
  body.zen-mode .zen-status-ribbon .ribbon-val {font-size:1.25rem !important;}
  body.zen-mode .zen-status-ribbon .ribbon-label {font-size:10px !important;}
  body.zen-mode .zen-action-dock :is(#btn-start-pause,#btn-edge-trigger) {height:48px !important;min-height:48px !important;}
  body.zen-mode .zen-action-dock :is(#btn-climax-end,#btn-end-session) {height:42px !important;min-height:42px !important;}
  body.zen-mode #zen-arousal-zones .zen-zone-pill .zone-name {font-size:10.5px !important;}
}
/* Narration stays inside the existing core, without moving the controls. */
body.zen-mode #pulse-center .intro-core {position:absolute !important;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;z-index:8;text-align:center;pointer-events:auto;}
body.zen-mode #pulse-center .intro-core[hidden] {display:none;}
body.zen-mode #pulse-center.intro-playing .ready-core {opacity:0;visibility:hidden;}
.intro-caption {width:74%;min-height:3.5em;font:450 clamp(15px,8cqh,25px)/1.2 system-ui;letter-spacing:-.025em;color:#e6edf2;}
.intro-caption span {opacity:0;transition:opacity .12s ease;}
.intro-caption span.spoken {opacity:1;}
.intro-controls {display:flex;gap:8px;align-items:center;justify-content:center;max-width:78%;}
.intro-controls button {border:0;background:transparent;color:#a8bfcd;font:400 11px/1.3 system-ui;cursor:pointer;padding:7px 4px;}
.intro-controls button:focus-visible {outline:2px solid #93bddd;border-radius:8px;}
@media(prefers-reduced-motion:reduce) {.intro-caption span {transition:none;}}
.intro-caption {display:flex;flex-wrap:wrap;align-content:center;justify-content:center;column-gap:.24em;}
/* Three compact choices occupy the existing circle, never a new page. */
body.zen-mode #pulse-center .check-in-core {position:absolute !important;inset:0;z-index:9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;text-align:center;pointer-events:auto;}
body.zen-mode #pulse-center .check-in-core[hidden] {display:none;}
body.zen-mode #pulse-center.checking-in .ready-core {opacity:0;visibility:hidden;}
.check-in-step {font:400 10px system-ui;color:#91a5b3;}
.check-in-question {max-width:80%;font:500 clamp(14px,7cqh,23px)/1.15 system-ui;color:#e6edf2;}
.check-in-options {display:flex;flex-direction:column;align-items:stretch;width:76%;}
.check-in-options button,.check-in-skip {border:0;background:transparent;color:#bcd3df;font:400 12px/1.2 system-ui;padding:5px 8px;cursor:pointer;border-radius:12px;}
.check-in-options button:hover,.check-in-options button:focus-visible {background:radial-gradient(ellipse,#82bad530,transparent 75%);color:#fff;}
.check-in-skip {font-size:10px;color:#92a2ad;}
@media(min-height:820px) {.check-in-options button {min-height:38px;font-size:15px;}.check-in-core {gap:8px;}}
.check-in-options button {animation:check-in-appear .18s ease both;}
@keyframes check-in-appear {from {opacity:0;} to {opacity:1;}}
@media(prefers-reduced-motion:reduce) {.check-in-options button {animation:none;}}
.intro-setting {display:flex;align-items:center;gap:10px;margin:16px 0 8px;font:400 13px system-ui;color:#c5d0d8;cursor:pointer;}
.button-theme-setting {display:flex;align-items:center;justify-content:space-between;gap:16px;margin:14px 0 4px;}
.button-theme-setting label {font:400 13px system-ui;color:#c5d0d8;}
.button-theme-setting select {min-height:40px;border-radius:12px;background:#25282c;color:#d5dce2;border:1px solid #ffffff16;padding:6px 12px;font:500 13px system-ui;}
.intro-setting input {accent-color:#8fb6cb;width:17px;height:17px;}
.settings-close {position:sticky;top:0;float:right;z-index:12;width:40px;height:40px;border:0;border-radius:50%;background:#2b3036;color:#e1e7eb;font-size:27px;cursor:pointer;}
.zen-drawer-toggle-row {display:flex;justify-content:center;gap:22px;}
#history-chart-canvas {display:none;}
.session-history-entry {border-bottom:1px solid #ffffff12;padding:14px 0;}
.session-history-entry>summary {cursor:pointer;display:flex;justify-content:space-between;gap:15px;align-items:center;font-size:13px;color:#e0e6eb;}
.session-history-entry>summary span {font-size:12px;color:#9daab4;}
.history-overview,.curve-note {font-size:12px;color:#9eafb9;line-height:1.5;}
.session-curve {margin:20px 0;text-align:left;min-width:0;}
.session-curve h4 {font-size:14px;margin:0 0 5px;color:#dce5eb;}
.session-curve svg {display:block;width:100%;height:auto;}
.session-curve summary {font-size:12px;color:#b8c8d2;cursor:pointer;}
.curve-events {max-height:170px;overflow:auto;font-size:12px;color:#a8b8c3;}
body.zen-mode .modal-card {max-height:calc(100dvh - 32px);overflow:auto;}
.settings-close {align-self:flex-end;flex-shrink:0;margin-left:auto;margin-bottom:-40px;top:0;}
.curve-readout {min-height:2.5em;font:400 12px/1.4 system-ui;color:#bfced8;}
.curve-events button {display:block;width:100%;padding:7px 0;text-align:left;border:0;background:transparent;color:#aabcc8;font-size:12px;cursor:pointer;}
.curve-events button:hover {color:#edf4f8;}
/* Spoken phrases are centered independently of controls and upcoming words. */
body.zen-mode #pulse-center .intro-caption {position:absolute;inset:0;width:100%;height:100%;min-height:0;display:grid;place-items:center;pointer-events:none;}
.intro-line {position:absolute;width:78%;text-align:center;text-wrap:balance;font:450 clamp(18px,8cqh,29px)/1.18 system-ui;letter-spacing:-.025em;color:#eaf3f8;}
.intro-line.intro-welcome {width:88%;font-size:clamp(27px,11cqh,43px);font-weight:550;color:#fff;text-shadow:0 0 24px #b8e1ff30;letter-spacing:-.045em;}
body.zen-mode .intro-controls {position:absolute;bottom:15%;left:50%;transform:translateX(-50%);width:80%;max-width:80%;}
body.zen-mode #visual-intensity-strip {grid-template-columns:repeat(5,minmax(0,1fr));}
body.zen-mode #visual-intensity-strip button.strength-current:not([aria-pressed="true"]) {color:#c3d3dd;}
body.zen-mode #visual-intensity-strip button[data-visual-intensity="auto"][aria-pressed="true"] {color:#afd8ed;text-decoration:underline;text-underline-offset:5px;text-decoration-color:#afd8ed66;}
body.zen-mode .brand-logo {background:transparent;border:0;padding:0;overflow:hidden;}
body.zen-mode .brand-logo img {display:block;width:100%;height:100%;object-fit:contain;border-radius:8px;}
.settings-close {display:grid;place-items:center;padding:0;}
.settings-close svg {display:block;}
body.zen-mode #climax-modal .climax-modal-card {max-width:760px !important;}
.session-curve {margin:26px 0 20px;}
.session-curve h4 {font-size:17px;font-weight:550;letter-spacing:-.02em;}
.session-curve .curve-note {margin:5px 0 18px;color:#91a3af;}
.session-curve svg {overflow:visible;}
.session-curve svg:focus-visible {outline:1px solid #8eb9d080;outline-offset:4px;border-radius:8px;}
.session-curve .curve-readout {display:block !important;padding:12px 0;margin:4px 0 8px;border-top:1px solid #ffffff0d;font-variant-numeric:tabular-nums;color:#d6e4ed;}
/* Borderless header controls, matching the quiet action dock. */
body.zen-mode :is(#btn-discrete,#btn-mute,#btn-help-mode),
body.zen-mode :is(#btn-discrete,#btn-mute,#btn-help-mode):hover,
body.zen-mode #btn-help-mode[aria-pressed="true"] {
 border:0 !important;box-shadow:none !important;background:transparent !important;color:#c3cbd2 !important;
}
body.zen-mode :is(#btn-discrete,#btn-mute,#btn-help-mode):hover {color:#f0f4f7 !important;}
body.zen-mode #btn-help-mode[aria-pressed="true"] {color:#a7d3eb !important;}
body.zen-mode #btn-discrete kbd {border:0 !important;box-shadow:none !important;background:transparent !important;color:#929da7 !important;}
body.zen-mode :is(#btn-discrete,#btn-mute,#btn-help-mode):focus-visible {outline:2px solid #91bde4 !important;outline-offset:3px;}

/* One centred digit per second before pacing begins, anchored to the circle's full bounds. */
body.zen-mode #pulse-center.counting-down > :not(.start-countdown) {visibility:hidden !important;}
body.zen-mode #pulse-center > .start-countdown,
.start-countdown {position:absolute !important;inset:0 !important;display:grid;place-items:center;margin:0;padding:0;transform:none !important;pointer-events:none;z-index:10;}
.start-countdown span {display:block;position:relative;top:.03em;font:300 clamp(60px,30cqh,108px)/1 -apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.03em;color:#eef6fc;text-shadow:0 0 22px #a8d6ec33;transform-origin:50% 50%;animation:countdown-digit 1s cubic-bezier(.3,.6,.35,1) both;will-change:opacity,transform;}
@keyframes countdown-digit {0% {opacity:0;transform:scale(.9);} 24% {opacity:1;transform:scale(1);} 76% {opacity:1;transform:scale(1.02);} 100% {opacity:0;transform:scale(1.05);}}
@media (prefers-reduced-motion:reduce) {.start-countdown span {animation:countdown-digit-fade 1s linear both;}}
@keyframes countdown-digit-fade {0% {opacity:0;} 20% {opacity:1;} 80% {opacity:1;} 100% {opacity:0;}}

/* Session review shares the main interface's quiet, tactile surfaces. */
body.zen-mode :is(#climax-modal,#goal-modal) {background:#090b0ed4;backdrop-filter:blur(18px);padding:20px !important;}
body.zen-mode :is(#climax-modal,#goal-modal) .modal-card {
 max-width:760px !important;padding:34px 30px 0 !important;border:0 !important;border-radius:28px !important;
 background:radial-gradient(ellipse at 25% 0%,#26313935,transparent 55%),#191b1d !important;
 box-shadow:0 24px 90px #0007 !important;text-align:left;scrollbar-width:thin;scrollbar-color:#ffffff20 transparent;
}
body.zen-mode :is(#climax-modal,#goal-modal) .summary-close {background:transparent;color:#9ca8b0;border:0;transition:color 150ms ease;}
body.zen-mode :is(#climax-modal,#goal-modal) .summary-close:hover {color:#f1f6fa;}
body.zen-mode :is(#climax-modal,#goal-modal) .summary-eyebrow {color:#84939f;font-weight:450;font-size:10px;letter-spacing:.16em;margin-bottom:12px;}
body.zen-mode :is(#climax-modal,#goal-modal) .modal-title {font:500 clamp(25px,3.5vw,32px)/1.15 system-ui;letter-spacing:-.045em;color:#edf3f6;margin:0 36px 10px 0;}
body.zen-mode :is(#climax-modal,#goal-modal) .modal-desc {font:400 13px/1.6 system-ui;color:#95a2ad;margin-bottom:26px;}
body.zen-mode :is(#climax-modal,#goal-modal) .modal-stats-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 32px;background:transparent;border:0;border-radius:0;padding:6px 0 24px;margin:0;}
body.zen-mode :is(#climax-modal,#goal-modal) .m-stat {padding:0;border:0 !important;gap:7px;min-width:0;}
body.zen-mode :is(#climax-modal,#goal-modal) .m-label {color:#8e9ba6;font:400 11px/1.4 system-ui;letter-spacing:0;text-transform:none;}
body.zen-mode :is(#climax-modal,#goal-modal) .m-val {font:450 20px/1.15 system-ui !important;letter-spacing:-.025em;color:#d5e0e7 !important;font-variant-numeric:tabular-nums !important;}
body.zen-mode :is(#climax-modal,#goal-modal) .m-stat:nth-child(-n+2) .m-val {font-size:36px !important;font-weight:400 !important;letter-spacing:-.055em;color:#eef5f8 !important;}
body.zen-mode :is(#climax-modal,#goal-modal) .session-curve {margin:14px 0 12px;}
body.zen-mode :is(#climax-modal,#goal-modal) .session-curve h4 {font:500 15px/1.4 system-ui;color:#d7e3eb;}
body.zen-mode :is(#climax-modal,#goal-modal) .curve-note {font-size:11px;line-height:1.6;color:#8696a2;margin-bottom:14px;}
body.zen-mode :is(#climax-modal,#goal-modal) .curve-readout {border:0;color:#aebfcb;font-size:11px;}
/* Sticky footer: content dissolves into the card colour above the buttons, with no hard edge. */
body.zen-mode :is(#climax-modal,#goal-modal) .modal-actions {position:sticky;bottom:0;display:grid !important;grid-template-columns:1fr 1fr;gap:12px !important;border:0;background:linear-gradient(180deg,#191b1d00,#191b1d 30px);backdrop-filter:none;padding:32px 0 18px;margin:0;}
body.zen-mode :is(#climax-modal,#goal-modal) .modal-actions .btn {min-height:48px;border-radius:18px;font:500 13px/1.3 system-ui;justify-content:center;}
body.zen-mode :is(#climax-modal,#goal-modal) button:focus-visible {outline:2px solid #91bde4;outline-offset:3px;}
@media(max-width:600px) {body.zen-mode :is(#climax-modal,#goal-modal) {padding:10px !important;}body.zen-mode :is(#climax-modal,#goal-modal) .modal-card {padding:26px 20px 0 !important;}body.zen-mode :is(#climax-modal,#goal-modal) .modal-stats-grid {gap:20px 18px;}}

/* Grip-strength strip keeps its quiet recessed selection. */
body.zen-mode #visual-intensity-strip button {position:relative;isolation:isolate;}
body.zen-mode #visual-intensity-strip button::after {content:"";position:absolute;inset:3px 2px;z-index:-1;pointer-events:none;border-radius:10px;opacity:0;transition:opacity 180ms ease;border:1px solid #ffffff08;background:radial-gradient(85% 80% at 50% 45%,#151718,transparent 100%),linear-gradient(180deg,#1a1c1e,#202224);box-shadow:inset 0 2px 4px #0008,inset 0 1px 1px #0006,inset 0 -1px 0 #ffffff0a;}
body.zen-mode #visual-intensity-strip button[aria-pressed="true"]::after,
body.zen-mode #visual-intensity-strip button:active::after {opacity:1;}
@media(prefers-reduced-motion:reduce) {body.zen-mode #visual-intensity-strip button::after {transition:none !important;}}


/* ---------------------------------------------------------------------------
   Action buttons, theme 1 (default): charcoal leather under soft light.
   Raised = idle call to action. Recessed = the control's state is engaged:
   Pause (session running, .btn-secondary) and Resume pacing (recovery active,
   .btn-resume-mode) stay pressed; momentary actions only press while :active.
   Theme 2 (high-gloss latex) follows below, selected by body[data-button-theme="latex"].
   --------------------------------------------------------------------------- */
body.zen-mode :is(.zen-action-dock,.modal-actions) :is(#btn-start-pause,#btn-edge-trigger,#btn-climax-end,#btn-end-session,.btn) {
 --ink:#c8d0d6;--rim:.075;--sheen:.075;--grain:.06;
 position:relative;isolation:isolate;overflow:hidden !important;
 color:var(--ink) !important;
 border:1px solid rgb(255 255 255 / .065) !important;border-radius:15px !important;
 background:
  radial-gradient(120% 95% at 50% -18%,rgb(255 255 255 / var(--sheen)),transparent 62%),
  linear-gradient(180deg,#2c2f32,#232527 58%,#1f2123) !important;
 box-shadow:
  inset 0 1px 0 rgb(255 255 255 / var(--rim)),
  inset 0 -1px 0 rgb(0 0 0 / .38),
  inset 0 -7px 12px -6px rgb(0 0 0 / .28) !important;
 transform:none !important;filter:none !important;text-shadow:none !important;opacity:1 !important;
 transition:background 170ms ease,box-shadow 170ms ease,border-color 170ms ease,color 170ms ease !important;
}
body.zen-mode :is(.zen-action-dock,.modal-actions) :is(#btn-start-pause,#btn-edge-trigger,#btn-climax-end,#btn-end-session,.btn)::before {display:none !important;}
/* Leather grain, clipped by the button's own radius. */
body.zen-mode :is(.zen-action-dock,.modal-actions) :is(#btn-start-pause,#btn-edge-trigger,#btn-climax-end,#btn-end-session,.btn)::after {
 content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;opacity:var(--grain);
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E");
 transition:opacity 170ms ease;
}
/* Ink per control. */
body.zen-mode .zen-action-dock #btn-start-pause {--ink:#e4ebef;}
body.zen-mode .zen-action-dock #btn-edge-trigger {--ink:#d6b9c0;}
body.zen-mode .zen-action-dock #btn-climax-end {--ink:#c7cfd5;}
body.zen-mode .zen-action-dock #btn-end-session {--ink:#a9b3bb;}
body.zen-mode .modal-actions .btn-primary {--ink:#e6eff5;}
/* Hover: the light moves a little closer. */
body.zen-mode :is(.zen-action-dock,.modal-actions) :is(#btn-start-pause,#btn-edge-trigger,#btn-climax-end,#btn-end-session,.btn):not(:disabled):hover {
 --rim:.10;--sheen:.11;border-color:rgb(255 255 255 / .085) !important;
 background:
  radial-gradient(120% 95% at 50% -18%,rgb(255 255 255 / var(--sheen)),transparent 62%),
  linear-gradient(180deg,#303336,#262829 58%,#212325) !important;
}
/* Recessed: darker centre, soft inner shadow from above, faint reflection on the lower lip. */
body.zen-mode :is(.zen-action-dock,.modal-actions) :is(#btn-start-pause,#btn-edge-trigger,#btn-climax-end,#btn-end-session,.btn):not(:disabled):active,
body.zen-mode :is(.zen-action-dock,.modal-actions) :is(#btn-start-pause,#btn-edge-trigger,#btn-climax-end,#btn-end-session,.btn)[aria-pressed="true"],
body.zen-mode .zen-action-dock #btn-start-pause.btn-secondary,
body.zen-mode .zen-action-dock #btn-edge-trigger.btn-resume-mode {
 --grain:.045;
 border-color:rgb(255 255 255 / .05) !important;
 background:
  radial-gradient(85% 80% at 50% 45%,#151718,transparent 100%),
  linear-gradient(180deg,#1a1c1e,#1f2123 70%,#222426) !important;
 box-shadow:
  inset 0 2px 5px rgb(0 0 0 / .55),
  inset 0 1px 1px rgb(0 0 0 / .45),
  inset 0 -1px 0 rgb(255 255 255 / .055),
  inset 1px 0 0 rgb(255 255 255 / .02),
  inset -1px 0 0 rgb(255 255 255 / .02) !important;
}
body.zen-mode .zen-action-dock #btn-start-pause.btn-secondary {--ink:#b6c0c7;}
body.zen-mode .zen-action-dock #btn-edge-trigger.btn-resume-mode {--ink:#bcd3c7;}
/* Engaged controls still respond to the pointer, but stay recessed. */
body.zen-mode .zen-action-dock :is(#btn-start-pause.btn-secondary,#btn-edge-trigger.btn-resume-mode):not(:disabled):hover {
 background:
  radial-gradient(85% 80% at 50% 45%,#181a1c,transparent 100%),
  linear-gradient(180deg,#1d1f21,#222426 70%,#252729) !important;
}
body.zen-mode .zen-action-dock :is(#btn-start-pause.btn-secondary,#btn-edge-trigger.btn-resume-mode):not(:disabled):active {
 background:
  radial-gradient(85% 80% at 50% 45%,#121415,transparent 100%),
  linear-gradient(180deg,#191b1d,#1e2022 70%,#212325) !important;
}
/* Disabled: matte, unlit, no grain. */
body.zen-mode :is(.zen-action-dock,.modal-actions) :is(#btn-start-pause,#btn-edge-trigger,#btn-climax-end,#btn-end-session,.btn):disabled {
 --ink:#6e757b;--grain:.025;cursor:default;
 border-color:rgb(255 255 255 / .04) !important;
 background:#1d1f21 !important;box-shadow:inset 0 1px 0 rgb(255 255 255 / .025) !important;
}
body.zen-mode :is(.zen-action-dock,.modal-actions) :is(#btn-start-pause,#btn-edge-trigger,#btn-climax-end,#btn-end-session,.btn):focus-visible {outline:2px solid #91bde4 !important;outline-offset:3px !important;}
@media(prefers-reduced-motion:reduce) {
 body.zen-mode :is(.zen-action-dock,.modal-actions) :is(#btn-start-pause,#btn-edge-trigger,#btn-climax-end,#btn-end-session,.btn),
 body.zen-mode :is(.zen-action-dock,.modal-actions) :is(#btn-start-pause,#btn-edge-trigger,#btn-climax-end,#btn-end-session,.btn)::after {transition:none !important;}
}

/* ---------------------------------------------------------------------------
   Action buttons, theme 2: high-gloss black latex under a soft overhead light.
   Selected by body[data-button-theme="latex"] (Settings › Button finish).
   Same state model as theme 1. Raised = a tight wet highlight along the top and a
   faint reflection on the lower lip. Recessed = the control's state is engaged:
   Pause (session running, .btn-secondary) and Resume pacing (recovery active,
   .btn-resume-mode) stay pressed; momentary actions only press while :active.
   --------------------------------------------------------------------------- */
body.zen-mode[data-button-theme="latex"] :is(.zen-action-dock,.modal-actions) :is(#btn-start-pause,#btn-edge-trigger,#btn-climax-end,#btn-end-session,.btn) {
 /* Stretched latex: a deep black membrane under one soft light, with a single luxury fold
    caught across the surface. The fold is an SVG crease stretched to the button's exact
    size, so it pulls with the shape instead of tiling. */
 --ink:#dfe5ea;--hi:.20;--rim:.11;--wrap:.09;--floor:.11;--crease:.9;--crease-shift:0px;
 position:relative;isolation:isolate;overflow:hidden !important;
 color:var(--ink) !important;
 border:1px solid rgb(255 255 255 / .10) !important;border-radius:15px !important;
 background:
  radial-gradient(90% 70% at 38% 0%,rgb(255 255 255 / var(--hi)),rgb(255 255 255 / calc(var(--hi) * .4)) 34%,transparent 74%),
  radial-gradient(120% 60% at 62% 106%,rgb(225 235 242 / var(--floor)),rgb(225 235 242 / calc(var(--floor) * .3)) 40%,transparent 75%),
  linear-gradient(180deg,#2e3235 0%,#1a1d1f 45%,#131517 72%,#191c1e 100%) !important;
 box-shadow:
  inset 0 0 0 1px rgb(255 255 255 / var(--rim)),
  inset 0 0 16px rgb(255 255 255 / var(--wrap)),
  inset 0 1px 0 rgb(255 255 255 / .20),
  inset 0 -1px 0 rgb(255 255 255 / .12),
  inset 0 -14px 18px -14px rgb(0 0 0 / .55) !important;
 transform:none !important;filter:none !important;text-shadow:0 1px 0 rgb(0 0 0 / .5) !important;opacity:1 !important;
 transition:background 200ms ease,box-shadow 200ms ease,border-color 200ms ease,color 200ms ease !important;
}
body.zen-mode[data-button-theme="latex"] :is(.zen-action-dock,.modal-actions) :is(#btn-start-pause,#btn-edge-trigger,#btn-climax-end,#btn-end-session,.btn)::before {display:none !important;}
/* The fold: one soft ridge of light with its shadow, stretched to the button. */
body.zen-mode[data-button-theme="latex"] :is(.zen-action-dock,.modal-actions) :is(#btn-start-pause,#btn-edge-trigger,#btn-climax-end,#btn-end-session,.btn)::after {
 content:"";display:block;position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
 opacity:var(--crease);transform:translateY(var(--crease-shift));
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 60' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='s' x='-20%25' y='-50%25' width='140%25' height='200%25'%3E%3CfeGaussianBlur stdDeviation='4'/%3E%3C/filter%3E%3Cfilter id='h' x='-20%25' y='-50%25' width='140%25' height='200%25'%3E%3CfeGaussianBlur stdDeviation='2.2'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M-10 50 C 60 44, 95 14, 150 18 S 250 30, 312 22' fill='none' stroke='%23000' stroke-opacity='.42' stroke-width='8' filter='url(%23s)' transform='translate%280 5%29'/%3E%3Cpath d='M-10 50 C 60 44, 95 14, 150 18 S 250 30, 312 22' fill='none' stroke='%23fff' stroke-opacity='.30' stroke-width='2.8' filter='url(%23h)'/%3E%3Cpath d='M170 62 C 200 50, 215 44, 262 40' fill='none' stroke='%23000' stroke-opacity='.22' stroke-width='5' filter='url(%23s)' transform='translate%280 4%29'/%3E%3Cpath d='M170 62 C 200 50, 215 44, 262 40' fill='none' stroke='%23fff' stroke-opacity='.12' stroke-width='1.8' filter='url(%23h)'/%3E%3C/svg%3E");background-size:100% 100%;background-repeat:no-repeat;
 transition:opacity 200ms ease,transform 200ms ease;
}
body.zen-mode[data-button-theme="latex"] .zen-action-dock :is(#btn-edge-trigger,#btn-end-session)::after,
body.zen-mode[data-button-theme="latex"] .modal-actions .btn-primary::after {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 60' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='s' x='-20%25' y='-50%25' width='140%25' height='200%25'%3E%3CfeGaussianBlur stdDeviation='4'/%3E%3C/filter%3E%3Cfilter id='h' x='-20%25' y='-50%25' width='140%25' height='200%25'%3E%3CfeGaussianBlur stdDeviation='2.2'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M312 48 C 240 44, 205 14, 150 18 S 50 30, -12 24' fill='none' stroke='%23000' stroke-opacity='.42' stroke-width='8' filter='url(%23s)' transform='translate%280 5%29'/%3E%3Cpath d='M312 48 C 240 44, 205 14, 150 18 S 50 30, -12 24' fill='none' stroke='%23fff' stroke-opacity='.30' stroke-width='2.8' filter='url(%23h)'/%3E%3Cpath d='M130 62 C 100 50, 85 44, 38 40' fill='none' stroke='%23000' stroke-opacity='.22' stroke-width='5' filter='url(%23s)' transform='translate%280 4%29'/%3E%3Cpath d='M130 62 C 100 50, 85 44, 38 40' fill='none' stroke='%23fff' stroke-opacity='.12' stroke-width='1.8' filter='url(%23h)'/%3E%3C/svg%3E");}
/* The lower row carries the same folds flipped, so no two neighbours repeat. */
body.zen-mode[data-button-theme="latex"] .zen-action-dock :is(#btn-climax-end,#btn-end-session)::after {transform:translateY(var(--crease-shift)) scaleY(-1);}
/* Ink per control. */
body.zen-mode[data-button-theme="latex"] .zen-action-dock #btn-start-pause {--ink:#f1f5f8;}
body.zen-mode[data-button-theme="latex"] .zen-action-dock #btn-edge-trigger {--ink:#e3c7ce;}
body.zen-mode[data-button-theme="latex"] .zen-action-dock #btn-climax-end {--ink:#d6dde3;}
body.zen-mode[data-button-theme="latex"] .zen-action-dock #btn-end-session {--ink:#b6c0c8;}
body.zen-mode[data-button-theme="latex"] .modal-actions .btn-primary {--ink:#f2f7fb;}
/* Hover: the membrane catches more light; the fold brightens with it. */
body.zen-mode[data-button-theme="latex"] :is(.zen-action-dock,.modal-actions) :is(#btn-start-pause,#btn-edge-trigger,#btn-climax-end,#btn-end-session,.btn):not(:disabled):hover {
 --hi:.27;--rim:.15;--wrap:.13;--floor:.15;--crease:1;border-color:rgb(255 255 255 / .13) !important;
 box-shadow:
  inset 0 0 0 1px rgb(255 255 255 / var(--rim)),
  inset 0 0 18px rgb(255 255 255 / var(--wrap)),
  inset 0 1px 0 rgb(255 255 255 / .26),
  inset 0 -1px 0 rgb(255 255 255 / .15),
  inset 0 -14px 18px -14px rgb(0 0 0 / .5) !important;
}
/* Recessed: the membrane dips and pulls tighter; the fold drops and softens, light gathers on the lower edge,
   and a soft shadow falls in from above. */
body.zen-mode[data-button-theme="latex"] :is(.zen-action-dock,.modal-actions) :is(#btn-start-pause,#btn-edge-trigger,#btn-climax-end,#btn-end-session,.btn):not(:disabled):active,
body.zen-mode[data-button-theme="latex"] :is(.zen-action-dock,.modal-actions) :is(#btn-start-pause,#btn-edge-trigger,#btn-climax-end,#btn-end-session,.btn)[aria-pressed="true"],
body.zen-mode[data-button-theme="latex"] .zen-action-dock #btn-start-pause.btn-secondary,
body.zen-mode[data-button-theme="latex"] .zen-action-dock #btn-edge-trigger.btn-resume-mode {
 --crease:.5;--crease-shift:3px;
 border-color:rgb(255 255 255 / .09) !important;
 background:
  radial-gradient(120% 64% at 55% 108%,rgb(255 255 255 / .22),rgb(255 255 255 / .08) 38%,transparent 72%),
  radial-gradient(90% 60% at 40% -10%,rgb(255 255 255 / .05),transparent 60%),
  radial-gradient(85% 80% at 50% 42%,#0a0b0c,transparent 100%),
  linear-gradient(180deg,#0e0f11 0%,#121416 55%,#1c1f21 100%) !important;
 box-shadow:
  inset 0 0 0 1px rgb(255 255 255 / .11),
  inset 0 0 16px rgb(255 255 255 / .06),
  inset 0 3px 8px rgb(0 0 0 / .75),
  inset 0 1px 2px rgb(0 0 0 / .6),
  inset 0 -1px 0 rgb(255 255 255 / .20) !important;
 text-shadow:0 1px 0 rgb(0 0 0 / .6) !important;
}
body.zen-mode[data-button-theme="latex"] .zen-action-dock #btn-start-pause.btn-secondary {--ink:#c1cad1;}
body.zen-mode[data-button-theme="latex"] .zen-action-dock #btn-edge-trigger.btn-resume-mode {--ink:#c6dcd1;}
/* Engaged controls still respond to the pointer, but stay recessed. */
body.zen-mode[data-button-theme="latex"] .zen-action-dock :is(#btn-start-pause.btn-secondary,#btn-edge-trigger.btn-resume-mode):not(:disabled):hover {
 --crease:.6;
 background:
  radial-gradient(120% 64% at 55% 108%,rgb(255 255 255 / .28),rgb(255 255 255 / .10) 38%,transparent 72%),
  radial-gradient(90% 60% at 40% -10%,rgb(255 255 255 / .07),transparent 60%),
  radial-gradient(85% 80% at 50% 42%,#0d0e0f,transparent 100%),
  linear-gradient(180deg,#111214 0%,#151719 55%,#1f2224 100%) !important;
}
body.zen-mode[data-button-theme="latex"] .zen-action-dock :is(#btn-start-pause.btn-secondary,#btn-edge-trigger.btn-resume-mode):not(:disabled):active {
 --crease:.4;--crease-shift:4px;
 background:
  radial-gradient(120% 64% at 55% 108%,rgb(255 255 255 / .19),rgb(255 255 255 / .06) 38%,transparent 72%),
  radial-gradient(85% 80% at 50% 42%,#070808,transparent 100%),
  linear-gradient(180deg,#0b0c0e 0%,#0f1113 55%,#191c1e 100%) !important;
}
/* Disabled: matte, unlit, no reflection. */
body.zen-mode[data-button-theme="latex"] :is(.zen-action-dock,.modal-actions) :is(#btn-start-pause,#btn-edge-trigger,#btn-climax-end,#btn-end-session,.btn):disabled {
 --ink:#6b7278;--crease:0;cursor:default;
 border-color:rgb(255 255 255 / .04) !important;
 background:#1a1c1e !important;box-shadow:inset 0 1px 0 rgb(255 255 255 / .03) !important;text-shadow:none !important;
}
body.zen-mode[data-button-theme="latex"] :is(.zen-action-dock,.modal-actions) :is(#btn-start-pause,#btn-edge-trigger,#btn-climax-end,#btn-end-session,.btn):focus-visible {outline:2px solid #91bde4 !important;outline-offset:3px !important;}
@media(prefers-reduced-motion:reduce) {
 body.zen-mode[data-button-theme="latex"] :is(.zen-action-dock,.modal-actions) :is(#btn-start-pause,#btn-edge-trigger,#btn-climax-end,#btn-end-session,.btn),
 body.zen-mode[data-button-theme="latex"] :is(.zen-action-dock,.modal-actions) :is(#btn-start-pause,#btn-edge-trigger,#btn-climax-end,#btn-end-session,.btn)::after {transition:none !important;}
}

/* Sparse ambient depth; decorative only, outside document flow. */
#zen-space {position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:0;transition:opacity 1s ease;}
#zen-space.is-visible {opacity:1;}
body.zen-mode .app-container.zen-layout {position:relative;z-index:1;backdrop-filter:none !important;background:linear-gradient(160deg,#1c1c1f88,#15151799 65%) !important;}
@media(prefers-reduced-motion:reduce) {#zen-space {transition:none;}}

/* Ambient swimmers: a small, slow school drawn on a canvas over the interface while ambience plays. */
#ambience-swimmer {position:fixed;top:0;left:0;width:0;height:0;overflow:hidden;pointer-events:none;z-index:2;opacity:0;visibility:hidden;transition:opacity 1.4s ease,visibility 1.4s;}
#ambience-swimmer.is-swimming {opacity:1;visibility:visible;}
#ambience-swimmer canvas {display:block;width:100%;height:100%;}
@media(prefers-reduced-motion:reduce) {#ambience-swimmer {display:none;}}

body.zen-mode .app-container.zen-layout {isolation:isolate;}
.app-container #zen-space {position:absolute;z-index:-1;}

/* Behind the app on wide screens: a still Milky Way band and two star layers, drifting left to right almost imperceptibly. */
#zen-horizon {position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;opacity:0;animation:horizon-appear 2.4s ease forwards;}
#zen-horizon canvas {position:absolute;top:0;left:0;display:block;}
#zen-horizon .horizon-band {left:0;}
#zen-horizon .horizon-far {left:-6%;animation:horizon-drift 520s linear infinite;}
#zen-horizon .horizon-near {left:-6%;animation:horizon-drift 300s linear infinite;}
@keyframes horizon-drift {from {transform:translateX(-3%);} to {transform:translateX(3%);}}
@keyframes horizon-appear {to {opacity:1;}}
#zen-horizon.is-still canvas {animation:none;transform:none;}
@media(prefers-reduced-motion:reduce) {#zen-horizon canvas {animation:none;transform:none;} #zen-horizon {animation:none;opacity:1;}}
@media(max-width:900px) {#zen-horizon {display:none;}}
body.zen-mode .app-container.zen-layout {position:relative;z-index:1;}

/* Settings and History open at the app's own width, never the full desktop. */

#zen-horizon {animation:none;opacity:1;transition:opacity 1.2s ease;}
#zen-horizon.horizon-hidden {opacity:0;}
#zen-horizon .horizon-far,#zen-horizon .horizon-near {animation-direction:alternate;}
#zen-horizon.is-still canvas {animation-play-state:paused;}
@media(prefers-reduced-motion:reduce) {#zen-horizon {transition:none;}}

/* The heart is a signal: it swells with the level and tempo, warms in colour as it grows, strains near the brink.
   The glyph is drawn at its largest size and scaled down, so it stays crisp at every size (never upscaled pixels). */
body.zen-mode #pulse-center > #pulse-phase-icon {
  --heart-scale:1;--heart-swell:0;--heart-strain:0;
  position:relative;display:block;width:22px;height:22px;
  transform:scale(calc(1 / var(--beat-scale,1)));
  color:color-mix(in srgb,#f2a8b6 calc(var(--heart-swell) * 100%),#d1d1d6) !important;
  opacity:calc(1 - var(--heart-strain) * .25);
  filter:drop-shadow(0 0 calc(4px + var(--heart-swell) * 14px) color-mix(in srgb,#f47a95 calc(var(--heart-swell) * 55%),transparent)) !important;
  transition:color 600ms ease,opacity 600ms ease;
}
body.zen-mode #pulse-center > #pulse-phase-icon .ui-icon {
  position:absolute;left:50%;bottom:0;width:72px;height:72px;
  transform-origin:50% 100%;
  transform:translateX(-50%) scale(calc(var(--heart-scale) * 22 / 72));
  shape-rendering:geometricPrecision;
}
/* Keep the line weight in screen pixels at every size: a steady 1.6 px, a touch bolder as it swells. */
body.zen-mode #pulse-center > #pulse-phase-icon .ui-icon path {vector-effect:non-scaling-stroke;stroke-width:calc(1.8px + var(--heart-swell) * .7px);}
@media(prefers-reduced-motion:reduce) {body.zen-mode #pulse-center > #pulse-phase-icon .ui-icon {transform:translateX(-50%) scale(calc((1 + var(--heart-swell) * .6) * 22 / 72));}}

/* A quieter settings hierarchy, consistent with the main interface. */
body.zen-mode #zen-advanced-drawer {color:#c5cdd3;}
body.zen-mode #zen-advanced-drawer :is(.wave-sequencer-card,.settings-card,.levels-selector-bar) {background:transparent;border:0;box-shadow:none;padding:24px 2px;margin:0;border-bottom:1px solid #ffffff0b;border-radius:0;}
body.zen-mode #zen-advanced-drawer .wave-title-row {display:flex;align-items:center;justify-content:space-between;gap:16px;}
body.zen-mode #zen-advanced-drawer .section-heading {font:500 16px/1.4 system-ui;color:#e0e8ed;}
body.zen-mode #zen-advanced-drawer .wave-cycle-badge {border:0 !important;background:transparent !important;box-shadow:none !important;padding:0;color:#8f9da8;font:400 12px system-ui;}
.rhythm-help {font:400 12px/1.6 system-ui;color:#93a1ac;margin:7px 0 18px;}
body.zen-mode #zen-advanced-drawer .wave-selector-presets {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
body.zen-mode #zen-advanced-drawer .wave-preset-btn {display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:5px;min-height:70px;padding:13px 16px;border:1px solid #ffffff0a;background:#ffffff03;border-radius:12px;box-shadow:none;color:#bec8d0;white-space:normal;line-height:1.4;}
body.zen-mode #zen-advanced-drawer .wave-preset-btn.active {background:linear-gradient(150deg,#32383d,#24292d);border-color:#ffffff22;color:#f0f5f8;box-shadow:inset 0 1px 0 #ffffff08;}
body.zen-mode #zen-advanced-drawer .wave-preset-btn:hover {border-color:#ffffff28;}
.preset-name {font-size:13px;font-weight:550;}.preset-detail {font-size:11px;font-weight:400;color:#96a4ae;}
body.zen-mode #zen-advanced-drawer .timeline-blocks-track {gap:3px;margin-top:20px;}
body.zen-mode #zen-advanced-drawer .t-block {background:#ffffff03 !important;border:0 !important;border-radius:6px;box-shadow:none !important;min-width:74px;padding:12px 7px;}
body.zen-mode #zen-advanced-drawer .t-block.active {background:#ffffff0b !important;box-shadow:inset 0 -2px 0 #9aafb9 !important;}
body.zen-mode #zen-advanced-drawer .t-block-speed {color:#b9c7cf !important;font-size:10px;font-weight:500;text-transform:none;}
body.zen-mode #zen-advanced-drawer :is(.t-block-bpm,.t-block-dur) {color:#8696a2 !important;font-size:10px;}
body.zen-mode #zen-advanced-drawer :is(select,input[type=number]) {background:#24272a;color:#d4dde4;border:1px solid #ffffff0c;border-radius:10px;box-shadow:none;}
body.zen-mode #zen-advanced-drawer .mode-tabs {background:transparent;border:0;gap:6px;}
body.zen-mode #zen-advanced-drawer .mode-tab {border:0;box-shadow:none;background:transparent;color:#9eabb5;}
body.zen-mode #zen-advanced-drawer .mode-tab.active {background:#ffffff09;color:#e0e9ef;}
body:has(#zen-advanced-drawer:not(.collapsed)) :is(#ambience-swimmer,#zen-space) {visibility:hidden !important;opacity:0 !important;}
@media(max-width:600px) {body.zen-mode #zen-advanced-drawer .wave-selector-presets {grid-template-columns:1fr;}body.zen-mode #zen-advanced-drawer .wave-preset-btn {min-height:62px;}body.zen-mode #zen-advanced-drawer .timeline-blocks-track {overflow-x:auto;}}

body.zen-mode #progression-deck {background:transparent;border:0;padding:20px 2px;box-shadow:none;}
body.zen-mode #progression-deck .progression-sub {color:#94a2ad;font-size:12px;line-height:1.6;max-width:52ch;}
body.zen-mode #progression-deck .badge {background:transparent;border:0;color:#8796a2;font-size:11px;}
body.zen-mode #progression-deck .progression-metrics-grid {gap:24px;grid-template-columns:repeat(4,minmax(0,1fr));margin:24px 0;}
body.zen-mode #progression-deck .p-stat-card {background:transparent;border:0;border-radius:0;padding:0;box-shadow:none;}
body.zen-mode #progression-deck .p-stat-label {font-size:11px;font-weight:400;text-transform:none;color:#94a2ad;}
body.zen-mode #progression-deck .p-stat-val {font:450 26px/1.3 system-ui;color:#e0e9ef !important;letter-spacing:-.035em;}
body.zen-mode #progression-deck .p-stat-sub {font-size:11px;color:#8796a2 !important;line-height:1.5;}
body.zen-mode #progression-deck .prescription-box {background:#ffffff03;border:0;border-radius:12px;padding:20px;box-shadow:none;}
body.zen-mode #progression-deck .prescription-title {font:500 14px/1.4 system-ui;color:#dbe5ec;}
body.zen-mode #progression-deck .prescription-desc {font-size:12px;line-height:1.6;color:#94a2ad;}
body.zen-mode #btn-apply-prescription {background:#2b3034;color:#dce5ec;border:1px solid #ffffff10;box-shadow:none;font-size:12px;}
@media(max-width:650px) {body.zen-mode #progression-deck .progression-metrics-grid {grid-template-columns:repeat(2,minmax(0,1fr));}}

/* ---------- Zen immersion: the interface steps back, the ring becomes the room ---------- */
body.zen-mode #btn-zen-immerse {display:grid;place-items:center;width:36px;min-width:36px;height:36px;padding:0;background:transparent !important;border:0 !important;box-shadow:none !important;color:#8fcfb4;}
body.zen-mode #btn-zen-immerse svg {width:20px;height:20px;}
body.zen-mode #btn-zen-immerse:hover {color:#c5ecd9;}
body.zen-mode #btn-zen-immerse:focus-visible {outline:2px solid #91bde4;outline-offset:2px;border-radius:50%;}
body.zen-mode #btn-zen-immerse[hidden] {display:none !important;}
body.zen-mode :is(.zen-header,.zen-status-ribbon,.cadence-window-labels,.zen-arousal-dock,.zen-action-dock,.zen-drawer-toggle-row) {
  transition:opacity 1.6s ease,filter 1.6s ease,transform 1.6s cubic-bezier(.3,.6,.3,1);
}
body.zen-mode.zen-immersed :is(.zen-header,.zen-status-ribbon,.cadence-window-labels,.zen-arousal-dock,.zen-action-dock,.zen-drawer-toggle-row) {
  opacity:0;filter:blur(3px) brightness(.6);transform:translateY(10px) scale(.98);pointer-events:none;
}
body.zen-mode.zen-immersed .zen-header {transform:translateY(-10px) scale(.98);}
/* The ring clears its words; the spline tail and (by default) the swimmers step away, so nothing is clipped
   and the centre belongs to the mind animation. */
body.zen-mode .rhythm-ring-stage {transition:transform 2.4s cubic-bezier(.3,.6,.3,1);}
body.zen-mode.zen-immersed .rhythm-ring-stage {transform:translate(var(--zen-dx,0px),var(--zen-dy,0px)) scale(calc(var(--zen-scale,1.12) * var(--zen-breath,1)));transform-origin:50% 50%;position:relative;z-index:5;}
body.zen-mode.zen-immersed #pulse-center {border-width:calc(2px / var(--zen-scale,1)) !important;}
body.zen-mode #pulse-center > :is(.check-in-core,.ready-core,.zen-tempo-center,#pulse-phase-icon,#recovery-breath-label) {transition:opacity 1.2s ease;}
body.zen-mode.zen-immersed #pulse-center > :is(.check-in-core,.ready-core,.zen-tempo-center,#pulse-phase-icon,#recovery-breath-label) {opacity:0 !important;pointer-events:none;}
body.zen-mode .canvas-ambient-container {transition:opacity 1.6s ease;}
body.zen-mode.zen-immersed .canvas-ambient-container {opacity:0 !important;}
#ambience-swimmer {transition:opacity 1.4s ease,visibility 1.4s;}
body.zen-immersed:not(.zen-keep-swimmers) #ambience-swimmer {opacity:0 !important;visibility:hidden !important;}
#zen-cosmos {position:fixed;z-index:3;pointer-events:none;opacity:0;visibility:hidden;transition:opacity 2s ease,visibility 2s;overflow:hidden;}
body.zen-immersed #zen-cosmos {opacity:1;visibility:visible;}
/* The one way back: the same calm icon, larger, breathing gently at the bottom of the screen. */
#zen-return {position:fixed;left:50%;bottom:max(28px,env(safe-area-inset-bottom));z-index:40;width:58px;height:58px;margin-left:-29px;padding:0;border-radius:50%;
  display:grid;place-items:center;border:1px solid #ffffff14;background:radial-gradient(circle at 50% 35%,#24302c,#141817 75%);color:#9fdcc1;cursor:pointer;
  opacity:0;visibility:hidden;transform:scale(.6);transition:opacity 1.2s ease,transform 1.2s cubic-bezier(.3,.6,.3,1),visibility 1.2s;box-shadow:0 0 0 0 #7fc9b000;}
#zen-return svg {width:30px;height:30px;}
body.zen-immersed #zen-return {opacity:.9;visibility:visible;transform:scale(1);transition-delay:.8s;animation:zen-return-breathe 11s ease-in-out infinite 2s;}
#zen-return:hover {opacity:1;color:#d0f1e2;}
#zen-return:focus-visible {outline:2px solid #91bde4;outline-offset:4px;}
@keyframes zen-return-breathe {0%,100% {box-shadow:0 0 0 0 #7fc9b000;} 50% {box-shadow:0 0 26px 2px #7fc9b030;}}
@media(prefers-reduced-motion:reduce) {
  #zen-return {animation:none !important;}
  body.zen-mode.zen-immersed .rhythm-ring-stage {transform:none;}
  body.zen-mode.zen-immersed :is(.zen-header,.zen-status-ribbon,.cadence-window-labels,.zen-arousal-dock,.zen-action-dock,.zen-drawer-toggle-row) {transform:none;filter:none;}
}

/* Phones: a foldable arousal section. The handle sits on top; folded, only the status line remains. */
.dock-handle {display:none;}
@media(max-width:600px) {
  body.zen-mode .zen-arousal-dock {position:relative;}
  body.zen-mode .zen-arousal-dock .dock-handle {display:grid;place-items:center;position:absolute;left:50%;top:-14px;width:72px;height:24px;margin-left:-36px;padding:0;border:0;background:transparent;cursor:pointer;z-index:3;touch-action:none;}
  body.zen-mode .zen-arousal-dock .dock-handle[hidden] {display:none;}
  body.zen-mode .zen-arousal-dock .dock-handle span {display:block;width:36px;height:4px;border-radius:4px;background:#ffffff26;transition:background .3s ease,width .3s ease;}
  body.zen-mode .zen-arousal-dock .dock-handle:hover span,body.zen-mode .zen-arousal-dock .dock-handle:focus-visible span {background:#ffffff4a;width:44px;}
  body.zen-mode .zen-arousal-dock .dock-handle:focus-visible {outline:none;}
  body.zen-mode .zen-arousal-dock :is(#arousal-tactile-strip,#zen-arousal-zones,.visual-intensity-dock) {transition:opacity .45s ease;}
  body.zen-mode.dock-folded .zen-arousal-dock :is(#arousal-tactile-strip,#zen-arousal-zones,.visual-intensity-dock) {display:none !important;}
  body.zen-mode.dock-folded .zen-arousal-dock {cursor:pointer;}
  body.zen-mode.dock-folded .zen-arousal-dock .stage-timeline {margin-bottom:4px !important;}
  body.zen-mode.dock-folded #zen-arousal-header {padding-block:6px !important;}
}

/* Phones: the header has five controls now; the privacy button keeps its eye icon and drops its words so the title never clips. */
@media(max-width:600px) {body.zen-mode #btn-discrete .btn-text,body.zen-mode #btn-discrete .privacy-shortcut {display:none !important;}body.zen-mode #btn-discrete {padding:0 8px !important;min-width:36px;}}

/* Zen: a top strip that reveals a single sound toggle on hover (or tap on phones). */
#zen-peek-zone {position:fixed;left:0;right:0;top:0;height:84px;z-index:41;display:none;pointer-events:none;}
@media(hover:none) {body.zen-immersed #zen-peek-zone {pointer-events:auto;}}
body.zen-immersed #zen-peek-zone {display:block;}
#zen-mute {position:fixed;top:max(18px,env(safe-area-inset-top));right:max(18px,calc(50% - 450px));z-index:42;width:40px;height:40px;padding:0;border-radius:50%;
  display:grid;place-items:center;border:1px solid #ffffff12;background:#151a19cc;color:#b9d6cc;cursor:pointer;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .5s ease,transform .5s ease,visibility .5s;}
#zen-mute svg {width:20px;height:20px;}
body.zen-immersed.zen-peek #zen-mute,body.zen-immersed #zen-mute:focus-visible {opacity:.9;visibility:visible;transform:none;}
#zen-mute:hover {opacity:1;color:#e2f4ec;}
#zen-mute:focus-visible {outline:2px solid #91bde4;outline-offset:3px;}

/* Zen card: what this session is about, shown large over the orb before the voice begins. */
#zen-card {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, calc(-50% + 10px));
  z-index: 6; width: min(560px, calc(100vw - 48px)); text-align: center;
  opacity: 0; pointer-events: none; visibility: hidden;
  transition: opacity 1.2s ease, transform 1.2s ease, visibility 0s linear 1.2s;
}
#zen-card.is-on { opacity: 1; transform: translate(-50%, -50%); visibility: visible; transition-delay: 0s, 0s, 0s; }
#zen-card h2 {
  margin: 0 0 10px; font-family: Georgia, "Times New Roman", serif; font-weight: 700;
  font-size: clamp(26px, 4.6vw, 44px); line-height: 1.12; letter-spacing: -.01em;
  color: #eef6f3; text-shadow: 0 2px 26px rgba(0, 0, 0, .55);
}
#zen-card p {
  margin: 0; font-size: clamp(13px, 1.5vw, 16px); letter-spacing: .02em;
  color: rgba(214, 232, 226, .72); text-shadow: 0 1px 14px rgba(0, 0, 0, .5);
}

@media (prefers-reduced-motion: reduce) { #zen-card { transition-duration: .2s; } }

/* Wave marker: silent, large, fades in and out as one wave gives way to the next. */
#wave-flash {
  position: fixed; inset: 0; z-index: 7; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding-top: 18vh; text-align: center;
  background: radial-gradient(60% 50% at 50% 30%, rgba(6, 9, 11, .78), rgba(6, 9, 11, .92));
  backdrop-filter: blur(7px) saturate(.7); -webkit-backdrop-filter: blur(7px) saturate(.7);
  opacity: 0; visibility: hidden;
  transition: opacity .9s ease, visibility 0s linear .9s;
}
#wave-flash strong, #wave-flash span { transform: translateY(8px); transition: transform .9s ease; }
#wave-flash.is-on strong, #wave-flash.is-on span { transform: translateY(0); }
#wave-flash.is-on { opacity: 1; visibility: visible; transition-delay: 0s, 0s; }
#wave-flash strong {
  display: block; font-family: Georgia, "Times New Roman", serif; font-weight: 700;
  font-size: clamp(40px, 9vw, 96px); line-height: 1; letter-spacing: -.02em;
  color: #f0f7f4; text-shadow: 0 4px 40px rgba(0, 0, 0, .6), 0 0 60px rgba(126, 200, 180, .25);
}
#wave-flash span {
  display: block; margin-top: 10px; font-size: clamp(12px, 1.6vw, 15px);
  letter-spacing: .16em; text-transform: uppercase; color: rgba(206, 228, 220, .68);
}
@media (prefers-reduced-motion: reduce) { #wave-flash { transition-duration: .2s; } }

/* While the zen card is up, the scene behind it drops right back, then returns as the card goes. */
body.zen-immersed .rhythm-ring-stage,
body.zen-immersed #zen-cosmos,
body.zen-immersed #zen-return { transition: filter 1.4s ease, opacity 1.2s ease; }
body.zen-immersed.zen-card-on .rhythm-ring-stage,
body.zen-immersed.zen-card-on #zen-cosmos { filter: brightness(0); }
body.zen-immersed.zen-card-on #zen-return { opacity: .12; }
@media (prefers-reduced-motion: reduce) {
  body.zen-immersed .rhythm-ring-stage,
  body.zen-immersed #zen-cosmos,
  body.zen-immersed #zen-return { transition-duration: .25s; }
}

/* A card shown mid-journey only dims the scene; the travel carries on behind it. */
body.zen-immersed.zen-card-on.zen-card-soft .rhythm-ring-stage,
body.zen-immersed.zen-card-on.zen-card-soft #zen-cosmos { filter: brightness(.42) saturate(.75); }
body.zen-immersed.zen-card-on.zen-card-soft #zen-return { opacity: .3; }

/* History: an outcome chip per row, so the list can be read at a glance. */
.history-chip {
  font-style: normal; font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  padding: 2px 8px; border-radius: 999px; margin-inline: 10px 0; white-space: nowrap;
  border: 1px solid transparent;
}
.history-chip.out-held { color: #7fc8b4; background: rgba(127, 200, 180, .12); border-color: rgba(127, 200, 180, .3); }
.history-chip.out-master { color: #d9b46c; background: rgba(217, 180, 108, .13); border-color: rgba(217, 180, 108, .32); }
.history-chip.out-climax { color: #c7d2d6; background: rgba(199, 210, 214, .1); border-color: rgba(199, 210, 214, .24); }
.history-chip.out-early { color: #d9727a; background: rgba(217, 114, 122, .12); border-color: rgba(217, 114, 122, .3); }
.history-chip.out-short, .history-chip.out-plain { color: #98a3a8; background: rgba(152, 163, 168, .1); border-color: rgba(152, 163, 168, .22); }
.history-grip { opacity: .72; font-size: .82rem; margin-top: 2px; }

/* Let the separate cosmos canvas fill the scene without the fixed orb shell.
   Opacity preserves the geometry used to position the journey. */
body.zen-mode #pulse-center {transition:opacity 1.4s ease !important;}
body.zen-mode.zen-immersed #pulse-center {opacity:0 !important;pointer-events:none;}
@media(prefers-reduced-motion:reduce) {
  body.zen-mode #pulse-center {transition:none !important;}
}

/* The journey traveller rides the rim of the ring. */
/* Higher specificity than the rule that puts every other child of the ring in flow: the
   traveller's canvas must sit on top of the ring, not push the heart and the numeral around. */
#pulse-center > #journey-ring {
  position: absolute !important; inset: 0 !important; margin: 0 !important;
  width: 100% !important; height: 100% !important;
  pointer-events: none; z-index: 2; opacity: .9; transition: opacity .8s ease;
}
body.zen-immersed #journey-ring { opacity: 0; }

/* The journey rests between sessions; while one is running it steps aside. */
#pulse-center > #journey-ring.is-away { opacity: 0 !important; }

/* While the settings panel is open nothing animates behind it. */
body.settings-open .canvas-ambient-container,
body.settings-open #journey-ring { opacity: 0 !important; }

/* Pelvic floor training is being rebuilt: kept in place, but not selectable for now. */
.mode-tab.is-wip { opacity: .42; cursor: not-allowed; filter: saturate(.4); }
.mode-tab.is-wip .tab-desc { font-style: italic; }
.mode-tab.is-wip:hover, .mode-tab.is-wip:focus-visible { transform: none; box-shadow: none; }

/* The squeeze hold: the beat keeps running, the numbers step back, the word holds the screen. */
#pulse-center > #squeeze-cue {
  position: absolute !important; inset: 0 !important; z-index: 4;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; pointer-events: none; opacity: 0; visibility: hidden;
  transition: opacity .5s ease, visibility 0s linear .5s;
}
#pulse-center > #squeeze-cue.is-on { opacity: 1; visibility: visible; transition-delay: 0s, 0s; }
#squeeze-cue strong {
  font-family: Georgia, "Times New Roman", serif; font-weight: 700;
  font-size: clamp(34px, 7vw, 64px); letter-spacing: .01em; color: #f2f7f5;
  text-shadow: 0 3px 30px rgba(0, 0, 0, .6);
}
#squeeze-cue span {
  font-family: ui-monospace, SFMono-Regular, monospace; font-size: clamp(22px, 4vw, 38px);
  color: rgba(226, 240, 236, .8);
}
body.squeezing #pulse-bpm-display, body.squeezing .bpm-value, body.squeezing #disp-current-bpm { opacity: .12; transition: opacity .5s ease; }
body.squeezing #pulse-phase-icon { opacity: .25; transition: opacity .5s ease; }

/* Speeds beyond the current training level are shown, but locked. */
.tempo-btn.is-locked, .quick-shift-btn.is-locked { opacity: .34; cursor: not-allowed; filter: saturate(.3); }

/* The plain tally at the top of a session review. */
.session-tally { margin: 0 0 10px; font-size: .95rem; color: #cfe0da; letter-spacing: .01em; }

/* The stroke count belongs to a running session; it stays out of the idle screen. */
.stroke-only { display: none !important; }
body.session-active .ribbon-metric-card.stroke-only { display: flex !important; }
body.session-active .ribbon-separator.stroke-only { display: block !important; }

/* Strokes over time, in the history panel. */
.stroke-summary { margin: 14px 0 18px; }
.stroke-summary h4 { margin: 0 0 10px; font-size: .95rem; font-weight: 600; }
.stroke-figures { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.stroke-figure {
  flex: 1 1 110px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 12px; padding: 10px 12px;
}
.stroke-figure strong { display: block; font-family: ui-monospace, SFMono-Regular, monospace; font-size: 1.1rem; color: #cfe8df; }
.stroke-figure span { font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; opacity: .6; }
.stroke-bars { width: 100%; height: auto; display: block; }

/* Three controls, one clear row: start/pause, recovery break, finish. */
.zen-action-dock .controls-row.three-up { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.zen-action-dock .controls-row.secondary-actions.three-up { grid-template-columns: 1fr; }
/* Retired: Finished ends and saves every session. The dock's :is(...) display:flex rules (#btn-end-session)
   carry more weight than a bare id+class, so the hide is scoped to the dock to outrank them. */
#btn-end-session.is-retired,
body.zen-mode .zen-action-dock #btn-end-session.is-retired { display: none !important; }
/* With End session gone, Finished takes the whole second row instead of leaving an empty cell beside it. */
body.zen-mode .zen-action-dock .controls-row.secondary-actions:has(> #btn-end-session.is-retired) { grid-template-columns: minmax(0, 1fr) !important; }
@media (max-width: 560px) {
  .zen-action-dock .controls-row.three-up { grid-template-columns: 1fr; }
}

/* Where you are on the ladder, kept quiet next to the settings row. */
#journey-caption {
  font-size: .76rem; letter-spacing: .04em; color: rgba(206, 224, 218, .5);
  align-self: center; margin-left: 6px; white-space: nowrap;
}
body.session-active #journey-caption { opacity: .25; }
@media (max-width: 560px) { #journey-caption { width: 100%; text-align: center; margin: 4px 0 0; } }

/* Muted is easy to forget about, so while it lasts the sound controls breathe slowly. The icon
   inside the button is what pulses, never the button itself: the zen toggle uses its own opacity
   to fade in and out with the peek zone, and animating that would pin it on screen. */
@keyframes bodyzen-muted-breath {0%,100% {opacity:.26;} 50% {opacity:1;}}
body.audio-muted #mute-icon,
body.audio-muted #zen-mute svg {animation:bodyzen-muted-breath 3.4s ease-in-out infinite;}
@media (prefers-reduced-motion:reduce) {
  body.audio-muted #mute-icon,
  body.audio-muted #zen-mute svg {animation:none;opacity:.45;}
}

/* Before the first start the numbers are all zero and the cadence line is empty, so the screen is
   just noise around the ring. Hide that row until a session exists and let the ring take the space.
   Keyed off data-session-controls, which app.js already maintains: idle | active | ended. Paused
   reports "active", so the numbers stay readable mid-session. Transform, not a canvas resize, so
   the draw loop and its 840x340 coordinate space are untouched. */
body:has(.primary-controls[data-session-controls="idle"]) .zen-status-ribbon,
body:has(.primary-controls[data-session-controls="idle"]) .cadence-window-labels {
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s ease, visibility 0s linear .5s;
}
.zen-status-ribbon, .cadence-window-labels {
  transition: opacity .5s ease;
}
body:has(.primary-controls[data-session-controls="idle"]) .rhythm-ring-stage {
  /* Larger before the session starts. The tail of the spline runs to the right, so the growth steps
     down on narrower windows instead of pushing the tip off screen. */
  transform: scale(var(--idle-ring-scale, 1.18));
  transform-origin: center center;
  transition: transform .6s cubic-bezier(.22,.61,.36,1);
  /* Scaling grows the painted box downward over the arousal dock. The ring has no click handlers,
     so it must not swallow the taps that land on the buttons underneath it. */
  pointer-events: none;
}
body:has(.primary-controls[data-session-controls="idle"]) .rhythm-ring-stage :is(button, a, input, select) {
  pointer-events: auto;
}
.rhythm-ring-stage {
  transform: scale(1);
  transform-origin: center top;
  transition: transform .6s cubic-bezier(.22,.61,.36,1);
}
@media (prefers-reduced-motion: reduce) {
  .zen-status-ribbon, .cadence-window-labels, .rhythm-ring-stage { transition: none; }
}

/* Explanations are a sentence or two now, so the bubble wraps and reads as a paragraph. */
#control-help-tip {
  max-width: min(340px, calc(100vw - 24px));
  white-space: normal;
  line-height: 1.45;
  text-align: left;
}

/* --- Settings drawer grouping (reorg) ------------------------------------------------------- */
/* Marks the line between "this mode" and "every mode", which is the whole point of the regroup. */
.settings-every-mode-divider {
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  margin:22px 0 6px; padding-top:16px; border-top:1px solid #ffffff14;
}
.settings-every-mode-divider span {font-weight:600; font-size:.82rem; letter-spacing:.04em; text-transform:uppercase; color:#a6b9b4;}
.settings-every-mode-divider small {font-size:.78rem; opacity:.66;}
/* One line under each group heading saying what the group is for. */
.settings-subnote {margin:-4px 0 12px; font-size:.79rem; opacity:.68; line-height:1.45;}
.settings-toggle-stack {display:flex; flex-direction:column; gap:10px;}

/* --- Settings groups: one consistent row shape --------------------------------------------------
   The old drawer mixed three different row layouts in one card, which is what made it read as
   crammed: some labels sat in a narrow left column and broke mid-word ("Grip / strength"), some
   controls were half width, some full. Inside the regrouped cards every setting now uses the same
   shape — label on its own line, control full width beneath it — laid out two per row on wide
   screens and one per row when there is not enough space for that to be comfortable. */
.settings-area :is(.settings-grid, .visual-intensity-setting, .setting-item, .recovery-target-setting) {
  min-width: 0;
}
.settings-area .settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px 22px;
  align-items: start;
}
.settings-area :is(.setting-item, .visual-intensity-setting, .recovery-target-setting) {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 7px;
}
.settings-area :is(.setting-item, .visual-intensity-setting, .recovery-target-setting) > label:not(.toggle-control) {
  /* Stop the narrow-column wrap: the label owns the full width of its own row. */
  white-space: normal;
  width: auto;
  min-width: 0;
  flex: none;
  font-size: .84rem;
  opacity: .82;
}
.settings-area :is(select, input[type="range"], input[type="number"]) {
  width: 100%;
  max-width: none;
}
/* Loose settings that are not inside a grid still line up with the ones that are. */
.settings-area > :is(.visual-intensity-setting, .recovery-target-setting, .pulse-pattern-custom) {
  margin-top: 18px;
}
/* A toggle is its own row, and any explanation under it belongs to that toggle, full width. */
.settings-area .setting-item > .toggle-control,
.settings-area .settings-toggle-stack .toggle-control {
  display: flex;
  align-items: center;
  gap: 10px;
}
.settings-area .field-note {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  max-width: 62ch;
}
.settings-area .sound-preview-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.settings-area .effort-check {
  border: 0;
  padding: 0;
  margin: 0 0 4px;
  min-width: 0;
}
.settings-area .effort-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
}
.settings-area .session-pace-details {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  margin: 14px 0 4px;
}

/* A setting that carries an explanation owns the full width of the card: the note is a paragraph,
   not a column, and squeezing it beside a dropdown is what made Pacing look crammed. */
.settings-area .settings-grid > .setting-item:has(.field-note) { grid-column: 1 / -1; }

/* The injected rows (button finish, intro, swimmers) arrive with their own inline layout. Give
   them the same label-above-control shape as everything else in the group. */
#group-visuals .button-theme-setting {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 7px;
  margin-top: 18px;
}
#group-visuals .button-theme-setting > label { font-size: .84rem; opacity: .82; white-space: normal; }
#group-visuals .button-theme-setting > select { width: 100%; }
#group-visuals .intro-setting { display: flex; align-items: center; gap: 8px; margin-top: 14px; }

/* Live readout, not a setting: one calm line that wraps as a line instead of stacking a stray
   timer underneath itself. */
.settings-area .session-pace-details {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding: 12px 0;
  margin: 6px 0;
  border-top: 1px solid #ffffff0f;
  border-bottom: 1px solid #ffffff0f;
}
.settings-area .session-pace-details > * { margin: 0; text-align: left; }
.settings-area .session-pace-details .pace-details-title {
  font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; opacity: .55;
  flex: 0 0 100%;
}
/* The phase line is a block with its own centred sub-cue, which is right in the ring but wrong in
   a settings row. Flatten it so the whole readout is one wrapping line. */
.settings-area .session-pace-details .zen-ring-instruction {
  display: inline !important; font-size: inherit; line-height: inherit; text-align: left;
  margin: 0 !important; padding: 0 !important; letter-spacing: normal;
}
.settings-area .session-pace-details .zen-ring-instruction .pulse-subcue {
  display: inline !important; margin: 0 !important; padding: 0 !important;
  font-size: inherit; width: auto !important;
}


/* Three areas, each with its own sub-sections: Gameplay, Sound, Visuals. The area is the card; the
   sub-heading inside it separates concerns without starting a whole new box, which is what made the
   five-card version feel like a list of unrelated panels. */
.settings-area {
  background: #1b1e1f;
  border: 1px solid #ffffff0d;
  border-radius: 18px;
  padding: 24px 26px;
  margin-bottom: 18px;
  min-width: 0;
}
.settings-area > .settings-header {
  margin: 0 0 4px;
  font-size: 1.02rem;
  font-weight: 600;
  color: #e6ecec;
}
.settings-area > .settings-subnote { margin: 0 0 4px; }
.settings-subgroup { padding-top: 20px; margin-top: 16px; border-top: 1px solid #ffffff0f; }
.settings-subgroup:first-of-type { border-top: 0; padding-top: 6px; margin-top: 6px; }
.settings-subheader {
  margin: 0 0 14px;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #93a5a1;
}


/* --- The debrief -------------------------------------------------------------------------------
   Verdict, three facts, two taps, one change, one line. Hairlines instead of boxes, light numerals,
   one warm accent for the thing that changes. The old summary noise and the raw event log stay in the
   markup but out of sight. */
.climax-modal-card[data-debrief] :is(.modal-stats-grid, #climax-benchmark-card, #climax-advice-box,
  #session-recovery-summary, #session-summary-title, #session-summary-desc, .session-curve details) { display: none !important; }
.climax-modal-card[data-debrief] .summary-eyebrow { opacity: .42; letter-spacing: .16em; }
#debrief-card { display: flex; flex-direction: column; gap: 26px; margin: 10px 0 34px; text-align: left; }
#debrief-card .db-verdict { margin: 0; font-size: 2.05rem; font-weight: 500; letter-spacing: -.012em; line-height: 1.12; color: #ecefee; }
#debrief-card .db-verdict.held { color: #cfe9dd; }
#debrief-card .db-verdict.early { color: #ecc9d8; }
#debrief-card .db-sub { margin: -18px 0 0; opacity: .5; font-size: .95rem; }
#debrief-card .db-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; border-top: 1px solid #ffffff10; }
#debrief-card .db-fact { padding: 14px 0 12px; border-bottom: 1px solid #ffffff10; min-width: 0; }
#debrief-card .db-fact .k { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; opacity: .45; margin: 0 0 4px; }
#debrief-card .db-fact .v { font-size: 1.55rem; font-weight: 300; line-height: 1.15; margin: 0; font-variant-numeric: tabular-nums; color: #eef2f1; }
#debrief-card .db-fact .v small { font-size: .8rem; font-weight: 400; opacity: .5; margin-left: 8px; }
#debrief-card .db-fact.ok .v { color: #cfe9dd; }
#debrief-card .db-fact.bad .v { color: #ecc9d8; }
#debrief-card .db-q { display: flex; flex-direction: column; gap: 10px; }
#debrief-card .db-q > p { margin: 0; font-weight: 500; font-size: .98rem; }
#debrief-card .db-taps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
#debrief-card .db-taps button {
  background: transparent; color: #b9c4c2; border: 1px solid #ffffff1c; border-radius: 999px;
  padding: 11px 8px; font: inherit; font-size: .9rem; font-weight: 400; cursor: pointer; transition: .18s;
}
#debrief-card .db-taps button:hover { border-color: #ffffff3a; color: #eef2f1; }
#debrief-card .db-taps button.on { background: rgba(168,230,208,.09); border-color: rgba(168,230,208,.55); color: #cfe9dd; }
#debrief-card .db-next { background: rgba(245,196,81,.05); border: 1px solid rgba(245,196,81,.28); border-radius: 16px; padding: 18px 20px 14px; }
#debrief-card .db-next.off { background: transparent; border-color: #ffffff16; }
#debrief-card .db-next .k { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: #e6c46a; margin: 0 0 8px; }
#debrief-card .db-next.off .k { color: #8f9a98; }
#debrief-card .db-next .v { margin: 0; font-size: 1.08rem; font-weight: 500; color: #f3e3bd; line-height: 1.4; }
#debrief-card .db-next.off .v { color: #c3cdcd; }
#debrief-card .db-next .why { margin: 8px 0 0; font-size: .88rem; opacity: .55; line-height: 1.5; }
#debrief-card .db-undo {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; background: none; border: 0; padding: 4px 0;
  color: #e6c46a; font: inherit; font-size: .84rem; cursor: pointer; opacity: .85;
}
#debrief-card .db-undo:hover { opacity: 1; }
#debrief-card .db-next.off .db-undo { color: #b9c4c2; }
#debrief-card .db-trend .k { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; opacity: .45; margin: 0 0 8px; }
#debrief-card .db-trend svg { width: 100%; height: 72px; display: block; }
#debrief-card .db-trend .now { font-size: 1.55rem; font-weight: 300; margin: 6px 0 0; font-variant-numeric: tabular-nums; color: #eef2f1; }
#debrief-card .db-trend .now small { font-size: .8rem; font-weight: 400; opacity: .5; margin-left: 8px; }
#debrief-card .db-trend .note { margin: 2px 0 0; font-size: .82rem; opacity: .45; }
.btn.btn-icon-text { display: inline-flex; align-items: center; justify-content: center; gap: 9px; }
.btn.btn-icon-text svg { flex: none; opacity: .9; }
/* the timeline under the debrief: same restraint. CSS beats presentation attributes on SVG, so the
   colours session-review.js sets inline are overridden here without touching that file. */
#climax-modal .climax-modal-card[data-debrief] .session-curve { margin: 4px 0 8px; }
#climax-modal .climax-modal-card[data-debrief] .session-curve .session-tally { font-size: .84rem; color: #8f9a98; margin: 0 0 14px; }
body #climax-modal .climax-modal-card[data-debrief] .session-curve h4 { font: 500 .72rem/1.4 inherit; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; opacity: .45; font-weight: 500; margin: 0 0 4px; color: inherit; }
#climax-modal .climax-modal-card[data-debrief] .session-curve .curve-note { display: none; }
#climax-modal .climax-modal-card[data-debrief] .session-curve svg text { font-family: inherit; font-size: 11px; fill: #6f7b79; letter-spacing: .02em; }
#climax-modal .climax-modal-card[data-debrief] .session-curve svg line[stroke-dasharray="2 5"] { stroke: rgba(255,255,255,.07); }
#climax-modal .climax-modal-card[data-debrief] .session-curve svg line[stroke="#ffffff12"],
#climax-modal .climax-modal-card[data-debrief] .session-curve svg line[stroke="#ffffff15"] { stroke: rgba(255,255,255,.05); }
#climax-modal .climax-modal-card[data-debrief] .session-curve svg polyline { stroke-width: 1.4; }
#climax-modal .climax-modal-card[data-debrief] .session-curve svg polyline[stroke="#88bed8"] { stroke: #c9d6d3; }
#climax-modal .climax-modal-card[data-debrief] .session-curve svg polyline[stroke="#d5ba70"] { stroke: #e6c46a; }
#climax-modal .climax-modal-card[data-debrief] .session-curve svg polyline[stroke="#b9a7da"] { stroke: rgba(185,167,218,.45); }
#climax-modal .climax-modal-card[data-debrief] .session-curve svg polygon { opacity: .55; }
#climax-modal .climax-modal-card[data-debrief] .session-curve .curve-readout { border-top: 1px solid #ffffff10; color: #8f9a98; font-size: .8rem; padding: 10px 0 0; margin: 0; }
#climax-modal .climax-modal-card[data-debrief] .session-curve svg polygon:not([fill*="-bpm"]):not([fill*="-arousal"]) { opacity: .28; }

/* --- Session rhythm panel: one pattern, one wave to scale, one count -------------------------------- */
body:not(.session-active) #wave-cycle-display { display: none; }
body.zen-mode #zen-advanced-drawer .wave-preset-btn { gap: 3px; min-height: 0; padding: 13px 16px 12px; }
body.zen-mode #zen-advanced-drawer .wave-preset-btn .preset-detail { color: #9aa8b1; line-height: 1.45; }
body.zen-mode #zen-advanced-drawer .wave-preset-btn .preset-meta { margin-top: 4px; font-size: 11px; color: #7c8a93; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
body.zen-mode #zen-advanced-drawer .wave-preset-btn.active .preset-meta { color: #b8c6cf; }
.wave-caption { display: flex; justify-content: space-between; align-items: baseline; margin: 22px 0 8px; font-size: 12px; color: #8f9da8; }
.wave-caption span:first-child { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #7c8a93; }
.wave-caption #wave-length-caption { font-variant-numeric: tabular-nums; }
body.zen-mode #zen-advanced-drawer .timeline-blocks-track { margin-top: 0; gap: 3px; overflow: hidden; }
body.zen-mode #zen-advanced-drawer .t-block { padding: 9px 4px 8px; min-width: 0; overflow: hidden; border-radius: 6px; border-top: 2px solid transparent !important; }
body.zen-mode #zen-advanced-drawer .t-block > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.zen-mode #zen-advanced-drawer .t-block.speed-slow { border-top-color: #5fb3a3 !important; }
body.zen-mode #zen-advanced-drawer .t-block.speed-medium { border-top-color: #6fa6cf !important; }
body.zen-mode #zen-advanced-drawer .t-block.speed-fast { border-top-color: #e6c46a !important; }
body.zen-mode #zen-advanced-drawer .t-block.speed-stop { border-top-color: #d38a9c !important; background: #ffffff05 !important; }
body.zen-mode #zen-advanced-drawer .t-block.speed-stop .t-block-bpm { color: #d38a9c !important; }
body.zen-mode #zen-advanced-drawer .waves-own-settings { margin-top: 22px; }
body.zen-mode #zen-advanced-drawer .waves-own-settings .settings-subnote { margin: 8px 0 0; }

/* The enlargement also needs vertical room: on a short window the bigger ring lands on the arousal row. */
@media (max-width: 1180px) { :root { --idle-ring-scale: 1.1; } }
@media (max-width: 980px)  { :root { --idle-ring-scale: 1.04; } }
@media (max-height: 1000px) { :root { --idle-ring-scale: 1.1; } }
@media (max-height: 880px)  { :root { --idle-ring-scale: 1.05; } }
@media (max-width: 820px), (max-height: 760px) { :root { --idle-ring-scale: 1; } }

#btn-zen-immerse.is-unavailable { opacity: .32; cursor: default; }

/* --- Practice: one line under the change, an icon, sometimes a timer, then the legal line --------- */
#debrief-card .db-practice { display: grid; grid-template-columns: 22px 1fr; gap: 14px; padding: 4px 2px 0; }
#debrief-card .db-practice .icon { width: 22px; height: 22px; color: #9fb3ad; margin-top: 18px; }
#debrief-card .db-practice .icon svg { width: 22px; height: 22px; display: block; }
#debrief-card .db-practice .k { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: #8f9a98; margin: 0 0 6px; }
#debrief-card .db-practice .line { margin: 0; font-size: 1.02rem; font-weight: 400; color: #dfe6e4; line-height: 1.45; }
#debrief-card .db-practice .line.has-detail { cursor: pointer; text-decoration: underline dotted #ffffff30; text-underline-offset: 4px; }
#debrief-card .db-practice .detail { margin: 6px 0 0; font-size: .86rem; opacity: .55; line-height: 1.5; }
#debrief-card .db-practice .detail a { color: #cfe9dd; text-decoration: none; border-bottom: 1px solid #cfe9dd55; }
#debrief-card .db-timer { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 8px 16px; border-radius: 999px; border: 1px solid #ffffff1c; background: transparent; color: #cfe9dd; font: inherit; font-size: .88rem; cursor: pointer; font-variant-numeric: tabular-nums; }
#debrief-card .db-timer.running { border-color: rgba(168,230,208,.55); }
#debrief-card .db-timer.done { opacity: .5; cursor: default; }
#debrief-card .db-legal { margin: 8px 0 0; font-size: .74rem; line-height: 1.55; opacity: .38; }

/* Phones: before the session starts the stats row above the ring is empty, so the ring stage borrows it
   and sits at the bottom. That gives the idle spline room to point upward as a teardrop instead of being
   crushed against the side. */
@media (max-width: 600px) {
  body.zen-mode:has(.primary-controls[data-session-controls="idle"]) .rhythm-ring-stage {
    /* Fill the available deck instead of spilling a fixed 430px stage over the scale.
       The bottom inset leaves room for the drop's outline outside the ring. */
    grid-row: 1 / 4; height: 100% !important; min-height: 0 !important; align-items: flex-end !important; padding-bottom: 12px;
  }
  /* The zen return control sits at the top on phones: the bottom edge is where some Android gesture and
     hardware buttons live. */
  #zen-return { bottom: auto; top: max(18px, env(safe-area-inset-top)); }
}
/* --- The progress file block in settings ---------------------------------------------------------- */
#progress-file-block { display: flex; flex-direction: column; gap: 6px; }
#progress-file-block .progress-file-status { opacity: .5; font-style: normal; }
#progress-file-block .progress-file-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
#progress-file-block .progress-file-actions .btn { flex: 0 0 auto; }
#debrief-card .db-backup { margin: 2px 0 0; font-size: .86rem; opacity: .6; line-height: 1.5; }
#debrief-card .db-backup button { background: none; border: 0; padding: 0; font: inherit; color: #cfe9dd;
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
#debrief-card .db-backup button:hover { color: #eef2f1; }
/* --- The journey percentage ------------------------------------------------------------------------
   Appears at the top of the ring on the sweep's last frame, holds for three seconds, fades. It sits
   inside the circle so it travels with the ring at any size, and it never takes pointer events. */
#journey-percent {
  position: absolute; left: 50%; top: 7%; transform: translate(-50%, -6px);
  font: 400 1.05rem/1 system-ui, -apple-system, sans-serif; letter-spacing: .04em;
  color: #a6ddc9; text-shadow: 0 0 18px rgba(150, 214, 196, .35);
  font-variant-numeric: tabular-nums; pointer-events: none; z-index: 3;
  opacity: 0; transition: opacity .9s ease, transform .9s ease;
}
#journey-percent.is-on { opacity: .92; transform: translate(-50%, 0); transition: opacity .45s ease, transform .45s ease; }
@media (prefers-reduced-motion: reduce) { #journey-percent { transition: none; } }
/* The beat's counter-scale a thousand lines up (`body.zen-mode #pulse-center > :not(.beat-wash)`) is
   deliberately left in the ordinary cascade so it beats anything a child asks for, and transform is one
   property: winning it means replacing it. That quietly cost this badge the translate(-50%) that centres
   it, so it hung half its own width to the right of the ring's apex, measured at 14px of a 28px badge.
   Naming both ids outranks that rule, and composing both transforms keeps the badge still against the
   beat as well as centred. The same trap waits for any other child of the ring that needs a transform. */
body.zen-mode #pulse-center > #journey-percent {
  transform: translate(-50%, -6px) scale(calc(1 / var(--beat-scale, 1)));
}
body.zen-mode #pulse-center > #journey-percent.is-on {
  transform: translate(-50%, 0) scale(calc(1 / var(--beat-scale, 1)));
}

/* Expand: bottom right, in the zen mute button's look. It only appears when the site has mounted the
   trainer in a frame, because only then is there a page to cover. Once shown it is never hidden: the
   owner's rule is that it stays visible in every state, so it sits above the modals (10000) and the
   privacy curtain (99999), and in immersion it fades rather than leaving, still clickable. */
#zen-extend {position:fixed;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));z-index:100000;width:40px;height:40px;padding:0;border-radius:50%;
  display:grid;place-items:center;border:1px solid #ffffff12;background:#151a19cc;color:#b9d6cc;cursor:pointer;opacity:.8;transition:opacity .4s ease,color .3s ease;}
#zen-extend[hidden] {display:none;}
#zen-extend svg {width:20px;height:20px;}
#zen-extend .extend-close,#zen-extend[aria-pressed="true"] .extend-open {display:none;}
#zen-extend[aria-pressed="true"] .extend-close {display:block;}
#zen-extend:hover {opacity:1;color:#e2f4ec;}
#zen-extend:focus-visible {outline:2px solid #91bde4;outline-offset:3px;}
body.zen-immersed #zen-extend {opacity:.35;}
body.zen-immersed.zen-peek #zen-extend,body.zen-immersed #zen-extend:is(:hover,:focus-visible) {opacity:.9;}

/* --- The Zen Mode introduction -----------------------------------------------------------------
   Plays once, the first time zen is reached. Everything the scene normally holds goes to black, the
   same way the zen card already darkens it, and the drifting dust behind it all (#zen-space) is the
   only thing left moving. What remains is the sentence currently being spoken, large enough to read
   without looking for it. */
#zen-intro {
  position: fixed; inset: 0; z-index: 100001; display: grid; place-items: center;
  padding: clamp(24px, 7vw, 96px); pointer-events: none;
  opacity: 0; transition: opacity 1.2s ease;
}
#zen-intro.is-on { opacity: 1; }
/* The mark turns once before the voice names it, then leaves. It sits in the same grid cell as the
   words, so the first line arrives exactly where the mark was rather than somewhere else on screen. */
#zen-intro .zen-intro-mark { grid-area: 1 / 1; opacity: 0; color: #cfeee0; line-height: 0; }
#zen-intro .zen-intro-mark svg { width: clamp(88px, 14vw, 156px); height: auto; filter: drop-shadow(0 0 38px rgba(150, 214, 196, .32)); }
#zen-intro.is-marking .zen-intro-mark { animation: zen-mark-turn 2700ms cubic-bezier(.36, 0, .2, 1) both; }
#zen-intro.is-marking .zen-intro-line { opacity: 0; }
/* It grows in, holds through the turn, then goes by fading alone: the scale settles at 1 well before
   the end so nothing is moving while it leaves, and the fade has the last 45 percent of the turn, a
   little over a second, to do it in. The opacity curve is linear on purpose, since an eased fade
   spends most of its time nearly invisible and reads as a cut. */
@keyframes zen-mark-turn {
  0%   { opacity: 0; transform: rotate(0deg) scale(.84); }
  18%  { opacity: .95; }
  55%  { opacity: .95; transform: rotate(198deg) scale(1); }
  100% { opacity: 0; transform: rotate(360deg) scale(1); }
}
.zen-intro-line {
  grid-area: 1 / 1;
  margin: 0; max-width: 16em; text-align: center; text-wrap: balance;
  font: 300 clamp(1.9rem, 4.6vw, 3.4rem)/1.28 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: -.015em; color: #eaf6f0; text-shadow: 0 0 42px rgba(150, 214, 196, .22);
}
/* Each line arrives on its own rather than replacing the last one in place, so the eye is drawn to the
   new words instead of re-reading the whole block. */
.zen-intro-word { display: inline-block; animation: zen-intro-arrive 1s ease both; }
@keyframes zen-intro-arrive { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* The scene goes dark and stays dark for the whole recording. #zen-space is deliberately untouched. */
body.zen-intro-on .rhythm-ring-stage,
body.zen-intro-on #zen-cosmos,
body.zen-intro-on #ambience-swimmer { filter: brightness(0); transition: filter 1.4s ease; }
body.zen-intro-on #zen-card,
body.zen-intro-on #zen-return,
body.zen-intro-on #zen-mute,
body.zen-intro-on #zen-extend,
body.zen-intro-on #journey-ring { opacity: 0 !important; visibility: hidden !important; transition: opacity 1s ease; }
body.zen-intro-on #zen-space { opacity: 1 !important; }

/* Leaving the introduction early. The control is the one already at the bottom of the zen view, so
   nothing new has to be learned; it stays out of the way until a hand moves, and it is captioned for
   these two minutes only. Both selectors carry an id and two classes, so they outrank the blanket
   hiding rule above without needing !important to settle it. */
/* Lifted while the caption is under it, so the words are not pressed against the bottom edge. The
   button returns to its own place the moment the introduction ends. */
body.zen-intro-on.zen-intro-peek #zen-return { opacity: .28 !important; visibility: visible !important; transform: translateY(-28px) scale(1) !important; transition: opacity .5s ease, transform .5s ease; }
/* Faint enough to be found without being looked at, and only bright under the pointer. Reaching it
   by keyboard counts as reaching for it, so focus lights it the same as hover. */
body.zen-intro-on.zen-intro-peek #zen-return:is(:hover, :focus-visible) { opacity: .88 !important; transition: opacity .3s ease; }
#zen-intro-skip {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(28px + env(safe-area-inset-bottom));
  z-index: 100002; margin: 0; pointer-events: none; white-space: nowrap;
  font: 400 .82rem/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: .06em; color: #9fdcc1; opacity: 0; transition: opacity .5s ease;
}
body.zen-intro-peek #zen-intro-skip { opacity: .3; }
body.zen-intro-peek:has(#zen-return:is(:hover, :focus-visible)) #zen-intro-skip { opacity: .8; transition: opacity .3s ease; }


@media (prefers-reduced-motion: reduce) {
  #zen-intro { transition: none; }
  .zen-intro-word { animation: none; }
  #zen-intro.is-marking .zen-intro-mark { animation: none; }
  body.zen-intro-on .rhythm-ring-stage,
  body.zen-intro-on #zen-cosmos,
  body.zen-intro-on #ambience-swimmer { transition: none; }
}

/* How long is left of the introduction, in the journey ring's own gesture: it opens from the centre
   and reaches both edges as the recording ends. Deliberately not the journey ring itself, which means
   time under control and waves cleared.

   The first version was a 1px hairline at 50 percent with no rail behind it, and it could not be found:
   a bare growing stub gives nothing to measure against, so early on it reads as a speck rather than as
   "a tenth of the way". The faint rail spans the whole width from the first frame, so the distance left
   is legible at a glance, and the fill is bright enough to separate from it. Lifted clear of the very
   bottom edge, where a 1px line disappears into the bezel on a laptop. */
#zen-intro-track {
  position: absolute; left: 6%; right: 6%; bottom: 14px; height: 2px;
  z-index: 100002; pointer-events: none; border-radius: 2px;
  background: rgba(150, 214, 196, .13);
}
#zen-intro-track i {
  display: block; height: 100%; border-radius: 2px; opacity: .85;
  transform: scaleX(var(--p, 0)); transform-origin: 50% 50%;
  background: linear-gradient(90deg, rgba(150, 214, 196, .45), rgba(174, 230, 212, .95) 50%,
                                     rgba(150, 214, 196, .45));
  box-shadow: 0 0 12px rgba(150, 214, 196, .3);
}

/* Clearance under the ring, at the resolutions where there is none.

   The timeline rule is the dock's first child and sits flush with its top edge, so the space has to be
   padding here: a margin is absorbed by the centred grid. Paired with the ring's own 80cqh above, which
   gives it room inside its deck. Measured with offsetTop rather than a bounding rect, because
   #pulse-center carries the beat's scale transform and a rect reads a few pixels different on every
   frame of the pulse. */
body.zen-mode .zen-arousal-dock { padding-top: clamp(12px, 2.4vh, 30px) !important; }

/* On phones the zen return control deliberately sits at the TOP, because the bottom edge is where
   Android's gesture bar and hardware buttons live (see the max-width:600px block above). The caption
   has to follow the control rather than assume it is where it is on a desktop: left at the bottom it
   was stranded half a screen away from the icon it labels. The progress line stays at the bottom, out
   of the way of both. */
@media (max-width: 600px) {
  body.zen-intro-on.zen-intro-peek #zen-return { transform: translateY(0) scale(1) !important; }
  #zen-intro-skip {
    bottom: auto;
    top: calc(max(18px, env(safe-area-inset-top)) + 58px + 10px);
  }
}

/* A stable status column independent of the date and outcome text lengths. */
.session-history-entry > summary {
  display: grid; grid-template-columns: 190px 110px minmax(0, 1fr); justify-content: normal;
}
.session-history-entry > summary .history-chip { justify-self: start; }
@media (max-width: 600px) {
  .session-history-entry > summary { grid-template-columns: minmax(0, 1fr) 110px; gap: 8px 10px; }
  .session-history-entry > summary > span { grid-column: 1 / -1; }
}

/* Keep the dock in document and keyboard order, including the framed expand button. */
body.zen-mode div.zen-drawer-toggle-row { flex-wrap: nowrap; width: 100%; gap: 10px; }
body.zen-mode .zen-drawer-toggle-row > :is(#btn-open-history,#btn-toggle-advanced,#zen-extend-slot) {
  flex: 0 0 40px; width: 40px; height: 40px; min-height: 40px !important; padding: 0 !important;
  display: inline-flex; align-items: center; justify-content: center;
}
body.zen-mode .zen-drawer-toggle-row > #journey-caption {
  width: auto; min-width: 0; margin: 0; white-space: normal; text-align: center;
}
body.zen-mode .zen-drawer-toggle-row > .about-zen-link { order: 0; flex: 0 0 auto; }
body.zen-mode .zen-drawer-toggle-row > #zen-extend-slot[hidden] { display: none; }
@media (max-width: 600px) {
  body.zen-mode div.zen-drawer-toggle-row { gap: 6px; }
  body.zen-mode .zen-drawer-toggle-row > #journey-caption { flex: 1 1 0; font-size: 10px; letter-spacing: 0; line-height: 1.4; }
  body.zen-mode .zen-drawer-toggle-row > .about-zen-link { max-width: 78px; text-align: center; }
}
body.zen-mode .zen-drawer-toggle-row > :is(#btn-open-history,#btn-toggle-advanced) .ui-icon {
  display: block; width: 20px; height: 20px;
}

/* Short desktop viewports share the height loss across controls and the ring. */
@media (min-width: 601px) and (max-height: 760px) {
  body.zen-mode .app-container.zen-layout {
    grid-template-rows: auto auto minmax(120px, 1fr) auto auto 40px;
    padding-block: 8px !important;
    gap: 4px !important;
  }
  body.zen-mode .zen-status-ribbon .ribbon-val { font-size: 1.25rem !important; }
  body.zen-mode .zen-status-ribbon .ribbon-label { font-size: 10px !important; }
  body.zen-mode .zen-arousal-dock { padding-top: 12px !important; }
  body.zen-mode .stage-timeline { margin-bottom: 4px !important; }
  body.zen-mode #zen-arousal-header { margin-bottom: 0 !important; }
  body.zen-mode #arousal-tactile-strip .arousal-tap-btn { height: 40px !important; min-height: 40px !important; }
  body.zen-mode #zen-arousal-zones { margin-top: 0 !important; }
  body.zen-mode #zen-arousal-zones .zen-zone-pill { padding-block: 3px !important; }
  body.zen-mode .visual-intensity-dock { margin-top: 4px !important; }
  body.zen-mode #visual-intensity-strip button { min-height: 32px !important; padding-block: 4px !important; }
  body.zen-mode .zen-action-dock :is(#btn-start-pause, #btn-edge-trigger) { height: 48px !important; min-height: 48px !important; }
  body.zen-mode .zen-action-dock :is(#btn-climax-end, #btn-end-session) { height: 42px !important; min-height: 42px !important; }
}

/* The mode, named in the line under the session numbers: amber for manual, cyan for guided. */
.cadence-window-labels .mode-tag { font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.cadence-window-labels .mode-tag.manual { color: #fbbf24; }
.cadence-window-labels .mode-tag.guided { color: #7dd3fc; }

/* Waves pace nudge (index.html #pace-nudge): two quiet chips in the ring stage's lower corners, in the zen
   mute button's look. The group shares the stage's grid cell and fixed track, so showing or hiding it never
   moves the ring, the arousal dock or the action buttons. The wrapper ignores taps; only the chips take them. */
body.zen-mode .pace-nudge {grid-area:3 / 1;align-self:end;justify-self:center;width:min(100%,520px);box-sizing:border-box;padding:0 4px 4px;display:flex;justify-content:space-between;align-items:center;position:relative;z-index:11;pointer-events:none;transition:opacity 1.6s ease,visibility 0s linear 0s;}
body.zen-mode .pace-nudge[hidden] {display:none !important;}
/* The Waves label gains ' · pace +N%' (' · +N%' on a phone) mid-session; keep it on one line so the HUD row never grows. */
body.zen-mode #stage-elapsed {white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
body.zen-mode .pace-nudge .btn {pointer-events:auto;min-height:48px;padding:0 18px;gap:8px;border-radius:999px;border:1px solid #9fd6c466;background:#151a19e6;color:#d6f0e7;font-size:15px;font-weight:600;letter-spacing:.02em;line-height:1;white-space:nowrap;box-shadow:none;}
body.zen-mode .pace-nudge .btn svg {flex:none;}
/* A wider invisible hit area (the arousal keys' ::before trick): at least 44 px tall even on the 32 px short-phone
   chip. It reaches upward only: the stage clips anything below the chip, and the arousal dock sits there.
   The visible chip is unchanged. */
body.zen-mode .pace-nudge .btn {position:relative;}
body.zen-mode .pace-nudge .btn::before {content:'';position:absolute;top:-14px;bottom:0;left:-4px;right:-4px;}
body.zen-mode .pace-nudge .btn:focus-visible {outline:2px solid #91bde4 !important;outline-offset:3px !important;}
body.zen-mode .pace-nudge output {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
/* Faster stays in reach through a whole wave: when the rest of the screen settles it only dims. */
body.zen-mode.zen-immersed .pace-nudge {opacity:.7;}
/* The step count beside Faster, and a refused press that still takes the tap (app.js nudgePace says why). */
body.zen-mode .pace-nudge-steps {font-size:12px;font-weight:700;color:#7dd3fc;font-variant-numeric:tabular-nums;}
body.zen-mode .pace-nudge .btn[aria-disabled="true"] {opacity:.45;}
@media(max-width:450px) {body.zen-mode .pace-nudge {padding:0 0 2px;}body.zen-mode .pace-nudge .btn {min-height:44px;padding:0 14px;font-size:14px;}}
@media(max-width:450px) and (max-height:740px) {body.zen-mode .pace-nudge {width:100%;padding:0;}body.zen-mode .pace-nudge .btn {min-height:40px;padding:0 12px;gap:6px;}}
/* 360 px phones: the ring reaches the lower corners, so Ease back shows as "Ease" (still named "Ease back"). */
@media(max-width:370px) {body.zen-mode .pace-nudge-more {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}}
@media(prefers-reduced-motion:reduce) {body.zen-mode .pace-nudge {transition:none;}}
/* At a raised pace the ring's outer glow grows into the lower corners. Like #zen-mute, the chips carry a
   soft backdrop in their own fill (blur plus a faint halo), so the glow fades out around them instead of
   running visibly behind the label. Paint only: box sizes and positions are unchanged. */
body.zen-mode .pace-nudge .btn {-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 0 12px 5px #151a1999;}
/* Goal screen: the chart is the first focusable item, so the dialog's focus trap lands on it at open and
   the browser drew its default ring, a frame that ran under the sticky Save & Continue bar. Keyboard focus
   keeps the quiet ring from .session-curve svg:focus-visible; the card keeps focused content clear of the bar. */
.session-curve svg:focus:not(:focus-visible) {outline:none;}
body.zen-mode #goal-modal .modal-card {scroll-padding-bottom:110px;}

/* Very short desktop viewports (a small laptop at 150-175% Windows scaling leaves about 740 x 520).
   The controls keep their full height above, so the ring got what was left, about 80 px, and the
   first-session check-in overflowed the ring onto the arousal scale. Here the controls give up a few
   pixels each so the ring keeps roughly 130 px. */
@media (min-width: 601px) and (max-height: 620px) {
  body.zen-mode .app-container.zen-layout {
    grid-template-rows: auto auto minmax(110px, 1fr) auto auto 34px;
    padding-block: 6px !important;
    gap: 2px !important;
  }
  body.zen-mode .zen-status-ribbon { padding-block: 2px !important; }
  body.zen-mode .zen-status-ribbon .ribbon-val { font-size: 1.05rem !important; }
  body.zen-mode .zen-arousal-dock { padding-top: 6px !important; }
  body.zen-mode #arousal-tactile-strip .arousal-tap-btn { height: 34px !important; min-height: 34px !important; }
  body.zen-mode #zen-arousal-zones .zen-zone-pill { padding-block: 2px !important; }
  body.zen-mode .visual-intensity-dock { margin-top: 2px !important; }
  body.zen-mode #visual-intensity-strip button { min-height: 28px !important; padding-block: 2px !important; }
  body.zen-mode .zen-action-dock :is(#btn-start-pause, #btn-edge-trigger) { height: 44px !important; min-height: 44px !important; }
  body.zen-mode .zen-action-dock :is(#btn-climax-end, #btn-end-session) { height: 40px !important; min-height: 40px !important; }
  body.zen-mode .zen-drawer-toggle-row > :is(#btn-open-history, #btn-toggle-advanced, #zen-extend-slot) { flex-basis: 34px; width: 34px; height: 34px; min-height: 34px !important; }
}

/* When the ring is too small to hold the check-in, the check-in leaves the ring: one panel across the
   stage, the question on one line and the answers side by side. Measured on the ring stage itself (a
   size container), so it follows the ring at any width: a short laptop, a narrow window or a small
   phone. The ring is about the stage height minus 18 px; under about 190 px the stacked check-in no
   longer fits inside it. `translate` rather than `transform`, because every ring child's transform is
   the beat's inverse scale. */
@container (max-height: 210px) {
  body.zen-mode #pulse-center .check-in-core {
    inset: auto !important;
    top: 50% !important;
    left: 50% !important;
    translate: -50% -50%;
    width: max-content;
    max-width: min(640px, 96cqw);
    padding: 10px 18px;
    gap: 6px;
    border: 1px solid #ffffff14;
    border-radius: 16px;
    background: #141519f2;
    box-shadow: 0 12px 32px #0008;
  }
  body.zen-mode #pulse-center .check-in-question { max-width: none; font-size: 18px; text-wrap: balance; }
  body.zen-mode #pulse-center .check-in-options { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; width: auto; }
  body.zen-mode #pulse-center .check-in-options button { padding: 6px 14px; border: 1px solid #ffffff1f; background: #ffffff08; font-size: 14px; white-space: nowrap; }
  body.zen-mode #pulse-center .check-in-skip { padding: 2px 8px; }
}

/* ---- Compact layout: phones, narrow windows and short laptop screens (owner 2026-10-03: "Desktop is fine,
   but on smaller desktops ... and mobiles, it looks very, very horrible"). -------------------------------
   One rule set instead of more per-size patches. The rows under the ring size to what they hold and the
   ring stage takes whatever is left, so nothing can overflow into its neighbour (the session's second
   button row and the recovery check used to spill over the strength row). During a session the zone
   names and the strength row step aside (the scale's own label already names the zone, and strength is
   chosen before the start), the three session buttons share one row, and the pace chips are smaller. */
@media (max-width: 600px), (max-height: 700px) {
  body.zen-mode .app-container.zen-layout {
    grid-template-rows: auto auto minmax(0, 1fr) auto auto auto !important;
    row-gap: 4px !important;
  }
  body.zen-mode #main-visualizer-deck { min-height: 0 !important; height: 100% !important; align-self: stretch !important; }
  body.zen-mode :is(.zen-arousal-dock, .zen-action-dock, .zen-drawer-toggle-row) { height: auto !important; min-height: 0 !important; }
  body.zen-mode .zen-status-ribbon { padding-block: 2px !important; }
  /* Before the start the stats row is invisible but still took 54 px from the ring; here it gives them back. */
  body.zen-mode:has(.primary-controls[data-session-controls="idle"]) .zen-status-ribbon { height: 0 !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; border: 0 !important; overflow: hidden !important; }
  body.zen-mode .zen-status-ribbon .ribbon-val { font-size: 1.1rem !important; }
  body.zen-mode .zen-status-ribbon .ribbon-label { font-size: 9.5px !important; }
  body.zen-mode .pace-nudge .btn { min-height: 34px; padding: 0 12px; gap: 6px; font-size: 13px; }
  body.zen-mode .pace-nudge .btn svg { width: 14px; height: 14px; }
  body.zen-mode .zen-drawer-toggle-row > :is(#btn-open-history, #btn-open-challenges, #btn-toggle-advanced, #zen-extend-slot) { flex-basis: 34px; width: 34px; height: 34px; min-height: 34px !important; }

  body.zen-mode:has(.primary-controls[data-session-controls="active"]) :is(#zen-arousal-zones, .visual-intensity-dock),
  body.zen-mode:has(.primary-controls[data-session-controls="ended"]) :is(#zen-arousal-zones, .visual-intensity-dock) { display: none !important; }
  body.zen-mode:has(.primary-controls:not([data-session-controls="idle"])) .zen-action-dock .primary-controls {
    display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px !important;
  }
  body.zen-mode:has(.primary-controls:not([data-session-controls="idle"])) .zen-action-dock .controls-row { display: contents !important; }
  body.zen-mode:has(.primary-controls:not([data-session-controls="idle"])) .zen-action-dock :is(#btn-start-pause, #btn-edge-trigger, #btn-climax-end) {
    height: 46px !important; min-height: 46px !important; padding: 0 6px !important; font-size: 13px !important; gap: 6px !important;
  }
  body.zen-mode:has(.primary-controls:not([data-session-controls="idle"])) .zen-action-dock :is(.btn-climax-text, #start-btn-text, .btn-edge-text) { font-size: 13px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* Phones on their side: too short for one column, so the ring takes the left half and the controls the
   right. */
@media (orientation: landscape) and (max-height: 500px) and (min-width: 560px) {
  body.zen-mode .app-container.zen-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-rows: auto auto minmax(0, 1fr) auto auto !important;
    column-gap: 16px !important;
  }
  body.zen-mode .app-container.zen-layout > .app-header { grid-column: 1 / -1; grid-row: 1; }
  body.zen-mode .app-container.zen-layout > #main-visualizer-deck { grid-column: 1; grid-row: 2 / -1; }
  body.zen-mode .app-container.zen-layout > .zen-status-ribbon { grid-column: 1; grid-row: 2; }
  body.zen-mode .app-container.zen-layout > #main-visualizer-deck { grid-row: 3 / -1; }
  body.zen-mode .app-container.zen-layout > .zen-arousal-dock { grid-column: 2; grid-row: 2 / 4; align-self: end; }
  body.zen-mode .app-container.zen-layout > .zen-action-dock { grid-column: 2; grid-row: 4; }
  body.zen-mode .app-container.zen-layout > .zen-drawer-toggle-row { grid-column: 2; grid-row: 5; }
  body.zen-mode .app-container.zen-layout > #zen-advanced-drawer { grid-column: 1 / -1; }
  body.zen-mode .app-header .brand-title { font-size: 18px !important; }
  body.zen-mode #btn-discrete .btn-text, body.zen-mode #btn-discrete kbd { display: none !important; }
  body.zen-mode .zen-drawer-toggle-row > #journey-caption { flex: 1 1 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11px; }
}

/* Large screens: the two docks under the ring size to their content too. Their fixed 194 px and 120 px rows
   let the recovery check ("Feeling settled?") push the strength row under the session buttons; the ring
   stage absorbs the difference, and the ring is capped well below that stage height anyway. */
@media (min-width: 601px) and (min-height: 701px) {
  body.zen-mode .app-container.zen-layout { grid-template-rows: 52px 58px minmax(100px, 1fr) auto auto 28px !important; }
  body.zen-mode :is(.zen-arousal-dock, .zen-action-dock) { height: auto !important; min-height: 0 !important; }
}

/* The sound reminder (sound-nudge.js): a small card at the top, above zen and its introduction. */
#sound-nudge {position:fixed;top:max(14px,env(safe-area-inset-top));left:50%;translate:-50% -8px;z-index:2147483000;width:min(420px,calc(100vw - 24px));box-sizing:border-box;padding:12px 14px;border:1px solid #9fd6c440;border-radius:16px;background:#121618f5;box-shadow:0 14px 36px #000a;color:#dfe9ee;opacity:0;transition:opacity .35s ease,translate .35s ease;}
#sound-nudge.is-on {opacity:1;translate:-50% 0;}
#sound-nudge[hidden] {display:none;}
#sound-nudge .sound-nudge-text {margin:0 0 10px;font:400 14px/1.4 system-ui,-apple-system,"Segoe UI",sans-serif;}
#sound-nudge .sound-nudge-actions {display:flex;gap:8px;justify-content:flex-end;}
#sound-nudge button {min-height:36px;padding:0 14px;border-radius:999px;border:1px solid #ffffff24;background:transparent;color:#cfdde4;font:500 13px system-ui,-apple-system,"Segoe UI",sans-serif;cursor:pointer;}
#sound-nudge .sound-nudge-on {border-color:#9fd6c480;background:#1d2b27;color:#e3f5ee;}
#sound-nudge button:focus-visible {outline:2px solid #91bde4;outline-offset:2px;}
@media (prefers-reduced-motion: reduce) {#sound-nudge {transition:none;}}

/* The starting-level assessment (assessment.js): always a panel across the stage, whatever the ring size, so the
   longer questions and the result read in full. It scrolls inside itself rather than spilling over the scale. */
body.zen-mode #pulse-center .assess-core {
  inset: auto !important; top: 50% !important; left: 50% !important; translate: -50% -50%;
  width: max-content; max-width: min(600px, 96cqw); max-height: calc(100cqh - 8px); overflow: auto;
  padding: 12px 18px; gap: 6px; box-sizing: border-box;
  border: 1px solid #ffffff14; border-radius: 16px; background: #141519f2; box-shadow: 0 12px 32px #0008;
}
body.zen-mode #pulse-center .assess-core .check-in-question { max-width: none; font-size: clamp(16px, 9cqh, 20px); text-wrap: balance; }
body.zen-mode #pulse-center .assess-core .assess-text { margin: 0; max-width: 46ch; font: 400 13px/1.45 system-ui; color: #b6c6d1; text-wrap: pretty; }
body.zen-mode #pulse-center .assess-core .assess-text[hidden] { display: none; }
body.zen-mode #pulse-center .assess-core .check-in-options { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 6px; width: auto; }
body.zen-mode #pulse-center .assess-core .check-in-options button { padding: 6px 12px; border: 1px solid #ffffff1f; background: #ffffff08; font-size: 13.5px; }
body.zen-mode #pulse-center .assess-core .check-in-skip[hidden] { display: none; }
/* The run's one-line guide, in the readout row above the ring (grid row 2 of the deck), with a way out. */
body.zen-mode .assess-chip { grid-area: 2 / 1; justify-self: center; align-self: center; position: relative; z-index: 12; display: flex; align-items: center; gap: 8px;
  max-width: 96%; margin: 2px 0; padding: 3px 4px 3px 12px; border: 1px solid #9fd6c440; border-radius: 999px; background: #121618e6; color: #d6f0e7; font: 500 12px system-ui; white-space: nowrap; }
body.zen-mode .assess-chip[hidden] { display: none; }
body.zen-mode .assess-chip span { overflow: hidden; text-overflow: ellipsis; }
body.zen-mode .assess-chip button { flex: none; min-height: 24px; padding: 0 10px; border-radius: 999px; border: 1px solid #ffffff24; background: transparent; color: #cfdde4; font: 500 12px system-ui; cursor: pointer; }
body.zen-mode.assess-running .cadence-window-labels { visibility: hidden; }
/* Short ring stages (small laptops, narrow windows): tighter spacing so the longest steps fit without scrolling. */
@container (max-height: 260px) {
  body.zen-mode #pulse-center .assess-core { padding: 8px 12px; gap: 4px; }
  body.zen-mode #pulse-center .assess-core .check-in-question { font-size: 15px; }
  body.zen-mode #pulse-center .assess-core .assess-text { font-size: 12px; line-height: 1.35; }
  body.zen-mode #pulse-center .assess-core .check-in-options { gap: 4px; }
  body.zen-mode #pulse-center .assess-core .check-in-options button { padding: 4px 10px; font-size: 12.5px; }
  body.zen-mode #pulse-center .assess-core .check-in-skip { padding: 0 8px; font-size: 11px; }
}

/* The end-of-session picture (achievement-art.js): a wide banner at the top of the card, with one line under it. */
.achievement-art { margin: 0 0 18px; }
.achievement-art img { display: block; width: 100%; max-width: 432px; height: auto; aspect-ratio: 12 / 5; margin: 0 auto; border-radius: 16px; background: #101622; }
.achievement-art figcaption { text-align: center; }
.achievement-art img:not([src]) { visibility: hidden; }
.achievement-art figcaption { margin-top: 10px; font: 400 13px/1.5 system-ui; color: #b9c6cf; }
#climax-modal .achievement-art { margin-right: 36px; }
@media (max-width: 480px) { .achievement-art { margin-bottom: 14px; } .achievement-art img { border-radius: 12px; } }