/* demark — counter-machine text forensics.
   Dark only, on purpose: the palette is the design, and a light variant of it
   would be a different one. Both faces are self-hosted (web/fonts/LICENSE.txt);
   nothing here loads off-origin, which is what privacy.html §7 promises. */

@font-face {
  font-family: "Allerta Stencil";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/AllertaStencil-400.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/JetBrainsMono-400.woff2") format("woff2");
}

/* ---------- tokens ---------- */
:root {
  --display: "Allerta Stencil", "JetBrains Mono", ui-monospace, monospace;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;

  --bg-page: #17181a;
  --bg-panel: #1c1e20;
  --bg-raised: #202224;
  --bg-track: #26282b;

  --line: #3a3d40;
  --line-soft: #2b2e31;
  --line-head: #33363a;

  --accent: #ffce00;
  --on-accent: #141414;
  --danger: #ff4d3d;
  --danger-soft: #ff6b5e;

  --ink-0: #f2f0e9;
  --ink-1: #e8e6df;
  --ink-2: #d6d4cd;

  /* TEXT greys stop here. The artboard's ramp continues down through #75797d,
     #565a5e and #494d50, and those are kept below — but as RULES, TICKS and
     TRACKS only. Measured against the three backgrounds, #75797d reaches just
     3.81:1 on the panel and #565a5e 2.40:1, against the 4.5:1 WCAG AA needs for
     normal text; 10-11px letter-spaced labels are normal text, and no size or
     weight lift can make them large text (that needs 24px, or 18.66px bold), so
     the only fix available is the colour. Both step up exactly one notch to
     --muted-1, which clears 4.78:1 on every background here. Nothing else about
     the palette moves, and the lower steps keep their decorative jobs. */
  --muted-0: #a9aca6;
  --muted-1: #8a8d90;
  --dec-1: #75797d;
  --dec-2: #565a5e;
  --dec-3: #494d50;

  --hazard: repeating-linear-gradient(-45deg, var(--accent) 0 12px, #141414 12px 24px);
}

/* ---------- base ---------- */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg-page);
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.55;
  font-feature-settings: "calt" 1, "liga" 0;
  -webkit-font-smoothing: antialiased;
}

body { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
main { flex: 1; }

::selection { background: var(--accent); color: var(--on-accent); }

h1, h2, h3, p { margin: 0; }

a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: #fff; }

code {
  font-family: var(--mono);
  font-size: 0.94em;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  padding: 0.05em 0.4em;
}

/* One visible focus ring for everything, drawn in the accent so it reads on
   every surface here. Keyboard operability is not negotiable on a dark UI. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- type utilities ---------- */
.t-display {
  font-family: var(--display);
  font-size: clamp(22px, 4.4vw, 30px);
  font-weight: 400;
  letter-spacing: 1px;
  line-height: 1.15;
  color: var(--ink-0);
}
.t-label {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted-1);
}
.t-label-strong {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted-0);
}
.t-caption { font-size: 11px; line-height: 1.45; color: var(--muted-1); }
.t-body-sm { font-size: 13px; line-height: 1.55; color: var(--muted-0); }
.t-num { font-variant-numeric: tabular-nums; }

