.demo-guide { max-width: 1080px; line-height: 1.75; }
.demo-guide-intro { max-width: 760px; font-size: 19px; color: var(--muted); }
.demo-guide a { text-decoration: underline; text-underline-offset: 3px; }
.demo-guide a:hover { color: var(--accent); }
.demo-guide a:focus-visible, .demo-guide-table:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }
.demo-guide-jumps { display: flex; flex-wrap: wrap; gap: 10px 26px; padding-block: 18px; border-block: 1px solid var(--line); margin-block: 28px 36px; }
.demo-guide section { margin-block: 36px; scroll-margin-top: 24px; }
.demo-guide h2 { font-size: 32px; margin-bottom: 16px; }
.demo-guide h3 { font-size: 24px; margin-bottom: 10px; }
.demo-guide li { margin-bottom: 12px; }
.demo-guide-note { background: var(--cream, #f4f2eb); border-left: 3px solid var(--accent); padding: 16px 20px; }
.demo-guide-table { overflow-x: auto; }
.demo-guide table { width: 100%; border-collapse: collapse; text-align: left; font-size: 15px; }
.demo-guide th, .demo-guide td { padding: 18px; border-bottom: 1px solid var(--line); vertical-align: top; }
.demo-guide thead { background: #edf0e9; }
.demo-guide th:first-child { width: 22%; }
.demo-guide td:last-child { width: 25%; }
.demo-guide-event-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.demo-guide-event-grid > div { border: 1px solid var(--line); padding: 24px; }
@media (max-width: 600px) {
    .demo-guide-intro { font-size: 17px; }
    .demo-guide h2 { font-size: 28px; }
    .demo-guide table { font-size: 15px; }
    .demo-guide thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .demo-guide tbody tr { display: grid; gap: 10px; border-bottom: 1px solid var(--line); padding-block: 20px; }
    .demo-guide th, .demo-guide td { display: block; padding: 0; border: 0; }
    .demo-guide th:first-child, .demo-guide td:last-child { width: auto; }
    .demo-guide-event-grid { grid-template-columns: 1fr; gap: 16px; }
}