:root{--live-up:#16a34a;--live-down:#dc2626}.ticker{width:100%;height:100%;display:block;overflow:visible}.ticker__grid{stroke:#0909aa14;stroke-width:1px;vector-effect:non-scaling-stroke}.ticker__line{fill:none;stroke-width:2.25px;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}.ticker__area,.ticker__line{transition:d 1s linear}.ticker__head{fill:var(--line);transition:transform 1s linear}.ticker__head[data-dir=down]{fill:var(--live-down)}.ticker__pulse{opacity:.35;transform-box:fill-box;transform-origin:50%;animation:1.4s ease-out infinite live-pulse}@keyframes live-pulse{0%{opacity:.5;transform:scale(.6)}to{opacity:0;transform:scale(2.2)}}.bars{box-sizing:border-box;border-bottom:1px solid #00000026;align-items:stretch;gap:8%;width:100%;height:100%;padding:0 4%;display:flex}.bars__col{flex-direction:column;flex:1;min-width:0;display:flex}.bars__stack{flex-direction:column-reverse;flex:1;justify-content:flex-start;display:flex}.bars__stack--side{flex-direction:row;align-items:flex-end;gap:8%}.bars__bar{height:var(--h);background:var(--c);transform-origin:bottom;flex:none;transition:height 1.1s cubic-bezier(.34,1.3,.64,1);display:block}.is-revealed .bars__bar{animation:bar-grow 1s cubic-bezier(.22, 1, .36, 1) calc(var(--d) + .3s) both}.bars__stack--side .bars__bar{flex:1}.bars__label{text-align:center;color:#6b7280;white-space:nowrap;text-overflow:ellipsis;margin-top:.35em;font-size:.62em;overflow:hidden}@keyframes bar-grow{0%{transform:scaleY(0)}}.gauge{justify-items:center;gap:.3em;margin:0;display:grid;position:relative}.gauge svg{width:100%;max-width:5.5em;transform:rotate(-90deg)}[dir=rtl] .gauge svg{transform:rotate(90deg)}.gauge__track{fill:none;stroke:#e5e7eb;stroke-width:6px}.gauge__fill{fill:none;stroke-width:6px;stroke-linecap:round;stroke-dashoffset:var(--off);transition:stroke-dashoffset 1.2s cubic-bezier(.22,1,.36,1)}.is-revealed .gauge__fill{animation:1.6s cubic-bezier(.22,1,.36,1) .3s both gauge-sweep}@keyframes gauge-sweep{0%{stroke-dashoffset:170px}}.gauge__value{aspect-ratio:1;color:#111827;place-items:center;max-width:5.5em;margin:0 auto;font-size:1.1em;font-weight:700;display:grid;position:absolute;top:0;left:0;right:0}.gauge__label{color:#6b7280;text-align:center;font-size:.65em}.delta{font-variant-numeric:tabular-nums;border-radius:999px;align-items:center;gap:.25em;padding:.1em .4em;font-size:.7em;font-weight:600;transition:color .3s,background-color .3s;display:inline-flex}.delta svg{fill:currentColor;width:.7em;transition:transform .35s cubic-bezier(.34,1.56,.64,1)}.delta[data-dir=up]{color:var(--live-up);background:#16a34a1a}.delta[data-dir=down]{color:var(--live-down);background:#dc26261a}.spark{width:3.5em;height:1.1em;overflow:visible}.spark path{fill:none;stroke-width:1.5px;vector-effect:non-scaling-stroke;transition:d 1s linear}.anum{font-variant-numeric:tabular-nums;border-radius:4px;transition:color .3s,background-color .3s;display:inline-block}.anum[data-trend=up]{color:var(--live-up)}.anum[data-trend=down]{color:var(--live-down)}@media (prefers-reduced-motion:reduce){.ticker__pulse,.bars__bar,.gauge__fill{animation:none}.ticker__area,.ticker__line,.bars__bar,.gauge__fill,.spark path{transition:none}}.dash-wrap{width:100%;height:100%;container-type:inline-size}.dash{--ink:#111827;--muted:#6b7280;--line:#e5e7eb;box-sizing:border-box;height:100%;color:var(--ink);letter-spacing:0;text-align:left;background:#fff;flex-direction:column;font-family:system-ui,Segoe UI,Roboto,sans-serif;font-size:clamp(7px,2cqi,16px);font-weight:400;line-height:1.25;display:flex;overflow:hidden}[dir=rtl] .dash{text-align:right}.dash__bar{border-bottom:1px solid var(--line);white-space:nowrap;align-items:center;gap:1.2em;padding:.7em 1em;display:flex}.dash__dots{gap:.35em;display:flex}.dash__dots i{background:#e5e7eb;border-radius:50%;width:.7em;height:.7em}.dash__dots i:first-child{background:#ff5f57}.dash__dots i:nth-child(2){background:#febc2e}.dash__dots i:nth-child(3){background:#28c840}.dash__app{align-items:center;gap:.45em;font-size:.95em;font-weight:700;display:inline-flex}.dash__app-icon{background:conic-gradient(#0909aa 0 25%, #2ce87e 0 50%, #0909aa 0 75%, #def44c 0);border-radius:.25em;width:1.1em;height:1.1em;animation:6s linear infinite dash-spin}@keyframes dash-spin{to{transform:rotate(360deg)}}.dash__nav{text-overflow:ellipsis;min-width:0;color:var(--muted);flex:1;font-size:.8em;overflow:hidden}.dash__live{color:var(--live-down);text-transform:uppercase;letter-spacing:.06em;align-items:center;gap:.4em;font-size:.75em;font-weight:700;display:inline-flex}.dash__status{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:.75em}.dash__live i{background:currentColor;border-radius:50%;width:.6em;height:.6em;animation:1.2s ease-in-out infinite dash-blink}@keyframes dash-blink{50%{opacity:.25;transform:scale(.7)}}.dash__body{flex:1;min-height:0;display:flex}.dash__side{border-right:1px solid var(--line);width:8.5em;color:var(--muted);flex-direction:column;flex:none;gap:.2em;padding:1em .6em;font-size:.8em;display:flex}[dir=rtl] .dash__side{border-right:none;border-left:1px solid var(--line)}.dash__side span{border-radius:.3em;padding:.35em .6em}.is-revealed .dash__side span{animation:.6s cubic-bezier(.22,1,.36,1) both dash-slide-in;animation-delay:calc(.3s + var(--i) * 70ms)}.dash__side .is-active{color:#0909aa;background:#eef2ff;font-weight:700}@keyframes dash-slide-in{0%{opacity:0;transform:translate(-.8em)}}.dash__main{flex-direction:column;flex:1;gap:.9em;min-width:0;padding:1em;display:flex}.kpis{grid-template-columns:repeat(4,minmax(0,1fr));gap:.6em;display:grid}.kpi{border:1px solid var(--line);background:#fafafa;border-radius:.5em;flex-direction:column;gap:.2em;min-width:0;padding:.6em .7em;display:flex}.kpi__label{color:var(--muted);white-space:nowrap;text-overflow:ellipsis;font-size:.75em;overflow:hidden}.kpi__value{white-space:nowrap;font-size:1.8em;font-weight:600;line-height:1.05}.kpi__foot{justify-content:space-between;align-items:center;gap:.3em;min-height:1.2em;display:flex}.dash__grid{flex:1;grid-template-columns:1.1fr 1fr;gap:.8em;min-height:0;display:grid}.panel{flex-direction:column;min-width:0;min-height:0;display:flex}.panel h4{color:#1f5f6b;border-bottom:2px solid #1f5f6b;align-items:center;gap:.5em;margin:0 0 .5em;padding-bottom:.3em;font-size:.85em;font-weight:700;display:flex}.panel__chart{flex:1;min-height:7em}.panel__chart--tall{min-height:11em}.dash__table{border-collapse:collapse;width:100%;font-size:.75em}.dash__table td{border-bottom:1px solid var(--line);padding:.3em .2em}.dash__table td:last-child{text-align:right;font-weight:600}[dir=rtl] .dash__table td:last-child{text-align:left}.gauges{grid-template-columns:repeat(4,minmax(0,1fr));gap:.6em;padding:.3em 0;display:grid}.dash__list{flex-direction:column;gap:.75em;margin:.3em 0 0;padding:0;font-size:.8em;list-style:none;display:flex}.dash__list li{grid-template-columns:5.5em 1fr 3.5em;align-items:center;gap:.6em;display:grid}.dash__list li>:last-child{text-align:right;font-weight:600}[dir=rtl] .dash__list li>:last-child{text-align:left}.dash__meter{background:linear-gradient(90deg, #0909aa, #2ce87e) left / var(--w) 100% no-repeat, #eef2ff;border-radius:999px;height:.55em;transition:background-size 1s cubic-bezier(.34,1.3,.64,1)}[dir=rtl] .dash__meter{background:linear-gradient(-90deg, #0909aa, #2ce87e) right / var(--w) 100% no-repeat, #eef2ff}@media (prefers-reduced-motion:reduce){.dash__app-icon,.dash__live i,.dash__side span{animation:none}}@container (width<=560px){.dash{font-size:clamp(8px,2.9cqi,13px)}.dash__side,.dash__nav,.dash__table{display:none}.kpis,.gauges{grid-template-columns:repeat(2,minmax(0,1fr))}.dash__grid{grid-template-columns:1fr}.dash__grid .panel:nth-child(2){display:none}.panel__chart,.panel__chart--tall{min-height:8em}}.phones{box-sizing:border-box;letter-spacing:0;color:#111827;background:#f5f6ff;justify-content:center;align-items:center;gap:6%;height:100%;padding:4% 6%;font-family:system-ui,Segoe UI,Roboto,sans-serif;font-size:clamp(7px,1.9cqi,15px);display:flex;position:relative}.phone{aspect-ratio:9/18.5;box-sizing:border-box;background:#0f172a;border-radius:2.2em;width:34%;padding:.6em;animation:5s ease-in-out infinite phone-float;position:relative;box-shadow:0 1.5em 3em -1em #0909aa59}.phone--back{animation-delay:-2.5s;transform:translateY(6%)}@keyframes phone-float{50%{translate:0 -4%}}.phone__notch{z-index:1;background:#0f172a;border-radius:999px;width:28%;height:.9em;position:absolute;top:1em;left:50%;transform:translate(-50%)}[dir=rtl] .phone__notch{left:auto;right:50%;transform:translate(50%)}.phone__screen{box-sizing:border-box;background:#fff;border-radius:1.7em;flex-direction:column;gap:.45em;height:100%;padding:2.6em 1em 1em;display:flex;overflow:hidden}.phone__hello{font-size:.95em;font-weight:700}.phone__label{color:#6b7280;font-size:.75em}.phone__screen .delta{align-self:flex-start}.phone__big{font-size:1.8em;font-weight:700;line-height:1}.phone__chart{flex:1;min-height:5em;margin-top:.6em}.phone__tabs{border-top:1px solid #e5e7eb;justify-content:space-around;padding-top:.6em;display:flex}.phone__tabs i{background:#e5e7eb;border-radius:.3em;width:1.1em;height:1.1em}.phone__tabs i.is-on{background:#2ce87e}.phone__feed{flex-direction:column;gap:.5em;margin:.6em 0 0;padding:0;font-size:.78em;list-style:none;display:flex}.phone__feed li{animation:.5s cubic-bezier(.22,1,.36,1) both feed-in;animation-delay:calc(var(--i) * 80ms);background:#f3f4f6;border-radius:.6em;justify-content:space-between;padding:.6em .7em;display:flex}.phone__feed b{color:#0909aa}@keyframes feed-in{0%{opacity:0;transform:translateY(-.8em)}}@media (prefers-reduced-motion:reduce){.phone,.phone__feed li{animation:none}}@container (width<=560px){.phones{font-size:clamp(7px,2.6cqi,12px)}.phone{width:44%}}.dash:has(.dash--dark){--ink:#e5e7eb;--muted:#94a3b8;--line:#ffffff1a;color:var(--ink);background:#0f172a}.dash:has(.dash--dark) .dash__bar{border-color:var(--line)}.dash--dark .kpi{background:#ffffff0a}.dash--dark .panel h4{color:#c7d2fe;border-color:#6d6df5}.dash--dark .bars{border-color:var(--line)}.dash--dark .gauge__track{stroke:#ffffff1f}.dash--dark .gauge__value{color:#fff}.gauges--2{flex:1;grid-template-columns:repeat(2,minmax(0,1fr));align-items:center}
