@import "https://api.fontshare.com/v2/css?f[]=satoshi@400,500,700&f[]=boska@500,700&display=swap";:root,[data-theme=light]{--text-xs:clamp(.75rem, .7rem + .25vw, .875rem);--text-sm:clamp(.875rem, .8rem + .35vw, 1rem);--text-base:clamp(1rem, .95rem + .25vw, 1.125rem);--text-lg:clamp(1.125rem, 1rem + .75vw, 1.5rem);--text-xl:clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);--text-2xl:clamp(2rem, 1.2rem + 2.5vw, 3.5rem);--text-3xl:clamp(2.5rem, 1rem + 4vw, 5rem);--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;--space-20:5rem;--space-24:6rem;--radius-sm:.5rem;--radius-md:.85rem;--radius-lg:1.25rem;--radius-xl:1.75rem;--radius-full:9999px;--color-bg:#f6f7fb;--color-surface:#ffffffc7;--color-surface-2:#ffffffeb;--color-surface-offset:#ecf0ffe6;--color-border:#4d588224;--color-divider:#4d58821f;--color-text:#10172a;--color-text-muted:#52607a;--color-text-faint:#7d88a1;--color-text-inverse:#f8fbff;--color-primary:#5b5df0;--color-primary-hover:#4547d7;--color-accent:#14b8a6;--color-pink:#ec4899;--color-warning:#f59e0b;--shadow-sm:0 10px 30px #39426714;--shadow-md:0 20px 60px #3942671f;--shadow-lg:0 30px 80px #3942672e;--font-body:"Outfit", system-ui, sans-serif;--font-display:"Outfit", system-ui, sans-serif;--font-mono:"JetBrains Mono", monospace;--hero-grad:radial-gradient(circle at top left, #5b5df047, transparent 28%), radial-gradient(circle at 85% 20%, #14b8a63d, transparent 28%), linear-gradient(135deg, #f7f8ff 0%, #eef4ff 48%, #f5fbff 100%)}[data-theme=dark]{--color-bg:#070b17;--color-surface:#0c1223b8;--color-surface-2:#121a30e6;--color-surface-offset:#1b243fe6;--color-border:#94a3b829;--color-divider:#94a3b81f;--color-text:#edf3ff;--color-text-muted:#b5c0d6;--color-text-faint:#7f8ba8;--color-text-inverse:#09111f;--color-primary:#8b8cff;--color-primary-hover:#a6a7ff;--color-accent:#34d3c5;--color-pink:#ff7bd5;--color-warning:#ffc857;--shadow-sm:0 12px 32px #00000040;--shadow-md:0 20px 60px #00000059;--shadow-lg:0 40px 120px #00000080;--hero-grad:radial-gradient(circle at top left, #8b8cff38, transparent 30%), radial-gradient(circle at 85% 15%, #34d3c529, transparent 30%), linear-gradient(160deg, #070b17 0%, #0b1224 45%, #111b35 100%)}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{background:var(--color-bg);min-height:100dvh;color:var(--color-text);font-family:var(--font-body);font-size:var(--text-base);background-image:radial-gradient(circle at 20% 0,#5b5df024,#0000 20%),radial-gradient(circle at 80% 10%,#14b8a61a,#0000 18%);line-height:1.65}a{color:inherit;text-decoration:none}img,svg{max-width:100%;display:block}button{font:inherit;color:inherit;cursor:pointer;background:0 0;border:none}code,pre{font-family:var(--font-mono)}.skip-link{left:-999px;top:var(--space-4);background:var(--color-primary);color:#fff;padding:var(--space-3) var(--space-4);border-radius:var(--radius-full);z-index:50;position:absolute}.skip-link:focus{left:var(--space-4)}.page-shell{grid-template-columns:300px 1fr;min-height:100dvh;display:grid}aside{height:100dvh;padding:var(--space-6);border-right:1px solid var(--color-divider);background:color-mix(in srgb, var(--color-surface) 84%, transparent);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);position:sticky;top:0}.brand{justify-content:space-between;align-items:center;gap:var(--space-4);margin-bottom:var(--space-8);display:flex}.brand-mark{align-items:center;gap:var(--space-3);display:flex}.logo{background:linear-gradient(135deg, var(--color-primary), var(--color-accent));width:46px;height:46px;box-shadow:var(--shadow-sm);border-radius:14px;place-items:center;display:grid}.brand h1{letter-spacing:-.03em;font-size:1rem;font-weight:700}.brand p{font-size:var(--text-xs);color:var(--color-text-muted)}.theme-toggle{border:1px solid var(--color-border);background:var(--color-surface-2);border-radius:14px;place-items:center;width:44px;height:44px;display:grid}.nav-group{margin-bottom:var(--space-6)}.nav-group p{color:var(--color-text-faint);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.16em;margin-bottom:var(--space-3)}.nav-links{gap:var(--space-2);display:grid}.nav-links a{padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);color:var(--color-text-muted);border:1px solid #0000;transition:all .2s}.nav-links a:hover,.nav-links a.active{color:var(--color-text);background:var(--color-surface-offset);border-color:var(--color-border)}.aside-card{margin-top:var(--space-8);padding:var(--space-5);border-radius:var(--radius-lg);background:linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 14%, var(--color-surface-2)), var(--color-surface));border:1px solid var(--color-border);box-shadow:var(--shadow-sm)}.aside-card h3{font-size:var(--text-sm);margin-bottom:var(--space-2)}.aside-card p{color:var(--color-text-muted);font-size:var(--text-sm)}main{min-width:0}.container{max-width:1200px;padding:var(--space-6);margin:0 auto}.hero{border:1px solid var(--color-border);background:var(--hero-grad);box-shadow:var(--shadow-md);margin-bottom:var(--space-8);border-radius:28px;padding:clamp(1.5rem,3vw,2.75rem);position:relative;overflow:hidden}.hero:after{content:"";filter:blur(20px);background:radial-gradient(circle,#ec489926,#0000 65%);border-radius:50%;width:360px;height:360px;position:absolute;inset:auto -10% -35% auto}.eyebrow,.pill{align-items:center;gap:var(--space-2);border-radius:var(--radius-full);border:1px solid var(--color-border);background:color-mix(in srgb, var(--color-surface-2) 82%, transparent);font-size:var(--text-xs);color:var(--color-text-muted);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:.45rem .9rem;display:inline-flex}.hero-grid{gap:var(--space-8);grid-template-columns:1.2fr .8fr;align-items:center;display:grid}.hero h2{letter-spacing:-.06em;margin:var(--space-4) 0;max-width:10ch;font-size:clamp(2.6rem,4vw,5.6rem);line-height:.95}.hero p{max-width:58ch;color:var(--color-text-muted)}.hero-actions{gap:var(--space-3);margin-top:var(--space-6);flex-wrap:wrap;display:flex}.btn{border-radius:var(--radius-full);align-items:center;gap:var(--space-2);border:1px solid var(--color-border);min-height:48px;padding:.9rem 1.2rem;font-weight:600;display:inline-flex}.btn-primary{background:linear-gradient(135deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 56%, white));color:#fff;border-color:#0000}.btn-secondary{background:color-mix(in srgb, var(--color-surface-2) 92%, transparent)}.hero-panel{padding:var(--space-5);background:color-mix(in srgb, var(--color-surface-2) 86%, transparent);border:1px solid var(--color-border);box-shadow:var(--shadow-sm);border-radius:24px}.waveform{height:150px;margin-top:var(--space-5);grid-template-columns:repeat(24,1fr);align-items:end;gap:4px;display:grid}.waveform span{background:linear-gradient(180deg, var(--color-accent), var(--color-primary));transform-origin:bottom;border-radius:999px;animation:2s ease-in-out infinite pulse}.waveform span:nth-child(odd){animation-duration:1.9s}.waveform span:nth-child(3n){animation-duration:1.2s}@keyframes pulse{0%,to{opacity:.45;transform:scaleY(.4)}50%{opacity:1;transform:scaleY(1)}}.stats{gap:var(--space-4);margin-top:var(--space-6);grid-template-columns:repeat(3,1fr);display:grid}.stat{padding:var(--space-4);border-radius:var(--radius-lg);background:color-mix(in srgb, var(--color-surface) 85%, transparent);border:1px solid var(--color-border)}.stat strong{font-size:var(--text-lg);display:block}.stat span{color:var(--color-text-muted);font-size:var(--text-sm)}section{margin-bottom:var(--space-8)}.section-head{justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-5);align-items:end;display:flex}.section-head h3{letter-spacing:-.04em;font-size:clamp(1.5rem,2vw,2.4rem)}.section-head p{color:var(--color-text-muted);max-width:56ch}.grid-3,.grid-2,.grid-4{gap:var(--space-4);display:grid}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-2{grid-template-columns:repeat(2,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}.card{padding:var(--space-5);background:color-mix(in srgb, var(--color-surface) 88%, transparent);border:1px solid var(--color-border);box-shadow:var(--shadow-sm);border-radius:24px;position:relative;overflow:hidden}.card:before{content:"";background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-primary) 60%, white), transparent);opacity:.5;height:1px;position:absolute;inset:0 0 auto}.icon-chip{width:52px;height:52px;margin-bottom:var(--space-4);background:linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 18%, transparent), color-mix(in srgb, var(--color-accent) 18%, transparent));border:1px solid var(--color-border);border-radius:16px;place-items:center;display:grid}.card h4{font-size:var(--text-lg);margin-bottom:var(--space-2)}.card p{color:var(--color-text-muted);font-size:var(--text-sm)}.code-block{border:1px solid var(--color-border);box-shadow:var(--shadow-md);background:#07101e;border-radius:24px;position:relative;overflow:hidden}.code-head{padding:var(--space-3) var(--space-4);color:#dbe8ff;background:#ffffff0a;border-bottom:1px solid #ffffff14;justify-content:space-between;align-items:center;display:flex}pre{padding:var(--space-5);color:#d3e1ff;font-size:.92rem;overflow:auto}.tokens .card{min-height:100%}table{border-collapse:collapse;background:color-mix(in srgb, var(--color-surface) 88%, transparent);border:1px solid var(--color-border);border-radius:20px;width:100%;overflow:hidden}th,td{text-align:left;border-bottom:1px solid var(--color-divider);vertical-align:top;padding:1rem 1.1rem}th{color:var(--color-text-muted);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.12em;background:color-mix(in srgb, var(--color-surface-offset) 75%, transparent)}td code{color:var(--color-primary-hover)}tr:last-child td{border-bottom:none}.timeline{gap:var(--space-4);display:grid}.step{gap:var(--space-4);grid-template-columns:auto 1fr;align-items:start;display:grid}.step-badge{background:linear-gradient(135deg, var(--color-primary), var(--color-pink));color:#fff;width:42px;height:42px;box-shadow:var(--shadow-sm);border-radius:14px;place-items:center;font-weight:700;display:grid}.showcase{gap:var(--space-4);grid-template-columns:1.15fr .85fr;align-items:stretch;display:grid}.demo-frame{border:1px solid var(--color-border);background:color-mix(in srgb, var(--color-surface-2) 92%, transparent);box-shadow:var(--shadow-md);border-radius:24px;overflow:hidden}.demo-browser{border-bottom:1px solid var(--color-divider);color:var(--color-text-muted);font-size:var(--text-xs);align-items:center;gap:8px;padding:.9rem 1rem;display:flex}.dot{background:#ff5f57;border-radius:50%;width:10px;height:10px;box-shadow:18px 0 #febc2e,36px 0 #28c840}.demo-content{padding:var(--space-6);gap:var(--space-4);display:grid}.mini-recorder{padding:var(--space-5);background:linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 8%, transparent), color-mix(in srgb, var(--color-surface-offset) 88%, transparent));border:1px solid var(--color-border);border-radius:22px}.record-ui{justify-content:space-between;align-items:center;gap:var(--space-4);display:flex}.record-btn{color:#fff;background:linear-gradient(135deg,#ff628d,#ff8a65);border-radius:50%;place-items:center;width:84px;height:84px;display:grid;box-shadow:0 18px 40px #ff63844d}.bar-group{grid-template-columns:repeat(18,1fr);align-items:end;gap:4px;height:84px;display:grid}.bar-group span{background:linear-gradient(180deg, var(--color-accent), var(--color-primary));border-radius:999px}.info-list{gap:var(--space-3);display:grid}.info-item{justify-content:space-between;gap:var(--space-3);background:color-mix(in srgb, var(--color-surface) 86%, transparent);border:1px solid var(--color-border);border-radius:16px;padding:.85rem 1rem;display:flex}.info-item span{color:var(--color-text-muted)}.compat .card{text-align:center}.compat strong{font-size:var(--text-xl);margin-bottom:.25rem;display:block}.footer-card{justify-content:space-between;align-items:center;gap:var(--space-4);flex-wrap:wrap;display:flex}.tag-row{gap:var(--space-2);margin-top:var(--space-4);flex-wrap:wrap;display:flex}.tag{border-radius:var(--radius-full);background:color-mix(in srgb, var(--color-surface-offset) 85%, transparent);border:1px solid var(--color-border);color:var(--color-text-muted);font-size:var(--text-xs);padding:.45rem .8rem}@media (width<=1100px){.page-shell{grid-template-columns:1fr}aside{border-right:none;border-bottom:1px solid var(--color-divider);height:auto;position:relative}.hero-grid,.showcase,.grid-3,.grid-4,.grid-2,.stats{grid-template-columns:1fr 1fr}}@media (width<=720px){.container,aside{padding:var(--space-4)}.hero-grid,.showcase,.grid-3,.grid-4,.grid-2,.stats{grid-template-columns:1fr}.hero h2{max-width:100%}.section-head,.footer-card,.record-ui{display:block}.record-ui>*+*{margin-top:var(--space-4)}th,td{padding:.8rem;font-size:.92rem}.nav-links{grid-template-columns:repeat(2,minmax(0,1fr))}}.nav-links a.active{color:var(--color-primary);background:var(--color-surface-offset);border-color:var(--color-border);font-weight:600}body{transition:background-color .4s,color .4s}.btn i,.pill i,.eyebrow i{align-self:center;display:inline-flex}.table-container{width:100%;margin-top:var(--space-5);border-radius:20px;overflow-x:auto}.copy-btn-inline{color:var(--color-text-faint);background:#ffffff0d;border:1px solid #ffffff1a;border-radius:8px;justify-content:center;align-items:center;padding:6px;transition:all .2s;display:flex}.table-container{border-radius:var(--radius-lg);border:1px solid var(--color-border);background:var(--color-surface);width:100%;overflow-x:auto}.compat.grid-4{margin-top:var(--space-4)}.compat .card{text-align:center;padding:var(--space-6);flex-direction:column;align-items:center;transition:transform .3s;display:flex}.compat .card:hover{border-color:var(--color-primary);transform:translateY(-5px)}.compat strong{margin-top:var(--space-2);font-size:var(--text-base);color:var(--color-text)}.compat p{font-size:var(--text-sm);color:var(--color-accent);font-weight:700}.demo-browser{background:color-mix(in srgb, var(--color-surface-offset) 50%, transparent);font-family:var(--font-mono);letter-spacing:-.02em}.text-accent{color:var(--color-accent)}.playback-theme{background:linear-gradient(#5b5df01a 0%,#14b8a60d 100%)!important;border-color:#5b5df033!important}.play-active{cursor:pointer;transition:transform .2s;background:linear-gradient(135deg, var(--color-primary), var(--color-accent))!important;box-shadow:0 10px 20px #5b5df04d!important}.play-active:hover{transform:scale(1.05)}.flex-between{justify-content:space-between;align-items:center;margin-bottom:8px;display:flex}.time-display{font-family:var(--font-mono);color:var(--color-text-faint);font-size:.75rem}.playback-timeline{background:var(--color-border);border-radius:10px;width:100%;height:6px;margin:10px 0;position:relative}.playback-progress{background:var(--color-primary);border-radius:10px;height:100%;position:relative}.playback-knob{border:2px solid var(--color-primary);background:#fff;border-radius:50%;width:12px;height:12px;position:absolute;top:50%;right:-5px;transform:translateY(-50%);box-shadow:0 2px 4px #0003}.bar-group.mini{opacity:.6;margin-top:10px;height:30px!important}.bar-group.mini span{background:var(--color-text-faint);width:3px!important}.status-theme{background:#ff478508!important;border-color:#ff478533!important}.status-indicator-container{place-items:center;width:60px;height:60px;display:grid;position:relative}.live-dot-main{z-index:2;background:#ff4757;border-radius:50%;width:16px;height:16px;box-shadow:0 0 15px #ff4757}.live-ring{opacity:0;border:2px solid #ff4757;border-radius:50%;width:100%;height:100%;animation:1.5s ease-out infinite ripple;position:absolute}@keyframes ripple{0%{opacity:.8;transform:scale(.3)}to{opacity:0;transform:scale(1.2)}}.status-label{letter-spacing:.1em;color:var(--color-text-faint);font-size:.65rem;font-weight:800}.live-timer{font-family:var(--font-mono);color:#ff4757;font-size:.8rem;font-weight:700}.status-display-box{align-items:center;gap:10px;margin:4px 0 12px;display:flex}.status-text-bold{letter-spacing:-.02em;color:var(--color-text);font-size:1.1rem;font-weight:800}.activity-monitor{height:40px!important}.activity-bar{animation:.6s ease-in-out infinite alternate jump;background:linear-gradient(#ff7b8b,#ff4757)!important}@keyframes jump{0%{transform:scaleY(.8)}to{transform:scaleY(1.3)}}.audio-activity-dots{gap:4px;display:flex}.activity-dot{background:#ff4757;border-radius:50%;width:4px;height:4px;animation:1s infinite blink}.activity-dot:nth-child(2){animation-delay:.2s}.activity-dot:nth-child(3){animation-delay:.4s}@keyframes blink{0%,to{opacity:.3}50%{opacity:1}}.modern-code-container{--code-bg:#0d1117;--code-border:#ffffff14;--code-text:#e6edf3;--code-accent:#79c0ff;--code-component:#d2a8ff;--code-prop:#ffa657;background:var(--code-bg);border:1px solid var(--code-border);border-radius:16px;transition:border-color .3s;overflow:hidden;box-shadow:0 10px 30px #0003}.modern-code-container:hover{border-color:#5b5df066}.code-header{border-bottom:1px solid var(--code-border);background:#ffffff08;justify-content:space-between;align-items:center;padding:12px 16px;display:flex}.code-file-info{font-family:var(--font-mono);color:var(--color-text-muted);align-items:center;gap:8px;font-size:.75rem;display:flex}.copy-btn-inline{color:var(--color-text-faint);background:0 0;border-radius:6px;align-items:center;gap:6px;padding:6px 10px;font-size:.75rem;transition:all .2s;display:flex}.copy-btn-inline:hover{color:var(--code-text);background:#ffffff14}.code-content pre{margin:0;padding:20px;line-height:1.6;overflow-x:auto}.code-content code{color:var(--code-text);white-space:pre;font-family:JetBrains Mono,monospace;font-size:.9rem}.code-content{color:var(--code-text)}.code-content code{text-shadow:0 0 1px #00000080;display:block}.value-prop-section{padding:var(--space-20) 0}.section-head-center{text-align:center;max-width:700px;margin:0 auto var(--space-12)}.bento-grid{gap:var(--space-6);margin-bottom:var(--space-12);grid-template-rows:auto auto;grid-template-columns:1.5fr 1fr;display:grid}.bento-card{background:var(--color-surface);border:1px solid var(--color-border);padding:var(--space-8);gap:var(--space-4);border-radius:28px;flex-direction:column;display:flex}.bento-card.featured{grid-row:span 2}.bento-icon-box{border-radius:12px;place-items:center;width:48px;height:48px;display:grid}.bento-icon-box.blue{color:#3b82f6;background:#3b82f61a}.bento-icon-box.green{color:#2dd4bf;background:#2dd4bf1a}.bento-icon-box.orange{color:#f59e0b;background:#f59e0b1a}.compression-viz{flex-direction:column;gap:12px;margin-top:auto;padding-top:20px;display:flex}.viz-row span{color:var(--color-text-muted);font-size:.75rem}.viz-bar{border-radius:6px;height:24px;margin-top:4px;position:relative}.viz-bar.full{background:var(--color-border);width:90%}.viz-bar.optimized{background:var(--color-primary);width:18%}.viz-bar small{font-size:10px;position:absolute;top:2px;right:-50px}.comparison-wrapper{background:var(--color-surface-offset);border:1px solid var(--color-border);border-radius:24px;overflow:hidden}.modern-table{border-collapse:collapse;width:100%}.modern-table th,.modern-table td{text-align:left;border-bottom:1px solid var(--color-border);padding:20px 24px}.highlight-col{background:color-mix(in srgb, var(--color-primary) 5%, transparent);color:var(--color-primary);font-weight:700}.modern-table tr td:last-child{background:color-mix(in srgb, var(--color-primary) 5%, transparent)}@media (width<=800px){.bento-grid{grid-template-columns:1fr}.bento-card.featured{grid-row:span 1}}.comparison-section{padding:var(--space-16) 0}.table-overflow-wrapper{border:1px solid var(--color-border);background:var(--color-surface);box-shadow:var(--shadow-md);border-radius:24px;overflow-x:auto}.comparison-table{border-collapse:collapse;table-layout:fixed;width:100%;min-width:800px}.comparison-table th,.comparison-table td{padding:var(--space-5) var(--space-6);text-align:center;border-bottom:1px solid var(--color-divider)}.feature-col{width:250px;text-align:left!important}.feature-label{text-align:left;color:var(--color-text);align-items:center;gap:8px;font-weight:600;display:flex}.info-icon{color:var(--color-text-faint);opacity:.5}.yours-col{background:color-mix(in srgb, var(--color-primary) 8%, transparent);position:relative}.yours-cell{background:color-mix(in srgb, var(--color-primary) 5%, transparent)}.brand-badge{background:var(--color-primary);color:#fff;border-radius:99px;align-items:center;gap:6px;padding:6px 12px;font-size:.8rem;font-weight:700;display:inline-flex}.status-icon{border-radius:50%;place-items:center;width:25px;height:25px;display:inline-grid}.status-icon.success{color:#14b8a6;background:#2dd4bf26}.status-icon.fail{color:var(--color-text-faint);opacity:.4;background:#ffffff0d}.yours-cell .status-icon.success{background:var(--color-primary);color:#fff;box-shadow:0 4px 12px #5b5df04d}.comparison-footer{margin-top:var(--space-4);text-align:right}.comparison-footer p{color:var(--color-text-faint);font-size:.75rem;font-style:italic}.comparison-table tr:hover td{background:#ffffff05}.comparison-table tr:hover td.yours-cell{background:color-mix(in srgb, var(--color-primary) 10%, transparent)}:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}html,body,#root{min-height:100%;margin:0}