*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.6;color:#333;background-color:#f5f5f5}.container{max-width:1200px;margin:0 auto;padding:20px}header{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:2rem 0;text-align:center;margin-bottom:2rem;border-radius:10px}h1{font-size:2.5rem;margin-bottom:.5rem}.subtitle{font-size:1.2rem;opacity:.9}.demo-section{background:#fff;margin:2rem 0;padding:2rem;border-radius:10px;box-shadow:0 2px 10px #0000001a}.demo-section h2{color:#667eea;margin-bottom:1rem;font-size:1.8rem}.demo-section h3{color:#555;margin:1.5rem 0 .5rem;font-size:1.3rem}.input-group{margin:1rem 0}label{display:block;margin-bottom:.5rem;font-weight:600;color:#555}textarea,input{width:100%;padding:.75rem;border:2px solid #e1e5e9;border-radius:5px;font-family:Courier New,monospace;font-size:.9rem;transition:border-color .3s}textarea{min-height:120px;resize:vertical}textarea:focus,input:focus{outline:none;border-color:#667eea}.results{background:#f8f9fa;border:1px solid #e9ecef;border-radius:5px;padding:1rem;margin-top:1rem;font-family:Courier New,monospace;white-space:pre-wrap}.results.json{color:#d63384}.results.text{color:#198754}.results.number{color:#0d6efd;font-size:1.1rem;font-weight:700}.button-group{display:flex;gap:1rem;margin:1rem 0;flex-wrap:wrap}button{background:#667eea;color:#fff;border:none;padding:.75rem 1.5rem;border-radius:5px;cursor:pointer;font-size:.9rem;transition:background-color .3s}button:hover{background:#5a6fd8}button:active{transform:translateY(1px)}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1rem;margin:1rem 0}.card{background:#f8f9fa;border:1px solid #e9ecef;border-radius:5px;padding:1rem}.card h4{color:#667eea;margin-bottom:.5rem}.highlight{background:#fff3cd;border:1px solid #ffeaa7;border-radius:3px;padding:.2rem .4rem;font-family:Courier New,monospace;font-size:.85rem}.results.html{color:#333;line-height:1.6}.results.html a{color:#667eea;text-decoration:none}.results.html a:hover{text-decoration:underline}.results.html img{max-width:100%;height:auto;border-radius:4px}.results.html pre{background:#f8f9fa;border:1px solid #e9ecef;border-radius:4px;padding:1rem;overflow-x:auto}.results.html code{background:#f8f9fa;padding:.2rem .4rem;border-radius:3px;font-family:Courier New,monospace}.results.html ul{margin:.5rem 0;padding-left:2rem}.results.html li{margin:.25rem 0}.badge{display:inline-block;background:#667eea;color:#fff;padding:.2rem .6rem;border-radius:12px;font-size:.8rem;margin-right:.5rem}.tab-container{margin:1rem 0}.tab-buttons{display:flex;border-bottom:2px solid #e9ecef;margin-bottom:1rem}.tab-button{background:none;border:none;padding:.75rem 1.5rem;cursor:pointer;border-bottom:2px solid transparent;transition:all .3s;color:#666}.tab-button.active{color:#667eea;border-bottom-color:#667eea;background:#f8f9fa}.tab-content{display:none}.tab-content.active{display:block}@media (max-width: 768px){.container{padding:10px}h1{font-size:2rem}.demo-section{padding:1rem}.button-group{flex-direction:column}}