.studio-animation2-view{max-width:1500px}.animation2-shell{display:grid;grid-template-columns:390px minmax(0,1fr);overflow:hidden;border:1px solid #4d3a2e;border-radius:15px;background:#1c1511}.animation2-controls{display:grid;align-content:start;gap:17px;padding:22px;border-right:1px solid #4d3a2e;background:linear-gradient(155deg,#2d221a,#1a130f)}.animation2-field{display:grid;gap:8px}.animation2-field>span{color:#d5c4b8;font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.animation2-field>small{color:#b59682;font-size:9px;line-height:1.5}.animation2-sources{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;max-height:170px;overflow:auto;scrollbar-color:#926e56 #221a14;scrollbar-width:thin}.animation2-source{display:grid;min-width:0;gap:4px;padding:5px;border:1px solid #533f31;border-radius:8px;background:#1c1511;color:#ece3dd;text-align:left;cursor:pointer}.animation2-source>span{display:grid;height:57px;place-items:center;border-radius:5px;background:linear-gradient(145deg,#372519,#1b130d)}.animation2-source img{max-width:100%;max-height:54px;object-fit:contain;image-rendering:pixelated}.animation2-source b,.animation2-source small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.animation2-source b{font-size:8px}.animation2-source small{color:#b69783;font-size:7px}.animation2-source.active{border-color:#58d7b3;background:#17352f;box-shadow:inset 0 0 0 1px #58d7b344}.animation2-motions{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.animation2-motions button{display:grid;justify-items:center;gap:4px;padding:9px 5px;border:1px solid #584233;border-radius:8px;background:#1c1511;color:#eae0da;cursor:pointer}.animation2-motions i{display:grid;width:25px;height:25px;place-items:center;border-radius:7px;background:#403026;color:#fac8a7;font-style:normal}.animation2-motions b{font-size:10px}.animation2-motions small{color:#8d95a7;font-size:7px}.animation2-motions button.active{border-color:#f4b48a;background:linear-gradient(145deg,#674d3b,#2d221a)}.animation2-motions button.active i{background:#e59c6b;color:#fff}.animation2-mode{display:grid;grid-template-columns:1fr 1fr;gap:7px}.animation2-mode button{display:grid;gap:4px;padding:10px;border:1px solid #574133;border-radius:8px;background:#1c1511;color:#f1eae5;text-align:left;cursor:pointer}.animation2-mode b{font-size:10px}.animation2-mode small{color:#b79985;font-size:8px;line-height:1.35}.animation2-mode button.active{border-color:#66d9b8;background:linear-gradient(145deg,#173a34,#251b15)}.animation2-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px}.animation2-actions button,.animation2-workbench button{padding:9px;border:1px solid #4a5060;border-radius:7px;background:#3b2c22;color:#f3ece7;font-size:9px;font-weight:800;cursor:pointer}.animation2-toggle{display:flex;align-items:center;gap:8px;padding:9px;border:1px solid #4e3b2e;border-radius:8px;background:#1c1511;color:#d5c4b8;font-size:9px;font-weight:750}.animation2-toggle input{accent-color:#e8a172}.animation2-info{display:grid;gap:4px;padding:11px;border:1px solid #634a3a;border-radius:9px;background:linear-gradient(135deg,#3f2f24,#261c16)}.animation2-info b{color:#fcd9c1;font-size:11px}.animation2-info span{color:#bb9f8c;font-size:8px;line-height:1.45}.animation2-error{margin:0;padding:9px;border:1px solid #a6526755;border-radius:8px;background:#44192350;color:#fecdd3;font-size:10px}.animation2-empty{padding:15px;border:1px dashed #644b3b;border-radius:8px;color:#c9b2a2;font-size:10px;text-align:center}.animation2-workbench{display:grid;align-content:start;gap:17px;min-width:0;padding:22px;background:radial-gradient(circle at 50% 0,#4e392b,#1a130f 68%)}.animation2-workbench>header{display:flex;align-items:center;justify-content:space-between;gap:12px}.animation2-workbench>header>div:first-child{display:grid;gap:4px}.animation2-workbench h2{margin:0;color:#fbf6f2;font-size:17px}.animation2-workbench>header>div:last-child{display:flex;flex-wrap:wrap;gap:6px}.animation2-workbench>header button:first-child{border-color:#ca936f;background:#84624c;color:#fff}.animation2-stages{display:grid;grid-template-columns:1fr 1fr;gap:12px}.animation2-stages article{overflow:hidden;border:1px solid #533e30;border-radius:11px;background:#1b1410}.animation2-stages article>header{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid #4a372b}.animation2-stages article>header b{color:#fbcaaa;font-size:9px;letter-spacing:.1em}.animation2-stages article>header small{color:#b59682;font-size:8px}.animation2-canvas-wrap{display:grid;min-height:440px;place-items:center;padding:16px;background-color:#19120e;background-image:linear-gradient(45deg,#38271b 25%,transparent 25%),linear-gradient(-45deg,#38271b 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#38271b 75%),linear-gradient(-45deg,transparent 75%,#38271b 75%);background-position:0 0,0 8px,8px -8px,-8px 0;background-size:16px 16px}.animation2-canvas-wrap canvas{display:block;width:auto;height:auto;max-width:100%;max-height:410px;image-rendering:pixelated;cursor:crosshair;touch-action:none}.animation2-timeline{overflow:hidden;border:1px solid #503c2f;border-radius:10px;background:#1c1510}.animation2-timeline>header{display:flex;justify-content:space-between;padding:10px 12px;border-bottom:1px solid #48362a}.animation2-timeline>header span{color:#fbcaaa;font-size:9px;font-weight:900;letter-spacing:.12em}.animation2-timeline>header small{color:#b59682;font-size:8px}.animation2-timeline>div{display:flex;gap:8px;overflow-x:auto;padding:11px;scrollbar-color:#8d6a53 #221a14;scrollbar-width:thin}.animation2-timeline button{position:relative;display:grid;flex:0 0 78px;gap:4px;justify-items:center;padding:5px;border:1px solid #533f31;border-radius:8px;background:#1b1410;color:#ccb6a8}.animation2-timeline button.active{border-color:#62d8b8;background:#17342f}.animation2-timeline button>span{position:absolute;z-index:1;top:7px;left:7px;display:grid;width:16px;height:16px;place-items:center;border-radius:5px;background:#120d09d9;color:#fff;font-size:7px}.animation2-timeline canvas{width:68px;height:68px;object-fit:contain;image-rendering:pixelated}.animation2-timeline b{font-size:7px}.animation2-workbench>footer{display:flex;flex-wrap:wrap;gap:14px;color:#c0a593;font-size:8px}.animation2-workbench>footer span{display:flex;align-items:center;gap:5px}.animation2-workbench>footer i{width:6px;height:6px;border-radius:999px;background:#62d9b8;box-shadow:0 0 10px #62d9b8}.animation2-sources::-webkit-scrollbar,.animation2-timeline>div::-webkit-scrollbar{width:7px;height:7px}.animation2-sources::-webkit-scrollbar-track,.animation2-timeline>div::-webkit-scrollbar-track{background:#221a14}.animation2-sources::-webkit-scrollbar-thumb,.animation2-timeline>div::-webkit-scrollbar-thumb{border-radius:99px;background:#926e56}@media(max-width:1150px){.animation2-shell{grid-template-columns:1fr}.animation2-controls{border-right:0;border-bottom:1px solid #4d3a2e}.animation2-stages{grid-template-columns:1fr}.animation2-canvas-wrap{min-height:340px}}@media(max-width:620px){.studio-animation2-view{padding-right:14px;padding-left:14px}.animation2-workbench>header{align-items:flex-start;flex-direction:column}.animation2-sources{grid-template-columns:repeat(3,1fr)}.animation2-canvas-wrap{min-height:280px}.animation2-mode{grid-template-columns:1fr}}