/* Clearly labeled examples, with native swipe and keyboard scrolling. */
.activity-preview{--activity-bg:#101d36;--activity-panel:#13213f;--activity-line:#304266;--activity-ink:#f5efe0;--activity-muted:#c0bdaf;--activity-gold:#f2c94c;--activity-glow:#d4a73c0c;padding-block:40px 32px;background:linear-gradient(115deg,var(--activity-glow),transparent 65%),var(--activity-bg);border-block:1px solid var(--activity-line)}
.activity-preview--muzic{--activity-bg:#151008;--activity-panel:#20190e;--activity-line:#635030;--activity-ink:#fffaf0;--activity-muted:#c4b9a6;--activity-gold:#f6d079;--activity-glow:#f6d07909}
.activity-heading{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:23px}
.activity-heading h2{font-size:clamp(1.75rem,3vw,2.35rem);line-height:1.15;letter-spacing:-.035em;margin:10px 0 0;color:var(--activity-ink);background:none;-webkit-text-fill-color:currentColor}
.activity-label{display:inline-flex;align-items:center;gap:8px;padding:4px 9px;border:1px solid var(--activity-line);border-radius:5px;color:var(--activity-gold);font-size:.6875rem;font-weight:600;letter-spacing:.065em;text-transform:uppercase;line-height:1.6}
.activity-label:before{content:'';width:6px;height:6px;background:var(--activity-gold);border-radius:2px}
.activity-heading>p{max-width:400px;color:var(--activity-muted);font-size:.875rem;line-height:1.7;margin:0}
.activity-track{display:flex;gap:16px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:0;scrollbar-width:thin;scrollbar-color:var(--activity-line) transparent;list-style:none;padding:4px 1px 14px;margin:0;outline-offset:5px}
.activity-track:focus-visible{outline:2px solid var(--activity-gold);border-radius:8px}
.activity-card{--activity-accent:#83d8b7;flex:0 0 calc((100% - 32px)/3);min-width:0;display:flex;flex-direction:column;scroll-snap-align:start;border:1px solid var(--activity-line);border-radius:16px;padding:22px;background:var(--activity-panel);position:relative;overflow:hidden}
.activity-card:before{content:'';position:absolute;left:0;top:22px;bottom:22px;width:3px;background:var(--activity-accent);border-radius:0 3px 3px 0}
.activity-card--school{--activity-accent:#85c8f0}.activity-card--reading{--activity-accent:#bdadff}.activity-card--gold{--activity-accent:var(--activity-gold)}
.activity-card-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px}
.activity-avatar{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--activity-line);border-radius:11px;color:var(--activity-accent);font-size:1rem;font-weight:700;line-height:1}
.activity-avatar svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.activity-kind{font-size:.625rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;line-height:1.6;color:var(--activity-muted)}
.activity-card h3{color:var(--activity-ink);font-family:inherit;font-size:1rem;font-weight:600;line-height:1.45;letter-spacing:-.015em;overflow-wrap:anywhere;margin:0 0 7px}
.activity-card>p{font-size:.8125rem;line-height:1.65;color:var(--activity-muted);margin:0 0 22px}
.activity-award{display:flex;flex-wrap:wrap;align-items:baseline;gap:5px 8px;margin-top:auto;color:var(--activity-accent);font-size:.875rem;line-height:1.5}
.activity-award strong{font-size:1.45rem;line-height:1.2;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.025em}
.activity-award--school strong{font-size:1rem}
.activity-award small{flex-basis:100%;color:var(--activity-muted);font-size:.6875rem;margin-top:2px}
.activity-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-top:14px}
.activity-bottom>p{max-width:670px;font-size:.75rem;line-height:1.7;color:var(--activity-muted);margin:0}
.activity-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.activity-controls button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;border:1px solid var(--activity-line);border-radius:8px;background:var(--activity-panel);color:var(--activity-ink);font:inherit;font-size:.8125rem;padding:9px 13px;cursor:pointer;line-height:1.5}
.activity-controls button:hover{border-color:var(--activity-gold);color:var(--activity-gold)}
.activity-controls button:focus-visible{outline:2px solid var(--activity-gold);outline-offset:4px}
.activity-controls [data-activity-status]{color:var(--activity-muted);font-size:.6875rem;padding-right:6px}
@media(max-width:1000px){.activity-card{flex-basis:calc((100% - 16px)/2)}.activity-heading>p{max-width:330px}.activity-bottom{gap:14px}}
@media(max-width:650px){.activity-preview{padding-block:29px 24px}.activity-heading{display:block;margin-bottom:19px}.activity-heading>p{max-width:none;margin-top:12px}.activity-card{flex-basis:calc(100% - 22px);padding:22px}.activity-heading h2{font-size:1.8rem}.activity-bottom{align-items:flex-start;flex-direction:column}.activity-controls [data-activity-status]{flex-basis:100%;margin-bottom:2px}.activity-kind{font-size:.6875rem}}
@media(prefers-reduced-motion:reduce){.activity-track{scroll-behavior:auto}}
@media print{.activity-track{flex-wrap:wrap;overflow:visible}.activity-card{flex-basis:calc((100% - 16px)/2);break-inside:avoid}.activity-controls{display:none!important}}