*{box-sizing:border-box;margin:0;padding:0}:root{--bg-app:#1a1a1a;--bg-panel:#242424;--bg-nav:#1a1a1a;--bg-input:#333;--bg-hover:#3a3a3a;--bg-active:#333;--border:#333;--text:#e0e0e0;--text-bright:#fff;--text-dim:#888;--text-muted:#555;--accent:#e8b84b;--accent-hover:#f0c860;--red:#e05555;--green:#4caf7c;--radius:8px;--radius-sm:6px;--radius-lg:12px;--font:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Helvetica, sans-serif;--font-mono:"SF Mono", "JetBrains Mono", "Menlo", monospace}html,body,#root{height:100%;overflow:hidden}body{font-family:var(--font);background:var(--bg-app);color:var(--text);-webkit-font-smoothing:antialiased;font-size:13px;line-height:1.4}button{cursor:pointer;font-family:inherit;font-size:inherit;color:inherit;background:0 0;border:none;outline:none}input,select{font-family:inherit;font-size:inherit;outline:none}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#444;border-radius:3px}.app{height:100vh;display:flex;overflow:hidden}.nav-rail{background:var(--bg-nav);border-right:1px solid var(--border);z-index:10;flex-direction:column;flex-shrink:0;justify-content:space-between;width:76px;padding:10px 0 16px;display:flex}.nav-top,.nav-bottom{flex-direction:column;align-items:center;gap:2px;display:flex}.nav-logo{justify-content:center;align-items:center;width:44px;height:44px;margin-bottom:12px;display:flex}.nav-btn{border-radius:var(--radius);width:64px;color:var(--text-dim);flex-direction:column;align-items:center;gap:2px;padding:7px 0 3px;transition:background .15s;display:flex}.nav-btn:hover{background:var(--bg-hover);color:var(--text)}.nav-btn.active{background:var(--bg-active);color:var(--text-bright)}.nav-btn span{letter-spacing:.2px;font-size:9px}.nav-btn.active span{color:var(--text)}.left-panel{background:var(--bg-panel);border-right:1px solid var(--border);flex-direction:column;flex-shrink:0;width:340px;display:flex;overflow:hidden}.sidebar{flex-direction:column;flex:1;display:flex;overflow:hidden}.panel-header{padding:20px 24px 0}.panel-header h2{color:var(--text-bright);font-size:15px;font-weight:600}.sub-tabs{gap:0;padding:14px 24px 0;display:flex}.sub-tab{border-radius:var(--radius-sm);color:var(--text-dim);padding:5px 14px;font-size:13px;font-weight:500;transition:all .15s}.sub-tab:hover{color:var(--text)}.sub-tab.active{background:var(--bg-input);color:var(--text-bright)}.panel-scroll{flex:1;padding:6px 0 20px;overflow-y:auto}.panel-section{padding:10px 24px}.section-label{color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;font-size:11px;font-weight:500}.device-select{border-radius:var(--radius-sm);background:var(--bg-input);width:100%;color:var(--text-bright);border:1px solid var(--border);appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-position:right 12px center;background-repeat:no-repeat;padding:9px 32px 9px 12px;font-size:13px}.device-select option{background:var(--bg-panel)}.upload-btn{border-radius:var(--radius);width:100%;color:var(--text);border:1px dashed #555;justify-content:center;align-items:center;gap:8px;padding:14px;font-size:13px;font-weight:500;transition:all .15s;display:flex}.upload-btn:hover{border-color:var(--text);background:var(--bg-input)}.clear-btn{width:100%;color:var(--text-dim);margin-top:6px;padding:6px;font-size:11px}.clear-btn:hover{color:var(--red)}.info-row{justify-content:space-between;align-items:center;padding:6px 0;display:flex}.info-label{color:var(--text-dim);font-size:13px}.info-value{color:var(--text);font-size:13px;font-family:var(--font-mono)}.info-dots{color:var(--text-muted);cursor:pointer;font-size:16px}.color-grid{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.color-dot{cursor:pointer;border:2px solid #0000;border-radius:50%;width:26px;height:26px;transition:all .15s}.color-dot:hover{transform:scale(1.15)}.color-dot.active{border-color:var(--text-bright)}.color-picker-mini{cursor:pointer;background:0 0;border:none;border-radius:50%;width:26px;height:26px;padding:0}.color-picker-mini::-webkit-color-swatch-wrapper{padding:0}.color-picker-mini::-webkit-color-swatch{border:2px dashed #555;border-radius:50%}.color-picker-large{border-radius:var(--radius-sm);cursor:pointer;border:none;width:100%;height:32px}.slider-row{align-items:center;gap:8px;margin-bottom:6px;display:flex}.slider-label{color:var(--text-dim);min-width:28px;font-size:11px}.slider-row input[type=range]{appearance:none;background:#444;border-radius:2px;flex:1;height:3px}.slider-row input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--text-bright);cursor:pointer;border-radius:50%;width:12px;height:12px}.slider-value{font-size:11px;font-family:var(--font-mono);color:var(--text-dim);text-align:right;min-width:32px}.easing-select{border-radius:var(--radius-sm);background:var(--bg-input);width:100%;color:var(--text);border:1px solid var(--border);padding:7px 10px}.hint-text{color:var(--text-dim);font-size:12px;line-height:1.5}.preset-list{grid-template-columns:1fr 1fr;gap:4px;display:grid}.preset-item{border-radius:var(--radius-sm);color:var(--text);background:var(--bg-input);text-align:left;border:1px solid #0000;padding:8px;font-size:12px;transition:all .15s}.preset-item:hover{border-color:var(--accent);color:var(--accent)}.bg-type-row{gap:4px;display:flex}.bg-type-btn{border-radius:var(--radius-sm);background:var(--bg-input);color:var(--text-dim);flex:1;padding:6px;font-size:11px;font-weight:500;transition:all .15s}.bg-type-btn:hover{color:var(--text)}.bg-type-btn.active{background:var(--text-bright);color:#1a1a1a;font-weight:600}.bg-presets{grid-template-columns:repeat(4,1fr);gap:6px;display:grid}.bg-swatch{aspect-ratio:1;border-radius:var(--radius-sm);cursor:pointer;border:2px solid #0000;transition:all .15s}.bg-swatch:hover{border-color:var(--text-dim);transform:scale(1.08)}.gradient-pair{gap:8px;display:flex}.gradient-pair input[type=color]{border-radius:var(--radius-sm);cursor:pointer;border:none;flex:1;height:30px}.chroma-btn{border-radius:var(--radius-sm);color:#000;background:#0f0;width:100%;margin-top:8px;padding:8px;font-size:12px;font-weight:600}.chroma-btn:hover{opacity:.85}.delete-kf-btn{border-radius:var(--radius-sm);width:100%;color:var(--red);border:1px solid var(--red);opacity:.7;background:0 0;padding:7px;font-size:12px}.delete-kf-btn:hover:not(:disabled){opacity:1;background:#e055551a}.delete-kf-btn:disabled{opacity:.3;cursor:not-allowed}.toggle-label{cursor:pointer;color:var(--text);align-items:center;gap:8px;padding:4px 0;font-size:12px;display:flex}.toggle-label input[type=checkbox]{accent-color:var(--green);width:14px;height:14px}.main-area{flex-direction:column;flex:1;min-width:0;display:flex;overflow:hidden}.top-bar{background:var(--bg-panel);border-bottom:1px solid var(--border);flex-shrink:0;justify-content:space-between;align-items:center;height:52px;padding:0 20px;display:flex}.top-left{flex:1}.saved-label{color:var(--text-muted);font-size:12px}.top-center{justify-content:center;display:flex}.mode-toggle{background:var(--bg-input);border-radius:var(--radius);padding:3px;display:flex}.mode-btn{color:var(--text-dim);border-radius:6px;align-items:center;gap:6px;padding:6px 18px;font-size:12px;font-weight:500;transition:all .15s;display:flex}.mode-btn:hover{color:var(--text)}.mode-btn.active{background:var(--bg-panel);color:var(--text-bright);box-shadow:0 1px 3px #0000004d}.mode-video.active{background:var(--red);color:#fff}.top-right{flex:1;justify-content:flex-end;display:flex}.export-wrapper{position:relative}.export-btn{border-radius:var(--radius);background:var(--text-bright);color:#1a1a1a;align-items:center;gap:6px;padding:8px 18px;font-size:13px;font-weight:600;transition:opacity .15s;display:flex}.export-btn:hover{opacity:.9}.export-dropdown{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius);z-index:100;min-width:170px;margin-top:6px;position:absolute;top:100%;right:0;overflow:hidden;box-shadow:0 12px 32px #00000080}.export-option{width:100%;color:var(--text);text-align:left;padding:11px 18px;font-size:13px;transition:background .1s;display:block}.export-option:hover{background:var(--bg-hover);color:var(--text-bright)}.export-inline{align-items:center;gap:10px;display:flex}.export-progress-bar{background:var(--bg-input);border-radius:2px;width:120px;height:4px;overflow:hidden}.export-progress-fill{background:var(--accent);height:100%;transition:width .1s}.export-progress-label{color:var(--text-dim);font-size:11px;font-family:var(--font-mono)}.canvas-area{background-color:#232323;background-image:linear-gradient(45deg,#2a2a2a 25%,#0000 25%),linear-gradient(-45deg,#2a2a2a 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#2a2a2a 75%),linear-gradient(-45deg,#0000 75%,#2a2a2a 75%);background-position:0 0,0 10px,10px -10px,-10px 0;background-size:20px 20px;flex:1;position:relative;overflow:hidden}.canvas-wrapper{position:absolute;inset:0}.canvas-wrapper canvas{display:block}.bottom-area{background:var(--bg-panel);border-top:1px solid var(--border);flex-shrink:0}.bottom-bar{align-items:center;gap:12px;padding:10px 20px;display:flex}.play-btn{width:38px;height:38px;color:var(--text);border-radius:50%;justify-content:center;align-items:center;transition:background .15s;display:flex}.play-btn:hover{background:var(--bg-hover)}.add-anim-btn{border-radius:var(--radius);background:var(--bg-input);color:var(--text);border:1px solid var(--border);padding:7px 18px;font-size:13px;font-weight:500;transition:all .15s}.add-anim-btn:hover{border-color:var(--text-dim);background:var(--bg-hover)}.spacer{flex:1}.time-display{font-family:var(--font-mono);align-items:baseline;gap:6px;font-size:14px;display:flex}.t-current{color:var(--text-bright);font-size:15px;font-weight:600}.t-of{color:var(--text-muted);font-size:12px}.t-total{color:var(--text-dim);font-size:14px}.timeline{padding:0 20px 12px;position:relative}.timeline-ruler{height:22px;position:relative}.ruler-label{color:var(--text-muted);font-size:10px;font-family:var(--font-mono);position:absolute;top:6px;transform:translate(-50%)}.timeline-track{border-radius:var(--radius-sm);cursor:pointer;background:var(--bg-input);touch-action:none;-webkit-user-select:none;user-select:none;height:40px;position:relative;overflow:visible}.playhead{z-index:10;pointer-events:none;width:0;position:absolute;top:-8px;bottom:-2px}.playhead-line{background:var(--red);border-radius:1px;width:2px;position:absolute;top:0;bottom:0;left:-1px}.playhead-line:before{content:"";background:var(--red);border-radius:50%;width:10px;height:10px;position:absolute;top:-3px;left:-4px}.kf-block{background:#e8b84b1f;border:1px solid #e8b84b40;border-radius:5px;min-width:4px;position:absolute;top:4px;bottom:4px}.kf-block.selected{border-color:var(--accent);background:#e8b84b40}.timeline-duration{position:absolute;top:0;right:20px}.duration-input{text-align:right;width:50px;color:var(--text-muted);font-family:var(--font-mono);background:0 0;border:none;padding:2px 4px;font-size:10px}.duration-input:focus{color:var(--text)}.kf-buttons{height:18px;margin-top:2px;position:relative}.kf-dot{background:var(--green);cursor:pointer;border:2px solid #0000;border-radius:4px;width:14px;height:14px;padding:0;transition:all .15s;position:absolute;top:2px;transform:translate(-50%)}.kf-dot:hover{cursor:grab;transform:translate(-50%)scale(1.2)}.kf-dot.dragging{cursor:grabbing;transform:translate(-50%)scale(1.3);box-shadow:0 0 8px #4caf7c80}.kf-dot.selected{background:var(--accent);border-color:var(--text-bright);box-shadow:0 0 6px #e8b84b66}.easing-badge{height:22px;color:var(--accent);cursor:pointer;z-index:5;white-space:nowrap;background:#282828f2;border:1px solid #555;border-radius:11px;justify-content:center;align-items:center;gap:3px;padding:0 6px;transition:all .15s;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.easing-badge:hover{background:var(--bg-hover);border-color:var(--accent);transform:translate(-50%,-50%)scale(1.08)}.easing-badge-label{text-transform:uppercase;letter-spacing:.3px;color:var(--accent);font-size:9px;font-weight:600}.easing-picker-wrapper{z-index:50;position:absolute;bottom:44px;left:50%;transform:translate(-50%)}.easing-picker{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius);min-width:160px;padding:6px;box-shadow:0 12px 32px #00000080}.easing-picker-title{text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);padding:4px 8px 6px;font-size:10px;font-weight:600}.easing-picker-item{border-radius:var(--radius-sm);width:100%;color:var(--text);align-items:center;gap:10px;padding:7px 8px;font-size:12px;transition:background .1s;display:flex}.easing-picker-item:hover{background:var(--bg-hover)}.easing-picker-item.active{background:var(--bg-active);color:var(--accent)}.easing-picker-item svg{color:var(--text-dim);flex-shrink:0}.easing-picker-item.active svg{color:var(--accent)}