/* Keep the resource library's monochrome arcade frame around the Storybook deck. */
.resource-preview { padding:28px; border:1px solid var(--card-border); text-align:center; }
.storybook-mark { display:block; margin:0 auto 20px; }
.preview-title { font-size:30px; line-height:1.2; color:var(--fg-0); margin-bottom:24px; }
.context-flow { list-style:none; margin:0; padding:0; }
.context-flow li { padding:8px 12px; border:1px solid var(--card-border-strong); color:var(--fg-0); }
.context-flow li + li::before { content:'↓'; display:block; color:var(--fg-2); margin-top:-8px; }
.preview-note { margin-top:20px; color:var(--fg-2); font-size:19px; }
.secondary-download { margin-top:12px; background:transparent; }
.open-presentation { display:block; margin-top:20px; text-decoration:underline; }
.guide-takeaways > p { margin:16px 0 24px; }
.guide-takeaways h2 { margin-top:36px; }
.guide-takeaways a { text-decoration:underline; }
@media(max-width:700px) { .preview-title { font-size:26px; } .resource-preview { padding:22px; } }
.skip-link { position:absolute; top:8px; left:8px; z-index:10001; padding:10px 16px; background:var(--bg-1); border:1px solid var(--fg-0); transform:translateY(-150%); }
.skip-link:focus { transform:translateY(0); }
@media(prefers-reduced-motion:reduce) { body.is-booted .screen, body.is-booted .topbar, body.is-booted .bottombar { animation:none; } body::before { animation:none; } }
/* Let long resource pages scroll with the document rather than a fixed-height body. */
html, body { height:auto; min-height:100%; overflow-x:clip; }