@font-face{font-family:Barlow;src:url(/fonts/Barlow-Regular.woff2)format("woff2");font-weight:400;font-display:swap}@font-face{font-family:Barlow;src:url(/fonts/Barlow-Medium.woff2)format("woff2");font-weight:500 700;font-display:swap}@font-face{font-family:Big Shoulders;src:url(/fonts/BigShouldersDisplay-Bold.woff2)format("woff2");font-weight:700;font-display:swap}:root{color:#e8edf3;font-synthesis:none;--panel:#20252c;--surface:#292f38;--border:#39414b;--muted:#acb8c6;--accent:#3aefe4;background:#171b21;font-family:Barlow,Arial,sans-serif;font-size:13px;font-weight:400}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit;color:inherit}button,.button{border:1px solid var(--border);cursor:pointer;white-space:nowrap;background:#2b323c;border-radius:3px;min-height:29px;padding:5px 10px;line-height:1.2;text-decoration:none}button:hover,.button:hover{background:#39434f;border-color:#657485}button:disabled{opacity:.4;cursor:default}button.primary,.button.primary{color:#00163b;background:#3aefe4;border-color:#3aefe4;font-weight:600}button.primary:hover,.button.primary:hover{background:#8af6ee}button.danger{color:#ffb0a9}button[aria-pressed=true]{color:#3aefe4;background:#183a40;border-color:#3aefe4}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline-offset:2px;outline:2px solid #3aefe4}input,select,textarea{background:#171d25;border:1px solid #4a5664;border-radius:3px;min-width:0;min-height:29px;padding:5px 7px}input[type=color]{cursor:pointer;width:35px;height:29px;padding:2px}input[type=range]{accent-color:#3aefe4;min-height:15px;padding:0}input[type=checkbox]{accent-color:#3aefe4;min-height:14px}select{max-width:100%}label{color:#c5cfdc;flex-direction:column;gap:5px;margin-bottom:12px;font-size:12px;display:flex}label input,label select{color:#f2f5f9}h2{margin:0 0 10px;font-size:14px;font-weight:500}h3{color:#f1f5fa;border-top:1px solid var(--border);margin:20px 0 12px;padding-top:15px;font-size:12px;font-weight:500}p{line-height:1.5}.hint,.muted{color:var(--muted)}.hint{margin:8px 0 14px;font-size:12px;line-height:1.55}a{color:#7be8e0}.studio{flex-direction:column;height:100dvh;min-height:620px;display:flex;overflow:hidden}.topbar{background:#00163b;border-bottom:1px solid #31435a;flex-shrink:0;align-items:center;gap:8px;height:57px;padding:0 16px;display:flex}.wordmark{white-space:nowrap;align-items:center;gap:14px;font-family:Big Shoulders,Barlow,sans-serif;font-size:22px;font-weight:700;display:flex}.wordmark span{color:#bfcedf;border-left:1px solid #5d6f89;padding-left:14px;font:400 13px Barlow}.project-name{text-overflow:ellipsis;background:0 0;border-color:#0000;width:25vw;max-width:310px;margin-left:auto}.project-name:hover{border-color:#536279}.format{color:#c2d0e1;white-space:nowrap;margin:0 12px;font-size:11px}.workarea{flex:1;grid-template-columns:248px minmax(350px,1fr) 264px;min-height:0;display:grid}.library,.properties{background:var(--panel);flex-direction:column;min-height:0;display:flex;overflow:hidden}.library{border-right:1px solid var(--border)}.properties{border-left:1px solid var(--border)}.tabs{border-bottom:1px solid var(--border);flex-shrink:0;align-items:stretch;height:43px;padding:0 6px;display:flex}.tabs button{background:0 0;border:0;border-bottom:2px solid #0000;border-radius:0;min-width:0;padding:0 7px;font-size:12px}.tabs button.active{color:#3aefe4;border-bottom-color:#3aefe4}.library-content{scrollbar-width:thin;flex:1;padding:17px 14px;overflow:auto}.template{text-align:left;background:#232b35;border-color:#3c4653;flex-direction:column;width:100%;margin:0 0 14px;padding:0 0 11px;display:flex;overflow:hidden}.template:hover{background:#303a47;border-color:#73889f}.template-thumb{border-bottom:1px solid #3c4653;width:100%;height:98px;margin-bottom:9px}.template strong{padding:0 11px;font-size:13px;font-weight:500}.template span{color:#b8c6d7;padding:5px 11px 0;font-size:11px}.full{white-space:normal;width:100%;margin-bottom:10px}.row{align-items:center;gap:6px;display:flex}.row>*{min-width:0}.row>button{flex:1}.row label{margin:0}.asset-grid{grid-template-columns:1fr 1fr;gap:8px;margin:12px 0 20px;display:grid}.asset{flex-direction:column;justify-content:center;align-items:center;width:100%;min-width:0;height:89px;padding:5px;display:flex}.asset span{text-overflow:ellipsis;text-align:center;width:100%;font-size:11px;display:block;overflow:hidden}.asset img{object-fit:contain;width:100%;height:52px}.imported select{width:100%;margin:4px 0;font-size:10px}.imported .full{padding:3px;font-size:10px}.effect{text-align:left;align-items:center;gap:12px;width:100%;margin-bottom:8px;padding:10px;display:flex}.effect>span:last-child{margin-left:auto}.effect-symbol{color:#3aefe4;width:30px;font-size:25px;line-height:1}.effect small{color:var(--muted);margin-top:4px;font-size:11px;display:block}.library textarea{resize:vertical;white-space:pre;width:100%;height:230px;margin-bottom:10px;font:11px/1.5 monospace}.library a{margin-top:10px;font-size:12px;display:block}.workspace{background:#15191e;flex-direction:column;min-width:0;min-height:0;display:flex}.canvas-toolbar{background:#252b33;border-bottom:1px solid #313944;flex-shrink:0;justify-content:space-between;align-items:center;height:43px;padding:0 12px;display:flex}.canvas-toolbar button{background:0 0;min-height:26px;padding:4px 8px;font-size:11px}.canvas-toolbar .divider{border-left:1px solid #56616f;height:20px;margin:0 4px}.canvas-toolbar select{width:70px;min-height:26px;font-size:11px}.canvas-stage{background:#13171c;flex:1;justify-content:center;align-items:center;min-height:140px;padding:30px 32px;display:flex;overflow:hidden}.canvas-wrapper{aspect-ratio:16/9;transform-origin:50%;flex-shrink:0;width:100%;max-width:min(100%,177.78dvh - 782.232px);max-height:100%;position:relative;box-shadow:0 2px 8px #0005}.canvas-wrapper canvas{touch-action:none;cursor:crosshair;width:100%;height:100%;display:block}.preview-footer{color:#bbc6d4;border-top:1px solid #303844;flex-shrink:0;justify-content:space-between;align-items:center;height:28px;padding:0 14px;font-size:11px;display:flex}.timeline{background:#20262e;border-top:1px solid #414c5b;flex-direction:column;flex-shrink:0;min-width:0;height:261px;display:flex}.transport{border-bottom:1px solid var(--border);flex-shrink:0;align-items:center;gap:6px;height:43px;padding:0 12px;display:flex}.transport button{background:0 0;border:0;min-width:25px;padding:5px}.transport .play{color:#3aefe4;border:1px solid #475661;width:32px}.timecode{font-variant-numeric:tabular-nums;color:#eef8f6;margin:0 8px;font-size:14px}.transport .muted{font-size:11px}.spacer{flex:1}.inline{flex-direction:row;align-items:center;gap:6px;margin:0;font-size:11px}.inline input{width:61px;min-height:25px;font-size:12px}.ruler{border-bottom:1px solid var(--border);flex-shrink:0;grid-template-columns:180px 1fr;height:39px;display:grid}.ruler>span{color:#b4c1cf;padding:12px 10px;font-size:10px}.ruler>div{padding:3px 10px 0 0;position:relative}.ruler-numbers{color:#b0bdcd;pointer-events:none;justify-content:space-between;font-size:10px;display:flex}.ruler input{width:100%;height:13px;margin:2px 0 0;display:block}.tracks{scrollbar-width:thin;flex:1;overflow:auto}.track{border-bottom:1px solid #303945;grid-template-columns:180px 1fr;min-width:0;height:30px;display:grid}.track.selected{background:#243c45}.layer-name{border-right:1px solid #414d5c;align-items:center;min-width:0;display:flex}.layer-name button{text-overflow:ellipsis;text-align:left;background:0 0;border:0;min-height:25px;padding:3px 7px;font-size:11px;overflow:hidden}.layer-name button:first-child{color:#c5d9d8;flex-shrink:0;font-size:9px}.layer-name button:last-child{flex:1}.kind-mark{color:#9dafc3;width:21px;display:inline-block}.track-space{cursor:pointer;margin-right:10px;position:relative;overflow:hidden}.clip{text-overflow:ellipsis;text-align:left;color:#d7f3f2;touch-action:none;cursor:ew-resize;background:#28525a;border:1px solid #4b7d83;border-radius:2px;min-width:3px;height:19px;min-height:19px;padding:1px 6px;font-size:10px;position:absolute;top:5px;overflow:hidden}.clip.platform{background:#354d6b;border-color:#607a9b}.clip.label{background:#3a4554;border-color:#607085}.clip.detection{background:#654f29;border-color:#a28343}.playhead{pointer-events:none;z-index:1;background:#dffbf5;width:1px;height:100%;position:absolute;top:0}.panel-heading{border-bottom:1px solid var(--border);flex-shrink:0;justify-content:space-between;align-items:center;height:43px;padding:0 16px;display:flex}.panel-heading h2{margin:0;font-size:13px}.panel-heading>span{color:#afbfd0;font-size:11px}.property-content{scrollbar-width:thin;flex:1;padding:15px 16px;overflow:auto}.fields{grid-template-columns:1fr 1fr;gap:0 10px;display:grid}.fields label{font-size:11px}.fields input{width:100%}.check{flex-direction:row;align-items:center;gap:7px;line-height:1.4}.check input{margin:0}.color-field{flex-direction:row;justify-content:space-between;align-items:center;gap:8px;font-size:12px}.color-field input{margin-left:auto}.color-field span{color:#c2ccd8;font-variant-numeric:tabular-nums;width:51px;font-size:10px}details{border-top:1px solid var(--border);margin:20px 0 5px;padding-top:15px}summary{cursor:pointer;font-size:12px}.statusbar{color:#c3cfdd;background:#222a34;border-top:1px solid #3c4652;flex-shrink:0;justify-content:space-between;align-items:center;gap:15px;height:28px;padding:0 12px;font-size:11px;display:flex}.statusbar>span:first-child{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.statusbar>span:last-child{white-space:nowrap}.export-backdrop{z-index:10;background:#0009;justify-content:center;align-items:center;padding:24px;display:flex;position:fixed;inset:0}.export-panel{background:#202832;border:1px solid #5c7084;width:550px;max-height:95dvh;padding:0 24px 24px;overflow:auto;box-shadow:0 2px 8px #0006}.export-panel .panel-heading{height:55px;margin:0 -8px;padding:0}.export-panel h2{font-size:18px}.export-panel p{font-size:13px}.export-panel .row{margin-top:18px}.export-panel progress{accent-color:#3aefe4;width:100%}.export-panel video{width:100%;margin-bottom:14px;display:block}.export-panel a{text-align:center;display:block}.export-panel .panel-heading button{background:0 0;border:0;font-size:22px}@media (width>=1700px){.workarea{grid-template-columns:260px minmax(350px,1fr) 290px}.timeline{height:300px}.canvas-wrapper{max-width:min(100%,177.78dvh - 853.344px)}}@media (width<=1150px){.workarea{grid-template-columns:210px minmax(320px,1fr) 230px}.wordmark span,.format{display:none}.topbar{padding:0 10px}.project-name{max-width:240px}.library-content{padding:13px 10px}.property-content{padding:12px}.tabs button{padding:0 5px;font-size:11px}.canvas-stage{padding:16px}.ruler,.track{grid-template-columns:145px 1fr}.transport{gap:2px;padding:0 6px}.transport .muted{display:none}.template-thumb{height:83px}}@media (width<=860px){.studio{min-width:800px}.workarea{grid-template-columns:190px minmax(300px,1fr) 220px}.preview-footer .muted{display:none}}@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}.canvas-toolbar .row>button{flex:none}.studio{min-width:0;min-height:600px}.workarea{grid-template-columns:none}.project-name{border:0;width:24vw;max-width:310px;margin-left:auto;padding:0}.project-name label{gap:0;margin:0;font-size:0}.project-name input{background:0 0;border-color:#0000;width:100%;font-size:13px}.project-name input:focus{border-color:#697e95}.library-switch{z-index:1;position:absolute;top:7px;right:3px}.library{position:relative}.library .tabs{padding-right:22px}.library-switch button{min-height:25px;padding:2px 5px}.library.collapsed .library-switch{margin:5px;position:static}.library.collapsed .tabs{border:0;flex-direction:column;height:auto;padding:0;display:flex}.library.collapsed .tabs button{min-height:38px;padding:10px 4px}.properties{position:relative}.panel-toggle{z-index:1;min-height:25px;padding:2px 5px;position:absolute;top:6px;right:3px}.properties.collapsed{overflow:visible}.properties .panel-heading{padding-right:32px}.splitter{cursor:col-resize;touch-action:none;background:#303945;flex-shrink:0;width:5px}.splitter:hover,.splitter:focus{background:#3aefe4}.splitter.horizontal{cursor:row-resize;width:100%;height:5px}.canvas-stage{min-height:100px;padding:16px;position:relative}.canvas-wrapper{aspect-ratio:auto;flex-shrink:0;max-width:none;max-height:none}.layout-caption{color:#afbfce;pointer-events:none;font-size:10px;position:absolute;bottom:3px;left:12px}.canvas-toolbar{gap:8px;min-height:43px;overflow:auto}.canvas-toolbar>.row{flex-shrink:0}.canvas-toolbar select{width:68px}.canvas-toolbar button{white-space:nowrap}.timeline{height:auto;min-height:180px}.transport{flex-shrink:0;gap:5px;height:49px;overflow-x:auto}.transport>button{flex-shrink:0}.transport label{flex-shrink:0;gap:0;width:64px;margin:0;font-size:10px}.transport label:first-of-type{width:52px}.transport input[type=number]{width:100%;min-height:25px;padding:2px 4px;font-size:11px}.transport input[type=range]{flex:1;width:80px;min-width:55px}.transport .timecode{white-space:nowrap;margin:0 4px;font-size:12px}.timeline-tools{flex-shrink:0;align-items:center;gap:10px;height:35px;padding:3px 8px;display:flex}.timeline-tools input{width:170px;height:26px;min-height:26px;font-size:11px}.timeline-tools span{color:#b0bfce;margin-left:auto;font-size:10px}.selection-timing{border-bottom:1px solid #39414b;flex-shrink:0;align-items:center;gap:6px;height:28px;padding:2px 8px;font-size:10px;display:flex}.selection-timing button{min-height:23px;padding:3px 7px;font-size:10px}.ruler{grid-template-columns:230px 1fr;height:23px}.ruler>span{padding:4px 7px;font-size:10px}.ruler>div{color:#b4c2d0;justify-content:space-between;padding:4px 8px;font-size:10px;display:flex}.track-group{text-align:left;background:#28323e;border:0;border-bottom:1px solid #43515f;border-radius:0;width:100%;height:26px;min-height:26px;padding:4px 10px;font-size:11px}.track-group span{float:right;color:#c3cfdd;font-size:10px}.track{grid-template-columns:230px 1fr;height:32px}.layer-name>button{min-height:28px!important}.layer-name>button:not(:last-child){text-align:center;flex-shrink:0;width:25px;padding:4px}.layer-name>button:last-child{font-size:11px}.track-space .clip{height:24px;min-height:24px;padding:0;display:flex;top:3px;overflow:visible}.clip>button{height:24px;min-height:24px;color:inherit;touch-action:none;background:0 0;border:0;border-radius:0;padding:2px;font-size:10px;overflow:hidden}.clip .trim{cursor:ew-resize;color:#cff7ed;flex-shrink:0;width:8px;overflow:visible}.clip .clip-body{text-align:left;cursor:ew-resize;white-space:nowrap;text-overflow:ellipsis;flex:1}.asset-mask{flex-shrink:0;height:52px;-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;width:100%!important;display:block!important}.asset img{background:#e8edf2}.template-thumb{aspect-ratio:16/9;display:block;height:auto!important}.symbol-list{flex-wrap:wrap;gap:5px;display:flex}.symbol-list button{padding:5px;font-size:10px}.local-asset{border-top:1px solid #3d4854;padding:10px 0}.local-asset span{margin-bottom:5px;display:block}.local-asset select{width:100%;margin-bottom:5px}.effect{justify-content:space-between}.property-content fieldset{border:0;min-width:0;margin:0;padding:0}.property-content fieldset:disabled{opacity:.6}.property-content textarea{resize:vertical;width:100%}.property-content .row{margin-bottom:10px}.notice{color:#ffe2a7;background:#3a3325;border:1px solid #756039;padding:8px;font-size:11px;line-height:1.5}.property-content h3{margin:15px 0 10px}.library input[aria-label=Search\ icons]{width:100%;margin-bottom:12px}.statusbar{gap:10px;height:32px}.statusbar [role=alert]{color:#ffb8ac}.statusbar .unsaved{color:#f1d59b}.statusbar button{background:0 0;min-height:23px;padding:3px 6px;font-size:10px}.statusbar>span:nth-child(2){flex-shrink:0;font-size:10px}.export-panel{padding-top:18px}.export-panel [role=alert]{color:#ffd0bf;border:1px solid #b46d57;padding:8px}.loading{color:#dce9f1;padding:40px}.row button{white-space:normal}@media (width<=1150px){.topbar{gap:5px}.topbar button{padding:5px 7px;font-size:11px}.project-name{width:20vw;min-width:80px}.wordmark{font-size:20px}.canvas-stage{padding:12px}.canvas-toolbar button{padding:4px 6px}.ruler,.track{grid-template-columns:190px 1fr}.layer-name>button:last-child{font-size:10px}.timeline-tools span{display:none}.timeline-tools input{width:140px}.timeline-tools{gap:5px}.transport .timecode{display:none}.preview-footer,.statusbar{font-size:10px}}@media (width<=820px){.wordmark{font-size:17px}.topbar{padding:0 7px}.project-name{width:90px}.topbar>button{padding:4px 5px;font-size:10px}.ruler,.track{grid-template-columns:155px 1fr}.layer-name>button:not(:last-child){width:22px}.statusbar>span:nth-child(2){max-width:90px;overflow:hidden}.preview-footer>span:first-child{white-space:nowrap;max-width:100px;overflow:hidden}.canvas-toolbar{padding:0 5px}.timeline-tools input{width:110px}.transport{gap:3px;padding:0 5px}.transport button{min-width:22px;padding:3px}}@font-face{font-family:Barlow;src:url(/fonts/Barlow-Semibold.otf)format("opentype");font-weight:600;font-display:swap}
