:root{
  color-scheme: dark;
  --bg: #1B1B1B;
  --panel: #0F0F0F;
  --border: #444444;
  --border-soft: #30363D;
  --input-bg: #1E1E1E;
  --text: #E9EEF2;
  --muted: #8B949E;
  --label: #6E7681;
  --green: #39D353;
  --green-btn: #238636;
  --green-btn-hover: #2EA043;
  --red: #F85149;
  --l0: #262626;
  --l1: #0D4429;
  --l2: #016C31;
  --l3: #26A641;
  --l4: #39D353;
  --cell: 18px;
  --gap: 3px;
  --labelw: 32px;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
body{
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.wrap{ max-width: 1080px; margin: 0 auto; padding: 48px 32px 64px; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.app-header{
  display:flex; align-items:center; gap:12px;
  margin: 0 0 26px;
}
.app-header .logo{ width:26px; height:26px; flex:none; }
.app-title{
  font-size: 30px; font-weight: 800; letter-spacing: -0.02em;
}

button{ font-family: inherit; }
.btn-ghost{
  font-size: 13px; font-weight: 500;
  padding: 9px 16px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--border-soft); background: #21262B; color: var(--text);
  white-space: nowrap;
}
.btn-ghost:hover{ border-color: var(--muted); }
.btn-ghost:disabled{ opacity: 0.45; cursor: default; }
.btn-primary{
  background: var(--green-btn); color: #fff; border: 0;
  font-size: 14px; font-weight: 600;
  padding: 11px 22px; border-radius: 6px; cursor: pointer;
  white-space: nowrap;
}
.btn-primary:hover{ background: var(--green-btn-hover); }
.btn-primary:active{ transform: translateY(1px); }
:where(button,input):focus-visible{ outline: 2px solid var(--green); outline-offset: 2px; }

.credit{
  margin-top: 56px; text-align:center;
  font-size: 14px; line-height: 1.75;
  color: var(--muted);
}
.credit p{ margin: 0; }
.credit a{
  color: var(--green); font-weight: 500;
  text-decoration: none;
}
.credit a:hover{ text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 760px){
  .wrap{ padding: 28px 16px 48px; }
  .app-title{ font-size: 21px; }
  :root{ --cell: 13px; --gap: 2px; --labelw: 26px; }
}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ transition: none !important; animation: none !important; }
}