:root{color:#f6efe5;background:radial-gradient(circle at top,rgba(250,198,93,.22),transparent 30%),linear-gradient(160deg,#111827,#132238 45%,#1f2937);font-family:Avenir Next,PingFang SC,Hiragino Sans GB,sans-serif}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100%}body{min-height:100vh}button,input{font:inherit}button{border:0;cursor:pointer}.app-shell{position:relative;min-height:100vh;padding:20px}.config-trigger{position:absolute;top:24px;left:24px;z-index:3;display:inline-flex;align-items:center;gap:12px;padding:12px 18px;border-radius:999px;color:#f9f1e6;background:#090e19b8;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:inset 0 1px #ffffff14,0 12px 30px #00000042;transition:transform .16s ease,background .16s ease}.config-trigger:hover{background:#111827db;transform:translateY(-1px)}.config-trigger__icon{display:inline-grid;gap:3px}.config-trigger__icon span{display:block;width:16px;height:2px;border-radius:999px;background:#ffb65d}.stage{position:relative;overflow:hidden;min-height:calc(100vh - 40px);border-radius:32px;border:1px solid rgba(255,255,255,.12);background:radial-gradient(circle at 20% 20%,rgba(255,255,255,.14),transparent 0 24px),linear-gradient(180deg,#ffffff0f,#ffffff05);box-shadow:inset 0 1px #ffffff14,0 24px 70px #00000047}.stage:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:28px 28px;pointer-events:none}.ball{position:absolute;top:0;left:0;border-radius:999px;isolation:isolate;overflow:visible;will-change:transform;pointer-events:none}.ball:before,.ball:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit}.burst-cloud{position:absolute;top:0;left:0;pointer-events:none}.burst-piece{position:absolute;top:50%;left:50%;width:18%;height:18%;margin-left:-9%;margin-top:-9%;border-radius:999px;animation:burst-out .82s ease-out forwards}.burst-piece--basketball{background:#f28b30;box-shadow:0 0 0 2px #543120}.burst-piece--tennis{background:#b7e34a;box-shadow:0 0 0 2px #365722}.burst-piece--furry{background:#f7a2ad;box-shadow:0 0 0 2px #634080}.burst-piece--bird{background:#7fc9fb;box-shadow:0 0 0 2px #295070}.burst-piece--yarn{background:#ffb7d5;box-shadow:0 0 0 2px #7b3359}@keyframes burst-out{0%{transform:translate(-50%,-50%) rotate(0) scale(1);opacity:1}to{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(var(--rotation)) scale(var(--scale));opacity:0}}.ball--basketball{background:#f28b30;box-shadow:0 0 0 4px #543120,0 8px #3f201133,0 16px 24px #3f20112e}.ball--basketball:before{background:linear-gradient(90deg,transparent 0 18%,rgba(71,31,15,.96) 18% 22%,transparent 22% 78%,rgba(71,31,15,.96) 78% 82%,transparent 82% 100%),linear-gradient(0deg,transparent 0 47%,rgba(71,31,15,.96) 47% 53%,transparent 53% 100%)}.ball--basketball:after{top:11%;right:9%;bottom:11%;left:9%;border-top:4px solid rgba(71,31,15,.96);border-bottom:4px solid rgba(71,31,15,.96);border-left:0;border-right:0;transform:rotate(90deg);opacity:.92}.ball--tennis{background:#b7e34a;box-shadow:0 0 0 4px #365722,0 8px #2941192e,0 16px 24px #29411929}.ball--tennis:before{top:9%;right:16%;bottom:9%;left:16%;border-left:5px solid #fffef5;border-right:5px solid #fffef5;border-radius:50%;transform:rotate(18deg)}.ball--tennis:after{top:14%;right:14%;bottom:14%;left:14%;background:repeating-radial-gradient(circle at 50% 50%,rgba(255,255,255,.05) 0 1px,transparent 1px 4px);opacity:.45}.ball--furry{background:#f7a2ad;box-shadow:0 0 0 4px #634080,0 8px #4f2d6733,0 16px 24px #4f2d6729}.ball--furry:before{top:-10%;right:-10%;bottom:-10%;left:-10%;background:repeating-conic-gradient(from 0deg,#ffd686f2 0,#ffd686f2 9deg,#ffa57beb 9deg,#ffa57beb 18deg,#cf84fff2 18deg,#cf84fff2 27deg,#ffd686f2 27deg,#ffd686f2 36deg),radial-gradient(circle at 50% 50%,rgba(247,162,173,.98) 0 58%,transparent 59%);filter:blur(4px);opacity:.9;z-index:-1}.ball--furry:after{top:18%;right:18%;bottom:18%;left:18%;background:radial-gradient(circle at 50% 50%,rgba(255,228,168,.18),transparent 70%);opacity:.5}.ball--bird{background:radial-gradient(circle at 50% 44%,#9edcff 0 58%,transparent 59%),linear-gradient(180deg,#a8ddff 0,#a8ddff 56%,#6cbcf6 56%,#6cbcf6);box-shadow:0 0 0 4px #295070,0 8px #233f5833,0 16px 24px #233f5829}.ball--bird:before{background:radial-gradient(circle at 34% 37%,#1b3246 0 6%,transparent 7%),radial-gradient(circle at 62% 37%,#1b3246 0 6%,transparent 7%),radial-gradient(circle at 50% 56%,#ffd36a 0 12%,transparent 13%),radial-gradient(circle at 50% 63%,#ff9f45 0 7%,transparent 8%),radial-gradient(circle at 26% 58%,#5b9fe0 0 13%,transparent 14%),radial-gradient(circle at 21% 62%,#72b7ee 0 9%,transparent 10%),radial-gradient(circle at 18% 67%,#4e8fce 0 8%,transparent 9%),radial-gradient(circle at 74% 58%,#5b9fe0 0 13%,transparent 14%),radial-gradient(circle at 79% 62%,#72b7ee 0 9%,transparent 10%),radial-gradient(circle at 82% 67%,#4e8fce 0 8%,transparent 9%),radial-gradient(circle at 33% 66%,#d9f1ff 0 7%,transparent 8%),radial-gradient(circle at 67% 66%,#d9f1ff 0 7%,transparent 8%)}.ball--bird:after{top:-22%;right:-22%;bottom:-22%;left:-22%;background:radial-gradient(circle at 50% 12%,#7fce6b 0 9%,transparent 10%),radial-gradient(circle at 40% 18%,#6ac35c 0 8%,transparent 9%),radial-gradient(circle at 60% 18%,#6ac35c 0 8%,transparent 9%),radial-gradient(circle at 76% 78%,#4f95d2 0 8%,transparent 9%),radial-gradient(circle at 84% 72%,#63aae3 0 8%,transparent 9%),radial-gradient(circle at 89% 66%,#7bc0f2 0 7%,transparent 8%);opacity:.95}.ball--yarn{background:radial-gradient(circle at 50% 50%,#ffcadf 0 62%,transparent 63%),radial-gradient(circle at 50% 50%,#f79ac2 63%,transparent 64%);box-shadow:0 0 0 4px #7b3359,0 8px #5c27442e,0 16px 24px #5c274424}.ball--yarn:before{background:repeating-linear-gradient(18deg,transparent 0 6px,rgba(164,69,114,.94) 6px 9px,transparent 9px 17px),repeating-linear-gradient(-24deg,transparent 0 7px,rgba(164,69,114,.84) 7px 10px,transparent 10px 18px),repeating-linear-gradient(58deg,transparent 0 8px,rgba(255,226,237,.68) 8px 10px,transparent 10px 18px),radial-gradient(circle at 50% 50%,rgba(255,233,242,.24) 0 48%,transparent 49%);opacity:.96}.ball--yarn:after{top:-8%;right:-8%;bottom:-8%;left:-8%;background:radial-gradient(circle at 18% 28%,rgba(255,215,231,.72) 0 10%,transparent 11%),radial-gradient(circle at 78% 22%,rgba(255,215,231,.66) 0 9%,transparent 10%),radial-gradient(circle at 30% 82%,rgba(255,215,231,.58) 0 8%,transparent 9%),radial-gradient(circle at 74% 78%,rgba(255,215,231,.54) 0 7%,transparent 8%);filter:blur(3px);opacity:.62}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:4;display:grid;place-items:center;padding:24px;background:#0308127a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.config-modal{width:min(760px,100%);display:grid;gap:18px;padding:24px;border:1px solid rgba(255,255,255,.12);border-radius:28px;background:#090e19e6;box-shadow:0 32px 80px #0000006b}.config-modal__header{display:flex;align-items:start;justify-content:space-between;gap:16px}.config-modal__header h2{margin:8px 0 0;font-size:clamp(1.6rem,4vw,2.1rem);line-height:1}.eyebrow{margin:0;color:#f7c56d;font-size:.85rem;letter-spacing:.14em;text-transform:uppercase}.modal-close{flex:none;width:42px;height:42px;border-radius:50%;color:#f9f1e6;background:#ffffff14;font-size:1.6rem;line-height:1}.control{display:grid;gap:8px;padding:16px;border-radius:18px;background:#ffffff0f}.control--variant{gap:14px}.control-copy{display:grid;gap:8px}.control span,.control strong{display:block}.control span{color:#f6efe5b8}.control strong{font-size:1.2rem}.control input[type=range]{width:100%;accent-color:#ff8c42}.config-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.variant-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.variant-option{display:grid;justify-items:center;gap:10px;padding:12px 10px;border:1px solid rgba(255,255,255,.08);border-radius:18px;color:#f9f1e6;background:#ffffff08;transition:border-color .16s ease,transform .16s ease,background .16s ease}.variant-option:hover{transform:translateY(-1px);background:#ffffff0f}.variant-option.is-active{border-color:#ffb65db8;background:#ffb65d24;box-shadow:inset 0 0 0 1px #ffb65d2e}.variant-preview{width:42px;height:42px;border-radius:50%;position:relative;overflow:hidden}.variant-preview:before,.variant-preview:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit}.variant-preview--basketball{background:#f28b30;box-shadow:0 0 0 2px #4f2614}.variant-preview--basketball:before{background:linear-gradient(90deg,transparent 0 19%,rgba(71,31,15,.96) 19% 23%,transparent 23% 77%,rgba(71,31,15,.96) 77% 81%,transparent 81% 100%),linear-gradient(0deg,transparent 0 47%,rgba(71,31,15,.96) 47% 53%,transparent 53% 100%)}.variant-preview--basketball:after{top:11%;right:8%;bottom:11%;left:8%;border-top:3px solid rgba(71,31,15,.96);border-bottom:3px solid rgba(71,31,15,.96);transform:rotate(90deg)}.variant-preview--tennis{background:#b7e34a;box-shadow:0 0 0 2px #31521b}.variant-preview--tennis:before{top:9%;right:18%;bottom:9%;left:18%;border-left:4px solid #fffef5;border-right:4px solid #fffef5;border-radius:50%;transform:rotate(18deg)}.variant-preview--furry{background:#f7a2ad;box-shadow:0 0 0 2px #5e3979}.variant-preview--furry:before{top:-12%;right:-12%;bottom:-12%;left:-12%;background:repeating-conic-gradient(from 0deg,#ffd686f2 0,#ffd686f2 9deg,#ffa57beb 9deg,#ffa57beb 18deg,#cf84fff2 18deg,#cf84fff2 27deg,#ffd686f2 27deg,#ffd686f2 36deg);filter:blur(4px);z-index:-1}.variant-preview--bird{background:radial-gradient(circle at 50% 44%,#9edcff 0 58%,transparent 59%),linear-gradient(180deg,#a8ddff 0,#a8ddff 56%,#6cbcf6 56%,#6cbcf6);box-shadow:0 0 0 2px #295070}.variant-preview--bird:before{background:radial-gradient(circle at 34% 37%,#1b3246 0 6%,transparent 7%),radial-gradient(circle at 62% 37%,#1b3246 0 6%,transparent 7%),radial-gradient(circle at 50% 56%,#ffd36a 0 12%,transparent 13%),radial-gradient(circle at 50% 63%,#ff9f45 0 7%,transparent 8%),radial-gradient(circle at 26% 58%,#5b9fe0 0 13%,transparent 14%),radial-gradient(circle at 21% 62%,#72b7ee 0 9%,transparent 10%),radial-gradient(circle at 74% 58%,#5b9fe0 0 13%,transparent 14%),radial-gradient(circle at 79% 62%,#72b7ee 0 9%,transparent 10%)}.variant-preview--bird:after{top:-22%;right:-22%;bottom:-22%;left:-22%;background:radial-gradient(circle at 50% 12%,#7fce6b 0 9%,transparent 10%),radial-gradient(circle at 40% 18%,#6ac35c 0 8%,transparent 9%),radial-gradient(circle at 60% 18%,#6ac35c 0 8%,transparent 9%),radial-gradient(circle at 76% 78%,#4f95d2 0 8%,transparent 9%),radial-gradient(circle at 84% 72%,#63aae3 0 8%,transparent 9%),radial-gradient(circle at 89% 66%,#7bc0f2 0 7%,transparent 8%)}.variant-preview--yarn{background:radial-gradient(circle at 50% 50%,#ffcadf 0 62%,transparent 63%),radial-gradient(circle at 50% 50%,#f79ac2 63%,transparent 64%);box-shadow:0 0 0 2px #7b3359}.variant-preview--yarn:before{background:repeating-linear-gradient(18deg,transparent 0 4px,rgba(164,69,114,.94) 4px 6px,transparent 6px 11px),repeating-linear-gradient(-24deg,transparent 0 5px,rgba(164,69,114,.84) 5px 7px,transparent 7px 12px),repeating-linear-gradient(58deg,transparent 0 5px,rgba(255,226,237,.68) 5px 7px,transparent 7px 12px);opacity:.96}.variant-preview--yarn:after{top:-8%;right:-8%;bottom:-8%;left:-8%;background:radial-gradient(circle at 18% 28%,rgba(255,215,231,.72) 0 10%,transparent 11%),radial-gradient(circle at 78% 22%,rgba(255,215,231,.66) 0 9%,transparent 10%);filter:blur(2px);opacity:.58}@media (max-width: 900px){.app-shell{padding:12px}.config-trigger{top:16px;left:16px}.stage{min-height:calc(100vh - 24px);border-radius:24px}.modal-backdrop{padding:16px}.variant-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.config-grid{grid-template-columns:1fr}}