.playground{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) 340px;grid-template-rows:auto minmax(0,1fr);height:100vh;height:100dvh;overflow:hidden;background:var(--void);color:var(--white)}.playground__backdrop{position:absolute;inset:0;z-index:-1;background:radial-gradient(55% 60% at 38% 48%,rgba(124,92,255,.22),transparent 70%),radial-gradient(45% 50% at 0 100%,rgba(77,0,242,.22),transparent 70%),var(--grad-hero)}.playground__bar{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;height:var(--header-h);padding:0 28px}.playground__home{color:inherit;text-decoration:none}.playground__back{padding:9px 18px;border:1px solid var(--glass-stroke);border-radius:999px;color:var(--white);font-size:13px;font-weight:600;text-decoration:none;transition:background-color .2s}.playground__back:hover{background:rgba(255,255,255,.1)}.playground__stage{position:relative;min-width:0;min-height:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.playground .hero-scene,.playground .hero-scene__canvas{position:absolute;inset:0}.playground .hero-scene canvas{width:100%;height:100%}.playground .hero-scene__canvas{-webkit-mask-image:none;mask-image:none;pointer-events:auto;cursor:-webkit-grab;cursor:grab;touch-action:none;-webkit-touch-callout:none}.playground .hero-scene__canvas.is-dragging{cursor:-webkit-grabbing;cursor:grabbing}.playground .hero-scene:focus-visible{outline:2px solid var(--violet-light);outline-offset:-8px;border-radius:24px}.playground__status{position:absolute;left:50%;top:50%;max-width:320px;transform:translate(-50%,-50%);color:rgba(255,255,255,.8);font-size:15px;text-align:center;pointer-events:none}.playground__status a{color:var(--white);pointer-events:auto}.playground__toast{position:absolute;left:50%;bottom:24px;display:flex;align-items:center;gap:14px;padding:10px 12px 10px 18px;transform:translateX(-50%);border:1px solid var(--glass-stroke);border-radius:999px;background:rgba(12,12,12,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:13px;white-space:nowrap;animation:playground-rise .3s var(--ease-out-3) both}.playground__toast button{padding:6px 14px;border:0;border-radius:999px;background:var(--white);color:var(--violet);font:inherit;font-weight:700;cursor:pointer}@keyframes playground-rise{0%{opacity:0;transform:translate(-50%,10px)}}.playground__panel{min-height:0;margin:0 20px 20px 0;padding:24px 22px;overflow-y:auto;overscroll-behavior:contain;border:1px solid var(--glass-stroke);border-radius:var(--radius-card);background:var(--glass-fill);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.playground__panel h1{font-size:24px;font-weight:700;letter-spacing:-.8px}.playground__intro{margin-top:8px;color:rgba(255,255,255,.78);font-size:13px;line-height:1.55}.playground__actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}.playground__actions button{padding:7px 13px;border:1px solid rgba(255,255,255,.22);border-radius:var(--radius-tab);background:rgba(255,255,255,.05);color:var(--white);font:inherit;font-size:12px;font-weight:600;cursor:pointer;transition:background-color .2s}.playground__actions button:hover:not(:disabled){background:rgba(255,255,255,.12)}.playground__actions button:disabled{opacity:.4;cursor:default}.playground__group{margin-top:22px}.playground__group h2{margin-bottom:6px;color:var(--lilac);font-size:11px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase}.playground__group ul{list-style:none}.playground__switch{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:9px 0;border:0;background:none;color:var(--white);font:inherit;font-size:14px;text-align:left;cursor:pointer}.playground__switch[aria-checked=false] span{color:rgba(255,255,255,.55)}.playground__switch i{position:relative;flex-shrink:0;width:38px;height:22px;border-radius:999px;background:rgba(255,255,255,.18);transition:background-color .2s}.playground__switch i:after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--white);transition:transform .2s var(--ease-out-3)}.playground__switch[aria-checked=true] i{background:var(--violet-light)}.playground__switch[aria-checked=true] i:after{transform:translateX(16px)}.playground__switch:focus-visible{outline:2px solid var(--violet-light);outline-offset:2px;border-radius:6px}.playground__share{margin-top:24px}.playground__share .btn{width:100%;padding:12px 20px;font-size:13px}.playground__share p{min-height:18px;margin-top:8px;color:rgba(255,255,255,.8);font-size:12px;text-align:center}.playground .hero-scene__canvas.is-moving{cursor:move}.playground__toast b{font-weight:700}.playground__add{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.playground__add button{padding:7px 12px;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:rgba(255,255,255,.05);color:var(--white);font:inherit;font-size:12px;font-weight:600;cursor:pointer;transition:background-color .2s,border-color .2s}.playground__add button:before{content:"+ ";color:var(--lilac)}.playground__add button:hover:not(:disabled){border-color:var(--violet-light);background:rgba(139,92,255,.22)}.playground__add button:disabled{opacity:.4;cursor:default}.playground__range{display:flex;align-items:center;gap:14px;margin-top:8px;font-size:14px}.playground__range input{flex:1 1;min-width:0;accent-color:var(--violet-light)}@media (max-width:860px){.playground{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) minmax(0,44%)}.playground__bar{padding:0 16px}.playground__panel{margin:0;padding:18px 16px 24px;border-width:1px 0 0;border-radius:20px 20px 0 0}.playground__panel h1{font-size:20px}.playground__toast{bottom:12px}}