:root{--panel-bg:rgba(22,22,28,0.88);--btn-bg:rgba(255,255,255,0.08);--btn-hover:rgba(255,255,255,0.16);--accent:#ececec;--on-accent:#111;--accent-gold:#fc0;--text-main:#fff;--text-dim:#a3a3b0;--border-color:rgba(255,255,255,0.14);--glass-blur:blur(18px) saturate(1.2);--handle-h:60px;--dock-w:760px}html,body{margin:0;padding:0;height:100%;width:100%;background:#d2d2d2;overflow:hidden;overscroll-behavior:none;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans TC",Helvetica,Arial,sans-serif}.animation-container{position:fixed;top:0;left:0;width:100%;height:100%;height:100dvh;background:radial-gradient(circle at center,#f0f0f0 0,#c2c2c2 100%);overflow:hidden;cursor:grab;touch-action:none}.animation-canvas{width:100% !important;height:100% !important;display:block;pointer-events:none}.animation-container.custom-bg{background-image:none;background-size:cover;background-position:center;background-repeat:no-repeat}.custom-btn,.form-btn,.frame-adjust-btn,.seg-btn,.dock-tab{font-family:inherit;color:var(--text-main) !important;cursor:pointer;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s,transform .1s,opacity .15s;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.custom-btn,.frame-adjust-btn{background:var(--btn-bg) !important;border:1px solid var(--border-color) !important;border-radius:10px;font-size:13px}.custom-btn:hover,.frame-adjust-btn:hover{background:var(--btn-hover) !important;border-color:rgba(255,255,255,0.4) !important}.custom-btn:active,.frame-adjust-btn:active{transform:scale(.96)}.custom-btn:focus-visible,.seg-btn:focus-visible,.dock-tab:focus-visible,.form-btn:focus-visible,#mobile-play-btn:focus-visible{box-shadow:0 0 0 2px var(--accent)}.custom-btn:disabled{opacity:.45;cursor:progress}.form-group{display:flex;background:rgba(0,0,0,0.35);padding:3px;border-radius:12px;gap:3px}.form-btn{flex:1;border:none !important;background:transparent !important;padding:8px 6px;font-size:12px;border-radius:9px;color:var(--text-dim) !important}.form-btn:hover{color:#fff !important}.form-btn.active{background:var(--accent) !important;color:var(--on-accent) !important;font-weight:700;box-shadow:0 2px 8px rgba(0,0,0,.4)}.select-mode,.input-frame{background:rgba(0,0,0,0.35) !important;color:#fff !important;border:1px solid var(--border-color) !important;border-radius:10px;padding:8px 10px;font-size:13px;font-family:inherit;box-sizing:border-box}.select-mode{width:100%}.select-mode:focus,.input-frame:focus{border-color:var(--accent) !important;outline:0}.frame-group{display:flex;align-items:center;background:rgba(0,0,0,0.35);border-radius:10px;border:1px solid var(--border-color)}.frame-adjust-btn{border:none !important;background:transparent !important;font-size:18px;padding:4px 14px}.input-frame{border:none !important;text-align:center;width:56px !important;background:transparent !important;padding:8px 0}.input-frame::-webkit-outer-spin-button,.input-frame::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.input-frame[type=number]{appearance:textfield;-moz-appearance:textfield}.ui-label{font-size:11px;color:var(--text-dim);text-transform:uppercase;margin-bottom:6px;letter-spacing:1px}#gesture-hint{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:1001;pointer-events:none;background:rgba(22,22,28,.78);color:#fff;font-size:12px;padding:7px 14px;border-radius:20px;white-space:nowrap;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);animation:hintFade 6s ease forwards}@keyframes hintFade{0%,70%{opacity:1}100%{opacity:0;visibility:hidden}}#mobile-bottom-bar{position:fixed;z-index:1002;left:50%;transform:translateX(-50%);bottom:calc(max(12px, env(safe-area-inset-bottom)) + var(--vv-gap, 0px));width:min(var(--dock-w),calc(100% - 24px));display:flex;flex-direction:column;background:var(--panel-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--border-color);border-radius:20px;box-shadow:0 12px 40px rgba(0,0,0,.35);color:var(--text-main);overflow:hidden}#mobile-quick-row{display:none;align-items:center;gap:8px;padding:8px 12px 0}#mobile-quick-row.ready{display:flex}#mobile-bottom-bar.expanded #mobile-quick-row{display:none}#quick-forms{display:flex;gap:3px;flex-shrink:0;background:rgba(0,0,0,.3);padding:3px;border-radius:12px}#quick-modes{display:flex;gap:6px;flex:1;min-width:0;overflow-x:auto;overflow-y:hidden;touch-action:pan-x;-webkit-overflow-scrolling:touch;scrollbar-width:none}#quick-modes::-webkit-scrollbar{display:none}.quick-chip{font-family:inherit;font-size:12.5px;font-weight:600;color:var(--text-dim);background:var(--btn-bg);border:1px solid var(--border-color);border-radius:999px;padding:6px 12px;white-space:nowrap;flex-shrink:0;cursor:pointer;outline:0;box-sizing:border-box;transition:background .15s,color .15s,border-color .15s,transform .1s;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.quick-chip:hover{color:#fff;background:var(--btn-hover)}.quick-chip:active{transform:scale(.95)}.quick-chip:focus-visible{box-shadow:0 0 0 2px var(--accent)}.quick-chip.active{background:var(--accent);border-color:transparent;color:var(--on-accent);box-shadow:0 2px 8px rgba(0,0,0,.4)}.quick-soul{border-style:dashed}#quick-forms .quick-chip{min-width:30px;padding:6px 10px;border:0;border-radius:9px;background:transparent}#quick-forms .quick-chip:hover{background:var(--btn-hover)}#quick-forms .quick-chip.active{background:var(--accent)}#mobile-bar-handle{display:flex;align-items:center;gap:12px;height:var(--handle-h);padding:0 12px 0 10px;cursor:pointer;touch-action:manipulation}#mobile-play-btn{width:40px;height:40px;flex-shrink:0;padding:0;border-radius:50%;border:none !important;background:var(--accent) !important;color:var(--on-accent) !important;font-size:16px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 3px 10px rgba(0,0,0,.45);transition:transform .1s,filter .15s;touch-action:manipulation}#mobile-play-btn:hover{filter:brightness(1.12)}#mobile-play-btn:active{transform:scale(.92)}#mobile-frame-slider{--p:0;-webkit-appearance:none;appearance:none;flex:1;min-width:0;height:28px;margin:0;background:transparent;cursor:pointer;touch-action:none}#mobile-frame-slider::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(to right,var(--accent) var(--p),rgba(255,255,255,.18) var(--p))}#mobile-frame-slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;margin-top:-5px;border-radius:50%;background:#fff;box-shadow:0 1px 5px rgba(0,0,0,.5)}#mobile-frame-slider::-moz-range-track{height:6px;border-radius:3px;background:rgba(255,255,255,.18)}#mobile-frame-slider::-moz-range-progress{height:6px;border-radius:3px;background:var(--accent)}#mobile-frame-slider::-moz-range-thumb{width:16px;height:16px;border:0;border-radius:50%;background:#fff;box-shadow:0 1px 5px rgba(0,0,0,.5)}#mobile-frame-display{font-size:12px;color:var(--text-dim);font-variant-numeric:tabular-nums;min-width:64px;text-align:right;white-space:nowrap}#mobile-bar-toggle{width:32px;height:32px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--text-dim);font-size:14px;border-radius:50%;background:var(--btn-bg);transition:transform .3s ease,background .15s}#mobile-bar-handle:hover #mobile-bar-toggle{background:var(--btn-hover)}#mobile-bottom-bar.expanded #mobile-bar-toggle{transform:rotate(180deg)}#mobile-bar-content{overflow:hidden auto;max-height:0;padding:0 14px;border-top:1px solid transparent;transition:max-height .35s cubic-bezier(0.16,1,0.3,1),padding .3s ease,border-color .3s}#mobile-bottom-bar.expanded #mobile-bar-content{max-height:min(380px,55vh);padding:10px 14px 14px;border-top-color:var(--border-color)}#dock-tabs{display:flex;gap:4px;margin-bottom:12px;background:rgba(0,0,0,.3);padding:3px;border-radius:12px}.dock-tab{flex:1;border:0;background:transparent;color:var(--text-dim) !important;font-size:12.5px;font-weight:600;padding:8px 6px;border-radius:9px}.dock-tab:hover{color:#fff !important}.dock-tab.active{background:var(--btn-hover);color:#fff !important}.dock-pane{display:none}.dock-pane.active{display:block;animation:paneIn .2s ease}@keyframes paneIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}#mobile-form-row{margin-bottom:10px}#mobile-form-row:empty{display:none}#mobile-frame-row{display:flex;align-items:center;gap:8px;margin-bottom:10px}#mobile-frame-row .select-mode{flex:1;min-width:0}#mobile-frame-row .frame-group{flex-shrink:0}#mobile-camera-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px}#mobile-camera-row .custom-btn{padding:10px 8px}#mobile-camera-row #mb-reset-view{color:var(--accent-gold) !important;border-color:rgba(255,204,0,0.4) !important}#mobile-camera-row #mb-reset-bg{color:#f77 !important;border-color:rgba(255,102,102,0.4) !important}.seg{display:flex;gap:3px;background:rgba(0,0,0,.3);padding:3px;border-radius:12px}.seg-btn{flex:1;border:0;background:transparent;color:var(--text-dim) !important;font-size:12px;font-weight:600;padding:8px 4px;border-radius:9px}.seg-btn:hover{color:#fff !important}.seg-btn.active{background:var(--accent);color:var(--on-accent) !important;box-shadow:0 2px 8px rgba(0,0,0,.4)}#mb-fit-hint{font-size:11.5px;line-height:1.5;color:var(--text-dim);margin:8px 2px 12px;min-height:2.6em}#mobile-export-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px}#mobile-export-row .custom-btn{padding:11px 8px;font-weight:600}#mb-webm-full{color:#4de3ff !important}#mb-gif-full{color:#5dff7a !important}#mb-export-status{font-size:12px;color:var(--accent-gold);min-height:1.3em;margin-top:10px;text-align:center}@media(max-width:600px){:root{--handle-h:56px}#mobile-bottom-bar{width:100%;bottom:var(--vv-gap,0);border-radius:20px 20px 0 0;border-bottom:0;padding-bottom:env(safe-area-inset-bottom)}#mobile-frame-display{min-width:52px}#gesture-hint{font-size:11px;max-width:calc(100% - 28px);overflow:hidden;text-overflow:ellipsis}}@media(prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}#gesture-hint{display:none}}.viewer-fatal{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:80%;padding:14px 18px;border-radius:12px;text-align:center;background:rgba(22,22,28,.92);color:#fff;font:14px/1.5 sans-serif;z-index:4000}#export-loading-overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:3000;display:flex;flex-direction:column;justify-content:center;align-items:center;background:rgba(10,10,16,.88);color:#fff;font-family:sans-serif}#export-loading-overlay .spinner{width:40px;height:40px;border-radius:50%;border:4px solid rgba(255,255,255,.25);border-top-color:#fff;animation:spin 1s linear infinite}#export-progress-text{margin-top:15px;font-weight:bold}#export-loading-overlay .export-bar{margin-top:12px;width:min(260px,70%);height:6px;border-radius:3px;background:rgba(255,255,255,.18);overflow:hidden}#export-progress-bar{height:100%;width:0;background:#ececec;transition:width .1s linear}@keyframes spin{to{transform:rotate(360deg)}}.animation-container.cropping #mobile-bottom-bar,.animation-container.cropping #gesture-hint{display:none !important}#crop-overlay{position:absolute;top:0;left:0;z-index:2000;cursor:crosshair;touch-action:none}#crop-box{position:absolute;box-sizing:border-box;cursor:move;touch-action:none;border:2px solid #fff;box-shadow:0 0 0 9999px rgba(0,0,0,.5)}.crop-handle{position:absolute;width:24px;height:24px;touch-action:none;background:#fff;border:1px solid #111;border-radius:4px}.crop-handle[data-handle*="n"]{top:-12px}.crop-handle[data-handle*="s"]{bottom:-12px}.crop-handle[data-handle="e"],.crop-handle[data-handle="w"]{top:calc(50% - 12px)}.crop-handle[data-handle*="w"]{left:-12px}.crop-handle[data-handle*="e"]{right:-12px}.crop-handle[data-handle="n"],.crop-handle[data-handle="s"]{left:calc(50% - 12px)}#crop-size-label{position:absolute;bottom:-24px;left:0;pointer-events:none;white-space:nowrap;background:rgba(0,0,0,.7);color:#fff;font-size:11px;padding:2px 6px;border-radius:4px}#crop-actions{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);display:flex;gap:8px}#crop-actions button{padding:10px 18px;border:0;border-radius:6px;cursor:pointer;font-size:14px}#crop-cancel{background:#3a3a4e;color:#aaa}#crop-confirm{background:#ececec;color:#111;font-weight:bold}#crop-full{background:#22c55e;color:#fff}