:root {
  --bg: #ffffff;
  --ink: #18181b;
  --body: #3f3f46;
  --quiet: #71717a;
  --edge: #e4e4e7;
  --area: #f6f7f8;
  --code: #fafafa;
  --accent: #1965e3;
  --accent-soft: #e4f3ff;
  --button: #18181b;
  --on-button: #ffffff;
  --mock-block: #eceef0;
  --mock-line: #e1e4e7;
  --sans: system-ui, -apple-system, "Segoe UI", "Hiragino Sans", "Noto Sans JP", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111113;
    --ink: #f4f4f5;
    --body: #d4d4d8;
    --quiet: #a1a1aa;
    --edge: #2e2e33;
    --area: #1b1b1f;
    --code: #18181b;
    --accent: #69abff;
    --accent-soft: #0a2063;
    --button: #f4f4f5;
    --on-button: #18181b;
    --mock-block: #26262b;
    --mock-line: #2f2f35;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

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

a { color: inherit; }

main, .top {
  max-width: 672px;
  margin: 0 auto;
  padding: 0 16px;
}

.top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  height: 56px;
  font-size: 14px;
}

.top nav { display: flex; gap: 18px; }

.top a { color: var(--quiet); text-decoration: none; }
.top a:hover { color: var(--ink); }

.wordmark { display: flex; }
.wordmark img { display: block; height: 20px; width: auto; }

.hero {
  padding: 56px 0 40px;
  text-align: center;
}

h1 {
  margin: 0 auto;
  line-height: 1;
  max-width: 380px;
  width: 100%;
}

h1 img {
  width: 100%;
  height: auto;
}

.lead {
  max-width: 520px;
  margin: 14px auto 0;
  font-size: 17px;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
}

.button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border: 1px solid var(--edge);
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink);
  font: 500 14px var(--sans);
  text-decoration: none;
  cursor: pointer;
}

.button.primary {
  border-color: var(--button);
  background: var(--button);
  color: var(--on-button);
}

.facts {
  margin: 18px 0 0;
  color: var(--quiet);
  font-size: 13px;
}

/* Product demo: the NeedMark parts copy the toolbar's own colours and sizes so the loop looks like the real thing. */
.mock {
  margin: 0 0 56px;
  border: 1px solid var(--edge);
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg);

  --nm-paper: #ffffff;
  --nm-ink: #27292c;
  --nm-ink-2: #3f4348;
  --nm-quiet: #54585e;
  --nm-soft: #f1f2f3;
  --nm-edge: #dfe1e4;
  --nm-edge-strong: #c7cbcf;
  --nm-accent: #0f4cc0;
  --nm-accent-bg: #e4f3ff;
  --nm-on-accent: #ffffff;
  --nm-target: #1965e3;
  --nm-success: #006e00;
  --nm-shadow-panel: 0 18px 48px rgb(22 27 29 / 0.18), 0 0 0 1px rgb(130 144 150 / 0.18);
  --nm-shadow-floating: 0 8px 24px -4px rgb(22 27 29 / 0.18), 0 0 0 1px rgb(130 144 150 / 0.18);
}

@media (prefers-color-scheme: dark) {
  .mock {
    --nm-paper: #27292c;
    --nm-ink: #ffffff;
    --nm-ink-2: #f1f2f3;
    --nm-quiet: #c7cbcf;
    --nm-soft: #3f4348;
    --nm-edge: #3f4348;
    --nm-edge-strong: #54585e;
    --nm-accent: #9acdff;
    --nm-accent-bg: #0a2063;
    --nm-on-accent: #0a2063;
    --nm-target: #69abff;
    --nm-success: #72c266;
    --nm-shadow-panel: 0 18px 48px rgb(0 0 0 / 0.58), 0 0 0 1px rgb(92 115 126 / 0.3);
    --nm-shadow-floating: 0 8px 24px -4px rgb(0 0 0 / 0.5), 0 0 0 1px rgb(92 115 126 / 0.3);
  }
}

.mock-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--edge);
  background: var(--area);
}

.mock-bar i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--mock-line);
}

.mock-bar span {
  margin-left: 10px;
  padding: 1px 10px;
  border-radius: 5px;
  background: var(--bg);
  color: var(--quiet);
  font: 11px var(--mono);
}

