@font-face{font-family:"Archivo";src:url(/fonts/archivo.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo";src:url(/fonts/archivo-ext.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{
  --face:#f4f4f1; --panel:#ffffff; --ink:#000000; --graphite:#57595b; --soft:#6c6e6a; --rule:#d4d5d0;
  --red:#d7381c; --red-ink:#b02c13; --amber:#e09a0c; --amber-ink:#875b00; --green:#1e8749; --green-ink:#17703b;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --face:#000000; --panel:#121312; --ink:#f4f4f1; --graphite:#a8aaa5; --soft:#8d8f8a; --rule:#30312e;
    --red:#ff5a3a; --red-ink:#ff7d61; --amber:#f2ae2e; --amber-ink:#f5c15a; --green:#3bb46b; --green-ink:#62d08e;
  }
}
:root[data-theme="dark"]{
  --face:#000000; --panel:#121312; --ink:#f4f4f1; --graphite:#a8aaa5; --soft:#8d8f8a; --rule:#30312e;
  --red:#ff5a3a; --red-ink:#ff7d61; --amber:#f2ae2e; --amber-ink:#f5c15a; --green:#3bb46b; --green-ink:#62d08e;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--face)}
body{margin:0;background:var(--face);color:var(--ink);font:400 17px/1.55 "Archivo",ui-sans-serif,system-ui,sans-serif;font-stretch:100%;
  font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
a{color:inherit;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px}
[hidden]{display:none!important}
code{font:500 .92em ui-monospace,"SF Mono",Menlo,Consolas,monospace}
.in{width:100%;max-width:1200px;margin:0 auto;padding:0 40px}
.wide{font-stretch:125%}

.bar{display:flex;align-items:center;gap:28px;height:76px}
.mark{display:flex;align-items:center;gap:11px;text-decoration:none;flex:none}
.mark svg{width:30px;height:30px;flex:none}
.mark span{font-stretch:125%;font-weight:640;font-size:19px;letter-spacing:-.005em}
.bar nav{margin-left:auto;display:flex;align-items:center;gap:26px;font-size:15px}
.bar nav a{text-decoration:none;color:var(--graphite);white-space:nowrap}
.bar nav a:hover,.bar nav a[aria-current]{color:var(--ink)}
.bar nav a[aria-current]{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:7px}

.btn{display:inline-flex;align-items:center;justify-content:center;height:46px;padding:0 22px;border:0;border-radius:23px;background:var(--ink);
  color:var(--face);font:inherit;font-weight:560;font-size:16px;cursor:pointer;text-decoration:none;white-space:nowrap}
.btn.small{height:38px;padding:0 17px;font-size:14.5px}
.btn.line{background:none;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn:disabled{opacity:.55;cursor:default}
.bar nav .btn{color:var(--face)} .bar nav .btn.line{color:var(--ink)}
.join{display:flex;gap:10px;margin:34px 0 0;max-width:500px}
.join input{flex:1;min-width:0;height:46px;padding:0 18px;border:1.5px solid var(--ink);border-radius:23px;background:var(--panel);font:inherit;font-size:16px;color:var(--ink)}
.join input::placeholder{color:var(--soft)}
.join input:focus{outline:none;box-shadow:0 0 0 4px color-mix(in srgb,var(--ink) 16%,transparent)}
.said{min-height:24px;margin:12px 0 0 18px;font-size:15px;font-weight:500}
.said:empty{min-height:0;margin-top:0}
.said.ok{color:var(--green-ink)} .said.bad{color:var(--red-ink)}
.small-print{margin:12px 0 0 18px;font-size:14px;color:var(--graphite)}
.small-print a{color:var(--graphite)} .small-print a:hover{color:var(--ink)}

h1{margin:0;font-stretch:125%;font-weight:600;font-size:clamp(46px,6.6vw,98px);line-height:.95;letter-spacing:-.018em}
h2{margin:0;font-stretch:125%;font-weight:600;font-size:clamp(30px,3.6vw,50px);line-height:1.04;letter-spacing:-.012em;max-width:16em}
.lede{margin:28px 0 0;max-width:30em;font-size:19.5px;line-height:1.5}
.intro{margin:22px 0 0;max-width:36em;font-size:18px}

.sec{padding:96px 0;border-top:1.5px solid var(--ink)}

.sheet{width:100%;margin:48px 0 0;border-collapse:collapse;font-size:17px}
.sheet th{width:230px;padding:17px 24px 17px 0;text-align:left;vertical-align:top;font-weight:600;font-stretch:112%;font-size:16px}
.sheet td{padding:17px 24% 17px 0}
.sheet tr{border-top:1px solid var(--rule)} .sheet tr:last-child{border-bottom:1px solid var(--rule)}

.hides{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 40px;margin:48px 0 0;padding:0;list-style:none}
.hides li{padding:20px 0 24px;border-top:1px solid var(--rule)}
.hides b{display:block;margin-bottom:6px;font-weight:600;font-stretch:112%;font-size:17.5px}
.hides span{display:block;font-size:16px;line-height:1.5;color:var(--graphite)}
.hides + .small-print{margin:30px 0 0}

.dial{position:relative;justify-self:center;width:min(100%,480px)}
.dial svg{display:block;width:100%;height:auto;overflow:visible}
.dial .dot{fill:var(--ink);transition:fill .35s ease}
.dial .dot.doubt{fill:var(--amber)} .dial .dot.down{fill:var(--red)}
.dial .pupil{fill:var(--ink);transition:fill .5s ease}
.dial .pupil.down{fill:var(--red)}
.dial .halo{fill:none;stroke:var(--ink);stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center}
.dial .halo.go{animation:halo .9s ease-out}
.dial .halo.doubt{stroke:var(--amber)} .dial .halo.down{stroke:var(--red)}
@keyframes halo{from{opacity:.55;transform:scale(1)}to{opacity:0;transform:scale(1.9)}}
.dial .tag{font:500 15px "Archivo",sans-serif;font-stretch:112%;fill:var(--graphite);opacity:0;transition:opacity .3s ease}
.dial .tag.on{opacity:1} .dial .tag.doubt{fill:var(--amber-ink)} .dial .tag.down{fill:var(--red-ink)}
.dial .say{min-height:4.4em;margin:18px auto 0;max-width:25em;text-align:center;font-size:16px;line-height:1.45;color:var(--graphite)}
.dial .say b{color:var(--ink);font-weight:600}
.dial .again{display:block;margin:4px auto 0;background:none;border:0;padding:6px 8px;font:inherit;font-size:14px;color:var(--graphite);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.dial .again:hover{color:var(--ink)}

.foot{padding:28px 0 44px;border-top:1px solid var(--rule);font-size:14px;color:var(--graphite)}
.foot .in{display:flex;flex-wrap:wrap;gap:10px 22px}
.foot a{text-decoration:none} .foot a:hover{color:var(--ink)}
.foot .first{margin-right:auto}

.doc{max-width:47em;padding:56px 0 96px}
.doc h1{font-size:clamp(38px,5.2vw,64px);line-height:1}
.doc .meta,.doc .lede{color:var(--graphite)}
.doc .meta{margin:18px 0 0;font-size:15px}
.doc .lede{margin-top:22px;font-size:19px;color:var(--ink)}
.doc h2{margin:60px 0 14px;font-size:clamp(22px,2.3vw,28px);font-stretch:118%;max-width:none;line-height:1.15}
.doc h3{margin:30px 0 8px;font-size:18px;font-weight:620;font-stretch:112%}
.doc p,.doc li{line-height:1.65}
.doc p{margin:0 0 14px} .doc ul,.doc ol{margin:0 0 14px;padding-left:22px} .doc li{margin:6px 0}
.doc b,.doc strong{font-weight:620}
.doc .tldr{margin:40px 0 12px;padding:24px 28px;border:1.5px solid var(--ink);border-radius:14px;background:var(--panel)}
.doc .tldr b{display:block;margin-bottom:8px;font-stretch:112%;font-size:18px}
.doc .tldr ul{margin:0}
.doc .wrap{overflow-x:auto}
.doc .t{width:100%;border-collapse:collapse;margin:10px 0 18px;font-size:15.5px}
.doc .t th{text-align:left;font-weight:600;font-stretch:112%;padding:10px 14px 10px 0;border-bottom:1.5px solid var(--ink);vertical-align:bottom}
.doc .t td{padding:11px 14px 11px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.doc .todo{background:color-mix(in srgb,var(--amber) 22%,transparent);color:var(--amber-ink);padding:0 4px;border-radius:3px}

@media (max-width:900px){
  .in{padding:0 20px}
  .bar{height:auto;min-height:64px;flex-wrap:wrap;gap:6px 16px;padding-top:12px;padding-bottom:12px}
  .bar nav{gap:16px;font-size:14.5px}
  .bar nav .far{display:none}
  .sec{padding:68px 0}
  .sheet th{width:auto;display:block;padding:16px 0 2px} .sheet td{display:block;padding:0 0 16px}
  .hides{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px}
  .dial .tag{font-size:21px}
  .join{flex-direction:column} .join input{flex:none;width:100%} .join .btn{width:100%}
  .said,.small-print{margin-left:0}
  .doc{padding:36px 0 72px}
  .doc .tldr{padding:20px}
}
@media (max-width:600px){ .hides{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){ .dial .halo.go{animation:none} .dial .dot,.dial .pupil,.dial .tag{transition:none} }