/* ============ 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;}
  }

  /* ============ HOMEPAGE ============ */
  body.home main{max-width:62rem; padding-bottom: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. */
    .hardday-fab, .overlay, .ov-close, .scrim, .drawer, .toast, .series-banner,
    .burger, .lamp-toggle, .day-gauge, .daynav, .hero-actions, .sea-wrap,
    .log-chips, .segmented, .path-card, .save-line, .ifthen, .teaser,
    button, .btn, a.btn, .linkish{display:none !important;}

    /* main and footer reserve 6rem and 7rem for the floating button; on paper
       that is a blank page. 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;}
  }