:root{
  --bg:#faf9f6; --panel:#ffffff; --panel-2:#f4f2ec;
  --ink:#1c1c20; --muted:#6b6b76; --line:#e4e0d8;
  --accent:#3b7ea1; --accent-soft:#3b7ea122;
  --cell:#3b7ea1; --cell-edge:#1f4d66;
  --ok:#3f7d4f; --bad:#b3402f;
  --shadow:0 1px 2px rgba(20,20,25,.06),0 6px 20px rgba(20,20,25,.05);
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#141417; --panel:#1c1c21; --panel-2:#232329;
    --ink:#eceaf0; --muted:#9b9ba6; --line:#31313a;
    --accent-soft:#ffffff10;
    --cell-edge:#0c0c10;
    --ok:#7fc08c; --bad:#e8836f;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.3);
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.55 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,
       "Helvetica Neue",Arial,sans-serif;
  padding:0 0 5rem;
}
.wrap{max-width:1180px;margin:0 auto;padding:0 1.25rem}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
header.top{
  border-bottom:1px solid var(--line); background:var(--panel);
  padding:1rem 0; margin-bottom:2rem; position:sticky; top:0; z-index:5;
  backdrop-filter:saturate(1.4) blur(6px);
}
header.top .wrap{display:flex;gap:1rem;align-items:baseline;flex-wrap:wrap}
.brand{font-weight:650;letter-spacing:-.01em;color:var(--ink)}
.brand:hover{text-decoration:none}
nav.fam{display:flex;gap:.85rem;flex-wrap:wrap;font-size:.9rem}
nav.fam a{color:var(--muted)}
nav.fam a.here{color:var(--accent);font-weight:600}
h1{font-size:2rem;letter-spacing:-.02em;margin:.2rem 0 .35rem}
h2{font-size:1.15rem;letter-spacing:-.01em;margin:2.6rem 0 .2rem;
   display:flex;align-items:baseline;gap:.6rem}
h2 .n{font-variant-numeric:tabular-nums;color:var(--muted);font-weight:400;font-size:.9rem}
.lede{color:var(--muted);max-width:62ch;margin:.35rem 0 1.2rem}
.section-note{color:var(--muted);font-size:.88rem;margin:.15rem 0 1rem;max-width:70ch}
.orders{display:flex;flex-wrap:wrap;gap:.4rem;margin:1.25rem 0}
.orders a,.orders span{
  border:1px solid var(--line); background:var(--panel); border-radius:7px;
  padding:.3rem .6rem; font-size:.85rem; color:var(--muted);
}
.orders a.here{border-color:var(--accent);color:var(--accent);font-weight:600;
  background:var(--accent-soft)}
.grid{
  display:grid; gap:.55rem;
  grid-template-columns:repeat(auto-fill,minmax(var(--tile,132px),1fr));
}
.tile{
  background:var(--panel); border:1px solid var(--line); border-radius:9px;
  padding:.45rem .35rem .3rem; text-align:center; box-shadow:var(--shadow);
  display:flex; flex-direction:column; align-items:center; gap:.15rem;
}
.tile svg{display:block;max-width:100%;height:auto}
.holder{display:flex;align-items:center;justify-content:center}
.holder:not(.done){border-radius:6px;background:
  linear-gradient(var(--panel-2),var(--panel-2))}
.tile .lbl{font-size:.7rem;color:var(--muted);font-variant-numeric:tabular-nums}
.tile .sym{font-size:.7rem;color:var(--accent);font-weight:600}
.cell{fill:var(--cell);stroke:var(--cell-edge);stroke-width:1.1;stroke-linejoin:round}
.seg{stroke:var(--cell);stroke-linecap:round;fill:none}
table{border-collapse:collapse;width:100%;font-size:.92rem;margin:.6rem 0 1.4rem}
th,td{text-align:right;padding:.42rem .6rem;border-bottom:1px solid var(--line);
  font-variant-numeric:tabular-nums}
th:first-child,td:first-child{text-align:left;font-variant-numeric:normal}
thead th{color:var(--muted);font-weight:600;font-size:.82rem;
  text-transform:uppercase;letter-spacing:.04em}
tbody tr:hover{background:var(--panel-2)}
.cards{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));
  margin:1.5rem 0}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:1.1rem 1.15rem;box-shadow:var(--shadow);display:flex;flex-direction:column}
.card h3{margin:0 0 .3rem;font-size:1.1rem;letter-spacing:-.01em}
.card p{margin:0 0 .9rem;color:var(--muted);font-size:.9rem;flex:1}
.card .samples{display:flex;gap:.4rem;align-items:flex-end;margin-bottom:.9rem;
  min-height:56px;flex-wrap:wrap}
.card .samples svg{height:52px;width:auto}
.badge{display:inline-flex;align-items:center;gap:.35rem;font-size:.78rem;
  border-radius:999px;padding:.16rem .55rem;border:1px solid var(--line);
  color:var(--muted);background:var(--panel-2)}
.badge.ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 35%,transparent)}
.badge.bad{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 45%,transparent)}
.verify{margin:1.4rem 0 0;font-size:.86rem}
.verify summary{cursor:pointer;color:var(--muted)}
.verify ul{margin:.6rem 0 0;padding-left:1.1rem;color:var(--muted)}
.verify li{margin:.12rem 0}
.verify .ok{color:var(--ok)} .verify .bad{color:var(--bad);font-weight:600}
footer{margin-top:3.5rem;padding-top:1.2rem;border-top:1px solid var(--line);
  color:var(--muted);font-size:.85rem}
.kv{display:flex;gap:1.4rem;flex-wrap:wrap;margin:.2rem 0 1rem;color:var(--muted);
  font-size:.9rem}
.kv b{color:var(--ink);font-variant-numeric:tabular-nums}