:root{--bg:#F5F5F2;--grid:#E4E3DC;--surface:#FFFFFF;--surface-2:#EFEEE8;--ink:#15171A;--muted:#5E6268;--line:#DAD8D0;--brand:#1F2A37;--accent:#1F2A37;--accent-soft:#E9EDF2;
  --shadow:0 1px 2px rgba(0,0,0,.05),0 4px 14px rgba(0,0,0,.05);--f-display:'Zilla Slab',Georgia,serif;--f-body:'Source Sans 3',system-ui,sans-serif;--f-mono:'IBM Plex Mono',ui-monospace,monospace}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--bg:#111316;--grid:#1C1F24;--surface:#181B20;--surface-2:#20242A;--ink:#E8EAED;--muted:#9AA0A8;--line:#2B3037;--brand:#E8EAED;--accent:#E8EAED;--accent-soft:#232830;--shadow:none}}
:root[data-theme="dark"]{--bg:#111316;--grid:#1C1F24;--surface:#181B20;--surface-2:#20242A;--ink:#E8EAED;--muted:#9AA0A8;--line:#2B3037;--brand:#E8EAED;--accent:#E8EAED;--accent-soft:#232830;--shadow:none}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:24px 24px;color:var(--ink);font:16px/1.5 var(--f-body);-webkit-font-smoothing:antialiased}
.skip{position:absolute;left:-999px;top:8px;background:var(--surface);color:var(--ink);padding:10px 14px;border-radius:8px;border:2px solid var(--accent);z-index:50}
.skip:focus{left:8px}
.wrap{max-width:1080px;margin:0 auto;padding:28px max(16px,env(safe-area-inset-left,0px)) 56px}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 28px}
.brand{display:inline-flex;align-items:baseline;gap:8px;text-decoration:none;color:var(--ink);font:700 20px/1 var(--f-display)}
.brand span{font:500 11px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.nav{display:flex;gap:6px;flex-wrap:wrap}
.nav a{font:600 14px/1 var(--f-body);color:var(--ink);text-decoration:none;padding:10px 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface);min-height:40px;display:inline-flex;align-items:center}
.nav a:hover,.nav a[aria-current]{border-color:var(--accent)}
.eyebrow{font:500 12px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
h1{font:700 clamp(32px,6vw,48px)/1.05 var(--f-display);margin:0 0 12px;letter-spacing:-.01em;text-wrap:balance}
.lede{color:var(--muted);max-width:62ch;margin:0 0 16px;font-size:17px}
.meta{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0 0 30px}
.meta li{font:500 13px/1 var(--f-mono);padding:8px 11px;border:1px solid var(--line);border-radius:999px;background:var(--surface)}
h2{font:600 22px/1.2 var(--f-display);margin:30px 0 12px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:14px}
.card{--a:var(--al);--as:var(--asl);display:flex;flex-direction:column;gap:10px;text-align:left;font:inherit;color:inherit;text-decoration:none;background:var(--surface);border:1px solid var(--line);border-top:5px solid var(--a);border-radius:12px;padding:18px;box-shadow:var(--shadow);cursor:pointer;min-width:0;transition:transform .15s,border-color .15s}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .card,:root:not([data-theme="light"]) .themed{--a:var(--ad);--as:var(--asd)}}
:root[data-theme="dark"] .card,:root[data-theme="dark"] .themed{--a:var(--ad);--as:var(--asd)}
.card:hover{transform:translateY(-2px)}
.card:focus-visible{outline:3px solid var(--a);outline-offset:3px}
.code{font:600 13px/1 var(--f-mono);letter-spacing:.06em;color:var(--a)}
.card h3{font:600 21px/1.2 var(--f-display);margin:0}
.sub{color:var(--muted);font-size:15px;margin:0}
.chips{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:auto 0 0}
.chips li{font:500 12px/1 var(--f-mono);padding:6px 8px;border-radius:6px;background:var(--as);color:var(--ink)}
.open{font-weight:600;color:var(--a);font-size:15px}
.back{display:inline-flex;align-items:center;font:600 15px/1 var(--f-body);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:10px 14px;color:var(--ink);text-decoration:none;margin:0 0 22px;min-height:44px}
.back:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.themed{--a:var(--al);--as:var(--asl)}
.themed .eyebrow{color:var(--a)}
.about{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px 20px;margin:34px 0 0;max-width:72ch}
.about h2{margin-top:0}
.about p{margin:0 0 10px}
.about p:last-child{margin:0}
footer.site{margin-top:44px;color:var(--muted);font-size:14px;max-width:70ch}
footer.site a{color:inherit}
#bar{position:fixed;top:0;left:0;right:0;z-index:20;display:none;align-items:center;gap:8px;padding:6px max(10px,env(safe-area-inset-left,0px));background:var(--bar,var(--brand));min-height:44px}
#bar button,#bar a{font:600 14px/1.2 var(--f-body);border:0;border-radius:8px;padding:8px 12px;cursor:pointer;background:rgba(255,255,255,.16);color:#fff;text-decoration:none;min-height:34px;display:inline-flex;align-items:center}
#bar button:focus-visible,#bar a:focus-visible{outline:2px solid #fff;outline-offset:2px}
#bar .ttl{color:#fff;font:600 14px/1.2 var(--f-body);margin-left:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
#frame{position:fixed;left:0;right:0;bottom:0;top:44px;width:100%;height:calc(100% - 44px);border:0;display:none;background:var(--bg);z-index:10}
#loading{position:fixed;inset:44px 0 0 0;z-index:11;display:none;align-items:center;justify-content:center;background:var(--bg);color:var(--muted);font:600 16px var(--f-body)}
body.inpack #bar{display:flex} body.inpack #frame{display:block} body.inpack .wrap{display:none} body.loading #loading{display:flex}
@media (prefers-reduced-motion: reduce){.card{transition:none}.card:hover{transform:none}}