:root{--color-bg:#f7f7f9;--color-fg:#222;--color-primary:#0078d4;--color-error:#d32f2f;--color-border:#e0e0e0;--color-code-bg:#f5f6f8;--color-code-fg:#1e1e1e;--color-accent:#ff9800;--color-keyword:#569cd6;--color-type:#4ec9b0;--color-string:#ce9178;--color-number:#b5cea8;--color-comment:#6a9955;--color-field:#9cdcfe;--color-class:#b8d7a3}[data-theme=dark]{--color-bg:#181a1b;--color-fg:#f7f7f9;--color-border:#333;--color-code-bg:#23272e;--color-code-fg:#f8f8f2}[data-theme=light]{--atom-one-bg:#fafafb;--atom-one-fg:#383a42;--atom-one-comment:#a0a1a7;--atom-one-keyword:#a71d5d;--atom-one-string:#50a14f;--atom-one-number:#005cc5;--atom-one-function:#6f42c1;--atom-one-class:#6f42c1;--atom-one-operator:#393a34}*{box-sizing:border-box}html{height:100%}body{margin:0;font-family:'Segoe UI','PingFang SC','Hiragino Sans GB',Arial,sans-serif;background:var(--color-bg);color:var(--color-fg);min-height:100vh;display:flex;flex-direction:column;overflow-y:auto;-webkit-overflow-scrolling:touch;transition:background .2s,color .2s}header{display:flex;flex-direction:column;align-items:center;padding:1.2rem 1rem .5rem 1rem;background:var(--color-bg);border-bottom:1px solid var(--color-border);flex-shrink:0}header h1{margin:0 0 .5rem 0;font-size:1.6rem;font-weight:600}.toolbar{display:flex;gap:.5rem;align-items:center}.toolbar button,.toolbar select{padding:.4rem .8rem;border:1px solid var(--color-border);border-radius:4px;background:var(--color-bg);color:var(--color-fg);font-size:1rem;cursor:pointer;transition:background .2s,color .2s}.toolbar button:hover,.toolbar select:focus{border-color:var(--color-primary)}main{display:flex;flex-direction:row;gap:2rem;padding:2rem 2vw;max-width:1200px;margin:0 auto;flex:1;overflow:visible;width:100%}.editor-section{flex:1 1 50%;display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden}.editor-section label{font-weight:500;margin-bottom:.5rem;flex-shrink:0}#json-input{width:100%;flex:1 1 auto;min-height:240px;resize:vertical;font-family:'Fira Mono',Consolas,monospace;font-size:14px;padding:.8rem;border:1px solid var(--color-border);border-radius:4px;background:var(--color-bg);color:var(--color-fg);margin-bottom:.8rem;transition:border .2s;overflow-y:auto}#json-input:focus{border-color:var(--color-primary);outline:0}#json-error{color:var(--color-error);font-size:.95rem;height:1.2em;margin-bottom:.5rem;flex-shrink:0}#error{color:var(--color-error);font-size:.95rem;min-height:1.2em;margin-bottom:.5rem}#error:empty{display:none}#generate-btn{align-self:flex-start;background:var(--color-primary);color:#fff;border:none;margin-top:.5rem;font-weight:500;padding:.6rem 1.2rem;border-radius:4px;cursor:pointer;flex-shrink:0;transition:background .2s}#generate-btn:hover{background:#005fa3}.code-section{background:var(--color-code-bg);border-radius:6px;padding:1rem .5rem 1rem 1rem;box-shadow:0 2px 8px 0 rgba(0,0,0,.04);position:relative;display:flex;flex-direction:column;flex:1 1 50%;min-height:0;overflow:hidden}.code-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem;flex-shrink:0}#code-language{color:var(--color-accent);font-size:1rem;font-weight:600}.code-actions{display:flex;gap:.5rem}#copy-btn,#copy-file-btn{background:var(--color-primary);color:#fff;border:none;padding:.3rem .8rem;border-radius:4px;font-size:.95rem;cursor:pointer;transition:background .2s}#copy-btn:hover,#copy-file-btn:hover{background:#005fa3}.code-block{background:var(--color-code-bg);color:var(--color-code-fg);font-family:'Fira Mono',Consolas,monospace;font-size:1rem;border-radius:4px;padding:1rem;overflow-x:auto;overflow-y:auto;flex:1 1 auto;margin:0;white-space:pre;min-height:240px;max-height:65vh;box-sizing:border-box}#code-output{font-size:14px;min-height:240px}#code-output.has-line-numbers{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;padding:0}#code-output .line-numbers{border-right:1px solid var(--color-border);color:var(--color-comment);text-align:right;user-select:none;font-family:'Fira Mono',Consolas,monospace;font-size:14px;line-height:1.45;min-width:44px;max-width:80px;overflow-y:auto;display:flex;flex-direction:column;justify-content:flex-start}#code-output .line-numbers .ln{display:block;padding:0 6px;opacity:.6;line-height:1.45;height:1.45em}#code-output code{padding:1rem;overflow:auto;white-space:pre;display:block;line-height:1.45}#code-output .hljs{padding:0;background:0 0}.examples-section{display:flex;flex-direction:column;align-items:stretch;gap:1rem;padding:1rem 2vw;max-width:1200px;margin:0 auto 2rem auto;box-sizing:border-box}.examples-section .example{display:flex;flex-direction:column;align-items:stretch;gap:.5rem;width:100%;flex:1 1 auto}.examples-section .example h3{margin:0;font-size:.95rem;font-weight:600;color:var(--color-fg)}.examples-section .example .code-block{flex:1 1 auto;min-height:56px;max-height:360px;overflow:auto;white-space:pre-wrap;word-break:break-word;font-size:12px;padding:.8rem;border:1px solid var(--color-border);background:var(--color-code-bg);color:var(--color-code-fg);border-radius:4px}.example-header{display:flex;justify-content:space-between;align-items:center;gap:.5rem}.copy-example-btn{background:var(--color-primary);color:#fff;border:none;padding:.2rem .6rem;border-radius:4px;font-size:.85rem;cursor:pointer}.copy-example-btn:hover{background:#005fa3}@media (min-width:1000px){.examples-section{flex-direction:row;gap:1rem}.examples-section .example{flex:1 1 50%;max-width:50%}}@media (max-width:999px){.examples-section{flex-direction:column;gap:1rem}.examples-section .example{flex:1 1 100%;max-width:100%}}@media (max-width:900px){main{flex-direction:column;gap:1.5rem;padding:1rem 1vw}.code-section,.editor-section{flex:1 1 100%!important;width:100%!important;min-width:0;min-height:0}.code-section,.editor-section{min-width:0;min-height:0;flex:1 1 100%}}@media (max-width:600px){header{padding:.7rem .5rem .3rem .5rem}main{padding:.5rem .5vw}.code-block{font-size:.92rem;padding:.7rem}#json-input{font-size:.95rem;padding:.6rem}}.modal{display:flex;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);align-items:center;justify-content:center;z-index:1000}.faq-section{padding:2rem 2vw;background:0 0;max-width:1200px;margin:0 auto 2rem auto}.faq-section h2{margin:0 0 1rem 0;font-size:1.15rem;color:var(--color-fg)}.faq-accordion{border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border)}.faq-item{border-bottom:1px solid var(--color-border)}.faq-question{width:100%;text-align:left;background:0 0;border:none;padding:1rem 0;font-size:1rem;font-weight:600;color:var(--color-fg);cursor:pointer}.faq-question:focus{outline:3px solid rgba(0,120,212,.15);outline-offset:3px}.faq-answer{overflow:hidden;transition:max-height .22s ease;padding:0 0 1rem 0;color:var(--color-fg);font-size:.95rem;line-height:1.5}@media (max-width:600px){.faq-section{padding:1rem 1vw}.faq-question{font-size:.95rem}}.modal.hidden{display:none}@media (max-width:600px){.code-block{min-height:180px;max-height:55vh}#json-input{min-height:160px}}.modal-content{background:var(--color-bg);border-radius:8px;box-shadow:0 4px 16px rgba(0,0,0,.2);width:90%;max-width:500px;max-height:90vh;overflow-y:auto}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem;border-bottom:1px solid var(--color-border)}.modal-header h2{margin:0;font-size:1.3rem}.close-btn{background:0 0;border:none;font-size:1.5rem;cursor:pointer;color:var(--color-fg)}.close-btn:hover{opacity:.7}.modal-body{padding:1.5rem}.form-group{margin-bottom:1.2rem}.form-group label{display:block;margin-bottom:.5rem;font-weight:500}.form-group input,.form-group textarea{width:100%;padding:.6rem;border:1px solid var(--color-border);border-radius:4px;background:var(--color-bg);color:var(--color-fg);font-family:'Segoe UI',sans-serif;font-size:1rem}.form-group input:focus,.form-group textarea:focus{border-color:var(--color-primary);outline:0}.modal-footer{display:flex;gap:.5rem;padding:1.5rem;border-top:1px solid var(--color-border)}.btn-primary{flex:1;background:var(--color-primary);color:#fff;border:none;padding:.6rem 1rem;border-radius:4px;font-weight:500;cursor:pointer;transition:background .2s}.btn-primary:hover{background:#005fa3}.btn-secondary{flex:1;background:var(--color-border);color:var(--color-fg);border:none;padding:.6rem 1rem;border-radius:4px;font-weight:500;cursor:pointer;transition:background .2s}.btn-secondary:hover{opacity:.8}.help-text{display:block;margin-top:.3rem;font-size:.85rem;color:#888;font-style:italic}[data-theme=dark] .help-text{color:#aaa}.editor-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}#generate-btn{background:var(--color-primary);color:#fff;border:none;padding:.35rem .9rem;border-radius:4px;font-size:.95rem;cursor:pointer}#generate-btn:hover{background:#005fa3}.skip-link{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden}.skip-link:focus{left:1rem;top:1rem;width:auto;height:auto;padding:.5rem .75rem;background:var(--color-primary);color:#fff;border-radius:4px;z-index:9999}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid rgba(0,120,212,.25);outline-offset:2px;box-shadow:0 0 0 3px rgba(0,120,212,.06)}button{vertical-align:middle}.examples-section{display:flex;flex-direction:column;align-items:stretch;gap:1rem;padding:1rem 2vw;max-width:1200px;margin:0 auto 2rem auto;box-sizing:border-box}.examples-section .example{display:flex;flex-direction:column;align-items:stretch;gap:.5rem;width:100%;flex:1 1 auto}.examples-section .example h3{margin:0;font-size:.95rem;font-weight:600;color:var(--color-fg)}.examples-section .example .code-block{flex:1 1 auto;min-height:56px;max-height:360px;overflow:auto;white-space:pre-wrap;word-break:break-word;font-size:12px;padding:.8rem;border:1px solid var(--color-border);background:var(--color-code-bg);color:var(--color-code-fg);border-radius:4px}.example-header{display:flex;justify-content:space-between;align-items:center;gap:.5rem}.copy-example-btn{background:var(--color-primary);color:#fff;border:none;padding:.2rem .6rem;border-radius:4px;font-size:.85rem;cursor:pointer}.copy-example-btn:hover{background:#005fa3}@media (min-width:1000px){.examples-section{flex-direction:row;gap:1rem}.examples-section .example{flex:1 1 50%;max-width:50%}}@media (max-width:999px){.examples-section{flex-direction:column;gap:1rem}.examples-section .example{flex:1 1 100%;max-width:100%}}@media (max-width:900px){main{flex-direction:column;gap:1.5rem;padding:1rem 1vw}.code-section,.editor-section{flex:1 1 100%!important;width:100%!important;min-width:0;min-height:0}.code-section,.editor-section{min-width:0;min-height:0;flex:1 1 100%}}@media (max-width:600px){header{padding:.7rem .5rem .3rem .5rem}main{padding:.5rem .5vw}.code-block{font-size:.92rem;padding:.7rem}#json-input{font-size:.95rem;padding:.6rem}}.progress-indicator{display:flex;align-items:center;gap:.6rem;padding:.6rem .6rem;background:rgba(0,0,0,.03);border-radius:6px;margin-bottom:.6rem}.progress-indicator .progress-spinner{width:16px;height:16px;border-radius:50%;border:2px solid rgba(0,0,0,.12);border-top-color:var(--color-primary);animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.progress-indicator .progress-text{font-size:.95rem;color:var(--color-fg)}.hidden{display:none!important}#json-input,.code-block{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,0.12) rgba(0,0,0,0)}#json-input::-webkit-scrollbar,.code-block::-webkit-scrollbar{height:10px;width:10px}#json-input::-webkit-scrollbar-track,.code-block::-webkit-scrollbar-track{background:0 0;border-radius:10px}#json-input::-webkit-scrollbar-thumb,.code-block::-webkit-scrollbar-thumb{background:rgba(0,0,0,.12);border-radius:10px;border:2px solid transparent;background-clip:padding-box}#json-input::-webkit-scrollbar-thumb:hover,.code-block::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.18)}[data-theme=dark] #json-input::-webkit-scrollbar-thumb,[data-theme=dark] .code-block::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:10px;border:2px solid rgba(0,0,0,.35);background-clip:padding-box}[data-theme=dark] #json-input::-webkit-scrollbar-track,[data-theme=dark] .code-block::-webkit-scrollbar-track{background:rgba(255,255,255,.02)}[data-theme=dark] #json-input,[data-theme=dark] .code-block{scrollbar-color:rgba(255,255,255,0.22) rgba(255,255,255,0.03)}[data-theme=dark] #json-input::-webkit-scrollbar-thumb:hover,[data-theme=dark] .code-block::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.24)}[data-theme=light] #json-input::-webkit-scrollbar-thumb,[data-theme=light] .code-block::-webkit-scrollbar-thumb{background:rgba(0,0,0,.28);border-radius:10px;border:2px solid rgba(255,255,255,.9);background-clip:padding-box}[data-theme=light] #json-input::-webkit-scrollbar-track,[data-theme=light] .code-block::-webkit-scrollbar-track{background:rgba(0,0,0,.03)}[data-theme=light] #json-input,[data-theme=light] .code-block{scrollbar-color:rgba(0,0,0,0.42) rgba(0,0,0,0.04)}#json-input::-webkit-scrollbar-track,.code-block::-webkit-scrollbar-track{box-shadow:inset 0 0 6px rgba(0,0,0,.03)}[data-theme=dark] #json-input,[data-theme=dark] .code-block{scrollbar-color:rgba(255,255,255,0.12) transparent}[data-theme=light] #json-input,[data-theme=light] .code-block{scrollbar-color:rgba(0,0,0,0.18) transparent}.ad-banner{width:100%;max-width:1200px;margin:.5rem auto .75rem auto;padding:.5rem 1rem;border-radius:6px;background:linear-gradient(90deg,rgba(0,0,0,.04),rgba(0,0,0,.02));color:var(--color-fg);text-align:center;font-size:.95rem;border:1px dashed var(--color-border)}[data-theme=dark] .ad-banner{background:linear-gradient(90deg,rgba(255,255,255,.02),rgba(255,255,255,.01));border-color:#444}.btn-icon{display:inline-flex;width:1em;height:1em;align-items:center;justify-content:center;margin-right:.4ch;flex:0 0 auto}.btn-icon svg{width:.92em;height:.92em;display:block;fill:none;stroke:currentColor;stroke-width:1.4}button{display:inline-flex;align-items:center;gap:.4ch}#copy-btn .btn-icon,#copy-file-btn .btn-icon,.copy-example-btn .btn-icon{width:.9em;height:.9em}.close-btn{padding:.35rem;width:2rem;height:2rem;display:inline-flex;align-items:center;justify-content:center}.btn-primary .btn-icon svg,.btn-secondary .btn-icon svg{stroke:currentColor}[data-theme=light] .code-block,[data-theme=light] .code-block .hljs,[data-theme=light] pre code{background:var(--atom-one-bg)!important;color:var(--atom-one-fg)!important}[data-theme=light] .hljs-comment,[data-theme=light] .hljs-quote{color:var(--atom-one-comment)!important;font-style:italic}[data-theme=light] .hljs-built_in,[data-theme=light] .hljs-keyword,[data-theme=light] .hljs-literal,[data-theme=light] .hljs-name,[data-theme=light] .hljs-selector-tag,[data-theme=light] .hljs-type{color:var(--atom-one-keyword)!important;font-weight:600}[data-theme=light] .hljs-doctag,[data-theme=light] .hljs-meta-string,[data-theme=light] .hljs-string{color:var(--atom-one-string)!important}[data-theme=light] .hljs-number,[data-theme=light] .hljs-regexp,[data-theme=light] .hljs-section,[data-theme=light] .hljs-title{color:var(--atom-one-number)!important}[data-theme=light] .hljs-function .hljs-title,[data-theme=light] .hljs-title.function_{color:var(--atom-one-function)!important}[data-theme=light] .hljs-class .hljs-title{color:var(--atom-one-class)!important}[data-theme=light] .hljs-attr,[data-theme=light] .hljs-bullet,[data-theme=light] .hljs-symbol,[data-theme=light] .hljs-tag,[data-theme=light] .hljs-variable{color:var(--atom-one-operator)!important}.site-footer{border-top:1px solid var(--color-border);background:var(--color-bg);color:var(--color-fg);flex-shrink:0}.site-footer .container{max-width:1200px;margin:0 auto;padding:1.25rem 2vw}.footer-top{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}.brand{display:flex;align-items:center;gap:.5rem;font-weight:600}.brand .brand-name{font-size:1rem}.footer-nav{display:flex;gap:.8rem;flex-wrap:wrap}.footer-nav a{color:var(--color-fg);text-decoration:none;border-bottom:1px dashed transparent}.footer-nav a:hover{color:var(--color-primary);border-bottom-color:var(--color-primary)}.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:.5rem;padding-top:.75rem;border-top:1px solid var(--color-border);font-size:.92rem}.legal-links{display:flex;gap:.75rem;flex-wrap:wrap}.legal-links a{color:var(--color-fg);text-decoration:none;opacity:.9}.legal-links a:hover{color:var(--color-primary);opacity:1}@media (max-width:600px){.site-footer .container{padding:1rem 1vw}}