:root{--text:#6b6375;--text-h:#08060d;--bg:#fff;--border:#e5e4e7;--code-bg:#f4f3ec;--accent:#aa3bff;--accent-bg:#aa3bff1a;--accent-border:#aa3bff80;--social-bg:#f4f3ec80;--shadow:#0000001a 0 10px 15px -3px, #0000000d 0 4px 6px -2px;--sans:system-ui, "Segoe UI", Roboto, sans-serif;--heading:system-ui, "Segoe UI", Roboto, sans-serif;--mono:ui-monospace, Consolas, monospace;font:18px/145% var(--sans);letter-spacing:.18px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}@media (width<=1024px){:root{font-size:16px}}@media (prefers-color-scheme:dark){:root{--text:#9ca3af;--text-h:#f3f4f6;--bg:#16171d;--border:#2e303a;--code-bg:#1f2028;--accent:#c084fc;--accent-bg:#c084fc26;--accent-border:#c084fc80;--social-bg:#2f303a80;--shadow:#0006 0 10px 15px -3px, #00000040 0 4px 6px -2px}#social .button-icon{filter:invert()brightness(2)}}body{margin:0}#root{text-align:center;border-inline:1px solid var(--border);box-sizing:border-box;flex-direction:column;width:1126px;max-width:100%;min-height:100svh;margin:0 auto;display:flex}h1,h2{font-family:var(--heading);color:var(--text-h);font-weight:500}h1{letter-spacing:-1.68px;margin:32px 0;font-size:56px}@media (width<=1024px){h1{margin:20px 0;font-size:36px}}h2{letter-spacing:-.24px;margin:0 0 8px;font-size:24px;line-height:118%}@media (width<=1024px){h2{font-size:20px}}p{margin:0}code,.counter{font-family:var(--mono);color:var(--text-h);border-radius:4px;display:inline-flex}code{background:var(--code-bg);padding:4px 8px;font-size:15px;line-height:135%}body{-webkit-font-smoothing:antialiased;background:#ffd7e6;margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.page{box-sizing:border-box;justify-content:center;align-items:center;min-height:100vh;padding:16px 12px;display:flex}.card{box-sizing:border-box;color:#333;background:linear-gradient(#ffe4f0,#ffd1e3);border-radius:18px;width:100%;max-width:480px;padding:18px 16px 20px;position:relative;box-shadow:0 10px 26px #ff8fb373}.title{text-align:center;color:#ff98c2;margin:0 0 4px;font-size:20px}.sub{text-align:center;color:#c06a8e;margin-bottom:12px;font-size:13px}.maker-hero-title{text-align:center;color:#ff6b9d;text-shadow:0 1px #ffffff59;margin:0 0 16px;padding:0 4px;font-size:22px;font-weight:700;line-height:1.45}.section-title{color:#ff4f8b;margin:16px 0 8px;font-size:13px}.upload-box{text-align:center;color:#ff4f8b;background:#ffeaf3;border:1px dashed #ff8fb3;border-radius:16px;padding:18px;font-size:13px}.upload-box input{display:none}.upload-btn{color:#fff;cursor:pointer;background:#ff4f8b;border-radius:999px;justify-content:center;align-items:center;padding:8px 16px;font-size:13px;display:inline-flex}.pill{color:#b26f8f;margin-top:4px;font-size:11px}.input{box-sizing:border-box;background:#fff;border:1px solid #ffc2d7;border-radius:10px;width:100%;margin-bottom:8px;padding:10px 12px;font-size:13px}.input:focus{outline:1px solid #ff8fb3}.submit-btn{color:#fff;cursor:pointer;background:linear-gradient(90deg,#ff4f8b,#ff7aa9);border:none;border-radius:999px;width:100%;margin-top:10px;padding:12px 0;font-size:15px}.submit-btn:disabled{opacity:.6;cursor:not-allowed}.center-tip{text-align:center;color:#b26f8f;margin-top:12px;font-size:13px}.play-full{color:#fff;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;background:#000;min-height:100vh;position:relative;overflow:hidden}.play-full *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-user-drag:none}.viz-mode-switch{top:max(12px, env(safe-area-inset-top));left:max(10px, env(safe-area-inset-left));z-index:20;pointer-events:auto;background:#0000008c;border:1px solid #ff8fb373;border-radius:10px;align-items:center;gap:6px;padding:6px 10px;display:flex;position:absolute}.viz-mode-label{color:#ffb8d0;white-space:nowrap;font-size:11px}.viz-mode-select{color:#fff;background:#281423f2;border:1px solid #ff7aa9;border-radius:8px;max-width:120px;padding:4px 8px;font-size:12px}.three-full{position:absolute;inset:0}.ring-stage{perspective:1000px;z-index:0;opacity:0;background:radial-gradient(circle,#21d4fd1a,#b721ff0f 45%,#000 72%);justify-content:center;align-items:center;transition:opacity .2s;display:flex;position:absolute;inset:0}.ring-stage.ring-stage-show{opacity:1}.ring-spin{--ring-radius:min(260px, 42vw);width:min(72vw,520px);height:min(72vw,520px);transform-style:preserve-3d;animation:18s linear infinite paused ringSpin;position:relative;transform:rotateX(-30deg)}.ring-spin.playing{animation-play-state:running}.ring-face{width:var(--ring-img-size,min(28vw, 200px));height:var(--ring-img-size,min(28vw, 200px));transform-style:preserve-3d;will-change:transform;z-index:1;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)translateZ(0)}.ring-face:before{content:"";filter:blur(10px);opacity:0;pointer-events:none;z-index:0;background:radial-gradient(circle at 50% 45%,#21d4fd61 0%,#b721ff38 42%,#0000 68%);border-radius:16px;transition:opacity .25s;position:absolute;inset:-16px;transform:translateZ(-1px)}.ring-img{object-fit:cover;filter:saturate(1.12)drop-shadow(0 0 10px #21d4fd47)drop-shadow(0 0 18px #b721ff33);-webkit-box-reflect:below 14px linear-gradient(transparent 0%, transparent 35%, #000000a6 100%);z-index:1;border-radius:10px;width:100%;height:100%;position:relative;box-shadow:0 0 14px #ffffff0f,0 0 26px #21d4fd24,0 0 46px #b721ff1a}.ring-img-placeholder{background:radial-gradient(circle at 50% 35%,#21d4fd1a,#b721ff14 50%,#ffffff0f);border-radius:10px;width:100%;height:100%}@keyframes ringSpin{0%{transform:rotateX(-30deg)rotateY(0)}to{transform:rotateX(-30deg)rotateY(360deg)}}.play-start-btn{z-index:5;color:#fff;cursor:pointer;background:linear-gradient(90deg,#ff4f8b,#ff7aa9);border:none;border-radius:999px;padding:12px 20px;font-size:16px;position:absolute;top:55%;left:50%;transform:translate(-50%,-50%);box-shadow:0 14px 40px #ff4f8b40}@property --d{syntax:"<angle>";inherits:true;initial-value:0deg}.click_me{aspect-ratio:1;color:#fff;z-index:5;cursor:pointer;--d:0deg;background:#0a12214d;border:none;border-radius:18px;width:min(72vw,240px);font-size:18px;transition:all .3s;position:absolute;top:55%;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 1px #ffffff0f,0 18px 60px #21d4fd1a,0 18px 60px #b721ff1a}.click_me:before{content:"";background:conic-gradient(from var(--d), #21d4fd, #0000 30deg 120deg, #b721ff 150deg 180deg, #0000 210deg 300deg, #21d4fd 330deg);z-index:-1;-webkit-mask-composite:xor;border-radius:26px;padding:10px;position:absolute;inset:-10px;-webkit-mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0;-webkit-mask-size:auto,auto;mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.click_me:after{content:"";filter:blur(60px);opacity:.35;background:radial-gradient(80px at 150px 120px,#21d4fd 98%,#0000),radial-gradient(80px at right 150px bottom 120px,#b721ff 98%,#0000);position:absolute;inset:-120px}.ring-stage-show .ring-face:before{opacity:1}.click_me:before,.click_me:after{transition:all .5s,transform 99999s 99999s,--d}.text-mode-switch{top:max(10px, env(safe-area-inset-top));right:max(10px, env(safe-area-inset-right));z-index:30;background:#0000008c;border-radius:999px;gap:4px;padding:4px 6px;display:inline-flex;position:absolute}.text-mode-switch button{color:#ffd4ff;cursor:pointer;background:0 0;border:none;border-radius:999px;padding:2px 8px;font-size:11px}.text-mode-switch button.active{color:#fff;background:#ff7abf}.msg{color:#ffebff;text-align:center;text-shadow:0 0 16px #ff00c8e6;min-height:32px;margin-top:10px;font-size:14px}.tap-tip{color:#777;text-align:center;margin-top:4px;font-size:12px}.music-hint{pointer-events:none;color:#ffffffa6;text-shadow:0 0 8px #ff00c82e;background:#0000002e;border-radius:999px;justify-content:center;align-items:center;padding:8px 12px;font-size:13px;display:inline-flex;position:absolute;inset:10px 12px auto auto}.edit-btn{color:#ffbed8;cursor:pointer;background:#0009;border:1px solid #ffb4cc;border-radius:999px;padding:6px 12px;font-size:11px}.effect-switch-btn{z-index:10;color:#ffbed8;cursor:pointer;background:#0000008c;border:1px solid #ffb4cc;border-radius:999px;padding:6px 12px;font-size:11px;position:absolute;top:10px;left:12px}.play-edit-btn{z-index:10;position:absolute;top:10px;right:12px}.error{color:#f56c6c;text-align:center;margin-top:8px;font-size:12px}.text-rain{pointer-events:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;perspective:1100px;transform-style:preserve-3d;background:linear-gradient(#000 0% 74%,#91587a85 84%,#ffb2d6b8 94%,#ffc0decc 100%);border-radius:0;position:absolute;inset:0;overflow:hidden}.meteors{pointer-events:none;z-index:0;position:absolute;inset:0;overflow:hidden}.meteors canvas{width:100%;height:100%;display:block}.text-rain-line{white-space:nowrap;z-index:1;color:#f7d3ff;text-shadow:0 0 6px #ff00ff8c,0 0 12px #f0f6;opacity:0;will-change:transform, opacity;font-size:18px;position:absolute;left:50%;transform:translate3d(-50%,0,-320px)scale(.45)}.text-rain-line.burst{animation:2s cubic-bezier(.08,.85,.2,1) both rainBurst}.text-rain-line.loop{animation:5.1s cubic-bezier(.14,.76,.2,1) infinite rainIn}@keyframes rainBurst{0%{opacity:0;transform:translate3d(-50%,200%,-560px)scale(.07)}16%{opacity:1}36%{opacity:.65}to{opacity:0;transform:translate3d(-50%,-20%,200px)scale(2)}}@keyframes rainIn{0%{opacity:0;transform:translate3d(-50%,185%,-520px)scale(.09)}20%{opacity:1}46%{opacity:.5}62%{opacity:0}to{opacity:0;transform:translate3d(-50%,-16%,180px)scale(1.85)}}.text-orbit{pointer-events:none;position:absolute;inset:0}.orbit-line{white-space:nowrap;color:#ffe9ff;text-shadow:0 0 8px #ffffffd9,0 0 20px #ff80ffd9;font-size:24px;position:absolute}.orbit-top{transform-origin:50%;animation:14s linear infinite orbitTop;top:18%;left:50%}.orbit-bottom{transform-origin:50%;animation:18s linear infinite orbitBottom;top:70%;left:50%}.orbit-left{transform-origin:50%;animation:16s linear infinite orbitLeft;top:45%;left:15%}.orbit-right{transform-origin:50%;animation:20s linear infinite orbitRight;top:45%;right:15%}@keyframes orbitTop{0%{opacity:.4;transform:translate(-50%,-50%)scale(.6)}40%{opacity:1;transform:translate(-5%,-60%)scale(1)}to{opacity:.2;transform:translate(-120%,-40%)scale(.6)}}@keyframes orbitBottom{0%{opacity:.4;transform:translate(-50%,-50%)scale(.6)}40%{opacity:1;transform:translateY(-20%)scale(1.05)}to{opacity:.2;transform:translate(60%,-30%)scale(.6)}}@keyframes orbitLeft{0%{opacity:.3;transform:translateY(-50%)scale(.5)}50%{opacity:1;transform:translate(40%,-60%)scale(1.05)}to{opacity:.2;transform:translate(80%,-40%)scale(.5)}}@keyframes orbitRight{0%{opacity:.3;transform:translateY(-50%)scale(.5)}50%{opacity:1;transform:translate(-40%,-40%)scale(1.05)}to{opacity:.2;transform:translate(-80%,-60%)scale(.5)}}