/* Sparks Markdown's page.

   Formal on purpose, and self-contained on purpose. It takes the site's
   palette and typeface from style.css so that it plainly belongs here, and
   takes nothing else: no starfield, no planets, no orbits, no neon heading
   treatment. That language is Sparks of Ora'Kai's and stays with it. What is
   left is a tool's page — rules, measured columns and a specification table.

   The one flash of the spectrum is the mark itself, and the fairy, which is
   the site's own way of marking a link back to the books. */

.markdown-page {
  --md-rule: #c1d9ff1f;
  --md-quiet: #8995a5;
  background: var(--bg);
  min-height: 100%;
}

.md-skip { position: absolute; left: -9999px; }
.md-skip:focus { left: 24px; top: 16px; z-index: 9; padding: 10px 16px; background: var(--panel); border: 1px solid var(--md-rule); border-radius: 4px; }

/* ── Masthead ───────────────────────────────────────────────────── */
.md-masthead { border-bottom: 1px solid var(--md-rule); }
.md-masthead-inner { display: flex; align-items: center; gap: 14px; min-height: 66px; }
.md-back, .md-masthead-here { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; }
.md-back { color: var(--md-quiet); transition: color 0.2s; }
.md-back:hover { color: var(--text); }
.md-masthead-sep { color: var(--md-quiet); opacity: 0.5; }
.md-masthead-here { color: var(--text); }
.md-masthead-action { margin-left: auto; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--md-quiet); transition: color 0.2s; }
.md-masthead-action:hover { color: var(--accent); }

/* ── Introduction ───────────────────────────────────────────────── */
.md-intro {
  display: grid; grid-template-columns: minmax(0, 1fr) 210px;
  gap: clamp(2rem, 6vw, 5rem); align-items: start;
  padding: clamp(3.5rem, 9vw, 7rem) 0 clamp(2.5rem, 6vw, 4rem);
}
.md-eyebrow { margin: 0 0 1.4rem; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--md-quiet); }
.md-intro h1 { margin: 0 0 1.1rem; font-size: clamp(2.1rem, 5vw, 3.1rem); font-weight: 300; letter-spacing: -0.012em; line-height: 1.1; }
.md-intro h1:focus { outline: none; }
.md-lede { margin: 0 0 0.9rem; font-size: clamp(1.02rem, 2vw, 1.16rem); font-weight: 300; line-height: 1.62; max-width: 46ch; }
.md-sub { margin: 0; color: var(--md-quiet); font-size: 0.92rem; }

.md-mark { margin: 0.3rem 0 0; }
.md-mark svg { width: 100%; height: auto; display: block; opacity: 0.94; }
@media (max-width: 760px) { .md-intro { grid-template-columns: 1fr; } .md-mark { width: 132px; order: -1; } }

/* ── Actions ────────────────────────────────────────────────────── */
.md-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin: 2rem 0 0; }
.md-button {
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px;
  padding: 11px 22px; border: 1px solid #8ec9e455; border-radius: 3px;
  font-size: 13px; letter-spacing: 0.04em; color: var(--text);
  transition: border-color 0.2s, background 0.2s;
}
.md-button:hover { border-color: var(--accent); background: #0e1a28; }
.md-link {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; letter-spacing: 0.04em; color: var(--md-quiet);
  border-bottom: 1px solid #c1d9ff26; padding-bottom: 2px;
  transition: color 0.2s, border-color 0.2s;
}
.md-link:hover { color: var(--accent); border-bottom-color: currentColor; }

/* ── Sections ───────────────────────────────────────────────────── */
.md-rule { border: 0; border-top: 1px solid var(--md-rule); margin: 0; width: min(1120px, calc(100% - 84px)); margin-inline: auto; }
.md-section { padding: clamp(2.6rem, 6vw, 4.2rem) 0; }
.md-section h2 { margin: 0 0 1.8rem; font-size: 12px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--md-quiet); }
.md-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.6rem, 5vw, 4rem); align-items: start; }
@media (max-width: 860px) { .md-columns { grid-template-columns: 1fr; } }
.md-body { margin: 0 0 1rem; font-size: 1.02rem; font-weight: 300; line-height: 1.72; max-width: 54ch; }
.md-body-quiet { color: var(--md-quiet); }

.md-specs { margin: 0; display: grid; gap: 1.15rem; }
.md-specs > div { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 1.2rem; align-items: baseline; }
.md-specs dt { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--md-quiet); }
.md-specs dd { margin: 0; font-size: 0.95rem; font-weight: 300; line-height: 1.64; }
@media (max-width: 520px) { .md-specs > div { grid-template-columns: 1fr; gap: 0.3rem; } }

