: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%;overflow:hidden;background:#0e0e12;color:#fafafa;touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.app{display:flex;flex-direction:column;height:100dvh;max-width:100%;margin:0 auto}.header{display:flex;justify-content:space-between;align-items:center;padding:.6rem 1rem;background:#16161a;border-bottom:1px solid #2a2a30;flex-shrink:0;z-index:5}.header-left{display:flex;align-items:baseline;gap:.75rem}.title{font-size:1.2rem;font-weight:800;letter-spacing:-.02em;background:linear-gradient(135deg,#f59e0b,#ef4444);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.block-count{font-size:.8rem;color:#fff6;font-variant-numeric:tabular-nums}.header-right{display:flex;gap:.4rem}.tool-btn{width:2rem;height:2rem;display:grid;place-items:center;background:#ffffff0f;border:1px solid rgba(255,255,255,.1);border-radius:.4rem;color:#ffffffb3;font-size:1rem;cursor:pointer;transition:background .12s,border-color .12s}.tool-btn:hover{background:#ffffff1a;border-color:#fff3}.tool-btn.danger:hover{background:#ef444433;border-color:#ef444466;color:#ef4444}.board-container{flex:1;display:flex;justify-content:center;align-items:center;background:radial-gradient(circle at 50% 30%,#1a1a24,#0e0e12 70%);overflow:hidden;padding:.5rem}.board{display:grid;gap:0;width:100%;height:100%;max-width:900px;max-height:100%;border:1px solid rgba(255,255,255,.08);border-radius:.5rem;overflow:hidden;background:#12121a}.cell{position:relative;cursor:crosshair;transition:background .05s}.cell.show-grid{outline:1px solid rgba(255,255,255,.03)}.cell.filled{cursor:pointer}.cell:active{filter:brightness(1.2)}.palette{flex-shrink:0;background:#16161a;border-top:1px solid #2a2a30;padding:.5rem .75rem .4rem;z-index:5}.palette-scroll{display:flex;gap:.35rem;overflow-x:auto;padding-bottom:.35rem;scrollbar-width:thin;scrollbar-color:#333 transparent}.palette-scroll::-webkit-scrollbar{height:4px}.palette-scroll::-webkit-scrollbar-thumb{background:#333;border-radius:2px}.palette-item{display:flex;flex-direction:column;align-items:center;gap:.2rem;padding:.3rem .5rem;background:transparent;border:2px solid transparent;border-radius:.5rem;cursor:pointer;transition:border-color .12s,background .12s;flex-shrink:0;min-width:3rem}.palette-item:hover{background:#ffffff0f}.palette-item.active{border-color:#f59e0b;background:#f59e0b1a}.palette-swatch{width:2rem;height:2rem;border-radius:.35rem;flex-shrink:0}.palette-label{font-size:.85rem;line-height:1}.palette-hint{text-align:center;font-size:.7rem;color:#ffffff4d;margin-top:.25rem}