.demo-page{background:var(--paper);color:var(--ink)}
.demo-shell{max-width:1200px;margin:0 auto;padding:64px 32px 80px}
.demo-intro{display:grid;grid-template-columns:1.25fr 1fr;gap:88px;align-items:center;padding-bottom:64px;border-bottom:1px solid var(--line)}
.demo-intro h1{font-size:clamp(38px,4.5vw,60px);line-height:1.22;letter-spacing:-.03em;color:var(--green-ink);margin:0 0 26px}
.demo-intro p{max-width:62ch;line-height:1.9;margin:0 0 18px;font-size:18px}
.demo-intro .demo-safety{font-size:14px;color:var(--muted)}
.demo-start{padding:28px;background:var(--good-bg)}
.demo-start h2{font-size:23px;line-height:1.5;color:var(--green-ink);margin-bottom:14px}
.demo-start p{font-size:15px}.demo-start p:last-child{margin-bottom:0}
.demo-enter{display:inline-flex;align-items:center;justify-content:center;min-height:48px;background:var(--green);color:#fff;padding:12px 22px;margin:2px 0 20px;line-height:1.5}
.demo-enter:hover{background:var(--green-ink)}
.demo-section-head{padding-top:48px;margin-bottom:24px}.demo-section-head h2{font-size:28px;color:var(--green-ink);line-height:1.5;margin-bottom:10px}.demo-section-head p{line-height:1.8;color:var(--muted)}
.demo-password{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:24px;line-height:1.8}.demo-password code{font-size:17px;overflow-wrap:anywhere;color:var(--green-ink)}
.demo-copy{border:1px solid var(--line-strong);background:transparent;color:var(--green-ink);padding:7px 12px;min-height:38px;cursor:pointer;font:inherit;font-size:13px}.demo-copy:hover{background:var(--good-bg)}
.demo-table{overflow-x:auto}.demo-table table{width:100%;border-collapse:collapse;text-align:left;line-height:1.8}.demo-table th,.demo-table td{padding:17px 18px;border-bottom:1px solid var(--line);vertical-align:middle}.demo-table thead{background:var(--good-bg)}.demo-table tbody th{font-weight:550;min-width:135px}.demo-table td code{display:inline-block;margin-right:14px;overflow-wrap:anywhere;font-size:15px}.demo-table td:last-child{font-size:14px;color:var(--muted)}
.demo-scenario-nav{display:flex;gap:12px 28px;flex-wrap:wrap;padding:48px 0 20px}.demo-scenario-nav a,.demo-end a{color:var(--green);text-decoration:underline;text-underline-offset:5px;line-height:1.9}
.demo-flow{line-height:1.9;color:var(--muted);padding-bottom:28px}
.demo-scenario{display:grid;grid-template-columns:1fr 1.8fr;gap:64px;padding:42px 0;border-top:1px solid var(--line);scroll-margin-top:84px}.demo-scenario h2{font-size:27px;line-height:1.5;color:var(--green-ink);margin-bottom:12px}.demo-scenario-title p{color:var(--muted);font-size:15px;line-height:1.8}.demo-scenario p{line-height:1.9;max-width:72ch;margin-bottom:18px}.demo-scenario h3{font-size:16px;margin:24px 0 8px}.demo-scenario .demo-lead{font-size:19px;color:var(--green-ink)}.demo-scenario .demo-boundary{font-size:14px;color:var(--muted);margin:22px 0 0}
.demo-end{border-top:1px solid var(--line);padding-top:42px}.demo-end h2{font-size:27px;color:var(--green-ink);margin-bottom:16px}.demo-end p{max-width:72ch;line-height:1.9;margin-bottom:20px}.demo-end a{margin-right:26px}.demo-page :focus-visible{outline:2px solid var(--green);outline-offset:4px}.demo-page ::selection{background:#dce8d8;color:#14372a}
@media(max-width:900px){.demo-intro{gap:36px}.demo-scenario{gap:32px;grid-template-columns:1fr 1.5fr}.demo-page .site-nav{gap:14px;font-size:13px}}
@media(max-width:640px){.demo-shell{padding:32px 20px 52px}.demo-intro{grid-template-columns:1fr;gap:22px;padding-bottom:32px}.demo-start{padding:22px}.demo-section-head{padding-top:32px}.demo-password{gap:10px}.demo-table th,.demo-table td{padding:12px 9px}.demo-table table{min-width:580px}.demo-scenario{grid-template-columns:1fr;gap:14px;padding:30px 0}.demo-scenario h2{font-size:24px}.demo-scenario-title p{margin-bottom:0}.demo-scenario-nav{padding-top:32px;gap:10px 20px}.demo-flow{font-size:14px}.demo-end h2{font-size:24px}}
.demo-shell>section{scroll-margin-top:90px}.demo-shell .demo-boundary{font-size:14px;line-height:1.9;color:var(--muted);margin:20px 0}.demo-table a,.demo-download a{color:var(--green);text-decoration:underline;text-underline-offset:4px}.demo-table audio{display:block;width:240px;max-width:100%;margin-bottom:10px}.demo-download{line-height:1.9;margin:24px 0}.demo-table td{max-width:50ch}
@media(max-width:640px){#roles .demo-table table,#delivery .demo-table table,#formats .demo-table table{min-width:0}#roles .demo-table thead,#delivery .demo-table thead,#formats .demo-table thead{display:none}#roles .demo-table tr,#delivery .demo-table tr,#formats .demo-table tr{display:block;padding:18px 0;border-bottom:1px solid var(--line)}#roles .demo-table th,#roles .demo-table td,#delivery .demo-table th,#delivery .demo-table td,#formats .demo-table th,#formats .demo-table td{display:block;border:0;padding:5px 0;max-width:none}#formats .demo-table audio{width:100%;max-width:300px}}