/* Shared by every page. The home stage: family tabs, a big shot with prev/next/shuffle, and a filmstrip. */
:root {
  --bg: #eef0f2; --stage: #dfe3e8; --fg: #16191d; --muted: #59606a; --line: #cdd2d9; --accent: #24324a; --accent-fg: #fff; --sel: #ffffff; color-scheme: light;
  --sans: "Work Sans", -apple-system, system-ui, sans-serif; --mono: "Martian Mono", ui-monospace, Menlo, monospace;
}
* { box-sizing: border-box }
body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.55 var(--sans); }
.wrap { max-width: 1080px; margin: 0 auto; padding-inline: 20px }
a { color: var(--fg) }
a:focus-visible, button:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px }
header .wrap { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-block: 18px; flex-wrap: wrap }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none }
.brand img { border-radius: 8px }
header b { font-weight: 600; font-size: 20px; letter-spacing: -0.01em }
.sub { margin: 12px 0 0; color: var(--muted); font-size: 17px }
header nav { display: flex; gap: 18px; font-size: 14.5px; overflow-x: auto; scrollbar-width: none }
header nav a { color: var(--muted); text-decoration: none; white-space: nowrap; padding-block: 10px }
header nav a[aria-current] { color: var(--fg) }
.head { padding-block: 8px 14px; display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap }
h1 { font-size: clamp(28px, 3.8vw, 40px); line-height: 1.15; font-weight: 600; margin: 0; max-width: 20em; text-wrap: balance; letter-spacing: -0.01em }
.head > div:first-child { flex: 1 1 360px }
.feat { width: 260px; height: 248px; flex: none; object-fit: contain; border-radius: 6px; margin-right: 16px }
.dl { margin-top: 10px; display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: 8px }
.dl code { max-width: 260px }
.btn .os { font-weight: 400; opacity: .8; margin-left: 6px }
.btn { background: var(--accent); color: var(--accent-fg); text-decoration: none; font-weight: 600; padding: 13px 22px; border-radius: 5px }
.meta { font: 11.5px var(--mono); color: var(--muted) }
.stats { display: flex; align-items: center; gap: 5px }
.stats i { width: 1px; height: 11px; background: var(--line); margin-inline: 5px }
.star { width: 15px; height: 15px; fill: #f5b301 }
.stage { background: var(--stage); border-radius: 10px; overflow: hidden }
.tabs { display: flex; gap: 2px; padding: 6px; border-bottom: 1px solid var(--line); overflow-x: auto }
.tabs button { flex: 1 0 auto; font: 500 14px var(--sans); color: var(--muted); background: none; border: 0; padding: 9px 12px; border-radius: 6px; cursor: pointer; white-space: nowrap }
.tabs button[aria-selected="true"] { background: var(--sel); color: var(--fg) }
.tabs button:hover { color: var(--fg) }
.panel { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 32px; padding: 20px 32px; align-items: center }
.shot { display: flex; align-items: center; justify-content: center; height: 380px; touch-action: pan-y }
.shot img { max-height: 100%; max-width: 100%; object-fit: contain; filter: drop-shadow(0 12px 22px rgba(0,0,0,.22)) }
.info h2 { margin: 0 0 2px; font-size: 24px; font-weight: 600; text-wrap: balance }
.info .fam { font: 11.5px var(--mono); color: var(--muted); margin: 0 0 12px }
.info .desc { color: var(--muted); margin: 0 0 8px; max-width: 28em }
.info .more { margin: 0 0 20px; font-size: 14.5px; font-weight: 500 }
.ctrls { display: flex; gap: 8px }
.ctrls button { display: inline-flex; align-items: center; gap: 6px; font: 500 14px var(--sans); color: var(--fg); background: var(--sel); border: 1px solid var(--line); border-radius: 6px; padding: 9px 12px; cursor: pointer; min-width: 44px; min-height: 44px; justify-content: center }
.ctrls svg { width: 16px; height: 16px; fill: currentColor }
.strip { position: relative; display: flex; gap: 8px; overflow-x: auto; padding: 14px 16px; border-top: 1px solid var(--line); scroll-padding-inline: 40px; scrollbar-width: thin }
.strip button { flex: 0 0 auto; width: 92px; height: 72px; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center }
.strip button[aria-current="true"] { border-color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg) }
.strip img { max-width: 100%; max-height: 100%; object-fit: contain }
.first { padding-block: 48px 8px }
.first h2 { font-size: 24px; line-height: 1.25; font-weight: 600; margin: 0 0 24px; letter-spacing: -0.01em }
.first .cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px }
.first h3 { font-size: 16px; font-weight: 600; margin: 0 0 6px; display: flex; gap: 10px; align-items: baseline }
.first h3 span { font: 11px var(--mono); color: var(--muted); font-weight: 400 }
.first p { margin: 0 0 10px; color: var(--muted); max-width: 34em }
.first .note { max-width: none; white-space: nowrap; font-size: 14px; margin-top: 18px }
.get { padding-block: 40px 0 }
.get h2 { font-size: 20px; font-weight: 600; margin: 0 0 6px }
.get .lead { color: var(--muted); margin: 0 0 18px; white-space: nowrap }
.get ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line) }
.get li { display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; gap: 16px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--line) }
.get li b { font-weight: 600 }
.get li span, .get li em { font: 11.5px var(--mono); color: var(--muted); font-style: normal }
.get li em { font: 15px var(--sans); grid-column: span 2 }
.works { padding-top: 32px }
.works h2 { font-size: 20px; font-weight: 600; margin: 0 0 16px }
.works ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 12px }
.works li { background: #fff; border-radius: 8px; padding: 18px 6px 14px; display: grid; gap: 10px; justify-items: center; align-content: end; font-size: 13px; color: #5b6168 }
.works img { height: 34px; width: auto; max-width: 76px; object-fit: contain }
code { font: 12px var(--mono); overflow-wrap: anywhere }
.page { padding-block: 28px 48px }
.page .lead { color: var(--muted); font-size: 17px; margin: 12px 0 28px; max-width: 40em }
.pending { border: 1px dashed var(--line); border-radius: 10px; padding: 48px 20px; text-align: center; color: var(--muted); font-size: 14px }
.list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line) }
.list li { border-bottom: 1px solid var(--line) }
.list a { display: grid; gap: 2px; padding: 12px 0; text-decoration: none }
.list a b { font-weight: 600 }
.list a span { color: var(--muted); font-size: 14.5px }
footer nav { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 8px }
footer { border-top: 1px solid var(--line); padding-block: 22px 72px; font-size: 13px; color: var(--muted) }
@media (max-width: 820px) { header nav { width: 100% } .panel { grid-template-columns: minmax(0, 1fr); padding: 20px; gap: 18px } .shot { height: 260px } .first .cols { grid-template-columns: minmax(0, 1fr) } .get li { grid-template-columns: minmax(0, 1fr); gap: 2px } .get li em { grid-column: auto } }
.prose > :not(:has(video)) { max-width: 42em }
.prose h2 { font-size: 20px; font-weight: 600; margin: 32px 0 8px }
.prose p, .prose li { color: var(--muted) }
.prose strong { color: var(--fg); font-weight: 500 }
.prose ul { padding-left: 20px }
.prose pre { background: var(--stage); border-radius: 8px; padding: 14px 16px; overflow-x: auto }
.prose pre code { font-size: 12px; overflow-wrap: normal }
.grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px }
.grid li { background: var(--stage); border-radius: 8px; padding: 14px 10px 10px; display: grid; gap: 8px; justify-items: center; text-align: center; font-size: 13px; color: var(--muted) }
.grid img { width: 92px; height: 72px; object-fit: contain }
a.zoom, .shot img { cursor: zoom-in }
.collage a { display: block }
#zoom { padding: 0; border: 0; background: none; max-width: 100vw; max-height: 100vh; cursor: zoom-out }
#zoom::backdrop { background: rgb(0 0 0 / .8) }
#zoom img { display: block; width: auto; height: auto; max-width: calc(100vw - 32px); max-height: calc(100vh - 32px) }
/* Clips all show in the same 4:3 box, letterboxed, so mixed aspect ratios line up. */
.clip { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: #16191d; border-radius: 8px }
.rows { display: grid; gap: 48px }
.row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 32px; align-items: center }
.row .wide { grid-column: 1 / -1 }
.row h2 { margin-top: 0 }
@media (max-width: 820px) { .row { grid-template-columns: minmax(0, 1fr) } .rows { gap: 36px } }
/* Family-page showcase: every showcase skin's windows mixed together, each placed at random in its slot. */
.collage { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); grid-auto-flow: dense; gap: 36px 28px; margin: 8px 0 64px }
.collage figure { margin: 0; max-width: 100% }
.collage img { display: block; width: auto; height: auto; max-width: 100% }
.collage figcaption { font-size: 12.5px; color: var(--muted); margin-top: 6px }
.page > h2 { font-size: 22px; font-weight: 600; margin: 0 0 16px }
@media (max-width: 600px) { .collage { grid-template-columns: 1fr } .collage figure { grid-column: auto !important; translate: none !important } }
@media (max-width: 600px) { .works ul { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
.gh svg { width: 20px; height: 20px; fill: currentColor; vertical-align: middle }
.chains { margin: 20px 0 0; background: var(--stage); border-radius: 12px; padding: 4px 20px }
.lane { padding: 16px 0 }
.lane + .lane { border-top: 1px solid var(--line) }
.lane h3 { margin: 0 0 12px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted) }
.lane p { margin: 0 }
.chain { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0 28px; list-style: none; margin: 0; padding: 0 }
.chain li { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 52px; padding: 8px 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); font-size: 14px; text-align: center }
.chain li small { font-size: 11px; color: var(--muted) }
.chain li.hit { background: var(--accent); border-color: var(--accent); color: var(--accent-fg) }
.chain li + li::before { content: "→"; position: absolute; right: 100%; top: 50%; width: 28px; text-align: center; transform: translateY(-50%); color: var(--muted) }
@media (max-width: 700px) {
  .chain { grid-template-columns: 1fr; gap: 24px 0 }
    .chain li + li::before { content: "↓"; right: auto; left: 50%; top: -24px; width: auto; height: 24px; line-height: 24px; transform: translateX(-50%) }
}
.sources { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; max-width: none }
.prose .sources li { display: flex; gap: 14px; background: var(--stage); border-radius: 10px; padding: 14px }
.sources .logo { flex: none; width: 64px; height: 64px; background: #fff; border-radius: 8px; display: grid; place-items: center }
.sources img { max-width: 44px; max-height: 40px; object-fit: contain }
.sources h3 { margin: 0 0 4px; font-size: 16px; font-weight: 600 }
.sources p { margin: 0 0 6px; font-size: 14px }
.sources .tags { font: 11px var(--mono); color: var(--muted); opacity: .8; margin: 0 }
.fams a { grid-template-columns: auto 1fr; align-items: center; gap: 16px; padding: 14px 0 }
.fams a div { display: grid; gap: 2px }
.fams .mini { width: 184px; height: auto; border-radius: 4px }
@media (max-width: 600px) { .fams a { grid-template-columns: 1fr } }
.prose > p > img { max-width: 100%; height: auto; border-radius: 8px; display: block; margin: 20px 0 }
.prose table { border-collapse: collapse; font-size: 14.5px }
.prose th, .prose td { text-align: left; padding: 6px 24px 6px 0; border-bottom: 1px solid var(--line); color: var(--muted) }
.chain { width: 100%; max-width: 880px; height: auto; margin: 16px 0; font: 13px var(--sans) }
.chain rect { fill: var(--stage); stroke: var(--line) }
.chain text { fill: var(--fg) }
.chain .h { fill: var(--muted); font: 12px var(--mono) }
.chain .a { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round }
.prose > .chain { max-width: 880px }
.info .more a + a { margin-left: 16px }
@media (max-width: 820px) { .first .note, .get .lead { white-space: normal } }
@media (max-width: 600px) { .tabs { flex-wrap: wrap; overflow-x: visible } .tabs button { flex: 1 1 auto } .dl { align-items: flex-start; text-align: left } }
@media (max-width: 600px) { header nav { flex-wrap: wrap; overflow-x: visible; gap: 0 18px } }
#brew { border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--fg); padding: 20px; max-width: min(92vw, 480px) }
#brew::backdrop { background: rgb(0 0 0 / .5) }
#brew p { margin: 0 0 10px; font-weight: 600 }
#brew code { display: block; font: 12.5px var(--mono); background: var(--sel); border: 1px solid var(--line); border-radius: 6px; padding: 12px; overflow-wrap: anywhere }
#brew div { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px }
#brew button { font: 500 14px var(--sans); color: var(--fg); background: var(--sel); border: 1px solid var(--line); border-radius: 6px; padding: 9px 14px; cursor: pointer }