/* Runway. Light theme only.
   Scale 1.25 from 16px. Spacing tokens sit on a 4/8px grid; a few optical offsets (1px, 2px, 3px, the 6px brand mark and ring strokes, -2px icon nudge) are deliberate exceptions. Radius scale: 4px (bars, checkboxes, tips), 8px (controls, panels), 50% (circles only), plus a 3px brand mark. */
@font-face{font-family:"Geist";src:url(assets/geist.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(assets/geist-mono.woff2) format("woff2");font-weight:100 900;font-display:swap}

:root{
  color-scheme:light;
  --ink:#0F1412;
  --paper:#F3F5EF;
  --paper-2:#E7EBE1;
  --surface:#FBFCF8;
  --accent:#FF5A1F;          /* fills and buttons only (ink text on it: 5.96:1); 2.84:1 on paper, so it never carries state alone. Selected fills (checked box, chosen mood, hovered point) pair it with an ink border or mark */
  --accent-strong:#B93A08;   /* state: meters, rings, lines, current-nav mark (focus uses --ink); 5.21:1 on paper, 4.73:1 on paper-2, 4.13:1 on track */
  --bar:#3C4540;
  --track:#D7DDD1;           /* .meter track, always paired with a --line-strong edge (bar-chart tracks .hb .trk are transparent) */
  --accent-text:#AD3708;     /* text on paper: 5.75:1, on paper-2: 5.22:1 */
  --muted:#4A524E;           /* 7.33:1 on paper */
  --disabled-text:#59605C;   /* disabled and placeholder text */
  --line:#C9D0C3;            /* decorative hairline */
  --line-strong:#6B746F;     /* control borders, 3:1+ */
  --error:#9B1C1C;
  --t-1:.8rem;--t0:1rem;--t1:1.25rem;--t2:1.5625rem;--t3:1.953rem;--t4:2.441rem;--t5:3.052rem;
  --s1:.25rem;--s2:.5rem;--s3:.75rem;--s4:1rem;--s5:1.5rem;--s6:2rem;--s7:3rem;--s8:4rem;
  --target:44px;
  --header-h:calc(4rem + 1px); /* .bar min-height plus the header's 1px border */
  --r1:4px;--r2:8px;
  --font:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --shadow-c:rgba(15,20,18,.28);
  --accent-hover:#FF7440;
  --edge-disabled:#9AA39D;
  --disabled-bg:#DDE2D6;
  --tint-core:#FFD9C8;
  --shadow:0 12px 24px -16px var(--shadow-c);
  --ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:5rem;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 var(--t0)/1.6 var(--font);overflow-x:hidden}
[hidden]{display:none!important}
img,svg{max-width:100%}
h1,h2,h3,p,ul,ol,dl,dd,fieldset{margin:0;padding:0}
ul,ol{list-style:none}
a{color:var(--accent-text);text-underline-offset:.2em}
a:hover{color:var(--ink)}
strong,b{font-weight:650}

.wrap{width:100%;max-width:75rem;margin-inline:auto;padding-inline:var(--s5)}
.narrow-wrap{max-width:46rem}
.skip{position:absolute;left:var(--s4);top:-4rem;background:var(--ink);color:var(--paper);padding:var(--s3) var(--s4);border-radius:var(--r2);z-index:100}
.skip:focus{top:var(--s2)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:var(--r1)}
.btn:focus-visible,.icon-btn:focus-visible{outline-offset:2px}

/* type */
h1{font-size:var(--t4);line-height:1.08;letter-spacing:-.025em;font-weight:650;text-wrap:balance}
h2{font-size:var(--t2);line-height:1.15;letter-spacing:-.02em;font-weight:650}
h3{font-size:var(--t1);line-height:1.25;letter-spacing:-.01em;font-weight:620;margin-bottom:var(--s3)}
.lede{font-size:var(--t1);line-height:1.45;max-width:30rem;color:var(--muted)}
.eyebrow{font:500 var(--t-1)/1.4 var(--mono);color:var(--accent-text);letter-spacing:.02em}
.note{font-size:var(--t-1);line-height:1.5;color:var(--muted)}
.error{font-size:var(--t0);color:var(--error);font-weight:560;margin-top:var(--s2)}
.empty{color:var(--muted);padding:var(--s4) 0}
@media(min-width:1024px){h1{font-size:var(--t5)}h2{font-size:var(--t3)}}

/* header */
.site-header{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;min-height:4rem;gap:var(--s4);flex-wrap:wrap}
.brand{display:inline-flex;align-items:center;gap:var(--s2);font-weight:700;font-size:var(--t1);letter-spacing:-.02em;color:var(--ink);text-decoration:none;min-height:var(--target)}
.brand-mark{width:1.5rem;height:6px;background:var(--accent);border-radius:3px;display:block}
.nav ul{display:flex;gap:var(--s1)}
.nav a{display:inline-flex;align-items:center;min-height:var(--target);padding:0 var(--s3);color:var(--ink);text-decoration:none;border-radius:var(--r2);font-weight:500}
.nav a:hover{background:var(--paper-2)}
.nav a.current{box-shadow:inset 0 -3px 0 var(--accent-strong)}
.icon-btn.menu-btn{display:none}
@media(max-width:52rem){
  .js .icon-btn.menu-btn{display:inline-flex}
  .js .nav{display:none;width:100%;order:3;padding-bottom:var(--s3)}
  .js .nav.open{display:block}
  .js .nav ul{flex-direction:column}
  .nav ul{flex-wrap:wrap}
}

/* controls */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:var(--target);padding:0 var(--s4);font:600 var(--t0)/1 var(--font);border:2px solid var(--ink);border-radius:var(--r2);cursor:pointer;text-decoration:none;white-space:nowrap;transition:transform .08s var(--ease),background-color .15s}
.btn.primary{background:var(--accent);color:var(--ink)}
.btn.primary:hover{background:var(--accent-hover);color:var(--ink)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--paper-2);color:var(--ink)}
.tint1 .btn.ghost:hover,.help .btn.ghost:hover,.tint1 .icon-btn:hover,.help .icon-btn:hover{background:var(--surface)}
.btn:active{transform:translateY(1px)}
.btn.sm{padding:0 var(--s3);min-width:var(--target)}
.btn[aria-pressed="true"],.btn.ghost[aria-pressed="true"]:hover,.tint1 .btn.ghost[aria-pressed="true"]:hover,.help .btn.ghost[aria-pressed="true"]:hover{background:var(--ink);color:var(--paper)}
.btn[disabled]{opacity:1;color:var(--line-strong);border-color:var(--edge-disabled);background:transparent;cursor:not-allowed}
.btn.primary[disabled]{background:var(--disabled-bg);color:var(--disabled-text);border-color:var(--edge-disabled)}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:var(--target);height:var(--target);border:0;background:transparent;color:var(--ink);border-radius:var(--r2);cursor:pointer}
.icon-btn:hover{background:var(--paper-2)}
.ico{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none}
.btn .ico[aria-hidden]{margin-left:-2px}
#i-play,.ico use[href="#i-play"]{fill:currentColor}

