:root{
  --blue:#6dcff6;--green:#8cd9a8;--purple:#a186be;--fuchsia:#d80c8c;
  --thistle:#e5bbfa;--pink:#f49ac1;--orange:#fdc689;--yellow:#fff799;
  --gum:var(--pink);--grape:var(--purple);--mint:var(--green);
  --sky:#f3e6fc;--floss:#fcd9ea;--enamel:#fffbfe;--face:#f7eefc;
  --ink:#40274f;--ink-soft:#7b6690;
  --line:#dfc6ee;--hi:#fff;--lo:#8a70a6;
  --bar-a:#f49ac1;--bar-b:#a186be;
  --ui:Tahoma,Verdana,Geneva,sans-serif;
  --chrome:"Trebuchet MS",Tahoma,sans-serif;
  --bitmap:"Silkscreen","Courier New",monospace;
}
*{box-sizing:border-box}
body{
  margin:0;padding:26px 16px 60px;font:12px/1.55 var(--ui);color:var(--ink);
  background:var(--sky);
  background-image:
    linear-gradient(180deg,#f6e3fb 0%,#f9dcef 42%,#e8f6ec 42%,#dff0e6 100%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}
a{color:#8f2f78}
a:hover{color:var(--fuchsia)}
:focus-visible{outline:2px dashed var(--ink);outline-offset:2px}

/* the hub is one Toothache OS window sitting on the desktop */
.win{
  max-width:760px;margin:0 auto;background:var(--enamel);
  border:1px solid var(--lo);border-radius:8px 8px 4px 4px;
  box-shadow:0 6px 0 rgba(120,90,150,.18),0 14px 34px rgba(90,60,120,.18);
  overflow:hidden;
}
.title{
  display:flex;align-items:center;gap:8px;padding:6px 8px;
  background:linear-gradient(180deg,var(--bar-a),var(--bar-b));
  color:#fff;font:bold 13px var(--chrome);text-shadow:0 1px 0 rgba(0,0,0,.25);
}
.title .dots{margin-left:auto;display:flex;gap:4px}
.title .dots i{
  width:15px;height:14px;border-radius:2px;background:rgba(255,255,255,.32);
  border:1px solid rgba(255,255,255,.5);display:block;
}
.addr{
  display:flex;align-items:center;gap:7px;padding:6px 9px;background:var(--face);
  border-bottom:1px solid var(--line);font:10px var(--bitmap);color:var(--ink-soft);
  overflow:hidden;white-space:nowrap;
}
.addr span{background:#fff;border:1px solid var(--lo);border-radius:3px;padding:3px 8px;flex:1;overflow:hidden;text-overflow:ellipsis}
.body{padding:20px}

.marquee{
  overflow:hidden;border:1px solid var(--line);border-radius:4px;padding:5px 0;margin-bottom:18px;
  background:linear-gradient(90deg,var(--floss),#e5d3f5,var(--mint));
}
.marquee span{display:inline-block;white-space:nowrap;font:11px var(--bitmap);animation:slide 22s linear infinite;padding-left:100%}
@keyframes slide{to{transform:translateX(-100%)}}

h1{font:bold 21px var(--chrome);margin:0 0 4px;text-align:center}
h2{font:bold 14px var(--chrome);margin:28px 0 10px;padding-bottom:5px;border-bottom:1px solid var(--line)}
.lede{max-width:46ch;margin:0 auto 18px;text-align:center;color:#5c4568}
.count{display:block;text-align:center;font:10px var(--bitmap);color:var(--ink-soft);margin-bottom:16px}

.nav{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:20px 0 4px}
.btn{
  display:inline-block;padding:7px 14px;text-decoration:none;color:var(--ink);
  background:linear-gradient(180deg,#fff,var(--face));
  border:1px solid var(--lo);border-radius:4px;box-shadow:inset 0 1px 0 #fff;
  font:12px var(--ui);cursor:pointer;
}
.btn:hover{background:linear-gradient(180deg,#fff,var(--floss));border-color:var(--gum);color:var(--ink)}
.btn.primary{background:linear-gradient(180deg,#fbb5d4,var(--gum));border-color:#c76a9c;color:#4a1b3a;font-weight:bold}
.btn.primary:hover{background:linear-gradient(180deg,#ffc9e0,#f6a8c9)}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(214px,1fr));gap:10px}
.card{
  display:flex;gap:10px;align-items:flex-start;padding:10px;text-decoration:none;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:5px;
}
.card:hover{border-color:var(--gum);background:#fffafd;color:var(--ink)}
.card .n{font:10px var(--bitmap);color:var(--ink-soft);padding-top:2px;min-width:20px}
.card b{display:block;font-weight:bold}
.card small{color:var(--ink-soft);display:block}
.card[data-me="1"]{border-color:var(--gum);background:linear-gradient(180deg,#fff,#fdeef6)}

code,pre{font-family:"Courier New",monospace;font-size:12px}
pre{
  background:#fff;border:1px solid var(--line);border-radius:5px;padding:12px;
  overflow:auto;white-space:pre;line-height:1.5;
}
.field{width:100%;padding:7px 9px;border:1px solid var(--lo);border-radius:4px;font:12px var(--ui);background:#fff;color:var(--ink)}
label{display:block;font-weight:bold;margin:14px 0 5px}
.note{background:var(--face);border:1px solid var(--line);border-radius:5px;padding:11px 13px;margin:14px 0}
ol,ul{padding-left:20px}
li{margin:6px 0}
footer{max-width:760px;margin:16px auto 0;text-align:center;font:10px var(--bitmap);color:#7b6690}
footer a{color:#7b6690}
table{width:100%;border-collapse:collapse;margin-top:8px}
th,td{text-align:left;padding:7px 8px;border-bottom:1px solid var(--line);vertical-align:top}
th{font:bold 11px var(--chrome);color:var(--ink-soft);text-transform:uppercase;letter-spacing:.4px}
@media (prefers-reduced-motion:reduce){.marquee span{animation:none;padding-left:0}}
@media (max-width:520px){body{padding:10px 8px 40px}.body{padding:14px}}