/* The stage keeps one 640×360 layout and site.js scales it, so every position in the loop holds on narrow screens. */
.demo {
  height: calc(360px * var(--s, 1));
  overflow: hidden;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.stage {
  position: relative;
  width: 640px;
  height: 360px;
  transform: scale(var(--s, 1));
  transform-origin: 0 0;
  transition: opacity 0.4s;
}

.stage.fade { opacity: 0; }
.stage.instant, .stage.instant * { transition: none !important; animation: none !important; }

.app { padding: 20px; }

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.stat {
  height: 72px;
  padding: 12px 14px;
  border: 1px solid var(--edge);
  border-radius: 8px;
  line-height: 1.2;
}

.stat span { display: block; color: var(--quiet); font-size: 12px; }
.stat b { display: block; margin-top: 6px; color: var(--ink); font-size: 22px; font-weight: 700; }

.stat[data-target] b {
  font-size: 12px;
  font-weight: 400;
  color: var(--quiet);
  transition: font-size 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), color 0.5s;
}

.fixed .stat[data-target] b { font-size: 22px; font-weight: 700; color: var(--ink); }

.chart {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  height: 160px;
  margin-top: 12px;
  padding: 18px 20px 0;
  border: 1px solid var(--edge);
  border-radius: 8px;
}

.chart i {
  flex: 1;
  border-radius: 4px 4px 0 0;
  background: var(--mock-block);
}

/* NeedMark overlay */
.nm-outline, .nm-pin, .nm-panel, .agent, .cursor { position: absolute; }

.nm-outline {
  top: 18px;
  left: 18px;
  width: 196px;
  height: 76px;
  border: 2px solid var(--nm-target);
  border-radius: 2px;
  background: color-mix(in srgb, var(--nm-target) 8%, transparent);
  box-shadow: 0 0 0 1px #ffffff;
  opacity: 0;
}

.hover .nm-outline { opacity: 1; }
.selected .nm-outline { border-style: dashed; }

.nm-pin {
  top: 48px;
  left: 108px;
  width: 16px;
  height: 16px;
  border: 2px solid #ffffff;
  border-radius: 50% 50% 50% 2px;
  background: #1965e3;
  box-shadow: 0 2px 8px rgb(22 27 29 / 0.3);
  opacity: 0;
  scale: 0.4;
  transition: opacity 0.25s, scale 0.25s cubic-bezier(0.2, 0.8, 0.2, 1.4);
}

.pinned .nm-pin { opacity: 1; scale: 1; }
.pinned.resolved .nm-pin { opacity: 0; scale: 0.4; }

.nm-panel {
  width: 264px;
  padding: 14px;
  border-radius: 12px;
  background: var(--nm-paper);
  box-shadow: var(--nm-shadow-panel);
  color: var(--nm-ink);
  font: 13px/1.5 Helvetica, "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Hiragino Sans", system-ui, sans-serif;
  opacity: 0;
  scale: 0.95;
  visibility: hidden;
  transition: opacity 0.2s, scale 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0.2s;
}

.draft .nm-draft, .list .nm-list { opacity: 1; scale: 1; visibility: visible; }

.nm-draft { top: 16px; left: 228px; transform-origin: left top; }

.nm-preview {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  height: 52px;
  padding: 8px;
  border-radius: 4px;
  background: var(--nm-soft);
}

.nm-preview i { border-radius: 3px; background: var(--nm-paper); }
.nm-preview i:first-child { outline: 1.5px dashed var(--nm-target); }

.nm-chips { display: flex; gap: 6px; margin: 12px 0 8px; }

.nm-chips span {
  padding: 2px 10px;
  border: 1px solid var(--nm-edge);
  border-radius: 999px;
  color: var(--nm-ink-2);
  font-size: 12px;
}

.nm-chips .on { border-color: var(--nm-accent); background: var(--nm-accent-bg); color: var(--nm-accent); }

.nm-textarea {
  min-height: 62px;
  padding: 6px 8px;
  border: 1px solid var(--nm-accent);
  border-radius: 4px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--nm-accent) 25%, transparent);
}

