/* app.css  Ben's Tracker
   Tokens for both themes, then components. Values transcribed from
   design-language.md (from ben design.md). Inter is the default family here,
   Libre Baskerville italic is the reserved voice. Hairlines, not shadows. */

/* ---- self-hosted fonts (SIL OFL), no network calls -------------------------*/
@font-face { font-family:'Inter'; font-weight:400; font-style:normal; font-display:swap; src:url('assets/fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-weight:500; font-style:normal; font-display:swap; src:url('assets/fonts/inter-500.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-weight:600; font-style:normal; font-display:swap; src:url('assets/fonts/inter-600.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-weight:700; font-style:normal; font-display:swap; src:url('assets/fonts/inter-700.woff2') format('woff2'); }
@font-face { font-family:'Libre Baskerville'; font-weight:400; font-style:normal; font-display:swap; src:url('assets/fonts/libre-400.woff2') format('woff2'); }
@font-face { font-family:'Libre Baskerville'; font-weight:400; font-style:italic; font-display:swap; src:url('assets/fonts/libre-400-italic.woff2') format('woff2'); }

/* ---- tokens ----------------------------------------------------------------*/
:root, [data-theme="light"] {
  --paper:#e1dfdd; --raise:#f0efed; --field:#ffffff; --hair:#d0cecc;
  --ink:#1a1a1a; --head:#010101; --sec:#6b6b6b; --ter:#b0aeac;
  --acc:#6e3b3b; --accFill:#6e3b3b; --onAcc:#e1dfdd;
  --accWash:rgba(110,59,59,0.08); --accLine:rgba(110,59,59,0.24);
  --btn:#010101; --onBtn:#e1dfdd; --graphite:#3d4f5c;
  --band:#010101; --onBand:#e1dfdd; --bandSec:#b0aeac; --bandHair:#222222; --bandAcc:#b98b86;
  --grainOpacity:0.2;
}
[data-theme="dark"] {
  --paper:#0f0e0d; --raise:#1a1918; --field:#201f1d; --hair:#2b2927;
  --ink:#d8d3ce; --head:#f2efec; --sec:#b0aeac; --ter:#847e7a;
  --acc:#c9a09c; --accFill:#8a4a48; --onAcc:#f2efec;
  --accWash:rgba(201,160,156,0.12); --accLine:rgba(201,160,156,0.30);
  --btn:#e1dfdd; --onBtn:#010101; --graphite:#3d4f5c;
  --band:#241f1e; --onBand:#f2efec; --bandSec:#b0aeac; --bandHair:#3a3330; --bandAcc:#c9a09c;
  --grainOpacity:0.14;
}

/* ---- base ------------------------------------------------------------------*/
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { margin:0; height:100%; }
body {
  font-family:'Inter', system-ui, sans-serif; color:var(--ink); background:var(--paper);
  -webkit-font-smoothing:antialiased; overscroll-behavior:none;
}
button { font-family:inherit; border:0; background:none; color:inherit; cursor:pointer; }
input, textarea { font-family:inherit; }
::-webkit-scrollbar { width:0; height:0; }

/* grain texture, fixed layer behind everything (design.md 4.6, ~0.2 in app) */
body::before {
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.9'/%3E%3C/svg%3E");
  opacity:var(--grainOpacity);
}

#app { display:flex; flex-direction:column; height:100vh; height:100dvh; }
.boot { padding:80px 20px; color:var(--sec); font-family:'Libre Baskerville',Georgia,serif; font-style:italic; }
.screen { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; }

/* ---- shared type + structure ----------------------------------------------*/
.scr-head { padding:calc(env(safe-area-inset-top,0px) + 22px) 20px 16px; display:flex; align-items:flex-start; gap:12px; }
.head-main { flex:1; min-width:0; }
.title { font-weight:700; font-size:28px; line-height:1.1; letter-spacing:-0.03em; color:var(--head); margin:0; }
.subtle { font-size:13px; font-weight:500; color:var(--sec); margin-top:4px; }
.subtle.small, .small { font-size:13px; line-height:1.5; }
.mb { margin-bottom:12px; } .mt { margin-top:12px; }
.body { padding:8px 20px calc(env(safe-area-inset-bottom,0px) + 24px); display:flex; flex-direction:column; gap:24px; }
section { margin:0; }
.row-between { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }

.eyebrow { display:flex; align-items:center; gap:10px; margin-bottom:12px;
  font-size:11px; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; color:var(--sec); }
.eye-rule { width:22px; height:1px; background:var(--acc); flex:none; }

.pill { height:36px; padding:0 14px; border:1px solid var(--hair); border-radius:100px;
  font-size:11px; font-weight:500; letter-spacing:0.12em; text-transform:uppercase; color:var(--sec); white-space:nowrap; }
.pill:hover { border-color:var(--acc); color:var(--acc); }

/* ---- buttons ---------------------------------------------------------------*/
.btn-primary { height:56px; padding:0 20px; background:var(--btn); color:var(--onBtn);
  border-radius:2px; font-weight:600; font-size:14px; letter-spacing:0.06em; text-transform:uppercase; }
.btn-primary:hover, .btn-primary:active { background:var(--graphite); color:#e1dfdd; }
.btn-ghost { height:52px; width:100%; border:1px solid var(--hair); border-radius:2px; color:var(--sec);
  font-weight:600; font-size:14px; letter-spacing:0.06em; text-transform:uppercase; }
.btn-ghost:hover { border-color:var(--acc); color:var(--acc); }
.block-btn { width:100%; margin-top:16px; }
.btn-square { width:52px; height:52px; min-width:52px; border:1px solid var(--hair); border-radius:2px;
  color:var(--ink); display:grid; place-items:center; font-size:22px; line-height:1; }
.btn-square:hover { border-color:var(--acc); color:var(--acc); }
.btn-danger { width:100%; height:56px; border:1px solid var(--accLine); background:var(--accWash);
  border-radius:2px; color:var(--acc); font-weight:600; font-size:14px; letter-spacing:0.06em; text-transform:uppercase; }

/* ---- dark band + info card -------------------------------------------------*/
.darkband { background:var(--band); border-radius:4px; padding:20px 18px; }
.band-eye { color:var(--bandAcc); }
.band-eye .eye-rule { background:var(--bandAcc); }
.band-line { font-family:'Libre Baskerville',Georgia,serif; font-style:italic; font-size:19px; line-height:1.45; color:var(--onBand); }
.band-body { font-size:13px; line-height:1.55; color:var(--bandSec); margin-top:10px; }
.band-action { border-top:1px solid var(--bandHair); margin-top:16px; padding-top:14px; font-size:14px; }
.band-action b { color:var(--onBand); font-weight:600; }
.infocard { background:var(--raise); border:1px solid var(--hair); border-radius:4px; padding:18px; }
.info-body { font-size:15px; line-height:1.6; color:var(--ink); }
.side-note { border-left:2px solid var(--acc); padding:2px 0 2px 16px; font-size:14px; line-height:1.6; color:var(--sec); }

/* ---- tick rows (the signature completed-row motion) ------------------------*/
.ticks { border-top:1px solid var(--hair); }
.tick-row { display:flex; align-items:center; gap:16px; width:100%; min-height:64px;
  padding:12px 12px 12px 12px; border-bottom:1px solid var(--hair); border-left:2px solid transparent;
  background:transparent; text-align:left;
  transition:background .24s cubic-bezier(.25,.46,.45,.94), padding .3s cubic-bezier(.25,.46,.45,.94), border-color .3s; }
.tick-row.done { background:var(--accWash); border-left:2px solid var(--accFill); padding-left:14px; }
.tick-text { flex:1; min-width:0; }
.tick-title { display:block; font-weight:600; font-size:17px; line-height:1.3; letter-spacing:-0.01em; color:var(--head); }
.tick-sub { display:block; font-size:13px; line-height:1.4; color:var(--sec); margin-top:3px; }
.tick-pts { font-size:11px; font-weight:500; letter-spacing:0.12em; text-transform:uppercase; color:var(--ter); flex:none; }
.tick-box { width:26px; height:26px; border-radius:2px; flex:none; display:grid; place-items:center;
  border:1px solid var(--head); background:transparent; }
.tick-box svg { width:14px; height:14px; stroke:transparent; }
.tick-row.done .tick-box { border-color:var(--accFill); background:var(--accFill); }
.tick-row.done .tick-box svg { stroke:var(--onAcc); }

/* ---- big number blocks -----------------------------------------------------*/
.bignum-wrap { display:flex; align-items:baseline; gap:6px; }
.bignum { font-weight:700; font-size:48px; line-height:1; letter-spacing:-0.03em; font-variant-numeric:tabular-nums; color:var(--head); }
.bignum.muted { color:var(--ter); }
.bignum-unit { font-weight:500; font-size:15px; color:var(--sec); }
.serif-note { font-family:'Libre Baskerville',Georgia,serif; font-style:italic; font-size:14px; color:var(--sec); margin-top:6px; }

/* ---- water -----------------------------------------------------------------*/
.water-top { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:14px; }
.water-meta { text-align:right; font-size:13px; line-height:1.45; color:var(--sec); }
.tally-row { display:flex; gap:4px; margin-bottom:16px; }
.tally { flex:1; height:28px; border:1px solid var(--hair); background:transparent; transition:background .22s; }
.tally.tally-goal { border-style:dashed; }
.tally.tally-on { background:var(--acc); }
.water-btns { display:flex; gap:8px; }
.water-btns .btn-primary { flex:1; }
.water-btns .btn-square { width:56px; height:56px; }

/* ---- weight ----------------------------------------------------------------*/
.weight-top { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; }
.stepper { display:flex; gap:8px; }

/* ---- timeline --------------------------------------------------------------*/
.timeline { border-top:1px solid var(--hair); }
.tl-row { display:flex; gap:16px; padding:12px 0; border-bottom:1px solid var(--hair); }
.tl-time { width:56px; flex:none; font-size:13px; font-weight:500; letter-spacing:0.01em; font-variant-numeric:tabular-nums; color:var(--sec); }
.tl-text { flex:1; min-width:0; }
.tl-label { display:block; font-size:15px; line-height:1.35; color:var(--ink); }
.tl-label.tl-bold { font-weight:700; color:var(--head); }
.tl-sub { display:block; font-size:13px; line-height:1.45; color:var(--sec); margin-top:2px; }

/* ---- foot actions ----------------------------------------------------------*/
.foot-actions { display:flex; flex-direction:column; gap:12px; }
.foot-btns { display:flex; gap:24px; justify-content:center; }
.qbtn { min-height:44px; padding:0 4px; font-size:11px; font-weight:500; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--sec); }
.qbtn:hover, .qbtn-on { color:var(--acc); }

/* ---- bottom sheet ----------------------------------------------------------*/
.sheet-scrim { position:fixed; inset:0; z-index:40; background:rgba(1,1,1,.55); display:flex; align-items:flex-end; }
.sheet { width:100%; background:var(--raise); border-top:1px solid var(--hair); border-radius:6px 6px 0 0;
  padding:20px 20px calc(env(safe-area-inset-bottom,0px) + 28px); }
.pad-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:12px; }
.pad-key { height:56px; background:var(--field); border:1px solid var(--hair); border-radius:2px;
  color:var(--head); font-weight:600; font-size:20px; font-variant-numeric:tabular-nums; }
.pad-key:hover { border-color:var(--acc); }
.pad-btns { display:flex; gap:8px; margin-top:12px; }
.pad-btns .btn-ghost { height:56px; flex:1; }
.pad-save { flex:2; }

/* ---- tab bar (text only) ---------------------------------------------------*/
.tabbar { flex:none; display:flex; background:var(--paper); border-top:1px solid var(--hair);
  padding-bottom:calc(env(safe-area-inset-bottom,0px) + 6px); }
.tab { flex:1; border-top:2px solid transparent; margin-top:-1px; padding:14px 0 10px; text-align:center;
  font-size:11px; font-weight:500; letter-spacing:0.10em; text-transform:uppercase; color:var(--sec); }
.tab-on { color:var(--acc); border-top:2px solid var(--acc); }

/* ---- scorecard -------------------------------------------------------------*/
.score-top { display:flex; align-items:flex-end; gap:8px; }
.score-fig { font-weight:700; font-size:72px; line-height:.95; letter-spacing:-0.04em; font-variant-numeric:tabular-nums; color:var(--acc); }
.score-of { font-weight:500; font-size:19px; color:var(--sec); padding-bottom:8px; }
.verdict { font-family:'Libre Baskerville',Georgia,serif; font-style:italic; font-size:22px; line-height:1.35; color:var(--head); margin-top:14px; }
.verdict + .info-body { margin-top:8px; }
.band-scale { display:flex; gap:2px; margin-top:20px; }
.seg { height:6px; background:var(--hair); }
.seg:last-child { background:var(--acc); }
.band-labs { display:flex; justify-content:space-between; margin-top:8px; }
.seg-lab { font-size:11px; font-weight:500; letter-spacing:0.04em; color:var(--ter); }
.cat-list { border-top:1px solid var(--hair); }
.cat { padding:14px 0; border-bottom:1px solid var(--hair); }
.cat-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:10px; }
.cat-name { font-size:15px; font-weight:600; letter-spacing:-0.01em; color:var(--head); }
.cat-score { font-size:15px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--acc); white-space:nowrap; }
.dots { display:flex; gap:3px; }
.dot { flex:1; height:8px; background:var(--hair); }
.dot-on { background:var(--acc); }
.dot-off { background:var(--hair); }
.dot-half { background:var(--accLine); }
.dot-na { background:transparent; border:1px dashed var(--hair); }
.seamed { display:flex; gap:1px; background:var(--hair); border:1px solid var(--hair); border-radius:4px; overflow:hidden; }
.grid-cell { flex:1; background:var(--raise); padding:12px 0; text-align:center; }
.grid-day { font-size:11px; font-weight:500; letter-spacing:0.10em; text-transform:uppercase; color:var(--sec); }
.grid-pts { font-weight:700; font-size:22px; letter-spacing:-0.03em; font-variant-numeric:tabular-nums; color:var(--head); margin-top:6px; }
.grid-max { font-size:11px; color:var(--ter); margin-top:2px; }

