/* lmb.gg — near-black, minimal. Shared by every page. */
:root {
  --bg: #0a0a0a; --bg-2: #0e0e0e; --panel: #121212; --panel-2: #171717;
  --border: #242424; --border-strong: #333333;
  --text: #ededed; --muted: #8c8c8c;
  --accent: #c0400b;      /* burnt orange: fills, borders, large text */
  --accent-2: #f0763f;    /* lighter orange: small text, focus rings, live chart */
  --green: #34d399; --blue: #3b82f6; --danger: #f87171; --warn: #fbbf24;
  --radius: 14px; --radius-sm: 10px;
  --mono: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--sans); color: var(--text); background: var(--bg); line-height: 1.55; -webkit-font-smoothing: antialiased; min-height: 100vh; }
button { font: inherit; color: inherit; }
a { color: var(--accent-2); }
a:hover { color: #fff; }
.wrap { width: min(1040px, 100% - 32px); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: .5rem; background: var(--panel); border: 1px solid var(--border-strong); padding: .5rem .8rem; border-radius: 8px; z-index: 10; }
.skip:focus { left: .5rem; }

/* ---------- Top bar ---------- */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1.5rem 0 .5rem; }
a.logo { font-size: 1.6rem; font-weight: 800; letter-spacing: -.03em; color: var(--text); text-decoration: none; }
a.logo span { color: var(--accent); }
.tabs { display: flex; gap: .25rem; padding: .3rem; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; max-width: 100%; overflow-x: auto; }
.tab { display: inline-block; text-decoration: none; padding: .55rem 1.05rem; border-radius: 9px; color: var(--muted); font-weight: 600; font-size: .9rem; white-space: nowrap; transition: background .15s, color .15s; }
.tab:hover { color: var(--text); }
.tab[aria-current] { color: #fff; background: #1f1f1f; box-shadow: inset 0 0 0 1px var(--border-strong), inset 0 -2px 0 var(--accent); }
a:focus-visible, .btn:focus-visible, .zone:focus-visible, .scroll-box:focus-visible, button:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }

/* ---------- Hero ---------- */
.hero { text-align: center; padding: 2rem 0 1.5rem; }
.hero h1 { margin: 0; font-size: clamp(1.8rem, 5vw, 2.6rem); letter-spacing: -.03em; line-height: 1.15; }
.hero .lead { color: var(--muted); margin: .75rem auto 0; max-width: 62ch; }

