:root{--bg: #14151a;--panel: #1e2028;--text: #e8e8ea;--muted: #8b8d98;--accent: #94e044}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;overflow:hidden}body{display:flex;flex-direction:column;background:var(--bg);color:var(--text);font-family:ui-monospace,JetBrains Mono,Fira Code,monospace}header{display:flex;align-items:baseline;gap:1rem;padding:.6rem 1rem;background:var(--panel);border-bottom:1px solid #000;flex-shrink:0}h1{font-size:1.2rem;letter-spacing:.15em;color:var(--accent)}.tagline{font-size:.72rem;color:var(--muted)}.conn{margin-left:auto;font-size:.8rem;color:#555}.conn.online{color:var(--accent)}main{flex:1;min-height:0;display:flex;flex-direction:row;overflow:hidden}#canvas-wrap{flex-shrink:0;margin:0 auto;position:relative;overflow:hidden;background:var(--bg)}#canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;cursor:crosshair;image-rendering:pixelated}.coords{position:absolute;left:.75rem;bottom:.75rem;padding:.15rem .5rem;background:#0009;border-radius:3px;font-size:.75rem;color:var(--muted);pointer-events:none}.toast{position:absolute;top:.75rem;left:50%;transform:translate(-50%);padding:.35rem .9rem;background:#000000bf;border:1px solid #333;border-radius:4px;font-size:.8rem;pointer-events:none}.side{width:200px;flex-shrink:0;min-width:0;display:flex;align-items:center;justify-content:center;overflow:hidden;background-image:radial-gradient(circle,rgba(148,224,68,.09) 1px,transparent 1px);background-size:20px 20px}.panel-inner{display:flex;flex-direction:column;align-items:center;gap:1.1rem;padding:1.5rem 1rem;max-width:180px}.panel-label{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}.cluster-svg{width:96px;height:96px;overflow:visible}.ce{stroke:#2a2c38;stroke-width:1.5}.cn{fill:var(--panel);stroke:#3a3c4a;stroke-width:1.5;transition:stroke .6s,fill .6s}.cn.leader{stroke:var(--accent);fill:#94e0441a}.cn-text{font-size:11px;font-family:ui-monospace,monospace;fill:var(--muted);text-anchor:middle;dominant-baseline:central;pointer-events:none;transition:fill .6s}.cn-text.leader{fill:var(--accent)}.cn-you{font-size:7px;font-family:ui-monospace,monospace;fill:var(--text);text-anchor:middle;dominant-baseline:auto;opacity:0;transition:opacity .6s}.cn-you.visible{opacity:.7}.cluster-info{font-size:.65rem;color:var(--muted);text-align:center;line-height:1.5}.cluster-info strong{color:var(--accent)}.side-description{font-size:.68rem;line-height:1.65;color:var(--muted);text-align:center}.tech-stack{display:flex;flex-direction:column;gap:.35rem;align-items:center}.tech-tag{padding:.18rem .65rem;border:1px solid #2e3040;border-radius:3px;font-size:.65rem;color:var(--muted);white-space:nowrap}.gh-link{font-size:.65rem;color:var(--muted);text-decoration:none;letter-spacing:.05em;transition:color .2s}.gh-link:hover{color:var(--accent)}footer{display:flex;flex-direction:column;gap:.4rem;padding:.6rem 1rem;background:var(--panel);border-top:1px solid #000;flex-shrink:0}.palette{display:flex;gap:4px;justify-content:center;flex-wrap:wrap}.palette button{width:26px;height:26px;border:2px solid #000;border-radius:3px;cursor:pointer}.palette button.selected{outline:2px solid var(--accent);outline-offset:1px}.statusbar{display:flex;gap:1.5rem;justify-content:center;font-size:.72rem;color:var(--muted)}.statusbar a{color:var(--muted)}.cooldown.active{color:var(--accent)}@media(max-width:640px){.side{display:none}main{flex-direction:column;align-items:stretch}}