@import "https://fonts.googleapis.com/css2?family=Chivo+Mono:wght@400&display=swap";:root{--accent:#ff4d00;--bg-section:#ebedf1;--bg-card:#fcfcfc;--bg-white:#fff;--text-primary:#000;--text-secondary:#6f6f6f;--border-dark:#575757;--border-nav:#474747;--radius-section:7px;--radius-pill:50px;--radius-card:3px;--sidebar-width:220px;--nav-height:38px;--row-height:30px;--section-header-height:20px;--font:"Chivo Mono", monospace}[data-theme=dark]{--bg-section:#1a1a1a;--bg-card:#232323;--bg-white:#000;--text-primary:#fff;--text-secondary:#999;--border-dark:#999;--border-nav:#999}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font);background:var(--bg-white);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;width:100vw;height:100vh;overflow:hidden}#root{width:100vw;height:100vh}button{font-family:var(--font);cursor:pointer;font-size:inherit;background:0 0;border:none}select{font-family:var(--font)}input[type=range]{appearance:none;cursor:pointer;background:0 0;width:90px;height:10px}input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(to right, var(--text-primary) 0%, var(--text-primary) var(--range-progress,50%), #c9d3db var(--range-progress,50%), #c9d3db 100%);border-radius:1px;height:2px}input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--text-primary);border-radius:50%;width:10px;height:10px;margin-top:-4px}.color-swatch{cursor:pointer;flex-shrink:0;width:20px;height:20px;position:relative}.color-swatch-circle{box-sizing:border-box;background:0 0;border:1px solid #333;border-radius:50%;justify-content:center;align-items:center;width:20px;height:20px;display:flex}.color-swatch-circle:after{content:"";background:var(--swatch-color);border-radius:50%;width:14px;height:14px}.color-swatch input[type=color]{opacity:0;cursor:pointer;appearance:none;border:none;width:100%;height:100%;padding:0;position:absolute;top:0;left:0}.navbar{background:var(--bg-white);flex-shrink:0;align-items:center;height:40px;display:flex}.navbar-left{width:calc(var(--sidebar-width) + 8px);flex-shrink:0;justify-content:flex-end;align-items:center;height:100%;padding-left:14px;padding-right:10px;display:flex}.theme-toggle{border-radius:var(--radius-pill);border:1px solid var(--border-nav);cursor:pointer;background:0 0;align-items:center;width:38px;height:20px;padding:0;display:flex;position:relative}.theme-toggle-knob{background:var(--text-primary);pointer-events:none;border-radius:50%;width:12px;height:12px;transition:left .2s;position:absolute;left:4px}.theme-toggle--dark .theme-toggle-knob{left:20px}.navbar-center{flex:1;justify-content:space-between;align-items:center;height:100%;padding-left:0;padding-right:10px;display:flex}.navbar-controls-left{align-items:center;gap:20px;display:flex}.navbar-controls-right{align-items:center;gap:5px;display:flex}.navbar-control{align-items:center;gap:10px;display:flex}.navbar-label{text-transform:uppercase;color:var(--text-primary);white-space:nowrap;font-size:9px}.dropdown{position:relative}.dropdown-trigger{border:1px solid var(--border-nav);border-radius:var(--radius-pill);text-transform:uppercase;width:100%;height:20px;color:var(--text-primary);cursor:pointer;white-space:nowrap;background:0 0;justify-content:space-between;align-items:center;padding:0 10px;font-size:9px;display:flex}.dropdown-trigger:hover{background:#00000008}.dropdown-arrow{flex-shrink:0;margin-left:6px;transform:rotate(180deg)}.dropdown-menu{background:var(--text-primary);border:1px solid var(--text-primary);border-radius:var(--radius-section);z-index:100;min-width:80px;position:fixed;overflow:hidden;box-shadow:0 4px 12px #0003}.dropdown-item{text-transform:uppercase;width:100%;color:var(--bg-white);text-align:left;cursor:pointer;background:0 0;border:none;padding:6px 10px;font-size:9px;display:block}.dropdown-item:hover{background:#ffffff1a}.dropdown-item.active{color:var(--accent)}.nav-btn{border-radius:var(--radius-pill);width:100px;height:20px;font-family:var(--font);text-transform:uppercase;cursor:pointer;white-space:nowrap;flex-shrink:0;justify-content:center;align-items:center;font-size:9px;display:flex}.nav-btn-accent{background:var(--accent);border:1px solid var(--accent);color:#fff}.nav-btn-accent:hover{opacity:.9}.nav-btn-outline{border:1px solid var(--border-dark);color:var(--text-primary);background:0 0}.nav-btn-outline:hover{background:#00000008}.nav-render-progress{border:3px solid var(--accent);background:0 0;border-radius:25px;flex-shrink:0;width:100px;height:20px;position:relative;overflow:hidden}.nav-render-bar{background:#ff4c0066;height:100%;transition:width .15s linear;position:absolute;top:0;left:0}.nav-render-text{z-index:1;width:100%;height:100%;font-family:var(--font);text-transform:uppercase;color:var(--text-primary);white-space:nowrap;justify-content:center;align-items:center;font-size:9px;display:flex;position:relative}.cp-wrapper{flex-shrink:0;position:relative}.cp-popover{z-index:1000;background:var(--bg-white);border:1px solid var(--border-dark);border-radius:var(--radius-section);flex-direction:column;gap:6px;width:160px;padding:8px;display:flex;position:fixed;box-shadow:0 4px 12px #0000001f}.cp-area{cursor:crosshair;border-radius:4px;width:100%;height:100px;position:relative;overflow:hidden}.cp-area-white{background:linear-gradient(90deg,#fff,#0000);position:absolute;inset:0}.cp-area-black{background:linear-gradient(#0000,#000);position:absolute;inset:0}.cp-area-cursor{pointer-events:none;border:2px solid #fff;border-radius:50%;width:10px;height:10px;position:absolute;transform:translate(-50%,-50%);box-shadow:0 0 2px #00000080}.cp-hue{cursor:pointer;background:linear-gradient(90deg,red 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%);border-radius:4px;width:100%;height:8px;position:relative}.cp-hue-cursor{pointer-events:none;border:2px solid #fff;border-radius:50%;width:10px;height:10px;position:absolute;top:50%;transform:translate(-50%,-50%);box-shadow:0 0 2px #0006}.cp-hex-row{border:1px solid var(--border-dark);border-radius:var(--radius-pill);align-items:center;gap:2px;height:20px;padding:0 8px;display:flex}.cp-hash{font-family:var(--font);color:var(--text-secondary);text-transform:uppercase;font-size:9px}.cp-hex-input{font-family:var(--font);color:var(--text-primary);text-transform:uppercase;background:0 0;border:none;outline:none;flex:1;width:100%;font-size:9px}.sidebar{width:var(--sidebar-width);flex-direction:column;flex-shrink:0;min-height:0;display:flex}.sidebar-scroll{flex-direction:column;flex:1;gap:5px;display:flex;overflow:hidden auto}.sidebar-scroll::-webkit-scrollbar{width:0}.section{border-radius:var(--radius-section);flex-shrink:0;overflow:hidden}.section-header{height:var(--section-header-height);background:var(--bg-section);border-bottom:1px solid var(--bg-white);justify-content:space-between;align-items:center;padding:0 10px;display:flex}.section-title{text-transform:uppercase;letter-spacing:.21px;color:var(--text-secondary);font-size:7px}.sidebar-row{height:var(--row-height);background:var(--bg-section);justify-content:space-between;align-items:center;padding:0 10px;display:flex}.sidebar-row.bordered{border-bottom:1px solid var(--bg-white)}.row-label{text-transform:uppercase;width:80px;color:var(--text-primary);white-space:nowrap;flex-shrink:0;font-size:9px}.row-label-inline{text-transform:uppercase;color:var(--text-primary);white-space:nowrap;font-size:9px}.row-value{justify-content:space-between;align-items:center;width:120px;height:100%;display:flex}.value-number{color:var(--accent);white-space:nowrap;font-size:9px}.value-number.editable{cursor:text}.value-number.editable:hover{text-decoration:underline}.editable-value-input{width:30px;font-family:var(--font);color:var(--accent);border:none;border-bottom:1px solid var(--accent);background:0 0;outline:none;padding:0;font-size:9px}.editable-value-input.hex{width:42px}.position-values{align-items:center;gap:10px;width:120px;display:flex}.position-pair{flex:1;align-items:center;gap:5px;display:flex}.position-axis{text-transform:uppercase;color:var(--text-primary);font-size:9px}.source-row{gap:5px;padding:0 10px}.source-row .sb-dropdown{flex:none;width:75px}.sb-dropdown-trigger.open-file-btn{flex:1;justify-content:center}.source-file-pill{border:1px solid var(--accent);border-radius:var(--radius-pill);text-transform:uppercase;height:20px;color:var(--text-primary);cursor:pointer;font-size:9px;font-family:var(--font);background:0 0;flex:1 0;justify-content:space-between;align-items:center;padding:0 10px;display:flex}.source-file-pill .close-icon{flex-shrink:0}.sb-dropdown{flex:1;position:relative}.sb-dropdown-trigger{border:1px solid var(--border-dark);border-radius:var(--radius-pill);text-transform:uppercase;width:100%;height:20px;color:var(--text-primary);cursor:pointer;white-space:nowrap;font-size:9px;font-family:var(--font);background:0 0;justify-content:space-between;align-items:center;padding:0 10px;display:flex}.sb-dropdown-trigger.accent{border-color:var(--accent)}.sb-dropdown-trigger:hover{background:#00000008}.sb-dropdown-arrow{flex-shrink:0;margin-left:4px;transform:rotate(180deg)}.sb-dropdown-menu{background:var(--text-primary);border:1px solid var(--text-primary);border-radius:var(--radius-section);z-index:1000;min-width:75px;position:fixed;overflow:hidden;box-shadow:0 4px 12px #0003}.sb-dropdown-item{text-transform:uppercase;width:100%;color:var(--bg-white);text-align:left;cursor:pointer;font-size:9px;font-family:var(--font);background:0 0;border:none;padding:5px 10px;display:block}.sb-dropdown-item:hover{background:#ffffff1a}.sb-dropdown-item.active{color:var(--accent)}.toggle-group{flex:1;gap:3px;margin-left:30px;display:flex}.toggle-btn{border:1px solid var(--border-dark);border-radius:var(--radius-pill);text-transform:uppercase;height:20px;color:var(--text-primary);cursor:pointer;font-size:9px;font-family:var(--font);background:0 0;flex:1;justify-content:center;align-items:center;display:flex}.toggle-btn.active{background:var(--text-primary);border-color:var(--text-primary);color:var(--bg-card)}.pixel-configs-spacer{background:var(--bg-section);height:5px}.pixel-config{background:var(--bg-section);padding:0 10px 9px}.pixel-header{background:var(--bg-card);border-bottom:1px solid var(--bg-section);border-radius:var(--radius-card) var(--radius-card) 0 0;cursor:pointer;justify-content:space-between;align-items:center;height:20px;padding:0 5px 0 10px;display:flex}.pixel-expand-btn{cursor:pointer;width:14px;height:14px;color:var(--text-secondary);background:0 0;border:none;justify-content:center;align-items:center;padding:0;display:flex}.pixel-controls{background:var(--bg-card);border-radius:0 0 var(--radius-card) var(--radius-card);align-items:center;gap:7px;height:30px;padding:0 10px;display:flex}.pixel-config:has(.pixel-expanded) .pixel-controls{border-radius:0}.pixel-shape{flex:1}.pixel-color-row{flex:1;justify-content:flex-end;align-items:center;gap:5px;display:flex}.pixel-file-row{flex:1;align-items:center;gap:5px;display:flex}.pixel-file-btn-wrap{flex:1}.sb-file-pill{border:1px solid var(--accent);border-radius:var(--radius-pill);text-transform:uppercase;width:100%;height:20px;color:var(--text-primary);cursor:pointer;font-size:9px;font-family:var(--font);background:0 0;justify-content:space-between;align-items:center;gap:5px;padding:0 10px;display:flex;overflow:hidden}.close-icon{color:var(--text-primary);flex-shrink:0}.pixel-expanded{background:var(--bg-card);border-radius:0 0 var(--radius-card) var(--radius-card);padding:0 0 5px;overflow:hidden}.pixel-exp-row{align-items:center;max-width:100%;height:20px;padding:0 10px;display:flex}.pixel-exp-label{text-transform:uppercase;width:70px;min-width:70px;color:var(--text-primary);flex-shrink:0;font-size:9px}.pixel-exp-value{flex:1;justify-content:flex-end;align-items:center;gap:4px;min-width:0;display:flex}.pixel-exp-unit{color:var(--accent);flex-shrink:0;font-size:9px}.pixel-exp-slider{flex:none;min-width:60px;max-width:60px;width:60px!important}.fill-toggle{gap:3px;display:flex}.fill-toggle-btn{border:1px solid var(--border-dark);border-radius:var(--radius-pill);height:15px;font-family:var(--font);text-transform:uppercase;color:var(--text-primary);cursor:pointer;background:0 0;justify-content:center;align-items:center;padding:0 10px;font-size:9px;display:flex}.fill-toggle-btn.active{background:var(--text-primary);border-color:var(--text-primary);color:var(--bg-white)}.bg-dropdown-label{align-items:center;display:flex}.bg-dropdown-label .sb-dropdown{flex:none;width:80px}.color-value{justify-content:flex-end;align-items:center;gap:10px;width:120px;height:100%;display:flex}.format-pills{gap:3px;display:flex}.format-pill{border:1px solid var(--border-dark);border-radius:var(--radius-pill);text-transform:uppercase;height:20px;color:var(--text-primary);cursor:pointer;font-size:9px;font-family:var(--font);background:0 0;padding:0 8px}.format-pill.active{background:var(--text-primary);border-color:var(--text-primary);color:var(--bg-white)}.export-btn-row{background:var(--bg-section);padding:10px}.export-btn{background:var(--accent);border:1px solid var(--accent);border-radius:var(--radius-pill);text-transform:uppercase;width:100%;height:26px;color:var(--bg-white);cursor:pointer;font-size:9px;font-family:var(--font)}.export-btn:hover{opacity:.9}.credits{flex:1;align-items:flex-end;padding:10px 0;display:flex}.credits span{text-transform:uppercase;letter-spacing:.15px;color:var(--text-secondary);white-space:pre;font-size:5px}.canvas-container{background:var(--bg-section);border-radius:var(--radius-section);flex:1;justify-content:center;align-items:center;min-height:0;padding:40px;display:flex;overflow:hidden}.canvas-wrapper{position:relative}.ascii-canvas{background:var(--bg-white);display:block}.canvas-render-overlay{pointer-events:none;position:absolute;inset:0;overflow:hidden}.canvas-render-white{background:#ffffffb3;position:absolute;inset:0}.canvas-render-bar{background:var(--accent);opacity:.9;height:100%;transition:width .15s linear;position:absolute;top:0;left:0}.canvas-render-pct{font-family:var(--font);color:#000;text-transform:uppercase;white-space:nowrap;z-index:1;font-size:200px;line-height:1;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.timeline{background:var(--bg-section);border-radius:var(--radius-section);flex-shrink:0;align-items:center;gap:20px;height:100px;padding:40px 30px 40px 20px;display:flex;overflow:hidden}.play-button{background:var(--bg-white);cursor:pointer;width:60px;height:60px;color:var(--text-primary);border:1px solid #ccc;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;display:flex}.play-button:hover{background:var(--bg-card)}.timeline-track-area{cursor:pointer;flex:1;align-items:center;height:32px;display:flex;position:relative}.timeline-track{background:#c9d3db;border-radius:10px;width:100%;height:6px;position:relative;overflow:hidden}.timeline-progress{background:var(--text-primary);height:100%;position:absolute;top:0;left:0}.timeline-render-progress{z-index:2;pointer-events:none;background:#ff4c0080;height:28px;transition:width .15s linear;position:absolute;top:50%;left:0;transform:translateY(-50%)}.timeline-selection{z-index:5;align-items:stretch;height:100%;display:flex;position:absolute;top:0}.selection-handle{background:var(--accent);cursor:ew-resize;flex-shrink:0;justify-content:center;align-items:center;width:11px;height:32px;display:flex}.selection-handle-left{border-radius:4px 0 0 4px}.selection-handle-right{border-radius:0 4px 4px 0}.handle-grip{gap:2px;display:flex}.grip-line{background:#00000059;border-radius:1px;width:1.5px;height:12px}.selection-body{pointer-events:none;flex-direction:column;flex:1;justify-content:space-between;min-width:0;display:flex}.selection-stroke-top,.selection-stroke-bottom{background:var(--accent);width:100%;height:2px}.loop-time-pill{background:var(--text-primary);-webkit-user-select:none;user-select:none;color:#fff;font-family:var(--font);text-transform:uppercase;border-radius:var(--radius-pill);white-space:nowrap;pointer-events:none;z-index:6;opacity:0;padding:5px 6px;font-size:9px;transition:opacity .3s;position:absolute;top:50%;right:-4px;transform:translate(100%,-50%)}.loop-time-pill.visible{opacity:1}.timeline-playhead{z-index:10;cursor:grab;position:absolute;top:50%;transform:translate(-50%,-50%)}.timeline-playhead:active{cursor:grabbing}.playhead-handle{background:var(--text-primary);border:3px solid var(--bg-white);border-radius:50%;width:18px;height:18px;box-shadow:0 1px 4px #0003}.total-time-pill{font-family:var(--font);text-transform:uppercase;color:var(--text-primary);border-radius:var(--radius-pill);white-space:nowrap;flex-shrink:0;padding:5px 6px;font-size:9px}.app{background:var(--bg-white);flex-direction:column;width:100vw;height:100vh;display:flex}.body{flex:1;gap:5px;min-height:0;padding:0 5px 5px;display:flex}.main-content{flex-direction:column;flex:1;gap:5px;min-width:0;min-height:0;display:flex}