:root { color-scheme: dark; }
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.55 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #0d1117; color: #c9d1d9; }
a { color: #58a6ff; text-decoration: none; }
a:hover { text-decoration: underline; }
header.site { display: flex; align-items: center; gap: 24px; padding: 14px 24px; border-bottom: 1px solid #30363d; background: #161b22; position: sticky; top: 0; z-index: 5; }
header.site .brand { font-weight: 700; color: #f0f6fc; font-size: 17px; }
header.site .brand span { color: #8b949e; font-weight: 400; }
header.site nav { margin-left: auto; display: flex; gap: 18px; }
main { max-width: 1200px; margin: 0 auto; padding: 28px 24px 60px; }
h1 { color: #f0f6fc; font-size: 26px; margin: 0 0 10px; }
h2 { color: #f0f6fc; font-size: 18px; margin: 34px 0 12px; border-bottom: 1px solid #21262d; padding-bottom: 6px; }
h2 .count { color: #8b949e; font-weight: 400; font-size: 14px; }
.lede { color: #8b949e; margin: 0 0 18px; max-width: 74ch; }
.crumb { color: #8b949e; margin-bottom: 12px; font-size: 14px; }
.stats { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 20px; padding: 12px 16px; background: #161b22; border: 1px solid #30363d; border-radius: 8px; }
.stats b { color: #f0f6fc; font-size: 17px; }
.filter { width: 100%; padding: 9px 12px; margin-bottom: 8px; background: #0d1117; border: 1px solid #30363d; border-radius: 8px; color: #c9d1d9; font-size: 14px; }
.filter:focus { outline: none; border-color: #58a6ff; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.card { display: block; background: #161b22; border: 1px solid #30363d; border-radius: 8px; overflow: hidden; transition: border-color .12s; }
.card:hover, .card:focus { border-color: #58a6ff; text-decoration: none; outline: none; }
.card.playing { border-color: #58a6ff; }
.card.playing .name { color: #58a6ff; }
.card img { display: block; width: 100%; height: auto; background: #000; image-rendering: pixelated; }
.card .name { display: block; padding: 8px 10px 0; color: #f0f6fc; font-size: 14px; word-break: break-all; }
.card .meta { display: block; padding: 2px 10px 9px; color: #8b949e; font-size: 12px; }
.stage { margin: 0 0 22px; }
.stage img { max-width: 100%; height: auto; border: 1px solid #30363d; border-radius: 8px; background: #000; image-rendering: pixelated; }
.stage figcaption { color: #8b949e; font-size: 13px; margin-top: 8px; }
.stage canvas { max-width: 100%; height: auto; border: 1px solid #30363d; border-radius: 8px; background: #000; image-rendering: pixelated; display: block; }
.stage.failed canvas { display: none; }
.transport { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; padding: 9px 11px; background: #161b22; border: 1px solid #30363d; border-radius: 8px; }
.transport button, .transport select { background: #0d1117; color: #c9d1d9; border: 1px solid #30363d; border-radius: 6px; padding: 5px 10px; cursor: pointer; font-size: 13px; }
.transport button:hover:not(:disabled), .transport select:hover:not(:disabled) { border-color: #58a6ff; }
.transport button:disabled, .transport select:disabled { opacity: .45; cursor: default; }
.transport .p-play { min-width: 88px; font-weight: 600; }
.transport .p-loop.on { background: #1f6feb; border-color: #1f6feb; color: #fff; }
.transport .p-scrub { flex: 1; min-width: 160px; accent-color: #58a6ff; }
.transport .p-frame { color: #f0f6fc; font-size: 13px; min-width: 150px; text-align: right; font-variant-numeric: tabular-nums; }
.transport .p-time { color: #8b949e; font-size: 13px; min-width: 110px; text-align: right; font-variant-numeric: tabular-nums; }
.facts { border-collapse: collapse; margin-bottom: 20px; }
.facts th { text-align: left; color: #8b949e; font-weight: 400; padding: 5px 22px 5px 0; vertical-align: top; white-space: nowrap; }
.facts td { padding: 5px 0; color: #f0f6fc; word-break: break-all; }
.links { display: flex; gap: 18px; flex-wrap: wrap; }
.commits { list-style: none; padding: 0; margin: 0; }
.commits li { padding: 14px 16px; margin-bottom: 10px; background: #161b22; border: 1px solid #30363d; border-radius: 8px; }
.commits .subject { display: block; color: #f0f6fc; font-size: 16px; font-weight: 600; margin-bottom: 4px; }
.commits .meta, .change .meta { display: block; color: #8b949e; font-size: 13px; }
.change { margin: 26px 0; padding-bottom: 20px; border-bottom: 1px solid #21262d; }
.change h2 { margin-top: 0; border: none; }
.note { color: #d29922; font-size: 13px; }
.pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin: 12px 0; }
.pair figure { margin: 0; }
.pair figcaption { color: #8b949e; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 5px; }
.pair img { width: 100%; height: auto; border: 1px solid #30363d; border-radius: 6px; background: #000; image-rendering: pixelated; }
footer.site { border-top: 1px solid #30363d; padding: 18px 24px; color: #8b949e; font-size: 13px; }
code { font-family: 'Cascadia Code', ui-monospace, monospace; font-size: .92em; }