/* ---- progress --------------------------------------------------------------*/
.seamed.two, .seamed.targets { flex-wrap:wrap; }
.cell { flex:1; min-width:calc(50% - 1px); background:var(--raise); padding:14px 16px; }
.cell-k { font-size:11px; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; color:var(--sec); }
.cell-v { font-weight:700; font-size:32px; letter-spacing:-0.03em; font-variant-numeric:tabular-nums; color:var(--head); margin-top:6px; }
.cell-d { font-size:13px; font-weight:500; color:var(--acc); margin-top:4px; }
.cell-tv { font-weight:700; font-size:19px; letter-spacing:-0.02em; color:var(--head); margin-top:4px; }
.lever-list { border-top:1px solid var(--bandHair); margin-top:16px; }
.lever-row { display:flex; align-items:baseline; gap:14px; width:100%; min-height:44px; padding:14px 0;
  border-bottom:1px solid var(--bandHair); text-align:left; }
.lever-n { font-weight:700; font-size:13px; font-variant-numeric:tabular-nums; color:var(--bandAcc); flex:none; }
.lever-t { flex:1; font-size:14px; line-height:1.5; color:var(--onBand); }
.lever-st { font-size:11px; font-weight:500; letter-spacing:0.12em; text-transform:uppercase; color:var(--bandAcc); flex:none; white-space:nowrap; }
.chart { width:100%; height:auto; display:block; overflow:visible; margin:4px 0; }
.chart .axis { stroke:var(--hair); stroke-width:1; vector-effect:non-scaling-stroke; }
.chart .mid { stroke:var(--hair); stroke-width:1; stroke-dasharray:2 6; vector-effect:non-scaling-stroke; }
.chart .series-acc { fill:none; stroke:var(--acc); stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round; vector-effect:non-scaling-stroke; }
.chart .series-sec { fill:none; stroke:var(--sec); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; vector-effect:non-scaling-stroke; }
.chart .dot-acc { fill:var(--acc); }
.chart-foot { display:flex; justify-content:space-between; gap:8px; font-size:11px; font-weight:500; letter-spacing:0.04em; text-transform:uppercase; color:var(--ter); margin-top:10px; }
.legend { display:flex; gap:18px; margin-bottom:12px; }
.lg { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:500; color:var(--sec); }
.lg-line { width:16px; height:2px; } .lg-line.acc { background:var(--acc); } .lg-line.sec { background:var(--sec); }
.ml-scroll { overflow-x:auto; }
.ml-table { min-width:600px; }
.ml-row { display:flex; padding:13px 0; border-bottom:1px solid var(--hair); font-variant-numeric:tabular-nums; }
.ml-head { padding-bottom:10px; }
.ml-head .ml-wk, .ml-head .ml-c { font-size:11px; font-weight:500; letter-spacing:0.10em; text-transform:uppercase; color:var(--sec); }
.ml-cur .ml-wk { color:var(--acc); }
.ml-wk { width:44px; flex:none; font-size:13px; font-weight:700; }
.ml-c { flex:1; font-size:13px; font-weight:500; color:var(--ink); }
.lever-plain { border-top:1px solid var(--hair); }
.lp-row { display:flex; align-items:baseline; gap:14px; padding:13px 0; border-bottom:1px solid var(--hair); }
.lp-n { font-weight:700; font-size:13px; font-variant-numeric:tabular-nums; color:var(--acc); flex:none; }
.lp-t { flex:1; font-size:14px; line-height:1.55; color:var(--ink); }
.lp-since { font-size:11px; font-weight:500; letter-spacing:0.10em; text-transform:uppercase; color:var(--sec); flex:none; white-space:nowrap; }
.m-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:8px; }
.m-field { display:flex; flex-direction:column; gap:6px; font-size:11px; font-weight:500; letter-spacing:0.10em; text-transform:uppercase; color:var(--sec); }
.m-field input { height:48px; background:var(--field); border:1px solid var(--hair); border-radius:2px; padding:0 12px; font-size:16px; color:var(--head); }
.m-field input:focus { outline:none; border-color:var(--acc); box-shadow:0 0 0 3px var(--accWash); }
.m-check { display:flex; align-items:center; gap:10px; margin-top:14px; font-size:14px; color:var(--ink); }