/* ── Details table ──────────────────────────────────────────────── */
.md-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; font-weight: 300; }
.md-table th, .md-table td { text-align: left; padding: 0.85rem 0; border-bottom: 1px solid var(--md-rule); vertical-align: baseline; }
.md-table th { width: 220px; font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--md-quiet); }
.md-table tr:last-child th, .md-table tr:last-child td { border-bottom: 0; }
@media (max-width: 520px) { .md-table th, .md-table td { display: block; width: auto; } .md-table th { border-bottom: 0; padding-bottom: 0.2rem; } }

/* ── Foot ───────────────────────────────────────────────────────── */
.md-foot { border-top: 1px solid var(--md-rule); margin-top: clamp(2rem, 6vw, 4rem); }
.md-colophon { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin: 0; padding: 1.3rem 0 2.4rem; }
.md-colophon-note { color: var(--md-quiet); font-size: 12px; }

/* ── Motion control ─────────────────────────────────────────────── */
.md-motion {
  position: fixed; right: var(--control-edge); bottom: var(--control-bottom);
  min-height: 44px; padding: 10px 14px; font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--md-quiet);
  background: var(--panel); border: 1px solid var(--md-rule); border-radius: 3px;
  transition: color 0.2s, border-color 0.2s;
}
.md-motion:hover { color: var(--text); border-color: #8ec9e455; }

@media (prefers-reduced-motion: reduce) {
  .md-back, .md-masthead-action, .md-button, .md-link, .md-motion { transition: none; }
}

/* ═══ The live reader ═══════════════════════════════════════════════
   Not a screenshot. The chrome, the type and the syntax colours are the
   application's own values, and the three controls in the bar do what they
   say. Sticky Spark's page does the same with its note, and it is the right
   idea: an application is better shown working than photographed. */

.md-demo-intro { margin: -0.8rem 0 1.9rem; color: var(--md-quiet); font-size: 0.95rem; font-weight: 300; max-width: 52ch; }

.md-demo {
  --d-ground: #04060b; --d-surface: #0c1220; --d-surface-2: #121a2b;
  --d-line: rgba(141, 153, 180, 0.16); --d-text: #e4eaf6; --d-muted: #8d99b4;
  --d-accent: #62e6ff;
  --d-spectrum: linear-gradient(115deg, #ff43dc, #c95ee8, #7779e8, #72dbe6, #b8ffe3);
  border: 1px solid var(--md-rule); border-radius: 6px; overflow: hidden;
  background: var(--d-ground); color: var(--d-text);
  font-family: Segoe UI, Arial, sans-serif;
  box-shadow: 0 30px 80px #0006;
}
.md-demo[data-theme="light"] {
  --d-ground: #fbfaf8; --d-surface: #fff; --d-surface-2: #f2f1ec;
  --d-line: rgba(22, 26, 36, 0.11); --d-text: #171a21; --d-muted: #6c7484;
  --d-accent: #0d7ea6;
}

.md-demo-bar { display: flex; align-items: center; gap: 12px; padding: 0 12px; height: 50px; border-bottom: 1px solid var(--d-line); background: color-mix(in srgb, var(--d-ground) 86%, transparent); }
.md-demo-mark { width: 15px; height: 22px; flex: none; background: var(--d-spectrum); clip-path: polygon(50% 0, 100% 42%, 50% 68%, 0 42%); }
.md-demo-name { font-size: 12.5px; color: var(--d-muted); }
.md-demo-doc { margin-inline: auto; text-align: center; line-height: 1.25; }
.md-demo-doc b { display: block; font-size: 12.5px; font-weight: 600; color: var(--d-text); }
.md-demo-doc small { font-size: 10.5px; color: var(--d-muted); }
.md-demo-tools { display: flex; gap: 4px; }
.md-demo-tool { min-height: 30px; padding: 0 10px; border-radius: 6px; border: 1px solid transparent; background: none; color: var(--d-muted); font: inherit; font-size: 11.5px; transition: background .18s, color .18s, border-color .18s; }
.md-demo-tool:hover { background: var(--d-surface); color: var(--d-text); }
.md-demo-tool[aria-pressed="true"] { color: var(--d-accent); border-color: color-mix(in srgb, var(--d-accent) 34%, transparent); background: color-mix(in srgb, var(--d-accent) 12%, transparent); }

.md-demo-body { display: grid; grid-template-columns: 178px minmax(0, 1fr); min-height: 388px; transition: grid-template-columns .34s cubic-bezier(.22,.7,.2,1); }
.md-demo[data-toc="shut"] .md-demo-body { grid-template-columns: 0 minmax(0, 1fr); }
.md-demo-toc { overflow: hidden; border-right: 1px solid var(--d-line); padding: 16px 8px 16px 16px; opacity: 1; transition: opacity .24s; }
.md-demo[data-toc="shut"] .md-demo-toc { opacity: 0; }
.md-demo-toc p { margin: 0 0 10px 8px; font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--d-muted); }
.md-demo-toc ul { list-style: none; margin: 0; padding: 0; }
.md-demo-toc li { position: relative; padding: 5px 8px; border-radius: 6px; font-size: 11.5px; color: var(--d-muted); white-space: nowrap; }
.md-demo-toc li.md-demo-sub { padding-left: 20px; font-size: 11px; }
.md-demo-toc li[data-active="true"] { color: var(--d-text); background: linear-gradient(90deg, color-mix(in srgb, var(--d-accent) 13%, transparent), transparent 78%); }
.md-demo-toc li[data-active="true"]::before { content: ""; position: absolute; left: 0; top: 7px; width: 2px; height: 1.1em; border-radius: 2px; background: var(--d-spectrum); }

.md-demo-page { overflow: hidden; padding: 26px 30px 30px; }
.md-demo-prose { max-width: 58ch; font-size: 14px; line-height: 1.66; }
.md-demo-prose > * { animation: md-demo-rise .5s cubic-bezier(.22,.7,.2,1) both; animation-delay: var(--i, 0ms); animation-play-state: paused; }
.md-demo.is-here .md-demo-prose > * { animation-play-state: running; }
@keyframes md-demo-rise { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }

.md-demo-prose h3 { margin: 0 0 .5em; font-size: 1.5em; font-weight: 650; letter-spacing: -.012em; }
.md-demo-prose h4 { margin: 1.5em 0 .5em; font-size: 1.06em; font-weight: 650; padding-bottom: .3em; border-bottom: 1px solid var(--d-line); }
.md-demo-prose p { margin: 0 0 1em; }
.md-demo-prose em { font-style: italic; }
.md-demo-prose blockquote { margin: 1.2em 0; padding: .1em 0 .1em 1.1em; position: relative; color: var(--d-muted); }
.md-demo-prose blockquote::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; border-radius: 2px; background: var(--d-spectrum); }
.md-demo-prose ul { margin: 0 0 1em; padding-left: 1.3em; }
.md-demo-prose li { margin: .3em 0; }
.md-demo-prose li::marker { color: color-mix(in srgb, #7779e8 75%, var(--d-muted)); }
.md-demo-prose hr { border: 0; height: 8px; margin: 1.8em 0 0; display: flex; align-items: center; justify-content: center; position: relative; }
.md-demo-prose hr::before { content: ""; width: 100%; height: 1px; background: linear-gradient(90deg, transparent, var(--d-line) 22%, var(--d-line) 78%, transparent); }
.md-demo-prose hr::after { content: ""; position: absolute; width: 8px; height: 8px; background: var(--d-spectrum); transform: rotate(45deg); border-radius: 2px; box-shadow: 0 0 0 5px var(--d-ground); }

.md-demo-code { margin: 1.3em 0; border: 1px solid var(--d-line); border-radius: 11px; background: var(--d-surface); overflow: hidden; }
.md-demo-code-bar { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 6px 13px; background: color-mix(in srgb, var(--d-surface-2) 60%, transparent); border-bottom: 1px solid var(--d-line); }
.md-demo-code-bar span { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--d-muted); font-weight: 600; }
.md-demo-copy { height: 24px; padding: 0 9px; border: 1px solid transparent; border-radius: 6px; background: none; color: var(--d-muted); font: inherit; font-size: 11px; transition: opacity .2s, background .16s, color .16s; opacity: 0; }
.md-demo-code:hover .md-demo-copy, .md-demo-copy:focus-visible { opacity: 1; }
.md-demo-copy:hover { background: var(--d-ground); color: var(--d-text); }
.md-demo-copy[data-done="true"] { opacity: 1; color: var(--d-accent); }
.md-demo-code pre { margin: 0; padding: 12px 14px; overflow-x: auto; font-family: Cascadia Code, Consolas, monospace; font-size: 12.5px; line-height: 1.6; }
.md-demo-code .c { color: #6b7793; font-style: italic; }
.md-demo-code .k { color: #c98ef0; }
.md-demo-code .s { color: #9ff0cf; }
.md-demo-code .t { color: #9db0ff; }
.md-demo-code .a { color: #7fd5ff; }
.md-demo-code .v { color: var(--d-text); }
.md-demo[data-theme="light"] .md-demo-code .c { color: #7b8496; }
.md-demo[data-theme="light"] .md-demo-code .k { color: #8e35b8; }
.md-demo[data-theme="light"] .md-demo-code .s { color: #0b7a5e; }
.md-demo[data-theme="light"] .md-demo-code .t { color: #3b4fbe; }
.md-demo[data-theme="light"] .md-demo-code .a { color: #1667a8; }

.md-demo-prose table { border-collapse: collapse; width: 100%; font-size: .93em; margin: 1.3em 0 0; border: 1px solid var(--d-line); border-radius: 11px; overflow: hidden; }
.md-demo-prose th { text-align: left; font-weight: 620; background: color-mix(in srgb, var(--d-surface-2) 92%, transparent); }
.md-demo-prose th, .md-demo-prose td { padding: 7px 12px; border-bottom: 1px solid var(--d-line); }
.md-demo-prose tbody tr:last-child td { border-bottom: 0; }
.md-demo-prose kbd { font-family: inherit; font-size: 10.5px; padding: 1px 5px; border: 1px solid var(--d-line); border-bottom-width: 2px; border-radius: 5px; color: var(--d-muted); }

.md-demo-foot { margin: 1rem 0 0; color: var(--md-quiet); font-size: 12px; }
.md-demo[data-read="serif"] .md-demo-prose { font-family: Georgia, "Times New Roman", serif; line-height: 1.72; }

@media (max-width: 680px) {
  .md-demo-body, .md-demo[data-toc="shut"] .md-demo-body { grid-template-columns: 1fr; }
  .md-demo-toc { display: none; }
  .md-demo-page { padding: 20px; }
}

/* ═══ Page motion ═══════════════════════════════════════════════════
   Restrained on purpose. Sections settle as they are reached and nothing
   slides, bounces or competes with the reading. The existing Pause motion
   control and the reduced-motion preference switch all of it off. */

.md-reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s cubic-bezier(.22,.7,.2,1), transform .7s cubic-bezier(.22,.7,.2,1); }
.md-reveal.is-here { opacity: 1; transform: none; }

/* The mark settles once, the way the spark falls in the icon. */
.md-mark svg path { animation: md-mark-in .9s cubic-bezier(.22,.7,.2,1) both; }
.md-mark svg path:nth-child(2) { animation-delay: .1s; }
.md-mark svg path:nth-child(3) { animation-delay: .2s; }
@keyframes md-mark-in { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }

/* The masthead rule draws across on arrival, in the spectrum. */
.md-masthead { position: relative; }
.md-masthead::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(115deg, #ff43dc, #c95ee8, #7779e8, #72dbe6, #b8ffe3);
  transform: scaleX(0); transform-origin: left; opacity: .55;
  animation: md-draw 1.5s cubic-bezier(.22,.7,.2,1) .15s both;
}
@keyframes md-draw { to { transform: scaleX(1); } }

.motion-paused .md-reveal { opacity: 1; transform: none; transition: none; }
.motion-paused .md-mark svg path,
.motion-paused .md-demo-prose > * { animation: none; opacity: 1; transform: none; }
.motion-paused .md-masthead::after { animation: none; transform: scaleX(1); }
.motion-paused .md-demo-body, .motion-paused .md-demo-toc { transition: none; }

@media (prefers-reduced-motion: reduce) {
  .md-reveal { opacity: 1; transform: none; transition: none; }
  .md-mark svg path, .md-demo-prose > * { animation: none; opacity: 1; transform: none; }
  .md-masthead::after { animation: none; transform: scaleX(1); }
  .md-demo-body, .md-demo-toc { transition: none; }
}

/* ═══ The fairy, over Sparks of Ora'Kai links only ══════════════════
   It does not follow the pointer on this page. It settles above a link to
   the books and nowhere else, which is the whole of its business here. */

.md-fairy {
  position: absolute; z-index: 5; width: 30px; height: 30px;
  --fairy-color: #b8a4ff;
  pointer-events: none; opacity: 0; transform: translateY(4px) scale(.82);
  transition: opacity .34s cubic-bezier(.22,.7,.2,1), transform .34s cubic-bezier(.22,.7,.2,1);
}
.md-fairy[data-here="true"] { opacity: 1; transform: none; }
.md-fairy svg { width: 100%; height: 100%; display: block; overflow: visible; }
.md-fairy .fairy-wing { fill: #dfe6ff; opacity: .66; transform-origin: 0 0; }
.md-fairy[data-here="true"] .fairy-wing-left { animation: md-wing-l 1.5s ease-in-out infinite; }
.md-fairy[data-here="true"] .fairy-wing-right { animation: md-wing-r 1.5s ease-in-out infinite; }
@keyframes md-wing-l { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.66); } }
@keyframes md-wing-r { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.66); } }

.motion-paused .md-fairy { display: none; }
@media (prefers-reduced-motion: reduce) {
  .md-fairy { display: none; }
}