:root{--bg: #1e1e1e;--panel: #252526;--fg: #d4d4d4;--border: #3c3c3c}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);font-family:system-ui,sans-serif}#app{display:flex;height:100vh;overflow:hidden}#main-area{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden}#top-bar{flex:0 0 auto;display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;padding:.5rem .75rem;background:var(--panel);border-bottom:1px solid var(--border)}#grid-area{flex:1;min-width:0;min-height:0;display:flex;overflow:hidden}#grid{flex:1;display:block;width:100%;height:100%}#side-panel{width:260px;flex:0 0 260px;background:var(--panel);border-left:1px solid var(--border);padding:.75rem;display:flex;flex-direction:column;overflow:hidden}#palette{flex:0 0 auto}#glyph-selector{flex:1 1 auto;min-height:0;overflow-y:auto}.app-title{margin:0;font-size:1.15rem;font-weight:700;letter-spacing:.04em}.font-control{display:flex;align-items:center;gap:.4rem}.font-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;opacity:.6}.font-select{padding:.3rem;color:var(--fg);background:#2d2d2d;border:1px solid var(--border);border-radius:3px}#toolbar{display:flex;gap:4px}.tool{width:34px;height:34px;font-size:1.1rem;line-height:1;color:var(--fg);background:#2d2d2d;border:1px solid var(--border);border-radius:4px;cursor:pointer}.tool:hover{background:#3a3a3a}.tool.tool-fg{font-weight:700}.tool.active,.tool.channel-active{border-color:#4ea1ff;box-shadow:inset 0 0 0 1px #4ea1ff}#palette{display:flex;align-items:flex-start;gap:6px;padding-bottom:.6rem;margin-bottom:.4rem;border-bottom:1px solid var(--border)}.palette-channels{display:flex;flex-direction:column;gap:3px}.palette-channel{width:28px;height:28px;font-size:1rem;line-height:1;color:var(--fg);background:#2d2d2d;border:1px solid var(--border);border-radius:4px;cursor:pointer}.palette-channel.channel-fg{font-weight:700}.palette-channel:hover{background:#3a3a3a}.palette-channel.active{border-color:#4ea1ff;box-shadow:inset 0 0 0 1px #4ea1ff}.palette-swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(24px,1fr));gap:3px;flex:1}.swatch{aspect-ratio:1;padding:0;border:1px solid var(--border);border-radius:3px;cursor:pointer}.swatch.selected{border-color:#4ea1ff;box-shadow:inset 0 0 0 2px #4ea1ff}.palette-controls{display:flex;flex-direction:column;gap:3px}.palette-btn{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;line-height:1;color:var(--fg);background:#2d2d2d;border:1px solid var(--border);border-radius:3px;cursor:pointer}.palette-btn svg{width:14px;height:14px}.palette-btn:hover:not(:disabled){background:#3a3a3a}.palette-btn:disabled{opacity:.35;cursor:default}#io-controls{display:flex;gap:6px;margin-left:auto}.io-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;color:var(--fg);background:#2d2d2d;border:1px solid var(--border);border-radius:4px;cursor:pointer}.io-btn:hover{background:#3a3a3a}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#00000080;z-index:100}.modal{background:var(--panel);border:1px solid var(--border);border-radius:6px;padding:1rem;min-width:220px}.cp-modal{width:360px;max-width:calc(100vw - 2rem)}.cp-header{display:flex;align-items:center;gap:.5rem;margin-bottom:.75rem}.cp-title{flex:1;text-align:center;font-weight:600}.cp-header button{padding:.35rem .8rem;color:var(--fg);background:#2d2d2d;border:1px solid var(--border);border-radius:4px;cursor:pointer}.cp-table{display:grid;grid-template-columns:repeat(9,1fr);gap:4px;margin-bottom:.75rem}.cp-cell{aspect-ratio:1;min-width:0;padding:0;border:1px solid rgba(0,0,0,.35);border-radius:4px;cursor:pointer}.cp-cell.selected{outline:2px solid #4ea1ff;outline-offset:1px}.cp-custom-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;opacity:.6;margin-bottom:.3rem}.cp-top{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem}.cp-eyedrop{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:34px;height:34px;color:var(--fg);background:#2d2d2d;border:1px solid var(--border);border-radius:50%;cursor:pointer}.cp-eyedrop svg{width:18px;height:18px}.cp-preview{flex:0 0 auto;width:64px;height:34px;border:1px solid var(--border);border-radius:6px}.cp-hex{flex:1;padding:.35rem;font-family:monospace;color:var(--fg);background:#2d2d2d;border:1px solid var(--border);border-radius:3px}.cp-body{display:flex;gap:.6rem;height:200px}.cp-hue{position:relative;flex:0 0 auto;width:22px;height:100%;border:1px solid var(--border);border-radius:4px;cursor:pointer;background:linear-gradient(to bottom,red,#ff0 17%,#0f0 33%,#0ff,#00f 67%,#f0f 83%,red)}.cp-hue-thumb{position:absolute;left:-2px;right:-2px;height:0;border-top:2px solid #fff;box-shadow:0 0 0 1px #0009;pointer-events:none}.cp-sv{position:relative;flex:1;height:100%;border:1px solid var(--border);border-radius:4px;cursor:crosshair}.cp-sv-thumb{position:absolute;width:12px;height:12px;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #0009;transform:translate(-50%,-50%);pointer-events:none}.cp-ok{border-color:#4ea1ff!important}.glyph-group-title{display:flex;align-items:center;gap:.35rem;width:100%;margin:.6rem 0 .3rem;padding:.1rem 0;background:none;border:none;color:inherit;font-family:inherit;font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;text-align:left;opacity:.6;cursor:pointer}.glyph-group-title:hover{opacity:.9}.glyph-group-chevron{font-size:.6rem;line-height:1;transition:transform .12s ease}.glyph-group.collapsed .glyph-group-chevron{transform:rotate(-90deg)}.glyph-group.collapsed .glyph-grid{display:none}.glyph-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:2px}.glyph{font-family:var(--mock-font, monospace);font-size:1rem;line-height:1;aspect-ratio:1;padding:0;color:var(--fg);background:#2d2d2d;border:1px solid transparent;border-radius:3px;cursor:pointer}.glyph:hover{background:#3a3a3a}.glyph.selected{border-color:#4ea1ff;background:#213447}.glyph-custom{margin-top:.6rem}.glyph-custom input{width:100%;box-sizing:border-box;padding:.35rem;font-family:monospace;color:var(--fg);background:#2d2d2d;border:1px solid var(--border);border-radius:3px}