:root {
  color-scheme: dark;
  --bg: #0c1013;
  --panel: #13191e;
  --panel-2: #182128;
  --line: #2a3841;
  --text: #edf2f4;
  --muted: #a7b3ba;
  --accent: #9fe5df;
  --accent-2: #d7f6f2;
  --warm: #e8d6a4;
  --danger: #ffaaa0;
  --ok: #a8e7c1;
  --max: 1180px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px),
    var(--bg);
  background-size: 32px 32px;
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
}
a { color: inherit; }
button, input { font: inherit; }
code { font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; overflow-wrap: anywhere; }
.skip-link { position: absolute; left: -9999px; top: 0; }
.skip-link:focus { left: 1rem; top: 1rem; z-index: 99; background: var(--accent); color: #071012; padding: .7rem 1rem; border-radius: .5rem; }
.site-header {
  max-width: var(--max); margin: 0 auto; padding: 1rem 1.25rem;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  position: relative; z-index: 10;
}
.brand { display: flex; align-items: center; gap: .75rem; text-decoration: none; }
.brand-mark { border: 1px solid var(--accent); color: var(--accent); padding: .35rem .55rem; letter-spacing: .08em; font-weight: 800; font-size: .8rem; }
.brand-copy { color: var(--muted); font-size: .72rem; letter-spacing: .16em; }
nav { display: flex; gap: .9rem; flex-wrap: wrap; }
nav a { color: var(--muted); text-decoration: none; font-size: .88rem; }
nav a:hover, nav a:focus-visible { color: var(--text); }
.section-shell { width: min(calc(100% - 2rem), var(--max)); margin: 0 auto; }
.hero { min-height: 78vh; display: grid; grid-template-columns: 1.35fr .65fr; align-items: center; gap: clamp(2rem, 6vw, 5rem); padding: 4rem 0 5rem; }
.eyebrow { color: var(--accent); text-transform: uppercase; letter-spacing: .18em; font-size: .75rem; font-weight: 800; margin: 0 0 .8rem; }
h1, h2, h3 { line-height: 1.02; margin-top: 0; }
h1 { font-size: clamp(3.1rem, 8vw, 7.4rem); letter-spacing: -.055em; margin-bottom: 1rem; }
h1 span { color: var(--muted); font-weight: 500; font-size: .44em; letter-spacing: -.025em; display: block; margin-top: .35rem; }
h2 { font-size: clamp(2.2rem, 5vw, 4.3rem); letter-spacing: -.04em; margin-bottom: 1rem; }
h3 { font-size: 1.35rem; }
.release-chip { display: inline-block; border: 1px solid var(--warm); color: var(--warm); padding: .35rem .7rem; border-radius: 999px; font-weight: 800; letter-spacing: .09em; font-size: .78rem; }
.hero-lede { max-width: 720px; font-size: clamp(1rem, 2vw, 1.25rem); color: var(--muted); }
.hero-actions { display: flex; gap: .65rem; flex-wrap: wrap; margin: 1.7rem 0 2rem; }
.button { display: inline-flex; justify-content: center; align-items: center; min-height: 46px; padding: .75rem 1rem; border: 1px solid var(--line); border-radius: .55rem; text-decoration: none; color: var(--text); background: var(--panel); cursor: pointer; font-weight: 750; }
.button:hover, .button:focus-visible { border-color: var(--accent); outline: none; }
.button.primary { background: var(--accent); color: #071012; border-color: var(--accent); }
.button.ghost { background: transparent; }
.button.wide { width: 100%; margin-top: 1rem; }
.hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .75rem; }
.hero-stats div { border-top: 1px solid var(--line); padding-top: .8rem; }
.hero-stats strong { display: block; font-size: clamp(1.35rem, 3vw, 2.1rem); }
.hero-stats span { display: block; color: var(--muted); font-size: .78rem; }
.runtime-card { margin: 0; background: var(--panel); border: 1px solid var(--line); padding: .7rem; transform: rotate(.6deg); box-shadow: 0 20px 60px rgba(0,0,0,.28); }
.runtime-card img { width: 100%; height: auto; display: block; filter: saturate(.78) contrast(1.03); }
.runtime-card figcaption { color: var(--muted); font-size: .75rem; padding: .7rem .2rem .1rem; }
.section-heading { max-width: 850px; margin-bottom: 2rem; }
.section-heading p:not(.eyebrow) { color: var(--muted); font-size: 1.05rem; }
.patch-section, .status-section, .verification-section, .known-section, .download-section, .branch-section { padding: 6rem 0; }
.patch-section { border-top: 1px solid var(--line); }
.privacy-banner { border: 1px solid #31554c; background: #10241f; padding: 1rem; border-radius: .7rem; margin-bottom: 1.2rem; color: #d7eee6; }
.privacy-dot { width: .65rem; height: .65rem; border-radius: 50%; background: var(--ok); display: inline-block; margin-right: .6rem; box-shadow: 0 0 0 5px rgba(168,231,193,.08); }
.patch-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.drop-panel, .patch-status { min-height: 400px; background: var(--panel); border: 1px solid var(--line); border-radius: .8rem; padding: clamp(1.2rem, 4vw, 2.2rem); }
.drop-panel { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; border-style: dashed; transition: border-color .15s, background .15s; }
.drop-panel.dragover { border-color: var(--accent); background: #17262a; }
.drop-panel:focus-visible { outline: 3px solid rgba(159,229,223,.35); outline-offset: 3px; }
.drop-icon { width: 58px; height: 58px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; font-size: 1.6rem; color: var(--accent); margin-bottom: 1rem; }
.drop-panel p { color: var(--muted); }
.drop-panel .micro { font-size: .72rem; margin-bottom: 0; }
.patch-status { display: flex; flex-direction: column; }
.status-topline { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .75rem; }
.status-badge { border-radius: 999px; padding: .35rem .65rem; font-size: .75rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; background: #242d33; color: var(--muted); }
.status-badge.working { color: var(--warm); background: #332d1b; }
.status-badge.success { color: var(--ok); background: #163123; }
.status-badge.error { color: var(--danger); background: #341d1c; }
.progress-track { height: 7px; background: #20282e; border-radius: 999px; overflow: hidden; }
.progress-bar { width: 0%; height: 100%; background: var(--accent); transition: width .2s ease; }
.steps { list-style: none; padding: 0; margin: 1.5rem 0; display: grid; gap: .55rem; color: #67757e; }
.steps li { position: relative; padding-left: 1.5rem; }
.steps li::before { content: "○"; position: absolute; left: 0; }
.steps li.active { color: var(--warm); }
.steps li.active::before { content: "◉"; }
.steps li.done { color: var(--ok); }
.steps li.done::before { content: "✓"; }
.status-message { margin-top: auto; color: var(--muted); border-top: 1px solid var(--line); padding-top: 1rem; white-space: pre-line; }
.result-panel { margin-top: 1rem; border: 1px solid #31554c; background: #10241f; padding: 1rem; border-radius: .65rem; }
.result-panel code { display: block; color: var(--accent-2); font-size: .72rem; }
.hash-details { margin-top: 1rem; background: var(--panel); border: 1px solid var(--line); border-radius: .7rem; padding: 1rem; }
.hash-details summary { cursor: pointer; font-weight: 750; }
.hash-details dl { margin-bottom: 0; }
.hash-details dl div { padding: .8rem 0; border-top: 1px solid var(--line); }
.hash-details dt { color: var(--muted); font-size: .8rem; }
.hash-details dd { margin: .35rem 0 0; }
.hash-details code { font-size: .72rem; }
.mobile-note { color: var(--muted); font-size: .78rem; max-width: 850px; }
.split-section { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding: 6rem 0; border-top: 1px solid var(--line); }
.split-section > div:first-child { padding-right: clamp(0rem, 4vw, 4rem); }
.split-section p { color: var(--muted); }
.video-card { background: linear-gradient(135deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); border-radius: .8rem; padding: 2rem; display: flex; flex-direction: column; justify-content: end; min-height: 300px; }
.video-label { color: var(--accent); text-transform: uppercase; letter-spacing: .15em; font-size: .7rem; margin-bottom: auto; }
.video-card strong { font-size: 1.7rem; }
.video-card span { color: var(--muted); }
.video-card a { color: var(--accent); margin-top: .8rem; }
.status-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.status-columns article { background: var(--panel); border: 1px solid var(--line); border-radius: .8rem; padding: 1.5rem; }
.clean-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .65rem; }
.clean-list li { color: var(--muted); }
.clean-list span { display: inline-block; width: 1.6rem; color: var(--accent); font-weight: 900; }
.branch-section { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.narrow { max-width: 780px; }
.offset-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: .7rem; align-items: stretch; margin: 2rem 0 1rem; }
.offset-flow > div { background: var(--panel); border: 1px solid var(--line); border-radius: .7rem; padding: 1.4rem; }
.offset-flow > span { align-self: center; color: var(--muted); }
.offset-flow small { display: block; color: var(--muted); }
.offset-flow strong { display: block; font: 800 clamp(1.5rem, 4vw, 2.5rem)/1.2 "SFMono-Regular", Consolas, monospace; margin-top: .6rem; }
.offset-flow .fixed { border-color: #31554c; }
.offset-flow .fixed strong { color: var(--ok); }
.offset-flow .shift strong { color: var(--warm); }
.caption { color: var(--muted); font-size: .82rem; }
.verification-table { border: 1px solid var(--line); border-radius: .7rem; overflow: hidden; }
.verification-table > div { display: grid; grid-template-columns: 1fr auto; gap: 1rem; padding: .9rem 1rem; background: var(--panel); border-bottom: 1px solid var(--line); }
.verification-table > div:last-child { border-bottom: 0; }
.verification-table strong { font-size: .8rem; letter-spacing: .06em; }
.pass { color: var(--ok); }
.fixed-label { color: var(--accent); }
.pending { color: var(--warm); }
.doc-links { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1rem; }
.doc-links a { color: var(--accent); font-size: .85rem; }
.issue-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.issue-grid p { margin: 0; background: var(--panel); border-left: 3px solid var(--warm); padding: 1.2rem; color: var(--muted); }
.download-section { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center; }
.patch-download-card { background: var(--panel); border: 1px solid var(--line); border-radius: .8rem; padding: 1.4rem; display: grid; gap: .7rem; }
.patch-download-card > code { color: var(--accent); }
.patch-download-card span, .patch-download-card small { color: var(--muted); overflow-wrap: anywhere; }
.provenance-section { padding: 4rem 0 6rem; display: grid; grid-template-columns: .7fr 1.3fr; gap: 2rem; border-top: 1px solid var(--line); }
.provenance-section p { color: var(--muted); margin-top: 0; }
footer { width: min(calc(100% - 2rem), var(--max)); margin: 0 auto; border-top: 1px solid var(--line); padding: 2rem 0 3rem; display: grid; grid-template-columns: 1fr auto; gap: 2rem; color: var(--muted); font-size: .8rem; }
footer strong { color: var(--text); }
.footer-links { display: flex; gap: 1rem; flex-wrap: wrap; }
.footer-links a { color: var(--accent); }
@media (max-width: 860px) {
  .site-header { align-items: flex-start; flex-direction: column; }
  nav { width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: .25rem; }
  .hero { grid-template-columns: 1fr; padding-top: 2.2rem; }
  .runtime-card { max-width: 440px; transform: none; }
  .patch-grid, .split-section, .status-columns, .download-section, .provenance-section { grid-template-columns: 1fr; }
  .hero-stats { grid-template-columns: 1fr; }
  .offset-flow { grid-template-columns: 1fr; }
  .offset-flow > span { transform: rotate(90deg); justify-self: center; }
  .issue-grid { grid-template-columns: 1fr; }
  footer { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .section-shell { width: min(calc(100% - 1.2rem), var(--max)); }
  .site-header { padding-inline: .6rem; }
  .brand-copy { display: none; }
  h1 { font-size: 3.25rem; }
  .hero { min-height: auto; }
  .button { width: 100%; }
  .hero-actions { display: grid; }
  .drop-panel, .patch-status { min-height: 360px; padding: 1rem; }
  .patch-section, .status-section, .verification-section, .known-section, .download-section, .branch-section, .split-section { padding: 4rem 0; }
  .verification-table > div { grid-template-columns: 1fr; }
  .hash-details code, .result-panel code { font-size: .63rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}
