*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}button,input,textarea,select{font:inherit;color:inherit;border:none;background:none;outline:none}button{cursor:pointer}ul,ol{list-style:none}a{color:inherit;text-decoration:none}:root{--font-mono: "Azeret Mono", monospace;--bg: #ffffff;--fg: #000000;--border: #000000;--bg-muted: #f0f0f0;--fg-muted: #777777;--bg-hover: #000000;--fg-hover: #ffffff;--border-width: 2px;--sidebar-width: 240px;--toolbar-height: 56px}@media(prefers-color-scheme:dark){:root{--bg: #1a1a1e;--fg: #d4d4d8;--border: #3a3a40;--bg-muted: #232328;--fg-muted: #71717a;--bg-hover: #d4d4d8;--fg-hover: #1a1a1e;--border-width: 1px}}html{font-family:var(--font-mono);font-size:13px;background:var(--bg);color:var(--fg)}body{height:100vh;overflow:hidden}#app{display:flex;flex-direction:column;height:100vh}#toolbar{height:var(--toolbar-height);border-bottom:var(--border-width) solid var(--border);flex-shrink:0}#content{display:flex;flex:1;min-height:0}#sidebar{width:var(--sidebar-width);flex-shrink:0;border-right:var(--border-width) solid var(--border);overflow-y:auto;display:flex;flex-direction:column}#main{flex:1;overflow-y:auto;display:flex;flex-direction:column}#swatch-grid,#color-editor{flex-shrink:0}#typography-preview{flex:1;min-height:200px}#statusbar{flex-shrink:0}.statusbar{height:28px;border-top:var(--border-width) solid var(--border);display:flex;align-items:center;padding:0 12px;transition:background-color .15s,color .15s}.statusbar-text{font-size:12px;color:var(--fg-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .15s}.section-label{font-size:10px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--fg-muted);padding:12px 16px 8px}.toolbar-inner{display:flex;align-items:center;justify-content:space-between;height:100%;padding:0 16px}.toolbar-title{font-size:16px;font-weight:700;letter-spacing:.2em}.toolbar-actions{display:flex;align-items:center;gap:8px}.editor{border-top:var(--border-width) solid var(--border)}.editor-header{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:var(--border-width) solid var(--border)}.editor-close{font-size:18px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer;border:var(--border-width) solid transparent;transition:border-color .15s}.editor-close:hover{border-color:var(--border)}.editor-body{display:flex;gap:16px;padding:16px}.editor-preview{width:80px;height:80px;border:var(--border-width) solid var(--border);flex-shrink:0}.editor-fields{display:flex;flex-direction:column;gap:8px;flex:1}.editor-row{display:flex;align-items:center;gap:8px}.editor-label{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-muted);width:48px;flex-shrink:0}.editor-description{font-size:11px;color:var(--fg-muted);line-height:1.4}.btn{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:8px 16px;border:var(--border-width) solid var(--border);background:var(--fg);color:var(--bg);cursor:pointer;transition:background .15s,color .15s;white-space:nowrap}.btn:hover{background:var(--bg);color:var(--fg)}.btn--ghost{background:transparent;color:var(--fg)}.btn--ghost:hover{background:var(--fg);color:var(--bg)}.btn--small{font-size:10px;padding:4px 10px}.btn--icon{padding:8px;display:inline-flex;align-items:center;justify-content:center}.btn--danger{border-color:#c00;background:#c00;color:#fff}.btn--danger:hover{background:transparent;color:#c00}.input{font-family:var(--font-mono);font-size:13px;padding:8px 12px;border:var(--border-width) solid var(--border);background:var(--bg);color:var(--fg);width:100%;transition:background .15s}.input:focus{background:var(--bg-muted)}.input--small{font-size:11px;padding:6px 8px}.input--inline{width:auto}input[type=color]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:40px;height:40px;border:var(--border-width) solid var(--border);padding:0;cursor:pointer;background:transparent}input[type=color]::-webkit-color-swatch-wrapper{padding:2px}input[type=color]::-webkit-color-swatch{border:none}.bg-toggle{display:flex;border:var(--border-width) solid var(--border)}.bg-toggle-btn{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:6px 12px;background:transparent;color:var(--fg);cursor:pointer;transition:background .15s,color .15s;border-right:var(--border-width) solid var(--border)}.bg-toggle-btn:last-child{border-right:none}.bg-toggle-btn.active{background:var(--fg);color:var(--bg)}.bg-toggle-btn:hover:not(.active){background:var(--bg-muted)}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;display:flex;align-items:flex-start;justify-content:center;padding-top:80px;z-index:100;opacity:0;transition:opacity .2s;pointer-events:none}.overlay.visible{opacity:1;pointer-events:auto}.overlay-panel{background:var(--bg);border:var(--border-width) solid var(--border);width:600px;max-width:90vw;max-height:80vh;overflow-y:auto;transform:translateY(-20px);transition:transform .2s}.overlay.visible .overlay-panel{transform:translateY(0)}.overlay-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:var(--border-width) solid var(--border)}.overlay-title{font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase}.overlay-close{font-size:18px;line-height:1;cursor:pointer;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border:var(--border-width) solid transparent;transition:border-color .15s}.overlay-close:hover{border-color:var(--border)}.overlay-body{padding:16px}.extract-textarea{font-family:var(--font-mono);font-size:12px;width:100%;height:160px;padding:12px;border:var(--border-width) solid var(--border);background:var(--bg);color:var(--fg);resize:vertical}.extract-textarea:focus{background:var(--bg-muted)}.extract-actions{display:flex;align-items:center;gap:12px;margin-top:12px}.extract-preview{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;padding-top:16px;border-top:var(--border-width) solid var(--border)}.extract-swatch{width:80px;height:56px;border:var(--border-width) solid var(--border);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:4px;gap:1px;font-weight:700;letter-spacing:.05em}.extract-swatch-name{font-size:8px;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}.extract-swatch-hex{font-size:7px;opacity:.7}.extract-count{font-size:11px;color:var(--fg-muted)}.extract-add-actions{width:100%;margin-top:8px;display:flex;gap:8px}.kbd{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 4px;border:1px solid currentColor;border-radius:3px;font-size:10px;font-weight:700;opacity:.7;margin-right:4px}.source-text-section{margin-bottom:12px}.source-text-display{font-family:var(--font-mono);font-size:11px;color:var(--fg-muted);background:var(--bg-muted);border:var(--border-width) solid var(--border);padding:12px;margin-top:8px;max-height:200px;overflow-y:auto;white-space:pre-wrap;word-break:break-word}.swatch-area{transition:background-color .3s}.swatch-area--light{background:#fff}.swatch-area--dark{background:#1a1a1a}.swatch-split{display:grid;grid-template-columns:1fr 1fr}.swatch-split-panel{padding:0}.swatch-split-label{font-size:9px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;padding:8px 12px;color:var(--fg-muted)}.swatch-split-panel--light{background:#fff}.swatch-split-panel--light .swatch-split-label{color:#999}.swatch-split-panel--dark{background:#1a1a1a;border-left:var(--border-width) solid var(--border)}.swatch-split-panel--dark .swatch-split-label{color:#666}.swatch-group{border-top:1px solid rgba(128,128,128,.25)}.swatch-group:first-child{border-top:none}.swatch-group-header{font-size:9px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;padding:10px 14px 6px;color:#80808099}.swatch-area--dark .swatch-group-header,.swatch-split-panel--dark .swatch-group-header{color:#c8c8c866}.swatch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));border-top:1px solid rgba(128,128,128,.25);border-left:1px solid rgba(128,128,128,.25)}.swatch-group .swatch-grid,.swatch-split .swatch-grid{border-top:none}.swatch{aspect-ratio:1;border-right:1px solid rgba(128,128,128,.25);border-bottom:1px solid rgba(128,128,128,.25);position:relative;cursor:grab;display:flex;flex-direction:column;justify-content:flex-end;padding:10px;transition:outline .1s,transform .15s,opacity .15s;animation:swatch-in .22s ease-out both}.swatch.dragging{opacity:.4;cursor:grabbing}.swatch.drag-over--before{box-shadow:inset 3px 0 0 0 var(--fg)}.swatch.drag-over--after{box-shadow:inset -3px 0 0 0 var(--fg)}.swatch:hover{z-index:1}.swatch.selected{outline:3px solid var(--fg);outline-offset:-5px;z-index:2}.swatch-label{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;line-height:1.3;text-shadow:0 1px 2px rgba(0,0,0,.15)}.swatch-hex{font-size:11px;font-weight:500;letter-spacing:.05em;opacity:.85}.swatch-delete{position:absolute;top:6px;right:6px;width:22px;height:22px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;cursor:pointer;opacity:0;transition:opacity .15s,background .15s;border:1px solid;background:#0000004d}.swatch:hover .swatch-delete{opacity:1}.swatch-delete:hover{background:#0009}.swatch-add{aspect-ratio:1;border-right:1px solid rgba(128,128,128,.25);border-bottom:1px solid rgba(128,128,128,.25);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:28px;font-weight:300;color:var(--fg-muted);transition:background .15s,color .15s;background:transparent}.swatch-add:hover{background:var(--fg);color:var(--bg)}.swatch-empty{grid-column:1 / -1;padding:48px 24px;text-align:center;color:var(--fg-muted);font-size:12px;letter-spacing:.05em;border-right:1px solid rgba(128,128,128,.25);border-bottom:1px solid rgba(128,128,128,.25)}@keyframes swatch-in{0%{opacity:0;transform:scale(.88)}to{opacity:1;transform:scale(1)}}.sidebar-header{padding:16px;border-bottom:var(--border-width) solid var(--border);font-size:10px;font-weight:700;letter-spacing:.15em;text-transform:uppercase}.palette-list{flex:1;overflow-y:auto}.palette-item{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .15s,color .15s;font-size:12px;font-weight:500;letter-spacing:.03em}.palette-item:hover{background:var(--bg-muted)}.palette-item.active{background:var(--fg);color:var(--bg)}.palette-item.active:hover{background:var(--fg)}.palette-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.palette-name-input{font-family:var(--font-mono);font-size:12px;font-weight:500;border:none;background:transparent;color:inherit;outline:none;width:100%;padding:0;letter-spacing:.03em}.palette-count{font-size:10px;color:var(--fg-muted);margin-left:8px;flex-shrink:0}.palette-item.active .palette-count{color:inherit;opacity:.6}.palette-delete{font-size:14px;width:20px;height:20px;display:flex;align-items:center;justify-content:center;margin-left:2px;opacity:0;transition:opacity .15s;flex-shrink:0}.palette-item:hover .palette-delete{opacity:.5}.palette-delete:hover{opacity:1!important}.palette-item.active .palette-delete{opacity:0}.palette-item.active:hover .palette-delete{opacity:.7}.palette-new{padding:12px 16px;border-top:var(--border-width) solid var(--border);margin-top:auto}.palette-new-row{display:flex;gap:8px}.palette-new-btn{flex:1;padding:8px;border:var(--border-width) dashed var(--border);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-muted);cursor:pointer;transition:background .15s,color .15s,border-style .15s;text-align:center}.palette-new-btn:hover{border-style:solid;background:var(--fg);color:var(--bg)}.palette-trash-btn{display:flex;align-items:center;gap:4px;padding:8px;border:var(--border-width) dashed var(--border);color:var(--fg-muted);cursor:pointer;transition:background .15s,color .15s,border-style .15s;flex-shrink:0}.palette-trash-btn:hover{border-style:solid;background:var(--fg);color:var(--bg)}.palette-trash-count{font-size:10px;font-weight:700}.sidebar-back{cursor:pointer;margin-right:8px;font-size:14px;color:var(--fg-muted)}.sidebar-back:hover{color:var(--fg)}.palette-item--trash{cursor:default}.palette-item--trash .palette-name{color:var(--fg-muted)}.palette-restore{font-size:14px;width:20px;height:20px;display:flex;align-items:center;justify-content:center;margin-left:2px;opacity:0;transition:opacity .15s;flex-shrink:0}.palette-item--trash:hover .palette-restore,.palette-item--trash:hover .palette-delete{opacity:.5}.palette-restore:hover{opacity:1!important}.palette-trash-empty{padding:24px 16px;text-align:center;color:var(--fg-muted);font-size:11px}.typo-section{border-top:var(--border-width) solid var(--border);min-height:0}.typo-header{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:var(--border-width) solid var(--border);flex-wrap:wrap}.typo-header .section-label{padding:0;margin-right:auto}.typo-input-wrapper{position:relative}.typo-input-group{display:flex;gap:0}.typo-input-group .input{border-right:none;width:180px}.typo-input-group .btn{flex-shrink:0}.font-suggestions{position:absolute;top:100%;left:0;right:0;background:var(--bg);border:var(--border-width) solid var(--border);border-top:none;z-index:50;max-height:240px;overflow-y:auto}.font-suggestions:empty{display:none}.font-suggestion{padding:6px 12px;font-size:12px;cursor:pointer;transition:background .1s,color .1s}.font-suggestion:hover,.font-suggestion.active{background:var(--fg);color:var(--bg)}.font-suggestion strong{font-weight:700}.typo-preview-text{padding:12px 16px;border-bottom:var(--border-width) solid var(--border);display:flex;align-items:center;gap:12px}.typo-preview-text label{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-muted);white-space:nowrap}.typo-preview-text .input{flex:1}.typo-fonts{display:flex;flex-wrap:wrap;gap:6px;padding:12px 16px;border-bottom:var(--border-width) solid var(--border);min-height:44px}.typo-font-tag{display:flex;align-items:center;gap:4px;padding:4px 10px;border:var(--border-width) solid var(--border);font-size:11px;font-weight:500;letter-spacing:.03em}.typo-font-tag-source{font-size:9px;color:var(--fg-muted);text-transform:uppercase}.typo-font-remove{margin-left:4px;font-size:12px;cursor:pointer;opacity:.5;transition:opacity .15s}.typo-font-remove:hover{opacity:1}.typo-empty{padding:12px 16px;color:var(--fg-muted);font-size:11px;font-style:italic}.typo-preview-section{padding:16px}.typo-preview-label{font-size:9px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--fg-muted);margin-bottom:10px}.typo-bg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:0;border-top:var(--border-width) solid var(--border);border-left:var(--border-width) solid var(--border)}.typo-bg-card{padding:16px;border-right:var(--border-width) solid var(--border);border-bottom:var(--border-width) solid var(--border);min-height:80px}.typo-bg-card-hex{font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px;opacity:.6}.typo-bg-card-text{font-size:16px;line-height:1.4}.typo-color-text-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:0;border-top:var(--border-width) solid var(--border);border-left:var(--border-width) solid var(--border)}.typo-color-text-card{padding:16px;border-right:var(--border-width) solid var(--border);border-bottom:var(--border-width) solid var(--border);background:var(--bg);min-height:80px}.typo-color-text-hex{font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-muted);margin-bottom:8px}.typo-color-text-sample{font-size:16px;line-height:1.4}