@font-face{font-family:"Anybody";src:url(fonts/anybody-wdth.woff2) format("woff2");font-weight:100 900;font-stretch:50% 150%;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url(fonts/atkinson-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url(fonts/atkinson-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible Mono";src:url(fonts/atkinson-mono-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible Mono";src:url(fonts/atkinson-mono-500.woff2) format("woff2");font-weight:500;font-display:swap}

:root{
  --ground:#0b0b0c;--bone:#e6e4dd;--lime:#d6ff3b;--pink:#ff2e6a;--graphite:#6b6b70;
  --dim:rgba(230,228,221,.72);
  --m:40px;--gut:24px;
  --display:"Anybody","Arial Narrow",sans-serif;
  --text:"Atkinson Hyperlegible",system-ui,sans-serif;
  --mono:"Atkinson Hyperlegible Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
}
*{box-sizing:border-box}
html{background:var(--ground);color:var(--bone);-webkit-text-size-adjust:100%}
body{margin:0;font:400 17px/1.5 var(--text)}
a{color:var(--bone);text-decoration-color:var(--graphite);text-underline-offset:3px}
a:hover{text-decoration-color:var(--lime)}
a:focus-visible,button:focus-visible{outline:1px solid var(--lime);outline-offset:3px}
b{font-weight:700}
code,.mono{font-family:var(--mono);font-size:.92em}
.g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);padding:0 var(--m)}

/* top rule */
.top{align-items:center;height:64px;border-bottom:1px solid var(--graphite)}
.brand{grid-column:1/4;display:flex;align-items:center;gap:12px;text-decoration:none;font:650 24px/1 var(--display);font-stretch:72%;letter-spacing:.02em}
.mark{display:block}
.top .meta{grid-column:4/10;margin:0;font:400 13px/1 var(--mono);color:var(--dim);letter-spacing:.04em}
.top nav{grid-column:10/13;justify-self:end;display:flex;gap:28px;font-size:15px}

/* plates */
.plate{margin:0;padding-top:28px;padding-bottom:48px;border-top:1px solid var(--graphite);position:relative}
.cap{grid-column:1/4;font-size:15px;line-height:1.5;padding-right:8px}
.cap p{margin:0 0 12px}
.cap h2{font:700 30px/1.05 var(--display);font-stretch:96%;margin:0 0 14px}
.fn{font:800 15px/1 var(--display);font-stretch:52%;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:18px!important;display:flex;gap:2px;align-items:baseline}
.fn::after{content:"";flex:1;height:1px;background:var(--graphite);margin-left:12px;align-self:center}
.plot{grid-column:4/13;position:relative;min-width:0}
.k{font-family:var(--mono);font-size:.9em;padding:0 .1em;border-bottom:1px solid}
.ok{color:var(--lime)}.bad{color:var(--pink)}
.dim{color:var(--dim)}
.verdict{font:500 14px/1.45 var(--mono);color:var(--bone);min-height:5.9em;border-left:1px solid var(--graphite);padding-left:10px}
.verdict.fail{border-left-color:var(--pink)}
button{font:500 14px/1 var(--mono);color:var(--bone);background:none;border:1px solid var(--bone);padding:10px 14px;cursor:pointer;border-radius:0}
button:hover{border-color:var(--lime);color:var(--lime)}

