*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{width:100%;height:100%;overflow:hidden}body{color:#e0e0e0;-webkit-font-smoothing:antialiased;background:#0a0a0f;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}a{color:inherit;text-decoration:none}.gallery{min-height:100vh;padding:4rem 2rem;overflow-y:auto}.gallery-header{text-align:center;margin-bottom:3rem}.gallery-header h1{letter-spacing:-.02em;margin-bottom:.5rem;font-size:2.5rem;font-weight:700}.gallery-header p{color:#888;font-size:1.1rem}.gallery-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem;max-width:1200px;margin:0 auto;display:grid}.demo-card{cursor:pointer;background:#141420;border:1px solid #222;border-radius:12px;transition:transform .2s,border-color .2s,box-shadow .2s;display:block;overflow:hidden}.demo-card:hover{border-color:var(--accent);box-shadow:0 8px 30px color-mix(in srgb, var(--accent) 25%, transparent);transform:translateY(-4px)}.demo-card-preview{background:#0a0a0f;height:180px;position:relative;overflow:hidden}.demo-card-thumb{object-fit:cover;width:100%;height:100%;transition:transform .3s}.demo-card:hover .demo-card-thumb{transform:scale(1.05)}.demo-card-info{padding:1rem 1.25rem}.demo-card-info h3{margin-bottom:.25rem;font-size:1.1rem;font-weight:600}.demo-card-info p{color:#888;font-size:.85rem;line-height:1.4}.viewer{background:#000;position:fixed;inset:0}.viewer-canvas{width:100%!important;height:100%!important}.viewer-overlay{pointer-events:none;flex-direction:column;justify-content:space-between;padding:1.5rem;transition:opacity .4s;display:flex;position:fixed;inset:0}.viewer-overlay.visible{opacity:1}.viewer-overlay.hidden{opacity:0}.viewer-overlay:hover{opacity:1}.overlay-top{justify-content:flex-start;display:flex}.overlay-bottom{align-items:flex-end;gap:1rem;display:flex}.back-button{pointer-events:auto;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#ddd;background:#0009;border-radius:8px;padding:.5rem 1rem;font-size:.9rem;transition:background .2s}.back-button:hover{background:#ffffff26}.nav-button{pointer-events:auto;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#ddd;white-space:nowrap;background:#0009;border-radius:8px;padding:.5rem 1rem;font-size:.85rem;transition:background .2s}.nav-button:hover{background:#ffffff26}.nav-next{margin-left:auto}.overlay-info{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#0009;border-radius:10px;flex:1;max-width:400px;padding:1rem 1.25rem}.overlay-info h2{margin-bottom:.25rem;font-size:1.2rem;font-weight:600}.overlay-info p{color:#aaa;font-size:.85rem;line-height:1.4}.fallback-notice{margin-top:.5rem;font-style:italic;color:#f0ad4e!important}.viewer-message{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:.5rem;height:100vh;display:flex}.viewer-message h2{font-size:1.5rem}.viewer-message p{color:#888}.viewer-message a{color:#6af;margin-top:1rem;text-decoration:underline}.webgpu-required-block{background:#000;flex-direction:column;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.webgpu-required-bg{object-fit:cover;opacity:.2;filter:blur(8px);pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.webgpu-required-content{text-align:center;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#000000b3;border-radius:12px;max-width:500px;padding:2rem;position:relative}.webgpu-required-content h2{margin-bottom:.75rem;font-size:1.5rem;font-weight:600}.webgpu-required-content p{color:#aaa;font-size:.9rem;line-height:1.5}.webgpu-required-hint{margin-top:.75rem;font-style:italic;color:#f0ad4e!important}.webgpu-required-content .back-button{margin-top:1.25rem;display:inline-block}.webgpu-required-nav{justify-content:space-between;display:flex;position:fixed;bottom:1.5rem;left:1.5rem;right:1.5rem}.webgpu-badge{color:var(--accent);text-transform:uppercase;letter-spacing:.05em;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#000000b3;border-radius:4px;padding:.2rem .5rem;font-size:.65rem;font-weight:700;position:absolute;top:.5rem;right:.5rem}@media (width<=768px){.gallery{padding:2rem 1rem}.gallery-header h1{font-size:1.8rem}.gallery-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1rem}}@media (width<=480px){.gallery-grid{grid-template-columns:1fr}}