*{box-sizing:border-box}html,body,#app{height:100%;margin:0;padding:0}body{font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:root{--bg: #242424;--text: rgba(255, 255, 255, .87);--label: var(--text);--comment: #999999;--accent: #4CAF50;--accent-text: #ffffff;--theme-color: var(--accent);--tab-active-text: var(--text);--panel: rgba(255, 255, 255, .05);--panel-border: rgba(255, 255, 255, .1);--select-dropdown: rgba(255, 255, 255, .05);--select-dropdown-surface: rgba(20, 22, 24, .96);--heading-font-size: .95rem;--control-gap: .5rem;--control-padding: .5rem;--control-radius: 4px;--input-bg: rgba(255, 255, 255, .08);--input-bg-focus: rgba(255, 255, 255, .12);--input-border: var(--panel-border);--app-font: Inter, system-ui}body{background-color:var(--bg);color:var(--text);font-family:var(--app-font);line-height:1.5}#app{width:100%;margin:0 auto;padding:2rem;text-align:center;color:var(--text)}h1,h2,h3,h4,h5,h6{margin:0;color:var(--label);font-weight:600}h1{font-size:2rem;line-height:1.1}h2{font-size:1.3rem}h3{font-size:1.1rem;text-align:center;margin-bottom:1.5rem}h4{font-size:var(--heading-font-size);margin-bottom:.75rem;border-bottom:1px solid var(--panel-border);padding-bottom:.5rem}h5{margin-bottom:.5rem;font-weight:700}summary,.desc-body{text-align:left;font-size:small}.desc-body{padding:1rem;border:1px solid var(--panel-border);border-radius:6px;margin:1rem 0}.hint{font-size:small}.text-input,.number-input,.inp,.editor{background:var(--input-bg);border:1px solid var(--input-border);border-radius:var(--control-radius);padding:var(--control-padding);color:var(--text);font-size:.9rem}.text-input:focus,.number-input:focus,.inp:focus,.editor:focus{outline:none;border-color:var(--accent);background:var(--input-bg-focus)}.custom-select{position:relative;width:100%;outline:none}.custom-select.open{z-index:4100}.custom-select:focus{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--control-radius)}.select-trigger{background:var(--select-dropdown);border:1px solid var(--input-border);border-radius:var(--control-radius);padding:var(--control-padding);color:var(--text);font-size:.85rem;display:flex;justify-content:space-between;align-items:center;cursor:pointer;min-height:1rem;width:100%}.select-trigger:hover{border-color:var(--accent)}.select-trigger.open{border-color:var(--accent);background:var(--input-bg-focus)}.select-value{flex:1;text-align:left}.select-arrow{font-size:.7rem;color:var(--comment);transition:transform .2s ease}.select-trigger.open .select-arrow{transform:rotate(180deg)}.select-dropdown{position:absolute;top:100%;left:0;right:0;background:var(--select-dropdown-surface);border:1px solid var(--accent);border-top:none;border-radius:0 0 var(--control-radius) var(--control-radius);max-height:30rem;overflow-y:auto;margin:0;padding:0;list-style:none;box-shadow:0 16px 40px #00000073;backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%)}.select-option{display:block;width:100%;padding:var(--control-padding);margin:0;background:transparent;border:none;border-radius:0;cursor:pointer;color:var(--text);font-size:.85rem;text-align:left;transition:background .15s ease,color .15s ease}.select-option:focus{outline:none}.select-option:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}.select-option:hover,.select-option.highlighted{background:var(--input-bg-focus)}.select-option.selected{background:var(--accent);color:var(--accent-text);font-weight:600}.select-option.selected.highlighted{opacity:.9}.number-input{width:60px;text-align:center}.editor{min-height:120px;resize:vertical;font-family:Courier New,monospace;line-height:1.4}.editor.rules{min-height:22rem}.editor.disabled{opacity:.5;background-color:#8080801a;cursor:not-allowed}#zero-key{width:4rem}.emoji{font-size:.95rem;margin-left:8px}.btn{border:none;border-radius:var(--control-radius);padding:.4rem .8rem;cursor:pointer;font-size:.8rem;transition:filter .2s}.btn:hover{filter:brightness(1.05)}.btn-primary{background:var(--accent);color:var(--accent-text)}.btn-primary:disabled{background:#8080804d;color:#808080b3;cursor:not-allowed;opacity:.5}.btn-secondary{background:#ffffff1f;color:var(--comment);border:1px solid var(--panel-border)}.btn-secondary.warn{background:var(--accent);color:var(--accent-text)}.btn-secondary:disabled{background:#8080801a;color:#80808080;cursor:not-allowed;opacity:.5;border-color:#8080804d}label{display:flex;flex-direction:column;gap:.2rem;color:var(--label);font-size:.9rem}.field-row{display:flex;align-items:center;gap:var(--control-gap);margin-bottom:.75rem}.field-row label{min-width:120px;flex-direction:row}.schema-switches .field-row label{min-width:180px}.field-row .text{text-align:left;flex:1}.field-row .comment{text-align:left;font-size:.8rem;color:var(--comment)}.unit,.percent{font-size:.7rem;color:var(--label)}.font-hint{margin:.5rem 0 0 110px;font-size:.7rem;color:var(--label);font-style:italic;line-height:1.4}.container .checkbox-input{display:flex;align-items:center;gap:.5rem}input[type=checkbox]{appearance:none;-webkit-appearance:none;-moz-appearance:none;width:18px;height:18px;border:2px solid var(--theme-color);border-radius:3px;background-color:var(--bg);cursor:pointer;position:relative;margin:0}#implicit-mapping{margin:.6rem}input[type=checkbox]:checked{background-color:var(--theme-color);border-color:var(--theme-color)}input[type=checkbox]:checked:after{content:"✓";position:absolute;top:-2px;left:2px;color:var(--accent-text);font-size:14px;font-weight:700}.combo-option input[type=checkbox]{width:16px;height:16px;margin-right:8px}.combo-option input[type=checkbox]:checked:after{top:-3px;left:1px;font-size:12px}.dual-hand-select-all input[type=checkbox]{margin-right:6px}.container .checkbox-input label{margin:0;font-size:.85rem;color:var(--text)}.color-input{display:flex;align-items:center;gap:.35rem;margin-bottom:.55rem;flex-wrap:nowrap;white-space:nowrap}.color-input label{min-width:120px}.color-input input[type=color]{-moz-appearance:none;appearance:none;-webkit-appearance:none;width:24px;height:20px;border:1px solid var(--panel-border);border-radius:4px;background:transparent;padding:0;display:inline-block;vertical-align:middle}.color-input input[type=color]::-webkit-color-swatch-wrapper{padding:0;border-radius:4px}.color-input input[type=color]::-webkit-color-swatch{border:none;border-radius:3px}.color-input input[type=text]{background:var(--input-bg);border:1px solid var(--panel-border);border-radius:4px;padding:.2rem .4rem;color:var(--text);font-family:Courier New,monospace;font-size:.75rem;width:4.8rem;text-transform:uppercase}.alpha-input{width:3.8rem;background:var(--input-bg);border:1px solid var(--panel-border);border-radius:4px;padding:.2rem .4rem;color:var(--text);font-size:.75rem;text-align:center}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--panel);border-radius:4px}::-webkit-scrollbar-thumb{background:var(--panel-border);border-radius:4px;transition:background .2s}::-webkit-scrollbar-thumb:hover{background:var(--accent)}::-webkit-scrollbar-corner{background:var(--panel)}*{scrollbar-width:thin;scrollbar-color:var(--panel-border) var(--panel)}textarea::-webkit-scrollbar,.editor::-webkit-scrollbar,.tab-content::-webkit-scrollbar{width:6px;height:6px}textarea::-webkit-scrollbar-track,.editor::-webkit-scrollbar-track,.tab-content::-webkit-scrollbar-track{background:#ffffff0a;border-radius:3px}textarea::-webkit-scrollbar-thumb,.editor::-webkit-scrollbar-thumb,.tab-content::-webkit-scrollbar-thumb{background:var(--panel-border);border-radius:3px;transition:background .2s}textarea::-webkit-scrollbar-thumb:hover,.editor::-webkit-scrollbar-thumb:hover,.tab-content::-webkit-scrollbar-thumb:hover{background:var(--accent)}.container{border:1px solid var(--panel-border);border-radius:8px;padding:1rem;background:#ffffff0a;display:flex;flex-direction:column;gap:.8rem}.left-content,.right-content{display:flex;flex-direction:column;gap:1rem;background:var(--panel);border:1px solid var(--panel-border);border-radius:12px;padding:1rem}.scheme-rules-content{min-width:380px}.navbar{position:sticky;top:0;z-index:100;-webkit-backdrop-filter:saturate(120%) blur(6px);backdrop-filter:saturate(120%) blur(6px);background:color-mix(in oklab,var(--bg) 82%,transparent);border-bottom:1px solid var(--panel-border)}.nav-inner{margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:.5rem 2rem;max-width:1400px;flex-wrap:wrap}.nav-brand{display:inline-flex;align-items:center;gap:.75rem;font-weight:600;color:var(--label);text-align:left}.brand-logo{width:42px;height:42px;display:block;border-radius:14px;box-shadow:0 6px 18px #00000040}.brand-title{font-size:1.1rem;color:var(--text);letter-spacing:.01em}.nav-items{display:inline-flex;gap:.5rem;align-items:center;flex-wrap:wrap;justify-content:flex-end}@media (max-width: 768px){.nav-inner{justify-content:center;gap:1rem}.nav-items{justify-content:center}}.nav-item{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;color:var(--label);padding:.6rem 1rem;border-radius:6px;cursor:pointer;transition:all .2s;font-weight:600;font-size:1rem}.nav-item:hover{background:#ffffff0f;color:var(--comment)}.nav-item.active{background:var(--accent);color:var(--accent-text)}.tab-button{color:var(--text)}.subtab-navigation{display:flex;border-bottom:1px dashed var(--panel-border);background:transparent}.subtab-button{flex:1;padding:.6rem .8rem;background:none;border:none;color:var(--label);font-size:.95rem;cursor:pointer;transition:all .2s;border-bottom:2px solid transparent}.subtab-button:hover{color:var(--comment);background:#ffffff0a}.subtab-button.active{color:var(--tab-active-text);border-bottom-color:var(--accent)}.controls-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid var(--panel-border)}.controls-header h2{margin:0}.controls-actions{display:flex;gap:.5rem}.control-group{margin-bottom:1.5rem}.control-group h3{margin:0 0 1rem;font-size:1rem;border-bottom:1px solid var(--panel-border);padding-bottom:.5rem}.preset-selector{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem}.preset-selector label{color:var(--label)}.header{display:flex;justify-content:space-between;align-items:flex-end;border-bottom:1px solid var(--panel-border);padding-bottom:.5rem}.preview-container h3{margin:0 0 1.5rem;text-align:center;font-size:1.3rem}.layout-preview{display:flex;flex-direction:column;gap:2rem;margin-bottom:2rem}.layout-preview h4{margin:0 0 1rem;text-align:center}.canvas-wrapper{position:relative;display:flex;justify-content:center;padding:1.5rem;background:#00000014;border-radius:8px;min-height:120px;align-items:center}.preedit-in{position:relative;opacity:.9;pointer-events:none;z-index:2}.searchbox{display:inline-flex;align-items:baseline;gap:6px;padding:4px 10px;border-radius:8px;box-shadow:0 1px 2px #0000001a}.caret{display:inline-block;width:1px;height:1.3em;align-self:flex-end;margin-left:-5px;margin-bottom:3px;opacity:.5}.underline{text-decoration:underline;text-decoration-thickness:.1em;text-underline-offset:2px;padding-bottom:2px}.mock-layout{border-style:solid;position:relative;box-shadow:0 4px 16px #0003}.mock-horizontal{min-width:560px;display:flex;align-items:center;overflow:visible;padding:4px}.mock-vertical{padding:2px;width:180px;min-height:180px;display:flex;flex-direction:column;align-items:flex-start;margin-top:20px}.mock-horizontal>.preedit-in{left:-10px;top:-40px}.mock-vertical>.preedit-in{left:-10px;top:-45px}.mock-vertical>.candidates.vertical>.row.highlighted{margin-top:-40px!important}.mock-horizontal>.chips>.chip.highlighted{margin-left:-150px!important}.chips{display:flex;align-items:center;height:100%;flex-wrap:nowrap}.chip{display:inline-flex;align-items:center;gap:6px;height:100%;white-space:nowrap;border-radius:6px;position:relative}.chip-label{font-size:13px;font-weight:400;min-width:16px;text-align:right}.chip-text{font-size:16px;font-weight:400;white-space:nowrap}.chip-code{font-size:12px;opacity:.95;white-space:nowrap}.candidates.vertical{display:flex;flex-direction:column;flex:1;width:100%;align-items:stretch}.row{display:flex;align-items:center;gap:8px;min-height:26px;position:relative}.v-label{font-size:13px;min-width:18px;text-align:right;font-weight:400}.v-text{font-size:16px;font-weight:400}.v-code{font-size:12px;margin-left:auto}.mark{position:absolute;width:3px;border-radius:2px}.chip .mark,.row .mark{left:0;top:20%;bottom:20%}.dual-hand-select-all{display:inline-flex;align-items:center;margin-left:16px;font-size:.8rem;font-weight:400}.add-rule-section{margin-top:20px;padding-top:20px;border-top:1px solid #ccc}.add-rule-form{display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap}.add-rule-form .text-input{flex:1;min-width:120px;max-width:200px}.error-message{color:#d9534f;font-size:.9rem;margin-top:10px}.mapper{display:flex;flex-direction:column;gap:.6rem}.mapper-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.2rem}.toolbar{display:flex;align-items:center;gap:1rem}.toolbar .field{display:flex;flex-direction:column;gap:.3rem}.toolbar .field label{font-size:.75rem;color:var(--label);white-space:nowrap}.toolbar .field input,.toolbar .field select{align-self:center}.toolbar .btn{align-self:flex-end;white-space:nowrap}.keyboard{display:flex;flex-direction:column;gap:.4rem}.keyboard-row{display:flex;gap:.4rem}.key{flex:1;min-width:4em;background:#ffffff0f;border:1px solid var(--panel-border);border-radius:8px;padding:.4rem}.key-title{display:flex;align-items:baseline;justify-content:center;gap:.3rem}.kcap{font-weight:700;color:var(--label);margin-bottom:.2rem}.kcap-implicit-mapping{font-size:.9rem;color:var(--comment);margin-top:4px}.kv{display:grid;grid-template-columns:1fr 1fr;gap:.4rem}.kv .inp.big{grid-column:1 / span 2;min-height:6.1em;height:auto;white-space:pre-wrap;word-break:break-all;overflow-wrap:break-word;resize:none;font-family:inherit;line-height:1.2;overflow:auto}.kv .inp.big:disabled{background:#ffffff08;color:var(--text-muted);cursor:not-allowed;resize:none}.rules-hint{margin:0 0 16px;color:var(--comment)}.left-cell{flex:0 0 6em;padding:10px 16px;background:#ffffff05;border:1px solid var(--panel-border);border-radius:6px;font-weight:600;color:var(--text);display:flex;align-items:center}.left-cell.highlight{background-color:var(--theme-color);color:var(--accent-text);font-weight:700;padding:4px 8px;border-radius:4px;min-width:60px;text-align:center;margin-right:12px}.right-cell{flex:1;padding:8px 16px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}.right-cell .btn{flex-shrink:0;margin-left:auto;margin-right:0}.right-cell .option{align-items:center;margin:.2em;gap:6px;padding:6px 10px;background:#ffffff0f;border:1px solid var(--panel-border);border-radius:4px;cursor:pointer;transition:background-color .2s;color:var(--text)}label.combo-option{display:block;margin:0 .2em}.combo-option:hover{background:#ffffff1f}.pinyin{font-weight:600;color:var(--comment);font-family:Courier New,monospace}.combo-code{font-weight:600;color:var(--text);text-transform:uppercase;font-family:Courier New,monospace}.dual-hand{font-size:12px;color:var(--comment)}.rules-actions{margin-top:16px;display:flex;justify-content:flex-end;gap:12px}.mapping-option{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#ffffff0a;border:1px solid var(--panel-border);border-radius:4px;cursor:pointer;transition:all .2s}.mapping-option:hover{background:#ffffff14;border-color:#ffc10766}.mapping-option input[type=checkbox]{accent-color:#ffc107}.toast{position:fixed;top:12px;left:50%;transform:translate(-50%);background:var(--panel);border:1px solid var(--panel-border);color:var(--comment);padding:.5rem 1rem;border-radius:6px;z-index:1000}.app-container{max-width:1400px;margin:0 auto;padding:2rem;background-color:var(--bg);color:var(--comment);font-family:var(--app-font)}.app-content{display:grid;gap:.6rem;align-items:start}.app-content.dual{grid-template-columns:minmax(auto,1fr) auto}.app-content.single{grid-template-columns:1fr}.app-content.dual-even{grid-template-columns:1fr 1fr}@media (max-width: 1200px){.app-content.dual{grid-template-columns:1fr}.right-content{max-height:none}}.tab-content{overflow-y:auto}.controls-container{padding:.5rem}.dropzone{flex:1;min-height:44px;display:flex;align-items:center;justify-content:center;border:2px dashed var(--panel-border);border-radius:8px;color:var(--comment);background:#ffffff0a;cursor:pointer}.dropzone.drag-over{border-color:var(--accent);background:#ffffff0f;cursor:copy}.dropzone:hover{border-color:var(--accent);color:var(--tab-active-text);background:#ffffff0f}.file-input.hidden{position:absolute;opacity:0;width:0;height:0;pointer-events:none}button,label,select,option,input,h1,h3,h4,p,span,div{color:inherit}h2{color:var(--text)}.section{margin-top:20px;padding:15px;border:1px solid var(--panel-border);border-radius:8px}.tone-mapping-left{display:flex;align-items:center;gap:8px;flex:1}.tone-mapping-right{display:flex;align-items:center;gap:8px}.tone-mapping-left label,.tone-mapping-right label{min-width:40px;font-size:.9em;color:var(--comment)}.tone-display{font-weight:600;color:var(--text);min-width:20px;padding:4px 8px;background:#ffffff0f;border-radius:4px;font-family:Courier New,monospace}.tone-key-input{width:60px;text-align:center}.section.highlight{border:2px solid color-mix(in srgb,var(--theme-color) 50%,transparent);background-color:color-mix(in srgb,var(--theme-color) 5%,transparent)}.section h4{margin:0 0 15px;color:inherit;font-size:1rem}.section.highlight h4{color:var(--theme-color)}.section .table{display:flex;flex-direction:column;gap:8px;font-size:.85em}.section .row{display:flex;align-items:center;padding:8px;border-radius:4px;border:1px solid color-mix(in srgb,var(--theme-color) 20%,transparent)}.control-group.disable,.dropzone.disable{opacity:.4;pointer-events:none;position:relative;filter:grayscale(100%)}.app-root{min-height:100vh;background:var(--bg);color:var(--text);display:flex;flex-direction:column;gap:1.5rem}.app-header{max-width:1200px;margin:0 auto;padding:2.5rem 2rem 1rem;text-align:center}.app-header h1{margin-bottom:.75rem;font-size:2.25rem}.app-header p{margin:0 auto;max-width:720px;color:var(--comment);font-size:.95rem}.app-content{max-width:1200px;margin:0 auto 3rem;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr);gap:1.5rem;padding:0 2rem 2rem}.preview-pane{min-width:0}.settings-pane{display:flex;flex-direction:column;gap:1.5rem}.panel{background:color-mix(in srgb,var(--panel) 90%,transparent);border:1px solid var(--panel-border);border-radius:16px;padding:1.5rem;box-shadow:0 10px 40px #00000040;display:flex;flex-direction:column;gap:1rem}.panel h2{margin:0;font-size:1.3rem;color:var(--text)}.field{display:flex;flex-direction:column;gap:.35rem}.field label{font-weight:600;color:var(--label);font-size:.9rem}.field .text-input{width:100%}.panel-actions{margin-top:.5rem;display:flex;gap:.75rem;justify-content:flex-end}@media (max-width: 1024px){.app-content{grid-template-columns:1fr}.panel-actions{justify-content:flex-start}}@media (max-width: 640px){.app-header{padding:2rem 1.25rem .75rem}.app-content{padding:0 1.25rem 2.5rem}}