body{color:#e0e0e0;background:#1a1a1a;margin:20px;font-family:sans-serif}a{color:#8af}.page-list{background:#2a2a2a;border-radius:8px;max-width:680px;margin:0;padding:8px 24px;font-size:1.2rem;line-height:1.6;list-style:none}.page-list li{padding:12px 0}.page-list li+li{border-top:1px solid #383838}.page-list a{font-weight:600}wgsl-play{width:128px;height:128px;margin-bottom:20px;display:block}wgsl-edit{height:200px;margin-bottom:12px;display:block}.controls{margin-bottom:10px}button{margin-right:8px;padding:6px 12px}.section{background:#2a2a2a;border-radius:8px;margin-bottom:30px;padding:15px}h3{margin-top:0}pre{background:#333;padding:10px;font-size:12px;overflow-x:auto}.demo{flex-wrap:wrap;align-items:flex-start;gap:12px 16px;display:flex}.demo>h3,.demo>p,.demo>.controls,.demo>pre{flex-basis:100%}.demo>h3,.demo>p{margin:0}.demo>wgsl-play{order:1;margin-bottom:0}.demo>.source-panel{order:2}.demo>pre{order:3}.source-panel[open]{flex:560px;min-width:320px;max-width:960px}.source-panel wgsl-edit{width:100%;height:auto;max-height:70vh;margin-bottom:0}.source-panel summary{cursor:pointer;color:#8af;-webkit-user-select:none;user-select:none;background:#3a3a3a;border-radius:4px;width:max-content;padding:6px 12px}.source-panel[open] summary{margin-bottom:8px}nav.test-nav{margin-bottom:30px}nav.test-nav a{color:#8af;margin-right:16px}