:root{
  /* Color tokens */
  --bg: #0f1115;
  --panel: #161a22;
  --panel-2: #1b2030;
  --text: #e6eaf2;
  --muted: #9aa4b2;
  --primary: #3ea6ff;
  --accent: #9b59ff;
  --success: #3ddc84;
  --warn: #ffb020;
  --danger: #ff4d5a;
  --border: #2a3142;

  /* Checker colors (same semantics as hell_of_integral) */
  --c-grey: #3a3f4f;
  --c-blue: #4da3ff;      /* 60-79% */
  --c-green: #3ddc84;     /* 80-100% */
  --c-yellow: #ffd666;    /* 40-59% */
  --c-red: #ff6b6b;       /* 0-39% */

  /* Sizes */
  --radius: 16px;
  --gap: 12px;
  --pad: 16px;
  --maxw: 1100px;
}
*{box-sizing:border-box}
html,body{height:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}
a{color:var(--primary);text-decoration:none}
button{
  background:var(--panel);
  color:var(--text);
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding:10px 14px;
  cursor:pointer;
}
button[disabled]{opacity:0.5; cursor:not-allowed}
.container{max-width:var(--maxw); margin:0 auto; padding: 16px}
.header{
  position:sticky; top:0; z-index:10;
  background:linear-gradient(180deg, rgba(15,17,21,.9), rgba(15,17,21,.6));
  backdrop-filter: blur(6px);
  border-bottom:1px solid var(--border);
}
.header__bar{
  display:flex; align-items:center; gap:12px; padding:10px 16px;
}
.logo{
  font-weight:800; letter-spacing:.5px; font-size:18px;
  display:inline-flex; align-items:center; gap:10px; cursor:pointer;
}
.logo__dot{width:10px;height:10px;border-radius:50%;
  background:conic-gradient(from 120deg, var(--primary), var(--accent), var(--success));
  box-shadow:0 0 12px rgba(62,166,255,.6);
}
.header__nav{margin-left:auto; display:flex; gap:8px}
.panel{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:var(--pad);}
.h1{font-size:28px; font-weight:800; margin:4px 0 8px}
.h2{font-size:22px; font-weight:700; margin:10px 0 4px; color:var(--muted)}
.sub{color:var(--muted)}

.grid{display:grid; gap:var(--gap)}
.grid.columns-3{grid-template-columns: repeat(3, 1fr)}
@media (max-width: 960px){ .grid.columns-3{grid-template-columns: 1fr}}

.badge{display:inline-block; padding:2px 8px; border-radius:999px; font-size:12px; border:1px solid var(--border); background:var(--panel-2); color:var(--muted)}

.cta{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.cta .primary{background:var(--primary); color:#021520; border-color:transparent; font-weight:700}
.cta .ghost{background:transparent}

.footer{color:var(--muted); font-size:12px; padding:16px; text-align:center; border-top:1px solid var(--border)}

.center{display:flex; align-items:center; justify-content:center}
.full{min-height:calc(100vh - 120px)}

.kbd{border:1px solid var(--border); background:var(--panel-2); padding:2px 6px; border-radius:6px; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:12px}

/* Modal */
.modal-backdrop{position:fixed; inset:0; background:rgba(0,0,0,.5); display:none; align-items:center; justify-content:center}
.modal{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:20px; max-width:720px; max-height:80vh; overflow:auto}
.modal-backdrop.show{display:flex}

/* Checker grid (20 columns) */
.checker{
  display:grid;
  grid-template-columns: repeat(20, minmax(0, 1fr));
  gap:6px;
}
.checker .cell{
  display:block; padding:6px 8px; border-radius:10px; border:1px solid var(--border);
  background:var(--panel-2); color:var(--text); text-align:left; min-height:36px;
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}
.cell .tiny{display:block; font-size:11px; color:var(--muted)}
.cell.good{background: color-mix(in oklab, var(--c-green) 25%, var(--panel-2))}
.cell.ok{background: color-mix(in oklab, var(--c-blue) 25%, var(--panel-2))}
.cell.warn{background: color-mix(in oklab, var(--c-yellow) 25%, var(--panel-2))}
.cell.bad{background: color-mix(in oklab, var(--c-red) 25%, var(--panel-2))}

/* Floating action button */
.fab{
  position:fixed; right:24px; bottom:24px;
  width:56px; height:56px; border-radius:50%;
  background:var(--accent); color:#0b0615; border:none;
  font-size:28px; line-height:0; display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 24px rgba(155,89,255,.35);
}
.fab:hover{transform: translateY(-1px)}