:root { color-scheme: light dark; --ink:#1d1d1f; --muted:#6e6e73; --paper:#ffffff; --surface:#ffffff; --line:#d2d2d7; --accent:#0071e3; --tag:#f5f5f7; }
@media (prefers-color-scheme: dark) { :root { --ink:#f5f5f7; --muted:#a1a1a6; --paper:#000000; --surface:#1c1c1e; --line:#38383a; --accent:#0a84ff; --tag:#2c2c2e; } }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif; font-size:16px; letter-spacing:-.01em; line-height:1.5; }
.masthead, main, footer { width:min(100% - 2rem, 760px); margin-inline:auto; }
.masthead { display:flex; gap:.75rem; align-items:baseline; padding:2.5rem 0 1.5rem; }
h1 { margin:0; font-size:clamp(1.65rem,6vw,2.25rem); letter-spacing:-.045em; line-height:1; }.masthead p { margin:0; color:var(--muted); }
.site-nav { display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:.75rem; margin:0 0 2rem; }.nav-card { display:grid; gap:.2rem; padding:1rem; border:1px solid var(--line); border-radius:.4rem; background:var(--surface); color:inherit; text-decoration:none; }.nav-card:hover { border-color:var(--accent); }.nav-card strong { font-size:1rem; font-weight:650; }.nav-card small { color:var(--muted); }.nav-card:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }.section-title { margin:0 0 .75rem; font-size:1.3rem; letter-spacing:-.025em; }
.filters { display:flex; flex-wrap:wrap; gap:.75rem; align-items:center; margin:0 0 1rem; } label { font-weight:600; }
select { min-height:2.65rem; padding:.45rem .7rem; border:1px solid var(--line); border-radius:.25rem; background:var(--surface); color:var(--ink); font:inherit; }#activity-count { margin:0 0 0 auto; color:var(--muted); }
.activity-grid { border-top:1px solid var(--line); }.activity-card { border:0; border-bottom:1px solid var(--line); background:var(--surface); color:inherit; }.activity-card[open] { background:var(--tag); }.activity-card summary { display:flex; align-items:center; gap:.75rem; min-height:4rem; padding:.75rem .25rem; cursor:pointer; list-style:none; }.activity-card summary::-webkit-details-marker { display:none; }.activity-emoji { display:grid; place-items:center; width:2.35rem; height:2.35rem; flex:0 0 auto; border-radius:.3rem; background:var(--tag); font-size:1.15rem; }.activity-card[open] .activity-emoji { background:var(--surface); }.card-copy { display:grid; gap:.05rem; min-width:0; }.card-copy strong { font-size:1rem; font-weight:650; }.card-copy small { color:var(--muted); }.arrow { margin-left:auto; color:var(--muted); transition:transform .18s ease; }.activity-card[open] .arrow { transform:rotate(180deg); }.card-details { padding:.05rem .25rem 1rem 3.1rem; border-top:1px solid var(--line); }.card-details p { margin:.75rem 0 0; color:var(--muted); font-size:.9rem; }.activity-meta { display:grid; gap:.15rem; }.activity-family { color:var(--ink) !important; }.card-actions { margin-top:.8rem; }.activity-link { color:var(--accent); font-size:.9rem; font-weight:650; text-decoration:none; }.activity-link:hover { text-decoration:underline; }.activity-card summary:focus-visible,.activity-link:focus-visible,select:focus-visible { outline:3px solid var(--accent); outline-offset:3px; } .error { color:var(--muted); }footer { padding:2rem 0 3rem; color:var(--muted); font-size:.85rem; }
@media (max-width:520px) { .masthead { display:block; padding-top:1.5rem; }.masthead p { margin-top:.25rem; } #activity-count { width:100%; margin-left:0; } }@media print { .filters,footer { display:none; } body { background:#fff; color:#000; } .masthead { padding-top:0; } }