.app-intro h1 em { color:var(--muted); font-weight:400; }
.playground-start { display:flex; gap:28px; align-items:center; flex-wrap:wrap; margin:0 0 72px; }
.playground-start > a + a { font-size:14px; }
.browse-bar { display:flex; justify-content:space-between; align-items:center; gap:24px; padding-bottom:32px; border-bottom:1px solid var(--line); }
.browse-bar label { display:flex; flex-direction:column; gap:8px; font-size:12px; color:var(--muted); }
.browse-bar input { width:260px; padding:10px 12px; font-size:14px; }
.topic-group { display:grid; grid-template-columns:1fr 2fr; gap:64px; padding:40px 0; border-bottom:1px solid var(--line); }
.topic-heading { display:flex; gap:16px; align-items:baseline; }
.topic-heading h2 { font-size:24px; }
.topic-list { min-width:0; }
.topic-card { display:grid; grid-template-columns:1fr 24px; padding:16px 0; text-decoration:none; border-bottom:1px solid var(--line); gap:4px 16px; }
.topic-card:first-child { padding-top:0; }
.topic-card:last-child { border-bottom:0; padding-bottom:0; }
.topic-title { font-size:16px; }
.topic-description { grid-column:1; color:var(--muted); font-size:12px; }
.topic-arrow { grid-column:2; grid-row:1/3; align-self:center; color:var(--accent-strong); }
#empty { padding:48px 0; }
@media(max-width:650px) { .topic-group { grid-template-columns:1fr; gap:24px; } .browse-bar { align-items:flex-start; flex-direction:column; } .browse-bar label,.browse-bar input { width:100%; } .playground-start { margin-bottom:48px; } }
.topic-kind { display:inline-block; margin-left:12px; font:11px var(--sans); color:var(--muted); }
/* A compact catalogue of experiments, with variants inside each example. */
.topic-jumps { display:flex; flex-wrap:wrap; gap:8px; padding:24px 0; }
.topic-jumps a { padding:8px 12px; border:1px solid var(--line); font-size:13px; text-decoration:none; }
.topic-jumps a:hover { background:var(--selection); }
.topic-group { display:block; padding:32px 0; scroll-margin-top:24px; }
.topic-heading { margin-bottom:24px; }
.topic-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.topic-card,.topic-card:first-child,.topic-card:last-child { border:1px solid var(--line); padding:20px; align-content:start; gap:10px; transition:background .15s,border-color .15s; }
.topic-card:hover { background:var(--selection); border-color:var(--muted); }
.topic-title { font-size:17px; }
.topic-description { font-size:13px; line-height:1.6; }
.topic-kind { display:block; margin:6px 0 0; font-size:11px; }
.topic-card[hidden],.topic-group[hidden] { display:none; }
@media(max-width:600px) { .topic-list { grid-template-columns:1fr; } .topic-jumps { gap:6px; } .topic-jumps a { font-size:12px; } }

.course-entry { margin:48px 0; border-top:1px solid var(--line); padding-top:24px; }
.course-entry h2 { font-size:28px; margin:12px 0 24px; }
.course-cards { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.course-cards > a { text-decoration:none; color:var(--text); border:1px solid var(--line); padding:24px; }
.course-cards > a:hover { border-color:var(--text); }
.course-cards h3 { font:normal 25px var(--serif); margin:12px 0; }
.course-cards p { font-size:14px; color:var(--muted); margin:0; }
@media(max-width:650px) { .course-cards { grid-template-columns:1fr; gap:12px; } }
.playground-intro { padding-bottom:32px; }
.browse-bar { align-items:end; padding:0 0 28px; }
.browse-bar .topic-jumps { padding:0; max-width:700px; }
.course-section { padding:44px 0; }
.course-section-heading { max-width:740px; margin-bottom:24px; }
.course-section-heading h2 { font:normal clamp(27px,3vw,38px)/1.2 var(--serif); margin:12px 0; }
.course-section-heading p { font-size:15px; line-height:1.6; color:var(--muted); }
.course-reading { margin:0 0 24px; font-size:13px; color:var(--muted); max-width:740px; }
.course-reading summary { cursor:pointer; color:var(--text); }
.course-reading p { line-height:1.7; }
.course-topic h3 { font:normal 23px var(--serif); margin:32px 0 20px; }
.course-topic[hidden] { display:none; }
@media(min-width:1100px){ .course-section > .topic-list { grid-template-columns:repeat(3,minmax(0,1fr)); } }