/* The smaller pages (thanks, key, terms, privacy): the home page's colours, type scale and spacing, a simple header
   and footer, and one column of text. Keep the tokens in step with the :root block in index.html. */
:root{
  --bg:oklch(19% .01 265);--bg-alt:oklch(21.5% .011 265);
  --surface:oklch(24% .012 265);--surface-2:oklch(28% .013 265);
  --line:oklch(33% .013 265);--line-2:oklch(41% .015 265);
  --text:oklch(96% .004 265);--text-2:oklch(85% .012 265);--text-3:oklch(76% .014 265);
  --brand:oklch(83% .085 295);--brand-hover:oklch(88% .07 295);--on-brand:oklch(20% .02 280);
  --ok:oklch(84% .1 158);--ok-tint:oklch(33% .045 160);--look:oklch(90% .15 100);
  --shadow:0 1px 0 oklch(100% 0 0/.04) inset,0 30px 60px -36px oklch(0% 0 0/.7);
  --font-head:"Bricolage Grotesque",system-ui,"Segoe UI",sans-serif;
  --font-body:"Atkinson Hyperlegible Next",system-ui,"Segoe UI",sans-serif;
  --font-mono:"Geist Mono",ui-monospace,Consolas,monospace;
  --fs-small:.9375rem;--fs-note:1.0625rem;--fs-body:1.1875rem;--fs-lead:1.5rem;--fs-title:2rem;--fs-heading:3rem;--fs-display:5rem;
  --sp-4:4px;--sp-8:8px;--sp-12:12px;--sp-16:16px;--sp-24:24px;--sp-32:32px;--sp-48:48px;--sp-64:64px;--sp-96:96px;--sp-128:128px;
  --gutter:clamp(var(--sp-16),4vw,var(--sp-48));
  color-scheme:dark;
}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--bg);color:var(--text);
     font:430 var(--fs-body)/1.6 var(--font-body);-webkit-font-smoothing:antialiased}
a{color:var(--brand);font-weight:700;text-decoration-thickness:2px;text-underline-offset:4px}
a:hover{color:var(--brand-hover)}
:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:6px}
[hidden]{display:none!important}

header .top{max-width:1160px;margin:0 auto;padding:var(--sp-24) var(--gutter);display:flex;align-items:center}
.brand{display:flex;align-items:center;gap:var(--sp-12);text-decoration:none;font:700 var(--fs-lead)/1 var(--font-head);letter-spacing:-.025em;color:var(--text)}
.brand svg{width:38px;height:38px;flex:none}
.brand .pc{color:var(--brand)}
.logo .disc{fill:var(--brand)}
.logo .mark{fill:none;stroke:var(--bg);stroke-width:7;stroke-linecap:round;stroke-linejoin:round}

main{flex:1;padding:var(--sp-32) var(--gutter) var(--sp-96)}
article{max-width:44rem;margin:0 auto}
h1{margin:0 0 var(--sp-12);font:720 clamp(var(--fs-title),6vw,var(--fs-heading))/1.08 var(--font-head);letter-spacing:-.015em}
h2{margin:var(--sp-48) 0 var(--sp-12);font:700 var(--fs-lead)/1.25 var(--font-head);letter-spacing:-.01em}
h2:first-child{margin-top:0}
p,li{color:var(--text-2)}
p{margin:0 0 var(--sp-16)}
b,strong{color:var(--text)}
ul,ol{margin:0 0 var(--sp-16);padding-left:var(--sp-24)}
li{margin:var(--sp-8) 0}
li::marker{color:var(--brand);font-weight:700}
.lead{font-size:var(--fs-lead);line-height:1.45}
.small{font-size:var(--fs-note);color:var(--text-3)}
.updated{font:500 var(--fs-small)/1.4 var(--font-mono);color:var(--text-3);margin-bottom:var(--sp-32)}
.card{margin:var(--sp-32) 0;padding:var(--sp-32);border:1px solid var(--line);border-radius:22px;background:var(--surface);box-shadow:var(--shadow)}
.summary{padding:var(--sp-24) var(--sp-32);border:1px solid var(--line);border-radius:18px;background:var(--bg-alt)}
.note{padding:var(--sp-16) var(--sp-24);border:1.5px solid var(--line-2);border-radius:16px;background:var(--surface);color:var(--text)}
.note.warn{border-color:var(--look)}
.keybox{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-12);margin:var(--sp-8) 0 var(--sp-16)}
.key{flex:1 1 auto;padding:var(--sp-16);border:1.5px solid var(--brand);border-radius:14px;background:var(--bg);font:600 clamp(var(--fs-note),3.2vw,var(--fs-lead))/1.3 var(--font-mono);
     letter-spacing:.04em;color:var(--text);overflow-wrap:anywhere;user-select:all}
.btn{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;padding:var(--sp-16) var(--sp-24);border:0;border-radius:14px;
     background:var(--brand);color:var(--on-brand);font:700 var(--fs-note)/1 var(--font-body);cursor:pointer;text-decoration:none}
.btn:hover{background:var(--brand-hover);color:var(--on-brand)}
.btn.done{background:var(--ok);color:var(--on-brand)}
.row{display:flex;flex-wrap:wrap;gap:var(--sp-12);margin-top:var(--sp-8)}
label{display:block;margin-bottom:var(--sp-8);font-size:var(--fs-note);color:var(--text-2)}
input{flex:1 1 16rem;min-width:0;padding:var(--sp-16);border:1.5px solid var(--line-2);border-radius:14px;background:var(--bg);color:var(--text);font:430 var(--fs-body)/1.2 var(--font-body)}
input:focus{outline:none;border-color:var(--brand)}
.dots::after{content:"";display:inline-block;width:1.2em;text-align:left;animation:dots 1.2s steps(4) infinite}
@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
@media(prefers-reduced-motion:reduce){.dots::after{animation:none;content:"..."}}

footer{padding:var(--sp-32) var(--gutter);border-top:1px solid var(--line);background:var(--bg-alt);font-size:var(--fs-note)}
footer ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-8) var(--sp-32)}
footer a{color:var(--text);text-decoration:none}
footer a:hover{color:var(--text);text-decoration:underline;text-decoration-color:var(--brand)}
@media(max-width:560px){.card,.summary{padding:var(--sp-24)} .keybox .btn{flex:1 1 100%}}