.demo-head{padding:3.5rem 0 1.75rem;border-bottom:1px solid var(--af-border);background:radial-gradient(1200px 340px at 12% -20%,rgba(56,189,248,.1),transparent 62%),radial-gradient(900px 300px at 88% -10%,rgba(16,185,129,.08),transparent 60%)}.demo-head .wrap{display:flex;flex-wrap:wrap;gap:1.5rem 2rem;align-items:flex-end;justify-content:space-between}.demo-head h1{font-family:var(--font-head);font-size:clamp(1.75rem,3.4vw,2.5rem);line-height:1.15;letter-spacing:-.01em}.demo-head .eyebrow{margin:0 0 .55rem;font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--af-accent)}.demo-head .lead{margin:.7rem 0 0;max-width:46ch;color:var(--af-muted)}.demo-bar{position:sticky;top:0;z-index:5;padding:.8rem 0;border-bottom:1px solid var(--af-border);background:#06080fdb;backdrop-filter:blur(10px)}.demo-bar-in{display:flex;flex-wrap:wrap;gap:.75rem 1.25rem;align-items:center}.demo-group{display:flex;align-items:center;gap:.4rem}.demo-group>.k{margin-right:.2rem;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--af-muted)}.demo-chip{padding:.32rem .7rem;border:1px solid var(--af-border-soft);border-radius:999px;background:var(--af-panel);color:var(--af-text);font-family:var(--font-mono);font-size:.8rem;line-height:1.4;cursor:pointer;transition:border-color var(--tn),color var(--tn),background var(--tn)}.demo-chip:hover{border-color:var(--af-border-strong);color:var(--af-text-strong)}.demo-chip[aria-pressed=true]{border-color:var(--af-accent);background:#38bdf81f;color:var(--af-text-strong)}.demo-select{padding:.34rem .6rem;border:1px solid var(--af-border-soft);border-radius:.55rem;background:var(--af-panel);color:var(--af-text);font-family:var(--font-mono);font-size:.82rem}.demo-spacer{flex:1 1 auto}.demo-metrics{display:flex;flex-wrap:wrap;gap:.4rem .5rem;align-items:center}.demo-status{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--font-mono);font-size:.78rem;color:var(--af-muted)}.demo-dot{width:.5rem;height:.5rem;border-radius:999px;background:var(--af-muted);box-shadow:0 0 0 3px #94a3b824}.demo-dot[data-state=open]{background:var(--af-success);box-shadow:0 0 0 3px #10b9812e}.demo-dot[data-state=connecting],.demo-dot[data-state=reconnecting]{background:var(--af-warning);box-shadow:0 0 0 3px #f59e0b2e}.demo-dot[data-state=closed]{background:var(--af-danger);box-shadow:0 0 0 3px #ef44442e}.demo-stage{padding:1.25rem 0 3rem}.demo-grid{display:grid;grid-template-columns:minmax(0,1fr) 20rem;gap:1rem;align-items:stretch}@media(max-width:60rem){.demo-grid{grid-template-columns:minmax(0,1fr)}}.demo-panel{border:1px solid var(--af-border);border-radius:var(--radius);background:var(--af-panel);box-shadow:var(--af-shadow-card);overflow:hidden}.demo-chart{position:relative;min-height:30rem;height:clamp(30rem,62vh,44rem)}.demo-chart>div{position:absolute;inset:0}.demo-overlay{position:absolute;inset:0;display:grid;place-items:center;padding:2rem;text-align:center;background:var(--af-panel);color:var(--af-muted);font-family:var(--font-mono);font-size:.85rem;z-index:2}.demo-overlay[hidden]{display:none}.demo-overlay strong{display:block;margin-bottom:.5rem;color:var(--af-text-strong)}.demo-overlay code{display:inline-block;margin-top:.6rem;padding:.35rem .55rem;border:1px solid var(--af-border-soft);border-radius:.4rem;background:var(--af-bg-soft);font-size:.78rem;color:var(--af-text)}.demo-quotes{display:flex;flex-direction:column;min-height:0}.demo-quotes-head{display:flex;align-items:baseline;justify-content:space-between;padding:.85rem 1rem;border-bottom:1px solid var(--af-border)}.demo-quotes-head h2{font-family:var(--font-head);font-size:.95rem;letter-spacing:.02em}.demo-quotes-head span{font-family:var(--font-mono);font-size:.72rem;color:var(--af-muted)}.demo-quote-rows{overflow-y:auto}.demo-quote{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:.5rem;align-items:baseline;width:100%;margin:0;padding:.5rem 1rem;border:0;border-bottom:1px solid rgba(31,41,55,.6);border-radius:0;background:transparent;color:inherit;font-family:var(--font-mono);font-size:.82rem;text-align:left;cursor:pointer;appearance:none;transition:background var(--tn)}.demo-quote:focus-visible{outline:2px solid var(--af-accent);outline-offset:-2px}.demo-quote:hover{background:var(--af-panel-elevated)}.demo-quote[aria-current=true]{background:#38bdf817}.demo-quote .sym{min-width:6.5ch;overflow:hidden;color:var(--af-text-strong);text-overflow:ellipsis;white-space:nowrap}.demo-quote .bid,.demo-quote .ask{min-width:7ch;font-variant-numeric:tabular-nums;text-align:right;transition:color .42s ease-out}.demo-quote .bid{color:var(--af-text)}.demo-quote .ask{color:var(--af-muted)}.demo-quote .up{color:var(--af-success)}.demo-quote .down{color:var(--af-danger)}.demo-empty{padding:1.5rem 1rem;color:var(--af-muted);font-family:var(--font-mono);font-size:.8rem;text-align:center}.demo-notes{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1rem;margin-top:1.25rem}.demo-note{padding:1rem 1.1rem;border:1px solid var(--af-border);border-radius:var(--radius);background:var(--af-bg-soft)}.demo-note h3{margin-bottom:.35rem;font-family:var(--font-head);font-size:.95rem}.demo-note p{margin:0;color:var(--af-muted);font-size:.87rem;line-height:1.6}.demo-note a{color:var(--af-accent)}@media(max-width:48rem){.demo-head{padding:1.75rem 0 1.25rem}.demo-head .wrap{gap:1rem;align-items:stretch}.demo-head h1{font-size:1.6rem}.demo-head .lead{max-width:none;font-size:.92rem}.demo-head .btn{display:none}.demo-bar{padding:.55rem 0}.demo-bar-in{flex-wrap:nowrap;gap:.5rem;align-items:center}.demo-group>.k{display:none}.demo-select{flex:0 0 auto;max-width:7.25rem;padding:.3rem .4rem}#demo-resolutions{flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}#demo-resolutions::-webkit-scrollbar{display:none}.demo-group{gap:.3rem}.demo-chip{flex:0 0 auto;padding:.3rem .5rem;font-size:.76rem}.demo-spacer{display:none}.demo-metrics{flex:0 0 auto}#demo-status-text{display:none}.demo-stage{padding:.75rem 0 2rem}.demo-chart{min-height:0;height:min(62dvh,30rem)}.demo-quote{padding:.5rem .75rem;font-size:.78rem}.demo-quotes-head{padding:.7rem .75rem}.demo-notes{margin-top:1rem}}@media(max-width:22.5rem){.demo-select{max-width:7rem}}.demo-cta{display:none}@media(max-width:48rem){.demo-cta{display:block;margin-top:1.25rem;text-align:center}.demo-cta .btn{display:block;width:100%}}#tv-attr-logo{position:absolute;left:10px;bottom:10px;z-index:3;opacity:.55;transition:opacity var(--tn) ease}#tv-attr-logo:hover{opacity:1}