/* assets/style.css — shared design tokens for the math_experiments lab (2026-09-06) */
:root {
  --bg: #0a0d14;
  --panel: #121726;
  --panel-2: #0e1320;
  --ink: #e9edf5;
  --dim: #8b93a7;
  --line: #1e2637;
  --accent: #6ea8ff;
  --accent-2: #b48cff;
  --accent-grad: linear-gradient(120deg, #6ea8ff, #b48cff);
  --radius: 14px;
  --mono: ui-monospace, "JetBrains Mono", "Cascadia Mono", "Fira Code", Menlo, Consolas, monospace;
  --sans: system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  min-height: 100vh;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.topbar {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--line);
  background: rgba(14, 19, 32, 0.85);
  backdrop-filter: blur(6px);
  position: sticky; top: 0; z-index: 20;
}
.topbar .brand {
  font-weight: 700; letter-spacing: 0.02em;
  background: var(--accent-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-size: 17px;
}
.topbar nav { display: flex; gap: 4px; flex-wrap: wrap; margin-left: auto; }
.topbar nav a {
  color: var(--dim); padding: 6px 12px; border-radius: 8px; font-size: 13.5px;
}
.topbar nav a:hover, .topbar nav a.active { color: var(--ink); background: var(--panel); text-decoration: none; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 26px 22px 60px; }

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
}
.card h3 { margin: 0 0 8px; font-size: 16px; }
.card p { margin: 0 0 10px; color: var(--dim); font-size: 13.5px; }

.btn {
  font: inherit; font-size: 13.5px;
  color: var(--ink); background: var(--panel-2);
  border: 1px solid var(--line);
  padding: 8px 14px; border-radius: 9px;
  cursor: pointer; transition: border-color 0.15s, background 0.15s;
}
.btn:hover { border-color: var(--accent); }
.btn.primary {
  background: var(--accent-grad); border: none; color: #0a0d14; font-weight: 600;
}

.badge {
  display: inline-block; font-family: var(--mono); font-size: 11.5px;
  color: var(--accent); border: 1px solid var(--line);
  border-radius: 999px; padding: 2px 10px; background: var(--panel-2);
}

select, input[type="text"] {
  font: inherit; font-size: 13.5px; color: var(--ink);
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 8px; padding: 6px 10px;
}
input[type="range"] { accent-color: var(--accent); width: 100%; }
input[type="checkbox"] { accent-color: var(--accent); }

.mono { font-family: var(--mono); }
.dim { color: var(--dim); }

.field { display: flex; flex-direction: column; gap: 4px; margin: 12px 0; }
.field > label { font-size: 12px; color: var(--dim); text-transform: uppercase; letter-spacing: 0.08em; }
.field .value { font-family: var(--mono); font-size: 12px; color: var(--accent); float: right; }

.footer {
  border-top: 1px solid var(--line); color: var(--dim);
  font-size: 12.5px; padding: 18px 22px; text-align: center;
}