/* iloveskills preview: DESIGN.md tokens, the subset a rendered skill needs. Transparent so the app's paper shows through. */
@font-face { font-family: "Bricolage Grotesque"; font-weight: 700; font-display: swap; src: url("/fonts/bricolage-grotesque-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-weight: 400; font-display: swap; src: url("/fonts/instrument-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-weight: 600; font-display: swap; src: url("/fonts/instrument-sans-latin-600-normal.woff2") format("woff2"); }

:root {
  --surface: #FFFFFF; --ink: #16140F; --ink-2: #4A463D; --border: #E4E0D6; --border-strong: #857F70; --brand: #0B7A5A; --code-bg: #F3F1EC;
  --display: "Bricolage Grotesque", Georgia, serif;
  --text: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root { --surface: #1C1C1A; --ink: #EDEBE6; --ink-2: #B3AFA6; --border: #34332F; --border-strong: #6E6A60; --brand: #3DBE93; --code-bg: #262624; }
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; background: transparent; color: var(--ink); font: 400 16px/24px var(--text); -webkit-text-size-adjust: 100%; }
#root { padding: 20px; max-width: 68ch; overflow-wrap: anywhere; }
@media (min-width: 600px) { #root { padding: 32px 40px 40px; } }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

h1, h2, h3, h4 { margin: 32px 0 12px; }
h1 { font: 700 36px/42px var(--display); letter-spacing: -0.02em; }
h2 { font: 700 24px/30px var(--display); letter-spacing: -0.01em; }
h3 { font: 600 18px/28px var(--text); }
h4 { font: 600 16px/24px var(--text); }
#root > :first-child { margin-top: 0; }
p, ul, ol, pre, blockquote, table, figure { margin: 0 0 16px; }
ul, ol { padding-left: 24px; }
li + li { margin-top: 4px; }
a { color: var(--brand); text-underline-offset: 2px; }
hr { border: 0; border-top: 1px solid var(--border); margin: 24px 0; }
blockquote { border-left: 3px solid var(--border-strong); padding-left: 16px; color: var(--ink-2); }
code { font: 14px/20px var(--mono); background: var(--code-bg); border-radius: 4px; padding: 1px 4px; }
pre { background: var(--code-bg); border: 1px solid var(--border); border-radius: 10px; padding: 12px 16px; overflow-x: auto; }
pre code { background: none; padding: 0; }
pre.front { border-style: dashed; color: var(--ink-2); }
table { border-collapse: collapse; display: block; overflow-x: auto; }
th, td { border: 1px solid var(--border); padding: 8px 12px; text-align: left; vertical-align: top; }
th { font-weight: 600; }
img { max-width: 100%; height: auto; }
figure.diagram { padding: 0; overflow-x: auto; }
figure.diagram:not([data-failed]):has(svg) { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 16px; text-align: center; }
figure.diagram svg { max-width: 100%; height: auto; }