/* Decorative glyphs in ::before/::after use `content: "x" / ""` so screen readers skip them.
   Look: a measuring instrument with a terminal. Sections are divided by rules rather than
   boxed in cards, readings use a monospace face, and the mock stream is a black-and-green
   terminal in both themes. Fonts are self-hosted in web/fonts/. */
:root {
  --bg: #f3f3ef;
  --surface-2: #e8e8e2;
  --border: #cfcfc6;
  --text: #16181a;
  --muted: #5c615f;
  --accent: #0f7a4a;
  --accent-text: #ffffff;
  --ok: #0f7a4a;
  --warn: #9a5a00;
  --bad: #b3261e;
  --bar-gpu: #0f7a4a;
  --bar-kv: #6fbf95;
  --bar-cpu: #c98a1b;
  /* The terminal stays dark in the light theme too. */
  --term-bg: #050806;
  --term-head: #0b110d;
  --term-edge: #0f2a1b;
  --term-text: #b8f5c9;
  --term-muted: #6f9c7f;
  --term-accent: #39ff88;
  --term-user: #14221a;
  --term-warn: #ffb547;
  --sans: "Noto Sans KR Variable", "Noto Sans JP Variable", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono Variable", "Noto Sans KR Variable", "Noto Sans JP Variable", ui-monospace, Menlo, Consolas, monospace;
  color-scheme: light;
}
/* Japanese pages prefer the Japanese forms of shared kanji. */
:root:lang(ja) {
  --sans: "Noto Sans JP Variable", "Noto Sans KR Variable", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono Variable", "Noto Sans JP Variable", "Noto Sans KR Variable", ui-monospace, Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #070908;
    --surface-2: #121815;
    --border: #223029;
    --text: #d8eedf;
    --muted: #8aa596;
    --accent: #39ff88;
    --accent-text: #03140a;
    --ok: #39ff88;
    --warn: #e2a64a;
    --bad: #f0786d;
    --bar-gpu: #39ff88;
    --bar-kv: #1f8a4c;
    --bar-cpu: #e2a64a;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #070908;
  --surface-2: #121815;
  --border: #223029;
  --text: #d8eedf;
  --muted: #8aa596;
  --accent: #39ff88;
  --accent-text: #03140a;
  --ok: #39ff88;
  --warn: #e2a64a;
  --bad: #f0786d;
  --bar-gpu: #39ff88;
  --bar-kv: #1f8a4c;
  --bar-cpu: #e2a64a;
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 var(--sans);
}

a { color: var(--accent); }

/* Break Korean at spaces, and short Japanese labels at phrase boundaries, rather than inside words. */
html:lang(ko) { word-break: keep-all; overflow-wrap: anywhere; }
html:lang(ja) :is(label, h2, h3, button, summary, .badge, .legend, .bar-label, .headline, .site-footer) { word-break: auto-phrase; }

.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 16px;
}

.site-header { padding: 28px 0 12px; }
/* The name is followed by a block cursor. */
.site-header h1 { margin: 0; font: 600 1.45rem/1.3 var(--mono); letter-spacing: -0.02em; }
.site-header h1::after {
  content: "";
  display: inline-block;
  width: 0.55em;
  height: 1.05em;
  margin-left: 6px;
  vertical-align: -0.15em;
  background: var(--accent);
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
.tagline { margin: 4px 0 0; color: var(--muted); }

h2 { font-size: 1rem; margin: 0; }
h3 { font-size: 0.85rem; margin: 18px 0 8px; font-weight: 600; }
h3::before { content: "## "; content: "## " / ""; color: var(--muted); font-family: var(--mono); font-weight: 400; }

/* Sections are separated by a rule, not boxed. */
.panel {
  border-top: 1px solid var(--border);
  padding: 20px 0;
}

.configs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 0 32px;
}

.config { container-type: inline-size; }
.config-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.config-head h2 { display: flex; align-items: center; white-space: nowrap; }
/* With two configurations each is marked [A] / [B], in the same form on its terminal. */
.config-head .tag { color: var(--accent); font: 600 1rem var(--mono); margin-right: 8px; }

.configs.single { grid-template-columns: minmax(0, 1fr); }

.compare-bar {
  grid-column: 1 / -1;
  padding: 0 0 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
  justify-content: space-between;
}
.report-links { color: var(--muted); font: 0.85rem var(--mono); margin-left: auto; }
.compare-bar button {
  border: 0;
  background: none;
  padding: 0;
  color: var(--accent);
  font: 0.85rem var(--mono);
}

/* One configuration: settings and results side by side on wide screens. */
@media (min-width: 900px) {
  .configs.single .config-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 28px;
  }
  .configs.single .result {
    margin-top: 0;
    border-top: 0;
    border-left: 1px solid var(--border);
    padding: 0 0 0 28px;
  }
}

