html,body{margin:0;padding:0}.app{min-height:100vh;background:linear-gradient(135deg,#667eea,#764ba2);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.app-header{text-align:center;padding:2rem 1rem;color:#fff}.app-header h1{margin:0 0 .5rem;font-size:2.5rem;font-weight:700}.app-header p{margin:0;font-size:1.1rem;opacity:.9}.tabs{display:flex;justify-content:center;gap:.5rem;padding:1rem;background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.2);overflow-x:auto}.tab{padding:.75rem 1.5rem;border:none;border-radius:8px;background:#fff3;color:#fff;font-weight:500;cursor:pointer;transition:all .3s ease;white-space:nowrap}.tab:hover{background:#ffffff4d;transform:translateY(-2px)}.tab.active{background:#fff;color:#667eea;box-shadow:0 4px 12px #00000026}.content{max-width:1200px;margin:0 auto;padding:2rem 1rem}.example{display:none;background:#fff;border-radius:12px;padding:2rem;margin-bottom:2rem;box-shadow:0 8px 32px #0000001a}.example.active{display:block}.example h2{margin:0 0 1rem;color:#333;font-size:1.5rem}.example p{margin:0 0 1.5rem;color:#666;line-height:1.6}.chart-container{margin:2rem 0;padding:1rem;background:#f8f9fa;border-radius:8px;border:1px solid #e9ecef}.demo-mermaid{background:#fff;padding:1rem;border-radius:8px;box-shadow:0 2px 8px #0000001a}.code-details{margin-top:1rem}.code-details summary{cursor:pointer;padding:.5rem;background:#f8f9fa;border-radius:4px;font-weight:500;color:#495057}.code-details summary:hover{background:#e9ecef}.code-block{margin:.5rem 0 0;padding:1rem;background:#f8f9fa;border-radius:4px;font-family:Courier New,monospace;font-size:.875rem;overflow-x:auto;border:1px solid #e9ecef}.code-block code{color:#333}.app-footer{text-align:center;padding:2rem 1rem;color:#fff;opacity:.8}.app-footer a{color:#fff;text-decoration:none;font-weight:500}.app-footer a:hover{text-decoration:underline}.markdown-example{background:#fff;border-radius:8px;padding:2rem;margin:2rem 0;box-shadow:0 4px 16px #0000001a}.markdown-container{max-width:100%;line-height:1.6;color:#333}.markdown-container h1{color:#2c3e50;border-bottom:2px solid #3498db;padding-bottom:.5rem;margin-bottom:1.5rem}.markdown-container h2{color:#34495e;margin-top:2rem;margin-bottom:1rem;border-left:4px solid #3498db;padding-left:1rem}.markdown-container h3{color:#2c3e50;margin-top:1.5rem;margin-bottom:.5rem}.markdown-container p{margin-bottom:1rem;line-height:1.7}.markdown-container ul,.markdown-container ol{margin-bottom:1rem;padding-left:2rem}.markdown-container li{margin-bottom:.5rem}.markdown-container blockquote{border-left:4px solid #3498db;padding-left:1rem;margin:1rem 0;color:#7f8c8d;font-style:italic}.markdown-container code{background:#f8f9fa;padding:.2rem .4rem;border-radius:3px;font-family:Courier New,monospace;font-size:.875rem}.markdown-container pre{background:#f8f9fa;padding:1rem;border-radius:6px;overflow-x:auto;margin:1rem 0;border:1px solid #e9ecef}.markdown-container pre code{background:none;padding:0;border-radius:0}.markdown-container table{width:100%;border-collapse:collapse;margin:1rem 0}.markdown-container th,.markdown-container td{border:1px solid #ddd;padding:.75rem;text-align:left}.markdown-container th{background:#f8f9fa;font-weight:600}.markdown-container tr:nth-child(2n){background:#f8f9fa}@media (max-width: 768px){.app-header h1{font-size:2rem}.tabs{padding:.5rem}.tab{padding:.5rem 1rem;font-size:.875rem}.content{padding:1rem .5rem}.example,.markdown-example{padding:1rem}.markdown-container h1{font-size:1.5rem}.markdown-container h2{font-size:1.25rem}}