/* ---------- primitives ---------- */
.btn {
  font-family: var(--display);
  font-size: 15px;
  letter-spacing: 2px;
  padding: 10px 26px;
  border: none;
  background: var(--accent);
  color: var(--on-accent);
  cursor: pointer;
  border-radius: 0;
  user-select: none;
}
.btn:hover { background: #fff; }
.btn:disabled { background: var(--bg-raised); color: var(--muted-1); cursor: not-allowed; }

/* Secondary: the chip shape the artboard uses for its inline actions. */
.btn.sm {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1px;
  padding: 6px 14px;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  color: var(--ink-2);
}
.btn.sm:hover { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.btn.sm:disabled { background: var(--bg-panel); color: var(--muted-1); border-color: var(--line); }

.kbd {
  display: inline-block;
  font-size: 11px;
  padding: 1px 6px;
  border: 1px solid var(--line);
  color: var(--muted-1);
}

.card { border: 1px solid var(--line); background: var(--bg-panel); }

.badge {
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 3px 8px;
  border: 1px solid var(--line);
  background: var(--bg-raised);
  color: var(--muted-0);
  display: inline-block;
  white-space: nowrap;
}

/* The hazard stripe: two 6px rules that bracket the whole document. */
.stripe { height: 6px; background: var(--hazard); flex: 0 0 auto; }

/* ---------- top bar ---------- */
.topbar {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 14px 32px;
  border-bottom: 1px solid var(--line-head);
  background: var(--bg-panel);
}
.brand {
  font-family: var(--display);
  font-size: 22px;
  letter-spacing: 2px;
  color: var(--accent);
  text-decoration: none;
}
.brand:hover { color: #fff; }
.tagline {
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--muted-1);
  border-left: 1px solid var(--line-head);
  padding-left: 20px;
}
.topbar nav { margin-left: auto; display: flex; gap: 4px; }
.nav-tab {
  position: relative;
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--ink-2);
  text-decoration: none;
  padding: 8px 14px 10px;
}
.nav-tab:hover { color: var(--accent); }
/* The 3px accent underline on the active tab. aria-current carries the same
   fact to a screen reader, so the colour is never the only signal. */
.nav-tab.active { color: var(--accent); }
.nav-tab.active::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 0;
  height: 3px;
  background: var(--accent);
}

/* ---------- layout ---------- */
.wrap { max-width: 1180px; margin: 0 auto; padding: 36px 32px 80px; width: 100%; }

.screen-head { display: flex; align-items: baseline; gap: 24px; flex-wrap: wrap; }
.screen-head .lead { color: var(--accent); }
.screen-sub { font-size: 12px; color: var(--muted-1); }

/* ---------- the methodology chips ---------- */
/* These name the three FAMILIES of evidence the page is about — editorial copy,
   not a detector list. Nothing here drives the findings render, which stays
   generic over whatever the registry returns. */
.scan-row { display: flex; align-items: center; gap: 10px; margin: 14px 0 30px; flex-wrap: wrap; }
.chip {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1px;
  padding: 5px 12px;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  color: var(--ink-2);
  cursor: pointer;
}
.chip:hover, .chip[aria-expanded="true"] { border-color: var(--accent); color: #fff; }
.chip .n { color: var(--accent); }
.scan-note { font-size: 11px; color: var(--muted-1); }
.scan-help {
  border-left: 3px solid var(--accent);
  background: var(--bg-panel);
  padding: 10px 16px;
  margin: -16px 0 26px;
  font-size: 12.5px;
  color: var(--muted-0);
  max-width: 820px;
}
.scan-help[hidden] { display: none; }

/* ---------- detect grid ---------- */
.detect-grid { display: grid; grid-template-columns: 1fr 300px; gap: 24px; align-items: start; }
.detect-main { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.rail { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 14px; }

/* ---------- input card ---------- */
.card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line-soft);
}
textarea {
  display: block;
  width: 100%;
  min-height: 220px;
  resize: vertical;
  background: var(--bg-page);
  color: var(--ink-2);
  border: none;
  border-radius: 0;
  padding: 14px 16px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.6;
}
textarea::placeholder { color: var(--muted-1); }
textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.input-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  border-top: 1px solid var(--line-soft);
  flex-wrap: wrap;
}
.try { margin-left: auto; display: flex; align-items: baseline; gap: 14px; font-size: 11px; color: var(--muted-1); }
.try a, .dw-try { font-size: 11px; cursor: pointer; }

/* ---------- results ---------- */
.results { display: contents; }
.results[hidden] { display: none; }

.verdict-box {
  border: 1px solid var(--line);
  background: var(--bg-panel);
  border-left: 3px solid var(--dec-1);
  padding: 14px 16px;
}
.verdict-box .t-label { margin-bottom: 4px; }
.verdict-head { display: flex; align-items: baseline; gap: 10px; }
.verdict-glyph { font-size: 20px; line-height: 1; color: inherit; }
.verdict-title {
  font-family: var(--display);
  font-size: 19px;
  letter-spacing: 1px;
  line-height: 1.25;
  color: var(--ink-0);
}
.verdict-sub { font-size: 11px; margin-top: 6px; color: var(--muted-0); }
.verdict-box .badge { margin-top: 10px; }

/* The verdict tier drives the border and the glyph together; the badge text
   states it in words, so colour is never carrying the meaning by itself. */
