@font-face{font-family:"IBM Plex Sans";src:url(../fonts/plex.woff2) format("woff2");font-weight:100 700;font-stretch:75% 100%;font-display:swap}
/* Tokens from design/DESIGN.md. The only place colours, type sizes, spacing and radii are defined.
   Read at build time by src/seo/pages.ts too, so the web pages share them. */
:root {
  color-scheme: light dark;
  --surface: #FAFBFB;
  --surface-2: #EEF2F3;
  --surface-3: #E2E8EA;
  --on-surface: #142026;
  --muted: #53636B;
  --outline: #7D8D94;
  --outline-variant: #DCE3E5;
  --accent: #C0281C;
  --on-accent: #FFFFFF;
  --accent-container: #FBE6E3;
  --on-accent-container: #7A140D;
  --error: #8C1D18;
  --scrim: rgb(20 32 38 / 0.32);
  --shadow-2: 0 8px 24px rgb(15 20 22 / 0.18);

  --font: "IBM Plex Sans", sans-serif;
  --fs-answer: 56px;
  --fs-answer-unit: 32px;
  --fs-title: 22px;
  --fs-h1: 28px;
  --fs-h2: 20px;
  --fs-value: 20px;
  --fs-key: 20px;
  --fs-body: 17px;
  --fs-caption: 14px;
  --fs-label: 14px;
  --fs-nav: 12px;
  --stretch-answer: 75%;
  --stretch-value: 85%;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s12: 48px;
  --target: 48px;
  --row: 52px;
  --page-max: 640px;

  --r-control: 8px;
  --r-band: 12px;
  --r-sheet: 28px;
  --r-full: 999px;

  --t-band: 150ms ease-out;
}
@media (prefers-color-scheme: dark) {
  :root {
    --surface: #0F1416;
    --surface-2: #182024;
    --surface-3: #222C31;
    --on-surface: #E6ECEE;
    --muted: #98A7AE;
    --outline: #6F8089;
    --outline-variant: #24303A;
    --accent: #FF7A6E;
    --on-accent: #2A0905;
    --accent-container: #40201B;
    --on-accent-container: #FFD9D4;
    --error: #FFB4AB;
    --scrim: rgb(0 0 0 / 0.5);
    --shadow-2: 0 8px 24px rgb(0 0 0 / 0.5);
  }
}
@media (prefers-reduced-motion: reduce) {
  :root { --t-band: 0ms; }
}

*{box-sizing:border-box}html,body{margin:0}
body{background:var(--surface);color:var(--on-surface);font:400 var(--fs-body)/1.5 var(--font)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
a{color:var(--on-surface);text-underline-offset:3px}
.site,.page,.foot{max-width:var(--page-max);margin:0 auto;padding:0 var(--s4)}
.site{height:64px;display:flex;align-items:center}
.brand{font-size:var(--fs-title);font-weight:600;text-decoration:none;min-height:var(--target);display:inline-flex;align-items:center}
.page{padding-bottom:var(--s8)}
h1{font-size:var(--fs-h1);line-height:1.2;font-weight:600;margin:var(--s2) 0 var(--s4)}
h2{font-size:var(--fs-h2);line-height:1.3;font-weight:600;margin:var(--s8) 0 var(--s3)}
p,li,dd,dt{max-width:32em}
.crumbs{font-size:var(--fs-caption);color:var(--muted)}
.crumbs a{color:var(--muted);display:inline-flex;align-items:center;min-height:var(--target)}
.lead{color:var(--muted);margin:0 0 var(--s6)}
.lead strong span{font-size:var(--fs-answer-unit);font-weight:500;margin-left:var(--s1)}
.lead strong{display:block;color:var(--on-surface);font-size:var(--fs-answer);font-weight:600;font-stretch:var(--stretch-answer);line-height:1;margin-top:var(--s1);font-variant-numeric:tabular-nums;white-space:nowrap}
.t{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.t caption{text-align:left;font-size:var(--fs-caption);color:var(--muted);padding-bottom:var(--s2)}
.t th,.t td{padding:var(--s3) 0;text-align:left;font-weight:400;vertical-align:baseline}
.t thead th{font-size:var(--fs-label);font-weight:600;color:var(--muted);padding:var(--s2) 0;border-bottom:1px solid var(--outline-variant)}
.t td,.t thead th:not(:first-child){text-align:right;white-space:nowrap;padding-left:var(--s4)}
.t td strong{font-size:var(--fs-value);font-weight:600;font-stretch:var(--stretch-value)}
.t tbody th a{display:inline-flex;align-items:center;min-height:var(--target);min-width:var(--target);margin:calc(-1 * var(--s3)) 0}
.jug tbody th{position:relative;border-left:2px solid var(--accent);padding-left:var(--s8)}
.jug tbody th::before{content:"";position:absolute;left:0;top:50%;height:2px;margin-top:-1px;background:var(--accent);width:var(--s2)}
.jug tbody th.tick-long::before{width:var(--s5)}
.jug tbody th.tick-mid::before{width:14px}
.jug tbody th.off{border-left-color:transparent}
.jug tbody th.off::before{display:none}
.jug tbody tr:nth-child(5) th,.jug tbody tr:nth-child(5) td{padding-top:var(--s6)}
.jug thead th:first-child{padding-left:var(--s8)}
.note,.hint{color:var(--muted);font-size:var(--fs-caption);line-height:1.4}
.hint a{display:inline-flex;align-items:center;min-height:var(--target)}
.rel+.hint{margin-top:var(--s4)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--target);padding:0 var(--s5);margin:var(--s6) 0 var(--s1);border-radius:var(--r-control);background:var(--accent);color:var(--on-accent);font-weight:600;text-decoration:none}
.faq dt{font-weight:600;margin-top:var(--s4)}.faq dd{margin:var(--s1) 0 0;color:var(--muted)}
.rel{display:flex;flex-wrap:wrap;gap:var(--s2);list-style:none;padding:0;margin:0}
.rel a{display:inline-flex;align-items:center;min-height:var(--target);padding:0 var(--s4);border:1px solid var(--outline);border-radius:var(--r-full);text-decoration:none;font-size:var(--fs-label);font-weight:600}
.foot{padding-bottom:var(--s8)}
.foot>a{display:inline-flex;align-items:center;min-height:var(--target)}
.others{margin-top:var(--s4)}
.others h2{font-size:var(--fs-label);font-weight:600;line-height:1.3;color:var(--muted);margin:0 0 var(--s1)}
.others ul{list-style:none;padding:0;margin:0}
.others a{display:flex;flex-direction:column;justify-content:center;min-height:var(--target);padding:var(--s2) 0;text-decoration:none}
.others b{font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.others span{font-size:var(--fs-caption);line-height:1.4;color:var(--muted)}
.ad-slot{margin:var(--s6) 0;padding:var(--s2) var(--s3) var(--s3);background:var(--surface-2);border-radius:var(--r-control)}
.ad-label{font-size:var(--fs-caption);color:var(--muted);margin:0 0 var(--s1)}
.ad-slot ins{display:block;min-height:100px}
.ad-slot ins{color-scheme:light}
.ad-slot ins[data-ad-status="unfilled"]{visibility:hidden}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.legal h2{margin-top:var(--s6)}
.legal ul{padding-left:var(--s5)}
.legal li{margin:var(--s1) 0}
.legal a{word-break:break-word}
@media (min-width:700px){html{background:var(--surface-2)}body{max-width:var(--page-max);margin:0 auto;min-height:100vh}}