@import"https://fonts.googleapis.com/css2?family=Geist+Mono:wght@300;400;500;600&display=swap";*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}:root{--bg: #000000;--surface: #000000;--border: #222222;--text: #888888;--text-muted: #444444;--text-bright: #ffffff;--accent: #ffffff;--input-bg: #000000;--hover: #0a0a0a;--active: #111111;--error: #ff4444;--font: "Geist Mono", monospace;--sidebar-w: 300px}html,body,#root{height:100%;width:100%;overflow:hidden}body{font-family:var(--font);font-size:12px;font-weight:400;line-height:1.5;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}input,button,select,textarea{font:inherit;color:inherit}:focus-visible{outline:1px solid var(--accent);outline-offset:-1px}::selection{background:var(--accent);color:var(--bg)}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border)}.app{display:flex;height:100vh;width:100vw}.sidebar{width:var(--sidebar-w);min-width:var(--sidebar-w);height:100%;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden}.sidebar-header{padding:16px;border-bottom:1px solid var(--border)}.sidebar-header h1{font-size:13px;font-weight:500;letter-spacing:-.01em;color:var(--accent)}.sidebar-content{flex:1;overflow-y:auto;padding:0}.preview{flex:1;position:relative;display:flex;align-items:center;justify-content:center;background:var(--bg);overflow:hidden}.control-group{padding:12px 16px;border-bottom:1px solid var(--border)}.control-label{display:flex;align-items:center;justify-content:space-between;font-size:11px;font-weight:400;color:var(--text-muted);margin-bottom:8px}.presets{display:flex;gap:6px;margin-bottom:8px}.preset-btn{padding:4px 8px;background:transparent;border:1px solid var(--border);color:var(--text-muted);font-size:11px;cursor:pointer;transition:color .15s,border-color .15s}.preset-btn:hover{border-color:var(--text);color:var(--text)}.coord-input{width:100%;background:transparent;border:1px solid var(--border);padding:8px 10px;font-size:12px;color:var(--text-bright);margin-bottom:8px;transition:border-color .15s}.coord-input:focus{outline:none;border-color:var(--accent)}.coord-input::placeholder{color:var(--text-muted)}.coord-input.coord-error{border-color:var(--error)}.coord-hint{font-size:11px;color:var(--text-muted);margin-bottom:8px}.coord-hint-error{color:var(--error)}.fetch-btn{width:100%;padding:8px 0;background:transparent;border:1px solid var(--border);color:var(--text);font-size:11px;font-weight:500;cursor:pointer;transition:color .15s,border-color .15s}.fetch-btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}.fetch-btn:disabled{color:var(--text-muted);cursor:default}.theme-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.theme-swatch{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 2px;background:transparent;border:1px solid transparent;cursor:pointer;transition:border-color .15s}.theme-swatch:hover{border-color:var(--border)}.theme-swatch.active{border-color:var(--accent)}.theme-swatch.active .swatch-name{color:var(--accent)}.swatch-bg{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:1px solid var(--border)}.swatch-line{display:block;width:14px;height:1px}.swatch-name{font-size:9px;color:var(--text-muted);text-align:center;line-height:1.2}.custom-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;margin-top:8px;padding:6px 0;background:transparent;border:none;color:var(--text-muted);font-size:11px;cursor:pointer;transition:color .15s}.custom-toggle:hover,.custom-toggle-active{color:var(--text)}.custom-chevron{font-size:10px;transition:transform .15s}.custom-chevron-open{transform:rotate(90deg)}.custom-panel{padding-top:8px;display:flex;flex-direction:column;gap:8px}.custom-row{display:flex;align-items:center;justify-content:space-between}.custom-row label{font-size:11px;color:var(--text-muted)}.custom-color-field{display:flex;align-items:center;gap:6px}.custom-color-field input[type=color]{-webkit-appearance:none;appearance:none;width:24px;height:24px;border:1px solid var(--border);background:transparent;padding:0;cursor:pointer}.custom-color-field input[type=color]::-webkit-color-swatch-wrapper{padding:2px}.custom-color-field input[type=color]::-webkit-color-swatch{border:none}.custom-color-field input[type=text]{width:72px;background:transparent;border:1px solid var(--border);padding:4px 6px;font-size:11px;color:var(--text-bright);transition:border-color .15s}.custom-color-field input[type=text]:focus{outline:none;border-color:var(--accent)}.custom-num-input{width:80px;background:transparent;border:1px solid var(--border);padding:4px 6px;font-size:11px;color:var(--text-bright);text-align:right;font-variant-numeric:tabular-nums;transition:border-color .15s}.custom-num-input:focus{outline:none;border-color:var(--accent)}.ratio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.ratio-btn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 2px;background:transparent;border:1px solid transparent;cursor:pointer;transition:border-color .15s}.ratio-btn:hover{border-color:var(--border)}.ratio-btn.active{border-color:var(--accent)}.ratio-btn.active .ratio-label{color:var(--accent)}.ratio-btn.active .ratio-preview{border-color:var(--accent)}.ratio-preview{width:100%;max-width:28px;max-height:32px;border:1px solid var(--border);transition:border-color .15s}.ratio-label{font-size:9px;color:var(--text-muted);text-align:center;line-height:1.2}.weight-value{font-variant-numeric:tabular-nums;color:var(--text-bright)}.weight-slider{width:100%;height:1px;-webkit-appearance:none;appearance:none;background:var(--border);outline:none;cursor:pointer}.weight-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:12px;height:12px;background:var(--accent);border:none;cursor:pointer}.weight-slider::-moz-range-thumb{width:12px;height:12px;background:var(--accent);border:none;border-radius:0;cursor:pointer}.export-wrap{position:relative;margin:12px 16px}.export-split{display:flex}.export-btn{padding:8px 0;background:var(--accent);border:none;color:var(--bg);font-size:12px;font-weight:500;cursor:pointer;transition:opacity .15s}.export-main{flex:1}.export-caret{width:32px;border-left:1px solid var(--bg);font-size:10px}.export-btn:hover:not(:disabled){opacity:.8}.export-btn:disabled{background:transparent;border:1px solid var(--border);color:var(--text-muted);cursor:default}.export-caret:disabled{border-left-color:var(--border)}.export-dropdown{position:absolute;bottom:100%;left:0;right:0;margin-bottom:2px;border:1px solid var(--border);background:var(--bg);z-index:20}.export-option{display:block;width:100%;padding:6px 10px;background:transparent;border:none;color:var(--text);font-size:11px;text-align:left;cursor:pointer;transition:color .15s,background .15s}.export-option:hover{background:var(--active);color:var(--accent)}.export-option+.export-option{border-top:1px solid var(--border)}.canvas-container{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:32px;position:relative}.canvas-container canvas{display:block;box-shadow:0 0 0 1px var(--border)}.canvas-placeholder{font-size:12px;color:var(--text-muted);text-align:center;max-width:220px;line-height:1.6}.error-msg{margin:0 16px;padding:8px 10px;border:1px solid var(--error);color:var(--error);font-size:11px;line-height:1.5;word-break:break-word}.loading-overlay{position:absolute;inset:0;background:#000000e6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;z-index:10}.loading-overlay p{font-size:11px;color:var(--text-muted)}.spinner{width:16px;height:16px;border:1px solid var(--border);border-top-color:var(--accent);animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}