:root{--bg: #0f0f17;--bg-elevated: #181825;--bg-surface: #1e1e2e;--bg-input: #262637;--text: #cdd6f4;--text-muted: #6c7086;--text-dim: #45475a;--accent: #a6e3a1;--accent-dim: rgba(166, 227, 161, .1);--border: rgba(255, 255, 255, .06);--border-focus: rgba(166, 227, 161, .4);--radius: 6px;--radius-lg: 10px;--mono: "JetBrains Mono", "Fira Code", "Cascadia Code", "SF Mono", monospace;--transition: .15s ease}[data-theme=light]{--bg: #eff1f5;--bg-elevated: #ffffff;--bg-surface: #e6e9ef;--bg-input: #dce0e8;--text: #4c4f69;--text-muted: #6c6f85;--text-dim: #9ca0b0;--accent: #40a02b;--accent-dim: rgba(64, 160, 43, .1);--border: rgba(0, 0, 0, .08);--border-focus: rgba(64, 160, 43, .4)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,Inter,system-ui,sans-serif;background:var(--bg);color:var(--text);line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#app{max-width:1280px;margin:0 auto;padding:2.5rem 2rem}.url-conflict-banner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.25rem;margin-bottom:1.5rem;background:var(--accent-dim);border:1.5px solid var(--accent);border-radius:var(--radius-lg);font-size:.9rem;font-weight:500;color:var(--text);box-shadow:0 0 16px var(--accent-dim)}.url-conflict-actions{display:flex;gap:.5rem;flex-shrink:0}header{margin-bottom:2.5rem}.header-row{display:flex;justify-content:space-between;align-items:center}header h1{font-size:1.75rem;font-weight:700;letter-spacing:-.02em;color:var(--text)}.theme-toggle{display:flex;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}.theme-btn{background:transparent;color:var(--text-muted);border:none;border-radius:0;padding:.3rem .6rem;font-size:.7rem;font-weight:500;cursor:pointer;transition:background var(--transition),color var(--transition);letter-spacing:.02em}.theme-btn:hover{color:var(--text);opacity:1}.theme-btn.active{background:var(--accent);color:var(--bg)}.theme-btn+.theme-btn{border-left:1px solid var(--border)}header h1 code{font-family:var(--mono);font-size:.9em;background:var(--accent-dim);color:var(--accent);padding:.1em .4em;border-radius:var(--radius);font-weight:600}header p{color:var(--text-muted);font-size:.875rem;margin-top:.25rem}header p code{font-family:var(--mono);font-size:.9em;color:var(--text)}header p a{text-decoration:none}header p a:hover code{text-decoration:underline}.byline-link{color:var(--accent);text-decoration:none}.byline-link:hover{text-decoration:underline}.right-col{position:sticky;top:1.5rem;display:flex;flex-direction:column;gap:1rem;max-height:calc(100vh - 3rem)}.preview-section{display:flex;justify-content:center}.wez-preview{position:relative;z-index:60;width:100%;max-width:640px;border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 0 0 1px #ffffff0d,0 8px 40px #0009;--p-fg: #cccccc;--p-bg: #000000;--p-bg-rgba: #000000;--p-cursor: #cccccc;--p-font: monospace;--p-font-size: 12px;--p-c0: #000000;--p-c1: #cc0403;--p-c2: #19cb00;--p-c3: #cecb00;--p-c4: #0d73cc;--p-c5: #cb1ed1;--p-c6: #0dcdcd;--p-c7: #dddddd;--p-c8: #767676;--p-c9: #f2201f;--p-c10: #23fd00;--p-c11: #fffd00;--p-c12: #1a8fff;--p-c13: #fd28ff;--p-c14: #14ffff;--p-c15: #ffffff}.wez-preview.floating{position:fixed;z-index:100;box-shadow:0 0 0 1px #ffffff14,0 24px 80px #000c}.wez-preview.no-radius{border-radius:0}.wez-titlebar{height:38px;background:#333;display:flex;align-items:center;padding:0 12px;position:relative;-webkit-user-select:none;user-select:none}.wez-titlebar.hidden{display:none}.traffic-lights{display:flex;gap:8px}.traffic-lights span{width:12px;height:12px;border-radius:50%}.tl-close{background:#ff5f57}.tl-minimize{background:#febc2e}.tl-zoom{background:#28c840}.wez-title{position:absolute;left:50%;transform:translate(-50%);font-family:-apple-system,system-ui,sans-serif;font-size:13px;color:#999;font-weight:400}.wez-tab-bar{background:#1a1a2e;font-family:var(--p-font);font-size:calc(var(--p-font-size) * .9);line-height:1}.wez-tab-bar.hidden{display:none}.wez-tab-bar.fancy{background:#333}.wez-tabs{display:flex;height:28px;align-items:stretch}.wez-tab{display:flex;align-items:center;padding:0 12px;white-space:nowrap;font-size:12px}.wez-tab.active{background:#2a2a3e;color:#fff;font-weight:500}.wez-tab-bar.fancy .wez-tab.active{background:#446}.wez-tab.inactive{background:transparent;color:#888}.wez-tab.new-tab-btn{color:#666;padding:0 10px;font-size:14px;cursor:pointer}.wez-tab.new-tab-btn.hidden{display:none}.wez-terminal{background:var(--p-bg-rgba);min-height:200px;position:relative}.wez-terminal-inner{position:relative;z-index:1;font-family:var(--p-font);font-size:var(--p-font-size);line-height:1.4;color:var(--p-fg);padding:8px}.wez-terminal-inner .line{white-space:pre;min-height:1.4em}.wez-terminal-inner .fg{color:var(--p-fg)}.wez-terminal-inner .c0{color:var(--p-c0)}.wez-terminal-inner .c1{color:var(--p-c1)}.wez-terminal-inner .c2{color:var(--p-c2)}.wez-terminal-inner .c3{color:var(--p-c3)}.wez-terminal-inner .c4{color:var(--p-c4)}.wez-terminal-inner .c5{color:var(--p-c5)}.wez-terminal-inner .c6{color:var(--p-c6)}.wez-terminal-inner .c7{color:var(--p-c7)}.wez-terminal-inner .c8{color:var(--p-c8)}.wez-terminal-inner .c9{color:var(--p-c9)}.wez-terminal-inner .c10{color:var(--p-c10)}.wez-terminal-inner .c11{color:var(--p-c11)}.wez-terminal-inner .c12{color:var(--p-c12)}.wez-terminal-inner .c13{color:var(--p-c13)}.wez-terminal-inner .c14{color:var(--p-c14)}.wez-terminal-inner .c15{color:var(--p-c15)}.wez-terminal-inner .url{color:var(--p-c4);text-decoration:underline;text-underline-offset:2px;cursor:pointer}.cursor-char{display:inline-block;width:.6em;height:1.2em;vertical-align:text-bottom;animation:var(--p-cursor-blink, none)}.cursor-block{background:var(--p-cursor)}.cursor-beam{width:2px;background:var(--p-cursor)}.cursor-underline{background:transparent;border-bottom:2px solid var(--p-cursor)}@keyframes cursor-blink{0%,49%{opacity:1}50%,to{opacity:0}}main{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3rem;align-items:start}@media(max-width:900px){main{grid-template-columns:1fr}}.controls-group{margin-bottom:1.25rem;padding:1rem;background:var(--bg-elevated);border-radius:var(--radius-lg);border:1px solid var(--border);min-width:0}.controls-group>summary{font-weight:600;font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--accent);cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;-webkit-user-select:none;user-select:none;opacity:.7;transition:opacity var(--transition)}.controls-group>summary:hover{opacity:1}.controls-group>summary::-webkit-details-marker{display:none}.controls-group>summary:after{content:"";width:6px;height:6px;border-right:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);transform:rotate(-45deg);transition:transform var(--transition),opacity var(--transition);flex-shrink:0;opacity:.5}.controls-group>summary:hover:after{opacity:1}.controls-group[open]>summary:after{transform:rotate(45deg)}.controls-group:not([open])>summary{margin-bottom:0}.controls-group[open]>summary{margin-bottom:.5rem}.field{display:flex;align-items:center;margin-bottom:.35rem;gap:.75rem;padding:.2rem 0}.field label{font-size:.8rem;flex:1 1 auto;min-width:0;color:var(--text-muted)}.field input,.field select{background:var(--bg-input);color:var(--text);border:1px solid var(--border);border-radius:var(--radius);padding:.35rem .5rem;font-size:.8rem;width:55%;flex:0 0 55%;transition:border-color var(--transition)}.field input:focus,.field select:focus{outline:none;border-color:var(--border-focus);box-shadow:0 0 0 2px var(--accent-dim)}.field input.invalid,.field select.invalid{border-color:#ff5f57;box-shadow:0 0 0 2px #ff5f5726}.scheme-picker{position:relative;width:55%;flex:0 0 55%}.scheme-picker input{width:100%;flex:unset}.scheme-dropdown{position:absolute;top:100%;left:0;right:0;max-height:200px;overflow-y:auto;background:var(--bg-elevated);border:1px solid var(--border);border-top:none;border-radius:0 0 var(--radius) var(--radius);z-index:50;box-shadow:0 8px 24px #0000004d}.scheme-dropdown.hidden{display:none}.scheme-item{padding:.35rem .5rem;font-size:.8rem;cursor:pointer;color:var(--text);transition:background var(--transition)}.scheme-item:hover{background:var(--accent-dim)}.scheme-item.scheme-empty{color:var(--text-muted);font-style:italic;cursor:default}.scheme-item.scheme-empty:hover{background:transparent}.output{background:var(--bg-elevated);border-radius:var(--radius-lg);padding:1rem;overflow-y:auto;min-height:0;min-width:0;border:1px solid var(--border)}.output-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.output-header h2{font-size:.85rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}.output-buttons{display:flex;gap:.35rem}.permalink-toggle{display:flex;align-items:center;gap:.4rem;font-size:.75rem;color:var(--text-muted);cursor:pointer;margin-bottom:.5rem}.permalink-toggle input[type=checkbox]{accent-color:var(--accent)}.output pre{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:1rem;overflow-x:auto;font-size:.8rem;line-height:1.6;max-height:70vh;overflow-y:auto}.output code{font-family:var(--mono);color:var(--text);white-space:pre}.import-section{margin-bottom:.75rem}.import-section.hidden{display:none}.import-tabs{display:flex;gap:0;margin-bottom:.5rem;border-bottom:1px solid var(--border)}.import-tab{background:transparent;color:var(--text-muted);border:none;border-radius:0;padding:.4rem .75rem;font-size:.75rem;font-weight:500;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}.import-tab:hover{color:var(--text);opacity:1}.import-tab.active{color:var(--accent);border-bottom-color:var(--accent)}.import-panel.hidden{display:none}.import-section textarea{width:100%;background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:var(--radius);padding:.75rem;font-family:var(--mono);font-size:.8rem;resize:vertical;margin-bottom:.5rem;transition:border-color var(--transition)}.import-section textarea:focus{outline:none;border-color:var(--border-focus);box-shadow:0 0 0 2px var(--accent-dim)}.import-url-input{width:100%;background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:var(--radius);padding:.5rem .75rem;font-size:.8rem;margin-bottom:.5rem;transition:border-color var(--transition)}.import-url-input:focus{outline:none;border-color:var(--border-focus);box-shadow:0 0 0 2px var(--accent-dim)}.import-panel input[type=file]{font-size:.75rem;color:var(--text-muted);margin-bottom:.5rem}.import-panel input[type=file]::file-selector-button{background:var(--bg-input);color:var(--text);border:1px solid var(--border);border-radius:var(--radius);padding:.25rem .5rem;font-size:.7rem;cursor:pointer;margin-right:.5rem}.import-actions{display:flex;gap:.35rem;justify-content:flex-end}button{background:var(--accent);color:var(--bg);border:none;border-radius:var(--radius);padding:.4rem .85rem;font-size:.75rem;font-weight:600;cursor:pointer;transition:opacity var(--transition),background var(--transition);letter-spacing:.01em}button:hover{opacity:.9}button:active{opacity:.8}.btn-secondary{background:transparent;color:var(--text-muted);border:1px solid var(--border)}.btn-secondary:hover{color:var(--text);border-color:var(--border-focus);background:var(--accent-dim);opacity:1}.btn-icon{display:inline-flex;align-items:center;justify-content:center;padding:.35rem;line-height:0}.btn-icon svg{display:block}.btn-icon.btn-success{border-color:#28c840;color:#28c840;background:#28c8401a}.btn-icon.btn-error{border-color:#ff5f57;color:#ff5f57;background:#ff5f571a}footer{text-align:center;padding:2.5rem 0 1rem;font-size:.75rem;color:var(--text-dim)}footer code{font-family:var(--mono);font-size:inherit;color:inherit}footer a{font-family:var(--mono);color:var(--text-muted);text-decoration:none}footer a:hover{color:var(--accent)}.footer-projects{display:flex;justify-content:center;gap:.5rem;margin-bottom:.5rem}.footer-project{font-family:var(--mono);font-size:.75rem;color:var(--text-muted);text-decoration:none;padding:.2rem .6rem;border:1px solid var(--border);border-radius:var(--radius);transition:border-color var(--transition),color var(--transition)}.footer-project:hover{color:var(--accent);border-color:var(--border-focus)}.footer-project.active{color:var(--accent);border-color:var(--accent);background:var(--accent-dim)}.mapping-advanced-toggle{display:flex;align-items:center;gap:.4rem;font-size:.75rem;color:var(--text-muted);cursor:pointer;margin-bottom:.5rem}.mapping-advanced-toggle input[type=checkbox]{accent-color:var(--accent)}.mappings-list{display:flex;flex-direction:column;gap:.5rem;margin-bottom:.5rem}.mapping-row{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap}.mapping-mods-input,.mapping-key-input{flex:1 1 0;min-width:0;font-family:var(--mono);background:var(--bg-input);color:var(--text);border:1px solid var(--border);border-radius:var(--radius);padding:.35rem .5rem;font-size:.8rem;transition:border-color var(--transition)}.mapping-mods{display:flex;align-items:center;gap:.2rem;flex:0 0 auto}.mod-pill{font-family:var(--mono);font-size:.65rem;font-weight:500;padding:.2rem .4rem;border-radius:var(--radius);border:1px solid var(--border);background:transparent;color:var(--text-dim);cursor:pointer;-webkit-user-select:none;user-select:none;line-height:1;transition:background var(--transition),color var(--transition),border-color var(--transition)}.mod-pill:hover{color:var(--text-muted);border-color:var(--border-focus);opacity:1}.mod-pill.active{background:var(--accent);color:var(--bg);border-color:var(--accent)}.mapping-key-select{flex:1 1 0;min-width:4rem;background:var(--bg-input);color:var(--text);border:1px solid var(--border);border-radius:var(--radius);padding:.35rem .5rem;font-size:.8rem;transition:border-color var(--transition)}.mapping-key-select:focus{outline:none;border-color:var(--border-focus);box-shadow:0 0 0 2px var(--accent-dim)}.mapping-action{flex:4 1 0;min-width:0;background:var(--bg-input);color:var(--text);border:1px solid var(--border);border-radius:var(--radius);padding:.35rem .5rem;font-size:.8rem;transition:border-color var(--transition)}.mapping-mods-input:focus,.mapping-key-input:focus,.mapping-action:focus{outline:none;border-color:var(--border-focus);box-shadow:0 0 0 2px var(--accent-dim)}.mapping-delete{flex:0 0 auto}.hidden{display:none!important}
