:root{color-scheme:dark;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;background:#0f1117;color:#e4e4e7}.app{display:flex;height:100vh;overflow:hidden}.toolbar{width:240px;min-width:240px;background:#161822;border-right:1px solid rgba(255,255,255,.08);padding:1.25rem;display:flex;flex-direction:column;gap:1.25rem;overflow-y:auto}.toolbar h2{font-size:1.1rem;font-weight:700;letter-spacing:-.02em;color:#fff;padding-bottom:.5rem;border-bottom:1px solid rgba(255,255,255,.08)}.tool-group{display:flex;flex-direction:column;gap:.5rem}.tool-group label{font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;color:#fff6;font-weight:600}.tool-buttons{display:flex;gap:.35rem}.tool-buttons button{flex:1;display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:.5rem .25rem;border:1px solid rgba(255,255,255,.08);border-radius:.5rem;background:#ffffff08;color:#ffffffa6;font-size:.65rem;font-weight:500;cursor:pointer;transition:all .15s}.tool-buttons button:hover{background:#ffffff0f;color:#fff}.tool-buttons button.active{background:#60a5fa26;border-color:#60a5fa66;color:#60a5fa}.color-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:.35rem}.color-swatch{width:100%;aspect-ratio:1;border-radius:.35rem;border:2px solid transparent;cursor:pointer;transition:all .15s}.color-swatch:hover{transform:scale(1.1)}.color-swatch.active{border-color:#60a5fa;box-shadow:0 0 0 2px #60a5fa4d}.room-label-input{width:100%;padding:.5rem .65rem;border-radius:.4rem;border:1px solid rgba(255,255,255,.12);background:#ffffff0d;color:#fff;font-size:.85rem;outline:none;transition:border-color .15s}.room-label-input:focus{border-color:#60a5fa}.room-info{font-size:.8rem;color:#ffffff80;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.btn-clear{padding:.45rem .75rem;border-radius:.4rem;border:1px solid rgba(239,68,68,.25);background:#ef444414;color:#f87171;font-size:.8rem;cursor:pointer;transition:all .15s}.btn-clear:hover:not(:disabled){background:#ef444426}.btn-clear:disabled{opacity:.35;cursor:not-allowed}.help ul{list-style:none;display:flex;flex-direction:column;gap:.35rem}.help li{font-size:.75rem;color:#ffffff73;line-height:1.4}.help strong{color:#ffffffb3}.canvas-area{flex:1;position:relative;background:#0f1117;overflow:hidden}.canvas-area canvas{display:block;width:100%;height:100%}