.hero-demo{--demo-bar-color: #8e54f0;--demo-bar-radius: 8px;--demo-step-duration: .9s;--demo-row-height: 52px;display:flex;flex-direction:column;gap:16px;padding:20px;width:100%;box-sizing:border-box;font-family:inherit;color:var(--color-foreground)}@media (min-width: 768px){.hero-demo{flex-direction:row;padding:24px;gap:24px}}.hero-demo__main{flex:1 1 auto;display:flex;flex-direction:column;min-width:0}.hero-demo__title-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}.hero-demo__title{font-size:14px;font-weight:600;letter-spacing:.02em;color:var(--color-foreground);opacity:.75;margin-bottom:16px}@media (min-width: 768px){.hero-demo__title{font-size:15px;margin-bottom:20px}}.hero-demo__chart-types{display:inline-flex;align-self:flex-start;gap:4px;padding:2px;background:color-mix(in srgb,var(--color-foreground) 6%,transparent);border-radius:8px}.hero-demo__chart-type{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:0;background:transparent;color:var(--color-foreground);opacity:.45;cursor:pointer;border-radius:6px;transition:opacity .16s ease,background-color .16s ease}.hero-demo__chart-type svg{width:16px;height:16px}.hero-demo__chart-type:hover{opacity:.8}.hero-demo__chart-type--active{opacity:1;background:var(--color-base, transparent)}.hero-demo__chart{position:relative;flex:1 1 auto;width:100%;min-width:0}.hero-demo__variant{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .2s ease}.hero-demo__variant--visible{opacity:1;pointer-events:auto}.hero-demo__variant--line{width:100%;height:100%}.hero-demo__line-svg{width:100%;height:100%;display:block}.hero-demo__line-svg polyline{stroke-width:var(--demo-line-width, 3);transition:stroke-width .2s ease}.hero-demo__line-marker{position:absolute;width:22px;height:22px;border-radius:999px;border:2px solid currentColor;background:var(--color-base, #fff);overflow:hidden;transform:translate(-50%,-50%);pointer-events:none;box-shadow:0 1px 3px #00000040}@media (min-width: 768px){.hero-demo__line-marker{width:26px;height:26px}}.hero-demo__line-marker img{display:block;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.hero-demo__row-table{position:absolute;left:0;right:calc(50% + 6px);height:44px;display:flex;align-items:center;gap:10px;padding:0 4px;box-sizing:border-box;transition:top var(--demo-step-duration) cubic-bezier(.2,.8,.2,1),left var(--demo-step-duration) cubic-bezier(.2,.8,.2,1),right var(--demo-step-duration) cubic-bezier(.2,.8,.2,1),opacity .24s ease}.hero-demo__row-table--col2{left:calc(50% + 6px);right:0}.hero-demo__row-table--hidden{opacity:0;pointer-events:none}.hero-demo__rank-badge{flex:0 0 auto;width:26px;height:26px;border-radius:999px;background:color-mix(in srgb,var(--color-foreground) 4%,transparent);color:var(--color-foreground);border:1px solid color-mix(in srgb,var(--color-foreground) 12%,transparent);display:inline-flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums;font-size:12px;font-weight:700}@media (min-width: 768px){.hero-demo__rank-badge{width:28px;height:28px;font-size:13px}}.hero-demo__card{flex:1 1 auto;display:flex;align-items:center;gap:10px;height:36px;padding:0 12px;background:color-mix(in srgb,var(--color-foreground) 4%,transparent);color:var(--color-foreground);border:1px solid color-mix(in srgb,var(--color-foreground) 12%,transparent);border-radius:var(--demo-bar-radius, 8px);min-width:0;transition:border-radius .22s ease}.hero-demo__card-content{flex:1 1 auto;display:flex;align-items:baseline;justify-content:space-between;gap:8px;min-width:0}.hero-demo__card-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--color-foreground)}@media (min-width: 768px){.hero-demo__card-name{font-size:14px}}.hero-demo__card-value{flex:0 0 auto;font-variant-numeric:tabular-nums;font-size:13px;font-weight:700;color:var(--color-foreground);white-space:nowrap}@media (min-width: 768px){.hero-demo__card-value{font-size:15px}}.hero-demo__frame-label{position:absolute;bottom:4px;right:0;font-size:56px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.04em;color:var(--color-foreground);opacity:.18;line-height:1;pointer-events:none;z-index:0}@media (min-width: 768px){.hero-demo__frame-label{font-size:96px}}.hero-demo__bar{position:absolute;left:0;right:0;height:44px;display:flex;align-items:center;gap:12px;padding:0 12px;box-sizing:border-box;transition:top var(--demo-step-duration) cubic-bezier(.2,.8,.2,1),opacity .24s ease}.hero-demo__bar--hidden{opacity:0;pointer-events:none}.hero-demo__label{flex:0 0 auto;width:88px;font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--color-foreground)}@media (min-width: 768px){.hero-demo__label{width:104px;font-size:15px}}.hero-demo__track{flex:1 1 auto;display:flex;align-items:center;gap:8px;height:28px;min-width:0}.hero-demo__fill{flex:0 0 auto;height:100%;width:0%;background:var(--demo-bar-color);border-radius:var(--demo-bar-radius);transition:width var(--demo-step-duration) cubic-bezier(.2,.8,.2,1),background-color .6s ease,border-radius .22s ease}.hero-demo__flag{flex:0 0 auto;width:24px;height:24px;border-radius:999px;-o-object-fit:cover;object-fit:cover;box-shadow:0 0 0 1px color-mix(in srgb,var(--color-foreground) 12%,transparent)}@media (min-width: 768px){.hero-demo__flag{width:28px;height:28px}}.hero-demo__value{flex:0 0 auto;font-variant-numeric:tabular-nums;font-size:14px;font-weight:600;color:var(--color-foreground);opacity:.85;white-space:nowrap}@media (min-width: 768px){.hero-demo__value{font-size:15px}}.hero-demo__controls{flex:0 0 auto;display:flex;flex-direction:column;gap:12px;width:100%}@media (min-width: 768px){.hero-demo__controls{width:240px}}.hero-demo__toggle{display:inline-flex;align-items:center;justify-content:center;height:36px;padding:0 16px;border:1px solid color-mix(in srgb,var(--color-foreground) 20%,transparent);border-radius:999px;background:transparent;color:var(--color-foreground);font-size:13px;font-weight:500;cursor:pointer;align-self:flex-start}@media (min-width: 768px){.hero-demo__toggle{display:none}}.hero-demo__panel{display:none;flex-direction:column;gap:12px;padding:16px;background:color-mix(in srgb,var(--color-foreground) 4%,transparent);border:1px solid color-mix(in srgb,var(--color-foreground) 8%,transparent);border-radius:12px}@media (min-width: 768px){.hero-demo__panel{display:flex}}.hero-demo__controls--open .hero-demo__panel{display:flex}.hero-demo__row{display:flex;flex-direction:column;gap:6px}.hero-demo__row--hidden{display:none}.hero-demo__row-label{font-size:12px;letter-spacing:.01em;color:var(--color-foreground);opacity:.6}.hero-demo__swatches{display:flex;gap:6px}.hero-demo__swatch{width:24px;height:24px;border-radius:999px;border:2px solid transparent;cursor:pointer;padding:0;transition:transform .12s ease,border-color .12s ease}.hero-demo__swatch:hover{transform:scale(1.1)}.hero-demo__swatch--active{border-color:var(--color-foreground)}.hero-demo__slider{width:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:4px;border-radius:999px;background:color-mix(in srgb,var(--color-foreground) 12%,transparent);cursor:pointer}.hero-demo__slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:999px;background:var(--color-primary);border:2px solid var(--color-foreground, #fff);box-shadow:0 1px 2px #0003;cursor:pointer}.hero-demo__slider::-moz-range-thumb{width:16px;height:16px;border-radius:999px;background:var(--color-primary);border:2px solid var(--color-foreground, #fff);box-shadow:0 1px 2px #0003;cursor:pointer}.hero-demo__readout{font-size:12px;font-variant-numeric:tabular-nums;color:var(--color-foreground);opacity:.6}