:root{--bg:#101212;--panel:#181b1b;--panel-solid:#181b1b;--stroke:#2c3030;--accent:#b9f36b;--accent2:#b9f36b;--accent-glow:transparent;--text:#ecefed;--sub:#929b97;--radius:0;--shadow:none;--logo-a:#b9f36b;--logo-b:#b9f36b;color-scheme:dark}
body{background:var(--bg);height:100dvh;min-height:600px;font-size:16px;letter-spacing:-.015em}button,input{font:inherit}button{touch-action:manipulation}button:focus-visible,[tabindex]:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}button{font-size:14px!important}*{scrollbar-width:thin;scrollbar-color:#3c4440 transparent}body.theme-corn,body.theme-carrot,body.theme-beet{--sub:#aeb4b0;--panel:#181b1b;--panel-solid:#181b1b;--bg:#101212;--stroke:#343736;--accent-glow:transparent}.topbar{height:76px;min-height:76px;padding:0 28px;background:#181b1b;backdrop-filter:none;gap:24px}.logo{text-decoration:none;color:var(--text);font-size:27px;font-weight:700;letter-spacing:-1.4px;gap:10px}.logo-badge{display:flex;align-items:center;justify-content:center;width:35px;height:35px;border-radius:7px;color:#14200c;font:900 35px/1 monospace;letter-spacing:-8px;padding-right:7px;box-shadow:none;background:var(--accent)}.brand-studio{display:block;font-size:10px;letter-spacing:4px;font-weight:500;color:var(--sub);margin-top:2px}.header-center{display:flex;align-items:center;align-self:stretch;gap:34px;margin-right:auto;margin-left:38px}.studio-tab{display:flex;align-items:center;color:var(--accent);border-bottom:2px solid var(--accent);font-size:14px;padding:0 5px}.quiet-btn{background:none;border:0;color:var(--sub);display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;min-height:36px;padding:6px 8px;border-radius:5px;font-size:14px}.quiet-btn:hover{background:#ffffff09;color:var(--text)}kbd{border:1px solid var(--stroke);padding:3px 5px;border-radius:4px;font:11px monospace;color:#7e8881;margin-left:8px}.file-actions{display:flex;gap:8px}.tool-btn{height:40px;border-radius:6px;background:transparent;border:1px solid transparent;padding:0 10px;gap:8px;font-weight:500;font-size:14px;transition:background .15s,color .15s}.tool-btn:hover{transform:none;background:#ffffff08}.tool-btn::before{display:none}.tool-btn.active{background:color-mix(in srgb,var(--accent) 11%,transparent);border-color:color-mix(in srgb,var(--accent) 28%,transparent);color:var(--accent);box-shadow:none!important}.file-actions .tool-btn{border-color:var(--stroke);padding:0 14px}.file-actions .primary{background:var(--accent);color:#17230c;border-color:var(--accent);font-weight:700}.file-actions .primary:hover{filter:brightness(1.08)}.material-symbols-rounded{font-size:20px}.document-bar{height:56px;min-height:56px;border-bottom:1px solid var(--stroke);display:flex;align-items:center;justify-content:space-between;padding:0 26px;background:#141717}.doc-info{display:flex;align-items:center;gap:12px;color:#77817a}.doc-info input{border:none;background:none;color:var(--text);font-size:14px;width:140px;padding:6px 0;outline:none}.doc-type{font:10px monospace;letter-spacing:1px;border:1px solid #343a36;padding:4px 6px;border-radius:3px;color:#8b958e}.doc-actions{display:flex;align-items:center;gap:16px}.divider{height:18px;width:1px;background:var(--stroke)}.workspace{grid-template-columns:236px minmax(0,1fr) 270px;padding:0;gap:0;min-height:240px}.panel{border:0;border-radius:0;box-shadow:none;backdrop-filter:none}.sidebar,.rightbar{padding:22px 18px;gap:24px;background:var(--panel)}.sidebar{border-right:1px solid var(--stroke)}.rightbar{border-left:1px solid var(--stroke)}.section-title{font-size:13px;font-weight:600;letter-spacing:.02em;text-transform:none;color:#b7beb9;display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.section-number{color:#646f68;font:10px monospace;letter-spacing:0}.grid-buttons{gap:5px}.sidebar>.grid-buttons{gap:6px}.sidebar .grid-buttons .tool-btn{height:39px;font-size:14px;padding:0 8px}.sidebar .grid-buttons .tool-btn .material-symbols-rounded{font-size:18px}.current-color-display{height:36px;border-radius:5px;border:1px solid #ffffff12}.current-color-display:hover{transform:none}#hexLabel{font:11px monospace;color:var(--sub)}.range{height:4px;margin:9px 0;cursor:pointer}.color-ramp-preview{border-radius:4px;height:26px}.sidebar>div:nth-child(n+3){padding-top:18px;border-top:1px solid var(--stroke)}.canvas-shell{border-radius:0;background-color:#101313;background-image:radial-gradient(#353b37 .65px,transparent .65px);background-size:16px 16px;background-position:0 0;min-width:0;overflow:hidden}.canvas-toolbar{top:20px;left:24px;right:24px;gap:6px;align-items:center}.canvas-title{font:10px monospace;letter-spacing:1.5px;color:#79847c;margin-right:auto}.floating-chip{height:32px;border-radius:5px;background:#1c211f;padding:0 10px;gap:7px;font-size:12px;font-weight:500;border-color:#323a34;backdrop-filter:none}.floating-chip .material-symbols-rounded{font-size:18px}.floating-chip.active{background:#232e1e;border-color:#526841;color:var(--accent)}#canvas{flex:none;background:repeating-conic-gradient(#232927 0% 25%,#282f2b 0% 50%) 0 0/24px 24px;box-shadow:0 10px 45px #0005;outline:1px solid #4c584e;touch-action:none;cursor:crosshair}#overlayCanvas{box-shadow:none}.canvas-tip{position:absolute;bottom:31px;left:12px;right:12px;text-align:center;color:#b3bdb5;font-size:14px;pointer-events:none}.canvas-tip span{display:block;color:#6e7d71;font-size:12px;margin-top:7px}.canvas-tip[hidden]{display:none}.preview-window{position:static;width:auto;border:0;background:none;box-shadow:none;border-radius:0;padding:0 0 20px;backdrop-filter:none;border-bottom:1px solid var(--stroke)}.preview-window .preview-label{font-size:13px;text-transform:none;letter-spacing:.02em;font-weight:600;display:flex;justify-content:space-between;color:#b7beb9;margin-bottom:14px}.preview-label span{font:11px monospace;color:#737f76}.preview-window canvas{width:100%;height:120px;object-fit:contain;border-radius:5px;background:repeating-conic-gradient(#232927 0% 25%,#282f2b 0% 50%) 0 0/12px 12px;box-shadow:none;padding:12px}.rightbar>div{flex-shrink:0}.rightbar>div+div{padding-top:0}.palette-grid{grid-template-columns:repeat(8,1fr);gap:5px}.color-swatch{border-radius:3px;border-width:1px}.color-swatch.selected{transform:none;outline:2px solid white;outline-offset:2px;box-shadow:none}.small-stat{background:none;border-radius:0;padding:8px 0;font-size:13px;border-bottom:1px solid #ffffff07}.small-stat strong{font:13px monospace;color:#b8c2ba}.rightbar label{font-size:13px!important}.rightbar .onion-controls{gap:6px}.timeline{height:162px;min-height:162px;padding:15px 25px 13px;background:#191d1b;border-top:1px solid var(--stroke);gap:11px;overflow:hidden}.timeline>.section-title{margin:0}.timeline>div:first-child{gap:14px}.timeline .section-title{margin:0;color:var(--text)}.timeline-sub{font:10px monospace;letter-spacing:1px;color:#6e7d72;margin-left:20px}.timeline .tool-btn{height:32px!important;font-size:13px!important;background:#232925;border:1px solid #343d36;padding:0 10px}.timeline #btnPlay{color:var(--accent);background:#2b3622;border-color:#3f5032}.frames{gap:9px;min-height:73px;padding:1px 1px 5px}.frame{min-width:67px;height:67px;border-radius:5px;background:repeating-conic-gradient(#252c27 0% 25%,#202521 0% 50%) 0 0/10px 10px}.frame.active{box-shadow:none;border-color:var(--accent)}.frame canvas{box-shadow:none}.frame-label{font:11px monospace;bottom:2px}.statusbar{height:35px;min-height:35px;display:flex;justify-content:space-between;align-items:center;padding:0 24px;border-top:1px solid var(--stroke);font-size:11px;color:#7e8a80;background:#141816;gap:12px}.statusbar>span{display:flex;align-items:center;gap:9px}.status-square{width:6px;height:6px;background:var(--accent)}.status-separator{color:#48534b;margin:0 4px}.status-hint{font-family:monospace;font-size:10px}.status-hint span{margin:0 5px;color:#454f48}#themeSwitcher{display:flex;align-items:center;gap:7px;font-size:11px}#themeSwitcher>span{margin-right:4px}.theme-btn{width:14px;height:14px;min-height:14px;border-radius:50%;background:#b9f36b;border:2px solid transparent;font-size:0!important}.theme-btn[data-theme="corn"]{background:#f5c800}.theme-btn[data-theme="carrot"]{background:#f97316}.theme-btn[data-theme="beet"]{background:#c026d3}.theme-btn.active{outline:1px solid #9fa79e;outline-offset:2px;box-shadow:none;transform:none}.theme-btn:hover{transform:none}.command-box,#newDocModal>div{background:#1c221e!important;border:1px solid #3c493f!important;border-radius:12px!important;max-width:calc(100vw - 32px);max-height:90dvh;overflow:auto}.command-item{border-radius:6px;font-size:14px}.command-input{font-size:16px}#newDocModal>div{padding:28px!important}#newDocModal>div>div:first-child{display:flex;align-items:center;justify-content:space-between}#newDocModal>div>div:nth-child(2){color:#a0ada4!important}#sizeGrid button{border-radius:6px!important}#btnNewDocCreate{background:var(--accent)!important;border-radius:6px!important;color:#16240b!important}#closeNewDoc{margin-left:20px}#transformBar{position:fixed!important;bottom:208px!important;border-radius:8px!important;background:#1b241d!important}.toast{border-radius:7px;background:#273320;border:1px solid #506b3e;color:#d9eac9;bottom:50px;font-size:14px}.mobile-panels{display:none}
@media(min-width:1500px){.workspace{grid-template-columns:256px minmax(0,1fr) 290px}.sidebar,.rightbar{padding:24px}.canvas-toolbar{left:32px;right:32px}}
@media(max-width:1150px){.workspace{grid-template-columns:208px minmax(0,1fr) 236px}.rightbar{display:flex;padding:18px 14px}.sidebar{padding:18px 12px}.header-center{margin-left:12px;gap:16px}.canvas-title{display:none}.canvas-toolbar{justify-content:center;left:10px;right:10px}.timeline-sub,.status-hint{display:none!important}.topbar{padding:0 18px;gap:15px}.tool-btn{gap:5px}.palette-grid{grid-template-columns:repeat(6,1fr)}}
@media(max-width:900px){body{min-height:560px}.topbar{height:65px;min-height:65px;padding:0 15px}.header-center{display:none}.logo{font-size:24px}.file-actions{margin-left:auto}.workspace{grid-template-columns:190px minmax(0,1fr)}.sidebar{display:flex}.rightbar{display:none}.mobile-panels{height:38px;min-height:38px;display:flex;gap:12px;padding:0 14px;border-bottom:1px solid var(--stroke)}.mobile-panels button{font-size:13px!important}.document-bar{height:48px;min-height:48px;padding:0 16px}.doc-info{gap:8px}.doc-type{display:none}.doc-actions{gap:8px}.doc-actions .quiet-btn{font-size:13px!important}.details-open .rightbar{display:flex;position:fixed;right:0;top:151px;bottom:196px;width:260px;z-index:150;box-shadow:-12px 0 25px #0008}.timeline{padding:12px 16px;height:150px;min-height:150px}.timeline-sub{display:none}.timeline>div:first-child{flex-wrap:wrap;gap:6px}.timeline .section-title{font-size:12px}.timeline>div:first-child>div:last-child{gap:5px!important}.statusbar{padding:0 15px}.preview-window{display:block}.canvas-tip{font-size:12px;bottom:17px}}
@media(max-width:620px){.topbar{gap:8px}.logo{font-size:22px;letter-spacing:-1px}.logo-badge{width:29px;height:29px;font-size:29px}.brand-studio{font-size:8px;letter-spacing:3px}.file-actions .tool-btn{padding:0 9px;height:35px}.file-actions #btnOpen span:last-child,.file-actions #btnSave span:last-child{display:none}.file-actions #btnExport{font-size:12px!important;padding:0 8px}.file-actions #btnExport .material-symbols-rounded{display:none}.workspace{grid-template-columns:minmax(0,1fr)}.sidebar{display:none}.tools-open .sidebar{display:flex;position:fixed;left:0;top:151px;bottom:185px;width:236px;z-index:150;box-shadow:12px 0 25px #0008}.details-open .rightbar{bottom:185px}.doc-info input{width:105px}.doc-actions .quiet-btn span:not(.material-symbols-rounded){display:none}.doc-actions{gap:3px}.canvas-toolbar{top:13px;gap:5px}.floating-chip{height:31px;padding:0 8px;font-size:11px}.canvas-tip{bottom:15px}.timeline{height:150px;min-height:150px;padding:10px 12px;gap:9px}.timeline>div:first-child>.section-title{width:100%;font-size:12px}.timeline>div:first-child>div:last-child{width:100%;justify-content:space-between}.timeline .tool-btn{font-size:11px!important;padding:0 6px}.timeline #btnPlay{min-width:0!important}.timeline #btnAddFrame{font-size:0!important}.timeline #btnAddFrame .material-symbols-rounded{font-size:19px}.timeline #fpsRange{width:40px!important}.frame{height:58px;min-width:58px}.frames{min-height:63px}.statusbar{font-size:10px;padding:0 12px}.statusbar>span{gap:5px}#themeSwitcher>span{display:none}.status-separator{margin:0 1px}.theme-btn{width:12px;height:12px;min-height:12px}.statusbar{gap:5px}#newDocModal>div{padding:22px!important}#newDocModal input{width:57px!important}#transformBar{max-width:96vw;overflow:auto;bottom:195px!important}.command-palette{padding-top:30px}.command-box{width:calc(100vw - 24px)}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}