/* Self-hosted faces for the hosted build (build-web.py puts this at the top of tideline.css). Latin subsets from
   Google Fonts, all SIL Open Font License. Bodoni Moda and Karla are variable, so one file covers each weight range.
   The artifact keeps the Google Fonts link in tl_css.part: its sandbox can reach Google Fonts and nothing else. */
@font-face{font-family:"Bodoni Moda"; font-style:italic; font-weight:400 500; font-display:swap; src:url(fonts/bodoni-moda-italic.woff2) format("woff2")}
@font-face{font-family:"Karla"; font-style:normal; font-weight:400 600; font-display:swap; src:url(fonts/karla.woff2) format("woff2")}
@font-face{font-family:"DM Mono"; font-style:normal; font-weight:400; font-display:swap; src:url(fonts/dm-mono-400.woff2) format("woff2")}
@font-face{font-family:"DM Mono"; font-style:normal; font-weight:500; font-display:swap; src:url(fonts/dm-mono-500.woff2) format("woff2")}
[hidden]{display:none!important}
/* Layout: a one-screen stage. A flat amber disc breathes inside hairline rings on solid ink; a borderless control column sits right. Stacks on phones. Dark only, flat: no gradients, glow or texture. */
:root{
  --bg:#12111a;
  --bg-2:#1d1a2b;
  --fg:#ece6dc;
  --fg-dim:#9a93a6;
  --line:rgba(236,230,220,.13);
  --panel:#1a1725;
  --accent:#e9c08a;
  --accent-ink:#1a1410;
  --accent-2:#c98b9a;
  --orb:#e9c08a;
  --orb-ink:#2a1d12;
  --photo:.36;
  --font-display:"Bodoni Moda",Didot,"Times New Roman",serif;
  --font-body:"Karla","Helvetica Neue",Arial,sans-serif;
  --font-mono:"DM Mono",Menlo,Consolas,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--font-body); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
/* Photos: two layers crossfading behind everything, flat colour overlay keeps the text legible */
.photos{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; background:var(--bg)}
.photos .ph{position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity 5s ease}
.photos .ph.on{opacity:var(--photo)}
.photos[hidden]{display:none}
.credit{font-family:var(--font-mono); font-size:11px; color:var(--fg-dim); letter-spacing:.04em}
.app{position:relative; z-index:1; min-height:100%; display:flex; flex-direction:column; padding-inline:clamp(16px,3vw,36px); padding-block:14px 28px; gap:14px}
.top{display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap}
.brand{display:flex; flex-direction:column; gap:8px}
.brand-name{font-family:var(--font-display); font-style:italic; font-weight:400; font-size:34px; letter-spacing:-.01em; line-height:1}
.brand-sub{color:var(--fg); font-size:13px; letter-spacing:.02em}
.status{display:flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:12px; color:var(--fg-dim); letter-spacing:.04em; text-transform:uppercase}
.status .dot{width:8px; height:8px; border-radius:50%; background:var(--fg-dim); opacity:.5; transition:background .4s, opacity .4s}
.status.live .dot{background:var(--accent); opacity:1}

.stage{display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,380px); gap:clamp(16px,3vw,40px); align-items:start; flex:1}
@media (max-width:900px){ .stage{grid-template-columns:minmax(0,1fr)} }

