@import "https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500&display=swap";*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#1a1a1f;--surface:#22222a;--surface-2:#2c2c38;--border:#ffffff14;--border-hover:#ffffff2e;--text:#c8c4bc;--text-dim:#c8c4bc66;--accent:#f5f0e8;--danger:#ff6b6b;--mono:"JetBrains Mono", "Fira Code", "Cascadia Code", ui-monospace, monospace;--radius:6px;--toolbar-w:168px}html,body{background:var(--bg);width:100%;height:100%;font-family:var(--mono);color:var(--text);-webkit-font-smoothing:antialiased;overflow:hidden}#app{width:100%;height:100%;position:relative;overflow:hidden}#canvas{cursor:crosshair;touch-action:none;display:block;position:absolute;inset:0}#text-input-overlay{z-index:200;display:none;position:fixed;transform:translateY(-50%)}#text-input{color:#f5f0e8;font-family:var(--mono);caret-color:#f5f0e8;background:0 0;border:none;border-bottom:1px solid #ffffff4d;outline:none;min-width:120px;padding:2px 4px;font-size:14px}#text-input::placeholder{color:#fff3;font-size:11px}#toolbar{width:var(--toolbar-w);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);z-index:100;scrollbar-width:none;flex-direction:column;gap:10px;max-height:calc(100vh - 48px);padding:12px;display:flex;position:fixed;top:50%;left:16px;overflow-y:auto;transform:translateY(-50%);box-shadow:0 8px 32px #0006,0 0 0 1px #ffffff08}#toolbar::-webkit-scrollbar{display:none}.toolbar-section{flex-direction:column;gap:6px;display:flex}.toolbar-section.identity{flex-direction:row;align-items:center;gap:8px}.toolbar-section.tools{grid-template-columns:1fr 1fr 1fr;gap:4px;display:grid}.toolbar-divider{background:var(--border);flex-shrink:0;height:1px}.color-dot{border-radius:50%;flex-shrink:0;width:10px;height:10px}.author-label{letter-spacing:.05em;color:var(--text-dim);text-transform:lowercase;white-space:nowrap;text-overflow:ellipsis;font-size:9px;overflow:hidden}.tool-btn{background:var(--surface-2);border:1px solid var(--border);aspect-ratio:1;cursor:pointer;width:100%;color:var(--text-dim);border-radius:4px;justify-content:center;align-items:center;padding:6px;transition:color .15s,border-color .15s,background .15s;display:flex}.tool-btn svg{width:16px;height:16px}.tool-btn:hover{color:var(--text);border-color:var(--border-hover);background:#ffffff0f}.tool-btn.active{color:var(--accent);background:#f5f0e812;border-color:#f5f0e866}.option-label{letter-spacing:.1em;color:var(--text-dim);text-transform:uppercase;justify-content:space-between;align-items:center;font-size:8px;display:flex}.option-label span{color:var(--text);letter-spacing:0;text-transform:none;font-size:9px}.slider{appearance:none;background:var(--border-hover);cursor:pointer;border-radius:1px;outline:none;width:100%;height:2px}.slider::-webkit-slider-thumb{appearance:none;background:var(--accent);border:2px solid var(--surface);cursor:pointer;border-radius:50%;width:12px;height:12px}.slider::-moz-range-thumb{background:var(--accent);border:2px solid var(--surface);cursor:pointer;border-radius:50%;width:12px;height:12px}.color-swatches{grid-template-columns:repeat(4,1fr);gap:4px;display:grid}.swatch{aspect-ratio:1;cursor:pointer;border:1.5px solid #0000;border-radius:3px;transition:transform .1s,border-color .1s}.swatch:hover{transform:scale(1.15)}.swatch.active{border-color:#fff;transform:scale(1.1)}.color-picker-input{appearance:none;border:1px solid var(--border);cursor:pointer;background:0 0;border-radius:3px;width:100%;height:22px;padding:1px}.color-picker-input::-webkit-color-swatch-wrapper{border-radius:2px;padding:0}.color-picker-input::-webkit-color-swatch{border:none;border-radius:2px}.action-btn{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;white-space:nowrap;padding:6px 10px;font-size:9px;transition:border-color .15s,color .15s,background .15s}.action-btn:hover{border-color:var(--border-hover);color:var(--accent);background:#ffffff0a}.action-btn.small{padding:5px 8px;font-size:8px}.action-btn.danger:hover{color:var(--danger);border-color:#ff6b6b66}#top-right{z-index:100;align-items:center;gap:8px;display:flex;position:fixed;top:16px;right:16px}.peer-badge{font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:5px 10px;font-size:9px;transition:color .2s,border-color .2s}.peer-badge.has-peers{color:#6bcb77;border-color:#6bcb7759;animation:2s ease-in-out infinite peer-pulse}@keyframes peer-pulse{0%,to{opacity:1}50%{opacity:.7}}#hints{font-family:var(--mono);letter-spacing:.04em;color:var(--text-dim);border:1px solid var(--border);pointer-events:none;white-space:nowrap;background:#1a1a1fb3;border-radius:20px;padding:5px 16px;font-size:9px;position:fixed;bottom:12px;left:50%;transform:translate(-50%)}