:root { --fg:#1f2328; --muted:#59636e; --line:#d1d9e0; --panel:#f6f8fa; --accent:#6d3b8e; --bg:#fff; color-scheme: light dark; }
@media (prefers-color-scheme: dark) { :root { --fg:#e6edf3; --muted:#9198a1; --line:#3d444d; --panel:#1c2128; --accent:#b48bd4; --bg:#0d1117; } }
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.6 -apple-system, "Segoe UI", system-ui, sans-serif; color: var(--fg); background: var(--bg); }
header.site { border-bottom: 1px solid var(--line); }
header.site .inner, main, footer .inner { max-width: 60rem; margin: 0 auto; padding: 0 1.25rem; }
header.site .inner { display: flex; align-items: center; gap: 1.5rem; height: 3.5rem; }
header.site a.brand { font-weight: 700; display: flex; align-items: center; gap: .5rem; color: var(--fg); text-decoration: none; }
header.site nav { display: flex; gap: 1rem; flex-wrap: wrap; }
header.site a.gh { margin-left: auto; display: inline-flex; align-items: center; gap: .4rem; color: var(--fg); text-decoration: none; font-weight: 600; }
header.site a.gh:hover { color: var(--accent); }
@media (max-width: 34rem) { header.site a.gh span { display: none; } }
a { color: var(--accent); }
main { padding-top: 1.5rem; padding-bottom: 3rem; }
h1 { font-size: 2rem; line-height: 1.2; margin: .5rem 0 1rem; }
h2 { margin-top: 2.2rem; }
.lede { font-size: 1.15rem; color: var(--muted); max-width: 42rem; }
.steps { counter-reset: s; list-style: none; padding: 0; }
.steps > li { counter-increment: s; position: relative; padding: .8rem 1rem .8rem 3.2rem; border: 1px solid var(--line); border-radius: 10px; margin: .7rem 0; background: var(--panel); }
.steps > li::before { content: counter(s); position: absolute; left: 1rem; top: .8rem; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--accent); color: var(--bg); text-align: center; font-weight: 700; line-height: 1.6rem; }
.btn { display: inline-block; padding: .5rem 1rem; border-radius: 8px; background: var(--accent); color: var(--bg); text-decoration: none; font-weight: 600; }
.steps p { margin: .6rem 0; }
.steps ul { margin: .3rem 0 .5rem; padding-left: 1.2rem; }
.btn.secondary { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
code, pre { font: .9em ui-monospace, Menlo, monospace; }
pre { background: var(--panel); padding: .8rem; border-radius: 8px; overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: .95rem; }
th, td { border-bottom: 1px solid var(--line); padding: .35rem .5rem; text-align: left; vertical-align: middle; }
td img { width: 32px; height: 32px; display: block; }
.preview { max-width: 100%; height: auto; border-radius: 12px; }
.video { position: relative; aspect-ratio: 16 / 9; margin: 1.5rem 0 .4rem; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 6px 24px rgba(0, 0, 0, .12); background: var(--panel); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.credit { font-size: .8rem; color: var(--muted); margin: 0 0 1.5rem; }
.preview.shot { border: 1px solid var(--line); box-shadow: 0 6px 24px rgba(0, 0, 0, .12); }
footer { border-top: 1px solid var(--line); color: var(--muted); font-size: .9rem; padding: 1.2rem 0; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.platforms { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1rem; }
.platforms section { border: 1px solid var(--line); border-radius: 10px; padding: 0 1rem .5rem; background: var(--panel); }
.platforms pre { background: var(--bg); white-space: pre-wrap; word-break: break-all; }
.small { font-size: .92rem; color: var(--muted); }
.note { border-left: 4px solid var(--accent); background: var(--panel); padding: .6rem 1rem; border-radius: 0 8px 8px 0; }