/* fig 1: the plate is the first screen */
.hero{border-top:0;padding-top:16px;padding-bottom:40px;grid-template-rows:calc(100vh - 64px - 16px - var(--caph)) auto auto}
@supports (height:100svh){.hero{grid-template-rows:calc(100svh - 64px - 16px - var(--caph)) auto auto}}
.hero{--caph:158px}
.hero>.plot{grid-column:1/13;grid-row:1;min-height:360px;contain:strict}
#fan svg{position:absolute;inset:0;display:block;width:100%;height:100%;overflow:visible}
#lanes svg{display:block;width:100%;height:100%;overflow:visible}
.hero>.cap{grid-column:1/9;grid-row:2;padding-top:18px;border-top:1px solid var(--graphite)}
.hero>.readout{grid-column:9/13;grid-row:2;padding-top:18px;border-top:1px solid var(--graphite);display:flex;gap:20px;align-items:flex-start;justify-content:space-between}
.hero .verdict{margin:0;flex:1;max-width:44ch}
.hero h1{margin:0 0 6px;font:700 19px/1.35 var(--text);letter-spacing:0}
.fn-inline{font:800 19px/1 var(--display);font-stretch:52%;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.dash{color:var(--graphite)}
.hero .cap p{margin:0 0 8px;max-width:78ch}
.hero .cap .one{font-size:16px}
.hero .cap .read{font-size:14px;color:var(--dim)}
.hero .legend{grid-row:3;grid-column:1/13;contain:layout}
svg text{font-family:var(--mono);fill:var(--bone)}
.legend{grid-column:4/13;list-style:none;margin:24px 0 0;padding:0;font-size:13px;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));column-gap:var(--gut);row-gap:6px}
.legend li{display:grid;grid-template-columns:auto 1fr;column-gap:10px;border-top:1px solid #2a2a2d;padding-top:6px}
.legend .ip{color:var(--bone)}
.legend .hx{grid-column:1/3;color:var(--dim);word-break:break-all;letter-spacing:.02em}
.legend .st{justify-self:end}
.legend li.ok .st{color:var(--lime)}.legend li.bad .st{color:var(--pink)}

/* fig 2 matrix */
.matrix{width:100%;border-collapse:collapse;font-size:16px}
.matrix th,.matrix td{text-align:left;padding:14px 16px 14px 0;border-bottom:1px solid #2a2a2d;vertical-align:baseline}
.matrix thead th{font:400 12px/1 var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--dim);border-bottom:1px solid var(--graphite)}
.matrix tbody th{font-weight:700}
.matrix td:nth-child(2),.matrix td:nth-child(3),.matrix thead th:nth-child(2),.matrix thead th:nth-child(3){width:118px;text-align:center}
.matrix .how{color:var(--dim);font-size:15px}
.m{display:inline-block;width:12px;height:12px;vertical-align:-1px}
.m.yes{background:var(--lime)}
.m.no{border-top:1px solid var(--graphite);height:1px;vertical-align:4px;width:14px}
.m.part{border:1px solid var(--bone);border-radius:50%}
.key{margin:14px 0 0;font-size:12px;color:var(--dim);display:flex;gap:10px;align-items:center}
.key .m{margin-left:8px}

/* fig 3 */
#lanes{aspect-ratio:1000/300}

/* fig 4: STARTTLS ladder */
.new{font:500 11px/1 var(--mono);color:var(--lime);border:1px solid var(--lime);padding:2px 4px 1px;margin-left:6px;vertical-align:2px;white-space:nowrap}
.seg{display:flex;flex-wrap:wrap;margin:18px 0 0;border-left:1px solid var(--graphite)}
.seg+.seg{margin-top:10px}
.seg button{border:0;border-bottom:1px solid transparent;padding:8px 10px 7px;font-size:13px;color:var(--dim)}
.seg button:hover{color:var(--bone);border-bottom-color:var(--graphite)}
.seg button[aria-pressed="true"]{color:var(--lime);border-bottom-color:var(--lime)}
.seg.two button[data-n="bad"][aria-pressed="true"]{color:var(--pink);border-bottom-color:var(--pink)}
.cap .note{margin-top:20px;font-size:13px;color:var(--dim)}
.cap .note code{overflow-wrap:anywhere}
.cmdline{margin:0 0 8px;font-size:14px;color:var(--bone);min-height:1.5em;overflow-x:auto;white-space:nowrap}
.cmdline .dim{margin-right:.6em}
#ladder svg{display:block;width:100%;height:auto;overflow:visible}
#fig4 .verdict{margin:6px 0 0;min-height:3em;max-width:none}
#fig4 .verdict.fail{color:var(--bone)}
#fig4 .verdict b{font-weight:500}
#fig4 .verdict .ok{color:var(--lime)}#fig4 .verdict .bad{color:var(--pink)}

/* table 1 */
.out{margin:0;padding:22px 0;border-top:1px solid var(--graphite);border-bottom:1px solid var(--graphite);font-size:14px;line-height:1.7;overflow-x:auto;white-space:pre}
.install{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));column-gap:var(--gut);margin-top:36px}
.install .lbl{grid-column:1/2;margin:6px 0 0;font:400 12px/1 var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--dim)}
.cmd{grid-column:2/10;display:flex;gap:14px;align-items:stretch;border-left:1px solid var(--lime);padding-left:16px}
.cmd code{flex:1;font-size:clamp(14px,1.45vw,20px);color:var(--lime);align-self:center;word-break:break-all}
.try{grid-column:2/10;color:var(--dim);font-size:15px;margin:14px 0 0}

