/* websystemer — layout concept: a quiet technical workbench.
   One bold move (the monospace wordmark + "paste anything" detector);
   everything else is ruled lines, tight type and generous space. */

@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/jetbrains-mono-latin-ext-wght-normal.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("/fonts/hanken-grotesk-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* color */
  --bg: #f1f3f6;
  --surface: #ffffff;
  --surface-2: #e9ecf1;
  --ink: #0d1117;
  --muted: #566070;
  --line: #d5dae2;
  --accent: #2b59ff;
  --accent-ink: #ffffff;
  --accent-soft: #e3e9ff;
  --ok: #167a3b;
  --warn: #a8530a;
  --err: #c62828;
  --ok-soft: #dcf3e4;
  --warn-soft: #fbead2;
  --err-soft: #fbe0e0;
  /* syntax */
  --syn-key: #2b59ff;
  --syn-str: #167a3b;
  --syn-num: #a8530a;
  --syn-lit: #8a3ffc;
  --syn-punc: #7a8595;
  /* type */
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --font-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* shape */
  --radius: 6px;
  --radius-lg: 10px;
  --shadow: 0 1px 0 rgba(13, 17, 23, 0.04), 0 8px 24px -12px rgba(13, 17, 23, 0.18);
  --maxw: 1680px; /* same on every page so navigating between home and tools never shifts the layout */
  --gutter: clamp(16px, 4.5vw, 72px); /* breathing room left and right; content box stays at most maxw wide */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0a0d12;
    --surface: #10141b;
    --surface-2: #171c25;
    --ink: #e8ecf2;
    --muted: #8a94a6;
    --line: #232a36;
    --accent: #7b9bff;
    --accent-ink: #0a0d12;
    --accent-soft: #18213d;
    --ok: #3dd68c;
    --warn: #f5b047;
    --err: #ff7a7a;
    --ok-soft: #10281d;
    --warn-soft: #2c2110;
    --err-soft: #2d1414;
    --syn-key: #7b9bff;
    --syn-str: #5fd69a;
    --syn-num: #f5b047;
    --syn-lit: #c3a0ff;
    --syn-punc: #66708a;
    --shadow: 0 1px 0 rgba(0, 0, 0, 0.4), 0 12px 32px -14px rgba(0, 0, 0, 0.7);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0a0d12;
  --surface: #10141b;
  --surface-2: #171c25;
  --ink: #e8ecf2;
  --muted: #8a94a6;
  --line: #232a36;
  --accent: #7b9bff;
  --accent-ink: #0a0d12;
  --accent-soft: #18213d;
  --ok: #3dd68c;
  --warn: #f5b047;
  --err: #ff7a7a;
  --ok-soft: #10281d;
  --warn-soft: #2c2110;
  --err-soft: #2d1414;
  --syn-key: #7b9bff;
  --syn-str: #5fd69a;
  --syn-num: #f5b047;
  --syn-lit: #c3a0ff;
  --syn-punc: #66708a;
  --shadow: 0 1px 0 rgba(0, 0, 0, 0.4), 0 12px 32px -14px rgba(0, 0, 0, 0.7);
  color-scheme: dark;
}
:root[data-theme="light"] { color-scheme: light; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
::selection { background: var(--accent); color: var(--accent-ink); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; background: var(--accent); color: var(--accent-ink); padding: 8px 12px; border-radius: var(--radius); z-index: 100; font-family: var(--font-mono); font-size: 13px; }
.skip:focus { top: 12px; }

.wrap {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}

/* ───── header ───── */
.site-header { border-bottom: 1px solid var(--line); background: var(--bg); position: sticky; top: 0; z-index: 20; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 56px; }
.wordmark { font-family: var(--font-mono); font-weight: 700; font-size: 17px; letter-spacing: -0.03em; color: var(--ink); text-decoration: none; display: inline-flex; align-items: baseline; }
.wordmark:hover { text-decoration: none; }
.cursor { display: inline-block; width: 0.55em; height: 1em; margin-left: 3px; background: var(--accent); transform: translateY(0.15em); animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.head-actions { display: flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 13px; }
.head-actions a { color: var(--muted); text-decoration: none; padding: 8px 10px; border-radius: var(--radius); }
.head-actions a:hover { color: var(--ink); background: var(--surface-2); }
.icon-btn { appearance: none; border: 0; background: transparent; color: var(--muted); width: 36px; height: 36px; border-radius: var(--radius); cursor: pointer; display: grid; place-items: center; }
.icon-btn:hover { color: var(--ink); background: var(--surface-2); }
.icon-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ───── tool strip ───── */
.tool-strip { border-bottom: 1px solid var(--line); background: var(--bg); }
.tool-strip .wrap { overflow-x: auto; scrollbar-width: none; }
.tool-strip .wrap::-webkit-scrollbar { display: none; }
.tool-strip ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; min-width: max-content; }
.tool-strip a { display: block; padding: 11px 12px; font-family: var(--font-mono); font-size: 12.5px; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tool-strip a:hover { color: var(--ink); }
.tool-strip a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }

/* ───── type ───── */
.eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 0; }
h1, h2, h3 { font-family: var(--font-mono); letter-spacing: -0.03em; text-wrap: balance; margin: 0; line-height: 1.12; }
h2 { font-size: 22px; font-weight: 700; }
h3 { font-size: 16px; font-weight: 600; letter-spacing: -0.02em; }
p { margin: 0; }
code, kbd, samp { font-family: var(--font-mono); font-size: 0.88em; background: var(--surface-2); padding: 0.1em 0.4em; border-radius: 4px; }

