:root{--bg:#0f1115;--card:#171a21;--line:#262b36;--fg:#e8eaf0;--mut:#9aa3b2;--acc:#f5a524;--ok:#22c55e;--part:#eab308;--no:#64748b}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.55 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
a{color:var(--acc);text-decoration:none}a:hover{text-decoration:underline}.wrap{max-width:1240px;margin:0 auto;padding:0 20px}
.top{border-bottom:1px solid var(--line);background:#0b0d11;position:sticky;top:0;z-index:5}.top .wrap{display:flex;align-items:center;gap:8px 24px;min-height:56px;padding-top:8px;padding-bottom:8px}
.logo{font-weight:800;color:var(--fg);font-size:17px;white-space:nowrap;flex:none}nav{display:flex;gap:16px;flex-wrap:wrap;min-width:0}nav a{color:var(--mut);font-size:14px}nav a:hover{color:var(--fg)}
.hero{padding:36px 0 12px}.hero h1{font-size:clamp(26px,4.2vw + 12px,40px);line-height:1.15;margin:0 0 10px;max-width:820px}.hero p{color:var(--mut);max-width:820px;margin:0}
.controls{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:20px 0 12px}#q{flex:1 1 280px;padding:10px 14px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--fg);font-size:15px}
.chips{display:flex;gap:6px;flex-wrap:wrap}.chip{border:1px solid var(--line);background:var(--card);color:var(--mut);padding:7px 12px;border-radius:999px;cursor:pointer;font-size:13px}
.chip.on{background:var(--acc);color:#111;border-color:var(--acc);font-weight:600}.lic{color:var(--mut);font-size:13px}
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px}table{width:100%;border-collapse:collapse;background:var(--card)}
th,td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;font-size:13.5px}thead th{background:#1d212a;color:var(--mut);font-weight:600;position:sticky;top:0}
td .sub{color:var(--mut);font-size:12px}td.tname{min-width:140px}.na{color:var(--no);font-style:italic}.nowrap,.checked{white-space:nowrap}
.b{display:inline-block;font-size:11px;padding:1px 7px;border-radius:999px;margin-top:3px;border:1px solid}.b.ok{color:var(--ok);border-color:#14532d}.b.part{color:var(--part);border-color:#713f12}.b.no{color:var(--no);border-color:#334155}
.count{color:var(--mut);font-size:13px}.kv th{width:240px;color:var(--mut)}.cmp th{color:var(--mut)}.crumb{color:var(--mut);font-size:13px;margin-top:24px}
.callout{background:#2a2110;border:1px solid #713f12;padding:10px 14px;border-radius:10px}.log li{margin-bottom:6px}
.signup{margin:36px 0;padding:24px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(135deg,#1b1f29,#14171e)}.signup h2{margin:0 0 6px}.signup p{color:var(--mut);margin:0 0 14px}
.signup form{display:flex;gap:8px;flex-wrap:wrap}.signup input{flex:1 1 240px;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:#0f1115;color:var(--fg)}
.signup button{padding:10px 18px;border-radius:10px;border:0;background:var(--acc);color:#111;font-weight:700;cursor:pointer}.signup .note{flex-basis:100%;color:var(--acc);margin:6px 0 0}
pre{white-space:pre-wrap;background:var(--card);border:1px solid var(--line);padding:14px;border-radius:10px;font-size:12.5px}.foot{color:var(--mut);font-size:12.5px;padding:30px 20px;border-top:1px solid var(--line);margin-top:40px}
h1{font-size:clamp(22px,3vw + 12px,30px);line-height:1.2}h2{font-size:19px;margin-top:28px}

/* ---- wrapping & overflow safety ---- */
html{-webkit-text-size-adjust:100%}body{overflow-x:hidden}
p,li,td,th,a,pre,h1,h2,.callout{overflow-wrap:anywhere}
img,svg{max-width:100%;height:auto}
.tablewrap{max-width:100%;-webkit-overflow-scrolling:touch}

/* ---- mobile ---- */
@media (max-width:720px){
  .wrap{padding:0 16px}
  .top{position:static}
  .top .wrap{flex-direction:column;align-items:stretch;gap:6px;padding:10px 0 0}
  .top .logo{padding:0 16px}
  nav{flex-wrap:nowrap;overflow-x:auto;gap:4px;padding:2px 12px 10px;scrollbar-width:none;-webkit-overflow-scrolling:touch;
      mask-image:linear-gradient(90deg,#000 88%,transparent);-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent)}
  nav::-webkit-scrollbar{display:none}
  nav a{flex:none;white-space:nowrap;padding:6px 10px;border:1px solid var(--line);border-radius:999px;font-size:13px}
  .hero{padding:22px 0 6px}
  .controls{flex-direction:column;align-items:stretch}
  #q{flex:none;width:100%}
  .chips{gap:6px}.chip{padding:6px 10px}
  /* main tables -> stacked cards */
  .tablewrap:has(table.cards){border:0;overflow:visible}
  table.cards,table.cards tbody{display:block;background:none}
  table.cards thead{display:none}
  table.cards tr{display:block;background:var(--card);border:1px solid var(--line);border-radius:12px;margin:0 0 12px;padding:4px 0}
  table.cards tr[hidden]{display:none}
  table.cards td{display:grid;grid-template-columns:96px minmax(0,1fr);gap:10px;border-bottom:1px solid var(--line);padding:9px 14px}
  table.cards td:last-child{border-bottom:0}
  table.cards td::before{content:attr(data-label);color:var(--mut);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.03em}
  table.cards td.tname{display:block;padding:12px 14px 10px}
  table.cards td.tname::before{content:none}
  table.cards td.tname b{font-size:16px}
  table.cards .b{margin-right:4px}
  .nowrap,.checked{white-space:normal}
  /* key/value tables on tool pages */
  table.kv,table.kv tbody,table.kv tr,table.kv th,table.kv td{display:block;width:auto}
  table.kv th{border-bottom:0;padding:10px 14px 2px;font-size:12px;text-transform:uppercase;letter-spacing:.03em}
  table.kv td{padding:0 14px 10px}
  /* compare tables -> stacked */
  .tablewrap:has(table.cmp){border:0;overflow:visible}
  table.cmp,table.cmp tbody,table.cmp tr{display:block;background:none}
  table.cmp thead{display:none}
  table.cmp tr{background:var(--card);border:1px solid var(--line);border-radius:12px;margin:0 0 12px}
  table.cmp th{display:block;color:var(--fg);font-size:14px;padding:10px 14px}
  table.cmp td{display:grid;grid-template-columns:96px minmax(0,1fr);gap:10px;padding:9px 14px}
  table.cmp td:last-child{border-bottom:0}
  table.cmp td::before{content:attr(data-label);color:var(--acc);font-size:12px;font-weight:700}
  .signup{padding:18px}
  .signup form{flex-direction:column}.signup input{flex:none;width:100%}
  pre{font-size:12px}
  .foot{padding:24px 16px}
}

/* beehiiv embed */
.bh-embed{width:100%;max-width:100%;min-height:60px;overflow:hidden}
.bh-embed iframe,.bh-embed form,.bh-embed>*{max-width:100% !important;width:100% !important;box-sizing:border-box}
.signup .bh-alt{font-size:13px;margin:10px 0 0}
.bh-fallback{display:inline-block;padding:10px 18px;border-radius:10px;background:var(--acc);color:#111;font-weight:700}