.field{display:flex;flex-direction:column;gap:var(--s2);margin-bottom:var(--s4);min-width:0}
.field.grow{flex:1;margin-bottom:0}
.field.narrow{max-width:15rem}
label,legend{font-weight:560;font-size:var(--t0)}
input[type=text],input[type=number],input[type=date],select,textarea{width:100%;min-height:var(--target);padding:var(--s2) var(--s3);font:400 var(--t0)/1.4 var(--font);color:var(--ink);background:var(--surface);border:1.5px solid var(--line-strong);border-radius:var(--r2)}
textarea{resize:vertical;min-height:6rem}
input[aria-invalid="true"]{border-color:var(--error);border-width:2px}
input::placeholder{color:var(--disabled-text)}
input[type=range]{width:100%;min-height:var(--target);accent-color:var(--ink);margin:0;-webkit-appearance:none;appearance:none;background:transparent}
input[type=range]::-webkit-slider-runnable-track{box-sizing:border-box;height:8px;background:var(--track);border:1.5px solid var(--line-strong);border-radius:var(--r1)}
input[type=range]::-moz-range-track{box-sizing:border-box;height:8px;background:var(--track);border:1.5px solid var(--line-strong);border-radius:var(--r1)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;margin-top:-9px;border-radius:50%;background:var(--ink);border:0}
input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--ink);border:0}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
@media(max-width:26rem){.row2{grid-template-columns:1fr}}
.actions{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center}
.inline-check{display:inline-flex;align-items:center;gap:var(--s2);min-height:var(--target);font-weight:500;cursor:pointer}
input[type=checkbox]{appearance:none;-webkit-appearance:none;width:24px;height:24px;margin:0;flex:none;border:2px solid var(--ink);border-radius:var(--r1);background:var(--surface);cursor:pointer;display:inline-grid;place-content:center}
input[type=checkbox]:checked{background:var(--accent)}
input[type=checkbox]:checked::after{content:"";width:12px;height:7px;border-left:3px solid var(--ink);border-bottom:3px solid var(--ink);transform:translateY(-1px) rotate(-45deg)}
.chk{display:inline-flex;align-items:center;justify-content:center;width:var(--target);height:var(--target);flex:none;cursor:pointer}

