.corrugator-animated-guide { --guide-ink:#16313f; --guide-muted:#526878; --guide-line:#dce6ee; color:var(--guide-ink); overflow-wrap:anywhere; }
.corrugator-animated-guide .guide-lead { font-size:1.1em; line-height:1.85; }
.corrugator-animated-guide .guide-credit { color:var(--guide-muted); font-size:.85em; }
.corrugator-animated-guide .guide-toc { padding:1.25rem 1.5rem; margin:1.75rem 0; background:#f1f6fa; border:1px solid var(--guide-line); border-radius:12px; }
.corrugator-animated-guide .guide-toc ol { padding-left:1.4rem; margin:.6rem 0 0; columns:2; column-gap:2rem; font-size:.9em; }
.corrugator-animated-guide .guide-toc li { break-inside:avoid; margin:0 0 .5rem; }
.corrugator-animated-guide a { color:#1d4ed8; text-underline-offset:3px; }
.corrugator-animated-guide .guide-toolbar { display:flex; gap:1rem; align-items:center; justify-content:space-between; flex-wrap:wrap; margin:1.5rem 0; font-size:.85em; color:var(--guide-muted); }
.corrugator-animated-guide .guide-section { scroll-margin-top:120px; }
.corrugator-animated-guide .guide-section h2 { font-size:clamp(1.3rem,3vw,1.7rem); line-height:1.5; margin:3rem 0 1.25rem; padding-bottom:.75rem; border-bottom:1px solid var(--guide-line); }
.corrugator-animated-guide .guide-keypoint { border-left:3px solid #2c6a8d; padding:.85rem 1.1rem; margin:1.5rem 0; background:#f2f7fa; font-weight:600; }
.corrugator-animated-guide .guide-media { margin:1.75rem 0 2.5rem; border:1px solid var(--guide-line); border-radius:12px; overflow:hidden; background:#fff; }
.corrugator-animated-guide .guide-media-heading { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.9rem 1rem; background:#f5f8fb; }
.corrugator-animated-guide .guide-media-heading h3 { font-size:1rem; line-height:1.5; margin:0; color:var(--guide-ink); }
.corrugator-animated-guide .guide-status { font-size:.75rem; color:var(--guide-muted); flex-shrink:0; }
.corrugator-animated-guide .guide-media img { display:block; width:100%; height:auto; max-width:100%; object-fit:contain; margin:0; border-radius:0; }
.corrugator-animated-guide .guide-media-actions { display:flex; gap:.65rem 1rem; align-items:center; flex-wrap:wrap; padding:.8rem 1rem; border-top:1px solid var(--guide-line); font-size:.8em; }
.corrugator-animated-guide .guide-control { border:1px solid #bfd1e0; border-radius:6px; padding:.5rem .85rem; background:#fff; color:#1b4d6c; font:inherit; font-weight:600; line-height:1.4; cursor:pointer; }
.corrugator-animated-guide .guide-control[aria-pressed="true"] { background:#e9f3fa; border-color:#669dc2; }
.corrugator-animated-guide .guide-control:disabled { opacity:.55; cursor:default; }
.corrugator-animated-guide [hidden] { display:none!important; }
.corrugator-animated-guide .guide-media figcaption { padding:0 1rem 1rem; color:var(--guide-muted); font-size:.84em; line-height:1.75; }
.corrugator-animated-guide .guide-media figcaption p { margin:0 0 .5rem; }
.corrugator-animated-guide .guide-media figcaption small { font-size:.85em; }
.corrugator-animated-guide .guide-flow { display:flex; align-items:stretch; gap:.5rem; flex-wrap:wrap; padding:1rem; background:#f1f6fa; border-radius:8px; margin:1.5rem 0; font-size:.85em; }
.corrugator-animated-guide .guide-flow span { background:#fff; border:1px solid var(--guide-line); border-radius:6px; padding:.55rem .7rem; }
.corrugator-animated-guide .guide-flow b { align-self:center; color:#537b96; }
.corrugator-animated-guide .guide-related { margin-top:2rem; padding-top:1.5rem; border-top:1px solid var(--guide-line); }
.corrugator-animated-guide .guide-related ul { font-size:.9em; }
.corrugator-animated-guide .guide-dialog { width:min(1100px,94vw); max-height:94vh; padding:0; color:var(--guide-ink); background:#fff; border:1px solid var(--guide-line); border-radius:12px; overflow:auto; }
.corrugator-animated-guide .guide-dialog::backdrop { background:rgb(10 26 40 / 80%); }
.corrugator-animated-guide .guide-dialog-top { display:flex; justify-content:space-between; gap:1rem; align-items:center; padding:.85rem 1rem; }
.corrugator-animated-guide .guide-dialog-top h2 { border:0; padding:0; margin:0; font-size:1.1rem; }
.corrugator-animated-guide .guide-dialog img { display:block; width:100%; height:auto; max-height:72vh; object-fit:contain; margin:0; }
.corrugator-animated-guide .guide-dialog-actions { display:flex; align-items:center; flex-wrap:wrap; gap:1rem; padding:1rem; font-size:.85em; }
.corrugator-animated-guide :is(button,a):focus-visible { outline:3px solid #2563eb; outline-offset:3px; }
@media(max-width:600px) { .corrugator-animated-guide .guide-toc ol { columns:1; } .corrugator-animated-guide .guide-toc { padding:1rem; } .corrugator-animated-guide .guide-media-heading { gap:.5rem; align-items:flex-start; flex-direction:column; } .corrugator-animated-guide .guide-media-actions { gap:.65rem; } }