/* Original handoff additions. Existing component geometry comes from reference.css. */
.example-nav{display:flex;flex-wrap:wrap;gap:16px 24px;padding-block:24px;border-bottom:1px solid var(--line)}
.example-nav a{min-height:44px;display:inline-flex;align-items:center}
.example-actions{display:flex;align-items:center;flex-wrap:wrap;gap:24px;margin-block-start:32px}
.example-status{min-height:1.45em;margin-block:24px;overflow-wrap:anywhere}
.loading-action span{transform:none!important}
.progress-mark{display:inline-grid;place-items:center;width:18px;height:18px;visibility:hidden}
.loading-action[aria-busy=true] .progress-mark{visibility:visible;animation:progress-turn 900ms linear infinite}
.loading-action[aria-disabled=true]{cursor:progress}
@keyframes progress-turn{to{rotate:1turn}}
.resource-grid h3{margin-block:12px;font-size:30px;overflow-wrap:anywhere}
.resource-grid p,.resource-grid a{overflow-wrap:anywhere}
.resource-grid>article{min-width:0}
.filter-empty .button,.offline-notice .button{margin-block-start:24px}
.notification-query{max-width:480px}
.inline-notification{display:flex;align-items:start;gap:24px;max-width:760px;background:var(--lavender);margin-block:32px}
.inline-notification>div{min-width:0;overflow-wrap:anywhere}
.inline-notification .icon-button{flex:none}
.inline-notification h3{margin-block-end:16px}
.offline-notice{max-width:none;background:var(--yellow);margin-block-end:24px}
.page-intro h1,.page-intro p{overflow-wrap:anywhere}
@media(prefers-reduced-motion:reduce){.progress-mark{animation:none!important}}
@media(forced-colors:active){.inline-notification,.offline-notice{border:1px solid CanvasText}}