@font-face{
  font-family:"Kalam";
  font-style:normal;
  font-weight:300;
  font-display:swap;
  src:url("Kalam-Light.ttf") format("truetype");
}
@font-face{
  font-family:"Kalam";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("Kalam-Regular.ttf") format("truetype");
}
@font-face{
  font-family:"Kalam";
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url("Kalam-Bold.ttf") format("truetype");
}
:root{
  --font-base:"Kalam", "Segoe UI", "Trebuchet MS", sans-serif;
  --bg:#0b0c10;
  --panel:#0f141d;
  --ink:#e8ecf2;
  --muted:#91a0b6;
  --accent:#60a5fa;
  --accent-2:#22d3ee;
  --danger:#f87171;
  --grid:#1f2430;
  --strong:#e2e8f0;
  --cell:#0e1726;
  --cell-alt:#101a2d;
}
*{box-sizing:border-box;}
a,
a:visited{
  color:inherit;
  text-decoration:underline;
  text-underline-offset:2px;
}
button, input, select, textarea{
  font-family:inherit;
}
body{
  margin:0;
  font-family:var(--font-base, "Kalam", "Segoe UI", "Trebuchet MS", sans-serif);
  background:var(--bg);
  color:var(--ink);
  display:flex;
  flex-direction:column;
  min-height:100vh;
  touch-action:manipulation;
}
.layout{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:14px;
  max-width:1100px;
  width:100%;
  margin:0 auto;
}
.legend{
  margin:0;
  padding:12px 14px;
  background:var(--panel);
  border-radius:12px;
  color:var(--muted);
  line-height:1.4;
}
.top-spacer{
  margin-top:14px;
}