/* ───── hero ───── */
.hero { padding-block: clamp(40px, 8vw, 88px) clamp(32px, 5vw, 56px); display: grid; gap: 28px; }
.hero h1 { font-size: clamp(34px, 6.4vw, 68px); font-weight: 800; letter-spacing: -0.045em; max-width: 16ch; }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero .lede { font-size: clamp(17px, 2vw, 20px); color: var(--muted); max-width: 52ch; }
.facts { display: flex; flex-wrap: wrap; gap: 8px 20px; font-family: var(--font-mono); font-size: 12.5px; color: var(--muted); padding: 0; margin: 0; list-style: none; }
.facts li::before { content: "✓"; color: var(--ok); margin-right: 8px; }

/* ───── detector ───── */
.detector { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; max-width: 1100px; }
.detector-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.detector-bar .dots { display: flex; gap: 6px; }
.detector-bar .dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.detector textarea { display: block; width: 100%; min-height: 96px; resize: vertical; border: 0; background: transparent; color: var(--ink); font-family: var(--font-mono); font-size: 14px; line-height: 1.6; padding: 14px; outline: none; }
.detector-out { border-top: 1px solid var(--line); padding: 12px 14px; display: flex; gap: 12px 16px; align-items: flex-start; flex-wrap: wrap; font-family: var(--font-mono); font-size: 13px; min-height: 56px; }
.detector-out .what { flex: 1 1 260px; min-width: 0; }
.detector-out pre { margin: 6px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12.5px; color: var(--muted); max-height: 160px; overflow: auto; }
.detector-out .hint { color: var(--muted); }