/* Tabs as underlined labels. */
.segmented {
  display: inline-flex;
  max-width: 100%;
  gap: 2px;
  overflow-x: auto;
}
.segmented button {
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  padding: 6px 10px;
  white-space: nowrap;
}
.segmented button:hover { color: var(--text); }
.segmented button[aria-pressed="true"] {
  color: var(--text);
  border-bottom-color: var(--accent);
  font-weight: 600;
}
/* Narrow panels: tabs get their own full-width row under the title. */
@container (max-width: 600px) {
  .config-head h2 { flex: 1; }
  .config-head .segmented { order: 3; flex: 1 1 100%; }
  .config-head .segmented button { flex: 1 1 auto; padding: 6px 6px; white-space: normal; line-height: 1.25; }
}

.fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
.fields + .fields { margin-top: 10px; }

label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.82rem;
  color: var(--muted);
}

select, input, textarea, button {
  font: inherit;
  color: var(--text);
}

select, input, textarea {
  width: 100%;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: var(--surface-2);
}
select:hover, input:hover, textarea:hover { border-color: var(--border); }

button {
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface-2);
  cursor: pointer;
}
button:hover { border-color: var(--accent); }
button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
  font: 600 0.95rem var(--mono);
}
#play::before { content: "▶ "; content: "▶ " / ""; }
#play.playing::before { content: "■ "; content: "■ " / ""; }
button.link {
  border: 0;
  background: none;
  color: var(--accent);
  padding: 4px 0;
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.gpu-row {
  display: grid;
  grid-template-columns: 1fr 72px auto;
  gap: 8px;
  align-items: end;
  margin-bottom: 8px;
}

/* Results */
.result { margin-top: 18px; border-top: 1px solid var(--border); padding-top: 14px; }

/* Only problems get a status line; a configuration that fits needs none. */
.badge {
  display: block;
  margin-bottom: 6px;
  font: 600 0.85rem var(--mono);
}
.badge.warn { color: var(--warn); }
.badge.warn::before { content: "▲ "; content: "▲ " / ""; }
.badge.bad { color: var(--bad); }
.badge.bad::before { content: "✕ "; content: "✕ " / ""; }

.headline {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 4px;
}
.headline .big { font: 600 2.6rem/1.15 var(--mono); letter-spacing: -0.04em; }
.headline .unit { color: var(--muted); }

/* Readings as a list with dotted leaders. */
.metrics { margin: 8px 0 14px; }
.metric {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 3px 0;
}
.metric .k { font-size: 0.85rem; color: var(--muted); }
.metric::after {
  content: "";
  order: 1;
  flex: 1 1 24px;
  border-bottom: 1px dotted var(--border);
  transform: translateY(-4px);
}
.metric .v {
  order: 2;
  font: 600 0.95rem var(--mono);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.bars { display: grid; gap: 8px; }
.bar-row { display: grid; gap: 3px; }
.bar-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--muted);
  gap: 8px;
}
.bar-label span:last-child { white-space: nowrap; font-family: var(--mono); }
.bar {
  height: 6px;
  background: var(--surface-2);
  overflow: hidden;
  display: flex;
}
.bar span { height: 100%; }
.bar .w { background: var(--bar-gpu); }
.bar .kv { background: var(--bar-kv); }
.bar .cpu { background: var(--bar-cpu); }
.bar.over { box-shadow: 0 0 0 1px var(--bad); }

.legend { display: flex; gap: 14px; font-size: 0.75rem; color: var(--muted); margin-top: 6px; flex-wrap: wrap; }
.legend i { display: inline-block; width: 10px; height: 10px; margin-right: 4px; vertical-align: -1px; }

/* Notes and warnings read as footnotes. */
.notes { margin: 10px 0 0; padding: 0; list-style: none; color: var(--warn); font-size: 0.85rem; }
.notes li::before { content: "※ "; content: "※ " / ""; }

.warnings {
  margin-top: 12px;
  padding: 2px 0 2px 12px;
  border-left: 2px solid var(--warn);
  font-size: 0.85rem;
}
.warnings strong { color: var(--warn); font: 600 0.8rem var(--mono); }
.warnings strong::before { content: "! "; content: "! " / ""; }
.warnings ul { margin: 4px 0 0; padding-left: 18px; }

