.orb-main{display:flex;cursor:pointer;position:relative;overflow:hidden;height:var(--react-ai-orb-size);width:var(--react-ai-orb-size);border-radius:50%;background-image:radial-gradient(circle at 50% 30%,var(--main-bg-start) 0%,var(--main-bg-end) 70%);box-shadow:var(--main-shadow);animation:var(--main-hue-animation)}.orb-loc-a{position:absolute}.orb-loc-b{position:absolute;left:10%;top:5%}.orb-loc-c,.orb-loc-d{position:absolute;left:5%;top:5%}.orb-loc-glass{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.orb-shape-a{border-radius:50%;height:var(--shapes-size);width:var(--shapes-size);background-image:radial-gradient(circle at 50% 90%,var(--shape-a-start) 0%,var(--shape-a-end) 70%);transform-style:preserve-3d;animation:rotateDiagonal var(--animation-rotation-speed-base) linear infinite,hueShift var(--animation-hue-speed-base) linear infinite}.orb-shape-b{border-radius:50%;height:var(--shapes-size);width:var(--shapes-size);background:radial-gradient(circle at 33% 12%,var(--shape-b-start) 0%,var(--shape-b-middle) 26%,var(--shape-b-end) 63%);filter:blur(2px);will-change:transform;transform-style:preserve-3d;animation:rotateDiagonal calc(var(--animation-rotation-speed-base) + var(--animation-rotation-speed-base) * .5) linear infinite,hueShift calc(var(--animation-hue-speed-base) + var(--animation-hue-speed-base) * .5) linear infinite;mix-blend-mode:soft-light}.orb-shape-c{height:var(--shapes-size);width:var(--shapes-size);border-radius:50%;background-image:radial-gradient(circle at 31% 12%,var(--shape-c-start) 0%,var(--shape-c-middle) 31%,var(--shape-c-end) 77%);filter:blur(1px);opacity:.65;transform-style:preserve-3d;animation:rotateDiagonal calc(var(--animation-rotation-speed-base) + var(--animation-rotation-speed-base) * 1) linear infinite,hueShift calc(var(--animation-hue-speed-base) + var(--animation-hue-speed-base) * 1) linear infinite;mix-blend-mode:color-dodge}.orb-shape-d{height:var(--shapes-size);width:var(--shapes-size);border-radius:50%;background-image:radial-gradient(circle at 12% 80%,var(--shape-d-start) 0%,var(--shape-d-middle) 31%,var(--shape-d-end) 77%);filter:blur(1px);opacity:.55;transform-style:preserve-3d;animation:rotateDiagonal calc(var(--animation-rotation-speed-base) + var(--animation-rotation-speed-base) * 1.5) linear infinite,hueShift calc(var(--animation-hue-speed-base) + var(--animation-hue-speed-base) * 1.5) linear infinite;mix-blend-mode:color}.orb-glass{height:var(--shapes-size);width:var(--shapes-size);opacity:.8;border-radius:50%;background:transparent;box-shadow:inset 0 -1px 6px 1px #ffffff80,inset 0 3px 4px #ffffff80}.orb-blob-a{animation:rotateDiagonal calc(var(--animation-rotation-speed-base) + var(--animation-rotation-speed-base) * 2) linear infinite,hueShift calc(var(--animation-hue-speed-base) + var(--animation-hue-speed-base) * 2) linear infinite;opacity:var(--blob-a-opacity);mix-blend-mode:screen}.orb-blob-b{position:absolute;top:0;opacity:var(--blob-b-opacity);mix-blend-mode:lighten;animation:rotateDiagonal calc(var(--animation-rotation-speed-base) + var(--animation-rotation-speed-base) * 2.5) linear infinite,hueShift calc(var(--animation-hue-speed-base) + var(--animation-hue-speed-base) * 2.5) linear infinite}.orb-blob-shine{position:absolute;top:0;opacity:.9;fill:#fff;transform:scale(.4);animation:expand 3.5s linear infinite;mix-blend-mode:hard-light;filter:blur(15px)}.orb-shine-b{mix-blend-mode:plus-lighter;animation:expand-b 5s ease-in-out infinite;opacity:.3;left:15%}@keyframes expand{0%{transform:scale(.4)}50%{transform:scale(.1)}to{transform:scale(.4)}}@keyframes expand-b{0%{transform:scale(.6)}50%{transform:scale(.1)}to{transform:scale(.6)}}@keyframes rotateDiagonal{0%{transform:rotate3d(1,1,1,0)}to{transform:rotate3d(1,1,1,360deg)}}@keyframes hueShift{0%{filter:hue-rotate(0deg)}50%{filter:hue-rotate(var(--hue-rotation))}to{filter:hue-rotate(0deg)}}@media(prefers-reduced-motion:reduce){.orb-main,.orb-shape-a,.orb-shape-b,.orb-shape-c,.orb-shape-d,.orb-blob-a,.orb-blob-b,.orb-blob-shine{animation:none}}*,*:before,*:after{box-sizing:border-box}:root{color-scheme:light;--brand: #2b7fd8;--brand-deep: #1e5ba8;--brand-rgb: 43, 127, 216;--highlight: #f4d758;--highlight-rgb: 244, 215, 88;--pop: #c8324a;--pop-mark: #e84a5f;--pop-rgb: 232, 74, 95;--ink: #1a1a2e;--ink-light: #4a4a5a;--ink-faint: #6e6e80;--ink-rgb: 26, 26, 46;--cream: #fefcf6;--dark-panel: #151821;--hairline: rgba(26, 26, 46, .07);--border-strong: rgba(26, 26, 46, .18);--focus-ring: #1e5ba8;--highlighter: linear-gradient(transparent 58%, var(--highlight) 58%);--bg: var(--cream);--surface: #fffefb;--text: var(--ink);--text-2: var(--ink-light);--text-3: var(--ink-faint);--chip-bg: rgba(26, 26, 46, .06);--shadow: 0 2px 12px rgba(0, 0, 0, .05);--s1: 4px;--s2: 8px;--s3: 12px;--s4: 16px;--s5: 24px;--s6: 32px;--s7: 44px}html[data-theme=dark]{color-scheme:dark;--bg: var(--dark-panel);--surface: #1b1f2a;--pop: #ff8095;--pop-mark: #ff8095;--text: #f2f3f7;--text-2: #c3c6d1;--text-3: #969aa9;--chip-bg: rgba(255, 255, 255, .08);--hairline: rgba(255, 255, 255, .08);--border-strong: rgba(255, 255, 255, .22);--focus-ring: var(--highlight);--shadow: 0 2px 12px rgba(0, 0, 0, .35)}body{margin:0;min-height:100dvh;display:grid;background:var(--bg);color:var(--text);font-size:14px;font-family:Noto Sans SC,-apple-system,Segoe UI,PingFang SC,Microsoft YaHei,sans-serif;-webkit-font-smoothing:antialiased}::selection{background:var(--highlight);color:var(--ink)}:is(button,a,input,select):focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.app{width:100%;max-width:980px;margin:auto;padding:var(--s5) var(--s5) var(--s6);display:flex;flex-direction:column;gap:var(--s6)}.topbar{display:flex;align-items:center;gap:var(--s4)}.topbar h1{font-family:"Noto Serif SC",serif;font-weight:900;font-size:22px;line-height:1;letter-spacing:-.01em;margin:0;flex-shrink:0}.hl{background:var(--highlighter);padding:0 2px}.version{font-family:Fira Code,monospace;font-size:12px;font-variant-numeric:tabular-nums;color:var(--text-3);vertical-align:2px;margin-left:var(--s2);font-weight:400}.subtitle{display:flex;align-items:center;gap:var(--s4);margin:0;font-size:14px;color:var(--text-2);flex:1;min-width:0;justify-content:flex-end}.subtitle a{color:var(--brand-deep);text-decoration:none;font-weight:500}html[data-theme=dark] .subtitle a{color:var(--highlight)}.toggle,.reset,.copy,.theme-toggle{position:relative}.toggle:after,.reset:after,.copy:after,.theme-toggle:after{content:"";position:absolute;top:-6px;right:-6px;bottom:-6px;left:-6px;border-radius:inherit}.theme-toggle{flex-shrink:0;height:32px;padding:0 var(--s4);background:transparent;border:1.5px solid var(--border-strong);border-radius:999px;color:var(--text);font-size:13px;font-weight:500;cursor:pointer;transition:border-color .15s ease,color .15s ease,transform .15s ease}.theme-toggle:hover{border-color:var(--brand);color:var(--brand-deep)}html[data-theme=dark] .theme-toggle:hover{color:var(--highlight)}.floating-preview{position:fixed;right:28px;bottom:28px;z-index:100;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}.floating-preview.dragged{cursor:grabbing}.floating-preview:focus-visible{outline:2px solid var(--focus-ring);outline-offset:4px;border-radius:50%}.panel{display:flex;flex-direction:column;gap:var(--s4);background:var(--surface);border:1px solid var(--hairline);border-radius:16px;padding:var(--s5)}.grp{display:grid;grid-template-columns:repeat(auto-fit,minmax(208px,1fr));gap:var(--s3) var(--s5);align-items:center}.grp.lead,.grp.row{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center}.grp.row{margin-top:var(--s1)}.knob{display:grid;grid-template-columns:4.5em 1fr 3em;align-items:center;gap:var(--s2);font-size:13px;color:var(--text-2);cursor:pointer}.knob.wide{display:inline-flex;align-items:center;gap:var(--s2)}.pill{height:32px;min-width:0;padding:0 var(--s3);border:1px solid var(--border-strong);border-radius:999px;background:var(--surface);color:var(--text);font-family:Fira Code,monospace;font-size:13px;cursor:pointer}.val{color:var(--pop);font-variant-numeric:tabular-nums;font-family:Fira Code,monospace;font-size:13px;text-align:right}.knob input[type=range]{width:100%;min-width:0;margin:0;cursor:pointer}.toggle{display:inline-flex;align-items:center;gap:var(--s2);height:32px;padding:0 14px 0 var(--s2);background:var(--chip-bg);border:none;border-radius:999px;color:var(--text-2);font-size:13px;font-family:Fira Code,monospace;cursor:pointer;transition:background .15s ease,color .15s ease,transform .15s ease}.toggle:hover{color:var(--text)}.toggle.on{background:rgba(var(--brand-rgb),.16);color:var(--brand-deep)}html[data-theme=dark] .toggle.on{color:var(--highlight)}.switch{position:relative;width:32px;height:18px;border-radius:999px;background:rgba(var(--ink-rgb),.2);transition:background .2s ease;flex-shrink:0}html[data-theme=dark] .switch{background:#ffffff3d}.toggle.on .switch{background:var(--brand)}.switch-dot{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #00000040;transition:transform .2s ease}.toggle.on .switch-dot{transform:translate(14px)}.reset{height:32px;padding:0 14px;background:transparent;border:1.5px solid var(--border-strong);border-radius:999px;color:var(--text-2);font-size:13px;font-weight:500;cursor:pointer;transition:color .15s ease,border-color .15s ease,transform .15s ease}.reset:hover{color:var(--pop);border-color:var(--pop)}.presets{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:var(--s3)}@media(max-width:880px){.presets{grid-template-columns:repeat(auto-fill,minmax(92px,1fr))}}.card{position:relative;margin:0;padding:var(--s4) var(--s2) var(--s3);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s2);background:var(--chip-bg);border:2px dashed var(--brand);border-radius:12px;cursor:pointer;color:inherit;font:inherit;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}.card[data-tone="1"]{border-color:var(--highlight)}.card[data-tone="2"]{border-color:var(--pop-mark)}.card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}.card-name{font-size:12px;line-height:1.35;color:var(--text-2);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.code-window{background:var(--dark-panel);border-radius:12px;overflow:hidden;box-shadow:0 8px 40px #0000002e}.titlebar{display:flex;align-items:center;gap:var(--s2);padding:10px var(--s4);background:#ffffff0d;border-bottom:1px solid rgba(255,255,255,.06)}.tl{width:12px;height:12px;border-radius:50%;flex-shrink:0}.tl.red{background:#ff5f57}.tl.yellow{background:#febc2e}.tl.green{background:#28c840}.filename{margin-left:var(--s2);font-family:Fira Code,monospace;font-size:12px;color:#969aa9;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.copy{flex-shrink:0;height:28px;padding:0 var(--s3);background:transparent;border:1px solid rgba(255,255,255,.28);border-radius:999px;color:#c3c6d1;font-size:12px;cursor:pointer;transition:border-color .15s ease,color .15s ease,transform .15s ease}.copy:hover{border-color:var(--highlight);color:var(--highlight)}.code{margin:0;padding:var(--s4) var(--s5);font-size:12.5px;line-height:1.6;font-family:Fira Code,monospace;font-variant-numeric:tabular-nums;color:#c3c6d1;white-space:pre;overflow:auto;max-height:280px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.24) transparent}.code::-webkit-scrollbar{width:10px;height:10px}.code::-webkit-scrollbar-thumb{border:3px solid transparent;border-radius:999px;background:#ffffff38;background-clip:content-box}.code::-webkit-scrollbar-thumb:hover{background:#ffffff57;background-clip:content-box}:is(.toggle,.reset,.copy,.card,.theme-toggle):active{transform:scale(.96)}@media(max-width:760px){.app{padding:var(--s4) var(--s4) var(--s5);gap:var(--s5)}.topbar{flex-wrap:wrap;row-gap:10px}.subtitle{flex-basis:100%;order:3;justify-content:flex-start}.panel{padding:var(--s4)}.floating-preview{right:var(--s4);bottom:var(--s4)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition-duration:.01ms!important}}