footer{border-top:1px solid var(--graphite);padding-top:20px;padding-bottom:40px;font-size:14px;color:var(--dim)}
footer p{grid-column:1/8;margin:0}
footer .colo{grid-column:8/13;justify-self:end;font-size:13px}

/* svg animation states */
.ray,.spoke,.ring,.lane{fill:none}
.anim .ray{transition:stroke .5s linear}
.slip{transition:transform .7s cubic-bezier(.2,.7,.2,1)}

@media (max-width:1100px){
  .top .meta{grid-column:4/9}
}
@media (max-width:760px){
  :root{--m:20px;--gut:16px}
  body{font-size:16px}
  .top{height:56px}
  .brand{grid-column:1/7}
  .top .meta{display:none}
  .top nav{grid-column:7/13;gap:18px}
  .hero{--caph:150px;padding-top:8px;grid-template-rows:calc(100vh - 56px - 8px - var(--caph)) auto auto auto}
  @supports (height:100svh){.hero{grid-template-rows:calc(100svh - 56px - 8px - var(--caph)) auto auto auto}}
  .hero>.plot{min-height:420px;margin-bottom:0}
  .hero>.cap{grid-column:1/13;grid-row:2;padding-top:14px}
  .hero h1,.fn-inline{font-size:17px}
  .hero .cap .one{font-size:15px}
  .hero>.readout{grid-column:1/13;grid-row:3;border-top:0;padding-top:8px;flex-direction:column;gap:12px}
  .hero .legend{grid-row:4}
  .cap,.plot,.legend{grid-column:1/13}
  .plate{padding-top:28px}
  .plot{margin-bottom:20px}
  .cap+.plot{margin-top:8px}
  .legend{order:1;grid-template-columns:1fr}
  #lanes{aspect-ratio:360/300}
  .matrix .how{display:none}
  .matrix th,.matrix td{padding:12px 8px 12px 0}
  .matrix td:nth-child(2),.matrix td:nth-child(3),.matrix thead th:nth-child(2),.matrix thead th:nth-child(3){width:64px}
  .matrix thead th{font-size:10px;letter-spacing:.04em}
  .matrix{font-size:15px}
  .out{font-size:11.5px}
  .cmdline{font-size:12px}
  .seg button{padding:8px 8px 7px}
  .install{grid-template-columns:1fr}
  .install .lbl,.cmd,.try{grid-column:1/2}
  .install .lbl{margin-bottom:10px}
  .cmd{flex-direction:column;align-items:flex-start}
  .cmd code{font-size:14px}
  footer p,footer .colo{grid-column:1/13;justify-self:start}
  footer .colo{margin-top:8px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
}
/* below-the-fold plates: skip their layout/paint until they approach the viewport */
.plate:not(.hero){content-visibility:auto;contain-intrinsic-size:auto 640px}