/* ───── buttons & controls ───── */
.btn { appearance: none; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; line-height: 1; padding: 9px 12px; border-radius: var(--radius); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; white-space: nowrap; }
.btn:hover { border-color: var(--muted); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { border-color: var(--accent); filter: brightness(1.08); }
.btn-ghost { border-color: transparent; background: transparent; color: var(--muted); }
.btn-ghost:hover { color: var(--ink); background: var(--surface-2); border-color: transparent; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 2px; gap: 2px; }
.seg button, .seg label { appearance: none; border: 0; background: transparent; color: var(--muted); font-family: var(--font-mono); font-size: 12.5px; padding: 7px 11px; border-radius: 4px; cursor: pointer; line-height: 1; }
.seg button[aria-pressed="true"], .seg input:checked + span { background: var(--accent); color: var(--accent-ink); }
.seg button:hover:not([aria-pressed="true"]) { color: var(--ink); }
.seg label { padding: 0; }
.seg label span { display: block; padding: 7px 11px; border-radius: 4px; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }
select, input[type="text"], input[type="number"], input[type="search"] { font-family: var(--font-mono); font-size: 13px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; min-width: 0; }
select:hover, input[type="text"]:hover { border-color: var(--muted); }
label.field { display: grid; gap: 6px; min-width: 0; font-family: var(--font-mono); font-size: 12px; color: var(--muted); }

/* ───── tools index ───── */
.section { padding-block: clamp(32px, 5vw, 64px); border-top: 1px solid var(--line); }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.index { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
.index li { border-top: 1px solid var(--line); }
.index a { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 0 14px; align-items: baseline; padding: 18px 4px; text-decoration: none; color: inherit; }
.index a:hover { background: var(--surface); }
.index .glyph { font-family: var(--font-mono); font-weight: 700; font-size: 15px; color: var(--accent); }
.index .name { font-family: var(--font-mono); font-weight: 600; font-size: 16px; letter-spacing: -0.02em; }
.index .desc { grid-column: 2; color: var(--muted); font-size: 14.5px; line-height: 1.45; margin-top: 2px; }
.index .arrow { font-family: var(--font-mono); color: var(--muted); transition: transform 0.15s; }
.index a:hover .arrow { color: var(--accent); transform: translateX(3px); }

.principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.principles h3 { margin-bottom: 8px; }
.principles p { color: var(--muted); font-size: 15px; max-width: 38ch; }

/* ───── tool page ───── */
.tool-head { padding-block: clamp(24px, 4vw, 44px) 20px; display: grid; gap: 10px; }
.tool-head h1 { font-size: clamp(26px, 4vw, 38px); font-weight: 800; letter-spacing: -0.04em; }
.tool-head .lede { color: var(--muted); max-width: 62ch; }
.crumb { font-family: var(--font-mono); font-size: 12.5px; color: var(--muted); }
.crumb a { color: var(--muted); text-decoration: none; }
.crumb a:hover { color: var(--ink); }
.tool { display: grid; gap: 14px; padding-bottom: 40px; }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.toolbar .spacer { flex: 1; }
.cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.cols.stack { grid-template-columns: minmax(0, 1fr); }
.pane { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.pane:focus-within { border-color: var(--accent); }
.pane-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px 6px 14px; border-bottom: 1px solid var(--line); min-height: 40px; font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.pane-head .tools { display: flex; gap: 2px; }
.pane textarea, .pane .out { flex: 1; width: 100%; min-height: clamp(360px, 52vh, 900px); margin: 0; border: 0; background: transparent; color: var(--ink); font-family: var(--font-mono); font-size: 13.5px; line-height: 1.65; padding: 14px; tab-size: 2; resize: vertical; outline: none; overflow: auto; }
.pane .out { white-space: pre-wrap; overflow-wrap: anywhere; }
.pane .out.nowrap { white-space: pre; overflow-wrap: normal; }
.pane textarea.short, .pane .out.short { min-height: 120px; }
/* Tool pages use the screen: wider container on big displays. Reading text keeps its own narrow measure (.about, .lede). */
/* An expanded pane spans the full row and grows taller. Toggled by the Expand button (common.js). */
.pane.is-big { grid-column: 1 / -1; }
.pane.is-big textarea, .pane.is-big .out { min-height: clamp(480px, 78vh, 1200px); }
.status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-family: var(--font-mono); font-size: 12.5px; color: var(--muted); min-height: 28px; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 99px; font-family: var(--font-mono); font-size: 12px; font-weight: 500; line-height: 1.2; background: var(--surface-2); color: var(--muted); }
.pill.ok { background: var(--ok-soft); color: var(--ok); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.err { background: var(--err-soft); color: var(--err); }
.pill.accent { background: var(--accent-soft); color: var(--accent); }
.errline { color: var(--err); font-family: var(--font-mono); font-size: 13px; overflow-wrap: anywhere; }

.syn-k { color: var(--syn-key); }
.syn-s { color: var(--syn-str); }
.syn-n { color: var(--syn-num); }
.syn-l { color: var(--syn-lit); }
.syn-p { color: var(--syn-punc); }
mark { background: var(--accent-soft); color: var(--accent); border-radius: 3px; box-shadow: 0 0 0 1px var(--accent); }
mark.alt { background: var(--warn-soft); color: var(--warn); box-shadow: 0 0 0 1px var(--warn); }

.kv { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.kv th, .kv td { text-align: left; vertical-align: top; padding: 9px 14px; border-bottom: 1px solid var(--line); }
.kv tr:last-child th, .kv tr:last-child td { border-bottom: 0; }
.kv th { font-family: var(--font-mono); font-weight: 500; font-size: 12px; color: var(--muted); white-space: nowrap; width: 1%; }
.kv td { font-family: var(--font-mono); overflow-wrap: anywhere; }
.kv tr.hit th { color: var(--ok); }
.kv tr.hit td code { color: var(--ok); }
.kv td:last-child .btn { padding: 4px 8px; }
.kv td .copy { margin-left: 8px; }
.table-wrap { overflow-x: auto; }

.swatch { width: 100%; height: 72px; border-radius: var(--radius); border: 1px solid var(--line); }

/* Reference text under a tool: closed by default (people usually know what they want), a native <details> so it needs no JS.
   Opened, it flows into columns that fill the wide layout. */
.about { margin-top: 28px; border-top: 1px solid var(--line); }
.about summary { display: flex; align-items: baseline; gap: 12px; padding-block: 16px; cursor: pointer; list-style: none; font-family: var(--font-mono); font-size: 13.5px; font-weight: 600; }
.about summary::-webkit-details-marker { display: none; }
.about summary::before { content: "+"; width: 1ch; color: var(--accent); }
.about[open] summary::before { content: "\2212"; }
.about summary span { font-weight: 400; font-size: 12.5px; color: var(--muted); }
.about summary:hover { color: var(--accent); }
.about-body { columns: 3 24rem; column-gap: 48px; padding-bottom: 16px; }
.about-body section { break-inside: avoid; display: grid; gap: 10px; align-content: start; margin-bottom: 28px; } /* a heading and its text always stay in one column */
.about-body h2 { font-size: 17px; }
.about-body p, .about-body li { color: var(--muted); }
.about-body ul { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }
.more { padding-block: 32px 56px; }

/* ───── footer / toast ───── */
.site-footer { border-top: 1px solid var(--line); padding-block: 28px 40px; font-family: var(--font-mono); font-size: 12.5px; color: var(--muted); }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; }
.site-footer a { color: var(--muted); }
.toast { position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 20px); background: var(--ink); color: var(--bg); font-family: var(--font-mono); font-size: 13px; padding: 10px 14px; border-radius: var(--radius); opacity: 0; pointer-events: none; transition: opacity 0.18s, transform 0.18s; z-index: 50; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ───── responsive ───── */
@media (max-width: 820px) {
  .cols { grid-template-columns: minmax(0, 1fr); }
  .index { grid-template-columns: minmax(0, 1fr); }
  .principles { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .pane textarea, .pane .out { min-height: 240px; }
  .pane.is-big textarea, .pane.is-big .out { min-height: 70vh; }
}
@media (max-width: 480px) {
  .index a { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .head-actions .hide-sm { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cursor { animation: none; }
  * { transition: none !important; }
}