.flow-launch {
  display: inline-flex; align-items: center; gap: 7px; min-height: 36px;
  padding: 8px 13px; border: 1px solid #a99c75; border-radius: 999px;
  background: #e8ddc3; color: #252c29; font: 800 10px ui-monospace, monospace;
  letter-spacing: .12em; cursor: pointer;
}
.flow-launch::before { content: '≈'; font-size: 18px; line-height: 12px; }
.flow-dialog {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none;
  max-height: none; margin: 0; padding: 0; border: 0; overflow: auto;
  color: #263b38; background: #f1ebdf;
  font-family: ui-sans-serif, system-ui, sans-serif;
}
.flow-dialog::backdrop { background: #f1ebdf; }
.flow-dialog * { box-sizing: border-box; }
.flow-dialog button, .flow-dialog input { font: inherit; }
.flow-dialog button { cursor: pointer; }
.flow-dialog :focus-visible, .flow-launch:focus-visible {
  outline: 3px solid #216d6a; outline-offset: 5px;
}
.flow-canvas, .flow-paper { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.flow-paper {
  background: radial-gradient(ellipse at 9% 72%, #c7d9cf80, transparent 42%),
    radial-gradient(ellipse at 92% 22%, #d8b27850, transparent 44%), #f1ebdf;
}
.flow-paper::after { content: ''; position: absolute; inset: 0; opacity: .055; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='paper'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.5' filter='url(%23paper)'/%3E%3C/svg%3E"); }
.flow-layout { position: relative; min-height: 100%; display: flex; flex-direction: column; padding: clamp(20px, 3.8vw, 56px); }
.flow-header, .flow-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.flow-wordmark { display: flex; align-items: center; gap: 12px; padding: 8px 12px; margin-left: -12px; border-radius: 16px; background: #f1ebdfd9; }
.flow-symbol { font: 36px Georgia, serif; color: #38736e; }
.flow-eyebrow { font: 600 10px ui-monospace, monospace; letter-spacing: .18em; line-height: 1.8; }
.flow-name { font: italic 24px Georgia, serif; letter-spacing: -.04em; }
.flow-button {
  border: 1px solid #374e423d; border-radius: 999px; padding: 11px 18px;
  color: #263b38; background: #f7f2e8d9; font-size: 12px !important;
}
.flow-button:hover { background: #fffaf0; border-color: #47645b; }
.flow-center {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; padding: 70px 0 44px;
  position: relative; isolation: isolate;
}
.flow-center::before {
  content: ''; position: absolute; z-index: -1; width: min(90vw, 850px); height: 400px;
  background: radial-gradient(ellipse, #f1ebdff2 0%, #f1ebdfc4 36%, #f1ebdf00 70%);
  pointer-events: none;
}
.flow-time {
  font-size: clamp(74px, 16vw, 230px); font-weight: 350; letter-spacing: -.065em;
  font-variant-numeric: tabular-nums; line-height: 1.15; margin: 8px 0 4px;
}
.flow-time[data-long="true"] { font-size: clamp(51px, 12vw, 175px); }
.flow-caption { font: italic clamp(16px, 2vw, 21px) Georgia, serif; margin: 8px 0 30px; color: #455b51; }
.flow-controls { display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; }
.flow-primary { background: #263e36; color: #fff8e8; border-color: #263e36; padding-inline: 29px; }
.flow-primary:hover { background: #35564a; color: #fff8e8; }
.flow-duration { margin-top: 22px; max-width: 360px; border: 1px solid #374e4233; border-radius: 18px; padding: 16px; background: #f7f2e8f2; }
.flow-duration[hidden] { display: none; }
.flow-fields { display: flex; align-items: end; justify-content: center; gap: 10px; margin-bottom: 14px; }
.flow-fields label { display: flex; flex-direction: column; gap: 6px; text-align: left; font-size: 11px; }
.flow-fields input { width: 72px; padding: 9px; border: 1px solid #59766666; border-radius: 8px; background: #fffaf2; color: #263b38; }
.flow-presets { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.flow-presets button { padding: 7px 11px; }
.flow-footer { color: #40594d; font: 10px ui-monospace, monospace; letter-spacing: .06em; line-height: 1.7; }
.flow-footer span:last-child { text-align: right; }
.flow-footer span { background: #f1ebdfd9; padding: 6px 9px; border-radius: 9px; }
.flow-status { min-height: 18px; }
.flow-art-switch { display: flex; gap: 3px; padding: 4px; border: 1px solid #374e4226; border-radius: 999px; background: #f1ebdfe8; }
.flow-art-switch .flow-button { border-color: transparent; background: transparent; padding: 9px 15px; }
.flow-art-switch .flow-button[aria-pressed="true"] { background: #263e36; color: #fff8e8; }
.flow-water-canvas { position: fixed; inset: 0; width: 100%; height: 100%; touch-action: none; }
.flow-water-canvas:focus-visible { outline-offset: -6px; }
.flow-canvas[hidden], .flow-water-canvas[hidden], .flow-water-tools[hidden], .flow-time-legend[hidden] { display: none; }
.flow-dialog:is([data-art-mode="water"], [data-art-mode="breathe"]) .flow-layout { pointer-events: none; }
.flow-dialog:is([data-art-mode="water"], [data-art-mode="breathe"]) .flow-header,
.flow-dialog:is([data-art-mode="water"], [data-art-mode="breathe"]) .flow-controls,
.flow-dialog:is([data-art-mode="water"], [data-art-mode="breathe"]) .flow-duration,
.flow-dialog:is([data-art-mode="water"], [data-art-mode="breathe"]) .flow-footer { pointer-events: auto; }
/* Deep teal water keeps pale pigment and classroom digits clearly visible. */
.flow-dialog:is([data-art-mode="water"], [data-art-mode="breathe"]) { color: #e8f2eb; background: #091f24; }
.flow-dialog:is([data-art-mode="water"], [data-art-mode="breathe"]) .flow-paper { background: #091f24; }
.flow-dialog:is([data-art-mode="water"], [data-art-mode="breathe"]) .flow-time { text-shadow: 0 2px 24px #06191f; }
.flow-dialog:is([data-art-mode="water"], [data-art-mode="breathe"]) .flow-caption,
.flow-dialog:is([data-art-mode="water"], [data-art-mode="breathe"]) .flow-footer { color: #bfd6cd; }
.flow-dialog:is([data-art-mode="water"], [data-art-mode="breathe"]) .flow-symbol { color: #91cec1; }
.flow-dialog:is([data-art-mode="water"], [data-art-mode="breathe"]) .flow-center::before {
  background: radial-gradient(ellipse, #091f24dd 0%, #091f2490 36%, #091f2400 70%);
}
.flow-dialog:is([data-art-mode="water"], [data-art-mode="breathe"]) .flow-wordmark,
.flow-dialog:is([data-art-mode="water"], [data-art-mode="breathe"]) .flow-art-switch,
.flow-dialog:is([data-art-mode="water"], [data-art-mode="breathe"]) .flow-water-tools,
.flow-dialog:is([data-art-mode="water"], [data-art-mode="breathe"]) .flow-footer span,
.flow-dialog:is([data-art-mode="water"], [data-art-mode="breathe"]) .flow-duration { background: #102c32e8; border-color: #bddacf30; }
.flow-dialog:is([data-art-mode="water"], [data-art-mode="breathe"]) .flow-button,
.flow-dialog:is([data-art-mode="water"], [data-art-mode="breathe"]) select,
.flow-dialog:is([data-art-mode="water"], [data-art-mode="breathe"]) input { color: #e8f2eb; background: #193b41; border-color: #bddacf40; }
.flow-dialog:is([data-art-mode="water"], [data-art-mode="breathe"]) .flow-button:hover { background: #284f55; }
.flow-dialog:is([data-art-mode="water"], [data-art-mode="breathe"]) .flow-primary,
.flow-dialog:is([data-art-mode="water"], [data-art-mode="breathe"]) .flow-art-switch .flow-button[aria-pressed="true"] {
  background: #b2d9c9; color: #102c32; border-color: #b2d9c9;
}
.flow-dialog:is([data-art-mode="water"], [data-art-mode="breathe"]) .flow-primary:hover { background: #ccebdd; }
.flow-dialog:is([data-art-mode="water"], [data-art-mode="breathe"]) :focus-visible { outline-color: #a8e9df; }
.flow-water-tools { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; max-width: 450px; padding: 10px; border-radius: 16px; background: #f1ebdfed; }
.flow-water-tools label { display: flex; align-items: center; gap: 7px; }
.flow-water-tools select { max-width: 105px; border: 1px solid #374e423d; border-radius: 999px; padding: 8px; background: #fffaf2; color: #263b38; font: inherit; }
.flow-water-tools .flow-button { padding: 8px 12px; }
.flow-water-help { flex: 1 1 100%; text-align: right; }
@media (max-width: 600px) {
  .timer-header { flex-wrap: wrap; }
  .timer-header > div:first-child { flex: 1 1 100%; }
  .timer-header-tools { justify-content: flex-start !important; }
  .flow-layout { padding: 22px; }
  .flow-header { gap: 8px; }
  .flow-header { flex-wrap: wrap; }
  .flow-art-switch { order: 3; flex: 1 1 100%; justify-content: center; }
  .flow-dialog:is([data-art-mode="water"], [data-art-mode="breathe"]) .flow-footer { flex-direction: column; align-items: stretch; }
  .flow-dialog:is([data-art-mode="water"], [data-art-mode="breathe"]) .flow-center { padding: 34px 0; }
  .flow-water-tools { justify-content: center; }
  .flow-water-help { text-align: center !important; }
  .flow-eyebrow { font-size: 8px; letter-spacing: .11em; }
  .flow-name { font-size: 21px; }
  .flow-center { padding-top: 65px; }
  .flow-footer { font-size: 8px; gap: 16px; }
}
@media (max-height: 600px) {
  .flow-center { padding: 22px 0; }
  .flow-time { font-size: clamp(66px, 16vh, 130px); }
  .flow-caption { margin-bottom: 16px; }
}

/* Breathing is code-native and remains legible without Canvas or WebGL. */
.flow-breathing[hidden], .flow-breath-tools[hidden], .breath-steps span[hidden] { display: none; }
.flow-dialog[data-art-mode="breathe"] .flow-paper {
  background: radial-gradient(ellipse at 20% 90%, #315b494d, transparent 65%),
    radial-gradient(ellipse at 85% 15%, #345d6959, transparent 60%), #091f24;
}
.flow-dialog[data-art-mode="breathe"] .flow-layout { padding: clamp(20px, 2.5vw, 36px); }
.flow-dialog[data-art-mode="breathe"] .flow-center { padding: 28px 0 20px; }
.flow-dialog[data-art-mode="breathe"] .flow-center::before { display: none; }
.flow-dialog[data-art-mode="breathe"] .flow-time { font-size: 32px; letter-spacing: -.035em; margin: 17px 0 0; }
.flow-dialog[data-art-mode="breathe"] .flow-caption { font-size: 16px; margin: 8px 0 20px; }
.flow-breathing { width: min(350px, 70vw, 34vh); margin-top: 20px; --breath-size: .56; }
.breath-stage { position: relative; width: 100%; aspect-ratio: 1; display: grid; place-items: center; }
.breath-halo { position: absolute; inset: -20%; border-radius: 50%; background: radial-gradient(circle, #75bfb019, #75bfb005 50%, transparent 70%); }
.breath-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke-width: 1; }
.breath-track { stroke: #99c9bd40; }
.breath-progress { stroke: #b1e0d3; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--breath-progress, 0)); transform: rotate(-90deg); transform-origin: 50% 50%; }
.breath-orbit { position: absolute; inset: 3.8889%; transform: rotate(var(--breath-turn, 0deg)); }
.breath-orbit i { position: absolute; top: -5px; left: calc(50% - 5px); width: 10px; height: 10px; border-radius: 50%; background: #d6f0dd; box-shadow: 0 0 15px #b5e9cb66; }
.breath-bubble { position: absolute; inset: 10%; border-radius: 50%; transform: scale(var(--breath-size)); background: radial-gradient(circle at 34% 25%, #b2decd, #74b4ad 53%, #4a8e96); box-shadow: inset 0 0 35px #dcf7e329, 0 0 44px #82c6bb20; }
.breath-cue { z-index: 1; color: #102c32; text-align: center; pointer-events: none; }
.breath-label { font: 500 clamp(18px, 3.5vw, 30px) Georgia, serif; letter-spacing: -.03em; }
.breath-count { font: 11px ui-monospace, monospace; margin-top: 9px; }
.breath-steps { display: flex; justify-content: center; gap: 8px; margin-top: 8px; font: 9px ui-monospace, monospace; letter-spacing: .08em; }
.breath-steps span { padding: 6px 9px; color: #a9c8c0; border-radius: 99px; }
.breath-steps span.active { color: #e5f5ec; background: #b2d9c91c; }
.flow-breath-tools { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 10px; border: 1px solid #bddacf30; border-radius: 14px; background: #102c32e8; }
.flow-breath-tools label { display: flex; align-items: center; gap: 8px; }
.flow-breath-tools select { border-radius: 99px; padding: 9px; font: inherit; border: 1px solid #bddacf40; }
.flow-dialog[data-art-mode="breathe"] .flow-breath-tools { pointer-events: auto; }
@media (max-width: 600px) {
  .flow-art-switch .flow-button { padding-inline: 12px; }
  .flow-breathing { width: min(280px, 72vw, 30vh); }
  .flow-dialog[data-art-mode="breathe"] .flow-center { padding: 24px 0; }
  .flow-breath-tools { justify-content: center; gap: 8px; font-size: 11px; }
  .flow-dialog[data-art-mode="breathe"] .flow-controls .flow-button { padding: 10px 14px; }
  .flow-dialog[data-art-mode="breathe"] .flow-controls .flow-primary { padding-inline: 19px; }
  .flow-dialog[data-art-mode="breathe"] .flow-center { padding-block: 16px; }
  .breath-label { font-size: 20px; }
  .breath-count { font-size: 9px; }
}
@media (max-height: 600px) and (min-width: 601px) {
  .flow-dialog[data-art-mode="breathe"] .flow-center { padding: 12px 0; }
  .flow-breathing { width: 190px; margin-top: 8px; }
  .flow-dialog[data-art-mode="breathe"] .flow-time { margin-top: 6px; font-size: 24px; }
}

/* Screen blending retains the video beneath the dark water surface. */
.focus-water-canvas { position:absolute; inset:0; width:100%; height:100%; z-index:2; mix-blend-mode:screen; opacity:.65; touch-action:none; }
.focus-water-canvas:focus-visible { outline:2px solid #a8e9df; outline-offset:-5px; }
.focus-mode .focus-content { z-index:3; }
.flow-controls [hidden] { display:none; }

.focus-video-dim.with-water { background:rgba(7,8,7,.1); }