:root {
  color-scheme: light dark;
  font-family: ui-sans-serif, system-ui, sans-serif;
  color: #30231d;
  background: #fcf8f3;
  --surface: #fffdfa;
  --soft: #fff5e9;
  --accent: #b04414;
  --accent-ink: #fff8f1;
  --muted: #746258;
  --line: #eaded2;
  --glow: #efad7330;
  --pattern: #b0441410;
  --shadow: 0 18px 60px #6a321008;
}
* { box-sizing: border-box; }
html { min-width: 280px; }
body {
  margin: 0;
  background: radial-gradient(ellipse at 92% 0, var(--glow), transparent 44%), linear-gradient(180deg, transparent 65%, var(--soft));
  -webkit-text-size-adjust: 100%;
}
a { color: var(--accent); text-underline-offset: 4px; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; border-radius: 4px; }
::selection { color: #30231d; background: #ffb67880; }
.source-header, main, .source-footer { width: min(100% - 48px, 960px); margin-inline: auto; }
.source-header { min-height: 112px; display: flex; justify-content: space-between; align-items: center; gap: 20px; border-bottom: 1px solid var(--line); }
.source-brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: inherit; font-size: 23px; font-weight: 650; letter-spacing: -0.05em; text-decoration: none; }
.source-brand span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: linear-gradient(140deg, #ca672c, #a23912); color: #fff5e9; font: italic 30px/1 Georgia, serif; letter-spacing: -0.12em; padding-right: 5px; }
.back { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 600; text-decoration: none; }
main { padding-block: 60px 72px; }
.source-hero { position: relative; padding-bottom: 44px; isolation: isolate; animation: arrive 240ms ease-out both; }
.source-hero::before { content: ''; position: absolute; z-index: -1; pointer-events: none; inset: -28px 0 8px 44%; background-image: radial-gradient(circle, var(--pattern) 1px, transparent 1px); background-size: 15px 15px; mask-image: linear-gradient(100deg, transparent, #000); }
.eyebrow { margin: 0; font-size: 12px; line-height: 1.5; letter-spacing: 0.18em; font-weight: 750; color: var(--accent); }
h1 { max-width: 700px; font-size: clamp(38px, 7vw, 66px); line-height: 1.04; letter-spacing: -0.055em; margin: 18px 0 22px; font-weight: 650; }
h2 { font-size: clamp(23px, 3vw, 29px); line-height: 1.2; letter-spacing: -0.035em; margin: 12px 0 16px; font-weight: 650; }
p { line-height: 1.75; max-width: 67ch; margin: 0 0 16px; }
.source-hero > p:not(.eyebrow) { max-width: 630px; font-size: 17px; color: var(--muted); }
.source-facts { display: flex; flex-wrap: wrap; gap: 9px 18px; padding-top: 8px; color: var(--muted); font-size: 13px; }
.source-facts span { display: inline-flex; align-items: center; gap: 8px; }
.source-facts span::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.source-download { display: flex; justify-content: space-between; align-items: center; gap: 30px; padding: 28px 30px; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(120deg, var(--surface), var(--soft)); box-shadow: var(--shadow); }
.source-download + .source-download { margin-top: 20px; }
.source-download > div { min-width: 0; }
.source-download h2 { margin: 0 0 8px; font-size: 23px; }
.secondary { font-size: 14px; color: var(--muted); overflow-wrap: anywhere; margin-bottom: 0; }
.download { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 14px 20px; color: var(--accent-ink); background: var(--accent); border: 1px solid transparent; border-radius: 12px; font-size: 14px; font-weight: 650; text-align: center; text-decoration: none; transition: transform 150ms ease, box-shadow 150ms ease; }
.download:hover { transform: translateY(-1px); box-shadow: 0 6px 18px var(--glow); }
.download[aria-busy=true] { cursor: progress; transform: none; }
#source-download-status { margin-top: 8px; font-size: 13px; }
#source-download-status:empty { display: none; }
#source-download-progress { width: min(100%, 360px); height: 6px; margin-top: 12px; border: 0; border-radius: 6px; overflow: hidden; appearance: none; accent-color: var(--accent); background: var(--line); }
#source-download-progress:not([hidden]) { display: block; }
#source-download-progress::-webkit-progress-bar { background: var(--line); }
#source-download-progress::-webkit-progress-value { background: var(--accent); }
#source-download-progress::-moz-progress-bar { background: var(--accent); }
#engine-source-status { margin-top: 8px; }
#engine-source-status:empty { display: none; }
#engine-source-progress { display: block; width: min(100%, 360px); height: 8px; margin-top: 12px; accent-color: var(--accent); }
#engine-source-progress[hidden], #cancel-engine-source[hidden] { display: none; }
#cancel-engine-source { margin-top: 8px; padding: 4px 0; background: none; color: var(--accent); border: 0; font: inherit; font-size: 14px; cursor: pointer; text-align: left; }
.source-section { padding-top: 48px; }
.build-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.build-grid p:last-child { margin-bottom: 0; }
pre { min-width: 0; margin: 0; padding: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; line-height: 1.85; font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; box-shadow: var(--shadow); }
code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
p code { font-size: 0.9em; overflow-wrap: anywhere; }
.source-licenses { margin-top: 48px; padding-top: 40px; border-top: 1px solid var(--line); }
.source-licenses p { color: var(--muted); }
nav { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 30px; margin-top: 24px; }
nav a { display: flex; align-items: center; min-height: 48px; padding-block: 12px; border-bottom: 1px solid var(--line); font-size: 14px; font-weight: 600; text-decoration: none; }
nav a::after { content: '\2197'; margin-left: auto; padding-left: 12px; }
nav a:hover, .back:hover { text-decoration: underline; }
.source-footer { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-block: 26px 34px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.source-footer a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-decoration: none; }
@keyframes arrive { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 640px) {
  .source-header, main, .source-footer { width: calc(100% - 32px); }
  .source-header { min-height: 88px; gap: 12px; }
  .source-brand { font-size: 21px; }
  .source-brand span { width: 34px; height: 34px; font-size: 27px; border-radius: 10px; }
  .back { font-size: 14px; }
  main { padding-block: 36px 48px; }
  .source-hero { padding-bottom: 30px; }
  .source-hero > p:not(.eyebrow) { font-size: 16px; }
  .source-hero::before { left: 15%; }
  .source-facts { gap: 9px 14px; font-size: 13px; }
  .source-download { align-items: stretch; flex-direction: column; gap: 20px; padding: 22px; border-radius: 16px; }
  .download { width: 100%; }
  .source-section { padding-top: 36px; }
  .build-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  pre { font-size: 14px; padding: 18px; }
  .source-licenses { margin-top: 36px; padding-top: 32px; }
  nav { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .source-footer { align-items: flex-start; flex-direction: column; gap: 8px; padding-block: 22px; }
}
@media (prefers-color-scheme: dark) {
  :root { color: #fff3e7; background: #1b1512; --surface: #271e19; --soft: #30231c; --accent: #ffb678; --accent-ink: #30231d; --muted: #c4afa0; --line: #4c382b; --glow: #e37e3220; --pattern: #ffb67814; --shadow: 0 18px 60px #00000018; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .download:hover { transform: none; } }