:root{
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  --ground:#E8EFF4;
  --panel:#F7FAFC;
  --ink:#123A5E;
  --ink-soft:#4C6B88;
  --rule:#C3D3DF;
  --plate-a:#184C7D;
  --plate-b:#11375C;
  --plate-c:#0C2A47;
  --plate-line:#E4EFF7;
  --sun:#F2C14E;
  --sun-ink:#3A2A00;
  --ok:#2E7D5B;
  --warn:#B4532A;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Archivo","Helvetica Neue",Arial,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#071A2B;--panel:#0C2439;--ink:#E4EFF7;--ink-soft:#9AB4CA;--rule:#1D3C59;
    --plate-a:#1A5288;--plate-b:#123D66;--plate-c:#0D2E4E;--ok:#6CC9A0;--warn:#F0A07A;
  }
}
:root[data-theme="dark"]{
  --ground:#071A2B;--panel:#0C2439;--ink:#E4EFF7;--ink-soft:#9AB4CA;--rule:#1D3C59;
  --plate-a:#1A5288;--plate-b:#123D66;--plate-c:#0D2E4E;--ok:#6CC9A0;--warn:#F0A07A;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.5;-webkit-text-size-adjust:100%}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--sun);outline-offset:2px}
a{color:inherit}

.app{max-width:1080px;margin:0 auto;padding:0 16px 40px}
.masthead{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 16px;padding:14px 0 10px}
.masthead h1{font-family:var(--serif);font-weight:500;font-size:1.25rem;line-height:1.2;margin:0;letter-spacing:-.005em}
.masthead p{margin:0;font-size:.8125rem;color:var(--ink-soft)}
.nav{display:flex;flex-wrap:wrap;gap:2px 14px;font-size:.875rem}
.nav a{text-decoration:none;color:var(--ink-soft);padding:4px 0;border-bottom:2px solid transparent}
.nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--sun)}

.fig{display:contents}
.stick{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--ground);padding-bottom:10px}
.plate{height:34vh;min-height:200px;max-height:440px;border-radius:5px;overflow:hidden;
  background:radial-gradient(circle at 50% 46%,var(--plate-a) 0%,var(--plate-b) 58%,var(--plate-c) 100%);transition:height .25s ease}
body.typing .plate{height:20vh;min-height:140px}
body.nofig .fig{display:none}
.plate svg{display:block;width:100%;height:100%}
.under{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin:2px 0 18px}
.caption{margin:0;font-family:var(--serif);font-style:italic;font-size:.9375rem;color:var(--ink-soft);max-width:34ch}
.forms{display:inline-flex;border:1px solid var(--rule);border-radius:999px;padding:3px;background:var(--panel)}
.forms button{border:0;background:transparent;padding:6px 13px;border-radius:999px;font-size:.8125rem;font-weight:500;color:var(--ink-soft);cursor:pointer}
.forms button[aria-pressed="true"]{background:var(--ink);color:var(--ground)}

