:root{--rosewater: #f2d5cf;--flamingo: #eebebe;--pink: #f4b8e4;--mauve: #ca9ee6;--red: #e78284;--maroon: #ea999c;--peach: #ef9f76;--yellow: #e5c890;--green: #a6d189;--teal: #81c8be;--sky: #99d1db;--sapphire: #85c1dc;--blue: #8caaee;--lavender: #babbf1;--text: #c6d0f5;--subtext1: #b5bfe2;--subtext0: #a5adce;--overlay2: #949cbb;--overlay1: #838ba7;--overlay0: #737994;--surface2: #626880;--surface1: #51576d;--surface0: #414559;--base: #303446;--mantle: #292c3c;--crust: #232634;font-family:JetBrains Mono,monospace;font-size:14px;line-height:1.5;font-weight:400;color:var(--text);background-color:var(--base);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}body{height:100vh;overflow:hidden;display:flex}#app{width:100%;max-width:1800px;margin:0 auto;padding:1.25rem;display:flex;flex-direction:column;height:100vh;overflow:hidden;gap:.75rem}.header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1.25rem;background:var(--crust);border:1px solid var(--surface0);border-radius:8px;flex-shrink:0}.header-title{font-size:1rem;font-weight:600;color:var(--text);display:flex;align-items:center;gap:.5rem}.header-actions{display:flex;align-items:center;gap:1rem}.btn-text{background:transparent;border:none;color:var(--overlay1);font-family:inherit;font-size:.75rem;cursor:pointer;transition:color .15s ease;padding:0}.btn-text:hover{color:var(--text);text-decoration:underline}.header-icon{color:var(--blue);font-size:.9rem}.header-version{font-size:.7rem;color:var(--overlay1);background:var(--surface0);padding:.2rem .5rem;border-radius:4px;letter-spacing:.05em}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#181825b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:100;display:flex;align-items:center;justify-content:center;padding:2rem;animation:fadeIn .2s ease-out}.modal-content{background:var(--base);border:1px solid var(--surface1);border-radius:12px;width:100%;max-width:800px;max-height:100%;display:flex;flex-direction:column;box-shadow:0 10px 30px #00000080;animation:slideIn .2s ease-out}.modal-header{padding:1rem 1.5rem;border-bottom:1px solid var(--surface0);display:flex;align-items:center;justify-content:space-between}.modal-header h2{font-size:1.1rem;color:var(--text);margin:0}.btn-close{background:transparent;border:none;color:var(--overlay1);font-size:1.5rem;cursor:pointer;line-height:1;padding:0}.btn-close:hover{color:var(--red)}.changelog-text{padding:1.5rem;overflow-y:auto;font-size:.8rem;line-height:1.6;color:var(--subtext1);white-space:pre-wrap}.editor-container{display:flex;gap:.75rem;flex:1;min-height:0;overflow:hidden}.panel{flex:1;display:flex;flex-direction:column;background:var(--mantle);border:1px solid var(--surface0);border-radius:8px;overflow:hidden;min-height:0;transition:border-color .15s ease}.panel:focus-within{border-color:var(--surface1)}.panel-header{display:flex;align-items:center;justify-content:space-between;padding:.4rem .9rem;background:var(--crust);border-bottom:1px solid var(--surface0);min-height:2rem}.panel-header-left{display:flex;align-items:center;gap:.6rem}.panel-label{color:var(--overlay1);font-size:.7rem;font-weight:500;text-transform:lowercase;letter-spacing:.08em}.panel-stats{color:var(--overlay0);font-size:.65rem;letter-spacing:.03em}.badge{font-size:.6rem;padding:.1rem .4rem;border-radius:3px;font-weight:500;letter-spacing:.03em;animation:fadeIn .2s ease}.badge-valid{color:var(--green);background:#a6d1891f;border:1px solid rgba(166,209,137,.25)}.badge-error{color:var(--red);background:#e782841f;border:1px solid rgba(231,130,132,.25)}.editor-input{flex:1;background:var(--mantle);color:var(--text);border:none;padding:.75rem 1rem;font-family:JetBrains Mono,monospace;font-size:.8rem;line-height:1.7;resize:none;outline:none;-moz-tab-size:2;tab-size:2;width:100%}.editor-input::placeholder{color:var(--overlay0);font-style:italic}.editor-output{flex:1;overflow:auto;display:flex;flex-direction:column;outline:none}.code-lines{padding:.5rem 0}.code-line{display:flex;align-items:stretch;line-height:1.7;font-size:.8rem;padding-right:1rem;transition:background-color .1s ease;width:max-content;min-width:100%}.code-line:hover{background:#41455966}.code-line:hover .line-num{background:var(--surface0);color:var(--text)}.code-line.error-line{background:#e782841a}.code-line.error-line .line-num{color:var(--red);border-right-color:var(--red)}.line-num{position:sticky;left:0;background:var(--mantle);display:inline-block;min-width:2.75rem;padding:0 .6rem;text-align:right;color:var(--surface2);-webkit-user-select:none;user-select:none;flex-shrink:0;border-right:1px solid var(--surface0);margin-right:.75rem;font-size:.7rem;line-height:1.7;z-index:1}.line-code{white-space:pre;font-family:JetBrains Mono,monospace;flex:1;min-width:0}.indent-guide{border-left:1px solid var(--surface2);display:inline-block;height:1.7em;vertical-align:top}.output-placeholder{display:flex;align-items:center;justify-content:center;flex:1;color:var(--overlay0);font-size:.75rem;font-style:italic;padding:2rem;text-align:center}.code-line .hl-tag{color:var(--blue)}.code-line .hl-attr{color:var(--yellow)}.code-line .hl-value{color:var(--green)}.code-line .hl-bracket{color:var(--overlay2)}.code-line .hl-comment{color:var(--overlay1);font-style:italic}.code-line .hl-text{color:var(--rosewater)}.code-line .hl-cdata{color:var(--peach)}.code-line .hl-pi{color:var(--mauve)}.error-banner{display:flex;align-items:center;gap:.6rem;padding:.6rem 1rem;background:#e7828414;border:1px solid rgba(231,130,132,.2);border-radius:6px;font-size:.75rem;color:var(--red);animation:slideIn .2s ease-out;overflow:hidden}.error-icon{display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;background:var(--red);color:var(--crust);border-radius:50%;font-size:.65rem;font-weight:700;flex-shrink:0}.error-message{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--maroon)}.error-location{flex-shrink:0;color:var(--overlay1);font-size:.7rem;background:var(--surface0);padding:.15rem .4rem;border-radius:3px}.toolbar{display:flex;gap:.5rem;justify-content:flex-end}.btn{padding:.45rem 1.1rem;border:1px solid var(--surface0);border-radius:6px;font-family:JetBrains Mono,monospace;font-size:.75rem;font-weight:500;cursor:pointer;transition:all .15s ease;letter-spacing:.02em}.btn:active:enabled{transform:scale(.97)}.btn-primary{background:var(--blue);color:var(--crust);border-color:var(--blue)}.btn-primary:hover:enabled{background:var(--sapphire);border-color:var(--sapphire)}.btn-primary.btn-copied{background:var(--green);border-color:var(--green)}.btn-secondary{background:var(--surface0);color:var(--subtext0);border-color:var(--surface1)}.btn-secondary:hover:enabled{background:var(--surface1);color:var(--text)}.btn:disabled{opacity:.35;cursor:not-allowed}.footer{text-align:center;padding:.5rem;font-size:.7rem;color:var(--overlay0)}.footer a{color:var(--blue);text-decoration:none;transition:color .15s ease}.footer a:hover{color:var(--sapphire);text-decoration:underline}@media (max-width: 768px){.editor-container{flex-direction:column}.panel{min-height:280px}.header-title{font-size:.85rem}.toolbar{flex-direction:row}.toolbar .btn{flex:1}}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--surface1);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--surface2)}::-webkit-scrollbar-corner{background:transparent}*{scrollbar-width:thin;scrollbar-color:var(--surface1) transparent}::selection{background:var(--surface2);color:var(--text)}@keyframes slideIn{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}