.preview-page{background:#f5f7fa;min-height:100dvh}.preview-stage{place-items:center;transition:right .38s cubic-bezier(.2,.75,.2,1);display:grid;position:fixed;inset:0}.canvas-wrap{aspect-ratio:1;background:#fff;border-radius:26px;width:min(82vw,720px);position:relative;overflow:hidden;box-shadow:0 20px 70px #263d5b17}.particle-globe-host{width:100%;height:100%;position:relative;overflow:hidden}.particle-globe{touch-action:none;cursor:grab;background:0 0;width:100%;height:100%;display:block}.particle-globe.is-dragging{cursor:grabbing}.interactive-blob-host{width:100%;height:100%;position:relative;overflow:hidden}.interactive-blob{touch-action:none;cursor:crosshair;background:0 0;width:100%;height:100%;display:block}.transfer-overlay{pointer-events:none;position:absolute;inset:0;overflow:hidden}.globe-vignette{z-index:4;pointer-events:none;position:absolute;inset:0}.transfer-tooltip{visibility:hidden;opacity:0;color:#0b4fbd;min-width:32px;height:20px;box-shadow:0 4px 13px #0a48ad33,0 0 0 3px color-mix(in srgb,var(--transfer-color)22%,transparent);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);letter-spacing:-.01em;white-space:nowrap;will-change:transform,opacity;background:#f7fcfff0;border:1px solid #ffffffb8;border-radius:10px;justify-content:center;align-items:center;padding:0 7px;font-size:9px;font-weight:800;transition:opacity .1s linear;display:flex;position:absolute;top:0;left:0}.transfer-tooltip:before{content:"";background:var(--transfer-color);opacity:.42;z-index:-1;border-radius:50%;width:7px;height:7px;animation:1.5s ease-out infinite transfer-pulse;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@keyframes transfer-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--transfer-color)56%,transparent)}to{box-shadow:0 0 0 11px #0000}}.drag-hint{color:#8190a3;letter-spacing:.02em;pointer-events:none;opacity:.78;background:#ffffffbf;border-radius:12px;padding:7px 11px;font-size:10px;font-weight:650;position:absolute;bottom:18px;left:50%;transform:translate(-50%)}.config-button{color:#31516f;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);cursor:pointer;background:#ffffffe0;border-radius:21px;height:42px;padding:0 17px;font-size:12px;font-weight:700;transition:transform .16s;position:fixed;bottom:20px;left:20px;box-shadow:0 8px 26px #23406521}.config-button:hover{transform:translateY(-2px)}.library-status{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);pointer-events:none;background:#ffffffc7;border:1px solid #ffffffdb;border-radius:13px;flex-direction:column;gap:3px;padding:10px 13px;display:flex;position:fixed;top:20px;left:20px;box-shadow:0 8px 24px #23406514}.library-status b{color:#24415f;font-size:11px}.library-status span{color:#8a98a9;font-size:9px}.preview-theme-picker{z-index:2;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#ffffffc2;border:1px solid #ffffffd9;border-radius:13px;grid-template-columns:1fr 1fr;gap:4px;padding:4px;display:grid;position:fixed;top:20px;left:50%;transform:translate(-50%);box-shadow:0 8px 24px #23406514}.preview-theme-picker button{color:#74849a;cursor:pointer;background:0 0;border-radius:9px;min-width:54px;height:28px;font-size:9px;font-weight:760}.preview-theme-picker button.active{color:#fff;background:#1264ff;box-shadow:0 4px 10px #1264ff38}.control-panel{z-index:5;-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);opacity:0;pointer-events:none;background:#fcfdfff0;border:1px solid #fff;border-radius:24px;flex-direction:column;width:min(370px,100vw - 28px);transition:opacity .22s,transform .38s cubic-bezier(.2,.75,.2,1);display:flex;position:fixed;top:14px;bottom:14px;right:14px;transform:translate(calc(100% + 28px));box-shadow:0 28px 80px #1932542e}.control-panel.is-open{opacity:1;pointer-events:auto;transform:translate(0)}.control-panel header{border-bottom:1px solid #e9eef5;justify-content:space-between;align-items:flex-start;padding:22px 23px 17px;display:flex}.control-panel header p{color:#1264ff;letter-spacing:.17em;margin:2px 0 6px;font-size:9px;font-weight:850}.control-panel h1{letter-spacing:-.03em;margin:0;font-size:22px;line-height:1.1}.close-button{color:#8290a2;cursor:pointer;background:0 0;padding:0 2px;font-size:27px;line-height:1}.controls{scrollbar-width:thin;flex:1;padding:19px 23px 24px;overflow-y:auto}.effect-picker{border-bottom:1px solid #e2eaf3;margin-bottom:20px;padding-bottom:21px}.effect-grid{grid-template-columns:1fr 1fr;gap:8px;display:grid}.effect-grid button{color:#687c93;text-align:left;cursor:pointer;background:#f5f8fb;border:1px solid #e1e9f2;border-radius:12px;min-height:76px;padding:12px;transition:border-color .16s,background .16s,transform .16s}.effect-grid button:hover{border-color:#a8c5f7;transform:translateY(-1px)}.effect-grid button.active{color:#0f55d5;background:#edf4ff;border-color:#1264ff;box-shadow:0 6px 16px #1264ff1a}.effect-grid b{color:#23405f;margin-bottom:5px;font-size:11px;display:block}.effect-grid button.active b{color:#0e5be7}.effect-grid span{font-size:9px;line-height:1.35;display:block}.settings-kicker{background:#edf4ff;border-radius:10px;justify-content:space-between;align-items:center;gap:12px;margin:25px 0 15px;padding:10px 12px;display:flex}.settings-kicker b{color:#1264ff;letter-spacing:.14em;font-size:9px}.settings-kicker span{color:#7c8da3;font-size:9px}.choice-grid{gap:6px;display:grid}.choice-grid button{color:#708197;cursor:pointer;background:#f3f6fa;border:1px solid #e0e8f1;border-radius:9px;min-height:34px;padding:7px 5px;font-size:9px;font-weight:720}.choice-grid button.active{color:#fff;background:#1264ff;border-color:#1264ff;box-shadow:0 5px 12px #1264ff2e}.control-block,.range-field,.toggle-row,.color-control{border-bottom:1px solid #e9eef5;margin-bottom:19px;padding-bottom:19px;display:block}.control-label,.range-field>span{justify-content:space-between;align-items:center;margin-bottom:12px;display:flex}.range-field b,.control-label,.toggle-row b,.color-control span{font-size:12px;font-weight:720}.range-field output,.toggle-row span{color:#8290a2;font-size:11px}.segmented{grid-template-columns:repeat(4,1fr);gap:6px;display:grid}.segmented--three{grid-template-columns:repeat(3,1fr)}.segmented button{color:#718096;cursor:pointer;background:#edf2f8;border-radius:9px;height:35px;padding:0 6px;font-size:10px;font-weight:700}.segmented button.active{color:#fff;background:#1264ff;box-shadow:0 7px 15px #1264ff33}.range-field input{appearance:none;background:linear-gradient(90deg,#1264ff var(--progress),#dce4ee var(--progress));border-radius:4px;outline:none;width:100%;height:4px}.range-field input::-webkit-slider-thumb{appearance:none;cursor:grab;background:#fff;border:4px solid #1264ff;border-radius:50%;width:16px;height:16px;box-shadow:0 2px 7px #12417833}.toggle-row{justify-content:space-between;align-items:center;display:flex}.toggle-row>div{flex-direction:column;gap:4px;display:flex}.switch{cursor:pointer;background:#cbd5e1;border-radius:14px;flex:none;width:43px;height:25px;padding:3px;transition:background .16s}.switch i{background:#fff;border-radius:50%;width:19px;height:19px;transition:transform .16s;display:block;box-shadow:0 2px 5px #122c4d38}.switch.is-on{background:#1264ff}.switch.is-on i{transform:translate(18px)}.color-control{border:0;justify-content:space-between;align-items:center;margin-bottom:0;display:flex}.color-control--separated{border-top:1px solid #e9eef5;margin-top:19px;padding-top:19px}.color-control input{cursor:pointer;background:0 0;border:0;width:37px;height:28px;padding:0}.color-control input::-webkit-color-swatch-wrapper{padding:0}.color-control input::-webkit-color-swatch{border:2px solid #fff;border-radius:9px;box-shadow:0 2px 8px #1c3c6229}.section-divider{color:#1264ff;letter-spacing:.16em;text-transform:uppercase;align-items:center;gap:11px;margin:7px 0 20px;font-size:9px;font-weight:850;display:flex}.section-divider:after{content:"";background:#dfe8f2;flex:1;height:1px}.control-panel footer{border-top:1px solid #e9eef5;grid-template-columns:.75fr 1.1fr 1.15fr;gap:8px;padding:15px 23px 21px;display:grid}.control-panel footer button{cursor:pointer;border-radius:11px;height:42px;font-size:11px;font-weight:760}.reset-button{color:#60738b;background:#ebf0f6}.copy-button{color:#fff;background:#1264ff;box-shadow:0 8px 18px #1264ff33}.copy-button--secondary{color:#315f9b;box-shadow:none;background:#e7f0ff}.export-button{color:#fff;background:#1264ff;box-shadow:0 8px 18px #1264ff33}.export-button:disabled{opacity:.58;cursor:wait}button:focus-visible,input:focus-visible{outline-offset:2px;outline:3px solid #1264ff47}.theme-dark{color:#eaf2ff;background:#070a10}.theme-dark .preview-stage{background:radial-gradient(circle at 38% 42%,#111a27 0%,#070a10 68%)}.theme-dark .canvas-wrap{background:#070a10;box-shadow:0 24px 80px #0000007a,0 0 0 1px #7ea3d314}.theme-dark .drag-hint{color:#91a4bc;background:#0b111bb8}.theme-dark .library-status,.theme-dark .preview-theme-picker,.theme-dark .config-button{color:#c9d8ec;background:#0d141fd1;border-color:#779ac924;box-shadow:0 10px 30px #0000004d}.theme-dark .library-status b{color:#d9e7f8}.theme-dark .library-status span{color:#7589a2}.theme-dark .preview-theme-picker button{color:#8497ae}.theme-dark .control-panel{color:#dce8f7;background:#0c121cf5;border-color:#7ea3d31f;box-shadow:0 30px 90px #0000007a}.theme-dark .control-panel header,.theme-dark .control-panel footer,.theme-dark .effect-picker,.theme-dark .control-block,.theme-dark .range-field,.theme-dark .toggle-row{border-color:#202d3e}.theme-dark .close-button,.theme-dark .range-field output,.theme-dark .toggle-row span{color:#7f93aa}.theme-dark .effect-grid button,.theme-dark .choice-grid button,.theme-dark .segmented button{color:#90a3b9;background:#151f2d;border-color:#253346}.theme-dark .effect-grid b{color:#d4e0ef}.theme-dark .effect-grid button.active,.theme-dark .choice-grid button.active,.theme-dark .segmented button.active{color:#fff;background:#1264ff;border-color:#3b82f6}.theme-dark .settings-kicker{background:#111f34}.theme-dark .settings-kicker span{color:#71859e}.theme-dark .range-field input{background:linear-gradient(90deg,#3984ff var(--progress),#2a3647 var(--progress))}.theme-dark .color-control--separated{border-color:#202d3e}.theme-dark .section-divider:after{background:#263447}.theme-dark .reset-button{color:#9eb0c4;background:#1a2635}.theme-dark .copy-button--secondary{color:#a9c7f0;background:#152944}@media (width>=820px){.with-panel .preview-stage{right:390px}.with-panel .canvas-wrap{width:min(100vw - 450px,72vh)}}@media (width<=819px){.canvas-wrap{border-radius:20px;width:min(92vw,610px)}.control-panel{border-radius:24px 24px 0 0;width:100%;height:min(76vh,640px);inset:auto 0 0;transform:translateY(104%)}.control-panel.is-open{transform:translateY(0)}.config-button{bottom:14px;left:14px}}@media (prefers-reduced-motion:reduce){.control-panel,.preview-stage,button,.switch i{transition-duration:.01ms!important}}