:root{--bg-primary: #1e1e1e;--bg-secondary: #2d2d2d;--text-primary: #ffffff;--text-secondary: #cccccc;--accent-color: #0078d4;--border-color: #404040}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background-color:var(--bg-primary);color:var(--text-primary);line-height:1.6}.container{display:flex;height:100vh;padding:1rem;gap:1rem}.canvas-container{flex:1;background-color:var(--bg-secondary);border-radius:4px;position:relative;overflow:auto;padding:40px;background-image:linear-gradient(45deg,#333 25%,transparent 25%),linear-gradient(-45deg,#333 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#333 75%),linear-gradient(-45deg,transparent 75%,#333 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0px}.canvas-wrapper{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);min-width:calc(100% - 80px);min-height:calc(100% - 80px);display:flex;align-items:center;justify-content:center}#mainCanvas{display:block;background-color:var(--bg-primary);box-shadow:0 0 0 1px #ffffff1a;transform-origin:center}.controls{width:300px;display:flex;flex-direction:column;gap:1rem}.layers-panel,.animation-panel,.export-panel{background-color:var(--bg-secondary);border-radius:4px;padding:1rem}h3{margin-bottom:1rem;color:var(--text-primary);font-size:1rem;font-weight:500}.input-container{margin-bottom:1rem}.dropzone{border:2px dashed var(--border-color);border-radius:4px;padding:1.5rem;text-align:center;color:var(--text-secondary);cursor:pointer;transition:all .2s ease}.dropzone p{margin-bottom:1rem;color:var(--text-primary);font-weight:500}.dropzone ul{list-style:none;padding:0;margin:0;font-size:.9rem;opacity:.8}.dropzone ul li{margin:.5rem 0}.dropzone:hover,.dropzone.dragover{border-color:var(--accent-color);background-color:#0078d41a}#layerList{margin-bottom:1rem;min-height:100px}.layer-item{display:flex;flex-direction:column;padding:4px;border:1px solid var(--border-color);margin-bottom:4px;background:var(--bg-secondary);position:relative;min-height:80px}.layer-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;padding:2px 24px 2px 4px}.layer-name{color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1;font-size:11px!important;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif!important}.layer-details{color:var(--text-secondary);font-size:10px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif!important}.layer-item.selected{border-color:var(--accent-color);background:var(--bg-secondary)}.layer-controls{width:100%;display:flex;flex-direction:column;gap:4px;padding:4px 0}.control-row{display:flex;gap:4px;align-items:center}.layer-controls button{height:24px!important;min-height:24px!important;padding:0 8px!important;display:flex;align-items:center;justify-content:center;font-size:12px!important;background-color:var(--bg-primary);line-height:1!important;border-radius:2px!important}.delete-btn{position:absolute!important;top:4px;right:4px;width:20px!important;height:20px!important;min-width:20px!important;min-height:20px!important;padding:0!important;z-index:1;border-radius:2px;background-color:#f003!important}.delete-btn:hover{background-color:#f006!important}.move-btn{width:24px!important;min-width:24px!important}.scale-input{width:50px!important;height:24px!important;padding:0 4px!important;font-size:12px!important;border:1px solid var(--border-color)!important;border-radius:2px!important;background-color:var(--bg-primary)!important;color:var(--text-primary)!important;text-align:right!important}.scale-input:focus{border-color:var(--accent-color)!important;outline:none!important}.scale-input:hover{border-color:var(--accent-color)!important}.layer-controls input[type=text]{width:80px;height:24px;padding:0 4px;font-size:12px;border:1px solid var(--border-color);border-radius:2px;background-color:var(--bg-primary);color:var(--text-primary);cursor:text}.layer-controls input[type=text]:focus{border-color:var(--accent-color);outline:none}.layer-controls button:hover{background-color:var(--accent-color)}.layer-controls button:disabled{opacity:.5;cursor:not-allowed}button{background-color:var(--accent-color);color:var(--text-primary);border:none;border-radius:4px;padding:.5rem 1rem;cursor:pointer;transition:background-color .2s ease}button:hover{background-color:#106ebe}.animation-controls{display:flex;flex-direction:column;gap:1rem}input[type=range]{width:100%;margin:.5rem 0}.size-select{width:100%;padding:.5rem;background-color:var(--bg-primary);color:var(--text-primary);border:1px solid var(--border-color);border-radius:4px;cursor:pointer}.size-select:focus{border-color:var(--accent-color);outline:none}.size-label{display:block;margin-bottom:.5rem;color:var(--text-secondary);font-size:.9rem}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000000b3;display:flex;justify-content:center;align-items:center;z-index:1000}.modal-content{background-color:var(--bg-secondary);padding:2rem;border-radius:8px;width:80%;max-width:600px}.modal-content h2{margin:0 0 1rem;font-size:1.2rem}.settings{margin:1rem 0}.setting-item{margin-bottom:1rem}.setting-item label{display:block;margin-bottom:.5rem}.speed-control,.delay-control{display:flex;flex-direction:column;gap:.5rem}.speed-radio-group{display:flex;gap:4px;margin-top:4px;flex-wrap:wrap}.speed-radio{flex:1;min-width:calc(20% - 4px)}.speed-radio input[type=radio]{display:none}.speed-radio span{display:flex;align-items:center;justify-content:center;padding:6px 4px;background-color:var(--bg-primary);border:1px solid var(--border-color);border-radius:4px;font-size:.9rem;cursor:pointer;-webkit-user-select:none;user-select:none;text-align:center}.speed-radio input[type=radio]:checked+span{background-color:var(--accent-color);border-color:var(--accent-color)}.speed-radio:hover span{border-color:var(--accent-color)}.control-row{display:flex;align-items:center;gap:1rem}.control-row input[type=range]{flex:1;margin:0}.delay-info{margin-top:1rem}.note{font-size:.9rem;color:var(--text-secondary);margin:.25rem 0 0}.speed-info{margin-top:1rem;font-weight:500;color:var(--text-primary)}.modal-buttons{display:flex;justify-content:flex-end;gap:1rem;margin-top:2rem}@media (max-width: 768px){.container{flex-direction:column}.controls{width:100%}}

@media (max-width: 768px) {
    .canvas-container{
        min-height: 100vw;
    }
}