/* Orb */
.orb-area{display:flex; flex-direction:column; align-items:center; gap:18px; min-width:0}
.orb-wrap{position:relative; width:min(78vw,520px); aspect-ratio:1; max-width:100%; container-type:inline-size}
.ring{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
/* hairlines: stroke widths are screen pixels whatever the ring's size */
.ring .track, .ring .seg, .ring .tick, .ring .head{vector-effect:non-scaling-stroke}
.ring .track{fill:none; stroke:var(--line); stroke-width:1}
.ring .seg{fill:none; stroke-width:1.5; stroke-linecap:butt; transition:opacity .4s}
.ring .seg.inhale{stroke:var(--accent)}
.ring .seg.hold{stroke:var(--fg-dim)}
.ring .seg.exhale{stroke:var(--accent-2)}
.ring .seg.rest{stroke:var(--fg-dim); opacity:.5}
.ring .seg.off{opacity:.35}
.ring .seg.sweep{opacity:1; transition:none}
.ring .seg.sweep.hold, .ring .seg.sweep.rest{stroke:var(--fg)}
.ring .head{fill:var(--accent); stroke:var(--bg); stroke-width:2}
.ring .tick{stroke:var(--fg-dim); stroke-width:1; opacity:.7}
.halo{position:absolute; left:50%; top:50%; width:62%; aspect-ratio:1; translate:-50% -50%; border-radius:50%; pointer-events:none; will-change:transform;
  border:1px solid var(--line); transform:scale(.58)}
.halo.h3{border-color:color-mix(in srgb, var(--accent-2) 30%, var(--bg))}
.orb{
  position:absolute; left:50%; top:50%; width:62%; aspect-ratio:1; translate:-50% -50%;
  border-radius:50%; will-change:transform; background:var(--orb); transform:scale(.58);
}
.orb::after{
  content:""; position:absolute; inset:-10%; border-radius:50%; pointer-events:none;
  border:1px solid var(--accent); opacity:var(--ripple,0);
}
.readout{position:absolute; left:50%; top:50%; translate:-50% -50%; text-align:center; pointer-events:none; display:flex; flex-direction:column; align-items:center; gap:2px}
/* the orb shrinks to 36% of the wrap between breaths, so the words size to the wrap (cqi) to stay inside it */
.phase-word{font-family:var(--font-display); font-style:italic; font-weight:400; font-size:min(clamp(36px,7.5vw,62px), 9.6cqi); line-height:1; color:var(--orb-ink); letter-spacing:-.01em; transition:color .3s}
.phase-word.idle{opacity:.75}
.phase-word.small{font-size:min(32px, 5cqi); line-height:1.05; max-width:5.2em; text-wrap:balance}
.count{font-family:var(--font-mono); font-size:clamp(13px,2.4vw,17px); color:var(--orb-ink); opacity:.8; font-variant-numeric:tabular-nums; letter-spacing:.06em}
.count.idle{opacity:.55}

.begin{
  appearance:none; border:1px solid var(--accent); background:var(--accent); color:var(--accent-ink);
  font:500 14px/1 var(--font-mono); letter-spacing:.18em; text-transform:uppercase;
  padding:15px 36px; border-radius:0; cursor:pointer; transition:background .3s, color .3s;
}
.begin:hover{background:color-mix(in srgb, var(--accent) 88%, var(--fg))}
.begin.stop:hover{background:var(--panel)}
.begin:focus-visible{outline:2px solid var(--fg); outline-offset:3px}
.begin.stop{background:transparent; color:var(--accent)}

.meta{display:flex; flex-direction:column; align-items:center; gap:4px; font-family:var(--font-mono); font-size:12px; color:var(--fg); letter-spacing:.04em; font-variant-numeric:tabular-nums; text-align:center}
.meta #metaLine:empty{display:none}
/* the release number, quietly at the foot of the page */
.foot{font:400 11px/1 var(--font-mono); color:var(--fg-dim); letter-spacing:.06em; text-align:center; opacity:.7; padding-top:4px}

/* Intents */
.intents{display:flex; flex-direction:column; gap:2px}
.intent{appearance:none; display:flex; align-items:baseline; justify-content:space-between; gap:12px; text-align:left; width:100%; font:inherit;
  border:0; border-left:2px solid transparent; background:transparent; color:var(--fg); padding:9px 10px 9px 12px; border-radius:0; cursor:pointer; transition:background .2s, border-color .2s}
.intent:hover{background:var(--panel)}
.intent[aria-pressed="true"]{border-left-color:var(--accent); background:var(--panel)}
.intent:focus-visible{outline:2px solid var(--fg); outline-offset:2px}
.intent .l{font:500 14px/1.25 var(--font-body)}
.intent .m{font:400 11px/1 var(--font-mono); color:var(--fg-dim); letter-spacing:.04em; white-space:nowrap}
.intent-now{font-family:var(--font-display); font-style:italic; font-size:18px; line-height:1.35; color:var(--fg); text-align:center; text-wrap:balance; max-width:40ch}
.intent-now b{font-weight:400; color:var(--fg)}
.care{font-size:12px; color:var(--fg-dim); margin:10px 0 0; max-width:60ch}

/* Rail */
.rail{border-left:1px solid var(--line); padding:4px 18px 8px 26px; display:flex; flex-direction:column; gap:4px; min-width:0; background:color-mix(in srgb, var(--bg) 86%, transparent)}
/* Phones: the controls panel under the orb has rounded corners (the owner's choice; everything else stays square) */
@media (max-width:900px){ .rail{border-left:0; border-top:1px solid var(--line); border-radius:16px; padding:18px 14px 8px} }
.group{padding-block:12px; border-top:1px solid var(--line)}
.group:first-child{border-top:0; padding-top:4px}
.group h3{margin:0 0 10px; font:italic 400 22px/1 var(--font-display); letter-spacing:0; text-transform:none; color:var(--fg)}
.chips{display:flex; flex-wrap:wrap; gap:6px}
.chip{appearance:none; border:1px solid var(--line); background:transparent; color:var(--fg); font:500 13px/1 var(--font-body); padding:8px 12px; border-radius:0; cursor:pointer; transition:background .2s, border-color .2s, color .2s}
.chip:hover{border-color:var(--fg-dim)}
.chip[aria-pressed="true"]{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
.chip:focus-visible{outline:2px solid var(--fg); outline-offset:2px}
.row{display:grid; grid-template-columns:84px minmax(0,1fr) 46px; align-items:center; gap:10px; padding-block:5px}
.row label{font-size:13px; color:var(--fg)}
.row output{font-family:var(--font-mono); font-size:12px; color:var(--fg-dim); text-align:right; font-variant-numeric:tabular-nums}
.row select{font:inherit; font-size:13px; color:var(--fg); background:transparent; border:1px solid var(--line); border-radius:0; padding:6px 8px; min-width:0; grid-column:2 / span 2}
input[type=range]{-webkit-appearance:none; appearance:none; width:100%; height:28px; background:transparent; margin:0; min-width:0; cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:2px; background:var(--line); border-radius:2px}
input[type=range]::-moz-range-track{height:2px; background:var(--line); border-radius:2px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:16px; height:16px; border-radius:50%; background:var(--accent); margin-top:-7px; border:0}
input[type=range]::-moz-range-thumb{width:16px; height:16px; border-radius:50%; background:var(--accent); border:0}
input[type=range]:focus-visible{outline:2px solid var(--fg); outline-offset:2px; border-radius:4px}
.seg-ctl{display:inline-flex; border:1px solid var(--line); border-radius:0; overflow:hidden; grid-column:2 / span 2; justify-self:start}
.seg-ctl button{appearance:none; border:0; background:transparent; color:var(--fg-dim); font:500 12px/1 var(--font-body); padding:7px 11px; cursor:pointer}
.seg-ctl button[aria-pressed="true"]{background:var(--accent); color:var(--accent-ink)}
.seg-ctl button:focus-visible{outline:2px solid var(--fg); outline-offset:-2px}
.hint{font-size:12px; color:var(--fg-dim); margin:6px 0 0}
.group.dim{opacity:.45; pointer-events:none}


/* Desktop: the page never scrolls. The breathing view fills the space left of a full-height sidebar that scrolls on its own. */
.rail-top{position:relative; display:flex; justify-content:flex-end; gap:8px; padding-block:2px 10px}
/* how to install, where the browser has no prompt: a small note that drops below the buttons */
.install-hint{position:absolute; top:calc(100% + 6px); right:0; z-index:3; width:min(260px, calc(100vw - 32px)); margin:0; padding:10px 12px;
  font-size:12.5px; line-height:1.45; color:var(--fg); background:var(--panel); border:1px solid var(--line)}
/* Phones: the controls stack under the orb, so Fullscreen moves up to the page's top right corner, beside the title */
@media (max-width:900px){ .rail-top{position:absolute; top:14px; right:clamp(16px,3vw,36px); padding:0} }
@media (min-width:901px){
  :root{--rail-w:clamp(320px,30vw,400px)}
  html,body{overflow:hidden}
  .app{height:100vh; height:100dvh; padding-right:calc(var(--rail-w) + clamp(16px,3vw,36px))}
  .stage{grid-template-columns:minmax(0,1fr); min-height:0}
  .orb-area{height:100%; justify-content:center}
  .orb-wrap, .journey-bar{width:min(520px, 100%, calc(100dvh - 290px)); min-width:220px}
  .rail{position:fixed; top:0; right:0; bottom:0; z-index:2; width:var(--rail-w); overflow-y:auto; overscroll-behavior:contain; padding-top:14px; background:var(--bg)}
}

@media (prefers-reduced-motion: reduce){
  .orb::after, .halo{display:none}
  .photos .ph{transition:none}
}

/* Journey progress */
.journey-bar{width:min(78vw,520px); max-width:100%; display:flex; gap:3px; height:6px}
.journey-bar .js{position:relative; height:100%; background:var(--panel); min-width:0; overflow:hidden}
.journey-bar .js i{position:absolute; inset:0; width:0; background:var(--accent)}
.journey-bar .js.done i{width:100%; opacity:.45}
.journey-bar[hidden]{display:none}

/* Nature */
.nature .row{grid-template-columns:84px minmax(0,1fr) 46px}
.iconbtn{appearance:none; border:1px solid var(--line); background:transparent; color:var(--fg-dim); font:500 11px/1 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; padding:7px 10px; cursor:pointer}
.iconbtn:hover{color:var(--fg); border-color:var(--fg-dim)}
.iconbtn:focus-visible{outline:2px solid var(--fg); outline-offset:2px}
.topright{display:flex; align-items:center; gap:14px}
.home{font:400 12px/1 var(--font-mono); letter-spacing:.04em; color:var(--fg-dim); text-decoration:none}
.home:hover{color:var(--fg)}
.home:focus-visible{outline:2px solid var(--fg); outline-offset:3px}
.home::before{content:'\2190\00a0'}
.row .seg-ctl{flex-wrap:wrap}
.note{font-size:12px; color:var(--fg-dim); margin:4px 0 0}
/* The choice: one question, a length, Begin. Everything else waits in Adjust. */
.choose{display:flex; flex-direction:column; gap:4px; padding-bottom:16px}
.choose h3{margin:0 0 10px; font:italic 400 22px/1 var(--font-display); color:var(--fg)}
.lenrow{display:grid; grid-template-columns:84px minmax(0,1fr); align-items:center; gap:10px; margin-top:12px}
.lenrow .lbl{font-size:13px; color:var(--fg)}
.lenrow .chip{padding:7px 11px; font-size:12.5px; min-width:40px}
.lenrow[hidden], .wh[hidden]{display:none}
.wh{display:flex; flex-direction:column}
.wh .hint{margin-top:12px}
.safety{font-size:12.5px; line-height:1.45; color:var(--fg); margin:10px 0 0; padding:9px 12px; border-left:2px solid var(--accent-2); background:var(--panel)}
.choose .begin{margin-top:18px; width:100%}
.skip{appearance:none; border:1px solid var(--accent-2); background:var(--bg); color:var(--fg); font:500 12px/1 var(--font-mono); letter-spacing:.14em; text-transform:uppercase; padding:11px 22px; cursor:pointer}
.skip:hover{background:var(--panel)}
.skip:focus-visible{outline:2px solid var(--fg); outline-offset:3px}
.skip[hidden]{display:none}
.orb-wrap{cursor:pointer}
.adjust{border-top:1px solid var(--line)}
.adjust summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; padding:14px 0; font-size:13px; color:var(--fg-dim)}
.adjust summary::-webkit-details-marker{display:none}
.adjust summary::after{content:"+"; font:400 16px/1 var(--font-mono); color:var(--fg-dim)}
.adjust[open] summary::after{content:"\2212"}
.adjust summary:hover, .adjust[open] summary{color:var(--fg)}
.adjust summary:focus-visible{outline:2px solid var(--fg); outline-offset:2px}
.adjust > .group:first-of-type{border-top:0; padding-top:4px}
/* Tideline Pro: until the Pro script installs, a Pro section is faded and inert with one Pro chip on its heading, and a single Pro
   option in a free row is disabled and faded with a small "Pro" in it. The chip is a flat hairline box in the accent, square. */
.pro-chip{appearance:none; display:inline-block; vertical-align:middle; margin:-3px 0 0 10px; padding:4px 7px 3px; border:1px solid var(--accent); border-radius:0;
  background:transparent; color:var(--accent); font:500 10px/1 var(--font-mono); font-style:normal; letter-spacing:.14em; text-transform:uppercase; cursor:pointer}
.pro-chip:hover{background:var(--accent); color:var(--accent-ink)}
.pro-chip:focus-visible{outline:2px solid var(--fg); outline-offset:2px}
.pro-chip[hidden]{display:none}
.pro-section.pro-locked .pro-body{opacity:.32; pointer-events:none; user-select:none}
.chip.pro-locked, .seg-ctl button.pro-locked{opacity:.4; cursor:default}
.chip.pro-locked:hover{border-color:var(--line)}
.pro-mark{margin-left:6px; font:500 9px/1 var(--font-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--accent)}
.pro-line{margin:4px 0 8px; padding-left:10px; border-left:1px solid var(--accent); font-size:12px; line-height:1.45; color:var(--fg)}
.pro-line a{color:var(--accent); text-underline-offset:2px}
.foot a{color:inherit; text-decoration:none}
.foot a:hover{color:var(--fg)}
.intent-now a{color:var(--accent)}