.verdict-box.sev-hi { border-left-color: var(--danger); }
.verdict-box.sev-hi .verdict-glyph { color: var(--danger); }
.verdict-box.sev-hi .badge { color: var(--danger-soft); border-color: var(--danger); }
.verdict-box.sev-mid { border-left-color: var(--accent); }
.verdict-box.sev-mid .verdict-glyph { color: var(--accent); }
.verdict-box.sev-mid .badge { color: var(--accent); border-color: var(--accent); }
.verdict-box.sev-none .verdict-glyph { color: var(--muted-0); }

/* ---------- the gauge rail ---------- */
/* One gauge per registered detector, built from d.name and d.score. No detector
   is named here or in the markup: add one to the registry and a gauge appears. */
.gauges {
  border: 1px solid var(--line);
  background: var(--bg-panel);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.gauge-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 1px;
  margin-bottom: 5px;
}
.gauge-name { color: var(--muted-0); overflow-wrap: anywhere; }
.gauge-note { color: var(--muted-1); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gauge-track { height: 6px; background: var(--bg-track); }
.gauge-fill { height: 100%; background: var(--muted-1); }
.gauge.sev-hi .gauge-fill { background: var(--danger); }
.gauge.sev-hi .gauge-note { color: var(--danger-soft); }
.gauge.sev-mid .gauge-fill { background: var(--accent); }
.gauge.sev-none .gauge-fill { background: var(--dec-3); }
.gauge.sev-abstain .gauge-fill { background: var(--dec-3); }

.rail-note {
  font-size: 11px;
  color: var(--muted-1);
  border-left: 3px solid var(--line);
  padding: 2px 0 2px 12px;
}

/* ---------- annotated text ---------- */
.section-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 8px; flex-wrap: wrap; }
.section-head .legend, .section-head .spacer-end { margin-left: auto; }

.tok {
  display: inline;
  border: none;
  margin: 0;
  font: inherit;
  font-size: 10px;
  letter-spacing: 0.04em;
  background: var(--danger);
  color: var(--on-accent);
  padding: 0 3px;
  cursor: pointer;
}
/* A candidate span: a stretch of text a detector points at, not a character.
   Underline as well as tint, so it survives a high-contrast or monochrome
   rendering where the tint alone would disappear. */
.span-mark {
  background: rgba(255, 206, 0, 0.14);
  color: var(--ink-0);
  box-shadow: inset 0 -1px 0 var(--accent);
}
.annotated, .dw-out {
  border: 1px solid var(--line);
  background: var(--bg-panel);
  padding: 16px 18px;
  font-size: 13px;
  line-height: 1.9;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 340px;
  overflow-y: auto;
}
.tok-caption {
  margin-top: 10px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  background: var(--bg-raised);
  font-size: 12px;
  color: var(--muted-0);
}
.tok-caption[hidden] { display: none; }

/* ---------- findings ---------- */
.findings { border: 1px solid var(--line); background: var(--bg-panel); }
.finding {
  display: grid;
  grid-template-columns: 4px 118px 1fr 52px;
  gap: 0 14px;
  padding: 12px 16px 12px 0;
  border-bottom: 1px solid var(--line-soft);
  align-items: baseline;
  font-size: 13px;
}
.finding:last-child { border-bottom: 0; }
.finding:hover { background: var(--bg-raised); }
/* The severity tick. It repeats what the row's own text already says, so it is
   decoration — which is why the dimmest greys are allowed to live here. */
.finding .tick { align-self: stretch; background: var(--dec-3); }
.finding.sev-hi .tick { background: var(--danger); }
.finding.sev-mid .tick { background: var(--accent); }
.finding.sev-abstain .tick { background: var(--dec-1); }
.finding .kind {
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--muted-0);
  overflow-wrap: anywhere;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.finding.sev-hi .kind { color: var(--danger-soft); }
/* The tier, in words, so the tick's colour is never the only thing saying it. */
.finding .sev-tag { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted-1); }
.finding.sev-hi .sev-tag { color: var(--danger-soft); }
.finding .mid { min-width: 0; }
.finding .label { color: var(--ink-1); overflow-wrap: anywhere; }
.finding .detail { font-size: 12px; color: var(--muted-1); overflow-wrap: anywhere; }
.finding .count { text-align: right; color: var(--muted-1); font-size: 12px; }
.no-findings { padding: 14px 16px; font-size: 13px; color: var(--muted-0); }

