html,body,#root{height:100%;margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.app-container{display:flex;flex-direction:column;height:100vh;width:100vw}.example-selector{background:linear-gradient(135deg,#667eea,#764ba2);padding:1rem;box-shadow:0 4px 6px #0000001a}.selector-title{color:#fff;font-size:1.75rem;margin:0 0 1.5rem;text-align:center}.example-cards{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}.example-card{border:2px solid transparent;border-radius:12px;padding:1.25rem 1.5rem;cursor:pointer;transition:all .3s ease;min-width:200px;text-align:left;background:#f5f5f5;color:#333}.example-card:hover{transform:translateY(-4px)}.example-card.active{background:linear-gradient(135deg,#f093fb,#f5576c);border-color:#fff;color:#fff;transform:translateY(-2px);box-shadow:0 6px 20px #0003}.card-title{font-size:1.125rem;margin:0 0 .5rem}.card-description{font-size:.875rem;margin:0;color:inherit}.canvas-container{flex:1;overflow:hidden;position:relative;width:100%;height:100%}.canvas-container>canvas{width:100%;height:100%;display:block}.canvas-controls{position:absolute;top:20px;left:20px;z-index:10;display:flex;gap:10px;flex-wrap:wrap}.control-button{padding:10px 20px;background:#ffffffe6;border:2px solid rgba(102,126,234,.5);border-radius:8px;cursor:pointer;font-size:14px;font-weight:600;color:#667eea;transition:all .3s ease;box-shadow:0 4px 6px #0000001a}.control-button:hover{background:#667eeae6;color:#fff;transform:translateY(-2px);box-shadow:0 6px 12px #00000026}.control-button:active{transform:translateY(0)}.control-button.active{background:#4caf50e6;color:#fff;border-color:#4caf50;box-shadow:0 4px 8px #4caf504d}.control-button.active:hover{background:#4caf50;box-shadow:0 6px 12px #4caf5066}