.activity-layout { display: grid; grid-template-columns: minmax(0, 3fr) minmax(16rem, 2fr); gap: 2rem; align-items: start; }
.activity-layout > * { min-width: 0; }
.activity-steps { padding-left: 1.5rem; }
.activity-steps > li { padding-left: .4rem; margin-bottom: 1.5rem; }
.activity-steps p { margin: .5rem 0; }
.activity-steps pre { padding: .75rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-soft); overflow-x: auto; line-height: 1.5; }
.activity-steps code { font-size: .95rem; }
.activity-example { margin: 0; padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--panel-soft); }
.activity-example svg { display: block; width: 100%; height: auto; }
.activity-example figcaption { color: var(--muted); margin-top: .75rem; }
.launch-links { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin: 1.25rem 0; }
.launch-editor { display: inline-block; padding: .75rem 1.25rem; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--panel-strong); font-weight: 700; }
.activity-note { padding: 1rem 1.25rem; border-left: 3px solid var(--cyan); background: var(--panel-soft); }
.activity-check { padding-left: 1.25rem; }
@media (max-width: 760px) { .activity-layout { grid-template-columns: 1fr; } .activity-example { max-width: 30rem; } }
@media print { .launch-links, .site-nav, .skip-link { display: none; } .activity-layout { display: block; } .activity-example { max-width: 22rem; break-inside: avoid; } .activity-steps > li { break-inside: avoid; } }