/* ---- plan ------------------------------------------------------------------*/
.plan-head { flex-direction:column; }
.plan-title-row { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; width:100%; }
.tag { border:1px solid var(--accLine); background:var(--accWash); color:var(--acc); border-radius:100px;
  padding:7px 13px; font-size:11px; font-weight:500; letter-spacing:0.10em; text-transform:uppercase; white-space:nowrap; }
.plan-bar { height:2px; background:var(--hair); margin-top:16px; width:100%; }
.plan-bar-fill { height:100%; background:var(--acc); }
.plan-slider { width:100%; margin-top:12px; accent-color:var(--acc); }
.targets .cell { min-width:calc(50% - 1px); }
.pweek { border-top:1px solid var(--hair); }
.pweek-row { padding:14px 0; border-bottom:1px solid var(--hair); }
.pweek-top { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.pweek-day { font-size:17px; font-weight:600; letter-spacing:-0.01em; color:var(--head); }
.pweek-sleep { font-size:11px; font-weight:500; letter-spacing:0.08em; text-transform:uppercase; color:var(--ter); white-space:nowrap; }
.pweek-am { font-size:14px; line-height:1.6; color:var(--ink); margin-top:6px; }
.pweek-pm { font-size:13px; line-height:1.55; color:var(--sec); margin-top:3px; }
.blocks { display:flex; flex-direction:column; gap:24px; }
.block-title { font-weight:700; font-size:22px; letter-spacing:-0.02em; color:var(--head); margin:0 0 6px; }
.block-rows { border-top:1px solid var(--hair); }
.block-row { display:flex; align-items:baseline; gap:14px; padding:13px 0; border-bottom:1px solid var(--hair); }
.block-ex { flex:1; min-width:0; }
.block-n { display:block; font-size:15px; line-height:1.35; color:var(--ink); }
.block-v { display:block; font-size:13px; line-height:1.45; color:var(--sec); margin-top:2px; }
.block-s { font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--acc); text-align:right; max-width:44%; }
.extras { border-top:1px solid var(--hair); }
.extra-row { padding:13px 0; border-bottom:1px solid var(--hair); font-size:14px; line-height:1.55; color:var(--ink); }