/* ---------- Cards / tool ---------- */
.card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: clamp(1rem, 3vw, 1.75rem); }
.panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.panel-head p { margin: 0; color: var(--muted); font-size: .92rem; max-width: 66ch; }
.actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.btn { appearance: none; cursor: pointer; border: 1px solid var(--border-strong); background: transparent; padding: .5rem .9rem; border-radius: 9px; font-size: .85rem; font-weight: 600; transition: border-color .15s, background .15s; }
.btn:hover { border-color: #555; background: var(--panel-2); }
.btn.primary { border-color: rgba(192, 64, 11, .75); background: rgba(192, 64, 11, .14); }
.btn.primary:hover { background: rgba(192, 64, 11, .26); border-color: var(--accent); }
.btn[hidden] { display: none; }

.seg { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1rem; }
.seg button, .seg a { appearance: none; cursor: pointer; text-decoration: none; border: 1px solid var(--border); background: transparent; padding: .45rem .95rem; border-radius: 999px; font-size: .85rem; font-weight: 600; color: var(--muted); transition: border-color .15s, color .15s, background .15s; }
.seg button:hover:not(:disabled), .seg a:hover { border-color: #555; color: var(--text); }
.seg button[aria-pressed="true"], .seg a[aria-current] { color: #fff; border-color: var(--accent); background: rgba(192, 64, 11, .24); }
.seg button:disabled { opacity: .4; cursor: not-allowed; }

.notice { margin: 0 0 1rem; padding: .65rem .9rem; border-radius: var(--radius-sm); font-size: .85rem; color: var(--warn); border: 1px solid rgba(251, 191, 36, .35); background: rgba(251, 191, 36, .05); }
.notice[hidden] { display: none; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.stat { background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .8rem 1rem; }
.stat .label { color: var(--muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .09em; }
.stat .value { font-family: var(--mono); font-size: 1.55rem; font-weight: 700; margin-top: .15rem; }
.stat .value small { font-size: .8rem; color: var(--muted); font-weight: 500; }
.stat.bad .value { color: var(--danger); }
.stat.good .value { color: var(--green); }
.stat .value.low { color: var(--warn); }
.stat .value.medium { color: var(--accent-2); }
.stat .value.high { color: var(--green); }

/* ---------- Click zones ---------- */
.zone { position: relative; overflow: hidden; display: grid; place-items: center; text-align: center; width: 100%; min-height: 220px; margin: 0; cursor: pointer; border-radius: var(--radius); border: 2px dashed var(--border-strong); background: var(--panel-2); color: var(--text); font-size: clamp(1.2rem, 3.5vw, 1.6rem); font-weight: 700; user-select: none; -webkit-user-select: none; touch-action: manipulation; transition: transform .06s ease, border-color .15s, box-shadow .15s; }
.zone small { display: block; color: var(--muted); font-weight: 500; font-size: .8rem; margin-top: .35rem; }
.zone:hover { border-color: #5a5a5a; }
.zone.pulse { transform: scale(.993); box-shadow: 0 0 0 3px rgba(192, 64, 11, .3); }
.zone.flag { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(248, 113, 113, .18); }
.zone.running { border-style: solid; border-color: var(--accent); }
.zone.done { border-style: solid; border-color: var(--green); }
.ripple { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: rgba(192, 64, 11, .5); border: 2px solid rgba(240, 118, 63, .85); pointer-events: none; animation: ripple .6s ease-out forwards; }
@keyframes ripple { from { transform: scale(.35); opacity: .95; } to { transform: scale(4.5); opacity: 0; } }
/* CPS test: pure-black zone, green circle that grows and fades on every click */
#cps-zone { background: #000; }
#cps-zone.running { border-color: #4a4a4a; }
#cps-zone.pulse { box-shadow: none; }
#cps-zone .ripple { background: #22c55e; border: 0; }

.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; }
.chip { font-family: var(--mono); font-size: .78rem; padding: .3rem .65rem; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--border); color: var(--muted); }
.chip b { color: var(--text); }
h2.sub { margin: 1.25rem 0 .5rem; font-size: .95rem; display: flex; align-items: center; gap: .5rem; }
.badge { font-family: var(--mono); font-size: .72rem; padding: .1rem .5rem; border-radius: 999px; background: rgba(248, 113, 113, .12); color: var(--danger); border: 1px solid rgba(248, 113, 113, .35); }
.badge.ok { background: rgba(52, 211, 153, .1); color: var(--green); border-color: rgba(52, 211, 153, .35); }
.log { list-style: none; margin: 0; padding: 0; max-height: 220px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-2); font-family: var(--mono); font-size: .8rem; }
.log li { display: flex; justify-content: space-between; gap: .75rem; flex-wrap: wrap; padding: .55rem .85rem; border-bottom: 1px solid var(--border); }
.log li:last-child { border-bottom: 0; }
.log li.empty { color: var(--muted); justify-content: center; }
.log li.defect { color: var(--danger); background: rgba(248, 113, 113, .06); }
.log li.info { color: var(--warn); background: rgba(251, 191, 36, .05); }
.log .time { color: var(--muted); }
.note { color: var(--muted); font-size: .78rem; margin: .9rem 0 0; }

/* ---------- Polling ---------- */
.poll-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 1rem; }
.pad, .graph { position: relative; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-2); overflow: hidden; height: 300px; }
.pad { cursor: crosshair; touch-action: none; }
.pad canvas, .graph canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pad .hint { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; color: var(--muted); font-size: .9rem; pointer-events: none; padding: 1rem; transition: opacity .3s; }
.pad.active .hint { opacity: 0; }
.readout { text-align: center; margin: .25rem 0 .5rem; }
.readout .big { font-family: var(--mono); font-size: clamp(2.2rem, 8vw, 3.4rem); font-weight: 800; letter-spacing: -.03em; color: var(--text); }
.readout .big small { font-size: .4em; color: var(--muted); font-weight: 600; }
.readout .meta { color: var(--muted); font-size: .85rem; }
.status { text-align: center; font-size: .85rem; margin: .5rem auto 1rem; max-width: 74ch; padding: .55rem .85rem; border-radius: 10px; border: 1px solid var(--border); background: var(--panel-2); color: var(--muted); }
.status.low { color: var(--warn); border-color: rgba(251, 191, 36, .35); background: rgba(251, 191, 36, .05); }
.status.medium { color: var(--accent-2); border-color: rgba(240, 118, 63, .35); background: rgba(240, 118, 63, .05); }
.status.high { color: var(--green); border-color: rgba(52, 211, 153, .35); background: rgba(52, 211, 153, .05); }

/* ---------- Scroll ---------- */
.scroll-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: stretch; }
.scroll-box { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-2); display: grid; place-items: center; padding: 1rem; min-height: 340px; text-align: center; overscroll-behavior: contain; cursor: ns-resize; }
.mouse-svg { width: 150px; height: auto; overflow: visible; }
.mouse-body { fill: var(--panel-2); stroke: var(--border-strong); stroke-width: 3; }
.mouse-split { stroke: var(--border-strong); stroke-width: 3; fill: none; }
.wheel { fill: #2a2a2a; stroke: #444; stroke-width: 2; transition: fill .12s, filter .12s; }
.wheel.up { fill: var(--green); filter: drop-shadow(0 0 6px rgba(52, 211, 153, .6)); }
.wheel.down { fill: var(--blue); filter: drop-shadow(0 0 6px rgba(59, 130, 246, .6)); }
.arrow { fill: #2a2a2a; transition: fill .12s, filter .12s; }
.arrow.up.on { fill: var(--green); } .arrow.down.on { fill: var(--blue); }
.scroll-label { color: var(--muted); font-size: .85rem; margin-top: .75rem; }
.scroll-dir { font-family: var(--mono); font-weight: 700; font-size: 1.1rem; margin-top: .25rem; min-height: 1.6em; }
.scroll-dir.up { color: var(--green); } .scroll-dir.down { color: var(--blue); }

/* ---------- Guide content under the tool ---------- */
.prose { margin-top: 2.5rem; max-width: 72ch; margin-inline: auto; }
.prose h2 { font-size: 1.3rem; letter-spacing: -.01em; margin: 2.25rem 0 .6rem; }
.prose h3 { font-size: 1rem; margin: 1.4rem 0 .3rem; }
.prose p, .prose li { color: #bdbdbd; font-size: .95rem; }
.prose p { margin: .5rem 0; }
.prose ol, .prose ul { padding-left: 1.25rem; margin: .5rem 0; }
.prose li { margin: .25rem 0; }
.prose strong { color: var(--text); }
.prose code { font-family: var(--mono); font-size: .85em; color: var(--text); }
.tbl { width: 100%; border-collapse: collapse; margin: .75rem 0; font-size: .9rem; }
.tbl caption { text-align: left; color: var(--muted); font-size: .78rem; padding-bottom: .4rem; }
.tbl th, .tbl td { text-align: left; padding: .55rem .75rem; border-bottom: 1px solid var(--border); }
.tbl th { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.tbl td:first-child { font-family: var(--mono); color: var(--text); white-space: nowrap; }
.related { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .75rem; margin: .75rem 0 0; }
.related a { display: block; text-decoration: none; padding: 1rem; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-sm); transition: border-color .15s, background .15s; }
.related a:hover { border-color: var(--accent); background: var(--panel-2); }
.related strong { display: block; color: var(--text); margin-bottom: .2rem; }
.related span { color: var(--muted); font-size: .85rem; }

footer.site { margin-top: 3rem; border-top: 1px solid var(--border); text-align: center; color: var(--muted); font-size: .8rem; padding: 1.75rem 0 3rem; }
footer.site nav { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; justify-content: center; margin-bottom: .75rem; }
footer.site a { color: var(--muted); text-decoration: none; }
footer.site a:hover { color: var(--text); }

@media (max-width: 760px) {
  .poll-grid, .scroll-grid { grid-template-columns: 1fr; }
  .pad, .graph { height: 240px; }
  .scroll-box { min-height: 300px; }
}
@media (max-width: 700px) {
  .topbar { flex-direction: column; align-items: center; }
  .tabs { display: grid; grid-template-columns: repeat(2, 1fr); width: 100%; }
  .tab { text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  /* The ripple confirms each click registered, so it keeps animating; everything else is calmed */
  *:not(.ripple) { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}