.crystalized-ball{position:relative;width:100%;height:100%;overflow:hidden}.strands-container{position:relative;width:100%;height:100%;background:transparent;-webkit-tap-highlight-color:transparent}.strands-container canvas{display:block;width:100%;height:100%}.orb-container{position:relative;z-index:0;width:100%;height:100%;overflow:hidden}.orb-canvas{position:absolute;inset:0;display:block;width:100%;height:100%}.blob-cursor{position:absolute;inset:0;overflow:hidden;pointer-events:none}.blob-cursor-canvas{display:block;width:100%;height:100%}:root{color-scheme:dark;--play-bg: #09090b;--play-fg: #f4f4f5;--play-muted: #a1a1aa;--play-edge: #303036;--play-control: #18181b}:root[data-theme=light]{color-scheme:light;--play-bg: #f8fafc;--play-fg: #18181b;--play-muted: #52525b;--play-edge: #d4d4d8;--play-control: #fff}*{box-sizing:border-box}html,body,#playground-root{width:100%;height:100%;margin:0}body{overflow:hidden;background:var(--play-bg);color:var(--play-fg);font-family:system-ui,sans-serif}button,select{font:inherit;letter-spacing:0}button{cursor:pointer}button:disabled{cursor:default;opacity:.5}button:focus-visible,select:focus-visible,.playground-scene:focus-visible{outline:2px solid #2dd4bf;outline-offset:-3px}.playground{display:grid;grid-template-rows:minmax(0,1fr) auto;width:100%;height:100%}.playground-scene{position:relative;min-width:0;min-height:0;overflow:hidden;touch-action:pan-y;outline:none}.playground-scene>.crystalized-ball,.playground-scene>.strands-container,.playground-scene>.orb-container,.playground-scene>.blob-cursor{position:absolute;inset:0;width:100%;height:100%}.playground-scene canvas{display:block;width:100%;height:100%}.playground-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px;min-height:78px;padding:14px 16px;border-top:1px solid var(--play-edge)}.playground-effect-label{display:flex;min-width:0;max-width:100%;align-items:center;gap:10px;color:var(--play-muted);font-size:13px}.playground-effect-label select{min-width:0;max-width:100%;width:220px;height:38px;padding:0 10px;border:1px solid var(--play-edge);border-radius:6px;color:var(--play-fg);background:var(--play-control);font-size:14px}.playground-swatches{display:flex;align-items:center;gap:10px}.playground-swatch{flex:none;width:24px;height:24px;padding:0;border:3px solid var(--play-bg);border-radius:50%;box-shadow:0 0 0 1px var(--play-edge)}.playground-swatch[aria-pressed=true]{box-shadow:0 0 0 2px var(--play-fg)}.playground-actions{display:flex;gap:6px}.playground-actions button,.playground-unavailable button{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:36px;padding:0 10px;border:1px solid var(--play-edge);border-radius:6px;color:var(--play-fg);background:var(--play-control)}.playground-actions button{width:36px;padding:0}.playground-actions svg,.playground-offline svg,.playground-unavailable svg{width:17px;height:17px}.playground-actions button:hover{border-color:var(--play-muted)}.playground-offline{display:inline-flex;align-items:center;color:var(--play-muted)}.playground-unavailable{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:28px;text-align:center}.playground-unavailable p{max-width:32ch;color:var(--play-muted);line-height:1.6}.playground-notice{position:absolute;bottom:16px;left:50%;max-width:90%;transform:translate(-50%);padding:10px 16px;border-radius:6px;background:var(--play-control);color:var(--play-fg);font-size:14px;text-align:center}@media (max-width: 540px){.playground-toolbar{gap:12px;padding:12px}.playground-effect-label{justify-content:center;flex-basis:100%}.playground-effect-label select{width:220px}}