.nm-textarea span::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 1.1em;
  margin-left: 1px;
  vertical-align: -0.2em;
  background: var(--nm-ink);
  animation: blink 1s steps(1) infinite;
}

@keyframes blink { 50% { opacity: 0; } }

.nm-row { display: flex; justify-content: space-between; margin-top: 10px; }

.nm-btn {
  padding: 5px 11px;
  border: 1px solid var(--nm-edge-strong);
  border-radius: 4px;
  font-size: 12px;
}

.nm-btn.primary {
  border-color: var(--nm-accent);
  background: var(--nm-accent);
  color: var(--nm-on-accent);
  opacity: 0.45;
  transition: opacity 0.15s;
}

.typed .nm-btn.primary { opacity: 1; }

.nm-list { right: 12px; bottom: 64px; padding-top: 0; transform-origin: right bottom; }

.nm-head {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 -14px;
  padding: 8px 8px 8px 14px;
  border-bottom: 1px solid var(--nm-edge);
  color: var(--nm-quiet);
}

.nm-head b { flex: 1; color: var(--nm-ink); font-size: 12px; font-weight: 600; }
.nm-head svg, .nm-resolve { width: 28px; height: 28px; padding: 6px; fill: currentColor; }
.nm-copy { display: flex; }
.nm-copy svg + svg, .copied .nm-copy svg:first-child { display: none; }
.copied .nm-copy svg + svg { display: block; color: var(--nm-success); }

.nm-card { position: relative; padding: 12px 0 0; }
.nm-card b { font-size: 12px; font-weight: 600; }
.nm-card small { color: var(--nm-quiet); font-size: 12px; }
.nm-card p { margin: 6px 0 2px; }

.nm-tag {
  display: inline-block;
  margin-top: 6px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--nm-soft);
  color: var(--nm-ink-2);
  font-size: 11px;
}

.nm-resolve { position: absolute; top: 6px; right: -6px; color: var(--nm-quiet); }
.resolved .nm-resolve { color: var(--nm-success); }

/* Coding agent: a neutral chat window, since NeedMark works with whichever agent the reader uses. */
.agent {
  z-index: 1;
  top: 12px;
  right: 12px;
  bottom: 12px;
  display: flex;
  flex-direction: column;
  width: 276px;
  border: 1px solid var(--edge);
  border-radius: 10px;
  background: var(--bg);
  box-shadow: 0 18px 48px rgb(0 0 0 / 0.16);
  font-size: 12px;
  line-height: 1.5;
  translate: calc(100% + 64px) 0;
  transition: translate 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.agent-on .agent { translate: 0 0; }

.agent-head {
  padding: 8px 12px;
  border-bottom: 1px solid var(--edge);
  color: var(--ink);
  font-weight: 600;
}

.agent-log {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  overflow: hidden;
}

.agent-log p { margin: 0; }

.agent-log .you {
  align-self: flex-end;
  max-width: 92%;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--area);
  color: var(--ink);
  font: 11px/1.5 var(--mono);
}

.agent-log .bot { color: var(--body); }
.agent-log .you, .agent-log .bot, .reply { display: none; }
.sent .agent-log .you, .thinking .agent-log .bot, .replied .reply { display: block; }
.replied .dots { display: none; }

.dots { display: inline-flex; gap: 4px; padding: 6px 0; }
.dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--quiet); animation: bounce 1s infinite; }
.dots i:nth-child(2) { animation-delay: 0.15s; }
.dots i:nth-child(3) { animation-delay: 0.3s; }

@keyframes bounce { 30% { translate: 0 -3px; opacity: 0.5; } }

.agent-input {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 10px 10px;
  padding: 8px 8px 8px 10px;
  border: 1px solid var(--edge);
  border-radius: 8px;
  color: var(--quiet);
}

.agent-input span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
  visibility: hidden;
}

.pasted .agent-input span { visibility: visible; }
.sent .agent-input span { visibility: hidden; }

.agent-input i {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--edge);
}

.pasted .agent-input i { background: var(--accent); }
.sent .agent-input i { background: var(--edge); }