.measured {
  margin-top: 12px;
  font-size: 0.82rem;
  color: var(--muted);
  background: var(--surface-2);
  border-radius: 4px;
  padding: 8px 10px;
}
.measured table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.measured th, .measured td { text-align: right; padding: 2px 4px; }
.measured th:first-child, .measured td:first-child { text-align: left; }
.measured .old-build { color: var(--muted); font-size: 0.75rem; }
.measured p.old-build { margin: 6px 0 0; }
.measured td { vertical-align: top; }
/* Numbers and their headings stay on one line; a table too wide for the panel scrolls. */
.measured { overflow-x: auto; }
.measured table { overflow-wrap: normal; }
.measured th:first-child { min-width: 9em; }
.measured th:not(:first-child), .measured td:not(:first-child) { white-space: nowrap; }
.measured .run-meta { display: block; font-size: 0.72rem; }
.measured p.sources { margin: 6px 0 0; }

details summary { cursor: pointer; color: var(--muted); font-size: 0.85rem; margin-top: 14px; }

/* Mock stream */
.mock-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 12px;
  flex-wrap: wrap;
}
.mock-controls { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; }
.mock-controls label { width: auto; min-width: 120px; }
.mock-controls label > span { white-space: nowrap; }
.mock-controls .text-picker { width: 260px; max-width: 100%; }
.hint { color: var(--muted); font-size: 0.85rem; margin: 10px 0; }
.caution { color: var(--warn); font-size: 0.85rem; margin: 10px 0; }
.caution::before { content: "! "; content: "! " / ""; font-family: var(--mono); font-weight: 600; }
.credits { font-size: 0.82rem; margin: 10px 0 0; }
.credit-notes { color: var(--muted); }
.credit-notes summary { margin: 4px 0 0; font-size: 0.8rem; }
.custom-text { margin-top: 10px; }
.custom-text textarea { resize: vertical; line-height: 1.5; }

.streams {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 12px;
}
.stream {
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--term-bg);
  color: var(--term-text);
  box-shadow: 0 0 0 1px var(--term-edge);
}
.stream-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  background: var(--term-head);
  font: 0.78rem var(--mono);
  font-variant-numeric: tabular-nums;
  flex-wrap: wrap;
}
.stream-head .tok { color: var(--term-muted); }
.stream-head .stats { color: var(--term-accent); }
.stream-head .tag { color: var(--term-accent); }
.stream-head .problem { flex-basis: 100%; color: var(--term-warn); }
.stream-head .problem:empty { display: none; }
.stream-head .problem::before { content: "▲ "; content: "▲ " / ""; }
.stream-out {
  height: 260px;
  overflow-y: auto;
  padding: 10px;
  font: 0.88rem/1.6 var(--mono);
  white-space: pre-wrap;
  word-break: break-word;
}
.stream-out.waiting { color: var(--term-muted); height: auto; }
.stream-out.waiting::before { content: "$ "; content: "$ " / ""; color: var(--term-accent); }
.stream-out .msg { margin: 0 0 10px; }
.stream-out .msg .who {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--term-accent);
}
.stream-out .msg.user .body {
  display: inline-block;
  background: var(--term-user);
  border-radius: 4px;
  padding: 6px 10px;
}
.stream-out .pending, .stream-out .cached { color: var(--term-muted); }
/* A cursor follows the newest text while playback runs. */
.streams.live .msg:last-child .body::after {
  content: "█";
  content: "█" / "";
  color: var(--term-accent);
  animation: blink 1s steps(1) infinite;
}

@media (prefers-reduced-motion: reduce) {
  .site-header h1::after, .streams.live .msg:last-child .body::after { animation: none; }
}

.about ul { padding-left: 18px; margin: 10px 0; }
.about li { margin: 4px 0; }

.site-footer {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font: 0.78rem var(--mono);
  padding-top: 16px;
  padding-bottom: 32px;
}

/* The author's logo on its own row, drawn in the text color through a mask. */
.site-footer .signature { flex-basis: 100%; margin-top: 14px; }
.site-footer .author {
  display: block;
  width: 132px;  /* the logo is 6.6 times as wide as it is tall */
  height: 20px;
  background: var(--muted);
  -webkit-mask: url(../brand/shy-hotaru.svg) left center / contain no-repeat;
  mask: url(../brand/shy-hotaru.svg) left center / contain no-repeat;
}
.site-footer .author:hover { background: var(--text); }

.error { color: var(--bad); }

.header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}
.lang-picker { width: 140px; }

.search-box { max-width: 520px; }
.search-results {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.search-results li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  flex-wrap: wrap;
}
.search-hit { display: flex; flex-direction: column; min-width: 0; }
.search-meta { font-size: 0.8rem; color: var(--muted); }
.search-actions { display: flex; gap: 6px; }
.search-results li.search-empty { color: var(--muted); border-style: dashed; }

label.check {
  flex-direction: row;
  align-items: center;
  gap: 6px;
  margin: 2px 0 8px;
}
label.check input { width: auto; }