/* progress line (the signature motif, as state) */
.meter{height:8px;background:var(--track);border:1px solid var(--line-strong);border-radius:var(--r1);overflow:hidden;margin:var(--s3) 0;box-sizing:content-box}
.meter i{display:block;height:100%;width:0;background:var(--accent-strong);border-radius:var(--r1)}
@media(prefers-reduced-motion:no-preference){.meter i{transition:width .3s var(--ease)}}
.meter.over i{background:repeating-linear-gradient(135deg,var(--accent-strong) 0 8px,var(--ink) 8px 12px)}

/* scroll rule (drawn on scroll when motion allowed) */
.rule{display:block;width:100%;height:6px;margin-top:var(--s5);overflow:visible}
.rule line{stroke:var(--accent);stroke-width:4;stroke-linecap:round;vector-effect:non-scaling-stroke}

/* hero */
.hero{padding-block:var(--s5);min-height:calc(100svh - var(--header-h));display:flex;align-items:center}
.plan-title{margin-bottom:var(--s2)}
.tpl-note{margin:calc(var(--s2) * -1) 0 var(--s4)}
.hero-grid{display:grid;gap:var(--s6);align-items:center}
.hero-copy{display:flex;flex-direction:column;gap:var(--s4);align-items:flex-start}
@media(min-width:62rem){.hero-grid{grid-template-columns:5fr 7fr;gap:var(--s7)}}
.panel{background:var(--surface);border:2px solid var(--ink);border-radius:var(--r2);padding:var(--s5);box-shadow:var(--shadow);min-width:0}
.panel-title{font-size:var(--t1);margin-bottom:var(--s4)}
#dc-form .actions{margin-top:var(--s1)}
.result{margin-top:var(--s4);border-top:1px solid var(--line);padding-top:var(--s3)}
.summary{font-size:var(--t0);line-height:1.5}
.summary strong{font-variant-numeric:tabular-nums}
.steps-scroll{max-height:clamp(8rem,22vh,17rem);overflow-y:auto;margin-inline:calc(var(--s2) * -1);padding-inline:var(--s2);border-radius:var(--r1)}
.steps li,.cl-list li,.bd-rows li{display:grid;grid-template-columns:var(--target) minmax(0,1fr) 5rem var(--target);align-items:start;gap:var(--s1) var(--s2);padding:var(--s1) 0}
.steps .st-main{display:flex;flex-direction:column;min-width:0}
.steps .st-day{font-size:var(--t-1);color:var(--muted);padding:2px var(--s1) 0;line-height:1.3}
.steps li.done input[type=text]{text-decoration:line-through;color:var(--muted)}
.steps input[type=number]{padding-inline:var(--s2)}
.steps-foot{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3);align-items:center;margin-top:var(--s3)}
.steps-foot .note{flex:1;min-width:8rem}
@media(max-width:26rem){.steps li{grid-template-columns:var(--target) minmax(0,1fr) var(--target)}.steps li .st-hours{grid-column:2;grid-row:2;max-width:6rem}.steps li .del{grid-column:3;grid-row:1}}

