/* Inception — human-first, minimal UI.
   - System fonts, accessible contrast
   - Fluid container, responsive grid
   - Light & dark with prefers-color-scheme
   - Small details: focus rings, subtle motion, cards, stat blocks
*/
:root{
  --bg: #0b0b0c; --surface: #121316; --elev: #16181b; --line:#26282c;
  --fg: #e7e7ea; --muted:#a1a1aa; --accent:#4ea8ff; --accent-ink:#061a2c;
  --ok:#28c76f; --warn:#ffb020; --error:#ff4d4f;
  --radius:12px; --radius-sm:8px; --ring: 0 0 0 2px var(--accent) inset;
  --shadow: 0 8px 30px rgba(0,0,0,.25);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  --maxw: 1040px;
}
@media (prefers-color-scheme: light){
  :root{ --bg:#f7f7f9; --surface:#fff; --elev:#fff; --line:#e8e8ee; --fg:#111216; --muted:#666b76; --accent:#0b77ff; --accent-ink:#e8f2ff; }
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font: 16px/1.6 var(--font); background:var(--bg); color:var(--fg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%; height:auto}
.container{max-width:var(--maxw); margin:0 auto; padding:24px}
.header{
  position:sticky; top:0; backdrop-filter:saturate(120%) blur(12px);
  background:color-mix(in oklab, var(--bg), transparent 30%);
  border-bottom:1px solid var(--line); z-index:10;
}
.nav{display:flex; align-items:center; gap:18px; padding:12px 0}
.brand{display:flex; align-items:center; gap:10px; font-weight:600;}
.brand img{width:28px; height:28px}
.nav a{color:var(--fg); opacity:.9}
.nav .spacer{flex:1}
.btn{
  display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:999px;
  background:var(--accent); color:#fff; font-weight:600; box-shadow:var(--shadow);
  transition:transform .06s ease, box-shadow .12s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn.secondary{background:transparent; color:var(--fg); border:1px solid var(--line); box-shadow:none}

.hero{padding:36px 0 8px}
.hero h1{font-size: clamp(28px, 4vw, 40px); line-height:1.15; margin:0 0 10px}
.subtle{color:var(--muted)}
.section{padding:18px 0}
.grid{
  display:grid; gap:16px;
  grid-template-columns: repeat(12, 1fr);
}
.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:16px; box-shadow:0 1px 0 rgba(255,255,255,.02), 0 12px 40px rgba(0,0,0,.08);
}
.card:hover{box-shadow:0 1px 0 rgba(255,255,255,.02), 0 16px 50px rgba(0,0,0,.10)}
.card h3{margin:0 0 6px; font-size:18px}
.kicker{font-size:13px; letter-spacing:.03em; text-transform:uppercase; color:var(--muted)}

.entity{grid-column: span 6}
@media (max-width: 720px){ .entity{grid-column: span 12} }

.claim{grid-column: span 12}
@media (min-width: 860px){ .claim{grid-column: span 12} }

.table{
  width:100%; border-collapse:separate; border-spacing:0; overflow:hidden;
  border:1px solid var(--line); border-radius:var(--radius-sm);
}
.table th,.table td{padding:10px 12px; border-bottom:1px solid var(--line); text-align:left}
.table th{background:color-mix(in oklab, var(--surface), black 6%); font-weight:600; font-size:14px}
.table tr:last-child td{border-bottom:none}
.badge{display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; border:1px solid var(--line); font-size:12px; color:var(--muted)}
.chip{display:inline-block; padding:3px 8px; border:1px solid var(--line); border-radius:999px; font-size:12px; color:var(--muted); background:color-mix(in oklab, var(--surface), white 5%)}
.breadcrumbs{font-size:14px; color:var(--muted); margin:2px 0 6px}
.breadcrumbs a{color:var(--muted)}
.pill{display:inline-block; padding:6px 10px; border-radius:999px; background:var(--accent-ink); color:var(--accent); font-weight:600; font-size:12px}
.statgrid{display:grid; grid-template-columns: repeat(auto-fit, minmax(170px,1fr)); gap:12px; margin:6px 0 16px}
.stat{background:var(--elev); border:1px solid var(--line); border-radius:var(--radius-sm); padding:12px}
.stat .label{color:var(--muted); font-size:12px}
.stat .value{font-weight:700; font-size:20px}
.evidence{list-style:none; padding-left:0; margin:0}
.evidence li{padding:8px 0; border-bottom:1px dashed var(--line)}
.evidence li:last-child{border-bottom:none}

footer{color:var(--muted); border-top:1px solid var(--line); padding-top:12px; margin-top:28px}
input,select,textarea{
  background:var(--elev); color:var(--fg); border:1px solid var(--line);
  border-radius:10px; padding:10px 12px; width:100%;
}
input:focus,select:focus,textarea:focus{outline:none; box-shadow:var(--ring)}
.form-row{display:grid; gap:12px; grid-template-columns: repeat(2,1fr)}
@media (max-width:760px){ .form-row{grid-template-columns:1fr} }
code{background:color-mix(in oklab, var(--surface), white 5%); padding:2px 6px; border-radius:6px; border:1px solid var(--line)}
.muted{color:var(--muted)}