/* ============ LAMPLIGHT TOKEN SYSTEM ============ */
  :root{
    --serif: Charter, 'Iowan Old Style', Georgia, 'Times New Roman', serif;
    --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --radius: 14px;
    --maxw: 42rem;
  }
  [data-theme="night"]{
    --bg:#252422; --surface:#2D2C29; --surface2:#353330; --ink:#FFFCF2;
    --muted:#CCC5B9; --faint:#8E897F; --accent:#EB5E28; --accent-ink:#252422;
    --btn-bg:#EB5E28; --btn-ink:#252422;
    --wave:#CCC5B9; --wave-deep:#7B766D; --line:#403D39; --danger:#F0793F;
    --shadow: 0 10px 30px rgba(0,0,0,.35);
  }
  [data-theme="day"]{
    --bg:#FFFCF2; --surface:#FFFEF9; --surface2:#EAE4D8; --ink:#252422;
    --muted:#6C6862; --faint:#A29B90; --accent:#C24818; --accent-ink:#FFFCF2;
    --btn-bg:#EB5E28; --btn-ink:#252422;
    --wave:#8B857A; --wave-deep:#6C665C; --line:#DAD3C6; --danger:#B5430F;
    --shadow: 0 10px 30px rgba(64,61,57,.14);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--bg); color:var(--ink); font-family:var(--serif);
    font-size:1.09rem; line-height:1.72; transition:background .4s, color .4s;
    -webkit-font-smoothing:antialiased;
  }
  ::selection{background:var(--accent); color:var(--accent-ink);}
  :focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px;}
  button{font-family:var(--sans); cursor:pointer;}

  /* ============ SERIES BANNER ============ */
  .series-banner{
    background:var(--surface2); border-bottom:1px solid var(--line);
    padding:.6rem 1rem; font-family:var(--sans); font-size:.85rem; color:var(--muted);
    display:flex; justify-content:center; align-items:center; gap:.75rem; text-align:center;
  }
  .series-banner a{color:var(--accent); font-weight:600; text-decoration:none;}
  .series-banner a:hover{text-decoration:underline;}
  .series-banner button{
    background:none; border:none; color:var(--faint); font-size:1.1rem; line-height:1;
    padding:.2rem .4rem; border-radius:6px;
  }

  /* ============ HEADER ============ */
  header.site{
    max-width:var(--maxw); margin:0 auto; padding:1.1rem 1.25rem .4rem;
    display:flex; justify-content:space-between; align-items:center;
  }
  .wordmark{font-family:var(--mono); font-size:.78rem; letter-spacing:.18em; color:var(--muted); text-transform:uppercase;}
  .lamp-toggle{
    background:var(--surface); border:1px solid var(--line); color:var(--ink);
    width:44px; height:44px; border-radius:50%; font-size:1.05rem;
    display:grid; place-items:center; transition:transform .2s;
  }
  .lamp-toggle:hover{transform:translateY(-1px);}

  /* ============ DAY GAUGE ============ */
  .day-gauge{max-width:var(--maxw); margin:1.4rem auto 0; padding:0 1.25rem;}
  .day-label{font-family:var(--mono); font-size:.75rem; letter-spacing:.22em; color:var(--accent); text-transform:uppercase;}
  .ticks{display:flex; gap:4px; margin-top:.55rem; align-items:flex-end;}
  .tick{width:5px; height:14px; border-radius:2px; background:var(--line); flex:1; max-width:14px;}
  .tick.read{background:var(--accent); height:18px;}
  .tick.today{background:var(--accent); height:22px; box-shadow:0 0 0 2px var(--bg), 0 0 0 3px var(--accent);}
  .gauge-note{font-family:var(--sans); font-size:.74rem; color:var(--faint); margin-top:.5rem;}

  /* ============ ARTICLE ============ */
  main{max-width:var(--maxw); margin:0 auto; padding:0 1.25rem 6rem;}
  h1{
    font-size:clamp(1.75rem, 5.2vw, 2.45rem); line-height:1.22; font-weight:700;
    letter-spacing:-.015em; margin:1.1rem 0 1.4rem;
  }
  h1 .daypart{color:var(--accent);}
  .bridge{
    font-style:italic; color:var(--muted); border-left:3px solid var(--accent);
    padding:.15rem 0 .15rem 1.1rem; margin:0 0 2.2rem;
  }
  .scene-time{font-family:var(--mono); font-size:.8rem; letter-spacing:.2em; color:var(--faint); display:block; margin-bottom:.5rem;}
  p{margin:0 0 1.15rem;}
  strong{font-weight:700;}
  em{font-style:italic;}

  .eyebrow{
    font-family:var(--mono); font-size:.72rem; letter-spacing:.24em; text-transform:uppercase;
    color:var(--accent); display:block; margin:2.8rem 0 .4rem;
  }
  h2{font-size:1.42rem; line-height:1.3; margin:0 0 1rem; letter-spacing:-.01em;}
  .divider{
    text-align:center; color:var(--faint); font-size:1rem; letter-spacing:.6em;
    margin:2.6rem 0 0; user-select:none;
  }

  /* ============ SCIENCE EXPANDER ============ */
  details.science{
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
    margin:1.3rem 0 1.6rem; overflow:hidden;
  }
  details.science summary{
    list-style:none; cursor:pointer; padding:.85rem 1.1rem;
    font-family:var(--sans); font-size:.88rem; font-weight:600; color:var(--muted);
    display:flex; align-items:center; gap:.6rem;
  }
  details.science summary::-webkit-details-marker{display:none;}
  details.science summary::before{content:"+"; font-family:var(--mono); color:var(--accent); font-size:1rem; width:1rem;}
  details.science[open] summary::before{content:"–";}
  details.science[open] summary{border-bottom:1px solid var(--line);}
  details.science .inner{padding:1rem 1.15rem .4rem; font-size:.98rem; color:var(--muted);}
  details.science .inner p{margin-bottom:.9rem;}
  details.science .inner strong{color:var(--ink);}

  /* ============ PATH TOGGLE ============ */
  .path-card{
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
    padding:1.15rem 1.2rem 1.25rem; margin:2rem 0 .5rem;
  }
  .path-card .q{font-family:var(--sans); font-size:.92rem; color:var(--muted); margin-bottom:.8rem;}
  .segmented{display:flex; background:var(--surface2); border:1px solid var(--line); border-radius:999px; padding:4px; gap:4px;}
  .segmented button{
    flex:1; border:none; background:transparent; color:var(--muted); border-radius:999px;
    padding:.65rem .5rem; font-size:.92rem; font-weight:600; transition:all .2s; min-height:44px;
  }
  .segmented button[aria-pressed="true"]{background:var(--accent); color:var(--accent-ink);}

  /* ============ LEDGER ============ */
  .ledger{display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin:1.2rem 0 .3rem;}
  @media(max-width:600px){.ledger{grid-template-columns:1fr;}}
  .ledger-col{
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
    padding:1.15rem 1.2rem; transition:opacity .3s, border-color .3s;
  }
  .ledger-col h3{font-family:var(--sans); font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin-bottom:.7rem;}
  .ledger-col p{font-size:.99rem; margin-bottom:.85rem;}
  .ledger-col p:last-child{margin-bottom:0;}
  .ledger.chosen .ledger-col{opacity:.45;}
  .ledger.chosen .ledger-col.active{opacity:1; border-color:var(--accent);}
  .ledger-foot{font-family:var(--sans); font-size:.78rem; color:var(--faint); margin-bottom:1rem;}

  /* ============ SAFETY ============ */
  .safety{
    border:1px solid var(--danger); border-radius:var(--radius);
    padding:1.15rem 1.25rem; margin:2.4rem 0; background:var(--surface);
  }
  .safety h3{font-family:var(--sans); font-size:.82rem; letter-spacing:.16em; text-transform:uppercase; color:var(--danger); margin-bottom:.6rem;}
  .safety p{font-size:.97rem; margin-bottom:.8rem;} .safety p:last-child{margin-bottom:0;}

  /* ============ EXERCISE ============ */
  .exercise{
    background:var(--surface); border:1px solid var(--accent); border-radius:var(--radius);
    padding:1.4rem 1.35rem; margin:1.2rem 0 .5rem;
  }
  .exercise .lead{font-size:1rem; margin-bottom:1.1rem;}
  .ifthen{display:flex; flex-direction:column; gap:.8rem; font-family:var(--sans);}
  .ifthen label{font-size:.8rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--accent);}
  .ifthen input{
    width:100%; background:var(--surface2); border:1px solid var(--line); border-radius:10px;
    padding:.8rem .9rem; color:var(--ink); font-family:var(--serif); font-size:1rem;
  }
  .ifthen input::placeholder{color:var(--faint); font-style:italic;}
  .btn{
    background:var(--btn-bg); color:var(--btn-ink); border:none; border-radius:999px;
    padding:.85rem 1.5rem; font-size:.95rem; font-weight:700; min-height:48px;
    transition:transform .15s, filter .2s;
  }
  .btn:hover{transform:translateY(-1px); filter:brightness(1.05);}
  .btn.ghost{background:transparent; color:var(--ink); border:1px solid var(--line);}
  .btn.subtle{background:var(--surface2); color:var(--ink);}
  .plan-set{display:none; margin-top:1.1rem; font-size:1rem;}
  .plan-set .sentence{font-style:italic; color:var(--accent); margin:.4rem 0 .6rem;}
  .plan-set .note{font-family:var(--sans); font-size:.78rem; color:var(--faint);}
  .exercise.done .ifthen, .exercise.done #setPlanBtn{display:none;}
  .exercise.done .plan-set{display:block;}

  /* ============ CHEAT SHEET ============ */
  .cheat{width:100%; border-collapse:collapse; margin:1.2rem 0 .4rem; font-size:.92rem; font-family:var(--sans);}
  .cheat th{
    text-align:left; font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
    color:var(--accent); padding:.6rem .7rem; border-bottom:2px solid var(--accent);
  }
  .cheat td{padding:.75rem .7rem; border-bottom:1px solid var(--line); vertical-align:top; line-height:1.5;}
  .cheat td:first-child{font-family:var(--serif); font-style:italic; color:var(--ink);}
  @media(max-width:640px){
    .cheat thead{display:none;}
    .cheat, .cheat tbody, .cheat tr, .cheat td{display:block; width:100%;}
    .cheat tr{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); margin-bottom:.9rem; padding:.5rem .9rem .8rem;}
    .cheat td{border:none; padding:.45rem 0;}
    .cheat td::before{
      content:attr(data-label); display:block; font-family:var(--mono); font-size:.64rem;
      letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin-bottom:.15rem;
    }
  }

  /* ============ SIX LINES ============ */
  .lines{display:flex; flex-direction:column; gap:.8rem; margin:1.2rem 0 .4rem; counter-reset:line;}
  .line-card{
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
    padding:1rem 1.1rem; display:flex; gap:.9rem; align-items:flex-start; counter-increment:line;
  }
  .line-card::before{
    content:counter(line); font-family:var(--mono); color:var(--accent); font-size:.85rem;
    border:1px solid var(--accent); border-radius:50%; width:1.7rem; height:1.7rem; flex:0 0 auto;
    display:grid; place-items:center; margin-top:.15rem;
  }
  .line-card p{margin:0; font-size:1rem; flex:1;}
  .save-line{
    background:none; border:none; color:var(--faint); font-size:1.25rem; padding:.2rem .3rem;
    border-radius:8px; transition:color .2s, transform .15s; flex:0 0 auto;
  }
  .save-line:hover{transform:scale(1.12);}
  .save-line[aria-pressed="true"]{color:var(--accent);}

  /* ============ TAKEAWAY / SOURCES / TEASER ============ */
  .takeaway{
    font-weight:700; font-size:1.18rem; line-height:1.55; margin:2.6rem 0;
    padding:1.3rem 1.35rem; border-radius:var(--radius);
    background:var(--surface); border-left:4px solid var(--accent);
  }
  .sources{font-style:italic; font-size:.92rem; color:var(--muted); margin:2.2rem 0;}
  .teaser{
    text-align:center; margin:3rem 0 1rem; padding:1.8rem 1.2rem;
    border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  }
  .teaser .tom{font-family:var(--mono); font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--faint); margin-bottom:.5rem;}
  .teaser .tt{font-size:1.15rem; font-weight:700; margin-bottom:.35rem;}
  .teaser .th{font-style:italic; color:var(--muted); font-size:.98rem;}
  .daynav{display:flex; justify-content:space-between; gap:1rem; margin:1.6rem 0 0; font-family:var(--sans);}
  .daynav a{
    color:var(--muted); text-decoration:none; font-size:.9rem; padding:.7rem 1rem;
    border:1px solid var(--line); border-radius:999px; transition:color .2s, border-color .2s;
  }
  .daynav a:hover{color:var(--accent); border-color:var(--accent);}
  footer.site{
    max-width:var(--maxw); margin:0 auto; padding:0 1.25rem 7rem;
    font-family:var(--sans); font-size:.8rem; color:var(--faint); text-align:center; line-height:1.7;
  }

  /* ============ HARD DAY BUTTON ============ */
  .hardday-fab{
    position:fixed; right:1.1rem; bottom:1.1rem; z-index:60;
    background:var(--btn-bg); color:var(--btn-ink); border:none; border-radius:999px;
    padding:.95rem 1.5rem; font-size:1rem; font-weight:700; box-shadow:var(--shadow);
    display:flex; align-items:center; gap:.5rem; min-height:52px;
    transition:transform .2s;
  }
  .hardday-fab:hover{transform:translateY(-2px);}
  .hardday-fab .ring{font-size:1.1rem;}

  /* ============ OVERLAY ============ */
  .overlay{
    position:fixed; inset:0; z-index:100; background:#1F1E1C; color:#FFFCF2;
    display:none; overflow-y:auto;
  }
  .overlay.open{display:block;}
  .ov-inner{max-width:34rem; margin:0 auto; padding:2rem 1.4rem 3rem; min-height:100%;
    display:flex; flex-direction:column; justify-content:center;}
  .ov-close{
    position:fixed; top:1rem; right:1.1rem; background:rgba(255,255,255,.06);
    border:1px solid #403D39; color:#A8A297; border-radius:999px; padding:.55rem 1.1rem;
    font-size:.88rem; z-index:110;
  }
  .ov-screen{display:none; animation:fadeUp .5s ease both;}
  .ov-screen.on{display:block;}
  @keyframes fadeUp{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;}}
  .ov-kicker{font-family:var(--mono); font-size:.72rem; letter-spacing:.26em; text-transform:uppercase; color:#EB5E28; margin-bottom:.9rem;}
  .ov-title{font-family:var(--serif); font-size:1.7rem; line-height:1.3; margin-bottom:.8rem;}
  .ov-sub{color:#A8A297; font-family:var(--serif); font-size:1.05rem; line-height:1.65; margin-bottom:1.8rem;}
  .ov-choices{display:flex; flex-direction:column; gap:.9rem; margin-bottom:2rem;}
  .ov-choice{
    text-align:left; background:#2D2C29; border:1px solid #403D39; color:#FFFCF2;
    border-radius:16px; padding:1.15rem 1.25rem; font-size:1.02rem; transition:border-color .2s, transform .15s;
  }
  .ov-choice:hover{border-color:#EB5E28; transform:translateY(-1px);}
  .ov-choice .big{display:block; font-family:var(--serif); font-size:1.12rem; font-weight:700; margin-bottom:.25rem;}
  .ov-choice .small{display:block; font-size:.85rem; color:#A8A297;}
  .ov-safety{font-size:.82rem; color:#8E897F; line-height:1.6; border-top:1px solid #403D39; padding-top:1.1rem;}
  .ov-safety strong{color:#F0793F;}

  /* wave screen */
  .wave-stage{text-align:center;}
  .timer{
    font-family:var(--mono); font-size:clamp(3.2rem, 13vw, 4.6rem); font-weight:500;
    letter-spacing:.04em; font-variant-numeric:tabular-nums; margin:0 0 .2rem;
  }
  .wave-phase{font-family:var(--mono); font-size:.72rem; letter-spacing:.26em; text-transform:uppercase; color:#CCC5B9; min-height:1.2rem; margin-bottom:1.2rem;}
  .sea-wrap{position:relative; height:130px; overflow:hidden; margin:0 -1.4rem 1.6rem;}
  .sea{position:absolute; inset:auto 0 0 0; height:130px; transform-origin:center bottom; transition:transform 1.5s ease;}
  .sea svg{position:absolute; bottom:0; left:0; height:130px; width:200%;}
  .sea .w1{animation:drift 16s linear infinite; opacity:.9;}
  .sea .w2{animation:drift 26s linear infinite reverse; opacity:.45;}
  @keyframes drift{to{transform:translateX(-50%);}}
  .instruction{
    font-family:var(--serif); font-size:1.28rem; line-height:1.6; min-height:5.4rem;
    max-width:26rem; margin:0 auto 1.4rem; transition:opacity .6s;
  }
  .instruction.fade{opacity:0;}
  .breath{display:flex; align-items:center; justify-content:center; gap:.8rem; margin-bottom:2rem; color:#8E897F; font-family:var(--sans); font-size:.84rem;}
  .breath .dot{
    width:14px; height:14px; border-radius:50%; background:#CCC5B9;
    animation:breathe 10s ease-in-out infinite;
  }
  @keyframes breathe{0%{transform:scale(1);} 40%{transform:scale(1.9);} 100%{transform:scale(1);}}
  .ov-actions{display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap;}

  /* wave end + log */
  .wave-end{display:none;}
  .wave-stage.finished .wave-live{display:none;}
  .wave-stage.finished .wave-end{display:block; animation:fadeUp .6s ease both;}
  .log-chips{display:flex; gap:.7rem; justify-content:center; margin:1.1rem 0 1.6rem; flex-wrap:wrap;}
  .chip{
    background:#2D2C29; border:1px solid #403D39; color:#FFFCF2; border-radius:999px;
    padding:.7rem 1.3rem; font-size:.95rem; min-height:44px; transition:border-color .2s;
  }
  .chip:hover{border-color:#EB5E28;}
  .log-done{display:none; color:#EB5E28; font-family:var(--serif); font-size:1.05rem; font-style:italic; margin-bottom:1.4rem;}

  /* words screen */
  .words p{font-family:var(--serif); font-size:1.12rem; line-height:1.75; margin-bottom:1.3rem;}
  .words p strong{color:#EB5E28;}
  .words .crisis{font-size:.9rem; color:#A8A297; border-top:1px solid #403D39; padding-top:1.2rem; margin-top:1.8rem;}

  /* ============ BURGER + DRAWER ============ */
  .burger{
    position:relative; background:var(--surface); border:1px solid var(--line); color:var(--ink);
    width:44px; height:44px; border-radius:12px; display:grid; place-items:center; font-size:1.05rem;
  }
  .burger .badge{
    position:absolute; top:-6px; right:-6px; background:var(--btn-bg); color:var(--btn-ink);
    font-family:var(--sans); font-size:.66rem; font-weight:700; border-radius:999px;
    min-width:18px; height:18px; display:grid; place-items:center; padding:0 4px;
    opacity:0; transform:scale(.5); transition:opacity .25s, transform .25s;
  }
  .burger .badge.show{opacity:1; transform:none;}
  .scrim{
    position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:90;
    opacity:0; pointer-events:none; transition:opacity .3s;
  }
  .scrim.show{opacity:1; pointer-events:auto;}
  .drawer{
    position:fixed; top:0; bottom:0; left:0; width:min(86vw, 360px);
    background:var(--surface); border-right:1px solid var(--line); z-index:95;
    transform:translateX(-102%); transition:transform .32s ease;
    display:flex; flex-direction:column; box-shadow:var(--shadow);
  }
  .drawer.open{transform:none;}
  .drawer-head{display:flex; justify-content:space-between; align-items:center; padding:1rem 1.1rem; border-bottom:1px solid var(--line);}
  .drawer-close{background:none; border:none; color:var(--faint); font-size:1.35rem; line-height:1; padding:.3rem .55rem; border-radius:8px;}
  .drawer-tabs{display:flex; padding:.4rem 1rem 0; gap:.4rem;}
  .drawer-tabs button{
    flex:1; background:transparent; border:none; border-bottom:2px solid var(--line);
    padding:.75rem .3rem; font-family:var(--sans); font-size:.86rem; font-weight:600;
    color:var(--muted); min-height:44px;
  }
  .drawer-tabs button[aria-selected="true"]{color:var(--accent); border-bottom-color:var(--accent);}
  .drawer-body{overflow-y:auto; padding:1.2rem 1.1rem 2.5rem; flex:1;}
  .pk-sec{margin-bottom:1.7rem;}
  .pk-sec h4{font-family:var(--mono); font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); margin-bottom:.6rem;}
  .pk-empty{font-family:var(--sans); font-size:.85rem; line-height:1.6; color:var(--faint);}
  .linkish{background:none; border:none; color:var(--accent); font-family:var(--sans); font-size:.85rem; font-weight:700; padding:0; text-decoration:underline; text-underline-offset:3px;}
  .pk-item{
    background:var(--surface2); border:1px solid var(--line); border-radius:10px;
    padding:.7rem .8rem; font-family:var(--serif); font-size:.88rem; line-height:1.55; color:var(--ink);
    display:flex; gap:.6rem; align-items:flex-start; margin-bottom:.55rem;
  }
  .pk-item .tag{
    font-family:var(--mono); font-size:.62rem; color:var(--accent);
    border:1px solid var(--line); border-radius:6px; padding:.16rem .38rem; flex:0 0 auto; margin-top:.12rem;
  }
  .pk-item .tx{flex:1;}
  .pk-item .rm{background:none; border:none; color:var(--faint); font-size:1.05rem; padding:0 .2rem; line-height:1;}
  .pk-stat{font-family:var(--sans); font-size:.82rem; color:var(--muted);}
  .ticks.mini .tick{height:9px; max-width:10px;}
  .ticks.mini .tick.read{height:12px;}
  .ticks.mini .tick.today{height:15px;}
  .part-h{margin:1.4rem 0 .4rem;}
  .part-h:first-child{margin-top:.2rem;}
  .part-h .pt{font-family:var(--mono); font-size:.64rem; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); display:block;}
  .part-h .ps{font-family:var(--sans); font-size:.76rem; color:var(--faint);}
  .day-row{
    display:flex; gap:.7rem; align-items:baseline; width:100%; text-align:left;
    background:none; border:none; border-left:2px solid transparent;
    padding:.55rem .6rem; border-radius:0 8px 8px 0; color:var(--muted);
    font-family:var(--sans); font-size:.84rem; line-height:1.45; transition:background .15s;
  }
  .day-row:hover{background:var(--surface2); color:var(--ink);}
  .day-row .n{font-family:var(--mono); font-size:.7rem; color:var(--faint); width:1.5rem; flex:0 0 auto;}
  .day-row.read{color:var(--ink);}
  .day-row.read .n{color:var(--accent);}
  .day-row.today{border-left-color:var(--accent); color:var(--ink); font-weight:700; background:var(--surface2);}
  .day-row.future{opacity:.55;}

  /* ============ TOAST ============ */
  .toast{
    position:fixed; left:50%; bottom:5.6rem; transform:translateX(-50%) translateY(20px);
    background:var(--surface); color:var(--ink); border:1px solid var(--accent);
    border-radius:999px; padding:.7rem 1.3rem; font-family:var(--sans); font-size:.88rem;
    opacity:0; pointer-events:none; transition:opacity .3s, transform .3s; z-index:90;
    box-shadow:var(--shadow); white-space:nowrap;
  }
  .toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

  @media (prefers-reduced-motion: reduce){
    .sea .w1, .sea .w2, .breath .dot{animation:none;}
    .sea, .drawer, .scrim, .burger .badge{transition:none;}
    *{scroll-behavior:auto;}
  }


  /* ============ PATH CHOOSER + DRAWER PATH ============ */
  /* Written for the chooser, the ledger foot and the drawer's path setting.
     They belong beside the .path-card / .segmented / .drawer rules that live
     above line 407, but that prefix is the untouched prototype CSS and cannot
     take an insertion (see preflight's CSS_PREFIX check), so they are appended
     here instead. Nothing they set is contested: each selector either is unique
     or outranks the shorter rule above it (.ledger-foot .linkish over .linkish,
     .segmented.small button over .segmented button, .path-card.confirm over
     .path-card), so the cascade reads the same from down here. */
  /* The chooser and the Day-30 confirm both answer in place - no toast, which
     the drawer would cover anyway. */
  .path-set{
    font-family:var(--sans); font-size:.86rem; color:var(--accent);
    margin:.85rem 0 0; animation:fadeUp .4s ease both;
  }
  .path-then{font-family:var(--sans); font-size:.86rem; color:var(--ink); margin-bottom:.8rem;}
  .path-card.confirm{border-color:var(--accent); margin-top:1.4rem;}
  .ledger-foot .linkish{font-size:inherit; font-weight:600;}
  /* The path lives here, above the tabs: it is a setting, not one of the
     saved things the pocket tab lists. */
  .drawer-path{padding:1rem 1.1rem .2rem;}
  .dp-label{
    display:block; font-family:var(--mono); font-size:.66rem; letter-spacing:.22em;
    text-transform:uppercase; color:var(--accent); margin-bottom:.5rem;
  }
  .segmented.small button{padding:.5rem .4rem; font-size:.84rem;}
  .dp-note{font-family:var(--sans); font-size:.74rem; color:var(--faint); margin:.5rem 0 0;}
  /* ============ HOMEPAGE ============ */
  body.home main{max-width:62rem; padding-bottom:2.5rem;}
  body.home .home-sec, body.home .hero, body.home .safety{max-width:var(--maxw); margin-left:auto; margin-right:auto;}
  .home-sec{margin:0 0 1rem;}
  .home-sec > .eyebrow{margin-top:3.4rem;}
  .sec-sub{color:var(--muted); font-size:1.02rem;}

  /* hero */
  .hero{padding:2.6rem 0 1rem;}
  .hero .kicker{
    font-family:var(--mono); font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
    color:var(--accent); display:block; margin-bottom:1.2rem;
  }
  .hero h1{font-size:clamp(2rem, 6.2vw, 3rem); line-height:1.15; letter-spacing:-.02em; margin:0 0 1.3rem;}
  .hero .sub{font-size:1.12rem; color:var(--muted); margin-bottom:1.4rem;}
  .hero .trust{
    font-family:var(--mono); font-size:.71rem; letter-spacing:.1em; color:var(--faint);
    margin-bottom:1.9rem; line-height:1.9;
  }
  .hero-actions{display:flex; gap:.8rem; flex-wrap:wrap; align-items:center;}
  .btn.big{padding:1rem 1.6rem; font-size:1rem; text-decoration:none; display:inline-flex; align-items:center; gap:.5rem;}
  a.btn.big{color:var(--btn-ink);}
  a.btn.big.ghost, .btn.ghost.big{color:var(--ink);}
  .hero-progress{margin-top:1.8rem;}
  .hero-progress[hidden]{display:none;}
  .hero-progress-note{font-family:var(--sans); font-size:.78rem; color:var(--faint); margin:.6rem 0 0;}
  .hero-progress-note a{color:var(--accent);}

  /* how a day works */
  .how-grid{display:grid; grid-template-columns:1fr 15rem; gap:2rem; align-items:start; margin-top:.6rem;}
  .how-points p{font-size:1.02rem;}
  .daycard-mock{
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
    padding:1.1rem 1.1rem 1.3rem; display:flex; flex-direction:column; gap:.55rem; color:var(--wave);
  }
  .daycard-mock .m-eyebrow{
    font-family:var(--mono); font-size:.58rem; letter-spacing:.2em; text-transform:uppercase; color:var(--accent);
  }
  .daycard-mock .m-title{height:11px; border-radius:3px; background:var(--muted); opacity:.85; width:82%;}
  .daycard-mock .m-line{height:6px; border-radius:3px; background:var(--line); width:100%;}
  .daycard-mock .m-line.short{width:58%;}
  .daycard-mock .m-wave{width:100%; height:34px; margin:.3rem 0; opacity:.75;}
  .daycard-mock .m-take{height:22px; border-radius:5px; background:var(--surface2); border-left:3px solid var(--accent);}

  /* the map */
  .map-grid{
    display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
    gap:.4rem 2.4rem; margin-top:1rem;
  }
  .map-grid .part-h{margin:1.5rem 0 .5rem;}
  .map-grid .day-row{text-decoration:none;}
  .map-grid span.day-row{cursor:default;}
  .map-grid a.day-row:hover{background:var(--surface2); color:var(--ink);}

  /* the pocket */
  .pocket-grid{display:grid; grid-template-columns:1fr 17rem; gap:2rem; align-items:start; margin-top:.4rem;}
  .pocket-mock{
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1rem 1rem .6rem;
  }
  .pocket-mock .pm-head{
    font-family:var(--mono); font-size:.62rem; letter-spacing:.22em; text-transform:uppercase;
    color:var(--accent); display:block; margin-bottom:.7rem;
  }

  /* the names */
  .names{
    font-family:var(--mono); font-size:.76rem; line-height:2.1; color:var(--muted);
    margin:1.1rem 0 .4rem; word-spacing:.06em;
  }
  .names .sep{color:var(--faint); padding:0 .12rem;}

  @media(max-width:820px){
    .how-grid, .pocket-grid{grid-template-columns:1fr;}
    .daycard-mock, .pocket-mock{max-width:20rem;}
    .map-grid{grid-template-columns:1fr; gap:0;}
  }

  /* ============ COMPANION PAGE (and about / privacy, body.page) ============ */
  /* No day gauge sits above the title here, so the page finds its own top.
     about and privacy are the same shape - a titled page with no series
     furniture - so they share these rules rather than copying them. */
  body.companion main, body.page main{padding-top:1.5rem;}

  /* The day pages the prototype defined use no lists; the companion is mostly
     built of them. Numbers in the accent, so a step reads as a step. */
  main ol, main ul{margin:1.2rem 0 1.7rem; padding-left:1.6rem;}
  main li{margin-bottom:.85rem; padding-left:.3rem;}
  main li:last-child{margin-bottom:0;}
  main li::marker{color:var(--accent); font-family:var(--mono); font-size:.88em;}

  /* Part headings inside a companion section. Scoped to direct children of
     main: this rule outranks .safety h3 and .ledger-col h3, so it must never
     be allowed to reach inside those blocks. */
  body.companion main > h3, body.page main > h3{
    font-family:var(--sans); font-size:.8rem; letter-spacing:.16em; text-transform:uppercase;
    color:var(--muted); margin:2.4rem 0 1rem; padding-bottom:.5rem;
    border-bottom:1px solid var(--line);
  }

  /* ============ POCKET PAGE ============ */
  /* Card furniture: in the markup on every visit, on the paper only. */
  .print-only{display:none;}

  body.pocket main{padding-top:1.5rem;}
  body.pocket .pk-sec{margin-bottom:2.4rem;}
  body.pocket .pk-sec h4{font-size:.72rem; margin-bottom:.8rem;}
  body.pocket .pk-item{font-size:1rem; padding:.85rem 1rem; margin-bottom:.7rem;}
  body.pocket .pk-empty{font-size:.95rem;}
  body.pocket .ticks{margin-top:0;}
  .pk-print-note{font-family:var(--sans); font-size:.82rem; color:var(--faint); margin:.8rem 0 0; line-height:1.65;}

  /* Erase: quiet, at the foot, and never one tap from gone. */
  .pk-danger{border-top:1px solid var(--line); margin-top:2.8rem; padding-top:1.4rem;}
  .pk-confirm{display:flex; gap:.7rem; flex-wrap:wrap; align-items:center; margin-top:.9rem;}
  .pk-confirm[hidden]{display:none;}
  .pk-confirm .btn{padding:.6rem 1.1rem; font-size:.88rem; min-height:40px;}
  .pk-confirm .q{font-family:var(--sans); font-size:.86rem; color:var(--ink); flex:1 1 100%; margin:0;}

  /* The 404's one real button. */
  .actions-row{display:flex; gap:.8rem; flex-wrap:wrap; margin:1.6rem 0 2rem;}

  /* ============ LINES YOU KEPT (hard-day overlay) ============ */
  /* The overlay is permanently #1F1E1C and ignores the theme tokens, so these
     colours are literals like every other .ov- rule above. A var(--line)
     hairline here would be a pale scratch by day and invisible at night. */
  .ov-kept{border-left:2px solid #EB5E28; padding-left:1.1rem; margin-bottom:2.2rem;}
  .ov-kept[hidden]{display:none;}
  .ov-kept-h{font-family:var(--mono); font-size:.68rem; letter-spacing:.24em; text-transform:uppercase; color:#EB5E28; margin-bottom:.9rem;}
  .ov-kept-item{font-family:var(--serif); font-size:1.05rem; line-height:1.6; color:#FFFCF2; margin-bottom:1rem;}
  .ov-kept-tag{font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; color:#A8A297; display:block; margin-bottom:.15rem;}
  .ov-kept-more{display:inline-block; font-family:var(--sans); font-size:.82rem; color:#A8A297; text-decoration:underline; text-underline-offset:3px;}
  .ov-kept-more[hidden]{display:none;}

  /* ============ PRINT ============ */
  @media print{
    /* Redefine the palette rather than override a hundred components. Night
       mode is #FFFCF2 on #252422, and browsers drop background painting by
       default - without this the page prints near-white text on white paper. */
    :root, [data-theme="night"], [data-theme="day"]{
      --bg:#fff; --surface:#fff; --surface2:#fff; --ink:#000; --muted:#222;
      --faint:#444; --accent:#000; --accent-ink:#fff; --btn-bg:#fff; --btn-ink:#000;
      --wave:#666; --wave-deep:#888; --line:#b0b0b0; --danger:#000; --shadow:none;
    }
    html, body{background:#fff !important; color:#000 !important;}
    @page{margin:14mm;}
    body{font-size:10.5pt; line-height:1.5;}
    /* body carries transition:background .4s - a page printed in the moment
       after the lamp toggle would otherwise commit the half-faded colour. And
       the wave and breath animations mean nothing on paper. */
    *, *::before, *::after{transition:none !important; animation:none !important;}

    /* Everything fixed or interactive. .drawer and .scrim are the dangerous
       two: on screen they are hidden only by transform and opacity, neither of
       which takes them out of the print box - the drawer would otherwise
       materialise as a 360px column of pocket markup on page one. */
    .overlay, .ov-close, .scrim, .drawer, .toast, .series-banner,
    .burger, .lamp-toggle, .day-gauge, .daynav, .hero-actions, .sea-wrap,
    .log-chips, .segmented, .path-card, .drawer-path, .foot-change,
    .save-line, .ifthen, .teaser,
    button, .btn, a.btn, .linkish{display:none !important;}

    /* main and footer keep a bottom margin for breathing room; on paper that is
       a blank strip. And a dimmed ledger column would print as a grey
       ghost - "dimmed is not deleted" must survive the printer. */
    main, footer.site{padding:0 !important; max-width:none;}
    .ledger.chosen .ledger-col{opacity:1 !important;}
    .ticks{display:none;}

    h1, h2, h3, h4, .eyebrow{break-after:avoid-page;}
    .takeaway, .safety, .ledger-col, .line-card, .pk-item,
    .exercise, details.science, .cheat tr{break-inside:avoid;}
    p{orphans:3; widows:3;}

    /* ---- the pocket card ---- */
    /* Type only: no fills, no card border, no cut box. Two rules, one narrow
       column, and the column width is the fold. */
    body.pocket main > *{display:none !important;}
    body.pocket main > #pocketLive{
      display:flex !important; flex-direction:column;
      width:88mm; max-width:88mm; margin:0; padding:0;
    }
    body.pocket main > #pocketLive[hidden]{display:none !important;}
    body.pocket #pgSecRead, body.pocket #pgSecWaves,
    body.pocket .pk-empty, body.pocket .pk-stat{display:none !important;}

    /* Screen order is the drawer's (days read, plan, waves, lines); the card's
       is the agreed one, lines first. order lets both be right. */
    body.pocket .card-head{order:1;}
    body.pocket #pgSecLines{order:2;}
    body.pocket #pgSecPlan{order:3;}
    body.pocket .card-foot{order:4;}

    body.pocket .print-only{display:block !important;}
    body.pocket .card-head{
      font-family:var(--mono); font-size:7pt; letter-spacing:.2em; text-transform:uppercase;
      border-bottom:1px solid #000; padding-bottom:2mm; margin:0 0 5mm;
    }
    body.pocket .card-foot{
      font-family:var(--sans); font-size:7pt; line-height:1.55;
      border-top:1px solid #000; padding-top:2mm; margin:5mm 0 0;
    }
    body.pocket .pk-sec{margin:0 0 4mm;}
    body.pocket .pk-sec h4{font-size:6.5pt; letter-spacing:.2em; color:#000; margin:0 0 2mm;}
    body.pocket .pk-item{
      display:block; background:none; border:none; border-radius:0;
      margin:0 0 2.6mm; font-size:9pt; line-height:1.4;
      padding:0 0 0 8mm; text-indent:-8mm;
    }
    body.pocket .pk-item .tag{
      display:inline-block; width:8mm; border:none; border-radius:0;
      padding:0; margin:0; font-size:7.5pt; color:#000; text-indent:0;
    }
  }

  /* Storage keys and cookie names, on the privacy page. Nothing else on the
     site sets code, and unstyled <code> falls back to a font that does not
     exist in this palette. */
  main code{
    font-family:var(--mono); font-size:.88em; color:var(--muted);
    background:var(--surface2); border-radius:5px; padding:.08em .34em;
  }

  /* ============ FOOTER LINKS ============ */
  /* The only site-wide navigation besides the drawer: about, privacy, pocket.
     Quiet by design - the footer is the last thing a reader needs at 9:47 p.m. */
  .foot-links{margin-top:.9rem;}
  .foot-links a{color:var(--muted); text-decoration:none; border-bottom:1px solid var(--line);}
  .foot-links a:hover{color:var(--accent); border-bottom-color:var(--accent);}
  .foot-links span{color:var(--faint); padding:0 .35rem;}

  @media print{
    .foot-links{display:none !important;}
  }

  /* ============ ACCENT LIFT ============ */
  /* One step brighter than --accent. Appended below the frozen prototype prefix
     (see preflight's CSS_PREFIX check) rather than folded into the token blocks,
     which live above line 407 and cannot move.

     It exists for three jobs:
       1. accent text on a raised surface. #EB5E28 is 4.55:1 on the page ground,
          but 4.10:1 on --surface and 3.70:1 on --surface2 - both under AA, and
          that is where every ledger heading, drawer label and card eyebrow sits.
       2. today's tick, until now the same colour as a day already read.
       3. hover and focus, which changed no colour at all - .btn faked it with
          filter:brightness(1.05).

     A lighter tint only reads on the dark ground, so the colour splits three ways:
       --accent-lift       a fill. Dark ink always sits on it, so it is #F18E68 in
                           both themes (--btn-ink on it is 5.9:1).
       --accent-lift-text  text. Lifts brighter at night, darker by day, because
                           #F18E68 on the cream ground is 2.32:1 - invisible.
       --accent-lift-mark  a mark on the page ground. Day keeps plain paprika:
                           3.32:1 is under AA for type but fine for a 5px tick.

     #F18E68 is a 30% tint. A 20% tint measures better against --accent but lands
     on top of --danger #F0793F, and two near-identical oranges read as a bug. */
  [data-theme="night"]{--accent-lift:#F18E68; --accent-lift-text:#F18E68; --accent-lift-mark:#F18E68;}
  [data-theme="day"]{--accent-lift:#F18E68; --accent-lift-text:#A03A0E; --accent-lift-mark:#EB5E28;}

  /* 1. accent text on a raised surface - 4.10:1 becomes 5.86:1 at night, 5.34:1 by day */
  .series-banner a,
  .ledger-col h3,
  .ifthen label,
  .plan-set .sentence,
  .line-card::before,
  .save-line[aria-pressed="true"],
  .pk-sec h4,
  .dp-label,
  .path-set,
  .linkish,
  .pk-item .tag,
  .part-h .pt,
  .day-row.read .n,
  .daycard-mock .m-eyebrow,
  .pocket-mock .pm-head{color:var(--accent-lift-text);}
  .drawer-tabs button[aria-selected="true"]{color:var(--accent-lift-text); border-bottom-color:var(--accent-lift-text);}
  @media(max-width:640px){
    /* the cheat table only becomes cards, and only then sits on --surface */
    .cheat td::before{color:var(--accent-lift-text);}
  }

  /* 2. today - the gauge, the drawer's mini gauge, and the drawer's day row */
  .tick.today{background:var(--accent-lift-mark);
    box-shadow:0 0 0 2px var(--bg), 0 0 0 3px var(--accent-lift-mark);}
  .day-row.today{border-left-color:var(--accent-lift-mark);}

  /* 3. hover and focus */
  .daynav a:hover{color:var(--accent-lift-text); border-color:var(--accent-lift-mark);}
  .foot-links a:hover{color:var(--accent-lift-text); border-bottom-color:var(--accent-lift-mark);}
  .btn:not(.ghost):not(.subtle):hover{background:var(--accent-lift); filter:none;}
  .btn.ghost:hover{border-color:var(--accent-lift-mark);}
  .hardday-btn:hover{background:var(--accent-lift);}
  :focus-visible{outline-color:var(--accent-lift-mark);}
  /* the overlay is permanently #1F1E1C and takes literals, like every .ov- rule */
  .chip:hover, .ov-choice:hover{border-color:#F18E68;}

  @media print{
    /* the palette is redefined for paper above; the lift goes with it, or a
       ledger heading prints in colour on a page that is meant to be ink-on-white */
    :root, [data-theme="night"], [data-theme="day"]{
      --accent-lift:#000; --accent-lift-text:#000; --accent-lift-mark:#000;
    }
  }

  /* ============ THE HARD-DAY BUTTON MOVES INTO THE DRAWER ============ */
  /* Appended, never edited above: the prototype's .hardday-fab rules are still
     up there around line 239 and are now dead CSS - template.html no longer
     renders that element, so the frozen prefix stays byte-identical and the
     selector simply matches nothing.

     The button is the first thing inside the drawer, above the tabs rather than
     in one, so neither tab can bury it and the whole shell is behind a single
     control. It keeps the fill, the pill and the shadow it had as a FAB - on a
     hard night the reader is looking for the same object, just one tap deeper.

     Consequence for the page: nothing floats over the last paragraph any more,
     so main and footer stop reserving a landing strip. 6rem and 7rem were the
     button's clearance, not typographic space. */
  .drawer-hard{padding:1rem 1.1rem .35rem;}
  .hardday-btn{
    width:100%; background:var(--btn-bg); color:var(--btn-ink); border:none; border-radius:999px;
    padding:.9rem 1.2rem; font-size:1rem; font-weight:700; box-shadow:var(--shadow);
    display:flex; align-items:center; justify-content:center; gap:.5rem; min-height:52px;
    transition:transform .2s, background .2s;
  }
  .hardday-btn:hover{transform:translateY(-1px);}
  .hardday-btn .ring{font-size:1.1rem;}
  /* body.home main is more specific and keeps its own 2.5rem */
  main{padding-bottom:3rem;}
  footer.site{padding-bottom:3.5rem;}

  /* ============ WORDMARK LINK ============ */
  /* The header wordmark is the way home from every page. It became an <a>, so
     the UA's link styling has to be undone - .wordmark above already owns the
     colour and the type, this puts back everything a <span> gave it for free.
     The padding is a finger-sized tap target; the matching negative margin
     keeps the header's flex row on exactly the pixels it sat on before. */
  a.wordmark{
    text-decoration:none; display:inline-block;
    padding:.45rem .6rem; margin:-.45rem -.6rem;
    -webkit-tap-highlight-color:transparent;
  }
  a.wordmark:hover{color:var(--accent-lift-text);}

  /* ============ THE HEADER STAYS ============ */
  /* The bar is the way out of a page - the menu, the wordmark home, the lamp -
     so it stops scrolling away. Appended, never edited above: the prototype's
     header.site rule is still up at line 48 and is overridden here.

     Two things it has to get right.

     1. FULL-BLEED BACKGROUND, COLUMN-ALIGNED CONTENTS. A bar that is only
        42rem wide leaves the text sliding past in the gap either side, and the
        homepage is the proof: body.home main is 62rem, wider than this header
        has ever been. So the element goes full width and the padding puts its
        contents back on the text column - the burger and the lamp land on the
        same pixels they did before, at every width (max() keeps the narrow case
        at the original 1.25rem). It is 100%, the body's width, and NOT 100vw,
        which counts the scrollbar and would push the column half a scrollbar
        off centre on desktop.

     2. AN OPAQUE GROUND, AND AN EDGE. var(--bg) so nothing reads through, and
        it transitions on the same .4s as body's, or the lamp toggle would snap
        the bar while the page fades under it. The ::after is a short fade below
        the bar so a serif line dissolves instead of being guillotined - it is
        var(--bg) over var(--bg) at rest, so it shows only once something is
        scrolling under it.

     z-index 40 sits above the page and below every layer that is meant to cover
     the page: the toast and scrim at 90, the drawer at 95, the overlay at 100. */
  header.site{
    position:sticky; top:0; z-index:40;
    max-width:none;
    padding-left:max(1.25rem, calc((100% - var(--maxw)) / 2 + 1.25rem));
    padding-right:max(1.25rem, calc((100% - var(--maxw)) / 2 + 1.25rem));
    background:var(--bg); transition:background .4s;
  }
  header.site::after{
    content:""; position:absolute; left:0; right:0; top:100%; height:.9rem;
    background:linear-gradient(var(--bg), transparent); pointer-events:none;
  }
  /* the companion to a sticky bar: anything scrolled to by name stops below it,
     not under it. site.js scrolls the exercise card with block:'center' and is
     unaffected either way - this is for find-in-page and any future anchor. */
  html{scroll-padding-top:5.5rem;}

  @media print{
    /* the bar is screen furniture. On paper it is a masthead: back into the
       flow, back onto the text column, no ground and no fade. */
    header.site{
      position:static; max-width:var(--maxw);
      padding-left:1.25rem; padding-right:1.25rem;
      background:none;
    }
    header.site::after{content:none;}
  }

  /* ============ THE BREATH PACER ============ */
  /* The dot was always the right rhythm - the prototype's keyframe swells for
     4s and settles back over 6s - but it said nothing, so a reader could watch
     it pulse for ten minutes without ever learning that the swelling IS the
     in-breath. Now the phase is named and counted out, and the dot has grown
     into a ball in the middle of the water.

     It moves off the keyframe and onto a transition, driven by the same
     clock as the words. A CSS animation and a JS counter started at different
     moments drift apart, and a pacer that contradicts itself - saying "breathe
     in" while the dot shrinks - is worse than no pacer at all. site.js sets the
     duration and the target scale at the top of each phase; the transition is
     the swell.

     Colours are literal hex, like every other rule in this overlay: it is
     permanently #1F1E1C and a themed token would be unreadable by day.
     #EB5E28 on that ground is 4.9:1, and #CCC5B9 is 9.6:1. */
  /* The 14px dot in the words line became a ball in the sea. It is the same
     clock - site.js still sets the duration and the target scale at the top of
     each phase - but at this size it is something to breathe WITH rather than
     a detail to notice, which is the whole point of a pacer.

     It lives inside .sea-wrap, above the water and OPAQUE: the lines stop at
     its rim rather than reading through it, so it is a ball on the sea and not
     a bubble in it. The colours are the exact composite of the translucent
     version over this overlay's permanent #1F1E1C ground - #595854 / #302F2C /
     #262522 for the fill, #7E7A72 for the rim - so it looks identical and only
     the occlusion changed. The rim is what the eye actually tracks as it
     swells, which is why it is opaque too: a line crossing under a translucent
     rim would break the edge exactly where the edge has to be readable.

     It rides ABOVE the water rather than in it, which is what the band gets
     taller for. The arithmetic, all in the 130px the wave svg draws into:

       the highest ink is 51.5px down. The paths are quadratic Beziers, so the
         crest is at amp/2, not amp - measured, not assumed: getBBox() puts w1
         at y=53, and the 3px stroke lifts the ink to 51.5. From the BOTTOM of
         the band that is 78.5px, and .sea is anchored bottom, so it holds
         however tall the wrap gets.
       the ball needs 110px at full swell, of which 26px hangs past its 58px
         layout box on each side.
       so bottom:120px puts the swollen ball's underside 15.5px clear of the
         crest at full amplitude - the wave's loudest moment - and leaves 8px
         above it. 212px is the smallest band those two fit in.

     Anchoring on `bottom` rather than centring is deliberate: the ball's
     relationship is with the waterline, not with the box.

     The glow is INSIDE the circle (a radial fade) rather than a box-shadow,
     which at full swell would spill past the band and be cut off flat by
     .sea-wrap's overflow:hidden - still needed, to clip the 200%-wide drift.

     .breath .dot up in the frozen prefix now matches nothing, like the dead
     .hardday-fab rules - the element it styled no longer exists. */
  .sea-wrap{height:212px;}
  .breath-ball{
    position:absolute; bottom:120px; left:0; right:0; margin:0 auto; z-index:2;
    width:58px; height:58px; border-radius:50%;
    border:1px solid #7E7A72;
    background:radial-gradient(circle at 50% 42%, #595854 0%, #302F2C 62%, #262522 100%);
    transition-property:transform; transition-timing-function:ease-in-out;
  }
  /* the live line is brighter than the note under it - it is the thing to
     follow, and it is read in a dark room by someone who is not at their best */
  .breath{margin-bottom:.5rem; font-size:.95rem; color:#CCC5B9;}
  .breath .breath-say{display:flex; align-items:baseline; gap:.55rem;}
  /* mono and tabular: the count changes every second and must not nudge the
     line sideways as it goes */
  .breath .breath-count{
    font-family:var(--mono); font-size:1.05rem; color:#EB5E28;
    font-variant-numeric:tabular-nums;
  }
  /* the shape of the whole thing, stated once and never moving. This is also
     the line a screen reader gets: the pacer above it is aria-hidden, because
     a number that rewrites itself every second is not something to announce. */
  .breath-note{
    font-family:var(--sans); font-size:.82rem; color:#8E897F;
    text-align:center; margin-bottom:2rem;
  }

  @media (prefers-reduced-motion: reduce){
    /* the prototype already stops the pulse here. Now that the ball carries a
       transition it would go on jumping between two sizes every few seconds,
       which is worse than never moving - so pin it flat. For this reader the
       words and the count ARE the pacer, and they still run. */
    .breath-ball{transform:none !important; transition:none !important;}
  }

  /* ============ THIRD DOOR ON THE CHOICE SCREEN ============ */
  /* The wave and the words swap screens, so they are <button>s; the full read is
     a real page, so it is an <a>. .ov-choice lives above line 407 and cannot be
     touched, and everything it quietly inherited from the bare button{} rule has
     to be said again here: an anchor comes with serif type (button{} sets --sans)
     and an underline, neither of which the two doors above it have. Colour is not
     restated - .ov-choice's own #FFFCF2 already outranks the UA :visited purple. */
  a.ov-choice{display:block; font-family:var(--sans); text-decoration:none;}
  /* Setting display means owning [hidden] again - an author rule beats the UA's
     [hidden]{display:none} whatever the specificity, and site.js hides this door
     on the companion's own page. Same pairing as .ov-kept-more and .hero-progress. */
  a.ov-choice[hidden]{display:none;}