.card{background:var(--panel);border:1px solid var(--rule);border-radius:5px;padding:20px 18px 18px}
.card + .card{margin-top:14px}
.where{margin:0 0 10px;font-size:.8125rem;color:var(--ink-soft)}
h2.q{font-family:var(--serif);font-size:1.4rem;line-height:1.3;font-weight:400;margin:0 0 16px;max-width:30em;letter-spacing:-.005em}
h2.q .stem{display:block;font-size:1rem;font-style:italic;color:var(--ink-soft);margin-bottom:4px}
h2.t{font-family:var(--serif);font-size:1.25rem;font-weight:500;margin:0 0 10px}
h3{font-family:var(--serif);font-weight:500;font-size:1.0625rem;margin:18px 0 6px}
.lead{font-family:var(--serif);font-size:1.0625rem;line-height:1.55;margin:0 0 12px;max-width:34em}
.small{font-size:.875rem;color:var(--ink-soft);margin:0 0 12px;max-width:44em}
.small.err{color:var(--warn)}
.small.ok{color:var(--ok)}
textarea,input[type=text],input[type=month],input[type=date],input[type=url],input[type=password],select{display:block;width:100%;border:1px solid var(--rule);border-radius:4px;background:var(--ground);color:var(--ink);font-family:var(--serif);font-size:1.0625rem;line-height:1.5;padding:10px 12px}
textarea{min-height:104px;resize:vertical}
textarea.code,input.code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.8125rem}
textarea:focus,input:focus{outline:2px solid var(--ink-soft);outline-offset:0}
label.f{display:block;font-size:.8125rem;color:var(--ink-soft);margin:10px 0 4px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:520px){.grid2{grid-template-columns:1fr}}
.row{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;align-items:center}
.btn{border:1px solid var(--rule);background:transparent;border-radius:4px;padding:10px 16px;font-weight:500;cursor:pointer}
.btn:disabled{opacity:.5;cursor:default}
.btn.primary{background:var(--sun);border-color:var(--sun);color:var(--sun-ink)}
.btn.quiet{border-color:transparent;color:var(--ink-soft);padding-left:6px;padding-right:6px;text-decoration:underline;text-underline-offset:3px}
.btn.small{padding:6px 10px;font-size:.8125rem}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips .btn{border-radius:999px;padding:9px 16px}
.chips .btn[aria-pressed="true"]{background:var(--ink);color:var(--ground);border-color:var(--ink)}
.chips .btn:hover{border-color:var(--ink-soft)}
.sub{border:1px dashed var(--rule);border-radius:4px;padding:10px 12px;margin-top:10px}
.sub .rm{float:right}
.list{list-style:none;margin:12px 0 0;padding:0;border-top:1px solid var(--rule)}
.list li{padding:10px 0;border-bottom:1px solid var(--rule)}
.list .id{font-weight:600;font-size:.875rem;margin-right:8px}
.list .tags{font-size:.8125rem;color:var(--ink-soft)}
.list .asked{display:block;font-size:.8125rem;color:var(--ink-soft);margin-top:2px}
.list .said{display:block;font-family:var(--serif);font-size:1rem;margin-top:2px;overflow-wrap:anywhere;white-space:pre-wrap}
.stat{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin:8px 0 14px}
.stat div{border:1px solid var(--rule);border-radius:4px;padding:10px 12px}
.stat b{display:block;font-family:var(--serif);font-size:1.5rem;font-weight:500;line-height:1.1}
.stat span{font-size:.8125rem;color:var(--ink-soft)}
table.sheet{width:100%;border-collapse:collapse;font-size:.8125rem;margin-top:10px}
table.sheet th,table.sheet td{text-align:left;vertical-align:top;padding:6px 6px;border-bottom:1px solid var(--rule)}
table.sheet th{font-weight:600;color:var(--ink-soft)}
.pill{display:inline-block;border:1px solid var(--rule);border-radius:999px;padding:1px 8px;font-size:.75rem;color:var(--ink-soft);margin-right:4px}
.pill.ok{border-color:var(--ok);color:var(--ok)}
.pill.warn{border-color:var(--warn);color:var(--warn)}
pre.brief{white-space:pre-wrap;font-family:var(--serif);font-size:.9375rem;line-height:1.5;background:var(--ground);border:1px solid var(--rule);border-radius:4px;padding:12px;max-height:60vh;overflow:auto}
.foot{margin-top:24px;font-size:.8125rem;color:var(--ink-soft)}
.toast{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);background:var(--ink);color:var(--ground);padding:10px 16px;border-radius:4px;font-size:.875rem;z-index:20;max-width:90vw}
[hidden]{display:none!important}
.progress{height:6px;background:var(--rule);border-radius:3px;overflow:hidden;margin:6px 0 14px}
.progress i{display:block;height:100%;background:var(--sun)}

@media (min-width:860px){
  .app{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,460px);grid-template-areas:"mast mast" "fig talk" "foot foot";column-gap:44px;padding:0 28px 56px}
  .masthead{grid-area:mast;padding-top:22px}
  .fig{display:block;grid-area:fig;position:sticky;top:18px;align-self:start}
  .talk{grid-area:talk}
  .foot{grid-area:foot}
  .stick{position:static;padding-bottom:12px}
  .plate,body.typing .plate{height:auto;max-height:none;aspect-ratio:1/1}
  h2.q{font-size:1.5rem}
  body.nofig .app{grid-template-columns:minmax(0,1fr);grid-template-areas:"mast" "talk" "foot"}
  body.nofig .talk{max-width:820px}
}

/* growth */
.ln{fill:none;stroke:var(--plate-line);stroke-linecap:round}
.dot{fill:var(--plate-line)}
.cell{fill:var(--plate-line)}
.grow{stroke-dasharray:1;stroke-dashoffset:0}
.new.grow{animation:draw .9s ease-out both,sunStroke 2.6s ease-out both}
.new.dot,.new.cell{animation:sunFill 2.6s ease-out both,arrive .5s ease-out both}
.new.dot.late,.new.cell.late{animation-delay:.55s,.55s}
.new.ln:not(.grow){animation:sunStroke 2.6s ease-out both}
@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes sunStroke{from{stroke:var(--sun)}to{stroke:var(--plate-line)}}
@keyframes sunFill{from{fill:var(--sun)}to{fill:var(--plate-line)}}
@keyframes arrive{from{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .new.grow,.new.dot,.new.cell,.new.ln:not(.grow){animation:none}
  .plate{transition:none}
}