.demo-section{padding-block:var(--section-y,4rem) 0;border-top:var(--border);margin-top:var(--section-y,4rem)}.demo-section:first-of-type{border-top:0}.demo-label,.demo-section .demo-label{display:inline-flex;align-items:center;gap:var(--s-2);margin:0 0 var(--s-3);padding:.15rem .5rem;border:1px solid var(--warn);color:var(--warn);font:700 var(--fs-xs) var(--font-mono);letter-spacing:.06em;text-transform:uppercase}.demo{position:relative;margin:var(--s-5) 0 0;padding:var(--s-5);border:var(--border);border-top:2px solid var(--accent);background:var(--surface);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:24px 24px}
@media (scripting:enabled){.demo[data-demo="mobile-app"]{min-height:44rem}.demo[data-demo="dashboard"]{min-height:30rem}.demo[data-demo="score"]{min-height:7rem}@media (min-width:48rem){.demo[data-demo="dashboard"]{min-height:29rem}}}
.demo noscript p,.demo > noscript > p{margin:0;color:var(--muted)}.demo__static{max-width:22rem;margin:0 auto;padding:var(--s-5);border:2px solid var(--line-strong);border-radius:1.75rem;background:var(--bg)}.demo__static .label{text-align:center}.demo__list{list-style:none;margin:var(--s-3) 0 0;padding:0;display:grid;gap:var(--s-2)}.demo__list li{padding:var(--s-3);border:var(--border);background:var(--surface);font-size:var(--fs-sm)}

