@font-face{font-family:Pixelify;src:url(https://fonts.gstatic.com/s/pixelifysans/v1/CHy2V-3HFUT7aC4iv1TxGDR9CHmj2_1m.woff2) format("woff2");font-weight:400 700;font-display:swap}:root{--bg: #0a0a0a;--surface: #141414;--border: #2a2a2a;--accent: #00ff88;--accent-dim: #00cc6a;--text: #e0e0e0;--text-muted: #555;--danger: #ff3333;--white: #fff;--black: #000;--px-font: "Pixelify", "Pixelify Sans", monospace;--menubar-h: 44px;--statusbar-h: 30px;--sidebar-w: 0px}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:var(--px-font);cursor:crosshair;image-rendering:pixelated;-webkit-font-smoothing:none;-moz-osx-font-smoothing:unset;-webkit-tap-highlight-color:transparent}.app-ready #menubar,.app-ready #gridContainer,.app-ready #sidebar,.app-ready #shelbyBar{opacity:1!important;transition:opacity .3s ease}#menubar{position:fixed;top:0;left:0;right:0;height:var(--menubar-h);background:var(--black);border-bottom:3px solid var(--accent);display:flex;align-items:center;justify-content:space-between;padding:0 12px;z-index:1000;user-select:none}.menubar-left{display:flex;align-items:center;gap:8px}.logo-block{color:var(--accent);font-size:20px;animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.3}}#menubar h1{font-family:var(--px-font);font-size:13px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--white)}.on-shelby{color:var(--accent)}.menubar-right{display:flex;align-items:center;gap:10px;font-size:10px;letter-spacing:1px}.status-dot{width:8px;height:8px;background:#fa0;animation:blink 1.5s infinite}.status-dot.connected{background:var(--accent);animation:none}.status-dot.error{background:var(--danger)}@keyframes blink{0%,to{opacity:1}50%{opacity:.2}}.status-text{color:var(--text-muted);font-size:9px}#gridContainer{position:fixed;top:var(--menubar-h);left:0;right:var(--sidebar-w);bottom:var(--statusbar-h);display:flex;align-items:center;justify-content:center;background:var(--bg);overflow:hidden;touch-action:manipulation}#pixelGrid{display:grid;grid-template-columns:repeat(64,var(--px-size, 14px));grid-template-rows:repeat(32,var(--px-size, 14px));gap:1px;background:#1a1a1a;contain:layout style paint}.grid-coord{position:absolute;bottom:8px;left:12px;background:#000000d9;border:1px solid var(--border);padding:4px 10px;font-size:9px;letter-spacing:2px;color:var(--text-muted);pointer-events:none;opacity:0;transition:opacity .15s;z-index:20}.grid-coord.visible{opacity:1}.pixel{background:var(--surface);cursor:crosshair;position:relative;contain:layout style paint}.pixel.skeleton{background:linear-gradient(90deg,#141414 25%,#1c1c1c,#141414 75%);background-size:200% 100%;animation:shimmer 1.4s ease-in-out infinite}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.pixel:hover{outline:2px solid var(--accent);outline-offset:-2px;z-index:10}.pixel.painted:hover{outline-color:var(--white)}.pixel.selected{outline:2px solid var(--white);outline-offset:-2px;z-index:10;animation:selectedPulse 1s ease-in-out infinite}@keyframes selectedPulse{0%,to{outline-color:var(--white)}50%{outline-color:var(--accent)}}.pixel.painted{animation:pixelIn .2s ease-out}@keyframes pixelIn{0%{transform:scale(0)}to{transform:scale(1)}}.pixel.just-claimed{animation:claimedBurst .6s ease-out}@keyframes claimedBurst{0%{transform:scale(1);box-shadow:0 0 0 0 var(--accent)}30%{transform:scale(1.4);box-shadow:0 0 12px 4px var(--accent)}60%{transform:scale(.9);box-shadow:0 0 4px 1px var(--accent)}to{transform:scale(1);box-shadow:none}}.modal-overlay{position:fixed;inset:0;background:#000000e0;display:flex;align-items:center;justify-content:center;z-index:2000;animation:fadeIn .15s ease}.modal-overlay.hidden{display:none}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.brutal-box{background:var(--black);border:3px solid var(--accent);box-shadow:6px 6px 0 var(--accent);max-width:400px;width:92%;animation:modalIn .2s ease-out}@keyframes modalIn{0%{transform:translateY(20px) scale(.95);opacity:0}to{transform:none;opacity:1}}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:3px solid var(--border);background:var(--accent);color:var(--black)}.modal-header h2{font-family:var(--px-font);font-size:12px;font-weight:700;letter-spacing:2px}.pixel-id{opacity:.6}.close-btn{background:none;border:2px solid var(--black);color:var(--black);font-size:18px;cursor:pointer;width:26px;height:26px;display:flex;align-items:center;justify-content:center;font-weight:700}.close-btn:hover{background:var(--black);color:var(--accent)}.modal-body{padding:14px;display:flex;flex-direction:column;gap:10px;max-height:calc(100vh - 140px);overflow-y:auto}.field-label{font-size:9px;letter-spacing:2px;color:var(--text-muted);font-weight:700;text-transform:uppercase}.required{color:var(--danger);font-size:8px}.char-count{color:var(--text-muted);font-weight:400}.color-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:3px}.color-option{aspect-ratio:1;border:2px solid transparent;cursor:pointer;min-height:26px;transition:border-color .1s}.color-option:hover{border-color:var(--white)}.color-option.selected{border-color:var(--white);box-shadow:0 0 0 2px var(--accent)}.custom-color-row{display:flex;align-items:center;gap:6px}.custom-color-row input[type=color]{width:34px;height:26px;border:2px solid var(--border);background:var(--surface);cursor:pointer;padding:0}.btn-small{background:var(--border);border:2px solid var(--text-muted);color:var(--text);font-family:var(--px-font);font-size:9px;padding:4px 8px;cursor:pointer;letter-spacing:1px;font-weight:700}.btn-small:hover{background:var(--accent);color:var(--black);border-color:var(--accent)}.selected-color-preview{display:flex;align-items:center;gap:8px;padding:4px 0}.color-swatch{width:18px;height:18px;border:2px solid var(--white)}#selectedHex{font-size:11px;color:var(--accent);font-weight:700}.input-row{display:flex;align-items:center;border:2px solid var(--border);background:var(--surface);transition:border-color .15s}.input-prefix{padding:6px 0 6px 8px;color:var(--accent);font-weight:700;font-size:13px}.input-row input{flex:1;background:transparent;border:none;outline:none;color:var(--text);font-family:var(--px-font);font-size:11px;padding:6px}textarea{background:var(--surface);border:2px solid var(--border);color:var(--text);font-family:var(--px-font);font-size:10px;padding:6px;resize:none;outline:none;transition:border-color .15s}textarea:focus,.input-row:focus-within{border-color:var(--accent)}.btn-paint{background:var(--accent);border:3px solid var(--accent);color:var(--black);font-family:var(--px-font);font-size:12px;font-weight:700;letter-spacing:2px;padding:10px;cursor:pointer;text-transform:uppercase;box-shadow:4px 4px 0 var(--white);display:flex;align-items:center;justify-content:center;gap:8px;transition:transform .1s,box-shadow .1s}.btn-paint:hover{box-shadow:2px 2px 0 var(--white);transform:translate(2px,2px)}.btn-paint:active{box-shadow:none;transform:translate(4px,4px)}.btn-paint:disabled{opacity:.5;cursor:not-allowed;box-shadow:none;transform:none}.paint-icon{font-size:11px}.sidebar{display:none;position:fixed;top:var(--menubar-h);right:0;bottom:var(--statusbar-h);width:var(--sidebar-w);background:#080808;border-left:3px solid var(--accent);z-index:900;flex-direction:column;opacity:0}.sb-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;background:var(--black);border-bottom:1px solid var(--border)}.sb-header-title{display:flex;align-items:center;gap:8px}.sb-header-icon{color:var(--accent);font-size:16px}.sb-header h2{font-family:var(--px-font);font-size:11px;font-weight:700;letter-spacing:2px;color:var(--text)}.sb-pixel-id{font-family:var(--px-font);font-size:13px;font-weight:700;color:var(--accent);letter-spacing:1px}.sb-scroll{flex:1;overflow-y:auto;display:flex;flex-direction:column}.sb-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:40px 20px}.sb-empty-grid{display:grid;grid-template-columns:repeat(5,18px);grid-template-rows:repeat(5,18px);gap:3px}.sb-empty-cell{background:var(--surface);border:1px solid var(--border);transition:background .3s,border-color .3s}.sb-empty-cell.lit{background:var(--accent);border-color:var(--accent);box-shadow:0 0 6px #00ff884d}.sb-empty-text{font-size:10px;letter-spacing:2px;color:var(--text-muted);text-align:center;line-height:1.8}.sb-empty-sub{font-size:9px;letter-spacing:1px;color:#333}.sb-form{display:flex;flex-direction:column}.sb-form.hidden{display:none}.sb-section{padding:14px 18px}.sb-section+.sb-section{padding-top:0}.sb-divider{height:1px;background:var(--border);margin:6px 18px}.sb-label{display:block;font-size:9px;letter-spacing:2px;color:var(--text-muted);font-weight:700;text-transform:uppercase;margin-bottom:10px}.sb-required{color:var(--danger);font-size:7px;letter-spacing:1px;margin-left:4px}.sb-preview{display:flex;align-items:center;gap:14px;padding:12px;background:var(--surface);border:2px solid var(--border);border-radius:2px}.sb-preview-swatch{width:48px;height:48px;border:3px solid var(--white);flex-shrink:0;transition:background-color .15s;box-shadow:0 0 0 1px var(--black)}.sb-preview-info{display:flex;flex-direction:column;gap:4px;min-width:0}.sb-preview-hex{font-size:16px;font-weight:700;color:var(--white);letter-spacing:1px}.sb-preview-coord{font-size:9px;letter-spacing:2px;color:var(--text-muted)}.sb-color-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:4px}.sb-color-grid .color-option{aspect-ratio:1;border:2px solid transparent;cursor:pointer;min-height:0;transition:border-color .1s,transform .1s}.sb-color-grid .color-option:hover{border-color:var(--white);transform:scale(1.15);z-index:2}.sb-color-grid .color-option.selected{border-color:var(--white);box-shadow:0 0 0 2px var(--accent);transform:scale(1.1)}.sb-custom-row{display:flex;align-items:center;gap:8px}.sb-hex-input{flex:1;display:flex;align-items:center;border:2px solid var(--border);background:var(--surface);transition:border-color .15s}.sb-hex-input:focus-within{border-color:var(--accent)}.sb-hex-hash{padding:7px 0 7px 10px;color:var(--text-muted);font-weight:700;font-size:12px;user-select:none}.sb-hex-input input{flex:1;background:transparent;border:none;outline:none;color:var(--white);font-family:var(--px-font);font-size:12px;padding:7px 8px 7px 4px;letter-spacing:2px;text-transform:uppercase}.sb-hex-input input::placeholder{color:#333;letter-spacing:2px}.sb-native-picker{width:38px;height:38px;border:2px solid var(--border);background:var(--surface);cursor:pointer;padding:2px;flex-shrink:0;transition:border-color .15s}.sb-native-picker:hover{border-color:var(--accent)}.sb-input-row{display:flex;align-items:center;border:2px solid var(--border);background:var(--surface);transition:border-color .15s}.sb-input-row:focus-within{border-color:var(--accent)}.sb-input-at{padding:8px 0 8px 10px;color:var(--accent);font-weight:700;font-size:14px}.sb-input-row input{flex:1;background:transparent;border:none;outline:none;color:var(--text);font-family:var(--px-font);font-size:12px;padding:8px 10px 8px 4px}.sb-form textarea{width:100%;background:var(--surface);border:2px solid var(--border);color:var(--text);font-family:var(--px-font);font-size:11px;padding:10px;resize:none;outline:none;transition:border-color .15s;line-height:1.5}.sb-form textarea:focus{border-color:var(--accent)}.sb-label-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.sb-label-row .sb-label{margin-bottom:0}.sb-char-count{font-size:9px;color:#333;letter-spacing:1px;font-weight:700}.sb-footer{padding:14px 18px;background:var(--black);border-top:1px solid var(--border)}.sb-paint-btn{width:100%;background:var(--accent);border:3px solid var(--accent);color:var(--black);font-family:var(--px-font);font-size:12px;font-weight:700;letter-spacing:3px;padding:14px;cursor:pointer;text-transform:uppercase;box-shadow:4px 4px 0 var(--white);transition:transform .1s,box-shadow .1s,opacity .15s}.sb-paint-btn:hover:not(:disabled){box-shadow:2px 2px 0 var(--white);transform:translate(2px,2px)}.sb-paint-btn:active:not(:disabled){box-shadow:none;transform:translate(4px,4px)}.sb-paint-btn:disabled{opacity:.25;cursor:not-allowed;box-shadow:none}.tooltip{position:fixed;pointer-events:none;z-index:3000;background:var(--black);border:2px solid var(--accent);box-shadow:3px 3px 0 var(--accent);padding:6px 10px;min-width:140px;max-width:240px;font-size:10px}.tooltip.hidden{display:none}.tooltip-color{width:100%;height:5px;margin-bottom:5px}.tooltip-user{color:var(--accent);font-weight:700;font-size:11px;margin-bottom:3px}.tooltip-msg{color:var(--text);font-size:9px;word-break:break-word;margin-bottom:3px}.tooltip-meta{color:var(--text-muted);font-size:8px;letter-spacing:1px}.tx-toast{position:fixed;bottom:calc(var(--statusbar-h) + 10px);right:calc(var(--sidebar-w) + 12px);width:320px;background:var(--black);border:2px solid var(--accent);box-shadow:4px 4px 0 var(--accent);z-index:2500;font-size:10px;animation:slideIn .25s ease-out;overflow:hidden}.tx-toast.hidden{display:none}.tx-toast.success{border-color:var(--accent)}.tx-toast.error{border-color:var(--danger);box-shadow:4px 4px 0 var(--danger)}@keyframes slideIn{0%{transform:translate(110%);opacity:0}to{transform:translate(0);opacity:1}}.toast-header{display:flex;align-items:center;gap:6px;padding:8px 10px;background:var(--accent);color:var(--black);font-weight:700;letter-spacing:1px;font-size:10px;overflow:hidden}.toast-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.tx-toast.error .toast-header{background:var(--danger);color:var(--white)}.toast-spinner{width:12px;height:12px;border:2px solid transparent;border-top:2px solid var(--black);border-right:2px solid var(--black);animation:spin .8s linear infinite}.tx-toast.success .toast-spinner,.tx-toast.error .toast-spinner{animation:none;border:none}.tx-toast.success .toast-spinner:after{content:"✓";font-size:12px}.tx-toast.error .toast-spinner:after{content:"✗";font-size:12px}@keyframes spin{to{transform:rotate(360deg)}}.toast-body{padding:8px 10px;display:flex;flex-direction:column;gap:3px;overflow:hidden}.toast-row{display:flex;justify-content:space-between;align-items:center;padding:1px 0;min-width:0}.toast-label{color:var(--text-muted);font-size:8px;letter-spacing:1px;font-weight:700;flex-shrink:0}.toast-value{color:var(--text);font-size:10px;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;max-width:200px}.toast-hash{font-size:8px;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.toast-link{color:var(--accent);text-decoration:none;font-weight:700;font-size:10px}.toast-link:hover{text-decoration:underline}.toast-progress{height:3px;background:var(--surface)}.toast-progress-bar{height:100%;background:var(--accent);width:0%;transition:width .3s ease}.tx-toast.error .toast-progress-bar{background:var(--danger)}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--border)}.shelby-bar{position:fixed;bottom:0;left:0;right:0;height:var(--statusbar-h);background:var(--black);border-top:3px solid var(--accent);display:flex;align-items:center;justify-content:space-between;padding:0 12px;z-index:1000;font-size:9px;letter-spacing:1px;user-select:none;overflow:hidden}.shelby-bar-left{display:flex;align-items:center;gap:6px;min-width:0;flex-shrink:1;overflow:hidden}.shelby-bar-icon{color:var(--accent);font-size:10px;flex-shrink:0}.shelby-bar-label{color:var(--accent);font-weight:700;font-size:9px;white-space:nowrap;flex-shrink:0}.shelby-bar-dot{width:6px;height:6px;flex-shrink:0;background:var(--text-muted)}.shelby-bar-dot.idle{background:var(--accent)}.shelby-bar-dot.busy{background:#fa0;animation:blink 1s infinite}.shelby-bar-dot.error{background:var(--danger)}.shelby-bar-status{color:var(--text-muted);font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.shelby-bar-right{display:flex;align-items:center;gap:8px;flex-shrink:0}.shelby-bar-link{color:var(--accent);text-decoration:none;font-weight:700;font-size:9px;padding:2px 5px;border:1px solid var(--accent);transition:background .1s,color .1s;white-space:nowrap}.shelby-bar-link:hover{background:var(--accent);color:var(--black)}.shelby-bar-pixels{color:var(--text-muted);font-size:9px;white-space:nowrap}@media(min-width:900px){:root{--sidebar-w: 320px}.sidebar{display:flex}}@media(min-width:1200px){:root{--sidebar-w: 340px}}@media(max-width:768px){:root{--menubar-h: 38px;--statusbar-h: 26px}#menubar{padding:0 8px}#menubar h1{font-size:10px;letter-spacing:1px}.menubar-right{gap:6px}.status-text{font-size:8px}.brutal-box{max-width:96%}.modal-body{padding:10px;gap:8px;max-height:calc(100vh - 100px)}.color-grid{gap:2px}.color-option{min-height:24px}.tx-toast{width:calc(100% - 16px);right:8px;left:8px;bottom:calc(var(--statusbar-h) + 6px);max-width:none}.shelby-bar{padding:0 8px;gap:4px}.shelby-bar-right{gap:4px}.shelby-bar-link{font-size:8px;padding:1px 4px}.shelby-bar-pixels{font-size:8px}.shelby-bar-status{max-width:120px}.tooltip{display:none!important}.grid-coord{bottom:6px;left:50%;transform:translate(-50%)}}@media(max-width:480px){#menubar h1{font-size:9px;letter-spacing:0}.on-shelby,.menubar-right .status-text{display:none}.modal-header h2{font-size:10px}.btn-paint{font-size:10px;padding:8px}.shelby-bar-label{display:none}.shelby-bar-status{max-width:80px}.shelby-bar-link{display:none}}@media(hover:none){.pixel:hover{outline:none;z-index:auto}.pixel:active{outline:2px solid var(--accent);outline-offset:-2px}.tooltip{display:none!important}.grid-coord{font-size:10px;padding:5px 12px}}