/* Shared look for the live demos under /demos/<slug>/. Each demo runs in an iframe on its
   project page, so it carries its own copy of the site palette rather than the site's CSS.
   Link it as ../_shared/demo.css; everything here is optional to use. */

/* The site's own type, from the same files the site loads (/fonts/, Latin only, OFL), so a visitor who has seen
   the site already has them cached. A browser fetches only the faces a demo actually uses. */
@font-face { font-family: 'Inter Variable'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(../../fonts/inter-latin-wght-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter Tight Variable'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(../../fonts/inter-tight-latin-wght-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'JetBrains Mono Variable'; font-style: normal; font-display: swap; font-weight: 100 800; src: url(../../fonts/jetbrains-mono-latin-wght-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Instrument Serif'; font-style: italic; font-display: swap; font-weight: 400; src: url(../../fonts/instrument-serif-latin-400-italic.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  color-scheme: dark;
  --bg: #0b0a10;
  --surface: #14121c;
  --surface-2: #1b1826;
  --line: #262233;
  --text: #e7e5ee;
  --text-2: #cfcbdb;
  --muted: #8f8aa3;
  --accent: #a78bfa;
  --accent-hi: #c4b5fd;
  --accent-deep: #8b5cf6;
  --good: #4ade80;
  --danger: #f43f5e;
  --sans: 'Inter Variable', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono Variable', 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --display: 'Inter Tight Variable', 'Inter Variable', system-ui, sans-serif;  /* titles */
  --serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;             /* italic emphasis only */
  /* Mono comes in two sizes: 11px for labels and small print, 12px for values and status lines. */
  --mono-s: 11px;
  --mono-m: 12px;
  --radius: 10px;
  --radius-pill: 999px;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--bg); color: var(--text); font: 15px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent-hi); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Small uppercase labels, the site's mono voice. */
.label { font: 500 var(--mono-s)/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

/* The title bar every demo opens with: a mono label over the title, anything else (tabs, a status line) to the
   right, a hairline under it. <em> in the title is the site's serif italic; <code> stays mono. */
.demo-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 20px; margin: 0 0 14px; padding: 0 0 12px; border-bottom: 1px solid var(--line); }
.demo-top > .label, .demo-top > h1, .demo-top > p { flex: 1 1 100%; }
.demo-top .label { margin: 0 0 4px; }
.demo-top h1 { margin: 0; font: 650 clamp(18px, 2.2vw, 24px)/1.2 var(--display); letter-spacing: -0.02em; color: var(--text); text-wrap: balance; }
.demo-top h1 em { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.1em; letter-spacing: 0; color: var(--accent-hi); }
.demo-top h1 code { font: 600 0.84em var(--mono); color: var(--accent-hi); background: none; padding: 0; }
.demo-top > p:not(.label) { margin: 2px 0 0; color: var(--text-2); font-size: 13px; }
.mono { font-family: var(--mono); }
.muted { color: var(--muted); }

.btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: var(--radius-pill);
  border: 1px solid var(--line); background: var(--surface); color: var(--text); font: 500 13px/1 var(--sans);
  cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.btn:hover { border-color: var(--accent); color: var(--accent-hi); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #140f24; }
.btn.primary:hover { background: var(--accent-hi); border-color: var(--accent-hi); color: #140f24; }
/* The one start button, on every demo's poster: bigger, with a soft ring. */
.btn.big { padding: 13px 24px; font: 600 15px/1 var(--sans); letter-spacing: -0.005em; }
.btn.primary.big { box-shadow: 0 0 0 6px rgba(167, 139, 250, 0.14), 0 14px 30px -14px rgba(139, 92, 246, 0.75); transition: border-color 0.15s, background 0.15s, color 0.15s, box-shadow 0.25s; }
.btn.primary.big:hover { box-shadow: 0 0 0 8px rgba(167, 139, 250, 0.2), 0 14px 30px -14px rgba(139, 92, 246, 0.9); }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius-pill); overflow: hidden; }
.seg button { background: none; border: 0; color: var(--muted); padding: 7px 12px; font: 500 var(--mono-m)/1 var(--mono); cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--accent); color: #140f24; }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }

/* Click-to-start poster: the demo downloads nothing heavy until the visitor asks. */
.poster {
  position: relative; display: grid; place-items: center; gap: 12px; min-height: 260px; padding: 24px; text-align: center;
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  background: radial-gradient(closest-side at 50% 40%, rgba(139, 92, 246, 0.22), transparent), var(--surface);
}
.poster .size { font: var(--mono-m)/1.4 var(--mono); color: var(--muted); }

/* Loading progress for big runtimes. */
.progress { width: min(320px, 80%); height: 3px; background: var(--line); border-radius: 2px; overflow: hidden; }
.progress > i { display: block; height: 100%; width: 0; background: var(--accent); transition: width 0.2s; }
.status { font: var(--mono-m)/1.4 var(--mono); color: var(--muted); min-height: 1.4em; }
.error { color: var(--danger); }

/* "What runs here" note and source link, required on every demo. */
.demo-foot { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); font: var(--mono-s)/1.55 var(--mono); color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px 16px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}