.code-editor{width:100%;height:500px;min-height:500px;padding:.75rem 1.5rem 1.5rem;font-family:Monaco,Menlo,Ubuntu Mono,Consolas,source-code-pro,monospace;font-size:14px;line-height:1.6;background:linear-gradient(135deg,#1e1e1e,#252525);color:#e4e4e4;border:2px solid rgba(255,255,255,.1);border-radius:12px;resize:vertical;tab-size:2;box-sizing:border-box;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:inset 0 2px 4px #0003,0 1px 2px #0000001a}.code-editor:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 4px #667eea26,inset 0 2px 4px #0003;background:linear-gradient(135deg,#1e1e1e,#2a2a2a)}.code-editor::placeholder{color:#fff6;font-style:italic}@media(prefers-color-scheme:light){.code-editor{background:linear-gradient(135deg,#fff,#f8f9fa);color:#1e1e1e;border-color:#0000001f;box-shadow:inset 0 2px 4px #0000000d,0 1px 2px #0000000d}.code-editor:focus{border-color:#667eea;box-shadow:0 0 0 4px #667eea1f,inset 0 2px 4px #0000000d;background:linear-gradient(135deg,#fff,#fafbfc)}.code-editor::placeholder{color:#0006}}.copy-button{padding:.5rem 1rem;font-size:.85rem;background-color:#646cff33;border:1px solid rgba(100,108,255,.4);color:#646cff;border-radius:6px;cursor:pointer;transition:all .2s;font-weight:500}.copy-button-icon{padding:.5rem;display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;background-color:#ffffff1a;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.2);color:#fffc;border-radius:6px}.copy-button-icon:hover{background-color:#fff3;border-color:#ffffff4d;color:#fff}.copy-button:hover{background-color:#646cff4d;border-color:#646cff99}.copy-button:active{transform:scale(.98)}@media(prefers-color-scheme:light){.copy-button{background-color:#646cff1a;border-color:#646cff4d;color:#535bf2}.copy-button:hover{background-color:#646cff33;border-color:#646cff80}.copy-button-icon{background-color:#0000000d;border-color:#0000001a;color:#000000b3}.copy-button-icon:hover{background-color:#0000001a;border-color:#0003;color:#000000e6}}.toon-display{display:block;background:linear-gradient(135deg,#ffffff14,#ffffff0a);border-radius:12px;border:2px solid rgba(255,255,255,.15);box-sizing:border-box;position:relative;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 2px 4px #0000001a,0 1px 2px #0000000d;transition:all .3s ease;height:500px;max-height:500px;overflow:hidden}.toon-display:hover{border-color:#667eea4d;box-shadow:inset 0 2px 4px #0000001a,0 4px 6px #0000001a}.toon-copy-button-wrapper{position:absolute;top:.5rem;right:.5rem;z-index:20;pointer-events:none}.toon-copy-button-wrapper>*{pointer-events:all}.toon-code{width:100%;height:500px;max-height:500px;margin:0;padding:.75rem 1.5rem 1.5rem;font-family:Monaco,Menlo,Ubuntu Mono,Consolas,source-code-pro,monospace;font-size:14px;line-height:1.6;color:#e4e4e4;background:linear-gradient(135deg,#1e1e1e,#252525);overflow-y:scroll;overflow-x:auto;white-space:pre-wrap;word-break:break-word;box-sizing:border-box;scrollbar-width:auto;scrollbar-color:rgba(255,255,255,.7) rgba(255,255,255,.2);border-radius:0 0 12px 12px;display:block;resize:none}.toon-code::-webkit-scrollbar{width:16px;height:16px;-webkit-appearance:none}.toon-code::-webkit-scrollbar-track{background:#fff3;border-radius:8px;margin:2px}.toon-code::-webkit-scrollbar-thumb{background:#fff9;border-radius:8px;border:2px solid rgba(255,255,255,.2)}.toon-code::-webkit-scrollbar-thumb:hover{background:#fffc}.toon-code::-webkit-scrollbar-corner{background:#ffffff1a}@media(prefers-color-scheme:light){.toon-display{background:linear-gradient(135deg,#00000008,#00000003);border-color:#0000001f}.toon-display:hover{border-color:#667eea66}.toon-code{color:#1e1e1e;background:linear-gradient(135deg,#fff,#f8f9fa)}.toon-code::-webkit-scrollbar-thumb{background:#0003}.toon-code::-webkit-scrollbar-thumb:hover{background:#0000004d}}.error-message{display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;background-color:#ff3b301a;border:1px solid rgba(255,59,48,.3);border-radius:6px;color:#ff3b30;font-size:.9rem}.error-icon{font-size:1.2rem}.error-text{flex:1}@media(prefers-color-scheme:light){.error-message{background-color:#ff3b301a;border-color:#ff3b3066;color:#d70015}}.toon-node{width:100%;max-width:600px;margin:.5rem 0;animation:fadeIn .3s ease-in}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.toon-node-container{background:#ffffff0d;border-radius:12px;padding:1rem;border:2px solid rgba(100,108,255,.3);box-shadow:0 4px 6px #0000001a;transition:all .3s ease}.toon-node-container:hover{border-color:#646cff99;box-shadow:0 6px 12px #00000026;transform:translateY(-2px)}.toon-node-leaf{background:#ffffff08;border-radius:8px;padding:.75rem 1rem;border:1px solid rgba(255,255,255,.1)}.toon-node-header{display:flex;align-items:center;gap:.75rem;font-size:1rem;font-weight:500}.toon-node-expandable{cursor:pointer;-webkit-user-select:none;user-select:none;padding:.5rem;border-radius:6px;transition:background-color .2s}.toon-node-expandable:hover{background-color:#ffffff1a}.toon-emoji{font-size:1.5rem;line-height:1}.toon-label{font-weight:600;color:#646cff;flex:0 0 auto;min-width:100px}.toon-value{color:#ffffffe6;font-family:Monaco,Menlo,monospace;word-break:break-word}.toon-type{color:#fff9;font-size:.85rem;font-style:italic;margin-left:auto}.toon-expand-icon{color:#ffffff80;font-size:.8rem;margin-left:auto;transition:transform .2s}.toon-node-children{margin-top:1rem;padding-left:1.5rem;border-left:2px dashed rgba(100,108,255,.3);display:flex;flex-direction:column;gap:.5rem}@media(prefers-color-scheme:light){.toon-node-container{background:#00000005;border-color:#646cff66}.toon-node-container:hover{border-color:#646cffb3;background:#0000000a}.toon-node-leaf{background:#00000005;border-color:#0000001a}.toon-label{color:#535bf2}.toon-value{color:#000000e6}.toon-type{color:#0009}.toon-expand-icon{color:#00000080}.toon-node-expandable:hover{background-color:#0000000d}.toon-node-children{border-left-color:#646cff66}}@media(max-width:768px){.toon-node{max-width:100%}.toon-node-header{font-size:.9rem}.toon-emoji{font-size:1.2rem}.toon-label{min-width:80px;font-size:.9rem}}.config-panel{background:linear-gradient(135deg,#ffffff14,#ffffff0a);border-radius:16px;padding:2rem;border:1px solid rgba(255,255,255,.15);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;transition:all .3s ease}.config-panel:hover{border-color:#667eea4d;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.config-panel h4{margin:0 0 1.5rem;font-size:1.25rem;font-weight:700;color:#fffffff2;letter-spacing:-.02em}.config-group{margin-bottom:1.25rem}.config-group:last-child{margin-bottom:0}.config-group label{display:block;margin-bottom:.5rem;font-size:.9rem;font-weight:500;color:#fffc}.config-group .checkbox-label{display:flex;align-items:center;gap:.5rem;cursor:pointer}.config-group .checkbox-label input[type=checkbox]{width:18px;height:18px;cursor:pointer}.config-group select{width:100%;padding:.75rem 2.5rem .75rem 1rem;background-color:#fff3;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:2px solid rgba(255,255,255,.2);border-radius:10px;color:#fffffff2;font-size:.95rem;font-weight:500;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 9L1 4h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .75rem center}.config-group select:hover{border-color:#667eea99;background-color:#667eea33;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transform:translateY(-1px)}.config-group select:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 4px #667eea33;background-color:#667eea40;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.config-group small{display:block;margin-top:.25rem;font-size:.75rem;color:#ffffff80}@media(prefers-color-scheme:light){.config-panel{background:linear-gradient(135deg,#00000008,#00000003);border-color:#0000001f}.config-panel:hover{border-color:#667eea66}.config-panel h4{color:#1f2937}.config-group label{color:#374151}.config-group select{background-color:#00000014;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-color:#00000026;color:#1f2937;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%231f2937' d='M6 9L1 4h10z'/%3E%3C/svg%3E")}.config-group select:hover{border-color:#667eea99;background-color:#667eea1f;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.config-group select:focus{background-color:#667eea26;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.config-group small{color:#6b7280}}.comparison-table{background:#ffffff0d;border-radius:8px;padding:.5rem 1rem 1rem;border:1px solid rgba(255,255,255,.1);margin-top:5.5rem;box-sizing:border-box;flex-shrink:0}.comparison-table h4{margin:0 0 .75rem;font-size:1rem;color:#ffffffe6}.comparison-table table{width:100%;border-collapse:collapse}.comparison-table th,.comparison-table td{padding:.5rem;text-align:left;border-bottom:1px solid rgba(255,255,255,.1)}.comparison-table th{font-weight:600;color:#ffffffe6;font-size:.9rem}.comparison-table td{color:#fffc;font-size:.9rem}.comparison-table td.positive{color:#4ade80;font-weight:600}.comparison-table tbody tr:last-child td{border-bottom:none}@media(prefers-color-scheme:light){.comparison-table{background:#00000005;border-color:#0000001a}.comparison-table h4{color:#000000e6}.comparison-table th,.comparison-table td{border-bottom-color:#0000001a}.comparison-table th{color:#000000e6}.comparison-table td{color:#000c}.comparison-table td.positive{color:#16a34a}}.validation-status{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;border-radius:6px;font-size:.85rem;font-weight:500;margin-top:.5rem}.validation-status.valid{background-color:#4ade801a;border:1px solid rgba(74,222,128,.3);color:#4ade80}.validation-status.invalid{background-color:#ff3b301a;border:1px solid rgba(255,59,48,.3);color:#ff3b30}.validation-icon{font-size:1rem;font-weight:700;line-height:1}.validation-message{flex:1}@media(prefers-color-scheme:light){.validation-status.valid{background-color:#16a34a1a;border-color:#16a34a4d;color:#16a34a}.validation-status.invalid{background-color:#dc26261a;border-color:#dc26264d;color:#dc2626}}.app-header{position:sticky;top:0;z-index:50;width:100%;border-bottom:1px solid rgba(229,231,235,1);background:#fffc;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.header-container{height:4rem}.header-content{max-width:1280px;margin:0 auto;height:100%;padding:0 1rem;display:flex;align-items:center;justify-content:space-between}.logo-link{display:flex;align-items:center;text-decoration:none;color:inherit}.logo-text{font-size:1.25rem;font-weight:700;color:#1f2937}.header-nav{display:flex;align-items:center;gap:.5rem}.search-button{cursor:pointer;padding:.5rem;border-radius:.375rem;color:#6b7280;background:transparent;border:none;display:flex;align-items:center;gap:.5rem;transition:all .2s}.search-button:hover{color:#111827;background:#f9fafb}.keyboard-shortcut{display:none;align-items:center;gap:.25rem;height:1.25rem;padding:0 .375rem;border:1px solid rgba(229,231,235,1);background:#f9fafb;border-radius:.25rem;font-family:monospace;font-size:.75rem;color:#4b5563}@media(min-width:768px){.keyboard-shortcut{display:inline-flex}}@media(prefers-color-scheme:dark){.app-header{background:#111827cc;border-bottom-color:#374151}.logo-text{color:#f9fafb}.search-button{color:#9ca3af}.search-button:hover{color:#f9fafb;background:#37415180}.keyboard-shortcut{border-color:#374151;background:#1f2937;color:#9ca3af}}.app-footer{background:#f9fafb;border-top:1px solid rgba(229,231,235,1);padding:3rem 0 1.5rem;width:100%;margin-top:auto}.footer-container{max-width:1280px;margin:0 auto;padding:0 1rem}.footer-content{display:flex;flex-direction:column;gap:4rem;margin-bottom:3rem}.footer-brand{width:100%}.footer-logo{font-size:1.25rem;font-weight:700;color:#111827;margin-bottom:1rem}.footer-description{font-size:.875rem;color:#4b5563;line-height:1.6}.footer-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:2rem;width:100%}.footer-column-title{font-size:.875rem;font-weight:700;color:#111827;margin-bottom:1rem}.footer-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.625rem}.footer-link{font-size:.875rem;color:#374151;text-decoration:none;transition:color .2s;display:flex;align-items:center;gap:.5rem}.footer-link:hover{color:#2563eb}.footer-bottom{border-top:1px solid rgba(229,231,235,1);padding-top:1.5rem;display:flex;flex-direction:column;gap:1rem;align-items:center;justify-content:space-between}.footer-copyright{font-size:.75rem;color:#6b7280;margin:0}.footer-legal{display:flex;gap:1.5rem}.footer-legal-link{font-size:.875rem;color:#374151;text-decoration:none;transition:color .2s;display:flex;align-items:center;gap:.5rem}.footer-legal-link:hover{color:#2563eb}@media(min-width:768px){.footer-content{flex-direction:row}.footer-brand{width:33.333333%}.footer-links{width:66.666667%}.footer-bottom{flex-direction:row}}@media(prefers-color-scheme:dark){.app-footer{background:#111827;border-top-color:#374151}.footer-logo{color:#f9fafb}.footer-description{color:#9ca3af}.footer-column-title{color:#f9fafb}.footer-link{color:#d1d5db}.footer-link:hover{color:#60a5fa}.footer-bottom{border-top-color:#374151}.footer-copyright{color:#9ca3af}.footer-legal-link{color:#d1d5db}.footer-legal-link:hover{color:#60a5fa}}.breadcrumb{display:none;align-items:center;gap:.5rem;font-size:.875rem;color:#4b5563;overflow:hidden;margin-bottom:1rem}.breadcrumb-container{display:flex;align-items:center;gap:.5rem;min-width:0}.breadcrumb-home{display:flex;align-items:center;color:#4b5563;text-decoration:none;flex-shrink:0;transition:color .2s}.breadcrumb-home:hover{color:#111827}.breadcrumb-items{display:flex;align-items:center;gap:.5rem;min-width:0}.breadcrumb-separator{color:#9ca3af;flex-shrink:0}.breadcrumb-current{color:#111827;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media(min-width:640px){.breadcrumb{display:flex}}@media(prefers-color-scheme:dark){.breadcrumb,.breadcrumb-home{color:#9ca3af}.breadcrumb-home:hover,.breadcrumb-current{color:#f9fafb}}.json-to-toon-container{display:flex;flex-direction:column;gap:1.5rem}.converter-layout{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:start}.left-panel,.right-panel{display:flex;flex-direction:column;gap:1.5rem}.input-section,.output-section{display:flex;flex-direction:column;gap:1rem}.input-section .code-editor,.output-section .toon-display{align-self:stretch}.output-section-content{display:flex;flex-direction:column;min-height:770px;box-sizing:border-box;gap:1rem;margin-top:-100;padding-bottom:2rem}.output-section-content .toon-display{flex:0 0 500px;height:500px;max-height:500px;margin-top:-1.5rem;overflow:hidden}.output-section-content .comparison-table{flex-shrink:0;margin-top:4.5rem!important}.input-section>.code-editor-wrapper,.output-section>.toon-display-wrapper{display:flex;flex-direction:column}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;padding-bottom:.75rem;border-bottom:2px solid;border-image:linear-gradient(to right,rgba(102,126,234,.3),transparent) 1}.section-header h3{margin:0;font-size:1.5rem;font-weight:700;letter-spacing:-.02em;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.output-section .section-header{margin-top:.3rem;padding-bottom:1.7rem}.section-note{font-size:.85rem;color:#fff9;margin:0 0 -.5rem;line-height:1.5}.section-note-spacer{height:1.775rem;margin:0 0 .5rem}.actions{display:flex;gap:.5rem}.primary-button{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:2px solid transparent;font-weight:600;padding:.5rem 1rem;border-radius:10px;font-size:.875em;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;position:relative;overflow:hidden}.primary-button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s}.primary-button:hover:before{left:100%}.primary-button:hover{transform:translateY(-2px);background:linear-gradient(135deg,#764ba2,#667eea);box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.primary-button:active{transform:translateY(0)}.empty-state{display:flex;align-items:center;justify-content:center;height:500px;min-height:500px;background:linear-gradient(135deg,#ffffff14,#ffffff0a);border-radius:16px;border:2px dashed rgba(102,126,234,.3);box-sizing:border-box;margin-top:-1.5rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:all .3s ease}.empty-state:hover{border-color:#667eea80;background:linear-gradient(135deg,#667eea1a,#667eea0d)}.empty-state p{font-size:1.125rem;color:#fff9;text-align:center;font-weight:500}@media(max-width:1024px){.converter-layout{grid-template-columns:1fr}}@media(prefers-color-scheme:light){.converter-header p{color:#000000b3}.section-note{color:#0009}.section-header{border-image:linear-gradient(to right,rgba(102,126,234,.4),transparent) 1}.section-header h3{background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.empty-state{background:linear-gradient(135deg,#00000008,#00000003);border-color:#667eea4d}.empty-state:hover{border-color:#667eea80;background:linear-gradient(135deg,#667eea14,#667eea0a)}.empty-state p{color:#0009}.primary-button{background:linear-gradient(135deg,#667eea,#764ba2)}.primary-button:hover{background:linear-gradient(135deg,#764ba2,#667eea)}}.app-layout{display:flex;flex-direction:column;min-height:100vh;background:linear-gradient(180deg,#f8fafc,#fff)}.main-content{flex:1;width:100%}.hero-section{background:linear-gradient(135deg,#667eea,#764ba2,#f093fb,#4facfe,#00f2fe);background-size:400% 400%;animation:gradientShift 15s ease infinite;position:relative;overflow:hidden}.hero-section:before{content:"";position:absolute;inset:0;background:linear-gradient(to bottom right,#ffffff1a,#ffffff0d);pointer-events:none}@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.hero-container{max-width:1280px;margin:0 auto;padding:2.5rem 1.5rem 2rem;position:relative;z-index:1}.hero-content{display:flex;align-items:flex-start;gap:1rem;margin-bottom:1rem}.hero-icon{margin-top:.25rem;flex-shrink:0}.toon-icon-placeholder{width:48px;height:48px;object-fit:contain;background:#fff3;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:12px;box-shadow:0 4px 12px #0000001a;transition:transform .3s ease,box-shadow .3s ease;padding:8px}.toon-icon-placeholder:hover{transform:translateY(-2px) scale(1.05);box-shadow:0 6px 20px #00000026}.hero-text{flex:1}.hero-title{font-size:1.75rem;font-weight:800;letter-spacing:-.03em;margin:0 0 .875rem;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.1);line-height:1.2}.hero-description{max-width:80rem;font-size:1rem;color:#fffffff2;line-height:1.7;margin:0;text-shadow:0 1px 4px rgba(0,0,0,.1)}.content-container{max-width:1280px;margin:0 auto;padding:2.5rem 1.5rem}.content-main{display:flex;flex-direction:column;gap:2rem}.converter-card{position:relative;background:#fff;border-radius:20px;margin-bottom:2rem;border:1px solid rgba(0,0,0,.06);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f,0 0 0 1px #0000000d;overflow:hidden;transition:all .4s cubic-bezier(.4,0,.2,1);padding:2rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.converter-card:hover{transform:translateY(-4px);box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a,0 0 0 1px #0000000d;border-color:#646cff33}.converter-card:before{content:"";position:absolute;inset:0;border-radius:20px;background:linear-gradient(135deg,#667eea,#764ba2,#f093fb);padding:2px;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;pointer-events:none;opacity:0;transition:opacity .4s ease}.converter-card:hover:before{opacity:1}.converter-card>*{position:relative;z-index:1}.toon-info-section{max-width:900px;margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;line-height:1.7;text-align:left;background:#fff;border-radius:16px;padding:2.5rem;box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f;border:1px solid rgba(0,0,0,.06)}.content-sections{display:flex;flex-direction:column;gap:2.5rem}.content-section{margin-bottom:2.5rem}.section-title{font-size:1.75rem;font-weight:700;letter-spacing:-.03em;margin:2.5rem 0 1.25rem;color:#111827;text-align:left;line-height:1.3;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.toon-info-section h1.section-title{font-size:2.25rem;margin-top:0;margin-bottom:1.5rem}.subsection-title{font-size:1.375rem;font-weight:600;margin:2rem 0 1rem;color:#1f2937;text-align:left;letter-spacing:-.02em}.section-divider{border:none;border-top:2px solid;border-image:linear-gradient(to right,transparent,rgba(100,108,255,.3),transparent) 1;margin:3rem 0}.section-content{font-size:1rem;color:#4b5563;line-height:1.8;text-align:left}.content{max-width:900px;margin:0 0 3rem;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;line-height:1.7;text-align:left;background:#fff;border-radius:16px;padding:2.5rem;box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f;border:1px solid rgba(0,0,0,.06)}.content h2{font-size:1.75rem;font-weight:700;letter-spacing:-.03em;margin:0 0 1.25rem;color:#111827;text-align:left;line-height:1.3;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.content p{font-size:1rem;color:#4b5563;line-height:1.8;margin:0 0 1rem}.content ul{margin:1rem 0;padding-left:1.5rem}.content li{margin:.75rem 0;color:#4b5563;line-height:1.7}.content a{color:#667eea;text-decoration:none;transition:color .2s ease}.content a:hover{color:#764ba2;text-decoration:underline}.content strong{font-weight:600;color:#1f2937}text-align: left; } .section-content p{margin:0 0 1.25rem}.section-content ul{margin:0 0 1.5rem;padding-left:1.75rem;list-style:none}.section-content ul li{position:relative;margin-bottom:.75rem;padding-left:1.5rem}.section-content ul li:before{content:"▸";position:absolute;left:0;color:#667eea;font-weight:700}.section-content li{margin-bottom:.75rem}.section-content code{background:linear-gradient(135deg,#f3f4f6,#e5e7eb);padding:.25rem .5rem;border-radius:6px;font-size:.9em;font-family:Monaco,Menlo,Courier New,monospace;color:#1f2937;border:1px solid rgba(0,0,0,.05);font-weight:500}.section-content a{color:#2563eb;text-decoration:none}.section-content a:hover{text-decoration:underline}.code-example{background:#1f2937;color:#f9fafb;padding:1rem;border-radius:.5rem;overflow-x:auto;font-size:.875rem;line-height:1.6;margin:1rem 0}.code-example code{background:transparent;padding:0;color:inherit;font-family:Monaco,Menlo,monospace}@media(min-width:640px){.hero-title{font-size:2.25rem}.hero-description{font-size:1.125rem}.section-title{font-size:2rem}.hero-container{padding:3rem 2rem 2.5rem}.content-container{padding:3rem 2rem}}@media(min-width:1024px){.hero-title{font-size:3rem}.hero-description{font-size:1.25rem}.section-title{font-size:2.25rem}.toon-info-section h1.section-title{font-size:2.75rem}.hero-container{padding:4rem 2rem 3rem}.content-container{padding:4rem 2rem}.converter-card{padding:2.5rem}}@media(prefers-color-scheme:dark){.app-layout{background:linear-gradient(180deg,#0f172a,#1e293b)}.hero-section{background:linear-gradient(135deg,#1e293b,#334155,#475569,#64748b,#94a3b8);background-size:400% 400%}.hero-title{color:#fff}.hero-description{color:#ffffffe6}.converter-card{background:#1e293b;border-color:#ffffff1a;box-shadow:0 4px 6px -1px #0000004d,0 2px 4px -1px #0003}.converter-card:hover{border-color:#646cff66;box-shadow:0 20px 25px -5px #0006,0 10px 10px -5px #0003}.toon-info-section{background:#1e293b;border-color:#ffffff1a}.section-title{background:linear-gradient(135deg,#818cf8,#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.subsection-title{color:#e2e8f0}.section-content{color:#cbd5e1}.section-divider{border-image:linear-gradient(to right,transparent,rgba(148,163,184,.3),transparent) 1}.section-content code{background:linear-gradient(135deg,#334155,#475569);color:#f1f5f9;border-color:#ffffff1a}.code-example{background:#0f172a;border:1px solid rgba(255,255,255,.1)}}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;padding:0;min-width:320px;min-height:100vh;background-color:#fff;color:#111827}@media(prefers-color-scheme:dark){body{background-color:#111827;color:#f9fafb}}h1{font-size:3.2em;line-height:1.1}button{border-radius:10px;border:2px solid transparent;padding:.5em 1em;font-size:.875em;font-weight:600;font-family:inherit;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);margin:8px;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;position:relative;overflow:hidden}button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s}button:hover:before{left:100%}button:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;background:linear-gradient(135deg,#764ba2,#667eea)}button:not(:disabled):active{transform:translateY(0);box-shadow:0 2px 4px -1px #0000001a,0 1px 2px -1px #0000000f}button:disabled{cursor:not-allowed;opacity:.6;background:linear-gradient(135deg,#9ca3af,#6b7280);transform:none}button:focus,button:focus-visible{outline:none;box-shadow:0 0 0 4px #667eea4d,0 4px 6px -1px #0000001a}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#f9f9f9}a:hover{color:#667eea}button{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}button:hover{background:linear-gradient(135deg,#764ba2,#667eea)}}@media(max-width:767px){.hide-on-mobile{display:none}}