:root{color:#fafafa;font-synthesis:none;text-rendering:optimizelegibility;background:#000;font-family:Inter,ui-sans-serif,system-ui,sans-serif}*{box-sizing:border-box}html,body,#app{width:100%;min-height:100%;margin:0}body{overflow:hidden}.playground-shell{grid-template-columns:250px minmax(0,1fr);height:100vh;display:grid}.example-sidebar{background:#0a0a0a;border-right:1px solid #ffffff1a;padding:1.25rem .8rem;overflow-y:auto}.brand{color:#fafafa;padding:.4rem .7rem 1.2rem;font-weight:700;text-decoration:none;display:block}.brand small{color:#d4d4d4;letter-spacing:.15em;text-transform:uppercase;margin-top:.2rem;font-size:.67rem;display:block}.example-nav{gap:.2rem;display:grid}.example-link{color:#a1a1a1;border-radius:.45rem;padding:.62rem .7rem;font-size:.86rem;text-decoration:none}.example-link:hover,.example-link.active{color:#fff;background:#262626}.example-main{flex-direction:column;min-width:0;height:100vh;display:flex;overflow-y:auto}.example-header{justify-content:space-between;align-items:flex-start;gap:1rem;padding:1.6rem 2rem 1rem;display:flex}.eyebrow{color:#d4d4d4;letter-spacing:.12em;text-transform:uppercase;font-size:.7rem;font-weight:700}h1,h2,p{margin:0}h1{margin-top:.3rem;font-size:clamp(1.25rem,2vw,1.8rem)}h2{font-size:.9rem}.example-header p{color:#a1a1a1;max-width:760px;margin-top:.45rem;font-size:.86rem;line-height:1.45}button{color:#fafafa;cursor:pointer;background:#1c1c1c;border:1px solid #525252;border-radius:.4rem;padding:.45rem .7rem}#sidebar-toggle{display:none}.preview-layout{flex:1 1 0;grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr) minmax(220px,280px);gap:1rem;min-height:0;padding:0 2rem 1rem;display:grid}.preview-card,.controls-card,.source-card{background:#0f0f0fd9;border:1px solid #ffffff1f;border-radius:.75rem;box-shadow:0 1rem 3rem #0000002e}.preview-card{min-height:260px;position:relative;overflow:hidden}#render-canvas{touch-action:none;outline:none;width:100%;height:100%;min-height:260px;display:block}#fullscreen-toggle{z-index:1;color:#e5e5e5;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0a0a0aa6;border-color:#ffffff4d;position:absolute;top:.7rem;right:.7rem}#gpu-status{color:#a1a1a1;font-size:.75rem;position:absolute;bottom:.7rem;left:.8rem}:-webkit-any(.preview-card:fullscreen,.preview-card:-webkit-full-screen){width:100%;height:100%;min-height:0;box-shadow:none;background:#000;border:0;border-radius:0}:is(.preview-card:fullscreen,.preview-card:fullscreen){width:100%;height:100%;min-height:0;box-shadow:none;background:#000;border:0;border-radius:0}:-webkit-any(.preview-card:fullscreen #render-canvas,.preview-card:-webkit-full-screen #render-canvas){min-height:0}:is(.preview-card:fullscreen #render-canvas,.preview-card:fullscreen #render-canvas){min-height:0}.controls-card{grid-template-rows:auto minmax(0,1fr);gap:.7rem;min-height:0;padding:1rem;display:grid;overflow:hidden}#example-controls{gap:.65rem;min-height:0;display:grid;overflow-y:auto}#example-controls label{color:#d4d4d4;gap:.3rem;font-size:.8rem;display:grid}#example-controls input{width:100%}.generic-control{color:#d4d4d4;gap:.3rem;font-size:.8rem;display:grid}.generic-control select{color:#fafafa;background:#141414;border:1px solid #525252;border-radius:.3rem;padding:.35rem}.source-card{flex:1.15 1 0;grid-template-rows:auto minmax(0,1fr);min-height:240px;margin:0 2rem 2rem;display:grid;overflow:hidden}.source-heading{border-bottom:1px solid #ffffff1a;justify-content:space-between;align-items:center;padding:.7rem 1rem;display:flex}.source-card pre{color:#d4d4d4;white-space:pre;min-height:0;margin:0;padding:1rem;font:.75rem/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;overflow:auto}@media (width<=760px){body{overflow:auto}.playground-shell{height:auto;min-height:100vh;display:block}.example-main{height:auto;min-height:100vh;display:block;overflow:visible}.example-sidebar{z-index:3;width:min(280px,85vw);transition:transform .2s;position:fixed;inset:0 auto 0 0;transform:translate(-100%)}.example-sidebar.open{transform:translate(0)}.example-header{padding:1.2rem 1rem .8rem}#sidebar-toggle{display:block}.preview-layout{grid-template-rows:none;grid-template-columns:1fr;padding:0 1rem 1rem}.preview-card,#render-canvas{min-height:280px}.source-card{min-height:0;margin:0 1rem 1rem}.source-card pre{min-height:220px;max-height:46vh}}#render-canvas:focus-visible{outline-offset:-3px;outline:3px solid #fafafa}.skip-link{z-index:10;color:#000;background:#fafafa;border:1px solid #fafafa;border-radius:.45rem;padding:.55rem .9rem;font-size:.86rem;font-weight:600;text-decoration:none;position:fixed;top:.75rem;left:.75rem;transform:translateY(-300%)}.skip-link:focus{transform:none}.visually-hidden{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.sidebar-scrim{display:none}@media (width<=760px){.sidebar-scrim{z-index:2;pointer-events:none;display:block;position:fixed;inset:0}.sidebar-scrim.open{pointer-events:auto}}@media (prefers-reduced-motion:reduce){.example-sidebar{transition:none}}