@font-face {
  font-family: "Tadoru Mono";
  src: url("fonts/jetbrains-mono-subset.woff2") format("woff2");
  font-weight: 100 800;
  font-display: swap;
}

:root {
  --bg: #24272d;
  --surface: #2b2f36;
  --surface-2: #33373f;
  --fg: #e9eaec;
  --muted: #949aa4;
  --border: #3a3f47;
  --accent: #f0883e;
  --ok: #3fb950;
  --danger: #e05c5c;

  /* Mono is scoped to data, code and identifiers. Prose stays in the system
     font, which is what the dashboard does too. Both stacks append the same
     CJK fallbacks so the Japanese wordmark renders instead of tofu boxes. */
  --font-mono:
    "Tadoru Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
    "Hiragino Sans", "Noto Sans JP", "Yu Gothic", Meiryo, monospace;
  --font-prose:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans",
    "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;

  --wrap: 1080px;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-prose);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

code,
kbd,
pre,
.mono,
table,
.kpi-value {
  font-family: var(--font-mono);
}

a {
  color: var(--accent);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
}

h1,
h2,
h3 {
  line-height: 1.2;
  margin: 0;
  font-weight: 650;
  letter-spacing: -0.02em;
}
h2 {
  font-size: clamp(1.5rem, 3.2vw, 2.05rem);
}
h3 {
  font-size: 1.05rem;
  font-weight: 650;
}
p {
  margin: 0 0 1rem;
}
p:last-child {
  margin-bottom: 0;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.9rem;
}

.lede {
  font-size: 1.12rem;
  color: #c9ccd2;
  max-width: 68ch;
}
.muted {
  color: var(--muted);
}
.small {
  font-size: 0.9rem;
}

/* ---------------------------------------------------------------- header */

header.site {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(36, 39, 45, 0.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
header.site .wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 60px;
}
.brand {
  font-family: var(--font-mono);
  font-size: 1.28rem;
  font-weight: 600;
  color: var(--fg);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-right: auto;
}
.brand:hover {
  text-decoration: none;
}
.brand-jp {
  background: #ffffff;
  color: #000000;
  border-radius: 4px;
  padding: 0.05rem 0.4rem;
  font-weight: 500;
  font-size: 0.92em;
}
nav.site {
  display: flex;
  gap: 22px;
  align-items: center;
}
nav.site a {
  color: var(--muted);
  font-size: 0.9rem;
}
nav.site a:hover {
  color: var(--fg);
  text-decoration: none;
}
/* Language pair. Two real URLs rather than a JS switcher: each language is
   shareable, indexable, and there is no state to lose on navigation. */
.lang {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.8rem;
}
.lang a {
  color: var(--muted);
  padding: 2px 6px;
  border-radius: 4px;
}
.lang a:hover {
  color: var(--fg);
  text-decoration: none;
  background: var(--surface-2);
}
.lang a[aria-current="true"] {
  color: var(--accent);
  background: var(--surface);
}
.lang .sep {
  color: var(--border);
}
@media (max-width: 780px) {
  nav.site .hide-sm {
    display: none;
  }
}

/* Below this the wordmark and the nav no longer fit on one line, and the
   Japanese labels are wider still. Wrapping cannot overflow the way a fixed
   single row can, whatever the translation does to the label widths — and the
   body must never scroll sideways. */
@media (max-width: 560px) {
  header.site .wrap {
    height: auto;
    flex-wrap: wrap;
    gap: 6px 16px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  nav.site {
    gap: 16px;
  }
}

/* ------------------------------------------------------------------ hero */

.hero {
  padding: 84px 0 56px;
}
.hero h1 {
  font-size: clamp(2.1rem, 5.6vw, 3.4rem);
  max-width: 20ch;
  margin-bottom: 1.1rem;
}
.hero h1 .accent {
  color: var(--accent);
}

.cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
  align-items: center;
}

.install {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 11px 12px 11px 16px;
  font-family: var(--font-mono);
  font-size: 0.92rem;
}
.install .prompt {
  color: var(--muted);
  user-select: none;
}
.install code {
  color: var(--fg);
}
.copy {
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: #a8adb6;
  border-radius: 5px;
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  cursor: pointer;
}
.copy:hover {
  color: var(--fg);
  border-color: #4a505a;
}
.copy.done {
  color: var(--ok);
  border-color: var(--ok);
}

.btn {
  display: inline-block;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 11px 18px;
  color: var(--fg);
  font-size: 0.92rem;
}
.btn:hover {
  border-color: #4a505a;
  text-decoration: none;
}
.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #1b1d21;
  font-weight: 600;
}
.btn-primary:hover {
  background: #f5975a;
  border-color: #f5975a;
}

/* ------------------------------------------------------------- stat strip */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  margin: 56px 0 0;
}
.stat {
  background: var(--bg);
  padding: 22px 20px;
}
.stat .kpi-value {
  font-size: 1.7rem;
  color: var(--accent);
  font-weight: 600;
  line-height: 1.1;
}
.stat .kpi-label {
  font-size: 0.86rem;
  color: var(--muted);
  margin-top: 5px;
}

