*{box-sizing:border-box} :root{font-family:'Segoe UI',Inter,system-ui,sans-serif;color:#e6e6e8;background:#18191c;font-size:12px;--panel:#222327;--line:#37383f;--muted:#97999f;--accent:#eaae72;--canvas:#191a1d}
body{margin:0;display:grid;grid-template-rows:58px 41px minmax(280px,1fr) 160px;height:100dvh;min-width:760px;overflow:hidden}button,input,select,textarea{font:inherit}button{border:1px solid var(--line);background:#2c2d33;color:#d9dadd;border-radius:6px;padding:7px 11px;cursor:pointer;white-space:nowrap;transition:background .12s,border-color .12s}button:hover{background:#373840;border-color:#5e606b}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}button:disabled{opacity:.35;cursor:default}button.primary{background:var(--accent);border-color:var(--accent);color:#281e16;font-weight:650}button.primary:hover{background:#f3bd8d}button.subtle{background:#28292f}button.active{border-color:var(--accent);color:var(--accent);background:#392e26}input[type=range]{accent-color:var(--accent);width:100%;margin:10px 0 2px;cursor:pointer;height:12px}input[type=checkbox]{accent-color:var(--accent);width:13px;height:13px;margin:0;vertical-align:middle;cursor:pointer}input[type=number],select,textarea{background:#1c1d21;border:1px solid var(--line);border-radius:5px;color:#e2e2e5;padding:7px;width:100%}input[type=color]{padding:0;border:0;cursor:pointer;background:none}h2,p{margin:0}h2{font-size:12px;font-weight:650}p{line-height:1.65}.small{font-size:11px}.muted,.panel-note{color:var(--muted)}.panel-note{font-size:11px;line-height:1.6;margin:0 0 15px}.eyebrow{font-size:9px;letter-spacing:1.6px;color:var(--accent)}.wide{width:100%}.separator{width:1px;height:19px;background:var(--line);margin:0 5px}
.app-header{display:flex;align-items:center;gap:28px;padding:0 20px;border-bottom:1px solid #303137;background:#202125;z-index:3}.brand{display:flex;gap:10px;align-items:center;white-space:nowrap}.brand strong{font-size:14px;letter-spacing:-.3px;font-weight:600}.brand-mark{font-size:30px;color:var(--accent);line-height:1}.version{font-family:Consolas,monospace;color:#777a83;font-size:9px;margin-left:8px}.file-actions{display:flex;gap:5px;align-items:center}.file-actions button{background:transparent;border-color:transparent;padding:6px 8px}.file-actions button:hover{background:#32333a}.header-right{display:flex;gap:13px;align-items:center;margin-left:auto}.save-state{color:#92959c;font-size:10px}.icon-button{width:27px;height:27px;border-radius:50%;padding:0}.document-bar{display:flex;align-items:center;gap:16px;padding:0 20px;background:#232429;border-bottom:1px solid var(--line)}.document-title{display:flex;align-items:center;gap:8px}.document-title input{border:0;background:transparent;color:#e6e6e8;width:180px;font-size:11px}.asset-dot{width:7px;height:7px;border-radius:2px;background:var(--accent);transform:rotate(45deg)}.document-right{display:flex;align-items:center;gap:7px;margin-left:auto}.document-right button{padding:2px 8px;font-size:11px;background:transparent;border-color:transparent}.document-right output{font-family:Consolas,monospace;color:#a4a5ad;font-size:10px;min-width:38px;text-align:center}.compact-check{display:inline-flex;align-items:center;gap:6px;color:#a6a8b0;font-size:10px;cursor:pointer;white-space:nowrap}.document-right .compact-check{margin-right:14px}
.studio{display:grid;grid-template-columns:184px minmax(260px,1fr) 288px;overflow:hidden;min-height:0}.panel{background:var(--panel)}.layers-panel{border-right:1px solid var(--line);display:flex;flex-direction:column;padding:0 12px;overflow:auto;min-height:0}.panel-title{display:flex;align-items:center;justify-content:space-between;height:44px;flex-shrink:0}.panel-title button{border:0;background:transparent;padding:3px 5px;color:var(--muted)}.panel-title h2{font-size:11px}.asset-summary{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:7px;padding:8px;margin:2px 0 12px}.asset-thumbnail{width:38px;height:46px;display:grid;place-items:center;background:#303137;border-radius:4px}.asset-thumbnail svg,.asset-thumbnail img{max-width:100%;max-height:100%}.asset-summary strong{display:block;font-size:11px;font-weight:500}.asset-summary span{display:block;color:#81848e;font-size:9px;margin-top:4px}.layers-heading{border-top:1px solid var(--line);height:39px}.layer-list{display:flex;flex-direction:column;gap:4px;min-height:68px;max-height:240px;overflow:auto}.layer-row{display:grid;grid-template-columns:22px 1fr 20px;align-items:center;gap:4px;min-height:36px;border:1px solid transparent;border-radius:5px;padding:4px;cursor:pointer}.layer-row.selected{border-color:#70563e;background:#35302c}.layer-row button{border:0;background:none;padding:2px;font-size:13px;color:#9497a0}.layer-row .layer-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px}.layer-row .layer-name small{display:block;font-size:8px;color:#8c8e97}.layer-actions{display:flex;gap:4px;margin:10px 0}.layer-actions button{flex:1;padding:4px 0;background:#2a2b30;color:#9da0a9}.field{display:block;margin-bottom:14px;color:#c3c5cc;font-size:10px}.field>output{float:right;color:#93969f;font-family:Consolas,monospace;font-size:10px}.field select,.field input[type=number]{margin-top:7px}.left-bottom{margin-top:auto;padding:20px 0 15px}.left-bottom p{font-size:10px;color:#777b85;margin:7px 0 15px}.left-bottom button{font-size:10px;padding:8px 3px}
.workspace{display:flex;flex-direction:column;background:var(--canvas);min-width:0;min-height:0;overflow:hidden}.workspace-toolbar{display:flex;align-items:center;justify-content:space-between;height:37px;flex-shrink:0;padding:0 16px;color:#9497a0;border-bottom:1px solid #282a30;font-size:10px}.workspace-toolbar>div:last-child{display:flex;gap:14px}.canvas-area{position:relative;min-height:0;flex:1;overflow:hidden;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 40%,#24252b 0%,#191a1e 70%)}.tool-rail{position:absolute;z-index:5;left:12px;top:16px;width:36px;padding:4px;background:#27282e;border:1px solid #3c3d45;border-radius:8px;box-shadow:0 5px 18px #0003;display:flex;flex-direction:column;align-items:center;gap:3px}.tool-rail button{width:28px;height:28px;border:1px solid transparent;padding:0;font-size:20px;background:transparent;line-height:1}.tool-rail button.active{background:#48382c;border-color:#a7784f;color:#f1be8d}.tool-rail>span{height:1px;width:20px;background:var(--line);margin:3px}.rail-color{width:23px;height:23px;margin:3px 0;border:2px solid #5b5e68;border-radius:4px;overflow:hidden}.rail-color input{width:35px;height:35px;margin:-6px}.artboard-wrap{width:100%;height:100%;overflow:auto;display:flex;align-items:flex-start;justify-content:flex-start;padding:32px 48px 38px 64px;scrollbar-width:thin}.artboard{position:relative;flex-shrink:0;margin:auto;box-shadow:0 16px 70px #0005,0 0 0 1px #4a4b52;background-color:#ddd9d1;background-image:linear-gradient(45deg,#c9c5bd 25%,transparent 25%),linear-gradient(-45deg,#c9c5bd 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#c9c5bd 75%),linear-gradient(-45deg,transparent 75%,#c9c5bd 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0}.artboard.solid{background:#e4dfd5}.artboard canvas{width:100%;height:100%;display:block;image-rendering:pixelated;touch-action:none}.artboard #guides{position:absolute;inset:0;pointer-events:none}.canvas-label{position:absolute;top:-18px;left:0;font-family:Consolas,monospace;letter-spacing:1.7px;font-size:8px;color:#6b6e77}.canvas-corner{position:absolute;bottom:12px;left:16px;display:flex;gap:6px;align-items:center;color:#777c86;font-size:9px;pointer-events:none}.live-dot{width:5px;height:5px;border-radius:50%;background:#8dba9d}.canvas-status{height:25px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 14px;color:#6f747f;background:#1e1f23;border-top:1px solid #292b30;font-family:Consolas,monospace;font-size:9px;flex-shrink:0}
.inspector{border-left:1px solid var(--line);display:flex;flex-direction:column;min-height:0}.inspector-tabs{height:40px;display:flex;border-bottom:1px solid var(--line);flex-shrink:0;padding:0 8px}.inspector-tabs button{flex:1;border:0;border-bottom:2px solid transparent;border-radius:0;background:transparent;font-size:11px;padding:10px 6px;color:#8d909b}.inspector-tabs button.active{border-color:var(--accent);color:#efb886}.inspector-body{padding:18px 18px 28px;overflow-y:auto;min-height:0;scrollbar-width:thin;scrollbar-color:#464850 transparent}.inspector-body[hidden]{display:none}.section-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.section-title h2{font-size:12px}.text-button{padding:0;border:0;background:none;color:#b5b6bc;font-size:9px}.preset-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:17px 0 21px}.preset-button{padding:0;border:0;background:transparent;font-size:9px;text-align:center;color:#a4a7af;min-width:0}.preset-button:hover{background:transparent;color:#e0e2e8}.preset-button.active{background:transparent;color:var(--accent)}.preset-sample{border:1px solid #44464f;border-radius:6px;height:43px;margin-bottom:5px;display:grid;place-items:center;background:linear-gradient(135deg,#36463e,#7f8f66);overflow:hidden;position:relative}.preset-button.active .preset-sample{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.preset-sample::after{content:'✦';font-size:32px;color:#efd3a4;text-shadow:0 2px 6px #0007}.preset-sample[data-look=Pixel]{background:repeating-conic-gradient(#566c5b 0 25%,#34483e 0 50%) 50%/12px 12px}.preset-sample[data-look=Dither]{background:repeating-conic-gradient(#263b33 0 25%,#dbbe87 0 50%) 50%/4px 4px}.preset-sample[data-look=Ink]{background:#d7ceba}.preset-sample[data-look=Ink]::after{color:#323334;text-shadow:2px 2px #998f7d}.preset-sample[data-look=Mosaic]{background:repeating-conic-gradient(#689188 0 25%,#9e935e 0 50%) 50%/16px 16px}.preset-sample[data-look=Neon]{background:#172029}.preset-sample[data-look=Neon]::after{color:#75ebde;text-shadow:0 0 6px #55cbbd,0 0 16px #a98cd9}.preset-sample[data-look=Paper]{background:#baa27e}.preset-sample[data-look=Paper]::after{color:#f5e8c9}.preset-sample[data-look=Toon]{background:#91a985}.preset-sample[data-look=Toon]::after{color:#eebc62;text-shadow:2px 0 #282c31,-2px 0 #282c31,0 2px #282c31,0 -2px #282c31}.control-group{border-top:1px solid var(--line);padding-top:12px;margin-top:15px}.control-group summary{font-size:11px;cursor:pointer;color:#c2c4cb;margin:0 0 16px 10px}.control-group summary::marker{font-size:9px;color:#858892}.control-group .field:last-child{margin-bottom:0}.palette-swatches,.quick-colors{display:flex;flex-wrap:wrap;gap:7px;margin:10px 0}.palette-swatch{width:25px;height:25px;border-radius:4px;border:1px solid #7775;overflow:hidden}.palette-swatch input{width:36px;height:36px;margin:-5px}.quick-colors button{width:24px;height:24px;border:1px solid #ffffff29;padding:0}.separated{padding-top:20px;margin-top:16px;border-top:1px solid var(--line)}.pivot-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}#svgSource{min-height:240px;height:34vh;font-family:Consolas,monospace;line-height:1.5;font-size:10px;resize:vertical;tab-size:2;padding:10px;white-space:pre;overflow:auto}.button-row{display:flex;gap:8px;margin:12px 0}.button-row button{flex:1;font-size:10px}
.timeline{background:#222328;border-top:1px solid #42444c;overflow:hidden;z-index:4}.timeline-head{height:41px;border-bottom:1px solid #35373f;display:flex;gap:15px;align-items:center;padding:0 15px}.playback{display:flex;align-items:center;gap:5px}.playback button{padding:3px 7px;background:transparent;border-color:transparent;color:#9297a2;font-size:10px}.playback .play-button{color:var(--accent);font-size:16px;padding:2px 9px}.playback span{margin-left:12px;color:#a0a5b0;font-family:Consolas,monospace;font-size:10px;min-width:51px}.timeline-options{display:flex;gap:15px;align-items:center;margin:auto}.timeline-options>label:first-child{display:flex;gap:7px;align-items:center;color:#9397a3;font-size:9px}.timeline-options input[type=number]{width:42px;padding:3px;font-size:10px}.timeline-options select{width:72px;font-size:9px;padding:3px;color:#969da9}.timeline-actions{display:flex;gap:7px}.timeline-actions button{padding:4px 8px;font-size:10px}.timeline-content{display:flex;height:118px}.timeline-label{width:184px;flex-shrink:0;border-right:1px solid var(--line);padding:13px 15px;display:flex;flex-direction:column;gap:9px}.timeline-label strong{font-size:10px;font-weight:500}.timeline-label label{font-size:9px;color:#8d919d;display:flex;align-items:center;gap:5px}.timeline-label input{width:50px;padding:2px 4px;font-size:9px}.timeline-label button{padding:1px 7px;margin-right:4px;font-size:10px}.frame-strip{display:flex;gap:8px;overflow-x:auto;align-items:flex-start;padding:13px 15px;min-width:0;scrollbar-width:thin}.frame-card{border:1px solid #41434c;background:#2b2d34;width:70px;flex-shrink:0;padding:3px;border-radius:5px;position:relative;cursor:pointer}.frame-card.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.frame-card canvas{display:block;width:62px;height:62px;object-fit:contain;background:repeating-conic-gradient(#35373d 0 25%,#2e3035 0 50%) 50%/10px 10px;image-rendering:pixelated}.frame-card span{font-family:Consolas,monospace;font-size:8px;color:#9298a5;display:flex;justify-content:space-between;padding:3px 2px 0}.frame-card.active span{color:var(--accent)}
dialog{background:#25262c;border:1px solid #555761;border-radius:12px;box-shadow:0 25px 130px #0009;color:#dddfe7;padding:24px;width:min(620px,90vw);max-height:90vh;overflow:auto}dialog::backdrop{background:#090a0cb5;backdrop-filter:blur(5px)}.dialog-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:18px}.dialog-header h2{font-size:21px;font-weight:550;letter-spacing:-.5px;margin-top:4px}.dialog-header button{background:none;border:0;font-size:23px;line-height:1;padding:0 0 0 20px;color:#9296a2}.dialog-header .eyebrow{font-size:8px}.starter-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:22px 0}.starter-card{display:flex;flex-direction:column;align-items:center;padding:12px;gap:12px;background:#2b2d33}.starter-card svg,.starter-card img{width:100px;height:120px;overflow:visible}.starter-card strong{font-size:11px}.export-preview{display:flex;gap:20px;align-items:center;background:#1e2025;border:1px solid #343741;border-radius:7px;padding:12px;margin-bottom:20px}.export-preview canvas{width:92px;height:92px;background:repeating-conic-gradient(#34363d 0 25%,#2a2c32 0 50%) 50%/12px 12px;image-rendering:pixelated}.export-preview strong{font-size:14px;font-weight:550}.export-preview p{font-size:11px;margin-top:7px}.export-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0}.export-grid button{text-align:left;padding:15px}.export-grid strong{display:block;font-size:12px;font-weight:550}.export-grid span{display:block;font-size:10px;color:#959caa;margin-top:6px}.help-content p{margin-bottom:15px;font-size:12px}.help-content b{color:var(--accent);font-weight:550}.help-content dl{display:grid;grid-template-columns:145px 1fr;gap:9px;font-size:11px;margin:22px 0}.help-content dt{color:var(--accent);font-family:Consolas,monospace}.help-content dd{margin:0;color:#a3aab7}.toast{position:fixed;bottom:177px;left:50%;transform:translate(-50%,12px);background:#393b43;color:#e4e7ee;border:1px solid #60646e;border-radius:7px;padding:10px 18px;z-index:20;box-shadow:0 10px 40px #0005;font-size:11px;max-width:560px;opacity:0;pointer-events:none;transition:opacity .16s,transform .16s}.toast.visible{opacity:1;transform:translate(-50%,0)}*::-webkit-scrollbar{width:6px;height:6px}*::-webkit-scrollbar-thumb{background:#454852;border-radius:10px}*::-webkit-scrollbar-track{background:transparent}
@media(min-width:1600px){.studio{grid-template-columns:210px minmax(260px,1fr) 320px}.timeline-label{width:210px}.inspector-body{padding:21px 22px}.preset-sample{height:51px}}@media(max-width:1100px){.studio{grid-template-columns:150px minmax(250px,1fr) 250px}.timeline-label{width:150px}.app-header{gap:12px;padding:0 12px}.save-state{display:none}.brand strong{font-size:12px}.version{display:none}.timeline-options{gap:9px}.timeline-actions button{padding:4px;font-size:9px}.workspace-toolbar{padding:0 9px}.workspace-toolbar>div:last-child{gap:8px}.inspector-body{padding:15px 12px}.layers-panel{padding:0 8px}.document-bar{padding:0 12px}.file-actions{gap:1px}.file-actions button{padding:5px 6px}}@media(max-height:720px){body{grid-template-rows:50px 34px minmax(200px,1fr) 141px}.timeline-head{height:35px}.timeline-content{height:105px}.frame-card{width:61px}.frame-card canvas{width:53px;height:53px}.frame-strip{padding:10px 12px}.timeline-label{padding:10px 12px;gap:7px}.left-bottom p{display:none}.left-bottom{padding-top:10px}.workspace-toolbar{height:30px}.tool-rail{top:8px;left:8px;gap:1px}.tool-rail button{height:25px}.toast{bottom:155px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}dialog::backdrop{backdrop-filter:none}}