.page-module__8SupJG__page{background:var(--bg-primary);flex-direction:column;height:100vh;display:flex}.page-module__8SupJG__main{flex:1;display:flex;overflow:hidden}.page-module__8SupJG__leftPanel{flex-direction:column;flex:1;gap:6px;min-width:0;padding:8px 24px 12px;display:flex;overflow:hidden}.page-module__8SupJG__titleRow{justify-content:space-between;align-items:center;display:flex}.page-module__8SupJG__title{background:linear-gradient(90deg,#f0624a,#1e3a74);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-family:Helvetica Neue,sans-serif;font-size:28px;font-weight:800;line-height:1.1}.page-module__8SupJG__titleControls{align-items:center;gap:12px;display:flex}.page-module__8SupJG__cellCount{color:var(--text-dark);font-size:13px;font-weight:600}.page-module__8SupJG__gridSection{flex:1;justify-content:center;align-items:center;min-height:0;display:flex;overflow:hidden}.page-module__8SupJG__gridScaler{transform-origin:50%}.page-module__8SupJG__frameStrip{align-items:stretch;gap:8px;display:flex}.page-module__8SupJG__rightPanel{flex-direction:column;flex-shrink:0;width:320px;display:flex}.page-module__8SupJG__rightPanelHeader{border-bottom:1px solid #ffffff14;justify-content:space-between;align-items:center;gap:12px;padding:8px 16px;display:flex}@media (min-width:1024px){.page-module__8SupJG__rightPanel{width:420px}}
.NavBar-module__RNwNHG__nav{z-index:40;background:#1e3a74;border-bottom:1px solid #2a4d8f;justify-content:space-between;align-items:center;height:64px;padding:0 24px;display:flex;position:sticky;top:0}.NavBar-module__RNwNHG__logo{align-items:center;text-decoration:none;display:flex}.NavBar-module__RNwNHG__logoImg{width:auto;height:36px}.NavBar-module__RNwNHG__links{align-items:center;gap:4px;display:flex}.NavBar-module__RNwNHG__link{color:#9ca3af;border-radius:6px;padding:6px 12px;font-size:14px;font-weight:500;text-decoration:none;transition:background .15s,color .15s}.NavBar-module__RNwNHG__link:hover{color:#fff;background:#2a4d8f}.NavBar-module__RNwNHG__linkPrimary{color:#fff;background:#f0624a;border-radius:6px;padding:6px 12px;font-size:14px;font-weight:600;text-decoration:none;transition:background .15s}.NavBar-module__RNwNHG__linkPrimary:hover{background:#d94f38}
.PixelGrid-module__BpEqLa__gridContainer{position:relative}.PixelGrid-module__BpEqLa__gridWrapper{background:#fff;border:1px solid #fff;border-radius:4px;display:inline-block;overflow:hidden}.PixelGrid-module__BpEqLa__table{border-collapse:collapse}.PixelGrid-module__BpEqLa__headerCell{text-align:center;vertical-align:middle;color:#1e3a74;-webkit-user-select:none;user-select:none;background:#e8eef5;border:1px solid #c5cfdb;width:24px;height:24px;font-family:Helvetica Neue,sans-serif;font-size:12px;font-weight:700}.PixelGrid-module__BpEqLa__cornerCell{background:#e8eef5;border:1px solid #c5cfdb;width:24px;height:24px}.PixelGrid-module__BpEqLa__rowHeader{text-align:center;vertical-align:middle;color:#1e3a74;-webkit-user-select:none;user-select:none;background:#e8eef5;border:1px solid #c5cfdb;width:24px;height:24px;font-family:Helvetica Neue,sans-serif;font-size:12px;font-weight:700}.PixelGrid-module__BpEqLa__cell{border:1px solid #e0e0e0;width:24px;height:24px;transition:background-color .15s}.PixelGrid-module__BpEqLa__cellGhost{background-color:#27755426}.PixelGrid-module__BpEqLa__cellFilled{transition:background-color .1s}.PixelGrid-module__BpEqLa__cellClickable{cursor:pointer}.PixelGrid-module__BpEqLa__cellClickable:hover{outline-offset:-2px;outline:2px solid #54a5ce99}
.AnimationCodeEditor-module__jBMsZW__editorPanel{background:var(--bg-editor);border-radius:8px;flex-direction:column;width:100%;height:100%;display:flex;position:relative;overflow:hidden}.AnimationCodeEditor-module__jBMsZW__disabled{opacity:.6;pointer-events:none}.AnimationCodeEditor-module__jBMsZW__bgOverlay{opacity:.05;pointer-events:none;background:repeating-linear-gradient(45deg,#0000,#0000 20px,#ffffff08 20px 40px);position:absolute;inset:0}.AnimationCodeEditor-module__jBMsZW__editorContent{z-index:1;flex-direction:column;flex:1;padding:16px 24px;display:flex;position:relative;overflow:hidden}.AnimationCodeEditor-module__jBMsZW__paletteSection{margin-bottom:12px}.AnimationCodeEditor-module__jBMsZW__paletteLabel{color:#fff;letter-spacing:.5px;margin-bottom:8px;font-size:14px;font-weight:700;display:block}.AnimationCodeEditor-module__jBMsZW__paletteGrid{grid-template-columns:repeat(10,1fr);gap:5px;margin-bottom:8px;display:grid}.AnimationCodeEditor-module__jBMsZW__colorSwatch{aspect-ratio:1;cursor:pointer;border:2px solid #0000;border-radius:4px;width:100%;transition:transform .1s,border-color .15s}.AnimationCodeEditor-module__jBMsZW__colorSwatch:hover{transform:scale(1.15)}.AnimationCodeEditor-module__jBMsZW__colorSwatchActive{box-shadow:0 0 0 2px var(--accent-blue);border-color:#fff;transform:scale(1.1)}.AnimationCodeEditor-module__jBMsZW__selectedColorInfo{align-items:center;gap:8px;display:flex}.AnimationCodeEditor-module__jBMsZW__selectedPreview{border:1px solid #ffffff4d;border-radius:4px;width:18px;height:18px}.AnimationCodeEditor-module__jBMsZW__selectedName{color:#ffffffe6;font-size:13px;font-weight:500}.AnimationCodeEditor-module__jBMsZW__selectedLabel{color:#ffffff80;font-weight:400}.AnimationCodeEditor-module__jBMsZW__instruction{background:#ffffff0d;border-radius:8px;align-items:center;gap:6px;margin-bottom:8px;padding:4px 8px;display:flex}.AnimationCodeEditor-module__jBMsZW__instructionText{color:#ffffffb3;font-size:11px;font-weight:500;line-height:1.3}.AnimationCodeEditor-module__jBMsZW__controlRow{gap:8px;margin-bottom:10px;display:flex}.AnimationCodeEditor-module__jBMsZW__controlButton{color:#fffc;cursor:pointer;background:#ffffff1a;border:none;border-radius:4px;align-items:center;gap:5px;padding:5px 12px;font-size:12px;font-weight:700;transition:background .15s;display:flex}.AnimationCodeEditor-module__jBMsZW__controlButton:hover:not(:disabled){background:#fff3}.AnimationCodeEditor-module__jBMsZW__controlButton:disabled{opacity:.4;cursor:not-allowed}.AnimationCodeEditor-module__jBMsZW__controlIcon{width:14px;height:14px}.AnimationCodeEditor-module__jBMsZW__modeToggle{background:#0003;border-radius:6px;gap:4px;margin-bottom:10px;padding:3px;display:flex}.AnimationCodeEditor-module__jBMsZW__modeBtn{color:#ffffff80;cursor:pointer;background:0 0;border:none;border-radius:4px;flex:1;justify-content:center;align-items:center;gap:6px;padding:7px 12px;font-size:13px;font-weight:700;transition:background .15s,color .15s;display:flex}.AnimationCodeEditor-module__jBMsZW__modeBtn:hover:not(:disabled){color:#fffc}.AnimationCodeEditor-module__jBMsZW__modeBtnActive{background:var(--accent-blue);color:#fff}.AnimationCodeEditor-module__jBMsZW__modeBtnActive:hover:not(:disabled){color:#fff}.AnimationCodeEditor-module__jBMsZW__editorArea{background:var(--bg-editor-inner);border-radius:8px;flex-direction:column;flex:1;min-height:0;padding:12px;display:flex}.AnimationCodeEditor-module__jBMsZW__codeBlock{background:#000;border:2px solid #298fc2;border-radius:4px;flex-direction:column;flex:1;gap:3px;min-height:80px;padding:12px;display:flex;overflow-y:auto;box-shadow:0 4px 4px #00000040}.AnimationCodeEditor-module__jBMsZW__codeLine{align-items:center;gap:8px;font-family:Helvetica Neue,monospace;font-size:13px;line-height:1.6;display:flex}.AnimationCodeEditor-module__jBMsZW__lineNumber{color:#fff;text-align:right;-webkit-user-select:none;user-select:none;flex-shrink:0;min-width:16px;font-weight:700}.AnimationCodeEditor-module__jBMsZW__colorDot{border:1px solid #fff3;border-radius:50%;flex-shrink:0;width:10px;height:10px}.AnimationCodeEditor-module__jBMsZW__lineText{color:#fff}.AnimationCodeEditor-module__jBMsZW__inputLine{align-items:center;gap:8px;font-family:Helvetica Neue,monospace;font-size:13px;line-height:1.6;display:flex}.AnimationCodeEditor-module__jBMsZW__codeInput{color:#fff;caret-color:#fff;background:0 0;border:none;outline:none;width:100%;font-family:Helvetica Neue,monospace;font-size:13px;line-height:1.6}.AnimationCodeEditor-module__jBMsZW__codeInput::placeholder{color:#ffffff4d}.AnimationCodeEditor-module__jBMsZW__nextLineButton{color:#fffc;cursor:pointer;background:#ffffff1f;border:1px solid #fff3;border-radius:6px;flex-shrink:0;padding:3px 8px;font-size:14px;line-height:1;transition:background .15s,color .15s}.AnimationCodeEditor-module__jBMsZW__nextLineButton:hover:not(:disabled){color:#fff;background:#ffffff38}.AnimationCodeEditor-module__jBMsZW__nextLineButton:disabled{opacity:.3;cursor:default}.AnimationCodeEditor-module__jBMsZW__enterHint{color:#ffffffd9;letter-spacing:.25px;text-align:center;margin-top:8px;font-size:12px;font-weight:600}.AnimationCodeEditor-module__jBMsZW__hintText{color:#fff9;letter-spacing:.5px;margin-top:6px;font-size:11px}
.Timeline-module__5tgDcG__timeline{background:var(--bg-editor);border-radius:6px;align-items:center;gap:10px;padding:6px 12px;display:flex}.Timeline-module__5tgDcG__label{color:#fff9;letter-spacing:.5px;text-transform:uppercase;flex-shrink:0;font-size:12px;font-weight:700}.Timeline-module__5tgDcG__strip{flex:1;align-items:center;gap:8px;padding:4px 0;display:flex;overflow-x:auto}.Timeline-module__5tgDcG__strip::-webkit-scrollbar{height:4px}.Timeline-module__5tgDcG__strip::-webkit-scrollbar-track{background:0 0}.Timeline-module__5tgDcG__strip::-webkit-scrollbar-thumb{background:#fff3;border-radius:2px}.Timeline-module__5tgDcG__addButtons{flex-shrink:0;gap:4px;display:flex}.Timeline-module__5tgDcG__addButton{color:#ffffff80;cursor:pointer;background:0 0;border:1.5px dashed #ffffff4d;border-radius:6px;flex-direction:column;flex-shrink:0;justify-content:center;align-items:center;gap:2px;padding:4px 8px;transition:border-color .15s,color .15s;display:flex}.Timeline-module__5tgDcG__addButton:hover{border-color:var(--accent-blue);color:var(--accent-blue)}.Timeline-module__5tgDcG__addLabel{letter-spacing:.5px;font-size:9px;font-weight:700}
.CodeEditor-module__W4_4Ha__panel{background:var(--bg-editor);border-radius:8px;flex-direction:column;width:100%;height:100%;display:flex;position:relative;overflow:hidden}.CodeEditor-module__W4_4Ha__bgOverlay{opacity:.05;pointer-events:none;background:repeating-linear-gradient(45deg,#0000,#0000 20px,#ffffff08 20px 40px);position:absolute;inset:0}.CodeEditor-module__W4_4Ha__content{z-index:1;flex-direction:column;flex:1;padding:12px 20px;display:flex;position:relative;overflow:hidden}.CodeEditor-module__W4_4Ha__progressSection{justify-content:space-between;align-items:center;margin-bottom:8px;display:flex}.CodeEditor-module__W4_4Ha__stepLabel{color:#fff;letter-spacing:.25px;font-size:17px}.CodeEditor-module__W4_4Ha__stepBold{font-weight:700}.CodeEditor-module__W4_4Ha__stepLight{font-weight:300}.CodeEditor-module__W4_4Ha__progressBar{background:var(--progress-bg);border-radius:4px;width:100%;height:8px;margin-bottom:16px;overflow:hidden}.CodeEditor-module__W4_4Ha__progressFill{background:var(--accent-blue);border-radius:4px;height:100%;transition:width .3s}.CodeEditor-module__W4_4Ha__instruction{align-items:flex-start;gap:12px;margin-bottom:12px;display:flex}.CodeEditor-module__W4_4Ha__mascot{border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;display:flex;overflow:hidden}.CodeEditor-module__W4_4Ha__mascotSvg{width:36px;height:36px}.CodeEditor-module__W4_4Ha__instructionText{color:#fff;letter-spacing:.25px;padding-top:6px;font-size:15px;font-weight:500;line-height:1.4}.CodeEditor-module__W4_4Ha__editorArea{flex-direction:column;flex:1;display:flex;overflow:hidden}.CodeEditor-module__W4_4Ha__codeBlock{cursor:text;background:#000;border:2px solid #298fc2;border-radius:6px;flex-direction:column;flex:1;gap:2px;padding:16px 20px;display:flex;overflow-y:auto;box-shadow:0 4px 4px #00000040}.CodeEditor-module__W4_4Ha__codeLine{align-items:center;gap:10px;min-height:32px;font-family:Helvetica Neue,monospace;font-size:18px;line-height:1.8;display:flex}.CodeEditor-module__W4_4Ha__stepBadge{color:#fff;background:#4caf50;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:24px;height:24px;font-size:13px;font-weight:700;display:flex}.CodeEditor-module__W4_4Ha__lineIndent{flex-shrink:0;width:24px}.CodeEditor-module__W4_4Ha__lineCompleted{color:#fff;letter-spacing:.5px;font-size:18px;font-weight:500}.CodeEditor-module__W4_4Ha__lineUpcoming{color:#ffffff4d;letter-spacing:.5px;font-size:18px;font-weight:400}.CodeEditor-module__W4_4Ha__currentLineWrapper{flex:1;min-width:0;position:relative}.CodeEditor-module__W4_4Ha__ghostText{color:#ffffff4d;letter-spacing:.5px;pointer-events:none;white-space:nowrap;font-family:Helvetica Neue,monospace;font-size:18px;font-weight:400;line-height:1.8;position:absolute;top:0;left:0}.CodeEditor-module__W4_4Ha__inlineInput{color:#fff;letter-spacing:.5px;caret-color:#fff;z-index:1;background:0 0;border:none;outline:none;width:100%;margin:0;padding:0;font-family:Helvetica Neue,monospace;font-size:18px;font-weight:500;line-height:1.8;position:relative}.CodeEditor-module__W4_4Ha__allDone{color:#4caf50;letter-spacing:.25px;padding:12px 0 4px;font-size:14px;font-weight:600}.CodeEditor-module__W4_4Ha__errorBanner{color:#ff6b6b;letter-spacing:.25px;background:#dc354526;border:1px solid #dc354580;border-radius:4px;margin-top:8px;padding:6px 10px;font-size:13px;font-weight:500}
.FrameThumbnail-module__cJCHsa__thumbnail{cursor:pointer;background:#0003;border:2px solid #0000;border-radius:6px;flex-shrink:0;padding:4px;transition:border-color .15s,transform .1s;position:relative}.FrameThumbnail-module__cJCHsa__thumbnail:hover{border-color:#54a5ce80}.FrameThumbnail-module__cJCHsa__active{border-color:var(--accent-blue);background:#54a5ce26}.FrameThumbnail-module__cJCHsa__canvas{border-radius:3px;display:block}.FrameThumbnail-module__cJCHsa__label{text-align:center;color:#ffffffb3;margin-top:2px;font-size:11px;font-weight:700}.FrameThumbnail-module__cJCHsa__actions{opacity:0;gap:2px;transition:opacity .15s;display:flex;position:absolute;top:2px;right:2px}.FrameThumbnail-module__cJCHsa__thumbnail:hover .FrameThumbnail-module__cJCHsa__actions{opacity:1}.FrameThumbnail-module__cJCHsa__actionBtn{color:#fff;cursor:pointer;background:#0009;border:none;border-radius:3px;justify-content:center;align-items:center;padding:2px;transition:background .15s;display:flex}.FrameThumbnail-module__cJCHsa__actionBtn:hover{background:#000000d9}
.BottomBar-module__oGsiqq__bar{background:var(--bg-primary);border-top:1px solid #0000001a;justify-content:space-between;align-items:center;height:64px;padding:0 32px;display:flex}.BottomBar-module__oGsiqq__leftSection{align-items:center;gap:16px;display:flex}.BottomBar-module__oGsiqq__backButton{background:var(--accent-light);border:1px solid var(--text-dark);color:var(--text-dark);cursor:pointer;letter-spacing:.25px;border-radius:4px;padding:6px 16px;font-size:14px;font-weight:700;transition:background-color .15s}.BottomBar-module__oGsiqq__backButton:hover{background:#8bc5e0}.BottomBar-module__oGsiqq__soundToggle{background:var(--text-dark);cursor:pointer;border:none;border-radius:100px;align-items:center;width:64px;height:28px;padding:0 4px;display:flex;position:relative}.BottomBar-module__oGsiqq__soundHandle{background:#fff;border-radius:50%;justify-content:center;align-items:center;width:20px;height:20px;transition:transform .2s;display:flex;position:absolute}.BottomBar-module__oGsiqq__soundHandleOn{transform:translate(32px)}.BottomBar-module__oGsiqq__soundHandleOff{transform:translate(0)}.BottomBar-module__oGsiqq__soundIcon{width:12px;height:12px}.BottomBar-module__oGsiqq__muteIcon{opacity:.8;position:absolute;right:8px}.BottomBar-module__oGsiqq__muteIconHidden{opacity:0}.BottomBar-module__oGsiqq__saveButton{color:#fff;cursor:pointer;letter-spacing:.25px;background:#1a5b7580;border:none;border-radius:4px;padding:6px 24px;font-size:14px;font-weight:700;transition:background-color .15s}.BottomBar-module__oGsiqq__saveButton:hover{background:#1a5b75b3}
.PlaybackControls-module__MEpMfq__controls{flex-shrink:0;justify-content:center;align-items:center;gap:14px;padding:0 12px;display:flex}.PlaybackControls-module__MEpMfq__playbackGroup{justify-content:center;align-items:center;gap:12px;display:flex}.PlaybackControls-module__MEpMfq__playBtn{color:#fff;cursor:pointer;background:#f0624a;border:none;border-radius:50%;justify-content:center;align-items:center;width:44px;height:44px;transition:background .15s,transform .1s,box-shadow .15s;display:flex;box-shadow:0 4px 12px #f0624a66}.PlaybackControls-module__MEpMfq__playBtn:hover:not(:disabled){background:#d94f38;transform:scale(1.05);box-shadow:0 6px 16px #f0624a80}.PlaybackControls-module__MEpMfq__playBtn:disabled{opacity:.4;cursor:not-allowed}.PlaybackControls-module__MEpMfq__playing{background:var(--accent-blue);color:#fff;border-color:var(--accent-blue)}.PlaybackControls-module__MEpMfq__speedGroup{align-items:center;gap:4px;display:flex}.PlaybackControls-module__MEpMfq__speedLabel{color:var(--text-dark);letter-spacing:.5px;margin-right:4px;font-size:11px;font-weight:700}.PlaybackControls-module__MEpMfq__speedBtn{border:1px solid var(--text-dark);width:28px;height:24px;color:var(--text-dark);cursor:pointer;background:0 0;border-radius:4px;font-size:12px;font-weight:700;transition:background .15s}.PlaybackControls-module__MEpMfq__speedBtn:hover{background:#54a5ce33}.PlaybackControls-module__MEpMfq__speedActive{background:var(--accent-blue);color:#fff;border-color:var(--accent-blue)}.PlaybackControls-module__MEpMfq__speedSlider{cursor:pointer;width:80px;height:4px;accent-color:var(--accent-blue)}.PlaybackControls-module__MEpMfq__loopBtn{border:1px solid var(--text-dark);width:32px;height:32px;color:var(--text-dark);cursor:pointer;background:0 0;border-radius:4px;justify-content:center;align-items:center;transition:background .15s;display:flex}.PlaybackControls-module__MEpMfq__loopBtn:hover{background:#54a5ce33}.PlaybackControls-module__MEpMfq__loopActive{background:var(--accent-blue);color:#fff;border-color:var(--accent-blue)}.PlaybackControls-module__MEpMfq__frameCounter{color:var(--text-dark);white-space:nowrap;font-size:13px;font-weight:600}
.OnionSkinToggle-module__sGuNkG__container{position:relative}.OnionSkinToggle-module__sGuNkG__toggleBtn{background:var(--btn-bg);color:var(--text-dark);cursor:pointer;border:none;border-radius:4px;align-items:center;gap:4px;padding:6px 12px;font-size:12px;font-weight:700;transition:background .15s;display:flex}.OnionSkinToggle-module__sGuNkG__toggleBtn:hover{background:#8ba3c0}.OnionSkinToggle-module__sGuNkG__active{background:var(--accent-blue);color:#fff}.OnionSkinToggle-module__sGuNkG__active:hover{background:#3a8ab8}.OnionSkinToggle-module__sGuNkG__label{letter-spacing:.25px}.OnionSkinToggle-module__sGuNkG__popover{background:var(--bg-editor);z-index:20;border-radius:8px;min-width:200px;margin-top:6px;padding:12px;position:absolute;top:100%;right:0;box-shadow:0 8px 24px #0006}.OnionSkinToggle-module__sGuNkG__popoverHeader{color:#fff;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:13px;font-weight:700;display:flex}.OnionSkinToggle-module__sGuNkG__closeBtn{color:#ffffff80;cursor:pointer;background:0 0;border:none;padding:0 2px;font-size:18px}.OnionSkinToggle-module__sGuNkG__closeBtn:hover{color:#fff}.OnionSkinToggle-module__sGuNkG__checkRow{color:#ffffffd9;cursor:pointer;align-items:center;gap:8px;margin-bottom:8px;font-size:13px;display:flex}.OnionSkinToggle-module__sGuNkG__checkRow input[type=checkbox]{accent-color:var(--accent-blue)}.OnionSkinToggle-module__sGuNkG__sliderRow{color:#ffffffd9;align-items:center;gap:8px;margin-top:4px;font-size:13px;display:flex}.OnionSkinToggle-module__sGuNkG__slider{height:4px;accent-color:var(--accent-blue);cursor:pointer;flex:1}.OnionSkinToggle-module__sGuNkG__sliderValue{color:#ffffff80;text-align:right;min-width:30px;font-size:11px}