@font-face { font-family: "Funnel Display"; src: url("/assets/fonts/funnel-display.woff2") format("woff2"); font-weight: 300 800; font-display: swap; }
@font-face { font-family: "Funnel Sans"; src: url("/assets/fonts/funnel-sans.woff2") format("woff2"); font-weight: 300 800; font-display: swap; }
@font-face { font-family: "Fragment Mono"; src: url("/assets/fonts/fragment-mono.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --paper: #0f1214;
  --sheet: #ffffff;
  --ink: #15181b;
  --text: #f2f4f1;
  --muted: #a8b0b5;
  --line: #2b3137;
  --plain-text: #eceee9;
  --sheet-muted: #6f767c;
  --accent: #ffc21a;
  --accent-base: #c58c00;
  --pad: clamp(1rem, 2.6vw, 4.5rem);
  --title: clamp(2.5rem, min(calc(7.85vw - 2.2rem), 5vw, 10.5vh), 8rem);
  --display: "Funnel Display", "Helvetica Neue", Arial, sans-serif;
  --body: "Funnel Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "Fragment Mono", ui-monospace, Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
/* Type grows with the window so a 2400px screen doesn't look empty. */
html { -webkit-text-size-adjust: 100%; font-size: clamp(16px, calc(8px + 0.55vw), 21px); }
body { margin: 0; background: var(--paper); color: var(--text); font: 400 1rem/1.5 var(--body); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
h1, h2, p { margin: 0; }
button { font: inherit; }
.contents { display: contents; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* One screen, always. The panes take whatever height is left and scroll inside. */
.app {
  width: 100%; max-width: 2400px; margin-inline: auto;
  height: 100vh; height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto minmax(0, 1fr) auto minmax(0, 1fr) auto;
  grid-template-areas:
    "brand by"
    "trich barl"
    "rich  rich"
    "tmd   barr"
    "md    md"
    "foot  foot";
  background: var(--ink);
}

/* Header */
.brand { grid-area: brand; display: flex; align-items: center; gap: 0.5rem; min-height: 3.25rem; margin-left: var(--pad); text-decoration: none; color: var(--text); justify-self: start; }
.mark { width: 1.625rem; height: 1.625rem; flex: none; display: block; }
.wordmark { font: 700 1.125rem/1 var(--display); letter-spacing: -0.015em; white-space: nowrap; }
.tld { font-weight: 400; color: var(--muted); }
.by { grid-area: by; justify-self: end; display: flex; align-items: center; gap: 0.4rem; min-height: 3.25rem; margin-right: var(--pad); font-size: 0.8125rem; line-height: 1; color: var(--muted); text-decoration: none; white-space: nowrap; }
.by img { display: block; width: 4.7rem; height: auto; aspect-ratio: 5 / 1; }
.by:hover span { color: var(--text); }

/* Headline. On a phone each half labels its own pane. */
.t-rich, .t-md { font: 600 1.375rem/1.1 var(--display); letter-spacing: -0.02em; white-space: nowrap; align-self: stretch; display: flex; align-items: center; padding-inline: var(--pad); }
.t-rich { grid-area: trich; background: var(--sheet); color: var(--ink); }
.t-md { grid-area: tmd; color: var(--text); }

.seam { display: none; grid-area: 2 / 1 / 3 / 3; justify-self: center; align-self: center; gap: 0.1em; z-index: 2; font-size: var(--title); }
.seam kbd { display: flex; align-items: center; justify-content: center; min-width: 2.05em; height: 2.05em; padding: 0 0.5em; border-radius: 0.42em; border-bottom: 0.16em solid var(--accent-base); background: var(--accent); color: var(--ink); font: 600 0.44em/1 var(--body); transition: transform 70ms ease-out, border-bottom-width 70ms ease-out; }
.seam kbd.down { transform: translateY(0.1em); border-bottom-width: 0.05em; }
@media (prefers-reduced-motion: reduce) { .seam kbd { transition: none; } }

.bar { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; padding-block: 0.375rem; padding-right: var(--pad); }
.bar-rich { grid-area: barl; background: var(--sheet); }
.bar-md { grid-area: barr; }
/* The white row is two cells. Overlap them so a fractional column edge can't show a dark hairline. */
@media (max-width: 999px) { .bar-rich { margin-left: -1px; } }

/* Panes */
.rich { grid-area: rich; min-height: 0; overflow: auto; padding: 0.125rem var(--pad) 0.75rem; background: var(--sheet); color: var(--ink); outline: none; line-height: 1.45; overflow-wrap: anywhere; }
.rich > * { max-width: 46rem; }
.rich > :first-child { margin-top: 0; }
.rich h1, .rich h2, .rich h3, .rich h4 { font: 600 1.25rem/1.2 var(--display); letter-spacing: -0.01em; margin: 0.9em 0 0.35em; }
.rich h1 { font-size: 1.5rem; }
.rich h3, .rich h4 { font-size: 1.0625rem; }
.rich p { margin: 0 0 0.7em; }
.rich ul, .rich ol { margin: 0 0 0.7em; padding-left: 1.4em; }
.rich a { color: inherit; text-decoration: underline; }
.rich img { max-width: 100%; height: auto; }
.rich blockquote { margin: 0 0 0.7em; padding-left: 0.9em; border-left: 3px solid #d9dde1; }
.rich table { border-collapse: collapse; margin: 0 0 0.7em; }
.rich td, .rich th { border: 1px solid #d9dde1; padding: 0.2em 0.55em; text-align: left; }
.rich pre, .rich code { font-family: var(--mono); font-size: 0.875em; }
.rich pre { white-space: pre-wrap; }
.rich:empty::before { content: "Paste here"; color: var(--sheet-muted); }
.rich:focus-visible { box-shadow: inset 0 0 0 2px #d9dde1; }
.rich.auto-focused:focus-visible { box-shadow: none; }

#output { grid-area: md; display: block; width: 100%; min-height: 0; resize: none; border: 0; border-radius: 0; background: transparent; color: var(--plain-text); caret-color: var(--accent); padding: 0.125rem var(--pad) 0.75rem; outline: none; font: 400 0.875rem/1.6 var(--mono); }
#output::selection { background: #3b4249; color: #fff; }
#output:focus-visible { box-shadow: inset 0 0 0 2px var(--line); }
#output.auto-focused:focus-visible { box-shadow: none; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 1rem; border: 1.5px solid var(--ink); border-radius: 999px; background: transparent; color: var(--ink); font: 600 0.875rem/1 var(--body); text-decoration: none; white-space: nowrap; cursor: pointer; }
.btn:hover { background: #eceff3; }
.btn-accent { background: var(--accent); border-color: var(--accent); }
.btn-accent:hover { background: #ffcf4d; border-color: #ffcf4d; }
.btn-accent:disabled, .btn-quiet:disabled { background: transparent; border-color: #3d4349; color: #7f878e; cursor: default; }
.btn-quiet { border-color: #5a6066; color: var(--plain-text); }
.btn-quiet:hover { background: #2b3036; }
.btn:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bar-rich .btn:focus-visible, .brand:focus-visible { outline-color: var(--ink); }
@media (max-width: 359px) {
  .long { display: none; }
  .mark { width: 1.375rem; height: 1.375rem; }
  .wordmark { font-size: 1rem; }
  .by { gap: 0.25rem; font-size: 0.75rem; }
  .by img { width: 3.75rem; }
}
@media (hover: hover) { .btn { min-height: 2.375rem; } }

.switch { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 44px; color: var(--ink); font: 600 0.875rem/1 var(--body); white-space: nowrap; cursor: pointer; }
.switch input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.switch-track { position: relative; flex: none; width: 2.125rem; height: 1.25rem; border-radius: 999px; background: var(--ink); transition: background-color 120ms ease-out; }
.switch-track::after { content: ""; position: absolute; top: 0.1875rem; left: 0.1875rem; width: 0.875rem; height: 0.875rem; border-radius: 50%; background: var(--sheet); transform: translateX(0.875rem); transition: transform 120ms ease-out; }
.switch input:not(:checked) + .switch-track { background: #4a5057; }
.switch input:not(:checked) + .switch-track::after { transform: none; }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (hover: hover) { .switch { min-height: 2.375rem; } }
@media (prefers-reduced-motion: reduce) { .switch-track, .switch-track::after { transition: none; } }
#output::placeholder { color: var(--muted); opacity: 1; }

/* Footer */
.foot { grid-area: foot; padding: 0.45rem var(--pad); background: var(--paper); border-top: 1px solid var(--line); color: var(--muted); font-size: 0.8125rem; line-height: 1.3; }
.foot-meta { white-space: nowrap; }

/* Wide: half white document, half dark Markdown, with the headline across the seam. */
@media (min-width: 1000px) {
  .app {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-areas:
      "brand by"
      "trich tmd"
      "rich  md"
      "foot  foot";
    background: linear-gradient(90deg, var(--sheet) 50%, var(--ink) 50%);
  }
  .brand { color: var(--ink); }
  .tld { color: var(--sheet-muted); }
  .by { justify-self: end; font-size: 0.875rem; }
  .t-rich, .t-md { font-size: var(--title); letter-spacing: -0.03em; line-height: 1.08; background: none; padding-block: 0.1em 0.26em; align-self: center; }
  .t-rich { justify-self: end; padding-inline: 0 1.14em; }
  .t-md { justify-self: start; padding-inline: 1.14em 0; }
  .seam { display: flex; }
  .bar { padding-block: 0; }
  .bar-rich { grid-area: trich; justify-self: start; background: none; padding: 0 0 0 var(--pad); gap: 0.875rem; }
  .switch { order: 2; }
  .bar-md { grid-area: tmd; justify-self: end; padding: 0 var(--pad) 0 0; }
  .rich { background: none; padding-top: 0.25rem; font-size: 1.0625rem; }
  #output { padding-top: 0.25rem; font-size: 0.9375rem; }
  /* Both halves run to the bottom, with the note tucked into the dark corner. */
  .foot { background: none; border-top: 0; text-align: right; padding-block: 0.5rem 0.9rem; }
}
/* "Ctrl" keeps the same key size as the Mac's command key. */
html.not-mac .seam kbd[data-mod] { font-size: 0.34em; min-width: 2.65em; height: 2.65em; padding: 0 0.2em; border-radius: 0.54em; border-bottom-width: 0.21em; }

/* Preview off: Markdown gets the whole screen. The input stays focusable so Cmd+V still lands on it. */
html.input-hidden .rich { position: absolute; grid-area: auto; width: 1px; height: 1px; min-height: 0; padding: 0; overflow: hidden; clip-path: inset(50%); }
html.input-hidden .app { grid-template-rows: auto auto 0 auto minmax(0, 1fr) auto; }
html.input-hidden .t-rich, html.input-hidden .bar-rich { background: none; }
html.input-hidden .t-rich { color: var(--text); }
html.input-hidden .switch { color: var(--plain-text); }
html.input-hidden .switch input:focus-visible + .switch-track { outline-color: var(--accent); }
html.input-hidden .bar-rich .btn { border-color: #5a6066; color: var(--plain-text); }
html.input-hidden .bar-rich .btn:hover { background: #2b3036; }
html.input-hidden .bar-rich .btn:focus-visible, html.input-hidden .brand:focus-visible { outline-color: var(--accent); }
@media (min-width: 1000px) {
  html.input-hidden .app {
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-areas:
      "brand by"
      "trich tmd"
      "md    md"
      "foot  foot";
    background: var(--ink);
  }
  html.input-hidden .brand { color: var(--text); }
  html.input-hidden .tld { color: var(--muted); }
}

/* Too short to fit: let the page scroll and keep the panes usable. */
@media (max-height: 519px) {
  .app { height: auto; min-height: 100dvh; grid-template-rows: auto auto 15rem auto 15rem auto; }
  html.input-hidden .app { grid-template-rows: auto auto 0 auto 15rem auto; }
}
@media (max-height: 519px) and (min-width: 1000px) {
  .app { grid-template-rows: auto auto 20rem auto; }
  html.input-hidden .app { grid-template-rows: auto auto 20rem auto; }
}