:root{--bg:#fff;--fg:#1d1d1f;--muted:#6e6e73;--accent:#0a6cff;--card:#f5f5f7;--line:#d2d2d7}
@media(prefers-color-scheme:dark){:root{--bg:#111;--fg:#f5f5f7;--muted:#a1a1a6;--accent:#4f9bff;--card:#1c1c1e;--line:#3a3a3c}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
a{color:var(--accent)}
header,main,footer{max-width:1520px;margin:0 auto;padding:0 20px}
header{display:flex;justify-content:space-between;align-items:center;padding-top:20px;padding-bottom:20px;border-bottom:1px solid var(--line)}
header .brand{font-weight:700;font-size:1.2rem;color:var(--fg);text-decoration:none}
nav a{margin-left:18px;text-decoration:none}
main{padding-top:40px;padding-bottom:40px}
h1{font-size:2.2rem;line-height:1.2;margin:0 0 .5em}
h2{margin-top:2em}
.lead{font-size:1.25rem;color:var(--muted)}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 20px;margin:16px 0}
.card h3{margin:.2em 0}
.btn{display:inline-block;background:var(--accent);color:#fff;padding:10px 20px;border-radius:999px;text-decoration:none;font-weight:600}
table{border-collapse:collapse;width:100%}
td,th{border-bottom:1px solid var(--line);padding:8px 6px;text-align:left;vertical-align:top}
th{width:30%;color:var(--muted);font-weight:600}
code,pre{font-family:ui-monospace,Menlo,monospace}
pre{white-space:pre-wrap;background:var(--card);padding:12px;border-radius:8px;border:1px solid var(--line)}
footer{padding-top:20px;padding-bottom:40px;border-top:1px solid var(--line);color:var(--muted);font-size:.9rem}

details.app{background:var(--card);border:1px solid var(--line);border-radius:12px;margin:16px 0;padding:0 20px}
details.app>summary{cursor:pointer;font-weight:700;font-size:1.25rem;padding:14px 0;list-style:none;display:flex;justify-content:space-between;align-items:center}
details.app>summary::-webkit-details-marker{display:none}
details.app>summary::after{content:"+";font-size:1.5rem;color:var(--muted)}
details.app[open]>summary::after{content:"\2212"}
details.app[open]>summary{border-bottom:1px solid var(--line);margin-bottom:12px}
details.app>:last-child{margin-bottom:16px}
details.app h2{font-size:1.1rem;margin-top:1.5em}
.note{color:var(--muted);font-size:.95rem}
body{min-height:100vh;display:flex;flex-direction:column}
header,main,footer{width:100%}
main{flex:1}
footer{margin-top:10vh}
.app-head{display:flex;align-items:center;gap:20px;margin-bottom:8px}
.app-head h1{margin:0}
.app-icon{width:96px;height:96px;flex:none}
.card.has-icon{display:flex;gap:20px;align-items:center}
.card.has-icon .app-icon{width:80px;height:80px}
.shots{display:flex;gap:16px;margin:16px 0}
.shots figure{margin:0;flex:1 1 0;min-width:0}
.shots img{width:100%;height:auto;display:block;filter:drop-shadow(0 4px 12px rgba(0,0,0,.25))}
.shots figcaption{color:var(--muted);font-size:.9rem;margin-top:6px}
@media(max-width:700px){.shots{flex-direction:column}}