*{box-sizing:border-box}html,body{margin:0}body{font-family:Roboto Flex,system-ui,sans-serif}m3e-theme{background:var(--md-sys-color-surface);min-height:100vh;color:var(--md-sys-color-on-surface);font-family:Roboto Flex,system-ui,sans-serif;display:block}.topbar{z-index:10;background:var(--md-sys-color-surface-container);border-bottom:1px solid var(--md-sys-color-outline-variant);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 24px;padding:12px 24px;display:flex;position:sticky;top:0}.theme-controls{flex-wrap:wrap;align-items:center;gap:8px 12px;display:flex}.theme-controls>.ctl{width:auto}.theme-controls>m3e-form-field.ctl{width:140px}.theme-controls .ctl-bool{white-space:nowrap}.layout{grid-template-columns:220px minmax(0,1fr);display:grid}.toc{flex-direction:column;align-self:start;max-height:calc(100vh - 90px);padding:16px 8px 32px;display:flex;position:sticky;top:90px;overflow:auto}.toc-group{letter-spacing:.06em;text-transform:uppercase;color:var(--md-sys-color-primary);margin:16px 16px 4px;font-size:12px;font-weight:600}.toc a{color:var(--md-sys-color-on-surface-variant);border-radius:100px;padding:6px 16px;font-size:14px;font-weight:500;text-decoration:none;transition:background .2s,color .2s}.toc a:hover{background:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container)}main{flex-direction:column;gap:20px;min-width:0;padding:8px 24px 64px;display:flex}.group-title{letter-spacing:-.01em;color:var(--md-sys-color-primary);margin:28px 4px 0;font-size:32px;font-weight:700;font-stretch:120%}.card{background:var(--md-sys-color-surface-container-low);border-radius:28px;padding:20px 24px 24px;scroll-margin-top:100px}.card-head{justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:16px;display:flex}.tag{color:var(--md-sys-color-on-surface-variant);font:12px Roboto Mono,monospace}.card-body{grid-template-columns:minmax(0,1fr) 300px;align-items:start;gap:24px;display:grid}.preview-wrap{flex-direction:column;gap:8px;min-width:0;display:flex;position:sticky;top:100px}.preview{background:var(--md-sys-color-surface);border-radius:20px;flex-wrap:wrap;justify-content:center;align-items:center;gap:16px;min-height:200px;padding:32px;display:flex;overflow:hidden}.preview.tall{min-height:380px}.preview.start{justify-content:flex-start;align-items:stretch;padding:0}.preview m3e-slider{width:min(100%,440px)}.preview m3e-slider[orientation=vertical]{width:auto;height:260px}.preview m3e-linear-progress-indicator{width:min(100%,440px)}.preview m3e-shape{--m3e-shape-container-color:var(--md-sys-color-primary)}.readout{text-align:center;width:100%;color:var(--md-sys-color-on-surface-variant);font:13px Roboto Mono,monospace}.code summary{cursor:pointer;color:var(--md-sys-color-on-surface-variant);padding:4px 8px;font-size:13px}.code pre{background:var(--md-sys-color-surface-container-highest);border-radius:16px;max-height:360px;margin:4px 0 0;padding:12px 16px;font:12.5px/1.5 Roboto Mono,monospace;overflow:auto}.controls{grid-template-columns:1fr 1fr;gap:10px 8px;display:grid}.controls>*,.controls>.ctl-bool.wide{grid-column:span 2}.controls>.ctl-bool{grid-column:span 1;gap:8px;min-width:0;font-size:13px}.controls m3e-divider{margin:4px 0}.ctl{width:100%}.ctl-bool,.ctl-color,.inline{cursor:pointer;align-items:center;gap:12px;min-height:40px;font-size:14px;display:flex}.ctl-color input{border:1px solid var(--md-sys-color-outline);cursor:pointer;background:0 0;border-radius:12px;width:40px;height:40px;padding:2px}.ctl-range{flex-direction:column;padding:4px 0;font-size:14px;display:flex}.ctl-range m3e-slider{width:100%}.stack{flex-direction:column;gap:4px;display:flex}.skeleton-demo{align-items:center;gap:16px;display:flex}.shape-gallery{grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:16px;width:100%;margin-top:16px;display:grid}.shape-gallery figure{flex-direction:column;align-items:center;gap:6px;margin:0;display:flex}.shape-gallery m3e-shape{--m3e-shape-size:56px;--m3e-shape-container-color:var(--md-sys-color-tertiary)}.shape-gallery figcaption{color:var(--md-sys-color-on-surface-variant);text-align:center;font-size:11px}@media (width<=960px){.layout{grid-template-columns:1fr}.toc{display:none}.topbar{padding:12px 16px;position:static}main{padding:8px 16px 48px}.card{padding:16px}.card-body{grid-template-columns:1fr}.preview-wrap{position:static}}.preview.corner{justify-content:flex-end;align-items:flex-end}