/* --------------------------------------------------------------- sections */

section {
  padding: 72px 0;
  border-top: 1px solid var(--border);
}
section.plain {
  border-top: none;
}
.section-head {
  max-width: 70ch;
  margin-bottom: 34px;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 22px 22px 24px;
}
.card h3 {
  margin-bottom: 8px;
}
.card p {
  font-size: 0.95rem;
  color: #c2c6cd;
}

pre {
  background: #1e2126;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px 18px;
  overflow-x: auto;
  font-size: 0.88rem;
  line-height: 1.7;
  margin: 0;
}
pre .c {
  color: var(--muted);
}
pre .p {
  color: var(--accent);
}

/* A <pre> that carries its own copy button. Kept always visible rather than
   revealed on hover: copying the command IS the call to action here, and a
   hover-only control is invisible on touch and to anyone scanning the page. */
.snippet {
  position: relative;
}
.snippet pre {
  padding-right: 76px;
}
.snippet .copy {
  position: absolute;
  top: 9px;
  right: 9px;
  background: var(--surface);
}

/* ------------------------------------------------------------ collect list */

.collect {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 20px;
}
.collect ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.collect li {
  display: flex;
  gap: 11px;
  align-items: baseline;
  padding: 7px 0;
  border-bottom: 1px solid rgba(58, 63, 71, 0.55);
  font-size: 0.93rem;
}
.collect li:last-child {
  border-bottom: none;
}
.collect .mark {
  font-family: var(--font-mono);
  flex: none;
  width: 14px;
}
.yes .mark {
  color: var(--ok);
}
.no .mark {
  color: var(--danger);
}
.collect .why {
  color: var(--muted);
}

/* -------------------------------------------------------- dashboard mock */

.mock {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.mock-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--surface-2);
  flex: none;
}
.mock-url {
  margin-left: 10px;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--muted);
}
.mock-body {
  padding: 20px;
}
.mock-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 18px;
  margin-bottom: 24px;
}
.mock-kpi {
  display: flex;
  gap: 10px;
}
.mock-kpi .icon {
  font-family: var(--font-mono);
  color: var(--muted);
  width: 20px;
  flex: none;
  font-size: 0.95rem;
}
.mock-kpi .kpi-value {
  font-size: 1.45rem;
  color: var(--accent);
  font-weight: 600;
  line-height: 1.15;
}
.mock-kpi .kpi-label {
  font-size: 0.78rem;
  color: var(--muted);
}

.mock table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.83rem;
}
.mock th {
  text-align: left;
  font-weight: 500;
  color: var(--muted);
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.mock td {
  padding: 7px 8px;
  border-bottom: 1px solid rgba(58, 63, 71, 0.4);
}
.mock td.num {
  text-align: right;
  color: var(--muted);
  width: 74px;
}
.mock td.bar-cell {
  width: 34%;
}
.bar {
  height: 6px;
  background: var(--surface-2);
  border-radius: 3px;
  overflow: hidden;
}
.bar i {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
}
.mock-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 26px;
}
.mock-cols h3 {
  margin: 0 0 8px;
  font-size: 0.78rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 500;
}

/* --------------------------------------------------------------- steps */

.steps {
  counter-reset: step;
  display: grid;
  gap: 18px;
}
.step {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 16px;
  align-items: start;
}
.step .n {
  counter-increment: step;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--accent);
  border: 1px solid var(--border);
  border-radius: 6px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
}
.step .n::before {
  content: counter(step);
}
.step h3 {
  margin-bottom: 6px;
}
.step p {
  font-size: 0.94rem;
  color: #c2c6cd;
  margin-bottom: 10px;
}

/* ----------------------------------------------------------------- faq */

details {
  border-bottom: 1px solid var(--border);
  padding: 16px 0;
}
details summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 1rem;
  list-style: none;
  display: flex;
  gap: 12px;
  align-items: baseline;
}
details summary::-webkit-details-marker {
  display: none;
}
details summary::before {
  content: "+";
  color: var(--accent);
  font-family: var(--font-mono);
  flex: none;
}
details[open] summary::before {
  content: "\2212";
}
details .answer {
  padding: 12px 0 0 24px;
  color: #c2c6cd;
  font-size: 0.95rem;
  max-width: 78ch;
}

/* -------------------------------------------------------------- callout */

.callout {
  border-left: 3px solid var(--accent);
  background: var(--surface);
  border-radius: 0 8px 8px 0;
  padding: 18px 22px;
  font-size: 0.95rem;
  color: #c2c6cd;
}

/* --------------------------------------------------------------- footer */

footer.site {
  border-top: 1px solid var(--border);
  padding: 44px 0 60px;
  color: var(--muted);
  font-size: 0.88rem;
}
footer.site .cols {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: space-between;
}
footer.site ul {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}
footer.site li {
  padding: 3px 0;
}
footer.site h3 {
  margin: 0;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--fg);
  font-weight: 600;
}