paint-panel{position:absolute;left:16px;top:76px;z-index:14;width:min(250px,calc(100vw - 32px));padding:16px;border-radius:var(--shape-l);background:var(--surface-container);box-shadow:0 20px 50px #00000080;transition:opacity var(--motion-fast),transform var(--motion-spring)}paint-panel[state=hidden]{opacity:0;transform:translateY(-8px) scale(.96);pointer-events:none}paint-body{display:flex;flex-direction:column;gap:12px}paint-head{display:flex;align-items:center;justify-content:space-between;gap:12px}paint-title{font-size:18px;font-weight:600}paint-close{display:grid;place-items:center;width:32px;height:32px;border-radius:var(--shape-full);background:var(--surface-container-high);color:var(--on-surface-variant);cursor:pointer;transition:transform var(--motion-spring)}paint-close:active{transform:scale(.9)}paint-hint{margin-top:-6px;font-size:12px;color:var(--on-surface-variant)}paint-tools{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}paint-chip{display:grid;place-items:center;aspect-ratio:1;border-radius:var(--shape-s);background:var(--surface-container-high);color:var(--on-surface-variant);cursor:pointer;border:3px solid transparent;transition:transform var(--motion-spring),border-color var(--motion-fast)}paint-chip:hover{transform:scale(1.08)}paint-chip[state=chosen]{border-color:var(--on-surface);background:var(--primary);color:var(--on-primary)}paint-colors{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}@media(pointer:coarse)and (orientation:portrait){paint-panel{top:70px}}