:root{color:#fff;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#000;font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;font-weight:400;line-height:1.5}body{place-content:center;min-width:320px;min-height:100vh;margin:0;display:flex}#root{width:100%}*{box-sizing:border-box}.container{flex-direction:column;width:100vw;height:100vh;display:flex}.header{color:#000;background-color:#fff;border-bottom:1px solid #000;flex-shrink:0;justify-content:space-between;align-items:center;height:60px;padding:0 2rem;display:flex}.header-logo{align-items:center;gap:1rem;display:flex}.logo-img{height:32px}.logo-text{letter-spacing:.1em;font-size:1.5rem;font-weight:700}.main-content{color:#fff;background-color:#000;flex:1;display:flex;overflow:hidden}.menu-panel{border-right:1px solid #fff;flex:1;padding:1rem}.view-panel-1{flex-direction:column;flex:4;padding:1rem;display:flex}.ae-mode .header{color:#000;background-color:#fff;border-bottom:1px solid #000}.ae-mode .main-content{color:#fff;background-color:#000}.view-panel-full{flex-direction:column;flex:1;padding:1rem;display:flex;overflow-y:auto}.panel-header{border-bottom:1px solid #fff;justify-content:space-between;align-items:center;margin-bottom:1rem;padding-bottom:.5rem;display:flex}.panel-header select,.panel-header input{color:#fff;background-color:#000;border:1px solid #fff;padding:4px 8px}.panel-body{flex:1;overflow-y:auto}nav ul{padding:0;list-style:none}nav li{cursor:pointer;border-bottom:1px solid #0000;padding:.5rem 0}nav li:hover{border-bottom:1px solid #fff}.btn-secondary{color:#000;cursor:pointer;background-color:#fff;border:1px solid #000;padding:6px 12px;font-weight:700}.btn-secondary:hover{color:#fff;background-color:#000}.easing-card{background-color:#000;border:1px solid #fff;flex-direction:column;gap:1rem;margin-bottom:2rem;padding:1rem;display:flex}.card-title{border-bottom:1px solid #fff;padding-bottom:.5rem;font-size:1.2rem;font-weight:700}.card-content{gap:1rem;height:200px;display:flex}.easing-curve-container{aspect-ratio:1;background-color:#050505;border:1px solid #fff;flex:2;justify-content:center;align-items:center;display:flex;position:relative}.curve-svg{width:100%;height:100%}.curve-path{fill:none;stroke:#fff;stroke-width:2px}.previews-grid{flex:2;grid-template-rows:1fr 1fr;grid-template-columns:1fr 1fr;gap:4px;display:grid}.preview-box{border:1px solid #fff;justify-content:center;align-items:center;font-size:.7rem;display:flex;position:relative;overflow:hidden}.preview-label{opacity:.5;position:absolute;top:2px;left:4px}.preview-object{background-color:#fff;width:20px;height:20px}.playback-bar{border:1px solid #fff;align-items:center;gap:1rem;padding:.5rem;display:flex}.play-btn{color:#fff;cursor:pointer;background:0 0;border:1px solid #fff;padding:2px 8px;font-size:.8rem}.play-btn:hover{color:#000;background-color:#fff}.progress-track{background-color:#333;flex:1;height:4px;position:relative}.progress-thumb{background-color:#fff;width:0%;height:100%;position:absolute;top:0;left:0}.card-actions{justify-content:space-between;align-items:center;display:flex}.action-group{gap:.5rem;display:flex}.btn-icon{color:#fff;cursor:pointer;background:0 0;border:1px solid #fff;padding:4px 12px;font-size:.8rem}.btn-icon:hover{color:#000;background-color:#fff}.btn-danger{color:#888;border-color:#888}.btn-danger:hover{color:#000;background-color:#888}.easing-icon-card{cursor:pointer;background-color:#000;border:1px solid #fff;width:60px;height:60px;margin:4px;padding:4px;transition:all .2s;display:inline-flex}.easing-icon-card:hover{background-color:#fff}.easing-icon-card:hover svg path{stroke:#000}.easing-icon-card svg{width:100%;height:100%}.ae-icons-grid{grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:12px;padding:1rem;display:grid}.modal-overlay{z-index:1000;background-color:#000c;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:fixed;top:0;left:0}.modal-content{color:#000;background-color:#fff;border:2px solid #000;flex-direction:column;gap:1.5rem;width:400px;padding:2rem;display:flex;position:relative}.modal-header{border-bottom:2px solid #000;padding-bottom:.5rem;font-size:1.5rem;font-weight:700}.modal-body{flex-direction:column;gap:1rem;display:flex}.modal-footer{justify-content:flex-end;display:flex}.modal-close-btn{cursor:pointer;background:0 0;border:1px solid #000;padding:4px 12px;font-weight:700}.modal-close-btn:hover{color:#fff;background-color:#000}.modal-body input{border:1px solid #000;padding:8px;font-family:inherit}.modal-action-btn{color:#fff;cursor:pointer;background-color:#000;border:none;padding:10px;font-weight:700}.modal-action-btn:hover{color:#000;background-color:#fff;border:1px solid #000}