@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');
:root{font-family:'DM Sans',system-ui,sans-serif;color:#e6e8ee;background:#15171e;font-size:13px}*{box-sizing:border-box}body{margin:0;min-width:850px;height:100vh;display:flex;flex-direction:column;overflow:hidden}button,select,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #e9a873;outline-offset:2px}.topbar{height:66px;flex:none;background:#20232c;border-bottom:1px solid #353843;display:flex;align-items:center;padding:0 22px;gap:32px}.brand{display:flex;align-items:center;gap:10px;min-width:194px}.logo{width:35px;height:35px;background:#ed8c70;color:#24222b;border-radius:10px;display:grid;place-items:center;font-size:23px}.brand strong{font-family:'Space Grotesk';font-size:17px;letter-spacing:-.6px}.brand small{display:block;color:#858a98;font-size:8px;letter-spacing:1.8px;margin-top:2px}.project{border:1px solid #3b3e49;border-radius:8px;background:#282b35;padding:10px 13px;color:#ddd;min-width:193px}.project-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#ef9976;margin-right:8px}.chevron{float:right;color:#777}.right{margin-left:auto;display:flex;align-items:center;gap:16px}.connection{font-size:11px;color:#91bfa0}.avatars{display:flex;padding-left:6px}.avatar{width:28px;height:28px;border:2px solid #20232c;border-radius:50%;display:grid;place-items:center;margin-left:-7px;color:#fff;font-size:11px;font-weight:700}.share{border:0;background:#eb9175;color:#29232a;font-weight:700;padding:10px 15px;border-radius:7px}.workspace{display:flex;min-height:0;flex:1}.rail{width:73px;flex:none;background:#20232c;border-right:1px solid #343743;display:flex;align-items:center;flex-direction:column;padding:21px 8px 11px;gap:7px}.rail-label,.section-title,.inspector-heading,.crumb,.timeline-title,.stage-hint,.status{letter-spacing:1.4px;font-size:10px;font-weight:700;color:#9398a6}.rail-label{margin-bottom:14px;font-size:9px}.tool{width:54px;height:55px;border:0;border-radius:9px;background:transparent;color:#9da2ae;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:1px}.tool span{font-size:23px;line-height:26px}.tool small{font-size:9px}.tool:hover,.tool.active{color:#f4a280;background:#3a3439}.divider{height:1px;background:#3a3d48;width:36px;margin:9px 0}.rail-bottom{margin-top:auto;color:#777b89;font-size:20px}.main{flex:1;min-width:0;display:flex;flex-direction:column;background:#191c24}.canvas-top{height:51px;border-bottom:1px solid #323540;display:flex;align-items:center;justify-content:space-between;padding:0 24px}.crumb span{color:#5d6270;padding:0 9px}.canvas-actions{display:flex;align-items:center;gap:15px;color:#a8adba;font-size:11px}.toggle{display:flex;align-items:center;gap:8px;cursor:pointer}.toggle input{position:absolute;opacity:0}.switch{width:27px;height:15px;border-radius:10px;background:#565a65;position:relative}.switch:before{content:'';position:absolute;background:white;width:11px;height:11px;border-radius:50%;left:2px;top:2px;transition:.15s}.toggle input:checked+.switch{background:#dd8c72}.toggle input:checked+.switch:before{transform:translateX(12px)}.separator{height:18px;width:1px;background:#3b3d47}.stage{flex:1;min-height:0;position:relative;display:flex;align-items:center;justify-content:center;padding:35px 45px 44px;background-image:radial-gradient(#333743 1px,transparent 1px);background-size:19px 19px}.stage-hint{position:absolute;top:19px;left:24px;font-size:9px}.canvas-shell{position:relative;width:min(100%,calc((100vh - 380px)*1.7778));aspect-ratio:16/9;background:#fff;box-shadow:0 22px 55px #07081085,0 0 0 1px #b6b8bd;border-radius:2px;touch-action:none}.canvas-shell canvas{position:absolute;width:100%;height:100%;left:0;top:0}.canvas-shell #overlay{cursor:crosshair;touch-action:none}.stage-bottom{position:absolute;bottom:16px;left:24px;right:24px;display:flex;justify-content:space-between;color:#7d8392;font-size:10px}.stage-bottom span:first-child{font-style:italic}.inspector{width:254px;flex:none;border-left:1px solid #353843;background:#22252e;padding:22px 19px;display:flex;flex-direction:column}.inspector-heading{display:flex;justify-content:space-between;color:#e1e3e9}.inspector-heading span{font-size:14px;line-height:7px;color:#818694}.preview{height:94px;margin:20px 0 27px;background:#2e323e;border:1px solid #3d414e;border-radius:9px;display:grid;place-items:center}.preview div{width:70%;height:12px;background:#ec6a58;border-radius:50%;transform:rotate(-11deg);box-shadow:0 0 1px #ec6a58}.section-title{font-size:9px;color:#9298a6}.field{display:block;margin-top:22px;color:#c6cad4}.field span{display:flex;justify-content:space-between;font-size:11px}.field b{font-weight:500;color:#f2a082}.field input{width:100%;margin:14px 0 4px;accent-color:#ed9679;height:4px}.color-title{display:flex;justify-content:space-between;margin-top:34px}.color-title span{color:#d7d9de;letter-spacing:0;font-weight:500}.swatches{display:flex;flex-wrap:wrap;gap:8px;margin-top:17px}.swatch,.custom-color{width:25px;height:25px;border:0;border-radius:50%;position:relative}.swatch.selected:after{content:'';position:absolute;inset:-4px;border:1px solid #e9a17f;border-radius:50%}.custom-color{display:grid;place-items:center;background:#393d48;color:#ddd;overflow:hidden;cursor:pointer;font-size:18px}.custom-color input{position:absolute;opacity:0;inset:0;cursor:pointer}.help{margin-top:auto;border:1px solid #493d3d;background:#332b30;border-radius:9px;padding:15px;color:#eba489}.help span{font-size:9px;letter-spacing:1.1px;font-weight:700}.help p{color:#aaa4aa;font-size:11px;line-height:1.5;margin:10px 0 0}.timeline{height:222px;flex:none;background:#20232b;border-top:1px solid #3d404a}.timeline-header{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 22px;border-bottom:1px solid #343742}.timeline-title{min-width:215px;color:#e5e7ec}.timeline-title span{font-size:9px;color:#898e9b;padding-left:12px}.transport{display:flex;align-items:center;gap:10px}.transport button{border:0;background:transparent;color:#ced1d9;padding:6px;font-size:12px}.transport .play{border-radius:50%;width:31px;height:31px;background:#e99074;color:#26232b;font-size:12px}.transport span{font-family:monospace;color:#b5bac6;margin-left:9px}.timeline-right{display:flex;gap:16px;align-items:center;color:#9da2af;font-size:10px}.timeline-right select{background:#30333e;border:1px solid #444854;color:#eceef2;padding:5px;border-radius:5px;margin-left:5px}.timeline-right button{color:#ddd;background:#30333e;border:1px solid #454954;border-radius:6px;padding:8px 10px}.timeline-body{height:130px;display:flex}.track-label{width:171px;border-right:1px solid #393c47;display:flex;flex-direction:column;justify-content:center;padding-left:24px;position:relative}.track-label strong{font-size:12px;padding-left:29px}.track-label small{color:#858a98;font-size:8px;letter-spacing:1px;padding:6px 0 0 29px}.track-icon{position:absolute;top:48px;color:#e8997b;border:1px solid #54423f;background:#43343a;padding:5px;border-radius:5px}.frames-wrap{min-width:0;flex:1;overflow:auto}.ruler{height:30px;border-bottom:1px solid #353843;display:flex;gap:3px;padding:9px 13px;color:#8e93a1;font-size:9px}.ruler span{width:72px;flex:none}.frames{display:flex;align-items:center;gap:4px;padding:9px 13px;min-height:92px}.frame{width:72px;height:71px;flex:none;border:2px solid #50535d;border-radius:6px;background:#fff;position:relative;overflow:hidden;padding:0}.frame.selected{border-color:#f2a17e;box-shadow:0 0 0 2px #f2a17e44}.frame canvas{width:100%;height:100%}.frame em{position:absolute;bottom:0;left:0;padding:2px 4px;background:#21242bc9;color:#fff;font-size:8px;font-style:normal}.frame-actions{width:87px;border-left:1px solid #393c47;display:flex;align-items:center;justify-content:center;flex-direction:column}.frame-actions button{width:80px;background:none;border:0;color:#c1c5ce;font-size:17px;line-height:18px;text-align:left;padding:4px 8px}.frame-actions small{font-size:9px;padding-left:5px}.frame-actions button:hover{color:#f2a17e}.status{height:36px;border-top:1px solid #373a44;display:flex;justify-content:space-between;align-items:center;padding:0 22px;letter-spacing:.3px;font-weight:500}.status span:first-child{color:#9a9fac}.toast{position:fixed;left:50%;bottom:235px;transform:translateX(-50%);background:#363a45;color:#fff;padding:10px 16px;border-radius:8px;box-shadow:0 10px 30px #0007;opacity:0;pointer-events:none;transition:opacity .2s;z-index:5}.toast.show{opacity:1}@media(max-width:1100px){.inspector{width:205px}.stage{padding:28px 25px}.project{display:none}.rail{width:62px}.timeline-title{min-width:160px}}