@charset "UTF-8";:root{--bg: #030712;--panel: #101828;--panel-2: #1e2939;--text: #e5e7eb;--muted: #f3f4f6;--primary: #2563eb;--danger: #ef4444;--active-background: #646f7f}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;width:100%}body{background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,sans-serif;font-size:16px}button{cursor:pointer;font-family:inherit}.app{display:flex;height:100vh;width:100%;background:var(--bg);color:var(--text);overflow:hidden}.app .sidebar{flex-shrink:0}.app .canvas{flex:1;position:relative;background:var(--panel-2);margin:1rem;border-radius:12px;box-shadow:inset 0 0 20px #0006}.sidebar{width:224px;background:var(--panel);display:flex;flex-direction:column;padding:16px 17px 16px 16px;gap:32px;border-right:1px solid #1e2939}.sidebar h3{font-size:16px;color:var(--muted);font-weight:400;line-height:24px;letter-spacing:-.31px;font-family:Inter,sans-serif}.sidebar .drag-items{padding-top:16px;display:flex;flex-direction:column;gap:12px}.sidebar .drag-items .drag-item{display:inline-flex;align-items:center;column-gap:12px;width:191px;height:46px;background:var(--panel-2);padding:12px;border-radius:10px;cursor:grab;transition:.2s;color:var(--text);border:1px solid #364153}.sidebar .drag-items .drag-item:hover{background:#646f7f}.sidebar .drag-items .drag-item:hover svg path{stroke:#fdfdfd}.sidebar .drag-items .drag-item.active{border:1px solid var(--ac);color:var(--text);background:#646f7f}.sidebar .drag-items .drag-item.active svg path{stroke:#fdfdfd}.sidebar .presets{display:flex;flex-direction:column;gap:16px}.sidebar .presets .preset-item{display:flex;justify-content:space-between;align-items:center;background:var(--panel-2);border-radius:8px;overflow:hidden;position:relative}.sidebar .presets .preset-item:hover .del{opacity:1;transform:translateY(-50%) scale(1);pointer-events:auto}.sidebar .presets .preset-item .preset-btn{display:inline-flex;align-items:center;column-gap:12px;width:191px;height:46px;background:var(--panel-2);padding:12px;border-radius:10px;color:var(--text);border:1px solid #364153;transition:.2s;position:relative}.sidebar .presets .preset-item .preset-btn:hover{background:#1a2340}.sidebar .presets .preset-item .del{position:absolute;right:5px;top:55%;transform:translateY(-50%) scale(.8);opacity:0;color:var(--danger);background:transparent;border:none;font-size:1.3rem;cursor:pointer;transition:all .3s ease;pointer-events:none}.sidebar .presets .preset-item.active .preset-btn{border:1px solid var(--active-background);color:var(--text);background:#646f7f}.sidebar .presets .preset-item.active .preset-btn svg path{stroke:#fdfdfd}.sidebar .presets .empty{display:inline-flex;align-items:center;justify-content:center;width:191px;height:46px;background:transparent;padding:12px;border-radius:10px;color:#e5e7eb46;border:1px solid #364153}.confirm-modal-backdrop{position:fixed;inset:0;background:#0009;display:flex;justify-content:center;align-items:center;z-index:300;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.confirm-modal{background:var(--panel);padding:1.5rem;border-radius:12px;width:320px;text-align:center;box-shadow:0 0 30px #00000080}.confirm-modal h3{color:var(--text);margin-bottom:.5rem}.confirm-modal p{color:var(--muted);margin-bottom:1rem;font-size:.9rem}.confirm-modal .actions{display:flex;justify-content:center;gap:1rem}.confirm-modal .actions button{padding:.4rem 1rem;border-radius:6px;border:none;font-weight:600;cursor:pointer;font-size:.9rem;transition:all .2s ease}.confirm-modal .actions .cancel{background:#1e293b;color:#94a3b8}.confirm-modal .actions .cancel:hover{background:#334155}.confirm-modal .actions .confirm{background:#dc2626;color:#fff}.confirm-modal .actions .confirm:hover{background:#b91c1c}.preset-modal-backdrop{position:fixed;inset:0;background:#0000008c;display:flex;align-items:center;justify-content:center;z-index:999;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.preset-modal{width:530px;height:274px;background:#141d2b;border:1px solid #364153;border-radius:14px;box-shadow:0 8px 40px #000000b3;color:#e2e8f0;font-family:Inter,sans-serif;display:flex;flex-direction:column;overflow:hidden}.preset-modal .modal-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 12px}.preset-modal .modal-header h3{font-size:16px;font-weight:500;margin:0;color:#f1f5f9}.preset-modal .modal-header .close-btn{background:transparent;border:none;color:#94a3b8;font-size:22px;cursor:pointer;line-height:1;transition:color .2s ease}.preset-modal .modal-header .close-btn:hover{color:#e2e8f0}.preset-modal hr{border:none;border-top:1px solid #364153;margin:0}.preset-modal form{flex:1;display:flex;flex-direction:column;padding:20px 24px;justify-content:space-evenly}.preset-modal form input{width:100%;background:#364153;border:1px solid #2a3242;border-radius:8px;padding:10px 12px;color:#e2e8f0;font-size:14px;outline:none;transition:all .2s ease}.preset-modal form input::placeholder{color:#6b7280}.preset-modal form input:focus{border-color:#0e1520}.preset-modal form .hint{font-size:13px;color:#9ca3af;margin:0 0 4px}.preset-modal form .actions{display:flex;justify-content:flex-end;gap:10px}.preset-modal form .actions button{border:none;border-radius:8px;padding:8px 14px;font-size:14px;font-weight:500;cursor:pointer;transition:background .2s ease}.preset-modal form .actions .cancel{background:#1e293b;color:#9ca3af}.preset-modal form .actions .cancel:hover{background:#2a3448}.preset-modal form .actions .save{background:#2563eb;color:#fff}.preset-modal form .actions .save:hover{background:#1e4fd8}.preset-modal form .actions .save:active{transform:scale(.97)}.toast{position:fixed;top:2rem;left:50%;transform:translate(-50%) translateY(70px);justify-content:center;display:flex;align-items:center;gap:14px;background:linear-gradient(90deg,#183724,#1a202b 70% 100%);color:#fff;padding:14px 22px;border-radius:8px;box-shadow:0 6px 20px #00000080;min-width:260px;z-index:300;font-family:Inter,sans-serif;font-size:16px;font-weight:500;animation:toastSlide .4s ease forwards,fadeOut .5s ease 2.8s forwards;transition:background .3s ease}.toast svg{flex-shrink:0}.toast.error{background:linear-gradient(90deg,#3d1a1a,#1a202b 40% 100%)}.toast.success{background:linear-gradient(90deg,#183724,#1a202b 70% 100%)}@keyframes toastSlide{0%{opacity:0;transform:translate(-50%) translateY(90px)}to{opacity:1;transform:translate(-50%) translateY(70px)}}@keyframes fadeOut{to{opacity:0;transform:translate(-50%) translateY(90px)}}.canvas-wrapper{flex:1;display:flex;flex-direction:column;margin:1rem;padding:0 24px;gap:16px;overflow:visible}.canvas-wrapper .canvas-header{display:flex;justify-content:space-between;align-items:center;background:var(--bg);color:var(--text)}.canvas-wrapper .canvas-header h4{font-size:16px;color:var(--muted);font-weight:400;line-height:24px;letter-spacing:-.31px;font-family:Inter,sans-serif}.canvas-wrapper .canvas-header .actions{display:flex;gap:.5rem}.canvas-wrapper .canvas-header .actions button{background:#1e293b;border:none;border-radius:8px;padding:.4rem .8rem;color:var(--text);cursor:pointer;font-size:.85rem;transition:.2s;height:38px;border:1px solid #364153}.canvas-wrapper .canvas-header .actions button.save{background:var(--primary);color:#fff}.canvas-wrapper .canvas-header .actions button:hover{opacity:.9}.canvas-wrapper .canvas-body{flex:1;position:relative;background:#0a101d;border-radius:14px;border:1px solid rgb(30,41,57);overflow:visible;z-index:1;display:flex;align-items:center;justify-content:center;padding-bottom:clamp(10px,0vh,90px)}.canvas-wrapper .canvas-body .placeholder{font-size:16px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#e5e7eb50;font-size:.9rem}.canvas-wrapper .canvas-body .fan-container,.canvas-wrapper .canvas-body .light-container{position:relative;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-height:100%}.canvas-wrapper .canvas-body.flash{animation:flash .3s ease}@keyframes flash{0%{background-color:#2d3748}50%{background-color:#475569}to{background-color:#2d3748}}.fan-container{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-height:100%;width:100%;position:relative;background:transparent}.fan-container .fan-body{position:relative;width:220px;height:220px;display:flex;justify-content:center;align-items:center;animation:spin linear infinite;animation-play-state:paused;transform-origin:center center;transition:animation-duration .3s ease-out;margin-bottom:150px;z-index:2}.fan-container .fan-body.on{animation-play-state:running}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.fan-container .fan-body .blade{position:absolute;top:50%;left:50%;width:134px;height:56px;background:linear-gradient(80deg,#4a5568,#2d3748 40%,#1a202c 95%,#0f1419);border-top-right-radius:9999px;border-bottom-right-radius:9999px;transform-origin:0% 50%;opacity:.9;box-shadow:inset 0 2px 10px #ffffff1a,0 2px 8px #0000004d}.fan-container .fan-body .blade1{transform:translate(20%,-50%) rotate(0)}.fan-container .fan-body .blade2{transform:translate(0) rotate(90deg)}.fan-container .fan-body .blade3{transform:translate(-20%,-50%) rotate(180deg)}.fan-container .fan-body .blade4{transform:translateY(-100%) rotate(270deg)}.fan-container .fan-body .center-outer{position:absolute;width:80px;height:80px;border-radius:50%;background:linear-gradient(180deg,#4a5565,#1e2939);border:4px solid rgb(54,65,83);box-shadow:0 25px 50px -12px #00000040;display:flex;align-items:center;justify-content:center;z-index:5}.fan-container .fan-body .center-inner{width:56px;height:56px;border-radius:50%;background:linear-gradient(180deg,#364153,#101828)}@media(min-width:1600px){.fan-container .fan-body{width:300px;height:300px}.fan-container .fan-body .blade{width:180px;height:70px}.fan-container .fan-body .center-outer{width:110px;height:110px}.fan-container .fan-body .center-inner{width:80px;height:80px}}@media(max-width:992px){.fan-container .fan-body{width:180px;height:180px}.fan-container .fan-body .blade{width:110px;height:45px}.fan-container .fan-body .center-outer{width:65px;height:65px}.fan-container .fan-body .center-inner{width:45px;height:45px}}@media(max-width:576px){.fan-container .fan-body{width:140px;height:140px}.fan-container .fan-body .blade{width:80px;height:35px}.fan-container .fan-body .center-outer{width:50px;height:50px}.fan-container .fan-body .center-inner{width:36px;height:36px}}.fan-container .fan-panel{background:#1e293980;border:1px solid rgba(255,255,255,.05);border-radius:14px;padding:25px;width:448px;height:138.4px;color:#cbd5e1;font-size:.95rem;box-shadow:0 2px 10px #0006;position:relative;bottom:0;margin-bottom:1rem;z-index:1}@media(min-width:1600px){.fan-container .fan-panel{width:520px;height:160px;font-size:1rem}}@media(max-width:992px){.fan-container .fan-panel{width:380px;height:130px;font-size:.9rem}}@media(max-width:576px){.fan-container .fan-panel{width:320px;height:auto;padding:18px}}@media(max-height:700px){.fan-container .fan-body{transform:scale(.9);margin-bottom:70px}.fan-container .fan-panel{transform:scale(.95)}}@media(max-height:600px){.fan-container .fan-body{transform:scale(.8);margin-bottom:30px}}.control-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.toggle{width:42px;height:22px;background:#cbced4;border-radius:999px;padding:2px;cursor:pointer;transition:all .3s ease;display:flex;align-items:center}.toggle .circle{width:18px;height:18px;background:#fff;border-radius:50%;transition:all .3s ease}.toggle.active{background:#3b82f6}.toggle.active .circle{background:#fff;transform:translate(20px)}.speed-slider{width:100%;height:16px;border-radius:16px;background:#364153;outline:none;appearance:none;overflow:hidden;position:relative}.speed-slider::-webkit-slider-runnable-track{height:16px;border-radius:16px;background:linear-gradient(90deg,rgb(43,127,255) var(--value, 0%),rgb(54,65,83) var(--value, 0%))}.speed-slider::-webkit-slider-thumb{appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;cursor:pointer;position:relative;z-index:2;border:none}.speed-slider::-moz-range-track{height:16px;border-radius:16px;background:linear-gradient(90deg,rgb(43,127,255) var(--value, 0%),rgb(54,65,83) var(--value, 0%))}.speed-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:none;cursor:pointer}.light-container{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-height:100%;width:100%;position:relative;background:transparent}.light-container .light-section{display:flex;flex-direction:column;align-items:center;justify-content:center;margin-bottom:150px}@media(max-width:1900px){.light-container .light-section{margin-bottom:40px}}@media(max-width:992px){.light-container .light-section{margin-bottom:30px}}@media(max-width:768px){.light-container .light-section{margin-bottom:25px}}@media(max-width:576px){.light-container .light-section{margin-bottom:20px}}.light-container .light-holder{display:flex;flex-direction:column;align-items:center}.light-container .light-holder .light-holder-top{width:64px;height:12px;background:linear-gradient(180deg,#4a5565,#364153);border-top-left-radius:6px;border-top-right-radius:6px}.light-container .light-holder .light-holder-bottom{width:80px;height:18px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}.light-container .light-holder .light-holder-bottom .part{height:4.5px;background:#364153;border-bottom:1px solid #4a5565}.light-container .light-body{position:relative;display:flex;align-items:center;justify-content:center;width:128px;height:160px;border-radius:100px;margin-top:6px;background:radial-gradient(112.05% 89.64% at 30% 30%,#4a5568,#2d3748,#1a202c);box-shadow:0 0 10px #ffffff26,inset 0 -2px 10px #00000080;transition:all .4s ease-in-out}.light-container .light-body:before{content:"";position:absolute;top:20%;left:40%;width:48px;height:64px;transform:translate(-50%);border-radius:10px;background:radial-gradient(circle at 40% 30%,#ffffff26,#ffffff14 40%,#0000 80%);opacity:.6;filter:blur(3px);z-index:1}.light-container .light-body:after{content:"";position:absolute;top:10%;left:40%;width:60px;height:90px;transform:translate(-50%);border-radius:14px;opacity:.05;background:linear-gradient(145deg,#fff6,#0000);filter:blur(10px);z-index:1}.light-container .light-body .glow-layer-1,.light-container .light-body .glow-layer-2,.light-container .light-body .glow-layer-3{position:absolute;top:50%;left:50%;border-radius:50%;pointer-events:none;z-index:0}.light-container .light-body .glow-layer-1{width:170px;height:210px;background:#ffe5b4d9;filter:blur(40px)}.light-container .light-body .glow-layer-2{width:260px;height:260px;background:#ffe5b480;filter:blur(60px)}.light-container .light-body .glow-layer-3{width:420px;height:420px;background:#ffe5b440;filter:blur(120px)}.light-container .light-body .light-glow-line{position:absolute;top:50%;left:50%;width:6px;height:60%;border-radius:4px;transform:translate(-50%,-50%);animation:filament-flicker 1.5s infinite ease-in-out}@keyframes filament-flicker{0%,to{opacity:1}50%{opacity:.85}}@media(min-width:1600px){.light-container .light-body{width:160px;height:200px}}@media(max-width:992px){.light-container .light-body{width:110px;height:140px}}@media(max-width:576px){.light-container .light-body{width:90px;height:120px}}.light-container .light-panel{background:#1e29398c;border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:25px;width:466px;height:254px;color:#cbd5e1;font-size:.9rem;box-shadow:0 2px 10px #0006;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);text-align:left;flex-shrink:0;z-index:3;transition:all .3s ease;margin-bottom:20px}@media(min-width:1600px){.light-container .light-panel{width:520px;height:270px;font-size:1rem}}@media(max-width:992px){.light-container .light-panel{width:380px;height:auto;padding:20px}}@media(max-width:576px){.light-container .light-panel{width:320px;height:auto;padding:18px}}.light-container .light-panel .control-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.light-container .light-panel .toggle{width:42px;height:22px;background:#cbced4;border-radius:999px;padding:2px;cursor:pointer;transition:all .3s ease;display:flex;align-items:center}.light-container .light-panel .toggle .circle{width:18px;height:18px;background:#fff;border-radius:50%;transition:all .3s ease}.light-container .light-panel .toggle.active{background:#3b82f6;box-shadow:0 0 8px #3b82f699}.light-container .light-panel .toggle.active .circle{background:#fff;transform:translate(20px)}.light-container .light-panel .color-palette{display:flex;justify-content:space-between;gap:.8rem;margin-bottom:1.4rem}.light-container .light-panel .color-palette button{width:90px;height:48px;border-radius:10px;cursor:pointer;border:none;outline:none;transition:all .25s ease;box-shadow:0 2px 6px #0000004d}.light-container .light-panel .color-palette button:hover{transform:scale(1.05)}@media(max-width:576px){.light-container .light-panel .color-palette button{width:70px;height:38px}}.light-container .light-panel input[type=range]{width:100%;height:16px;border-radius:16px;background:linear-gradient(90deg,rgb(43,127,255) var(--value, 0%),rgb(54,65,83) var(--value, 0%));outline:none;-webkit-appearance:none;appearance:none;overflow:hidden;transition:background .3s ease}.light-container .light-panel input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;cursor:pointer;border:none}@media(max-height:700px){.light-container .light-section{transform:scale(.9)}}@media(max-height:600px){.light-container .light-section{transform:scale(.8)}}.hint-box{position:absolute;top:30px;left:-40px;background:#2b7fff;width:227px;height:72px;color:#f3f4f6;font-size:14px;padding:10px 16px;border-radius:8px;animation:fadeIn .8s ease;text-align:center;z-index:30;display:flex;align-items:center;gap:8px}.hint-box .hint-pointer{width:18.5px;height:21.36px;position:absolute;left:-17px;top:50%;transform:translateY(-50%);border-top:10px solid transparent;border-bottom:10px solid transparent;border-right:17px solid #2175d7}@keyframes fadeIn{0%{opacity:0;transform:translateY(0)}to{opacity:1;transform:translateY(0)}}