:root {
  --paper: #f1f3f2;
  --surface: #e4eaeb;
  --ink: #12202a;
  --muted: #465761;
  --rule: #c3ccd1;
  --probe: #0b6470;
  --drop: #b42318;
  --on-drop: #fff;
  --code-bg: #12202a;
  --code-ink: #e4ecef;
  --code-muted: #93a3ad;
  --font-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-code: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --measure: 38rem;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0e161b;
    --surface: #152129;
    --ink: #e4ecef;
    --muted: #9fb0ba;
    --rule: #27363f;
    --probe: #4cc3d3;
    --drop: #ff7a6b;
    --on-drop: #1a0b09;
    --code-bg: #091014;
  }
}
:root[data-theme="dark"] {
  --paper: #0e161b;
  --surface: #152129;
  --ink: #e4ecef;
  --muted: #9fb0ba;
  --rule: #27363f;
  --probe: #4cc3d3;
  --drop: #ff7a6b;
  --on-drop: #1a0b09;
  --code-bg: #091014;
}
[dir="rtl"] {
  --font-body: "Vazirmatn", "Instrument Sans", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 1.0625rem/1.65 var(--font-body);
}
[dir="rtl"] body { line-height: 1.95; }
a { color: var(--probe); text-underline-offset: 0.2em; }
a:hover { color: var(--ink); }
:focus-visible { outline: 3px solid var(--probe); outline-offset: 3px; border-radius: 2px; }
code, pre, kbd { font-family: var(--font-code); direction: ltr; unicode-bidi: isolate; }
code { font-size: 0.92em; }

.wrap { width: min(100% - 2rem, 70rem); margin-inline: auto; }

/* header */
.site-header { padding-block: 1rem; border-bottom: 1px solid var(--rule); }
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.5rem; }
.brand { font: 700 1.25rem/1 var(--font-code); color: var(--ink); text-decoration: none; margin-inline-end: auto; padding-block: 0.75rem; }
.site-nav { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
.site-nav a, .lang-switch { color: var(--ink); text-decoration: none; padding-block: 0.7rem; min-height: 44px; display: inline-flex; align-items: center; }
.site-nav a:hover, .lang-switch:hover { color: var(--probe); text-decoration: underline; }
.lang-switch { font-weight: 600; border: 1px solid var(--rule); border-radius: 6px; padding-inline: 0.9rem; }
[dir="rtl"] .lang-switch { font-family: "Instrument Sans", system-ui, sans-serif; }

/* hero */
.hero { padding-block: 2.5rem 3rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; align-items: center; }
h1 { font-size: clamp(2.1rem, 7vw, 3.6rem); line-height: 1.08; letter-spacing: -0.025em; font-weight: 700; margin: 0 0 1.25rem; max-width: 16ch; text-wrap: balance; }
[dir="rtl"] h1 { line-height: 1.35; letter-spacing: 0; max-width: 18ch; }
.lede { font-size: 1.15rem; color: var(--muted); max-width: 34rem; margin: 0 0 1.75rem; }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding-inline: 1.25rem; border-radius: 6px; font: 600 1rem var(--font-body); text-decoration: none; border: 1px solid var(--ink); cursor: pointer; background: transparent; color: var(--ink); }
.btn:hover { background: var(--surface); color: var(--ink); }
.btn.primary { background: var(--ink); color: var(--paper); }
.btn.primary:hover { background: var(--probe); border-color: var(--probe); color: var(--paper); }
[dir="rtl"] .btn { font-family: var(--font-body); }

/* the one memorable thing: the probe diagram */
.diagram { margin: 0; background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 1rem; }
.diagram svg { display: block; width: 100%; height: auto; max-width: 26rem; margin-inline: auto; }
.diagram text { font-family: var(--font-body); fill: var(--ink); font-size: 13px; }
.diagram text { paint-order: stroke; stroke: var(--surface); stroke-width: 6px; stroke-linejoin: round; }
.diagram .code { font-family: var(--font-code); }
.diagram .drop { fill: var(--drop); font-weight: 700; }
.diagram .muted { fill: var(--muted); }
.diagram .line { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.diagram .box { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; }
.diagram .flow { stroke: var(--probe); stroke-width: 3; stroke-dasharray: 3 9; stroke-linecap: round; fill: none; animation: flow 1.1s linear 2, fade 0.4s ease 2.3s forwards; }
.diagram .head { fill: var(--probe); }
.diagram .plug { fill: var(--drop); transform-box: fill-box; transform-origin: center; animation: plug 0.5s ease-out 2.2s backwards; }
.diagram .plug-label { animation: appear 0.4s ease-out 2.5s backwards; }
@keyframes flow { to { stroke-dashoffset: -24; } }
@keyframes plug { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes fade { to { opacity: 0.25; } }
@keyframes appear { from { opacity: 0; } to { opacity: 1; } }
.diagram figcaption { margin-top: 0.75rem; font-size: 0.95rem; color: var(--muted); }

/* sections: heading sits beside its text on wide screens */
.block { padding-block: 2.5rem; border-top: 1px solid var(--rule); display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.block > h2 { margin: 0; font-size: 1.5rem; line-height: 1.25; letter-spacing: -0.01em; }
[dir="rtl"] .block > h2 { letter-spacing: 0; }
.block .body { max-width: var(--measure); }
.block .body > :first-child { margin-top: 0; }
.block p { margin: 0 0 1rem; }

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.steps li { display: grid; grid-template-columns: 2.25rem 1fr; gap: 0.5rem; }
.steps .n { font: 700 1.25rem/1.4 var(--font-code); color: var(--probe); }
[dir="rtl"] .steps .n { font-family: var(--font-body); }

pre { margin: 0 0 1rem; padding: 1rem 1.1rem; background: var(--code-bg); color: var(--code-ink); border-radius: 8px; overflow-x: auto; font-size: 0.875rem; line-height: 1.7; text-align: left; }
pre .c { color: var(--code-muted); }
:not(pre) > code { background: var(--surface); border: 1px solid var(--rule); border-radius: 4px; padding: 0.05em 0.35em; }
.copy-status { margin-inline-start: 0.75rem; color: var(--muted); font-size: 0.95rem; }

.limits { margin: 0; padding-inline-start: 1.25rem; display: grid; gap: 0.6rem; }
.limits li::marker { color: var(--drop); }

.site-footer { border-top: 1px solid var(--rule); padding-block: 1.5rem 2.5rem; color: var(--muted); font-size: 0.95rem; }
.site-footer p { margin: 0.25rem 0; }
.site-footer a { color: var(--ink); }

@media (min-width: 768px) {
  .hero { padding-block: 4rem 4.5rem; }
  .block { padding-block: 3.25rem; }
}
@media (min-width: 1024px) {
  .hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 4rem; }
  .block { grid-template-columns: 14rem minmax(0, 1fr); gap: 3rem; }
}
@media (prefers-reduced-motion: reduce) {
  .diagram .flow { animation: none; stroke-dasharray: none; opacity: 0.25; }
  .diagram .plug, .diagram .plug-label { animation: none; }
}