:root{--bg:#171815;--panel:#20211e;--panel-2:#272824;--panel-3:#30312c;--line:#3a3b35;--line-soft:#30312c;--text:#ece9df;--muted:#999b91;--faint:#66685f;--amber:#e4a853;--amber-2:#ffc46b;--cyan:#79c6ba;--danger:#d87568;--radius:6px;--shadow:0 18px 50px rgba(0,0,0,.28);font-family:"IBM Plex Sans","Avenir Next","PingFang SC",sans-serif;color:var(--text);background:var(--bg);font-synthesis:none}
[hidden]{display:none!important}
*{box-sizing:border-box}body{margin:0;min-width:1080px;height:100vh;overflow:hidden;background:var(--bg)}button,input,select{font:inherit}button{color:inherit}.topbar{height:64px;display:flex;align-items:center;border-bottom:1px solid var(--line);padding:0 18px;background:#1b1c19;gap:22px}.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--text);width:230px}.brand-mark{width:28px;height:28px;display:grid;grid-template-columns:repeat(2,8px);grid-template-rows:repeat(2,8px);gap:3px;place-content:center;border:1px solid #5b5b52;background:#262722;transform:rotate(45deg)}.brand-mark i{display:block;background:var(--amber)}.brand-mark i:nth-child(2),.brand-mark i:nth-child(3){background:#77776d}.brand span:last-child{display:flex;flex-direction:column;line-height:1}.brand b{font-size:13px;letter-spacing:.12em}.brand small{font-size:8px;color:var(--faint);letter-spacing:.15em;margin-top:5px}.file-meta{display:flex;flex-direction:column;flex:1;padding-left:20px;border-left:1px solid var(--line)}.file-meta strong{font-size:12px;font-weight:600}.file-meta span{font-size:10px;color:var(--muted);margin-top:3px}.top-actions{display:flex;gap:7px}.button{border:1px solid var(--line);background:#292a26;border-radius:var(--radius);padding:8px 12px;font-size:11px;font-weight:650;cursor:pointer;transition:background .14s,border-color .14s,transform .14s}.button:hover:not(:disabled){background:#34352f;border-color:#55564d}.button:active:not(:disabled){transform:translateY(1px)}.button:disabled{opacity:.36;cursor:not-allowed}.button.primary{color:#1d1b16;background:var(--amber);border-color:var(--amber)}.button.primary:hover:not(:disabled){background:var(--amber-2);border-color:var(--amber-2)}.button.danger{color:#efb0a8}.button.wide{width:100%;margin-top:9px}.workspace{height:calc(100vh - 64px);display:grid;grid-template-columns:246px minmax(560px,1fr) 268px}.sidebar{background:var(--panel);min-height:0;overflow:auto}.tools-panel{border-right:1px solid var(--line)}.preview-panel{border-left:1px solid var(--line);padding-bottom:18px}.panel-heading{height:42px;padding:0 14px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);color:#c8c8bd;font-weight:700;font-size:10px;text-transform:uppercase;letter-spacing:.14em}.panel-heading>span:last-child{font-size:8px;color:var(--faint)}.shortcut-hint{font-family:monospace}.tool-tabs{padding:8px;border-bottom:1px solid var(--line)}.tool-tab{position:relative;width:100%;height:56px;border:1px solid transparent;background:transparent;text-align:left;padding:8px 8px 8px 46px;border-radius:5px;cursor:pointer;color:var(--muted)}.tool-tab:hover{background:#272824}.tool-tab.active{background:#2d2d28;border-color:#47473f;color:var(--text)}.tool-tab.active:after{content:"";position:absolute;right:-9px;top:10px;bottom:10px;width:2px;background:var(--amber)}.tool-number{position:absolute;left:10px;top:17px;font-family:monospace;font-size:10px;color:var(--amber)}.tool-tab b,.tool-tab small{display:block}.tool-tab b{font-size:11px}.tool-tab small{font-size:9px;color:var(--faint);margin-top:3px}.tool-section{display:none;padding:16px 14px}.tool-section.active{display:block}.section-title{display:flex;align-items:center;justify-content:space-between}.section-title h2{margin:0;font-size:12px;letter-spacing:.03em}.status-dot{width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 4px rgba(121,198,186,.08)}.help{font-size:10px;line-height:1.5;color:var(--muted);margin:10px 0 15px}.control-label,.range-head label,.select-label{font-size:10px;color:#c2c2b8}.color-row{display:flex;align-items:center;gap:8px;margin:7px 0 16px}.color-row input{width:34px;height:30px;border:1px solid var(--line);padding:3px;background:#292a26;border-radius:4px}.color-row code{font-size:10px;color:#c5c4b9;flex:1}.icon-button,.mini-button{border:1px solid var(--line);background:var(--panel-2);border-radius:4px;height:30px;cursor:pointer;font-size:10px}.icon-button{padding:0 9px}.range-head{display:flex;justify-content:space-between;align-items:center;margin:8px 0}.range-head output{color:var(--amber);font-family:monospace;font-size:10px}input[type=range]{width:100%;height:3px;appearance:none;background:#45463f;border-radius:3px;margin:5px 0 15px}input[type=range]::-webkit-slider-thumb{appearance:none;width:12px;height:12px;border-radius:2px;background:var(--amber);border:2px solid #222}.check-row{display:flex;align-items:center;justify-content:space-between;position:relative;padding:10px 0;border-top:1px solid var(--line-soft);cursor:pointer}.check-row span b,.check-row span small{display:block}.check-row span b{font-size:10px}.check-row span small{font-size:9px;color:var(--faint);margin-top:3px}.check-row input{position:absolute;opacity:0}.check-row i{position:relative;width:28px;height:15px;border-radius:12px;background:#44453e;transition:.15s}.check-row i:after{content:"";position:absolute;left:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#99998f;transition:.15s}.check-row input:checked+i{background:#78603c}.check-row input:checked+i:after{left:15px;background:var(--amber)}.check-row.compact{padding:11px 0}.badge{font-size:8px;padding:3px 6px;border:1px solid var(--line);border-radius:9px;color:var(--muted)}.split-fields{display:grid;grid-template-columns:1fr 18px 1fr;align-items:end;text-align:center;margin-top:14px}.split-fields label,.field-grid label{font-size:9px;color:var(--muted);text-align:left}.split-fields input,.field-grid input,select{width:100%;height:32px;margin-top:5px;border:1px solid var(--line);border-radius:4px;background:#191a17;color:var(--text);padding:0 8px}.split-fields span{padding-bottom:8px;color:var(--faint)}.section-divider{display:flex;align-items:center;gap:8px;margin:15px 0 8px;color:var(--faint);font-size:8px;text-transform:uppercase;letter-spacing:.1em}.section-divider:before,.section-divider:after{content:"";height:1px;background:var(--line-soft);flex:1}.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.select-label{display:block;margin:9px 0}.select-label select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#888 50%),linear-gradient(135deg,#888 50%,transparent 50%);background-position:calc(100% - 13px) 13px,calc(100% - 9px) 13px;background-size:4px 4px;background-repeat:no-repeat}.privacy-note{margin:10px 14px 18px;padding:10px;display:flex;gap:8px;border:1px dashed #41423b;border-radius:4px}.privacy-note>span{width:6px;height:6px;border-radius:50%;background:var(--cyan);margin-top:3px}.privacy-note p{margin:0;font-size:8px;line-height:1.5;color:var(--faint)}.privacy-note b{color:#92958a;letter-spacing:.09em}.stage-column{display:grid;grid-template-rows:42px minmax(0,1fr) 142px;min-width:0;background:#131411}.canvas-toolbar{display:flex;align-items:center;justify-content:space-between;padding:0 12px;border-bottom:1px solid var(--line);background:#1e1f1c}.crumb{display:flex;align-items:center;gap:8px;font-size:9px;color:var(--muted)}.crumb i{width:3px;height:3px;border-radius:50%;background:var(--faint)}.crumb span:first-child{color:var(--amber)}.canvas-actions{display:flex;align-items:center;gap:4px}.canvas-actions output{font:9px monospace;color:var(--muted);width:42px;text-align:center}.mini-button{min-width:27px;color:var(--muted)}.mini-button:hover{background:#34352f;color:var(--text)}.mini-button.text{padding:0 8px}.mini-button.checker{width:28px;background-color:#bbb;background-image:linear-gradient(45deg,#888 25%,transparent 25%),linear-gradient(-45deg,#888 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#888 75%),linear-gradient(-45deg,transparent 75%,#888 75%);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0}.canvas-shell{position:relative;overflow:hidden;background:#11120f}.empty-state{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background-image:radial-gradient(#292a25 1px,transparent 1px);background-size:16px 16px}.empty-pixel-art{width:64px;height:54px;position:relative;margin-bottom:20px;filter:drop-shadow(10px 12px 0 rgba(0,0,0,.18))}.empty-pixel-art span{position:absolute;background:#d6a152}.empty-pixel-art span:nth-child(1){width:42px;height:8px;left:11px;top:0}.empty-pixel-art span:nth-child(2){width:56px;height:8px;left:4px;top:8px}.empty-pixel-art span:nth-child(3){width:64px;height:22px;left:0;top:16px;background:#45463f}.empty-pixel-art span:nth-child(4){width:10px;height:10px;left:13px;top:21px;background:#d6a152}.empty-pixel-art span:nth-child(5){width:10px;height:10px;right:13px;top:21px;background:#d6a152}.empty-state .eyebrow{font:9px monospace;letter-spacing:.17em;color:var(--amber);margin:0 0 10px}.empty-state h1{font-family:"Arial Narrow","PingFang SC",sans-serif;font-stretch:condensed;font-size:25px;line-height:1.25;letter-spacing:.02em;margin:0}.empty-state>p:not(.eyebrow){font-size:10px;color:var(--faint);margin:12px 0 18px}.empty-actions{display:flex;gap:7px}.canvas-viewport{width:100%;height:100%;overflow:hidden;position:relative;cursor:crosshair}.checkerboard,.preview-stage{background-color:#c9c9c4;background-image:linear-gradient(45deg,#a9aaa5 25%,transparent 25%),linear-gradient(-45deg,#a9aaa5 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#a9aaa5 75%),linear-gradient(-45deg,transparent 75%,#a9aaa5 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0}.canvas-viewport.no-checker{background:#4b4c47;background-image:none}.canvas-transform{position:absolute;transform-origin:top left;box-shadow:var(--shadow)}#mainCanvas{display:block;image-rendering:pixelated}.canvas-tip{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);padding:6px 9px;border:1px solid #45463e;background:rgba(24,25,22,.92);border-radius:4px;font-size:9px;color:#bbbcb3;pointer-events:none}.drop-overlay{display:none;position:absolute;inset:10px;z-index:10;place-items:center;border:2px dashed var(--amber);background:rgba(30,31,27,.92);color:var(--amber);font-weight:700;font-size:16px}.canvas-shell.dragging .drop-overlay{display:grid}.timeline-panel{background:#1c1d1a;border-top:1px solid var(--line);min-width:0}.timeline-head{height:34px;padding:0 10px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line-soft)}.timeline-head>div:first-child{display:flex;align-items:center;gap:8px}.timeline-head b{font-size:10px}.timeline-head span{font-size:8px;color:var(--faint)}.timeline-controls{display:flex;gap:3px}.timeline-controls button{width:25px;height:22px;background:#292a26;border:1px solid var(--line);border-radius:3px;font-size:9px;cursor:pointer}.timeline{height:108px;display:flex;align-items:center;gap:7px;padding:10px;overflow-x:auto;overflow-y:hidden}.timeline-empty{width:100%;text-align:center;font-size:9px;color:var(--faint)}.frame-card{position:relative;flex:0 0 72px;height:82px;border:1px solid #3b3c36;background:#252622;border-radius:4px;padding:4px;cursor:pointer}.frame-card:hover{border-color:#5a5b52}.frame-card.selected{border-color:var(--amber);box-shadow:0 0 0 1px var(--amber)}.frame-card.dragging{opacity:.35}.frame-card.drag-over{transform:translateX(5px)}.frame-thumb{height:59px;display:grid;place-items:center;overflow:hidden;background-color:#b9bab4;background-image:linear-gradient(45deg,#92938e 25%,transparent 25%),linear-gradient(-45deg,#92938e 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#92938e 75%),linear-gradient(-45deg,transparent 75%,#92938e 75%);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0}.frame-thumb canvas{max-width:100%;max-height:100%;image-rendering:pixelated}.frame-card span{display:block;text-align:center;font:8px monospace;color:var(--muted);margin-top:5px}.preview-panel>*:not(.panel-heading){margin-left:14px;margin-right:14px}.preview-stage{position:relative;height:220px;margin-top:14px!important;border:1px solid var(--line);display:grid;place-items:center;overflow:hidden}.preview-stage canvas{width:100%;height:100%;object-fit:contain;image-rendering:pixelated}.preview-stage>span{position:absolute;font-size:9px;color:#555}.preview-readout{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-top:0}.preview-readout>div{padding:8px}.preview-readout>div+div{border-left:1px solid var(--line)}.preview-readout small,.preview-readout strong{display:block}.preview-readout small{font-size:7px;color:var(--faint);letter-spacing:.1em}.preview-readout strong{font:10px monospace;margin-top:3px}.play-button{width:calc(100% - 28px);height:36px;margin-top:12px!important;border:1px solid #9d7a44;background:#2d2a23;color:var(--amber-2);border-radius:4px;cursor:pointer;font-size:10px;font-weight:700}.play-button:disabled{opacity:.35}.play-button span{font-size:8px;margin-right:7px}.preview-panel>.range-head{margin-top:16px}.export-box{margin-top:8px!important;padding-top:14px;border-top:1px solid var(--line)}.keymap{margin-top:16px!important;padding-top:12px;border-top:1px solid var(--line);font-size:8px;color:var(--faint)}.keymap b{display:block;color:#97998f;letter-spacing:.1em;margin-bottom:7px}.keymap div{display:flex;justify-content:space-between;padding:3px 0}.keymap span{font-family:monospace;color:#c0c1b7}.nudge-pad{display:grid;grid-template-columns:repeat(3,34px);grid-template-rows:repeat(3,31px);justify-content:center;margin:12px 0}.nudge-pad button{border:1px solid var(--line);background:#292a26;cursor:pointer}.nudge-pad button:nth-child(1){grid-column:2}.nudge-pad button:nth-child(2){grid-column:1;grid-row:2}.nudge-pad .center{grid-column:2;grid-row:2}.nudge-pad button:nth-child(4){grid-column:3;grid-row:2}.nudge-pad button:nth-child(5){grid-column:2;grid-row:3}.button-pair{display:grid;grid-template-columns:1fr 1fr;gap:6px}.toast{position:fixed;left:50%;bottom:20px;transform:translate(-50%,20px);padding:9px 13px;border:1px solid #57584f;background:#292a25;border-radius:5px;box-shadow:var(--shadow);font-size:10px;opacity:0;pointer-events:none;transition:.2s;z-index:100}.toast.show{opacity:1;transform:translate(-50%,0)}
.frame-selection{display:flex;gap:3px;margin-left:auto;margin-right:8px}.frame-selection button{height:22px;padding:0 7px;background:#292a26;border:1px solid var(--line);border-radius:3px;color:var(--muted);font-size:8px;cursor:pointer}.frame-card.excluded{opacity:.38;filter:saturate(.25)}.frame-toggle{position:absolute;z-index:2;left:7px;top:7px;width:13px;height:13px;accent-color:var(--amber);cursor:pointer}.onion-controls{padding:8px 0 3px;border-top:1px solid var(--line-soft)}.onion-controls .range-head{margin-top:0}.color-setting{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-size:9px;color:var(--muted)}.color-setting input{width:32px;height:25px;padding:2px;border:1px solid var(--line);background:var(--panel-2)}.color-setting code{font-size:9px;color:var(--text)}.export-types{margin-top:6px}
@media(max-height:760px){.preview-stage{height:170px}.keymap{display:none}.tool-section{padding-top:12px}.workspace{grid-template-columns:230px minmax(540px,1fr) 250px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}