/* ---- check in --------------------------------------------------------------*/
.serif-lede { font-family:'Libre Baskerville',Georgia,serif; font-size:17px; line-height:1.75; color:var(--ink); }
.small-lede { font-size:15px; margin-bottom:14px; }
.checkin-pre { margin:0; background:var(--field); border:1px solid var(--hair); border-radius:4px; padding:16px;
  font-family:'Inter',system-ui,sans-serif; font-size:13.5px; line-height:1.95; color:var(--ink);
  white-space:pre-wrap; word-break:break-word; font-variant-numeric:tabular-nums; }
.ta { width:100%; min-height:84px; background:var(--field); border:1px solid var(--hair); border-radius:4px;
  padding:14px; font-family:'Libre Baskerville',Georgia,serif; font-style:italic; font-size:15px; color:var(--ink);
  margin-top:10px; resize:vertical; }
.ta:first-of-type { margin-top:0; }
.ta:focus { outline:none; border-color:var(--acc); box-shadow:0 0 0 3px var(--accWash); }

/* ---- settings --------------------------------------------------------------*/
.set-list { border-top:1px solid var(--hair); }
.set-row { display:flex; align-items:center; gap:14px; min-height:60px; padding:12px 0; border-bottom:1px solid var(--hair); }
.set-k { flex:1; font-size:15px; font-weight:600; color:var(--head); }
.set-v { font-size:15px; font-weight:500; font-variant-numeric:tabular-nums; color:var(--sec); text-align:right; }
.rem-row { display:flex; align-items:center; gap:14px; width:100%; min-height:64px; padding:12px 0; border-bottom:1px solid var(--hair); text-align:left; }
.rem-t { width:62px; flex:none; font-size:15px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--acc); }
.rem-mid { flex:1; min-width:0; }
.rem-title { display:block; font-size:15px; font-weight:600; color:var(--head); }
.rem-sub { display:block; font-size:13px; color:var(--sec); margin-top:2px; line-height:1.4; }
.rem-copy { font-size:11px; font-weight:500; letter-spacing:0.12em; text-transform:uppercase; color:var(--ter); flex:none; }
.seg-ctrl { display:flex; border:1px solid var(--hair); border-radius:2px; overflow:hidden; }
.seg-btn { flex:1; height:52px; background:transparent; color:var(--sec); border-right:1px solid var(--hair);
  font-weight:600; font-size:13px; letter-spacing:0.08em; text-transform:uppercase; }
.seg-btn:last-child { border-right:0; }
.seg-on { background:var(--accWash); color:var(--acc); }
.data-btns { display:flex; flex-direction:column; gap:8px; }
.data-btns .block-btn { margin-top:0; }

/* ---- motion off ------------------------------------------------------------*/
@media (prefers-reduced-motion: reduce) {
  * { transition:none !important; animation:none !important; }
}