/* sections */
.sec{padding-block:var(--s8)}
.tint0{background:var(--paper)}
.tint1{background:var(--paper-2)}
.sec-head{max-width:46rem;margin-bottom:var(--s6)}
.sec-head p{margin-top:var(--s3);color:var(--muted);font-size:var(--t1);line-height:1.45}
.tint1 a{color:var(--accent-text)}
.tint1 input[type=text],.tint1 input[type=number],.tint1 select,.tint1 textarea{background:var(--surface)}

/* focus */
.focus-top{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s7);margin-bottom:var(--s7)}
@media(min-width:62rem){.focus-top{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:start}}
.timer{display:flex;flex-direction:column;gap:var(--s4);align-items:flex-start}
.ring-wrap{position:relative;width:min(15rem,100%);aspect-ratio:1;flex:none}
.ring-wrap.big{width:min(20rem,100%);height:auto;aspect-ratio:1}
.ring{width:100%;height:100%;display:block}
.ring-track{fill:none;stroke:var(--line-strong);stroke-width:2}
.ring-fill{fill:none;stroke:var(--accent-strong);stroke-width:6;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.ring-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;pointer-events:none}
.ring-time{font:600 var(--t3)/1 var(--mono);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.big .ring-time{font-size:var(--t2);font-family:var(--font);letter-spacing:-.02em}
.ring-sub{font-size:var(--t-1);color:var(--muted);margin-top:var(--s2)}
.presets{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center}
.timer .field.narrow{width:100%;max-width:20rem}
.presets input{width:min(5.5rem,100%)}
.confirm{margin-top:var(--s4);padding:var(--s4);border:2px solid var(--ink);border-radius:var(--r2);background:var(--paper-2)}
.confirm p{margin-bottom:var(--s3)}
.log h3{margin-bottom:var(--s3)}
.log-controls{display:flex;gap:var(--s4);align-items:flex-end;flex-wrap:wrap}
.log-controls .field{flex:1;min-width:min(12rem,100%);margin-bottom:0}
.log-list{margin-top:var(--s4);max-height:12rem;overflow-y:auto}
.log-list li{display:flex;justify-content:space-between;gap:var(--s3);padding:var(--s2) 0;border-top:1px solid var(--line)}
.log-list time{font-family:var(--mono);color:var(--muted);font-size:var(--t-1)}

.chart-block{border-top:1px solid var(--line);padding-top:var(--s5)}
.chart-head{display:flex;justify-content:space-between;align-items:center;gap:var(--s4);margin-bottom:var(--s3);flex-wrap:wrap}
.chart-head h3{margin:0}
.chart{position:relative;display:flex;align-items:flex-end;gap:var(--s2);height:13rem;border-bottom:2px solid var(--ink);padding-top:var(--s5);margin-top:var(--s3)}
.chart .col{flex:1;min-width:0;max-width:4rem;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;position:relative}
.chart .bar-fill{background:var(--bar);border-radius:var(--r1) var(--r1) 0 0;min-height:3px;transition:background-color .1s}
.chart .col:hover .bar-fill,.chart .col:focus-visible .bar-fill{background:var(--accent-strong)}
.chart .col .lbl{position:absolute;top:100%;left:0;right:0;text-align:center;font-size:var(--t-1);color:var(--muted);padding-top:var(--s1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chart .col .val{font:600 var(--t-1)/1 var(--mono);text-align:center;padding-bottom:var(--s1)}
.chart-block .chart{margin-bottom:var(--s6)}
.chart-empty{display:flex;align-items:center;color:var(--muted);height:100%;border:0}

.tip{position:absolute;z-index:60;background:var(--ink);color:var(--paper);font-size:var(--t-1);line-height:1.4;padding:var(--s2) var(--s3);border-radius:var(--r1);max-width:16rem;transform:translate(-50%,-100%)}
.tip::after{content:"";position:absolute;left:0;right:0;top:100%;height:var(--s2)}

/* breathe */
.breathe{display:grid;gap:var(--s6);justify-items:center;margin-bottom:var(--s8);text-align:center}
.breathe-controls{display:flex;flex-direction:column;gap:var(--s4);align-items:center;width:100%;max-width:24rem}
.breathe-controls .field{width:100%;margin:0;text-align:left}
.breathe-controls .actions{justify-content:center}
.core{position:absolute;inset:18%;border-radius:50%;background:var(--tint-core);border:2px solid var(--ink);transform:scale(.7)}
.checklist{max-width:46rem;margin-inline:auto}
.cl-list{margin-top:var(--s3)}
.cl-list li{grid-template-columns:var(--target) minmax(0,1fr) var(--target)}
.cl-list li.done input[type=text]{text-decoration:line-through;color:var(--muted)}
.add-row{display:flex;gap:var(--s3);align-items:flex-end;margin-top:var(--s4)}
.cl-list input[type=text],.steps input[type=text],.steps input[type=number],.bd-rows input{border-color:var(--line-strong);background:var(--surface)}
.cl-list input[type=text]:hover,.steps input[type=text]:hover,.bd-rows input:hover{background:var(--paper)}

/* write */
.write-grid{display:grid;gap:var(--s6);align-items:start}
@media(min-width:62rem){.write-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}}
.write-opts{display:flex;gap:var(--s4);align-items:flex-end;flex-wrap:wrap}
.write-opts .field{margin:0}
.write-opts .note{flex:1;min-width:8rem;padding-bottom:var(--s3)}
.metrics{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5) var(--s4)}
.metrics dt{font-size:var(--t-1);color:var(--muted);font-weight:500}
.metrics dd{font:600 var(--t3)/1.1 var(--font);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.metrics small{font-size:var(--t-1);font-weight:500;color:var(--muted);letter-spacing:0}
#bd-meter-note + h3{margin-top:var(--s5)}
#wr-caveat{margin-top:var(--s4)}
#wr-detail{margin-top:var(--s7)}
.marked{background:var(--surface);border:1.5px solid var(--line-strong);border-radius:var(--r2);padding:var(--s4);max-height:20rem;overflow:auto;white-space:pre-wrap;word-break:break-word;line-height:1.8}
.marked-block{margin-bottom:var(--s6)}
.marked .long{text-decoration:underline wavy var(--accent-text);text-decoration-thickness:2px;text-underline-offset:5px}
.marked .vague{font-weight:700;text-decoration:underline dotted var(--ink);text-decoration-thickness:2px;text-underline-offset:4px}
.flags{display:grid;gap:var(--s6)}
@media(min-width:62rem){.flags{grid-template-columns:1fr 1fr}}
.count{font-size:var(--t0);color:var(--muted);font-weight:500}
.flag-list li{padding:var(--s3) 0;border-top:1px solid var(--line);display:flex;gap:var(--s3);justify-content:space-between;align-items:center}
.flag-list .fl-text{min-width:0}
.flag-list .fl-text small{display:block;color:var(--muted);font-size:var(--t-1)}
.flag-list .fl-text span{overflow-wrap:anywhere}
.list-info{margin-top:var(--s4)}
.list-info summary{cursor:pointer;min-height:var(--target);display:flex;align-items:center;font-weight:560}
.list-info p{color:var(--muted);font-size:var(--t-1)}

/* budget */
.budget-grid{display:grid;gap:var(--s7);align-items:start}
@media(min-width:62rem){.budget-grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}}
.rows{border:0;margin:0;min-width:0}
.rows legend{margin-bottom:var(--s2)}
.bd-rows li{grid-template-columns:minmax(0,1fr) 7rem var(--target);align-items:center}
.bd-rows .del{justify-self:end}
.big-line{display:flex;gap:var(--s7);flex-wrap:wrap;margin-bottom:var(--s3)}
.big-label{font-size:var(--t-1);color:var(--muted);font-weight:500}
.big{font:650 var(--t4)/1.1 var(--font);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.big.sm{font-size:var(--t3)}
.big.neg{color:var(--error)}
.hbars{margin-top:var(--s3);position:relative}
.hb{display:grid;grid-template-columns:minmax(4rem,8rem) minmax(0,1fr) 6rem;gap:var(--s3);align-items:center;min-height:var(--target);border-radius:var(--r1)}
.hb .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hb .trk{height:16px;background:transparent}
.hb .fill{height:100%;background:var(--bar);border-radius:0 var(--r1) var(--r1) 0;min-width:3px}
.hb:hover .fill,.hb:focus-visible .fill{background:var(--accent-strong)}
.hb .v{text-align:right;font-family:var(--mono);font-size:var(--t-1);font-variant-numeric:tabular-nums}
@media(max-width:26rem){.hb{grid-template-columns:minmax(3rem,5rem) minmax(0,1fr) 5rem;gap:var(--s2)}}

/* mood */
.help{border:2px solid var(--ink);border-radius:var(--r2);background:var(--paper-2);padding:var(--s5);margin-bottom:var(--s7)}
.help h3{margin-bottom:var(--s3)}
.help li{padding:var(--s2) 0}
.help li > .btn{margin:var(--s1) var(--s2) var(--s1) 0;vertical-align:middle}
.mood-grid{display:grid;gap:var(--s7);align-items:start}
@media(min-width:62rem){.mood-grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}}
.scale{border:0;margin:0 0 var(--s4);min-width:0}
.scale legend{margin-bottom:var(--s3)}
.scale-opts{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s2)}
.scale-opts label{position:relative;display:block}
.scale-opts input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.scale-opts span{overflow-wrap:anywhere;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s1);min-height:4.5rem;padding:var(--s2) var(--s1);border:2px solid var(--ink);border-radius:var(--r2);background:var(--surface);font-size:var(--t-1);text-align:center;line-height:1.2}
.scale-opts b{font:650 var(--t1)/1 var(--font)}
.scale-opts input:checked + span{background:var(--accent)}
.scale-opts input:focus-visible + span{outline:3px solid var(--ink);outline-offset:3px}
.scale-opts label:hover span{background:var(--paper-2)}
.scale-opts input:checked + span,.scale-opts label:hover input:checked + span{background:var(--accent)}
.chart.line{height:15rem;display:block;padding:0;border-bottom:0}
.line svg{width:100%;height:100%;overflow:visible}
.line .grid{stroke:var(--line);stroke-width:1}
.line .ylab{font:400 var(--t-1) var(--font);fill:var(--muted)}
.line .path{fill:none;stroke:var(--accent-strong);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.line .pt{fill:var(--surface);stroke:var(--ink);stroke-width:2.5;pointer-events:none}
.line .hit{fill:transparent;stroke:transparent;cursor:pointer;outline:none}
.line .hit:hover + .pt,.line .hit:focus-visible + .pt{fill:var(--accent);r:7}
.line .hit:focus-visible{stroke:var(--ink);stroke-width:3}
.line .xlab{font:400 var(--t-1) var(--font);fill:var(--muted)}
.mood-out .summary{margin-bottom:var(--s3)}

/* privacy + footer */
#privacy h2{margin-bottom:var(--s4)}
#privacy p{margin-bottom:var(--s4);max-width:65ch}
#privacy .actions{margin-top:var(--s5)}
.site-footer{padding:var(--s6) 0;border-top:1px solid var(--line);background:var(--paper)}
.site-footer .wrap{display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;color:var(--muted)}
.noscript{padding:var(--s4);background:var(--paper-2);text-align:center}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:0s!important;animation-duration:0s!important}
}
@media(max-width:26rem){
  .hero{min-height:0;padding-block:var(--s4) var(--s5);display:block}
  .hero-grid{gap:var(--s4)}
  .hero-copy{gap:var(--s2)}
  .hero h1{font-size:var(--t3)}
  .hero .lede{font-size:var(--t0);line-height:1.4}
  .hero-more{display:none}
  .panel-title{margin-bottom:var(--s3)}
  #dc-form .row2{grid-template-columns:1fr 1fr;gap:var(--s3)}
  #dc-form .field{margin-bottom:var(--s3)}
  .wrap{padding-inline:var(--s4)}
  .panel{padding:var(--s4)}
  .ring-wrap{width:min(12.5rem,100%)}
  .big{font-size:var(--t3)}
  .btn{white-space:normal;text-align:center;padding-block:var(--s2)}
}