.demo{--demo-bg: #171717;--demo-panel: #1f1f1f;--demo-border: #2a2a2a;--demo-border-soft: #333;--demo-text: #d4d4d4;--demo-strong: #e5e5e5;--demo-muted: #737373;--demo-dim: #555;--demo-accent: #60a5fa;--demo-mono: "Hack", ui-monospace, Menlo, monospace;margin:1.75rem 0;padding:1.25rem 1.375rem 1rem;border:1px solid var(--demo-border);border-radius:10px;background:var(--demo-panel);color:var(--demo-text)}.demo:focus-visible{outline:2px solid var(--demo-strong);outline-offset:2px}.demo__lanes{display:grid;grid-template-columns:1fr 1fr;gap:1.375rem}@media (max-width: 40rem){.demo{padding:1rem 1rem .875rem}.demo__lanes{gap:.75rem}}.demo__lane-head{display:flex;justify-content:space-between;margin:0 0 .625rem;font:500 .8125rem/1 var(--demo-mono);color:var(--demo-muted)}.demo__lane-head code{color:var(--demo-strong);font-family:var(--demo-mono)}.demo__track{position:relative;overflow:hidden;height:150px;border:1px dashed var(--demo-border-soft);border-radius:6px;background:var(--demo-bg)}.demo__pills{display:grid;grid-template-columns:repeat(4,1fr);gap:.375rem;margin-top:.75rem}@media (max-width: 40rem){.demo__pills{grid-template-columns:repeat(2,1fr);gap:.3125rem}}.demo__pill{padding:.5rem 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:1px solid #2e2e2e;border-radius:5px;background:#1a1a1a;color:var(--demo-dim);font:500 .6875rem/1 var(--demo-mono);letter-spacing:.02em;text-align:center;transition:background-color 90ms ease-out,color 90ms ease-out,border-color 90ms ease-out}.demo__pill--on{background:var(--demo-strong);border-color:var(--demo-strong);color:var(--demo-bg)}.demo__pill--on.demo__pill--accent{background:var(--demo-accent);border-color:var(--demo-accent)}@media (max-width: 40rem){.demo__pill{font-size:.625rem;padding:.4375rem 0;letter-spacing:0}}.demo__controls{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1rem;padding-top:.875rem;border-top:1px solid var(--demo-border);font:.75rem/1 var(--demo-mono);color:var(--demo-muted)}.demo__buttons{display:flex;gap:.5rem}.demo__button{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .875rem;border:1px solid var(--demo-strong);border-radius:6px;background:var(--demo-strong);color:var(--demo-bg);font:500 .75rem/1 var(--demo-mono);cursor:pointer;transition:background-color .14s ease-out,border-color .14s ease-out,color .14s ease-out,transform .14s cubic-bezier(.2,.8,.2,1)}.demo__button:hover{transform:translateY(-1px)}.demo__button:active{transform:translateY(0)}.demo__button--quiet:hover{border-color:var(--demo-muted);color:var(--demo-strong)}@media (prefers-reduced-motion: reduce){.demo__button,.demo__button:hover,.demo__button:active{transition:background-color .14s ease-out,border-color .14s ease-out,color .14s ease-out;transform:none}}.demo__button--quiet{background:transparent;border-color:var(--demo-border-soft);color:var(--demo-text)}.demo__button:focus-visible{outline:2px solid var(--demo-strong);outline-offset:2px}.demo__button svg{width:.625rem;height:.625rem;fill:currentColor}.demo__frames{display:flex;gap:3px}.demo__frames i{width:6px;height:12px;border-radius:1px;background:var(--demo-border-soft)}.demo__frames i.is-done{background:#a3a3a3}.demo__caption{margin-top:.75rem;font-size:.8125rem;line-height:1.5;color:var(--demo-muted)}.demo__stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(7rem,1fr));gap:.625rem;margin-top:.875rem}.demo__stat{padding:.75rem .875rem;border:1px solid var(--demo-border);border-radius:6px;background:var(--demo-bg)}.demo__stat-label{font-size:.75rem;color:var(--demo-muted)}.demo__stat-value{margin-top:.25rem;font:500 1rem/1.2 var(--demo-mono);color:var(--demo-strong)}.demo__stat--accent .demo__stat-value{color:var(--demo-accent)}.demo__slider{display:flex;flex-direction:column;gap:.5rem;flex:1}.demo__slider-label{display:flex;justify-content:space-between;font:.75rem/1 var(--demo-mono);color:var(--demo-muted)}.demo__slider input[type=range]{width:100%;accent-color:var(--demo-strong)}.demo__head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin:0 0 .75rem;font:500 .8125rem/1 var(--demo-mono);color:var(--demo-muted)}.demo__head strong{color:var(--demo-strong);font-weight:500;white-space:nowrap;flex-shrink:0}.demo__legend{display:flex;flex-wrap:wrap;gap:.5rem 1.125rem;margin-top:.875rem;font-size:.75rem;line-height:1.4;color:var(--demo-muted)}.demo__legend span{display:flex;align-items:center;gap:.4375rem}.demo__legend i{width:9px;height:9px;border-radius:2px;background:var(--demo-strong);flex:none}.demo__legend i.is-accent{background:var(--demo-accent)}.demo__legend i.is-ghost{background:transparent;border:1px dashed var(--demo-dim)}.demo__legend i.is-muted{background:#3a3a3a}.demo__bars{position:relative;padding-right:3.25rem}.demo__bars-plot{position:relative;display:flex;align-items:flex-end;gap:.5rem;height:124px}.demo__bars-plot i{flex:1;border-radius:3px 3px 0 0;background:var(--demo-accent)}.demo__bars-plot i.is-first{background:var(--demo-strong)}.demo__bars-line{position:absolute;left:0;right:-.5rem;bottom:58px;border-top:1px dashed var(--demo-dim)}.demo__bars-line em{position:absolute;right:-3.125rem;top:-.5rem;font:.6875rem/1 var(--demo-mono);font-style:normal;color:var(--demo-muted)}.demo__bars-nums{display:flex;gap:.5rem;margin-top:.4375rem}.demo__bars-nums span{flex:1;text-align:center;font:.6875rem/1 var(--demo-mono);color:var(--demo-muted)}.demo__svg{display:block;width:100%;max-height:15rem}.demo__source{margin:0 0 .875rem;padding:.75rem .875rem;border:1px solid var(--demo-border);border-radius:6px;background:var(--demo-bg);font:.75rem/1.65 var(--demo-mono);color:var(--demo-text);overflow-x:auto}.demo__source b{color:var(--demo-accent);font-weight:400}.demo__source em{color:var(--demo-muted);font-style:normal}.demo__chips{display:flex;flex-wrap:wrap;gap:.375rem;margin-bottom:1.125rem}.demo__chip{padding:.4375rem .625rem;border:1px solid var(--demo-border);border-radius:5px;background:var(--demo-bg);color:var(--demo-muted);font:.6875rem/1 var(--demo-mono);cursor:pointer;transition:background-color .14s ease-out,border-color .14s ease-out,color .14s ease-out,transform .14s cubic-bezier(.2,.8,.2,1)}.demo__chip:hover{border-color:var(--demo-muted);color:var(--demo-strong);transform:translateY(-1px)}.demo__chip[aria-pressed=true]{background:var(--demo-strong);border-color:var(--demo-strong);color:var(--demo-bg);transform:none}.demo__chip:focus-visible{outline:2px solid var(--demo-strong);outline-offset:2px}@media (prefers-reduced-motion: reduce){.demo__chip,.demo__chip:hover{transform:none}}.demo__cols{display:grid;grid-template-columns:repeat(4,1fr);gap:1.125rem}@media (max-width: 40rem){.demo__cols{grid-template-columns:repeat(2,1fr);gap:1rem .875rem}}.demo__col-head{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem;padding-bottom:.4375rem;margin-bottom:.75rem;border-bottom:1px solid var(--demo-border);font:.625rem/1 var(--demo-mono);letter-spacing:.06em;color:var(--demo-muted);text-transform:uppercase}.demo__col-head b{color:var(--demo-strong);font-weight:500;letter-spacing:0}.demo__nodes{display:flex;flex-direction:column;gap:.5rem}.demo__node{position:relative;padding:.4375rem .5rem;border:1px solid var(--demo-border);border-radius:5px;background:var(--demo-panel);font:.6875rem/1 var(--demo-mono);color:var(--demo-text);white-space:nowrap;transition:background-color .3s ease-out,border-color .3s ease-out,color .3s ease-out,opacity .3s ease-out}.demo__node[data-depth="1"]{margin-left:.75rem}.demo__node[data-depth="2"]{margin-left:1.5rem}.demo__node[data-depth="1"]:before,.demo__node[data-depth="2"]:before{content:"";position:absolute;left:-.5rem;top:-.5rem;bottom:50%;width:.4375rem;border-left:1px solid var(--demo-border);border-bottom:1px solid var(--demo-border);border-bottom-left-radius:4px}.demo__node.is-accent{border-color:var(--demo-accent);background:#60a5fa24;color:var(--demo-accent)}.demo__node.is-ghost{border-style:dashed;border-color:var(--demo-dim);background:transparent;color:var(--demo-dim)}.demo__node.is-empty{opacity:0}.demo__cols-note{grid-column:3 / -1;margin-top:.625rem;font:.6875rem/1 var(--demo-mono);color:var(--demo-dim)}@media (max-width: 40rem){.demo__cols-note{grid-column:1 / -1}}.demo__strip{--strip-gap: 10px;--strip-pad: 8px;position:relative;display:grid;grid-template-columns:repeat(8,1fr);gap:var(--strip-gap);padding:1rem var(--strip-pad);border-radius:6px;background:var(--demo-bg);border:1px solid var(--demo-border)}.demo__cell{height:44px;border:1px solid #3a3a3a;border-radius:5px;background:var(--demo-panel);transition:border-color .2s ease-out}.demo__cell.is-covered{border-color:#4a4a4a}.demo__mover{position:absolute;top:.5rem;bottom:.5rem;left:var(--strip-pad);border:1px solid var(--demo-accent);border-radius:6px;background:#60a5fa47}@media (max-width: 40rem){.demo__strip{--strip-gap: 6px;--strip-pad: 6px;padding-block:.75rem}.demo__cell{height:34px}}.demo__strip--static{padding-block:.625rem}.demo__cell.is-layer{border-color:var(--demo-accent);background:#60a5fa24}.demo__go{margin-top:.75rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.125rem 1.25rem;border:1px solid var(--demo-border-soft);border-radius:8px;background:var(--demo-bg)}.demo__go-link{font:500 .9375rem var(--demo-mono);color:var(--demo-strong);text-decoration:none;display:inline-flex;align-items:center;gap:.625rem}.demo__go-link:after{content:"→";color:var(--demo-accent)}.demo__go-link:hover{text-decoration:underline;text-underline-offset:4px}.demo__pill{display:inline-flex;align-items:center;gap:.4375rem;font:.6875rem var(--demo-mono);color:var(--demo-muted);padding:.375rem .625rem;border:1px solid var(--demo-border-soft);border-radius:999px;white-space:nowrap;transition:color .2s ease-out,border-color .2s ease-out,background-color .2s ease-out}.demo__pill i{width:7px;height:7px;border-radius:50%;background:var(--demo-dim)}.demo__pill.is-on{color:var(--demo-accent);border-color:var(--demo-accent);background:#60a5fa14}.demo__pill.is-on i{background:var(--demo-accent)}@media (max-width: 40rem){.demo__go{flex-direction:column;align-items:flex-start}}.demo__links{display:grid;gap:.875rem;padding:1rem 1.25rem .4rem;border:1px solid var(--demo-border-soft);border-radius:8px;background:var(--demo-bg)}.demo__linkrow{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}.demo__vlink{font:500 1.0625rem var(--demo-mono);color:#60a5fa;text-decoration:underline;text-underline-offset:4px}.demo__vlink:visited{color:#c084fc}.demo__linkmeta{font:.6875rem var(--demo-mono);color:var(--demo-muted);white-space:nowrap}@media (max-width: 40rem){.demo__linkrow{flex-direction:column;gap:.125rem}}.demo__mx-link{border:2px solid var(--demo-border-soft);border-radius:4px;padding:.125rem .5rem;text-decoration:none;white-space:nowrap;flex-shrink:0}.demo__linkmeta--wrap{white-space:normal;text-align:right;max-width:24rem}.demo__links-note{margin:.75rem 0 0;font:.5rem/1.5 var(--demo-mono);color:var(--demo-muted);opacity:.75}.demo__mx-link--solid{background-color:#404040}.demo__list,.demo__sniff{display:grid;grid-template-columns:1fr auto 1fr;grid-template-areas:"page arrow store" "page back store";gap:.5rem .75rem;align-items:center;padding:1rem 1.25rem;border:1px solid var(--demo-border-soft);border-radius:8px;background:var(--demo-bg)}.demo__sniff{grid-template-areas:"page arrow store"}.demo__list-page,.demo__sniff-page{grid-area:page;align-self:stretch;padding:.75rem .875rem;border:1px solid var(--demo-border);border-radius:6px;background:var(--demo-panel)}.demo__list-store,.demo__sniff-out{grid-area:store;align-self:stretch;padding:.75rem .875rem;border:1px solid var(--demo-border);border-radius:6px;background:var(--demo-panel);font:.75rem var(--demo-mono)}.demo__list-pagehead{font:.6875rem var(--demo-mono);color:var(--demo-muted);margin-bottom:.625rem}.demo__list-line{height:6px;margin:0 0 .5rem;border-radius:3px;background:var(--demo-border)}.demo__list-line--short{width:60%}.demo__list-link{margin:.25rem 0 .75rem;display:flex;flex-direction:column;gap:.25rem}.demo__list-a{font-size:.9375rem;color:#c084fc}.demo__list-href{font:.6875rem var(--demo-mono);color:var(--demo-muted)}.demo__list-arrow{grid-area:arrow;display:flex;flex-direction:column;align-items:center;gap:.25rem;width:9rem;color:var(--demo-muted);font:.6875rem var(--demo-mono);text-align:center}.demo__list-arrow svg{width:100%;height:22px}.demo__list-arrow--back{grid-area:back;color:var(--demo-accent)}.demo__list-arrow--back code{color:inherit}.demo__list-row{padding:.25rem .375rem;border-radius:3px;color:var(--demo-text)}.demo__list-row.is-hit{background:#c084fc24;color:#d8b4fe}.demo__list-row--more{color:var(--demo-muted)}.demo__sniff-wall{display:grid;grid-template-columns:repeat(8,1fr);gap:3px;margin:.25rem 0 .5rem}.demo__sniff-link{height:4px;border-radius:2px;background:var(--demo-border)}.demo__sniff-link.is-hit{background:#c084fc}.demo__sniff-note{font:.6875rem var(--demo-mono);color:var(--demo-muted)}.demo__sniff-row{display:flex;justify-content:space-between;padding:.2rem .375rem;border-radius:3px;color:var(--demo-muted)}.demo__sniff-row.is-hit{color:#d8b4fe;background:#c084fc24}@media (max-width: 40rem){.demo__list,.demo__sniff{grid-template-columns:1fr;grid-template-areas:"page" "arrow" "store" "back"}.demo__list-arrow{width:9rem;justify-self:center}}.demo__tzline{display:block;white-space:pre-wrap;font:.75rem var(--demo-mono);color:var(--demo-text)}.demo__noons{display:grid;grid-template-columns:repeat(4,1fr);gap:.625rem}.demo__noon{min-width:0;padding:.75rem;border:1px solid var(--demo-border-soft);border-radius:8px;background:var(--demo-bg)}.demo__noon-city{font:500 .9375rem var(--demo-mono);color:var(--demo-strong);margin-bottom:.625rem}.demo__noon-row{display:grid;grid-template-columns:auto 1fr;column-gap:.5rem;align-items:baseline;margin-bottom:.375rem}.demo__noon-label{font:.625rem var(--demo-mono);color:var(--demo-muted);grid-column:1 / -1}.demo__noon-time{font:500 1.0625rem var(--demo-mono);color:var(--demo-text)}.demo__noon-time--old{color:#c084fc}.demo__noon-offset{font:.6875rem var(--demo-mono);color:var(--demo-muted);justify-self:end}.demo__noon-diff{margin-top:.5rem;padding-top:.5rem;border-top:1px solid var(--demo-border-soft);font:.6875rem var(--demo-mono);color:var(--demo-accent)}@media (max-width: 40rem){.demo__noons{grid-template-columns:repeat(2,1fr)}}.demo__salt{display:grid;grid-template-columns:1fr auto 1fr;gap:.75rem;align-items:center;padding:1rem 1.25rem;border:1px solid var(--demo-border-soft);border-radius:8px;background:var(--demo-bg)}.demo__salt-in,.demo__salt-out{min-width:0;padding:.75rem .875rem;border:1px solid var(--demo-border);border-radius:6px;background:var(--demo-panel);font:.75rem var(--demo-mono)}.demo__salt-row{display:flex;justify-content:space-between;gap:.75rem;padding:.2rem 0;color:var(--demo-muted)}.demo__salt-row code{color:var(--demo-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.demo__salt-row--salt code{color:var(--demo-accent)}.demo__salt-arrow{display:flex;flex-direction:column;align-items:center;gap:.25rem;width:9rem;color:var(--demo-muted);font:.6875rem var(--demo-mono);text-align:center}.demo__salt-arrow svg{width:100%;height:22px}.demo__salt-id{display:block;font:500 1rem var(--demo-mono);color:var(--demo-accent);margin:.25rem 0 .75rem;word-break:break-all}.demo__salt-id--old{color:var(--demo-muted);text-decoration:line-through}.demo__salt-note{font:.6875rem var(--demo-mono);color:var(--demo-muted)}@media (max-width: 40rem){.demo__salt{grid-template-columns:1fr}.demo__salt-arrow{width:9rem;justify-self:center}}.demo__pixels{display:grid;grid-template-columns:1fr 1fr;gap:1rem;padding:1rem 1.25rem;border:1px solid var(--demo-border-soft);border-radius:8px;background:#fff}.demo__pixels-panel img{display:block;width:100%;height:auto;image-rendering:pixelated;border:1px solid var(--demo-border)}.demo__pixels .demo__list-pagehead{color:#666}.demo__raster{display:grid;grid-template-columns:1fr 1fr;gap:1rem;padding:1rem 1.25rem;border:1px solid var(--demo-border-soft);border-radius:8px;background:var(--demo-bg)}.demo__raster-cell{min-width:0;height:15rem;overflow:hidden}.demo__raster-card{width:11rem;padding:.75rem .875rem;border:1px solid var(--demo-border);border-radius:6px;background:var(--demo-panel);color:var(--demo-text);font:.8125rem/1.4 var(--demo-sans, system-ui, sans-serif);transform-origin:0 0}.demo__raster-card strong{display:block;margin-bottom:.25rem}.demo__raster-card p{margin:0;color:var(--demo-muted)}@media (max-width: 40rem){.demo__pixels,.demo__raster{grid-template-columns:1fr}}.demo__reds{display:grid;grid-template-columns:1fr 1fr;gap:1rem;padding:1rem 1.25rem;border:1px solid var(--demo-border-soft);border-radius:8px;background:var(--demo-bg)}.demo__red{display:flex;flex-direction:column;gap:.5rem;align-items:center;font:.75rem var(--demo-mono);color:var(--demo-muted)}.demo__red-swatch{width:100%;aspect-ratio:2 / 1;border-radius:6px}.demo__gradient{height:3rem;margin:.75rem 0 .5rem;border-radius:6px}.demo__gradient-mid{display:flex;align-items:center;gap:.75rem;margin-bottom:.75rem}.demo__gradient-swatch{flex:none;width:3rem;height:3rem;border-radius:6px;border:1px solid var(--demo-border)}.demo__gradient-css{font:.75rem var(--demo-mono);color:var(--demo-text);overflow-wrap:anywhere}@media (max-width: 40rem){.demo__reds{grid-template-columns:1fr}}.demo__gamut{position:relative;width:100%;aspect-ratio:8 / 9;max-width:30rem;margin:0 auto;padding:0;border:1px solid var(--demo-border-soft);border-radius:8px;background:var(--demo-bg);overflow:hidden}.demo__gamut-plot{position:absolute;inset:7% 7% 7% 9%}.demo__gamut svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.demo__gamut-locus{fill:#ffffff0f;stroke:var(--demo-muted);stroke-width:.4;vector-effect:non-scaling-stroke}.demo__gamut-p3{fill:#60a5fa1a;stroke:var(--demo-accent);stroke-width:.5;vector-effect:non-scaling-stroke}.demo__gamut-srgb{fill:#ffffff1a;stroke:var(--demo-text);stroke-width:.5;vector-effect:non-scaling-stroke}.demo__gamut-white{fill:var(--demo-text)}.demo__gamut-tick,.demo__gamut-label{position:absolute;transform:translate(-50%,-50%);font:.6875rem var(--demo-mono);color:var(--demo-muted);white-space:nowrap;pointer-events:none}.demo__gamut-tick{transform:translate(-115%,-50%)}.demo__gamut-label{color:var(--demo-text)}.demo__gamut-label--p3{color:var(--demo-accent)}.demo__gamut-label--muted{color:var(--demo-muted);transform:translateY(-50%)}.demo__red-swatch--p3{background:red;background:color(display-p3 1 0 0)}.demo__frozen{padding:1rem 1.25rem;border:1px solid var(--demo-border-soft);border-radius:8px;background:var(--demo-bg)}.demo__frozen-box{height:13rem;overflow-y:auto;overscroll-behavior:contain;will-change:transform;border:1px solid var(--demo-border);border-radius:0;background:var(--demo-panel);color:var(--demo-text);font:.8125rem/1 var(--demo-mono)}.demo__frozen-box:focus-visible{outline:2px solid var(--demo-accent);outline-offset:2px}.demo__frozen-row{padding:.75rem .875rem;border-bottom:1px solid var(--demo-border-soft)}.demo__frozen-row:nth-child(odd){background:color-mix(in srgb,var(--demo-panel) 85%,var(--demo-text))}.demo__path{padding:1rem 1.25rem 1.25rem;border:1px solid var(--demo-border-soft);border-radius:8px;background:var(--demo-bg);font:.75rem/1.35 var(--demo-mono)}.demo__path-row{display:grid;grid-template-columns:1fr 1.25rem 1fr 1.25rem 1.6fr 1.25rem 1fr;align-items:center;gap:.25rem}.demo__path-stop{padding:.625rem .75rem;border:1px solid var(--demo-border);border-radius:6px;background:var(--demo-panel);color:var(--demo-strong);text-align:center}.demo__path-stop small{display:block;margin-top:.375rem;font-size:.6875rem;line-height:1.35;color:var(--demo-muted)}.demo__path-stop--accent{border-color:var(--demo-accent);color:var(--demo-accent)}.demo__path-stop--muted{border-style:dashed;color:var(--demo-muted)}.demo__path-arrow{height:1px;background:var(--demo-dim);position:relative}.demo__path-arrow:after{content:"";position:absolute;right:-1px;top:-3px;border:3.5px solid transparent;border-left-color:var(--demo-dim)}.demo__path-aside{display:grid;grid-template-columns:1fr 1.25rem 1fr 1.25rem 1.6fr 1.25rem 1fr;gap:.25rem;margin-top:0}.demo__path-drop{grid-column:5;height:1.25rem;margin:0 auto;border-left:1px dashed var(--demo-dim)}.demo__path-aside .demo__path-stop{grid-column:4 / 7;grid-row:2}@media (max-width: 40rem){.demo__path-row,.demo__path-aside{grid-template-columns:1fr}.demo__path-arrow{width:1px;height:1rem;margin:0 auto}.demo__path-arrow:after{right:-3px;top:auto;bottom:-1px;border:3.5px solid transparent;border-top-color:var(--demo-dim)}.demo__path-drop,.demo__path-aside .demo__path-stop{grid-column:1}}.demo__clocks{padding:1rem 1.25rem .75rem;border:1px solid var(--demo-border-soft);border-radius:8px;background:var(--demo-bg);font:.75rem/1.3 var(--demo-mono)}.demo__clocks-axis{position:relative;height:1.25rem;margin:0 0 .5rem 6.5rem;color:var(--demo-dim)}.demo__clocks-axis span{position:absolute;top:0;transform:translate(-50%);font-size:.625rem}.demo__clocks-axis span i{font-style:normal;margin-left:.125rem}.demo__clocks-axis span:first-child{transform:none}.demo__clocks-row{display:grid;grid-template-columns:6.5rem 1fr;align-items:center;margin-bottom:.75rem}.demo__clocks-note{grid-column:2;margin-top:.25rem;font-size:.6875rem;color:var(--demo-muted)}.demo__clocks-name{color:var(--demo-strong)}.demo__clocks-name small{display:block;color:var(--demo-muted);font-size:.625rem}.demo__clocks-track{position:relative;height:2rem;border-left:1px solid var(--demo-border)}.demo__clocks-wait{position:absolute;left:0;top:.25rem;height:1.5rem;background:repeating-linear-gradient(135deg,#3a3a3a 0 4px,#2a2a2a 4px 8px);border-radius:3px;display:flex;align-items:center;padding-left:.5rem;color:var(--demo-strong);white-space:nowrap;overflow:hidden}.demo__clocks-wait--forever{border-radius:3px 0 0 3px;-webkit-mask-image:linear-gradient(90deg,#000 70%,transparent);mask-image:linear-gradient(90deg,#000 70%,transparent)}.demo__clocks-go{position:absolute;top:.25rem;height:1.5rem;right:0;background:color-mix(in srgb,var(--demo-accent) 22%,transparent);border-left:2px solid var(--demo-accent);display:flex;align-items:center;padding-left:.5rem;color:var(--demo-accent);white-space:nowrap;overflow:hidden}@media (max-width: 40rem){.demo__clocks-row{grid-template-columns:4.5rem 1fr}.demo__clocks-axis{margin-left:4.5rem}}.demo__controls--stack{flex-direction:column;align-items:stretch;gap:.75rem}.demo__seg{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem}.demo__seg-label{margin-right:.25rem;color:var(--demo-muted)}.demo__seg-button[aria-pressed=true]{cursor:default}.demo__freeze-row{display:flex;align-items:center;flex-wrap:wrap;gap:.75rem}.demo__freeze{position:relative;overflow:hidden;min-width:15rem;justify-content:center;border-color:var(--demo-accent);background:var(--demo-accent);color:var(--demo-bg)}.demo__freeze.is-frozen{background:var(--demo-panel);border-color:var(--demo-accent);color:var(--demo-accent);cursor:wait}.demo__freeze-bar{position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--demo-accent);transform:scaleX(0);transform-origin:left;will-change:transform}.demo__freeze.is-frozen .demo__freeze-bar{transform:scaleX(1);animation:demo-drain 5s linear forwards}.demo__freeze.is-frozen.is-reduced .demo__freeze-bar{animation:none;transform:scaleX(1)}@keyframes demo-drain{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.demo__freeze-readout{color:var(--demo-muted)}.demo__queue{display:grid;grid-template-columns:1fr auto;align-items:center;gap:1rem;padding:1rem 1.25rem;border:1px solid var(--demo-border);border-radius:8px;background:var(--demo-bg)}.demo__queue-line{display:flex;flex-wrap:wrap;justify-content:flex-end;align-content:center;align-items:center;gap:6px;min-height:52px}.demo__queue-dot{width:10px;height:10px;border-radius:50%;background:#3f3f3f;transition:background-color .2s ease-out,transform .2s ease-out}.demo__queue-dot.is-serving{background:var(--demo-accent);transform:scale(1.5)}.demo__queue-row{font:.6875rem var(--demo-mono);color:var(--demo-strong);padding:.875rem 1rem;border:1px solid var(--demo-accent);border-radius:6px;background:color-mix(in srgb,var(--demo-accent) 12%,transparent);white-space:nowrap}@media (prefers-reduced-motion: reduce){.demo__queue-dot{transition:none}}