:root{--space: 1rem;--space-half: .5rem;--space-10px: 10px;--radius: 4px;--radius-pill: 32px;--swatch-lg: 32px;--swatch-sm: 28px;--grid-min: 64px;--modal-size: 80%;--palette-max-w: 80vw;--palette-max-h: 40vh;--palette-cols: 8;--icon-padding: 5vmin;--hover-height: 24px;--min-width: 320px;--border-width: 1px;--font-weight-medium: 500;--line-height: 1.5;--bg: #fff;--bg-light: #f0f0f0;--bg-lighter: #f9f9f9;--bg-hover: #eee;--bg-hover-darker: #e0e0e0;--border: #ccc;--border-light: #ddd;--text: #333;--text-base: black;--text-light: #666;--border-alpha-light: rgba(0, 0, 0, .1);--border-alpha: rgba(0, 0, 0, .2);--bg-white-alpha: rgba(255, 255, 255, .95);--overlay: rgba(0, 0, 0, .4);--shadow: 0 4px 12px rgba(0, 0, 0, .15);--shadow-lg: 0 4px 20px rgba(0, 0, 0, .15);--transition-fast: .2s;--transition-base: .3s;--transform-up: -2px;--scale-hover: 1.2;--z-low: 10;--z-mid: 90;--z-high: 100;--z-modal: 200}*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,sans-serif;line-height:var(--line-height)}.btn{background:var(--bg-light);color:var(--text-base);border:var(--border-width) solid var(--border);padding:var(--space-half) var(--space);font-size:var(--space);cursor:pointer;border-radius:var(--radius)}.btn:hover{background:var(--bg-hover-darker)}.top-left{position:absolute;top:var(--space);left:var(--space);z-index:var(--z-high)}.top-right{position:absolute;top:var(--space);right:var(--space);z-index:var(--z-high)}.bottom-left{position:absolute;bottom:var(--space);left:var(--space);z-index:var(--z-mid)}.bottom-right{position:absolute;bottom:var(--space);right:var(--space);z-index:var(--z-mid)}.picker{position:relative;display:flex;flex-direction:column}.picker-right{align-items:flex-end}.picker-trigger{display:flex;align-items:center;gap:var(--space);cursor:pointer;border-radius:var(--radius-pill);transition:transform var(--transition-fast)}.picker-trigger:hover{transform:translateY(var(--transform-up))}.picker-right .picker-trigger{flex-direction:row-reverse}.picker-swatch{width:var(--swatch-lg);height:var(--swatch-lg);border-radius:50%;border:var(--border-width) solid var(--border-alpha)}.picker-label{font-size:var(--space);font-weight:var(--font-weight-medium);color:var(--text);white-space:nowrap}.picker-palette{position:absolute;bottom:100%;margin-bottom:var(--space);display:none;grid-template-columns:repeat(var(--palette-cols),max-content);gap:var(--space-half);background:var(--bg-white-alpha);border:var(--border-width) solid var(--border-light);padding:var(--space-half);border-radius:var(--radius);max-width:var(--palette-max-w);max-height:var(--palette-max-h);overflow-y:auto;box-shadow:var(--shadow);z-index:1000}.picker-palette.visible{display:grid}.bottom-left .picker-palette{left:0}.bottom-right .picker-palette,.top-right .picker-palette{right:0}.picker-palette.down{bottom:auto;top:100%;margin-bottom:0;margin-top:var(--space)}.color-swatch{width:var(--swatch-sm);height:var(--swatch-sm);border-radius:50%;cursor:pointer;border:var(--border-width) solid var(--border-alpha-light);transition:transform var(--transition-fast)}.color-swatch:hover{transform:scale(var(--scale-hover))}.text-swatch{width:var(--swatch-sm);height:var(--swatch-sm);border-radius:50%;cursor:pointer;border:var(--border-width) solid var(--border-alpha-light);transition:transform var(--transition-fast);display:flex;justify-content:center;align-items:center;font-size:12px;background:var(--bg-lighter);color:var(--text);font-weight:700}.text-swatch:hover{transform:scale(var(--scale-hover));background:var(--bg-hover)}.picker-swatch.hidden-swatch{display:none}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--overlay);display:none;justify-content:center;align-items:center;z-index:var(--z-modal)}.modal-content{background:var(--bg);color:var(--text-base);padding:var(--space);border-radius:var(--radius);width:var(--modal-size);height:var(--modal-size);display:flex;flex-direction:column;gap:var(--space);box-shadow:var(--shadow-lg)}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--grid-min),1fr));gap:var(--space);overflow-y:auto}.grid-item,.icon-item{display:flex;justify-content:center;align-items:center;padding:var(--space);background:var(--bg-lighter);border-radius:var(--radius);cursor:pointer}.grid-item:hover,.icon-item:hover{background:var(--bg-hover)}input[type=text]{width:100%;padding:var(--space);font-size:var(--space);border:var(--border-width) solid var(--border);border-radius:var(--radius);background:var(--bg);color:var(--text-base)}.centered-top-text{position:absolute;top:var(--space);left:50%;transform:translate(-50%);font-family:sans-serif;font-size:var(--space);font-weight:var(--font-weight-medium);color:var(--text);pointer-events:none;z-index:var(--z-low)}.hover-name-display{height:var(--hover-height);margin-top:var(--space);text-align:center;font-family:monospace;color:var(--text-light);font-size:var(--space)}#icon-viewer{width:100%;height:100%;display:flex;justify-content:center;align-items:center}#icon-viewer svg{width:100vw;height:100vh;max-width:100%;max-height:100%;padding:var(--icon-padding);box-sizing:border-box;transition:all var(--transition-base) ease}#app{width:100vw;height:100vh;display:flex;justify-content:center;align-items:center;position:relative}body{display:flex;place-items:center;min-width:var(--min-width);min-height:100vh;overflow:hidden}.top-right{display:flex;flex-direction:column;gap:var(--space-half)}.top-right .picker:first-child{z-index:20}.top-right .picker:nth-child(2){z-index:10}pre{flex:1;overflow:auto;margin:0;padding:var(--space);background:var(--bg-lighter);border:var(--border-width) solid var(--border);border-radius:var(--radius)}code{font-family:monospace;font-size:14px}