/* 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}
.brand-sub i{font-family:var(--font-display); font-size:16px; letter-spacing:0}
.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:4px}
.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)}
/* presets of your own: listed under the six, named and deleted in their group under Adjust */
.own-row{display:flex; gap:8px; align-items:center; padding-block:4px}
.own-row input[type=text]{flex:1; min-width:0; font:inherit; font-size:13px; color:var(--fg); background:transparent; border:1px solid var(--line); border-radius:0; padding:7px 8px}
.own-row input[type=text]:focus-visible{outline:2px solid var(--fg); outline-offset:2px}
.own-row .chip{white-space:nowrap; padding:7px 11px; font-size:12.5px}
.own-row .chip.armed{border-color:var(--accent); color:var(--accent)}
.own-row .chip:disabled{opacity:.4; cursor:default}
.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. */
/* The panel's top row, on phones too: the site's links on the left (About, Upgrade), the icon buttons on the right (Install,
   Fullscreen, account). Only a rail too narrow for both drops the links to a line of their own under the buttons (wrap-reverse).
   With nothing to show (the artifact on an iPhone, which has no fullscreen) the row takes no room. */
.rail-top{display:flex; flex-wrap:wrap-reverse; align-items:center; gap:10px 8px; padding-block:2px 14px}
.rail-btns{position:relative; display:flex; gap:6px; margin-left:auto}
/* the site's links as buttons: the same hairline box as the icons. The one to the Pro page looks like About until hovered, when it
   turns amber (the owner found amber at rest too strong beside About) */
.sitelinks{display:flex; flex-wrap:wrap; align-items:center; gap:6px; min-width:0}
.sitelinks[hidden]{display:none}
.sitelinks a{display:inline-flex; align-items:center; height:27px; padding:0 7px; border:1px solid var(--line); font:500 11px/1 var(--font-mono);
  letter-spacing:.03em; text-transform:uppercase; white-space:nowrap; color:var(--fg-dim); text-decoration:none}
.sitelinks a:hover{color:var(--fg); border-color:var(--fg-dim)}
.sitelinks a.pro:hover{color:var(--accent); border-color:var(--accent)}
.sitelinks a:focus-visible{outline:2px solid var(--fg); outline-offset:2px}
/* Install, Fullscreen and the account link: a glyph in a hairline square, its name in a flat tooltip on hover and focus */
.iconbtn.icon{display:inline-flex; align-items:center; justify-content:center; width:27px; height:27px; padding:0; text-decoration:none}
.iconbtn.icon[hidden]{display:none}
.iconbtn.icon svg{width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.25}
.tip{position:relative}
.tip::after{content:attr(data-tip); position:absolute; top:calc(100% + 6px); right:0; z-index:3; padding:6px 8px; white-space:nowrap;
  font:400 11px/1 var(--font-mono); letter-spacing:.04em; text-transform:none; color:var(--fg); background:var(--panel); border:1px solid var(--line);
  opacity:0; pointer-events:none; transition:opacity .15s}
.tip:hover::after, .tip:focus-visible::after{opacity:1}
.tip[aria-expanded="true"]::after{display:none}
#fsBtn .fs-out, .is-fs #fsBtn .fs-in{display:none}
.is-fs #fsBtn .fs-out{display:inline}
/* 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)}
.rail-top:not(:has(.sitelinks:not([hidden]), .iconbtn:not([hidden])))){display:none}
/* with the site's links in it, the row is the panel's nav: a hairline and room below set it apart from the question */
.rail-top:has(.sitelinks:not([hidden])){border-bottom:1px solid var(--line); padding-bottom:16px; margin-bottom:14px}
@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}
.topright{flex-wrap:wrap; justify-content:flex-end; row-gap:8px}
.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:6px 0 18px; font:italic 400 22px/1 var(--font-display); color:var(--fg)}
.choose h3.own-head{margin:18px 0 10px; font-size:17px}
.lenrow{display:grid; grid-template-columns:84px minmax(0,1fr); align-items:center; gap:10px; margin-top:20px}
.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}
/* the history line's two answers read as links */
.pro-line button{appearance:none; border:0; padding:0; background:none; font:inherit; color:var(--accent); text-decoration:underline; text-underline-offset:2px; cursor:pointer}
.pro-line button:focus-visible{outline:2px solid var(--fg); outline-offset:2px}
.history-line{margin:0 0 14px}
/* open on your phone: a flat box under the buttons, like the install note. The code keeps dark on light (phone cameras want it),
   on a square of the text colour; it fades as the Pro marks do once it has expired */
.phone-pop{position:absolute; top:calc(100% + 6px); right:0; z-index:3; width:224px; padding:14px; background:var(--panel); border:1px solid var(--line)}
.phone-pop[hidden]{display:none}
.phone-code{width:168px; height:168px; margin:0 auto 12px; background:var(--fg); transition:opacity .3s}
.phone-code svg{display:block; width:100%; height:100%}
.phone-code.expired{opacity:.25}
.phone-text{margin:0; font-size:12.5px; line-height:1.45; color:var(--fg)}
.phone-meta{margin:8px 0 0; font:400 11px/1.3 var(--font-mono); letter-spacing:.04em; color:var(--fg-dim); overflow-wrap:anywhere}
.phone-retry{appearance:none; margin-top:10px; height:27px; padding:0 8px; border:1px solid var(--line); background:transparent; color:var(--fg);
  font:500 11px/1 var(--font-mono); letter-spacing:.03em; text-transform:uppercase; cursor:pointer}
.phone-retry:hover{border-color:var(--fg-dim)}
.phone-retry:focus-visible{outline:2px solid var(--fg); outline-offset:2px}
.foot a{color:inherit; text-decoration:none}
.foot a:hover{color:var(--fg)}
.intent-now a{color:var(--accent)}