/* demo.html page layout. Shared values live in tokens.css. */
body{margin:0;background:var(--color-page);color:var(--color-text);font:var(--text-16) var(--font-document)}main{max-width:1000px;margin:32px auto;padding:24px}a{color:var(--color-accent-text)}header{display:flex;justify-content:space-between;gap:16px}h1{font-size:var(--text-30);display:flex;align-items:center;gap:12px}p{color:var(--color-text-muted);line-height:1.7}video{display:block;width:100%;border-radius:var(--radius-dialog);background:var(--color-surface);border:1px solid var(--color-border-soft)}footer{text-align:center;margin:32px 0;font-size:var(--text-12);color:var(--color-text-muted)}@media(max-width:600px){main{margin:0;padding:20px}h1{font-size:var(--text-26)}}

.demo-gallery{margin-top:32px}.demo-gallery h2{font-size:var(--text-20);font-weight:var(--weight-medium)}.demo-gallery details{padding:16px 0;border-bottom:1px solid var(--color-border)}.demo-gallery summary{cursor:pointer;font-size:var(--text-16);font-weight:var(--weight-medium)}.demo-gallery figure{margin:16px 0 0}.demo-gallery img{display:block;width:auto;max-width:100%;height:auto;border:1px solid var(--color-border);border-radius:var(--radius-control);box-sizing:border-box}.demo-gallery figcaption{margin-top:10px;font-size:var(--text-14);line-height:1.7;color:var(--color-text-muted)}