/* ---------- feedback ---------- */
.feedback {
  border: 1px dashed var(--line);
  background: var(--bg-panel);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13px;
}
.feedback[hidden] { display: none; }
.fb-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.fb-prompt { font-size: 12px; letter-spacing: 1px; color: var(--muted-0); }

/* ---------- dewatermark ---------- */
.dw-actions { display: flex; align-items: center; gap: 18px; margin: 16px 0 24px; flex-wrap: wrap; }
.dw-consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  color: var(--muted-0);
  cursor: pointer;
  max-width: 62ch;
}
.dw-consent input { accent-color: var(--accent); margin-top: 3px; flex-shrink: 0; }
.dw-consent input:disabled { cursor: not-allowed; }

/* The view switch. Pressed state is aria-pressed, so the styling and the
   accessible state come from the same attribute and cannot drift apart. */
.toggle { display: flex; border: 1px solid var(--line); margin-left: auto; }
.toggle button {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1px;
  padding: 6px 14px;
  border: none;
  background: none;
  color: var(--muted-0);
  cursor: pointer;
}
.toggle button:hover { color: #fff; }
.toggle button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }

#dw-result { display: flex; flex-direction: column; gap: 16px; }
#dw-result[hidden] { display: none; }
/* Direct children are spaced by the column gap; the nested section heads inside
   #dw-edits-wrap keep their own margin. */
#dw-result > .section-head { margin-bottom: 0; }
.dw-changes { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

#dw-rephrase-row[hidden], #dw-edits-wrap[hidden], #dw-out-wrap[hidden], #dw-diff-wrap[hidden] { display: none; }
.dw-rephrase-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* ---------- the unified diff ---------- */
/* Line numbers, marks and folds are all read off the RESULT text and the exact
   edit spans the server returned (out[start,end) === after, rune offsets). No
   diff is computed here — the lines are the result's own lines, and N in a fold
   is a count of consecutive untouched ones. */
.dw-diff { border: 1px solid var(--line); background: var(--bg-panel); }
.dw-diff-head {
  display: flex;
  gap: 20px;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 11px;
  flex-wrap: wrap;
}
.dw-diff-legend { display: flex; gap: 16px; color: var(--muted-1); flex-wrap: wrap; }
.dw-diff-body { padding: 6px 0; font-size: 13px; }

.dw-line {
  display: grid;
  grid-template-columns: 52px 18px 1fr;
  gap: 0 8px;
  padding: 1px 16px 1px 0;
  border-left: 3px solid transparent;
}
.dw-line .gut {
  text-align: right;
  color: var(--muted-1);
  font-variant-numeric: tabular-nums;
  user-select: none;
}
/* The gutter and the mark are read, so they are text and take a text grey even
   though position and size already make them subordinate. */
.dw-line .mark { color: var(--muted-1); user-select: none; }
/* Untouched lines are dimmed, as the header legend says. */
.dw-line .body { min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--muted-0); }
.dw-line.changed { background: rgba(255, 206, 0, 0.04); border-left-color: var(--accent); }
.dw-line.changed .gut, .dw-line.changed .mark { color: var(--accent); }
.dw-line.changed .body { color: var(--ink-1); }

.dw-line del, .dw-edit del {
  color: var(--danger-soft);
  background: rgba(255, 77, 61, 0.14);
  text-decoration: line-through;
  padding: 0 2px;
}
.dw-line ins, .dw-edit ins {
  color: var(--on-accent);
  background: var(--accent);
  text-decoration: none;
  padding: 0 2px;
}

.dw-fold {
  text-align: center;
  color: var(--muted-1);
  font-size: 11px;
  letter-spacing: 1px;
  padding: 6px 0;
  margin: 4px 0;
  border-top: 1px dashed var(--line-soft);
  border-bottom: 1px dashed var(--line-soft);
}

/* One returned edit, listed in full: what was sent, what came back, and why it
   was kept. <del>/<ins> are the native elements for exactly this. */
