:root{
  color-scheme: dark;
  --bg: #0b0f14;
  --panel: #0f141b;
  --panel-2: #121923;
  --text: #f2f5f7;
  --muted: #a9b2bd;
  --accent: #7aa2ff;
  --accent-2: #4fd1c5;
  --border: #1e2a38;
  --ok: #5ad19a;
  --warn: #f6c177;
  --bad: #f38ba8;
  --chip: #1b2633;
  --focus: #2b3b52;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:15px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  -webkit-font-smoothing: antialiased;
}
.container{max-width:1100px;margin:0 auto;padding:24px}
.header{
  position:sticky;top:0;z-index:999;
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border-bottom:1px solid var(--border);
  box-shadow: var(--shadow);
}
.header .inner{display:flex;align-items:center;gap:16px; padding:14px 24px}
.site-title{font-weight:700;letter-spacing:.2px}
.nav{margin-left:auto;display:flex;gap:14px}
.nav a{
  color:var(--text);text-decoration:none;padding:8px 10px;border-radius:10px;
}
.nav a:hover,.nav a:focus{outline:none;background:var(--focus)}
main{padding:22px 24px}
h1,h2,h3{line-height:1.25;margin:18px 0 10px}
h1{font-size:28px}
h2{font-size:20px;color:var(--muted);font-weight:600}
p.lede{color:#c8d0da;max-width:70ch}
.card{
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid var(--border);
  border-radius:16px;
  padding:18px;
  box-shadow: var(--shadow);
}
.grid{display:grid;gap:14px}
.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid.responsive{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:980px){.grid.responsive{grid-template-columns:repeat(3,1fr)}}
@media (max-width:720px){.grid.responsive{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.grid.responsive{grid-template-columns:repeat(1,1fr)}}
.hr{height:1px;background:var(--border);margin:14px 0}
code,kbd{background:#0b131c;border:1px solid var(--border);padding:2px 6px;border-radius:8px}
.searchbar{display:flex;gap:8px;margin-top:14px}
.searchbar input{
  flex:1;background:#0b131c;border:1px solid var(--border);
  padding:12px;border-radius:12px;color:var(--text)
}
.searchbar input:focus{outline:none;border-color:var(--accent)}
.helper{color:var(--muted);font-size:13px}
.tilemap{display:grid;gap:10px;margin-top:16px}
.tilemap{grid-template-columns:repeat(10,1fr)}
.tile{
  background:var(--chip);
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px 10px;
  text-align:center;
  cursor:pointer;
  user-select:none;
  transition:transform .08s ease, background .2s ease, border-color .2s ease;
}
.tile:hover,.tile:focus{outline:none;transform:translateY(-2px);background:var(--focus);border-color:#2b3b52}
.tile .abbr{font-weight:700}
.badges{display:flex;flex-wrap:wrap;gap:8px}
.badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:6px 10px;border-radius:999px;border:1px solid var(--border);background:var(--chip);color:#cfe3ff}
.badge .dot{width:8px;height:8px;border-radius:999px;background:var(--accent)}
.footer{color:var(--muted);padding:16px 24px;border-top:1px solid var(--border);margin-top:24px}
.table{width:100%;border-collapse:collapse}
.table th,.table td{border-bottom:1px solid var(--border);padding:10px 8px;text-align:left;vertical-align:top}
.table th{color:#cdd6e0;font-weight:600}
.kv{display:grid;grid-template-columns:220px 1fr;gap:8px;margin-top:6px}
.kv .k{color:#aeb9c6}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{background:var(--chip);border:1px solid var(--border);padding:6px 10px;border-radius:999px;color:#d6dfeb;font-size:12px}
.qa-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (max-width:760px){.qa-grid{grid-template-columns:1fr}}
.qa-card{
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid var(--border);
  border-radius:12px;padding:12px 14px
}
.qa-card .q{font-weight:600}
.qa-card .a{color:#d7e2ee;margin-top:4px}
.label{font-size:11px;letter-spacing:.4px;text-transform:uppercase;color:#9bb3d1}
.note{font-size:13px;color:#b4c0ce}
.cta{display:inline-flex;gap:10px;align-items:center;background:var(--accent);color:#0b0f14;border:none;border-radius:12px;padding:10px 14px;font-weight:700;cursor:pointer}
.cta:hover{filter:brightness(1.05)}
.small{font-size:13px;color:#c8d0da}
table caption{caption-side:top;text-align:left;color:#c8d0da;padding:8px 0}

/* ===== Mobile-friendly enhancements ===== */
html { -webkit-text-size-adjust: 100%; }
body { -webkit-tap-highlight-color: transparent; }

/* Scalable typography */
:root{
  --fs-base: clamp(14px, 1.6vw, 16px);
  --fs-h1: clamp(22px, 3.5vw, 28px);
  --fs-h2: clamp(16px, 2.2vw, 20px);
}
body{ font-size: var(--fs-base); }
h1{ font-size: var(--fs-h1); }
h2{ font-size: var(--fs-h2); }

/* Nav: allow horizontal scroll on small screens */
.nav{ overflow-x:auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.nav a{ white-space: nowrap; padding:10px 12px; }

/* Tile map: auto-fit for phones, larger tap targets */
.tilemap{ grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
@media (max-width: 520px){
  .tilemap{ grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
}
.tile{ min-height: 70px; padding:14px 12px; }
.tile .abbr{ font-size: 16px; }
.tile .name{ font-size: 13px; color: var(--muted); }

/* Search input: touch-friendly */
.searchbar input{ padding:14px 14px; font-size: 1rem; }

/* QA grid: single column on small screens already set; add spacing */
.qa-card{ padding:14px 16px; }

/* Table responsiveness */
.table-wrap{ overflow-x:auto; -webkit-overflow-scrolling: touch; }
.table{ min-width: 640px; }

/* Buttons */
.cta{ padding:12px 16px; }

/* Cards/layout padding tweaks on small screens */
@media (max-width:720px){
  .container{ padding:18px; }
  .header .inner{ padding:12px 18px; }
}

/* Focus visibility */
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:8px; }