:root{--bg-color: #0d0d0d;--panel-bg: #1a1a1a;--border-color: #333;--accent-color: #bfa1ff;--secondary-color: #6177da;--secondary-glow: rgba(97, 119, 218, .4);--accent-glow: rgba(191, 161, 255, .4);--danger-color: #ff4757;--danger-glow: rgba(255, 71, 87, .4);--danger-dim: #8f2831;--text-primary: #fff;--text-secondary: #aaa;--grid-cell-size: 50px;--grid-gap: 8px}body{background-color:var(--bg-color);color:var(--text-primary);font-family:Inter,system-ui,-apple-system,sans-serif;margin:0;height:100vh;overflow:hidden;display:flex;flex-direction:column}header{background-color:var(--panel-bg);padding:1rem 2rem;border-bottom:1px solid var(--border-color);display:flex;justify-content:space-between;align-items:center}h1{font-size:1.2rem;font-weight:600;margin:0;color:var(--accent-color);text-transform:uppercase;letter-spacing:1px}.main-container{display:flex;flex:1;overflow:hidden}aside{width:300px;background-color:var(--panel-bg);border-right:1px solid var(--border-color);padding:1.5rem;overflow-y:auto;display:flex;flex-direction:column;gap:2rem}main{flex:1;display:flex;justify-content:center;align-items:center;position:relative;background:radial-gradient(circle at center,#1a1a1a,#0d0d0d)}.grid-container{display:grid;grid-template-columns:repeat(8,var(--grid-cell-size));grid-template-rows:repeat(8,var(--grid-cell-size));gap:var(--grid-gap);padding:20px;background:#000;border-radius:12px;box-shadow:0 0 50px #00000080;border:1px solid #222}.cell{width:100%;height:100%;background-color:#222;border-radius:4px;transition:background-color .05s ease,box-shadow .05s ease;cursor:pointer;border:1px solid #333}.cell:hover{border-color:var(--accent-color)}.cell.active{box-shadow:0 0 15px currentColor}.control-group{display:flex;flex-direction:column;gap:.5rem}.control-group label{font-size:.85rem;color:var(--text-secondary);font-weight:500}select,input,button{background:#252525;border:1px solid #444;color:#fff;padding:10px;border-radius:6px;font-family:inherit;font-size:.9rem}button{cursor:pointer;background:#333;transition:all .2s;font-weight:500}button:hover{background:#444;border-color:#666}button.primary{background:var(--accent-color);color:#000;border-color:var(--accent-color);font-size:16px;font-weight:600}button.primary:hover{background:#d4c2ff;box-shadow:0 0 15px var(--accent-glow)}button.secondary{background:var(--secondary-color);color:#000;border-color:var(--secondary-color);font-size:16px;font-weight:600}button.secondary:hover{background:#d4c2ff;box-shadow:0 0 15px var(--secondary-glow)}button.danger{background:var(--danger-color);color:#fff;border-color:var(--danger-color);font-size:16px;font-weight:600}button.danger:hover{background:#d4c2ff;box-shadow:0 0 15px var(--danger-glow)}button.play-btn{width:100%;padding:15px;font-size:1rem;text-transform:uppercase;letter-spacing:1px}.file-drop-zone{border:2px dashed #444;border-radius:8px;padding:20px;text-align:center;color:var(--text-secondary);cursor:pointer;transition:all .2s}.file-drop-zone:hover{border-color:var(--accent-color);color:var(--text-primary);background:#bfa1ff0d}.hidden{display:none!important}.flex-row{display:flex;gap:10px}.flex-1{flex:1}.status-bar{position:absolute;bottom:0;left:0;right:0;background:#000c;padding:5px 20px;font-size:.8rem;color:#666;border-top:1px solid #222;display:flex;justify-content:space-between}body,html{height:100%;margin:0;overflow:hidden}.app-container.vertical-layout{display:flex;flex-direction:column;height:100vh;padding:0;background:#111}.top-row{flex:2;display:flex;flex-direction:row;border-bottom:2px solid #333;overflow:hidden}.flex-row{margin-top:15px}.sidebar-controls{width:250px;background:#1a1a1a;padding:20px;border-right:1px solid #333;display:flex;flex-direction:column;gap:10px}.full-width{width:100%;margin-bottom:5px}.back-link{margin-top:auto;color:#888;text-align:center;text-decoration:none;display:block;padding:10px}.property-panel{flex:1;background:#222;display:flex;flex-direction:column;padding:0}.property-panel.hidden{display:none}.panel-header{padding:15px 20px;background:#2a2a2a;border-bottom:1px solid #333;display:flex;justify-content:space-between;align-items:center}.panel-header h2{margin:0;font-size:18px}.delete-btn{background:var(--danger-dim)}.prop-content{padding:20px;overflow-y:auto;flex:1}.empty-state{flex:1;display:flex;justify-content:center;align-items:center;color:#444}.velocity-inputs-container{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:5px;width:500px}.vel-input-grp{display:flex;flex-direction:column;align-items:center}.vel-input-grp label{font-size:10px;color:#888;margin-bottom:5px}.vel-input-grp input{text-align:center}.editor-grid{width:460px;height:460px;margin:10px 0;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);gap:2px;background:#222}.editor-grid div{background:#111;border:1px solid #333;cursor:pointer}.editor-grid div:hover{border-color:#666}.frame-tools div{margin-bottom:20px}.frame-row{display:flex;flex-direction:row;gap:10px}.editor-column{width:100%;display:flex;justify-content:center}.bottom-row{background:#151515;display:flex;flex-direction:column;min-height:150px}.timeline-header{padding:5px 15px;margin:0;font-size:14px;background:#222;color:#888;border-bottom:1px solid #333}.timeline-track{flex:1;display:flex;flex-direction:row;overflow-x:auto;overflow-y:hidden;padding:10px;gap:10px;align-items:center}.timeline-item{min-width:140px;height:140px;background:#333;border:2px solid transparent;border-radius:6px;cursor:pointer;display:flex;flex-direction:column;padding:10px;position:relative;-webkit-user-select:none;user-select:none;transition:transform .1s}.timeline-item.selected{border-color:var(--accent-color);background:#3a3a3a}.timeline-item.dragging{opacity:.5;transform:scale(.95)}.t-preview{flex:1;background:#000;margin-bottom:5px;display:flex;justify-content:center;align-items:center;overflow:hidden;font-size:10px;color:#555;position:relative}.mini-grid{display:grid;grid-template-columns:repeat(8,1fr);width:64px;height:64px;gap:1px}.mini-cell{width:100%;height:100%}.t-info{font-size:12px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.t-type{font-size:10px;color:#888;text-transform:uppercase;font-weight:700}.modal{background:#222;color:#fff;border:1px solid #444;border-radius:8px;padding:20px;width:80%;max-width:600px}.modal textarea{width:100%;height:200px;background:#111;color:#0f0;border:1px solid #333;margin:10px 0}.modal-actions{display:flex;justify-content:flex-end;gap:10px}.separator{margin:15px 0}.frame-columns{display:flex;flex-direction:row;gap:20px;height:100%}.frame-col-left{width:150px;display:flex;flex-direction:column;gap:15px}.frame-col-right{flex:1;display:flex;flex-direction:column;padding-left:100px}.font{margin:20px 0}.color-picker-dialog{background:#222;color:#fff;border:1px solid #444;border-radius:8px;padding:20px;max-width:90vw;width:600px}.color-picker-dialog::backdrop{background:#000000b3}.color-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:8px;margin-top:10px}.color-swatch{aspect-ratio:1;border-radius:4px;border:2px solid #333;cursor:pointer;transition:transform .1s}.color-swatch:hover{transform:scale(1.1);border-color:#fff}.velocity-swatch-btn{width:100px;border:none;border-radius:4px;cursor:pointer;font-weight:700;color:#000c;text-shadow:0 1px 0 rgba(255,255,255,.3)}