#note-palette{position:fixed;z-index:30001;width:340px;max-height:min(520px,80vh);background:var(--header-bg);backdrop-filter:var(--backdrop-blur);-webkit-backdrop-filter:var(--backdrop-blur);border:1px solid var(--border-color);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl),0 0 0 1px rgba(0,0,0,.04);overflow:hidden;display:flex;flex-direction:column;opacity:0;transform:scale(.95) translateY(6px);transform-origin:top left;transition:opacity .18s cubic-bezier(.16, 1, .3, 1),transform .18s cubic-bezier(.16, 1, .3, 1);pointer-events:none;visibility:hidden}#note-palette.visible{opacity:1;transform:scale(1) translateY(0);pointer-events:auto;visibility:visible}#note-palette.hiding{opacity:0;transform:scale(.97) translateY(4px);pointer-events:none;visibility:visible}.palette-search{padding:var(--space-3);border-bottom:1px solid var(--border-color);flex-shrink:0}.palette-search-input{width:100%;padding:var(--space-2) var(--space-3);padding-left:32px;border:1px solid var(--border-color);border-radius:var(--radius-md);background:var(--surface-1);color:var(--text-primary);font-size:var(--text-sm);outline:0;transition:border-color var(--transition-fast),box-shadow var(--transition-fast);font-family:inherit}.palette-search-input::placeholder{color:var(--text-secondary);opacity:var(--opacity-muted)}.palette-search-input:focus{border-color:var(--accent-color);box-shadow:var(--focus-ring)}.palette-search-wrapper{position:relative}.palette-search-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:14px;height:14px;color:var(--text-secondary);opacity:var(--opacity-muted);pointer-events:none}.palette-body{flex:1;overflow-y:auto;padding:var(--space-2) var(--space-3)}.palette-category{margin-bottom:var(--space-2)}.palette-category-label{font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-secondary);opacity:var(--opacity-subtle);padding:var(--space-1) 0;margin-bottom:var(--space-1)}.palette-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-1)}.palette-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:var(--space-3) var(--space-1);border-radius:var(--radius-md);border:1px solid transparent;background:0 0;color:var(--text-primary);cursor:pointer;transition:all var(--transition-fast);min-height:64px;user-select:none}.palette-card:hover{background:var(--surface-2);border-color:var(--border-color)}.palette-card:active{transform:scale(.96);background:var(--surface-3)}.palette-card.focused{border-color:var(--accent-color);box-shadow:var(--focus-ring);background:rgba(var(--accent-rgb),.06)}.palette-card-icon{width:22px;height:22px;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);opacity:.8;transition:color var(--transition-fast),opacity var(--transition-fast)}.palette-card:hover .palette-card-icon{color:var(--accent-color);opacity:1}.palette-card-icon svg{width:20px;height:20px}.palette-card-label{font-size:.68rem;font-weight:500;text-align:center;line-height:1.2;color:var(--text-primary)}.palette-recent{padding:var(--space-2) var(--space-3);border-top:1px solid var(--border-color);flex-shrink:0;display:none}.palette-recent.has-items{display:block}.palette-recent-label{font-size:.58rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-secondary);opacity:var(--opacity-muted);margin-bottom:var(--space-1)}.palette-recent-row{display:flex;gap:var(--space-1)}.palette-recent-chip{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:var(--radius-pill);background:var(--surface-2);border:1px solid transparent;font-size:.62rem;font-weight:500;color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast);white-space:nowrap}.palette-recent-chip:hover{background:var(--surface-3);color:var(--text-primary);border-color:var(--border-color)}.palette-recent-chip svg{width:12px;height:12px}.palette-no-results{padding:var(--space-6) var(--space-3);text-align:center;color:var(--text-secondary);font-size:var(--text-sm);opacity:var(--opacity-muted)}@media (max-width:600px){#note-palette{width:calc(100vw - 32px);max-width:340px}}@media (prefers-reduced-motion:reduce){#note-palette{transition-duration:0s!important}}body.animations-disabled #note-palette{transition-duration:0s!important}