/* Toolbar */
.nm-dock {
  position: absolute;
  bottom: 12px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border-radius: 12px;
  background: var(--nm-paper);
  box-shadow: var(--nm-shadow-floating);
  color: var(--nm-ink-2);
  font: 12px/1.5 Helvetica, "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Hiragino Sans", system-ui, sans-serif;
  translate: -50% 0;
  white-space: nowrap;
}

.nm-dock svg { display: block; width: 16px; height: 16px; fill: currentColor; }
.nm-dock .grip { width: 20px; color: var(--nm-quiet); }
.nm-dock .sep { width: 1px; height: 20px; margin: 0 4px; background: var(--nm-edge); }
.nm-dock .normal, .nm-dock .hint { display: flex; align-items: center; gap: 2px; }
.nm-dock .hint { display: none; gap: 8px; padding: 0 2px 0 6px; }
.commenting .nm-dock .normal { display: none; }
.commenting .nm-dock .hint { display: flex; }
.nm-dock .hint .nm-icon { width: 28px; height: 28px; color: var(--nm-quiet); }

.nm-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 4px;
}

.nm-icon img { display: block; width: 16px; height: 16px; }
.list .nm-icon[data-list] { background: var(--nm-soft); }

.badge {
  position: absolute;
  top: 15px;
  left: 20px;
  min-width: 14px;
  height: 14px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--nm-soft);
  color: var(--nm-ink-2);
  font: 600 9px/14px Helvetica, system-ui, sans-serif;
  text-align: center;
}

.badge:not([data-count="0"]) { background: #1965e3; color: #ffffff; }

.cursor {
  top: 0;
  left: 0;
  z-index: 2;
  width: 16px;
  height: 20px;
  translate: 420px 300px;
  transition: translate 0.6s cubic-bezier(0.45, 0, 0.2, 1), scale 0.12s;
  transform-origin: 0 0;
}

.cursor svg { display: block; width: 100%; height: 100%; fill: #18181b; stroke: #ffffff; stroke-width: 1.2; stroke-linejoin: round; }
.press .cursor { scale: 0.85; }

/* Sections */
section { margin: 0 0 56px; }

h2 {
  margin: 0 0 8px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
}

h3 {
  margin: 24px 0 6px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}

p { margin: 0 0 12px; }

code {
  font: 0.92em var(--mono);
}

:not(pre) > code {
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--area);
}

.code {
  position: relative;
  margin: 12px 0;
  border: 1px solid var(--edge);
  border-radius: 8px;
  background: var(--code);
}

.code pre {
  margin: 0;
  padding: 12px 48px 12px 14px;
  overflow-x: auto;
  color: var(--ink);
  font: 13px/1.6 var(--mono);
}

.copy {
  position: absolute;
  top: 6px;
  right: 6px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--quiet);
  cursor: pointer;
}

.copy:hover { background: var(--area); color: var(--ink); }
.copy svg { width: 15px; height: 15px; }
.copy .done, .copy.copied .idle { display: none; }
.copy.copied .done { display: block; color: var(--accent); }

/* The setup prompt only appears when the clipboard is refused, so it wraps to stay readable without scrolling sideways. */
#setup-prompt { padding-right: 14px; white-space: pre-wrap; }

.tabs {
  display: flex;
  gap: 4px;
  padding: 6px 6px 0;
  border-bottom: 1px solid var(--edge);
}

.tabs button {
  padding: 4px 10px 6px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--quiet);
  font: 500 13px var(--sans);
  cursor: pointer;
}

.tabs button[aria-selected="true"] { border-bottom-color: var(--ink); color: var(--ink); }

[data-panel][hidden] { display: none; }

ol.steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

ol.steps li {
  position: relative;
  padding: 6px 0 6px 32px;
  counter-increment: step;
}

ol.steps li::before {
  content: counter(step);
  position: absolute;
  top: 8px;
  left: 0;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--area);
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
}

ul.plain { margin: 0 0 12px; padding-left: 20px; }

.links { display: flex; flex-wrap: wrap; gap: 8px 20px; }

footer {
  max-width: 672px;
  margin: 0 auto;
  padding: 24px 16px 48px;
  border-top: 1px solid var(--edge);
  color: var(--quiet);
  font-size: 13px;
}

@media (max-width: 560px) {
  h1 { max-width: 200px; }
  .top nav a.optional { display: none; }
}