.dw-edits {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line);
}
.dw-edit { background: var(--bg-panel); padding: 10px 14px; font-size: 13px; line-height: 1.7; }
.dw-edit del, .dw-edit ins { display: block; margin: 2px 0; overflow-wrap: anywhere; }
.dw-edit .detail { margin-top: 6px; font-size: 12px; color: var(--muted-1); }

.dw-note { font-size: 11px; color: var(--muted-1); }

/* ---------- privacy ---------- */
.privacy { max-width: 780px; margin: 0 auto; padding: 36px 32px 80px; width: 100%; }
.privacy .t-display { margin-bottom: 6px; }
.privacy .lede { font-size: 12px; color: var(--muted-1); margin-bottom: 34px; }
/* Each numbered section becomes the artboard's numeral-and-rule pair. The
   numeral is the one the heading already carried, moved into its own column —
   not a generated one — so every character of the real copy survives. */
.privacy h2 {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 18px;
  align-items: start;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--ink-1);
  margin: 26px 0 0;
}
.privacy h2 .no {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 1px;
  color: var(--accent);
  border-top: 3px solid var(--accent);
  padding-top: 6px;
}
.privacy h2 > span + span { border-top: 1px solid var(--line-head); padding-top: 8px; }
.privacy p, .privacy ul {
  font-size: 13px;
  color: var(--muted-0);
  margin: 8px 0 0 74px;
  text-wrap: pretty;
}
.privacy ul { padding-left: 2ch; }
.privacy .lede { margin-left: 0; }
.privacy .contact {
  border: 1px solid var(--line);
  background: var(--bg-panel);
  padding: 14px 18px;
  font-size: 12px;
  color: var(--muted-1);
  margin: 34px 0 0;
}

/* ---------- footer ---------- */
footer { border-top: 1px solid var(--line-head); background: var(--bg-panel); }
.footer-inner {
  display: flex;
  gap: 24px;
  align-items: center;
  padding: 16px 32px;
  font-size: 11px;
  color: var(--muted-1);
  flex-wrap: wrap;
}
.footer-brand { font-family: var(--display); letter-spacing: 2px; color: var(--muted-0); }
.footer-end { margin-left: auto; }

/* ---------- narrow viewports ---------- */
@media (max-width: 900px) {
  .detect-grid { grid-template-columns: 1fr; }
  /* Unpinned once it is above the results rather than beside them. */
  .rail { position: static; }
}

@media (max-width: 640px) {
  /* At 320px the bar is wider than the viewport. One scrolling strip rather
     than a stacked bar, and the overflow is contained here so the page body
     never scrolls sideways. */
  .topbar {
    gap: 12px;
    padding: 12px 16px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }
  .topbar::-webkit-scrollbar { display: none; }
  .topbar > *, .topbar nav > * { flex: 0 0 auto; }
  .tagline { display: none; }

  .wrap, .privacy { padding: 24px 16px 56px; }
  .footer-inner { padding: 16px; gap: 10px 16px; }
  .footer-end { margin-left: 0; }

  .scan-row { gap: 8px; margin-bottom: 22px; }
  .toggle { margin-left: 0; }

  .finding { grid-template-columns: 4px 1fr 52px; }
  .finding .kind { grid-column: 2 / -1; margin-bottom: 2px; }
  .dw-line { grid-template-columns: 34px 14px 1fr; padding-right: 8px; }

  /* The numeral column costs more than it earns at this width. */
  .privacy h2 { grid-template-columns: 34px 1fr; gap: 12px; }
  .privacy h2::before { font-size: 18px; }
  .privacy p, .privacy ul { margin-left: 46px; }
}

/* ---------- touch input ---------- */
/* Keyed on the pointer, not the width: a mouse-driven small window does not
   need finger-sized targets, and a touch tablet at 900px does. ~44px baseline. */
@media (hover: none) and (pointer: coarse) {
  .btn { min-height: 44px; }
  .btn.sm, .chip, .toggle button { min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
  .nav-tab { min-height: 44px; display: flex; align-items: center; }
  .try a, .dw-try, .brand, .footer-links a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* "or press Ctrl+Enter" only means something with a physical keyboard. */
  .kbd-hint-wrap { display: none; }

  /* iOS Safari zooms the page when focusing any control under 16px. */
  textarea { font-size: 16px; }
}