.echo-segment-display{--seg-h:40px;display:inline-grid;justify-items:start;gap:var(--echo-space-3);max-width:100%;min-width:0}.echo-segment-display[data-size=sm]{--seg-h:24px}.echo-segment-display[data-size=lg]{--seg-h:64px}.echo-segment-display[data-variant=screen]{padding:var(--echo-space-5) var(--echo-space-7) var(--echo-space-6);border-radius:var(--echo-radius-lg);background:var(--echo-drawn-glass,linear-gradient(160deg,var(--echo-well) 0,var(--echo-lcd) 100%));box-shadow:var(
    --echo-shadow-well-screen,inset 0 2px 6px color-mix(in oklab,var(--echo-cast-ink,black) calc(.8 * var(--echo-shade, 1) * 100%),transparent),inset 0 -1px 0 rgb(255 255 255/calc(.05 * var(--echo-gloss, 1))),inset 0 0 0 var(--echo-line-width,0) var(--echo-line,transparent)
  )}.echo-segment-display__label,.echo-segment-display__unit{font-family:var(--echo-font-machine,ui-sans-serif,system-ui,sans-serif);font-size:var(--echo-text-3xs);font-weight:var(--echo-weight-bold,700);letter-spacing:var(--echo-tracking-widest,.25em);text-transform:uppercase;color:var(--echo-text-dim);line-height:var(--echo-leading-tight,1.25)}.echo-segment-display__row{display:inline-flex;align-items:flex-end;gap:var(--echo-space-3);max-width:100%;min-width:0}.echo-segment-display__face{display:block;flex:0 1 auto;min-inline-size:0;inline-size:calc(var(--seg-h) * var(--seg-ratio));max-inline-size:100%;block-size:auto;aspect-ratio:var(--seg-ratio);overflow:visible}.echo-segment-display__face [data-state=lit]{fill:var(--echo-text)}.echo-segment-display__face [data-state=dim]{fill:color-mix(in oklab,var(--echo-text) 28%,transparent)}.echo-segment-display[data-glow] .echo-segment-display__face{filter:drop-shadow(0 0 6px color-mix(in oklab,var(--echo-lcd-glow) 45%,transparent))}.echo-segment-display[data-glow] .echo-segment-display__face [data-state=lit]{fill:var(--echo-accent-ink,var(--echo-accent-glow))}.echo-segment-display[data-glow] .echo-segment-display__face [data-state=dim]{fill:color-mix(in oklch,var(--echo-accent-glow) 30%,transparent)}.echo-segment-display__face [data-state=off]{fill:transparent}.echo-segment-display[data-ghost] .echo-segment-display__face [data-state=off]{fill:color-mix(in oklab,var(--echo-text) 6%,transparent)}.echo-segment-display__said{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}@media (forced-colors:active){.echo-segment-display[data-variant=screen]{border:var(--echo-border-hairline,1px) solid CanvasText}.echo-segment-display__face{filter:none}.echo-segment-display .echo-segment-display__face [data-state=lit]{fill:CanvasText}.echo-segment-display .echo-segment-display__face [data-state=dim]{fill:GrayText}.echo-segment-display .echo-segment-display__face [data-state=off]{fill:transparent}}