.demo-app{display:grid;gap:var(--s-5);justify-items:center}.demo-app__skins{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:var(--s-2);align-items:center;justify-content:center}.demo-app__skins legend{float:left;margin-right:var(--s-3);font:700 var(--fs-xs) var(--font-mono);color:var(--muted);text-transform:uppercase;letter-spacing:.06em;line-height:44px;padding:0}.demo-app__skin{position:relative;display:inline-flex;align-items:center;gap:var(--s-2);min-height:44px;padding:0 var(--s-4);border:1px solid var(--line-strong);background:var(--bg);font:var(--fs-sm) var(--font-mono);cursor:pointer}.demo-app__skin input{accent-color:var(--accent);width:1rem;height:1rem;margin:0}.demo-app__skin:has(input:checked){border-color:var(--accent);box-shadow:inset 0 -2px 0 var(--accent);font-weight:700}.demo-app__skin:has(input:focus-visible){outline:var(--focus);outline-offset:2px}.phone{--ph-r:2.25rem;--ph-bezel:.6rem;width:min(20rem,100%);aspect-ratio:9/18.5;display:flex;flex-direction:column;overflow:hidden;border:var(--ph-bezel) solid #11161d;outline:1px solid var(--line-strong);border-radius:var(--ph-r);background:var(--bg);color:var(--fg);box-shadow:0 1.5rem 3rem rgba(0,0,0,.35)}.phone::before{content:"";flex:none;align-self:center;margin:.5rem 0 .25rem;width:5.5rem;height:1.25rem;border-radius:1rem;background:#11161d}.phone--android{--ph-r:1.5rem}.phone--android::before{width:.75rem;height:.75rem;border-radius:50%}.phone__screen{flex:1;min-height:0;overflow-y:auto;padding:var(--s-3) var(--s-4) var(--s-4);display:flex;flex-direction:column;gap:var(--s-3)}.phone__screen h3{margin:0 0 var(--s-1);font-size:var(--fs-lg)}.phone--ios .phone__screen h3{font-family:var(--font-body);font-weight:700;font-size:1.75rem;letter-spacing:-.01em}.phone__card{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-1);width:100%;min-height:44px;padding:var(--s-3) var(--s-4);text-align:left;cursor:pointer;background:var(--surface);color:var(--fg);border:1px solid var(--line);border-left:3px solid var(--accent);font:inherit}.phone--ios .phone__card{border-radius:.875rem;border-left-width:1px}.phone--android .phone__card{border-radius:.5rem}.phone__card strong{font:700 var(--fs-xs) var(--font-mono);color:var(--muted);text-transform:uppercase;letter-spacing:.06em}.phone__card span{font:700 var(--fs-md)/1.3 var(--font-body);color:var(--fg)}.phone__card:hover{border-color:var(--line-strong);border-left-color:var(--accent)}.phone__card:focus-visible{outline:var(--focus);outline-offset:2px}.phone__list{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-2)}.phone__list li{display:flex;justify-content:space-between;gap:var(--s-3);padding:var(--s-3);border-bottom:var(--border);font-size:var(--fs-sm)}.phone__tabs{flex:none;display:grid;grid-template-columns:repeat(4,1fr);border-top:var(--border);background:var(--surface)}.phone__tab{min-height:52px;padding:var(--s-1);background:transparent;border:0;color:var(--muted);font:var(--fs-xs) var(--font-mono);cursor:pointer;border-top:2px solid transparent}.phone__tab[aria-current="page"]{color:var(--accent);border-top-color:var(--accent);font-weight:700}.phone__tab:focus-visible{outline:var(--focus);outline-offset:-3px}.phone--ios .phone__tab{border-top:0}.phone--ios .phone__tab[aria-current="page"]{border-top:0;text-decoration:underline;text-underline-offset:.3em}

.demo-dash{display:grid;gap:var(--s-4)}.demo-dash:focus-visible{outline:var(--focus);outline-offset:4px}.demo-dash__filters{display:grid;gap:var(--s-4);grid-template-columns:1fr}@media (min-width:36rem){.demo-dash__filters{grid-template-columns:1fr 1fr}}.demo-dash__filters select{width:100%;min-height:44px;padding:0 var(--s-3);background:var(--bg);color:var(--fg);border:1px solid var(--line-strong);font:var(--fs-sm) var(--font-mono)}.demo-dash__tabs{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--line-strong);width:max-content;max-width:100%}.demo-dash__tabs .btn{min-height:40px;border:0;border-right:1px solid var(--line-strong);background:transparent;color:var(--muted)}.demo-dash__tabs .btn:last-child{border-right:0}.demo-dash__tabs .btn[aria-pressed="true"]{background:var(--accent);color:var(--accent-fg)}.demo-dash__stage{margin:0;padding:var(--s-4);border:var(--border);background:var(--bg);min-height:16rem}.demo-dash__stage figcaption{margin-top:var(--s-2)}.demo-dash__help{padding:var(--s-3) var(--s-4);border:var(--border);border-left:3px solid var(--accent);background:var(--bg);font-size:var(--fs-sm)}.demo-dash__help[hidden]{display:none}.demo-chart{display:block;width:100%;height:auto}.demo-chart__axis{stroke:var(--line-strong);stroke-width:1}.demo-chart__line{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}.demo-chart__area{fill:var(--accent-soft);stroke:var(--accent);stroke-width:2}.demo-chart__bar{fill:var(--accent)}.demo-chart text{fill:var(--muted);font:11px var(--font-mono)}.demo-dash .table-wrap{overflow-x:auto}@media (forced-colors:active){.demo-chart__line,.demo-chart__area{stroke:CanvasText}.demo-chart__bar{fill:CanvasText}.demo-dash__tabs .btn[aria-pressed="true"]{forced-color-adjust:none;background:Highlight;color:HighlightText}}

.demo-score{display:grid;gap:var(--s-4);justify-items:start}.demo-score > [aria-live]:empty{display:none}.demo-score table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}.demo-score th,.demo-score td{border:var(--border);padding:var(--s-2) var(--s-3);text-align:left}.demo-score th{font-family:var(--font-mono);background:var(--surface-2)}.demo-score .table-wrap{width:100%;overflow-x:auto}
.demo{padding:var(--s-5) var(--s-4)}.demo-app .phone{aspect-ratio:auto;height:auto;max-height:none}.phone__screen{flex:none;overflow:visible}@media (scripting:enabled){.demo[data-demo="mobile-app"]{min-height:0}}.demo[data-demo="score"]{display:grid;place-items:center;border-top:2px solid var(--accent)}.demo[data-demo="score"] .demo-score{width:min(36rem,100%)}