:root{--colour-bg:#000000;--colour-surface:#16213e;--colour-border:#0f3460;--colour-accent:#e94560;--colour-ready:#4caf50;--colour-cooldown:#f44336;--colour-text:#e0e0e0;--colour-muted:#888888;--colour-link:#9ed0ff;--colour-tile-empty:#222222;--colour-tile-border:#555555;--colour-bar-bg:#202020;--colour-panel-bg:#1a1a2e;--colour-selected:#ff8c00;--bar-height:36px;--panel-width:300px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px}*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;background:var(--colour-bg);font-family:-apple-system,BlinkMacSystemFont,segoe ui,Roboto,sans-serif;color:var(--colour-text);user-select:none;-webkit-user-select:none;font-size:13px}.hidden{display:none!important}a{color:var(--colour-link);text-decoration:none}a:hover{color:var(--colour-text)}#top-bar{position:fixed;top:0;left:0;width:100%;height:var(--bar-height);background:var(--colour-bar-bg);display:flex;align-items:center;justify-content:space-between;padding:0 16px;z-index:50}.top-brand{color:var(--colour-text)}.top-brand-by{color:var(--colour-muted);font-size:12px;margin-left:4px}#download-link{display:inline-flex;align-items:center;gap:5px;color:var(--colour-link);font-weight:600}#download-link:hover{color:var(--colour-text)}.download-icon{font-size:14px;line-height:1}.top-actions{display:inline-flex;align-items:center;gap:8px}.top-shortcuts-btn{width:26px;height:26px;border-radius:50%;border:1px solid var(--colour-border);background:rgba(255,255,255,6%);color:var(--colour-text);font-weight:700;cursor:pointer}.top-shortcuts-btn:hover{background:rgba(255,255,255,.14)}.top-actions-sep{color:var(--colour-muted)}#coffee-link{color:var(--colour-link);font-weight:600}#coffee-link:hover{color:var(--colour-text)}#canvas-container{position:fixed;top:var(--bar-height);left:0;right:0;bottom:var(--bar-height);cursor:grab;touch-action:none}#canvas-container.dragging{cursor:grabbing}#grid-canvas{display:block;position:absolute;top:0;left:0}#status-bar{position:fixed;bottom:0;left:0;width:100%;height:var(--bar-height);background:var(--colour-bar-bg);display:flex;align-items:center;padding:0 16px;gap:20px;z-index:50;overflow:hidden}.status-section{display:flex;align-items:center;gap:4px;white-space:nowrap;flex-shrink:0}.status-label{color:var(--colour-muted)}.status-username{font-size:11px;letter-spacing:.5px}.status-connection{margin-left:auto}.arrow{font-size:11px;font-weight:700}.arrow.up{color:var(--colour-ready)}.arrow.down{color:var(--colour-cooldown)}.dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex-shrink:0}.dot-connected{background:var(--colour-ready)}.dot-disconnected{background:var(--colour-cooldown)}.mode-indicator{padding:2px 8px;border-radius:var(--radius-sm);font-weight:700;font-size:11px;letter-spacing:.5px;min-width:55px;text-align:center;flex-shrink:0}.mode-ready{background:var(--colour-ready);color:#000}.mode-cooldown{background:var(--colour-cooldown);color:#1f1110}#notif-stack{position:fixed;top:calc(var(--bar-height) + 10px);right:14px;z-index:300;display:flex;flex-direction:column;align-items:flex-end;gap:6px;pointer-events:none}.notif{display:flex;align-items:center;gap:10px;background:var(--colour-surface);border:1px solid var(--colour-border);border-radius:var(--radius-md);padding:9px 16px;box-shadow:0 4px 18px rgba(0,0,0,.45);font-size:13px;color:var(--colour-text);pointer-events:auto;animation:notif-in .18s cubic-bezier(.22,1,.36,1)both;white-space:nowrap}.notif.notif-out{animation:notif-out .22s cubic-bezier(.55,0,1,.45)both}@keyframes notif-in{from{opacity:0;transform:translateX(110%)}to{opacity:1;transform:translateX(0)}}@keyframes notif-out{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(120%)}}.notif-icon{width:16px;height:16px;flex-shrink:0;opacity:.9}.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:500;display:flex;align-items:center;justify-content:center}.modal-overlay.hidden{display:none}.modal-box{background:var(--colour-surface);border:1px solid var(--colour-border);border-radius:var(--radius-lg);padding:32px 40px;display:flex;flex-direction:column;align-items:center;gap:20px;box-shadow:0 8px 40px rgba(0,0,0,.6);max-width:320px;text-align:center}.modal-msg{font-size:15px;color:var(--colour-text);line-height:1.5}.modal-box .btn-submit{width:auto;padding:9px 32px}.shortcuts-dialog{position:fixed;inset:0;width:100vw;height:100vh;max-width:none;max-height:none;margin:0;padding:0;border:none;background:0 0;z-index:500}.shortcuts-dialog[open]{display:flex;align-items:center;justify-content:center}.shortcuts-dialog::backdrop{background:rgba(0,0,0,.65)}.shortcuts-dialog .modal-box{margin:0}.info-panel{position:fixed;top:var(--bar-height);right:0;width:var(--panel-width);bottom:var(--bar-height);background:var(--colour-panel-bg);border-left:1px solid var(--colour-border);z-index:40;display:flex;flex-direction:column;overflow:hidden;transform:translateX(0);transition:transform .22s ease}.info-panel.hidden{transform:translateX(100%);pointer-events:none}.panel-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--colour-border);flex-shrink:0}.panel-header h3{font-size:14px;font-weight:600;color:var(--colour-text)}.panel-close{background:0 0;border:none;color:var(--colour-muted);cursor:pointer;font-size:16px;line-height:1;padding:4px;border-radius:var(--radius-sm);transition:color .15s}.panel-close:hover{color:var(--colour-text)}.panel-body{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:16px;scrollbar-width:thin;scrollbar-color:var(--colour-border)transparent}.panel-colour-row{display:flex;align-items:flex-start;gap:12px}.colour-swatch-lg{width:48px;height:48px;border-radius:var(--radius-md);border:2px solid var(--colour-border);flex-shrink:0}.colour-swatch-lg.is-empty{display:flex;align-items:center;justify-content:center;color:var(--colour-muted);font-size:22px;font-weight:700;line-height:1}.panel-colour-info{display:flex;flex-direction:column;gap:3px}.colour-hex{font-size:13px}.placer-name{color:var(--colour-muted);font-size:12px}.time-ago{color:var(--colour-muted);font-size:11px}.tile-message{font-style:italic;color:var(--colour-muted);font-size:12px;line-height:1.4;border-left:2px solid var(--colour-border);margin-top:10px;padding-left:8px}.panel-empty{color:var(--colour-muted);font-size:12px;text-align:center;padding:8px 0}.panel-section-title{font-size:12px;text-transform:uppercase;letter-spacing:.8px;color:var(--colour-muted);margin-bottom:10px}.panel-form{display:flex;flex-direction:column;gap:12px}.form-group{display:flex;flex-direction:column;gap:6px}.form-group label{font-size:12px;color:var(--colour-muted);display:flex;align-items:center;justify-content:space-between}.char-count{font-size:11px;color:var(--colour-border)}input[type=color]{width:100%;height:44px;border:1px solid var(--colour-border);border-radius:var(--radius-md);cursor:pointer;background:0 0;padding:3px}textarea{width:100%;background:rgba(255,255,255,4%);border:1px solid var(--colour-border);border-radius:var(--radius-md);color:var(--colour-text);font-size:13px;font-family:inherit;padding:8px;resize:vertical;min-height:68px;line-height:1.4}textarea:focus{outline:none;border-color:var(--colour-accent)}.btn{padding:9px 20px;border:none;border-radius:var(--radius-md);font-size:13px;cursor:pointer;font-weight:600;transition:opacity .15s,filter .15s;width:100%}.btn:hover:not(:disabled){opacity:.87}.btn:disabled{filter:brightness(.5);cursor:not-allowed}.btn-submit{background:var(--colour-accent);color:#000}.btn-clear{background:rgba(244,67,54,.22);border:1px solid rgba(244,67,54,.5);color:var(--colour-text)}.shortcuts-box{max-width:460px;align-items:stretch;text-align:left;gap:14px;padding:22px 24px}.shortcuts-head{display:flex;justify-content:space-between;align-items:center;color:#fff}.shortcuts-head h3{font-size:15px}.shortcuts-list{list-style:none;display:flex;flex-direction:column;gap:8px}.shortcuts-list li{display:flex;justify-content:space-between;gap:16px;font-size:12px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,8%)}.shortcuts-list span{color:var(--colour-link);font-weight:600}.shortcuts-list strong{color:var(--colour-text);font-weight:500;text-align:right}.panel-history{display:flex;flex-direction:column;gap:8px}.history-list{display:flex;flex-direction:column;gap:6px}.history-item{display:flex;gap:10px;align-items:flex-start;padding:8px;background:rgba(255,255,255,3%);border-radius:var(--radius-sm);border:1px solid var(--colour-border)}.history-swatch{width:24px;height:24px;border-radius:4px;border:1px solid rgba(255,255,255,.1);flex-shrink:0}.history-info{display:flex;flex-direction:column;gap:2px;min-width:0}.history-username{font-size:12px;font-weight:600}.history-time{font-size:11px;color:var(--colour-muted)}.history-message{font-size:11px;color:var(--colour-muted);font-style:italic;line-height:1.3;word-break:break-word}@media(max-width:640px){.info-panel{top:auto;left:0;right:0;width:100%;height:65vh;bottom:var(--bar-height);border-left:none;border-top:1px solid var(--colour-border);transform:translateY(0);border-radius:var(--radius-lg)var(--radius-lg)0 0}.info-panel.hidden{transform:translateY(100%)}.status-hide-sm{display:none}#status-bar{gap:12px}.download-text{display:none}}@media(min-width:641px) and (max-width:900px){:root{--panel-width:260px}}