@frontpanel/css 0.0.0-stage → 0.2.0

package/components.css

@@ -0,0 +1,1100 @@
+/* Generated by scripts/build.ts from src/. Do not edit; edit the source and run `pnpm build`. */
+@layer frontpanel {
+  /* An LCD line redrawing left to right; the fp-lcd-redraw class steps through it. */
+  @keyframes fp-lcd-redraw {
+    from {
+      clip-path: inset(0 100% 0 0);
+    }
+
+    to {
+      clip-path: inset(0 0 0 0);
+    }
+  }
+
+  /* Two blinks 400 ms apart, then steady. Nothing on the device blinks for longer. */
+  @keyframes fp-blink-twice {
+    0%,
+    100% {
+      opacity: 1;
+    }
+
+    12.5%,
+    37.5% {
+      opacity: 0;
+    }
+
+    25%,
+    50% {
+      opacity: 1;
+    }
+  }
+
+  /** Redraws an LCD line left to right in four steps, as when its value changes. */
+  .fp-lcd-redraw {
+    animation: fp-lcd-redraw 160ms steps(4, end);
+
+    @media (prefers-reduced-motion: reduce) {
+      animation: none;
+    }
+  }
+
+  /** Blinks twice, then holds: an LED confirming an action. */
+  .fp-blink-twice {
+    animation: fp-blink-twice 1.6s steps(1, end) 1;
+
+    @media (prefers-reduced-motion: reduce) {
+      animation: none;
+    }
+  }
+
+  /** The page behind the device: quiet blue-grey with a faint Y2K grid. */
+  .fp-device-backdrop {
+    color-scheme: var(--fp-scheme);
+    background-color: var(--fp-color-backdrop);
+    background-image:
+      linear-gradient(var(--fp-color-grid) 1px, transparent 1px),
+      linear-gradient(90deg, var(--fp-color-grid) 1px, transparent 1px),
+      radial-gradient(ellipse 80% 60% at 20% 0%, var(--fp-color-backdrop-hi), transparent 70%),
+      linear-gradient(180deg, var(--fp-color-backdrop-hi), var(--fp-color-backdrop));
+    background-size:
+      32px 32px,
+      32px 32px,
+      auto,
+      auto;
+  }
+
+  /** Liquid-chrome ring around the device body. Diagonal so the reflection band crosses the corners. */
+  .fp-device-rim {
+    color-scheme: var(--fp-scheme);
+    border-radius: 36px;
+    padding: 10px;
+    background-image: linear-gradient(
+      160deg,
+      var(--fp-color-chrome-hi) 0%,
+      var(--fp-color-chrome-100) 14%,
+      var(--fp-color-chrome-tint) 38%,
+      var(--fp-color-chrome-500) 50%,
+      var(--fp-color-chrome-300) 70%,
+      var(--fp-color-chrome-100) 100%
+    );
+    box-shadow:
+      0 0 0 1px var(--fp-color-chrome-800),
+      inset 0 1px 0 var(--fp-color-chrome-hi),
+      0 4px 0 var(--fp-color-cast),
+      0 14px 18px -10px var(--fp-color-cast);
+
+    /*
+     * A body set in the rim follows its curve (the rim's radius less its padding) and clips to it.
+     * No specificity, so a rim sized another way can give its body a matching radius with a class.
+     */
+    :where(& > .fp-device-body) {
+      overflow: clip;
+      border-radius: 26px;
+    }
+  }
+
+  /** Molded body plastic the modules sit on. */
+  .fp-device-body {
+    color-scheme: var(--fp-scheme);
+    background-image: linear-gradient(180deg, var(--fp-color-shell-hi), var(--fp-color-shell) 240px);
+    box-shadow:
+      inset 1px 1px 0 var(--fp-color-bevel-hi),
+      inset -1px -1px 0 var(--fp-color-bevel-lo);
+  }
+
+  /** Liquid chrome with a hard horizon, for title bars and other frames. Never behind text. */
+  .fp-chrome {
+    background-image: linear-gradient(
+      180deg,
+      var(--fp-color-chrome-hi) 0%,
+      var(--fp-color-chrome-100) 18%,
+      var(--fp-color-chrome-tint) 45%,
+      var(--fp-color-chrome-500) 52%,
+      var(--fp-color-chrome-300) 75%,
+      var(--fp-color-chrome-100) 100%
+    );
+    box-shadow:
+      inset 0 1px 0 var(--fp-color-chrome-hi),
+      inset 0 -1px 0 var(--fp-color-edge);
+  }
+
+  /** Brushed chrome without the horizon, calm enough to print a label in the middle of it. */
+  .fp-chrome-soft {
+    background-image: linear-gradient(
+      180deg,
+      color-mix(in srgb, var(--fp-color-chrome-hi) 60%, var(--fp-color-chrome-100)) 0%,
+      var(--fp-color-chrome-100) 40%,
+      var(--fp-color-chrome-300) 100%
+    );
+  }
+
+  /** Small hardware push button in brushed chrome. 44 px tall, 36 px with a mouse, trackpad or pen. */
+  .fp-chrome-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.375rem;
+    min-height: 2.75rem;
+    min-width: 2.75rem;
+    padding-inline: 0.625rem;
+    border-radius: 6px;
+    color: var(--fp-color-ink);
+    font-size: 13px;
+    font-weight: 700;
+    background-image: linear-gradient(
+      180deg,
+      color-mix(in srgb, var(--fp-color-chrome-hi) 60%, var(--fp-color-chrome-100)) 0%,
+      var(--fp-color-chrome-100) 40%,
+      var(--fp-color-chrome-300) 100%
+    );
+    box-shadow:
+      0 0 0 1px var(--fp-color-edge),
+      inset 1px 1px 0 var(--fp-color-bevel-hi),
+      inset -1px -1px 0 var(--fp-color-bevel-lo),
+      1px 2px 0 var(--fp-color-cast);
+    transition-property: translate, box-shadow, filter;
+    transition-duration: 70ms;
+    transition-timing-function: linear;
+
+    @media (prefers-reduced-motion: reduce) {
+      transition-duration: 0ms;
+    }
+
+    @media (pointer: fine) {
+      min-height: 2.25rem;
+      min-width: 2.25rem;
+    }
+
+    &:hover:not(:disabled) {
+      filter: brightness(1.05);
+    }
+
+    &:active:not(:disabled),
+    &[aria-pressed="true"],
+    &[aria-expanded="true"],
+    &[aria-current="page"] {
+      translate: 0 1px;
+      box-shadow:
+        0 0 0 1px var(--fp-color-edge),
+        inset 1px 1px 3px var(--fp-color-bevel-lo),
+        inset -1px -1px 0 var(--fp-color-bevel-hi);
+    }
+
+    /* A solid ring with a glow outside it: the glow alone fails non-text contrast on light chrome. */
+    &:focus-visible {
+      outline: 2px solid var(--fp-color-focus-ring);
+      outline-offset: 2px;
+      filter: drop-shadow(0 0 3px var(--fp-color-focus));
+    }
+
+    /* The hover filter outranks the focus rule, so a hovered control keeps its glow here. */
+    &:focus-visible:hover:not(:disabled) {
+      filter: brightness(1.05) drop-shadow(0 0 3px var(--fp-color-focus));
+    }
+
+    &:disabled {
+      opacity: 0.45;
+    }
+  }
+
+  /**
+   * Glossy gel pill for primary actions. Its white label sits on the base colour at mid-height,
+   * where the highlight ellipse has already faded out (7:1).
+   */
+  .fp-gel {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    min-height: 2.75rem;
+    padding-inline: 1rem;
+    border-radius: 9999px;
+    color: var(--fp-color-gel-ink);
+    font-size: 14px;
+    font-weight: 700;
+    text-shadow: 0 -1px 0 rgb(0 0 0 / 0.35);
+    background-image:
+      radial-gradient(ellipse 80% 45% at 50% 0%, rgb(255 255 255 / 0.7), rgb(255 255 255 / 0.08) 90%, transparent 100%),
+      linear-gradient(180deg, var(--fp-color-gel-hi) 0%, var(--fp-color-gel) 48%, var(--fp-color-gel-lo) 100%);
+    box-shadow:
+      0 0 0 1px var(--fp-color-gel-lo),
+      inset 0 -3px 5px rgb(140 200 255 / 0.4),
+      1px 2px 0 var(--fp-color-cast);
+    transition-property: translate, box-shadow, filter;
+    transition-duration: 70ms;
+    transition-timing-function: linear;
+
+    @media (prefers-reduced-motion: reduce) {
+      transition-duration: 0ms;
+    }
+
+    @media (pointer: fine) {
+      min-height: 2.5rem;
+    }
+
+    &:hover:not(:disabled) {
+      filter: brightness(1.08);
+    }
+
+    &:active:not(:disabled) {
+      translate: 0 1px;
+      box-shadow:
+        0 0 0 1px var(--fp-color-gel-lo),
+        inset 0 2px 4px rgb(0 0 0 / 0.35);
+    }
+
+    /* A solid ring with a glow outside it: the glow alone fails non-text contrast on light chrome. */
+    &:focus-visible {
+      outline: 2px solid var(--fp-color-focus-ring);
+      outline-offset: 2px;
+      filter: drop-shadow(0 0 3px var(--fp-color-focus));
+    }
+
+    /* The hover filter outranks the focus rule, so a hovered control keeps its glow here. */
+    &:focus-visible:hover:not(:disabled) {
+      filter: brightness(1.08) drop-shadow(0 0 3px var(--fp-color-focus));
+    }
+
+    &:disabled {
+      opacity: 0.45;
+    }
+  }
+
+  /**
+   * Molded-plastic cap. The cap colour and its label colour come from the fp-cap-* classes
+   * (`--fp-cap`, `--fp-cap-ink`); a bare `fp-cap` is white plastic with a dark label. Selected caps
+   * stay pressed in and get a ring, so selection never depends on colour.
+   */
+  .fp-cap {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 2.75rem;
+    padding-inline: 0.5rem;
+    border-radius: 6px;
+    color: var(--fp-cap-ink, var(--fp-color-cap-ink));
+    font-weight: 700;
+    background-color: var(--fp-cap, var(--fp-color-cap));
+    background-image: radial-gradient(ellipse 110% 80% at 30% 10%, rgb(255 255 255 / 0.28), transparent 65%);
+    box-shadow:
+      0 0 0 1px var(--fp-color-edge),
+      inset 0 2px 0 rgb(255 255 255 / 0.45),
+      inset 0 -2px 0 rgb(0 0 0 / 0.25),
+      1px 2px 1px var(--fp-color-cast);
+    transition-property: translate, box-shadow, filter;
+    transition-duration: 70ms;
+    transition-timing-function: linear;
+
+    @media (prefers-reduced-motion: reduce) {
+      transition-duration: 0ms;
+    }
+
+    @media (pointer: fine) {
+      min-height: 2.25rem;
+    }
+
+    &:hover:not(:disabled) {
+      filter: brightness(1.05);
+    }
+
+    &:active:not(:disabled) {
+      translate: 0 1px;
+      box-shadow:
+        0 0 0 1px var(--fp-color-edge),
+        inset 0 2px 3px rgb(0 0 0 / 0.35),
+        inset 0 -1px 0 rgb(255 255 255 / 0.3);
+    }
+
+    &[aria-pressed="true"],
+    &[aria-checked="true"] {
+      translate: 0 1px;
+      box-shadow:
+        0 0 0 2px var(--fp-color-select),
+        inset 0 2px 3px rgb(0 0 0 / 0.35),
+        inset 0 -1px 0 rgb(255 255 255 / 0.3);
+    }
+
+    /* A solid ring with a glow outside it: the glow alone fails non-text contrast on light chrome. */
+    &:focus-visible {
+      outline: 2px solid var(--fp-color-focus-ring);
+      outline-offset: 2px;
+      filter: drop-shadow(0 0 3px var(--fp-color-focus));
+    }
+
+    /* The hover filter outranks the focus rule, so a hovered control keeps its glow here. */
+    &:focus-visible:hover:not(:disabled) {
+      filter: brightness(1.05) drop-shadow(0 0 3px var(--fp-color-focus));
+    }
+
+    &:disabled {
+      opacity: 0.5;
+    }
+  }
+
+  /** Blue plastic for an fp-cap, with its own label colour. */
+  .fp-cap-blue {
+    --fp-cap: var(--fp-color-cap-blue);
+    --fp-cap-ink: var(--fp-color-cap-blue-ink);
+  }
+
+  /** Amber plastic for an fp-cap, with its own label colour. */
+  .fp-cap-amber {
+    --fp-cap: var(--fp-color-cap-amber);
+    --fp-cap-ink: var(--fp-color-cap-amber-ink);
+  }
+
+  /** Graphite plastic for an fp-cap, with its own label colour. */
+  .fp-cap-graphite {
+    --fp-cap: var(--fp-color-cap-graphite);
+    --fp-cap-ink: var(--fp-color-cap-graphite-ink);
+  }
+
+  /** Berry plastic for an fp-cap, with its own label colour. */
+  .fp-cap-berry {
+    --fp-cap: var(--fp-color-cap-berry);
+    --fp-cap-ink: var(--fp-color-cap-berry-ink);
+  }
+
+  /**
+   * A control with its silkscreen label under it: a knob, fader or meter and an fp-silk. A length
+   * set here, such as `--fp-fader-length`, reaches the control inside.
+   */
+  .fp-unit {
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.375rem;
+  }
+
+  /**
+   * Rotary knob: a knurled chrome skirt round a domed cap. The cap is lit from the top left and stays
+   * still; only its fp-knob-mark turns, by `rotate`, through 270 degrees. 48 px, 40 px with a mouse,
+   * trackpad or pen.
+   */
+  .fp-knob {
+    position: relative;
+    display: inline-block;
+    flex-shrink: 0;
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    background-image: repeating-conic-gradient(var(--fp-color-chrome-100) 0deg 5deg, var(--fp-color-chrome-300) 5deg 10deg);
+    box-shadow:
+      0 0 0 1px var(--fp-color-edge),
+      inset 1px 1px 0 var(--fp-color-bevel-hi),
+      inset -1px -1px 0 var(--fp-color-bevel-lo),
+      1px 2px 0 var(--fp-color-cast);
+    cursor: ns-resize;
+    touch-action: none;
+    user-select: none;
+
+    @media (pointer: fine) {
+      width: 2.5rem;
+      height: 2.5rem;
+    }
+
+    &::before {
+      content: "";
+      position: absolute;
+      inset: 16%;
+      border-radius: 50%;
+      background-image: radial-gradient(
+        circle at 30% 25%,
+        color-mix(in srgb, var(--fp-color-chrome-hi) 60%, var(--fp-color-chrome-100)) 0%,
+        var(--fp-color-chrome-100) 45%,
+        var(--fp-color-chrome-300) 100%
+      );
+      box-shadow:
+        0 0 0 1px var(--fp-color-edge),
+        inset 1px 1px 0 var(--fp-color-bevel-hi),
+        inset -1px -1px 0 var(--fp-color-bevel-lo),
+        1px 1px 2px var(--fp-color-cast);
+    }
+
+    /* A solid ring with a glow outside it: the glow alone fails non-text contrast on light chrome. */
+    &:focus-visible {
+      outline: 2px solid var(--fp-color-focus-ring);
+      outline-offset: 2px;
+      filter: drop-shadow(0 0 3px var(--fp-color-focus));
+    }
+
+    &[aria-disabled="true"] {
+      opacity: 0.45;
+      cursor: not-allowed;
+    }
+  }
+
+  /** The pointer line on a knob's cap. Turn it with `rotate`: -135deg at the minimum, 135deg at the maximum. */
+  .fp-knob-mark {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+
+    &::after {
+      content: "";
+      position: absolute;
+      top: 21%;
+      left: 50%;
+      width: 3px;
+      height: 24%;
+      translate: -50% 0;
+      border-radius: 2px;
+      background-color: var(--fp-color-ink);
+    }
+  }
+
+  /**
+   * Fader: a chrome cap on a recessed slot. It stands up by default and lies on its side with
+   * `data-orientation="horizontal"`; `--fp-fader-length` sets how far it travels (8rem). 44 px
+   * across, 36 px with a mouse, trackpad or pen. Pressing the slot moves the cap there.
+   */
+  .fp-fader {
+    position: relative;
+    display: inline-block;
+    flex-shrink: 0;
+    width: 2.75rem;
+    height: var(--fp-fader-length, 8rem);
+    cursor: ns-resize;
+    touch-action: none;
+    user-select: none;
+
+    @media (pointer: fine) {
+      width: 2.25rem;
+    }
+
+    &[data-orientation="horizontal"] {
+      width: var(--fp-fader-length, 8rem);
+      height: 2.75rem;
+      cursor: ew-resize;
+
+      @media (pointer: fine) {
+        height: 2.25rem;
+      }
+    }
+
+    &[data-disabled] {
+      opacity: 0.45;
+      cursor: not-allowed;
+    }
+  }
+
+  /** The slot a fader's cap rides in, cut into the panel: shaded on its top and left inside edges. */
+  .fp-fader-slot {
+    position: absolute;
+    inset: 0.5rem auto;
+    left: 50%;
+    width: 6px;
+    translate: -50% 0;
+    border-radius: 3px;
+    background-color: var(--fp-color-housing);
+    box-shadow:
+      inset 1px 1px 2px rgb(0 0 0 / 0.5),
+      1px 1px 0 var(--fp-color-bevel-hi);
+
+    &[data-orientation="horizontal"] {
+      inset: 50% 0.5rem auto;
+      width: auto;
+      height: 6px;
+      translate: 0 -50%;
+    }
+  }
+
+  /**
+   * A fader's cap: brushed chrome lit from the top left, with an ink grip line that marks the value.
+   * Place it along the slot with `bottom` (or `left` on its side, with `data-orientation="horizontal"`
+   * on the slot and cap as well as the fader).
+   */
+  .fp-fader-cap {
+    position: absolute;
+    inset-inline: 0;
+    height: 1.5rem;
+    border-radius: 4px;
+    background-image: linear-gradient(
+      180deg,
+      color-mix(in srgb, var(--fp-color-chrome-hi) 60%, var(--fp-color-chrome-100)) 0%,
+      var(--fp-color-chrome-100) 45%,
+      var(--fp-color-chrome-300) 100%
+    );
+    box-shadow:
+      0 0 0 1px var(--fp-color-edge),
+      inset 1px 1px 0 var(--fp-color-bevel-hi),
+      inset -1px -1px 0 var(--fp-color-bevel-lo),
+      1px 2px 0 var(--fp-color-cast);
+
+    @media (pointer: fine) {
+      height: 1.25rem;
+    }
+
+    &::after {
+      content: "";
+      position: absolute;
+      inset: 50% 20% auto;
+      height: 2px;
+      translate: 0 -50%;
+      border-radius: 1px;
+      background-color: var(--fp-color-ink);
+    }
+
+    &[data-orientation="horizontal"] {
+      inset-inline: auto;
+      inset-block: 0;
+      width: 1.5rem;
+      height: auto;
+
+      @media (pointer: fine) {
+        width: 1.25rem;
+      }
+
+      &::after {
+        inset: 20% auto 20% 50%;
+        width: 2px;
+        height: auto;
+        translate: -50% 0;
+      }
+    }
+
+    /* A solid ring with a glow outside it: the glow alone fails non-text contrast on light chrome. */
+    &:focus-visible {
+      outline: 2px solid var(--fp-color-focus-ring);
+      outline-offset: 2px;
+      filter: drop-shadow(0 0 3px var(--fp-color-focus));
+    }
+  }
+
+  /**
+   * Level meter: a strip of LED segments in a dark housing, lit green, then amber, then red. Set
+   * `--fp-meter-level` (0 to 1, in whole segments), `--fp-meter-segments` (12), and where amber and
+   * red begin, `--fp-meter-amber` (8/12) and `--fp-meter-red` (11/12), as shares of the strip on
+   * segment edges, or a segment lights in two colours. It stands
+   * up by default and lies on its side with `data-orientation="horizontal"`; `--fp-meter-length`
+   * sets how long it is (8rem). Give it `role="meter"` and its values, or `aria-hidden` beside a
+   * readout that says the same.
+   */
+  .fp-meter {
+    --fp-meter-zones: linear-gradient(
+      to top,
+      var(--fp-color-led-on) 0 calc(var(--fp-meter-amber, calc(8 / 12)) * 100%),
+      var(--fp-color-led-amber) 0 calc(var(--fp-meter-red, calc(11 / 12)) * 100%),
+      var(--fp-color-led-red) 0
+    );
+    --fp-meter-gaps: repeating-linear-gradient(
+      to top,
+      #000 0 calc(100% / var(--fp-meter-segments, 12) - 2px),
+      transparent 0 calc(100% / var(--fp-meter-segments, 12))
+    );
+
+    /* Lit segments spill a little light into the gaps beside them: the lens's glow. */
+    --fp-meter-lit-gaps: repeating-linear-gradient(
+      to top,
+      #000 0 calc(100% / var(--fp-meter-segments, 12) - 2px),
+      rgb(0 0 0 / calc(0.18 * var(--fp-led-glow, 1))) 0 calc(100% / var(--fp-meter-segments, 12))
+    );
+    --fp-meter-cell: 100% calc(100% / var(--fp-meter-segments, 12));
+    position: relative;
+    display: inline-block;
+    flex-shrink: 0;
+    width: 0.75rem;
+    height: var(--fp-meter-length, 8rem);
+    border-radius: 3px;
+    background-color: var(--fp-color-housing);
+    box-shadow:
+      inset 1px 1px 2px rgb(0 0 0 / 0.5),
+      1px 1px 0 var(--fp-color-bevel-hi);
+
+    /* Each segment's gap sits at its far end, so the strip's own inset at that end is the gap. */
+    &::before,
+    &::after {
+      content: "";
+      position: absolute;
+      inset: 0 2px 2px;
+      background-image: var(--fp-meter-zones);
+      mask-image: var(--fp-meter-gaps);
+    }
+
+    /* Unlit segments are the LED's off colour with a trace of their zone's, so the zones show. */
+    &::before {
+      background-image:
+        linear-gradient(color-mix(in srgb, var(--fp-color-led-off) 75%, transparent) 0 0),
+        var(--fp-meter-zones);
+    }
+
+    /*
+     * A lit segment is brightest over its chip, in the middle, by the lens. The cut sits 1 px into the
+     * gap below the next segment, so rounding never lights a sliver of it.
+     */
+    &::after {
+      background-image:
+        radial-gradient(closest-side, rgb(255 255 255 / var(--fp-led-core, 0.3)), transparent),
+        var(--fp-meter-zones);
+      background-position: left bottom;
+      background-size: var(--fp-meter-cell), auto;
+      mask-image: var(--fp-meter-lit-gaps);
+      clip-path: inset(calc((1 - var(--fp-meter-level, 0)) * 100% + 1px) 0 0 0);
+    }
+
+    /* Forced colours: the strip as an outline and the lit segments in CanvasText, so the level shows. */
+    @media (forced-colors: active) {
+      outline: 1px solid CanvasText;
+
+      &::before {
+        content: none;
+      }
+
+      &::after {
+        forced-color-adjust: none;
+        background: CanvasText;
+        mask-image: var(--fp-meter-gaps);
+      }
+    }
+
+    &[data-orientation="horizontal"] {
+      --fp-meter-zones: linear-gradient(
+        to right,
+        var(--fp-color-led-on) 0 calc(var(--fp-meter-amber, calc(8 / 12)) * 100%),
+        var(--fp-color-led-amber) 0 calc(var(--fp-meter-red, calc(11 / 12)) * 100%),
+        var(--fp-color-led-red) 0
+      );
+      --fp-meter-gaps: repeating-linear-gradient(
+        to right,
+        #000 0 calc(100% / var(--fp-meter-segments, 12) - 2px),
+        transparent 0 calc(100% / var(--fp-meter-segments, 12))
+      );
+      --fp-meter-lit-gaps: repeating-linear-gradient(
+        to right,
+        #000 0 calc(100% / var(--fp-meter-segments, 12) - 2px),
+        rgb(0 0 0 / calc(0.18 * var(--fp-led-glow, 1))) 0 calc(100% / var(--fp-meter-segments, 12))
+      );
+      --fp-meter-cell: calc(100% / var(--fp-meter-segments, 12)) 100%;
+      width: var(--fp-meter-length, 8rem);
+      height: 0.75rem;
+
+      &::before,
+      &::after {
+        inset: 2px 0 2px 2px;
+      }
+
+      &::after {
+        clip-path: inset(0 calc((1 - var(--fp-meter-level, 0)) * 100% + 1px) 0 0);
+      }
+    }
+  }
+
+  /**
+   * Seven-segment readout: LED digits on a near-black face, set in the housing. Each character is an
+   * fp-readout-cell, and the value is said in an fp-readout-text inside. Green by default; colour it
+   * with fp-led-amber or fp-led-red. Lit digits pass as text on the face at any size.
+   */
+  .fp-readout {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.1875rem;
+    padding: 0.3125rem 0.4375rem;
+    border: 3px solid var(--fp-color-housing);
+    border-radius: 5px;
+    background-color: color-mix(in srgb, var(--fp-color-led-off) 70%, black);
+    box-shadow:
+      inset 1px 1px 3px rgb(0 0 0 / 0.8),
+      0 1px 0 var(--fp-color-bevel-hi);
+  }
+
+  /**
+   * One character of an fp-readout, leaning a little like a real display. It shows its unlit
+   * segments itself, a figure eight and a point, faintly in the lit colour; put the lit ones in an
+   * fp-readout-lit inside. With `data-colon` it is a narrow colon cell. `--fp-readout-height` sets
+   * its height (2rem). Give it aria-hidden="true".
+   */
+  .fp-readout-cell {
+    position: relative;
+    flex-shrink: 0;
+    height: var(--fp-readout-height, 2rem);
+    aspect-ratio: 15 / 22;
+    transform: skewX(-6deg);
+
+    &::before {
+      content: "";
+      position: absolute;
+      inset: 0;
+      background-color: color-mix(in srgb, var(--fp-color-led-off) 75%, var(--fp-led, var(--fp-color-led-on)));
+      mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 22'%3E%3Cpolygon points='1.5,1 2.5,0 9.5,0 10.5,1 9.5,2 2.5,2'/%3E%3Cpolygon points='11,1.5 12,2.5 12,9.5 11,10.5 10,9.5 10,2.5'/%3E%3Cpolygon points='11,11.5 12,12.5 12,19.5 11,20.5 10,19.5 10,12.5'/%3E%3Cpolygon points='1.5,21 2.5,20 9.5,20 10.5,21 9.5,22 2.5,22'/%3E%3Cpolygon points='1,11.5 2,12.5 2,19.5 1,20.5 0,19.5 0,12.5'/%3E%3Cpolygon points='1,1.5 2,2.5 2,9.5 1,10.5 0,9.5 0,2.5'/%3E%3Cpolygon points='1.5,11 2.5,10 9.5,10 10.5,11 9.5,12 2.5,12'/%3E%3Ccircle cx='13.5' cy='21' r='1.2'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
+    }
+
+    &[data-colon] {
+      aspect-ratio: 5 / 22;
+
+      &::before {
+        content: none;
+      }
+    }
+
+    /* With forced colours, only the lit digits show: a ghost in a system colour blurs into them. */
+    @media (forced-colors: active) {
+      &::before {
+        content: none;
+      }
+    }
+  }
+
+  /**
+   * The lit segments of an fp-readout-cell: an element for each, named by `data-segment`, `a` to `g`
+   * (top, then clockwise, then the middle), `dp`, or a colon's `colon-upper` and `colon-lower`. Each
+   * is brightest over its chip, in the middle, and they glow onto the face, both by the lens.
+   */
+  .fp-readout-lit {
+    position: absolute;
+    inset: 0;
+    filter: drop-shadow(
+      0 0 calc(var(--fp-readout-height, 2rem) * 0.06 * var(--fp-led-glow, 1))
+        color-mix(in srgb, var(--fp-led, var(--fp-color-led-on)) 70%, transparent)
+    );
+
+    & > [data-segment] {
+      position: absolute;
+      background-color: var(--fp-led, var(--fp-color-led-on));
+      background-image: radial-gradient(
+        closest-side,
+        color-mix(in srgb, var(--fp-led, var(--fp-color-led-on)) calc((1 - var(--fp-led-core, 0.3)) * 100%), white),
+        var(--fp-led, var(--fp-color-led-on))
+      );
+    }
+
+    /* The bars, on the cell's 15 x 22 grid: 9 long and 2 thick, pointed at both ends. */
+    & > [data-segment="a"],
+    & > [data-segment="d"],
+    & > [data-segment="g"] {
+      left: 10%;
+      width: 60%;
+      height: 9.0909%;
+      clip-path: polygon(0 50%, 11.1111% 0, 88.8889% 0, 100% 50%, 88.8889% 100%, 11.1111% 100%);
+    }
+
+    & > [data-segment="b"],
+    & > [data-segment="c"],
+    & > [data-segment="e"],
+    & > [data-segment="f"] {
+      width: 13.3333%;
+      height: 40.9091%;
+      clip-path: polygon(50% 0, 100% 11.1111%, 100% 88.8889%, 50% 100%, 0 88.8889%, 0 11.1111%);
+    }
+
+    & > [data-segment="a"] {
+      top: 0;
+    }
+
+    & > [data-segment="g"] {
+      top: 45.4545%;
+    }
+
+    & > [data-segment="d"] {
+      top: 90.9091%;
+    }
+
+    & > [data-segment="b"],
+    & > [data-segment="c"] {
+      left: 66.6667%;
+    }
+
+    & > [data-segment="e"],
+    & > [data-segment="f"] {
+      left: 0;
+    }
+
+    & > [data-segment="b"],
+    & > [data-segment="f"] {
+      top: 6.8182%;
+    }
+
+    & > [data-segment="c"],
+    & > [data-segment="e"] {
+      top: 52.2727%;
+    }
+
+    & > [data-segment="dp"],
+    & > [data-segment="colon-upper"],
+    & > [data-segment="colon-lower"] {
+      aspect-ratio: 1;
+      border-radius: 50%;
+    }
+
+    & > [data-segment="dp"] {
+      top: 90%;
+      left: 82%;
+      width: 16%;
+    }
+
+    & > [data-segment="colon-upper"],
+    & > [data-segment="colon-lower"] {
+      left: 26%;
+      width: 48%;
+    }
+
+    & > [data-segment="colon-upper"] {
+      top: 26.3636%;
+    }
+
+    & > [data-segment="colon-lower"] {
+      top: 62.7273%;
+    }
+
+    @media (forced-colors: active) {
+      filter: none;
+
+      & > [data-segment] {
+        forced-color-adjust: none;
+        background: CanvasText;
+      }
+    }
+  }
+
+  /** An fp-readout's value as text, for screen readers: hidden from view, read in place of the digits. */
+  .fp-readout-text {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+
+  /** Matte content panel. This is where reading happens: no gloss, a 1 px bevel and a short hard shadow. */
+  .fp-module {
+    color-scheme: var(--fp-scheme);
+    border-radius: 10px;
+    background-color: var(--fp-color-shell-matte);
+    box-shadow:
+      0 0 0 1px var(--fp-color-edge),
+      inset 1px 1px 0 var(--fp-color-bevel-hi),
+      inset -1px -1px 0 var(--fp-color-bevel-lo),
+      2px 3px 0 var(--fp-color-cast);
+  }
+
+  /** A module's own little title bar, in brushed chrome. */
+  .fp-module-title {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    min-height: 1.875rem;
+    padding: 0.25rem 0.625rem;
+    border-radius: 10px 10px 0 0;
+    border-bottom: 1px solid var(--fp-color-edge);
+    background-image: linear-gradient(
+      180deg,
+      color-mix(in srgb, var(--fp-color-chrome-hi) 60%, var(--fp-color-chrome-100)) 0%,
+      var(--fp-color-chrome-100) 40%,
+      var(--fp-color-chrome-300) 100%
+    );
+  }
+
+  /**
+   * A window: a module (or, in the page extra, a sheet panel) whose fp-module-title stays in view
+   * while its body scrolls under it.
+   */
+  .fp-window {
+    /* Its top corners follow the window's, which differ between a module and a sheet. */
+    & > .fp-module-title {
+      position: sticky;
+      top: 0;
+      z-index: 1;
+      border-start-start-radius: inherit;
+      border-start-end-radius: inherit;
+    }
+
+    /* Title-bar buttons stay small with a precise pointer; touch keeps the 44 px target. */
+    @media (pointer: fine) {
+      & > .fp-module-title .fp-chrome-btn {
+        min-height: 1.75rem;
+        min-width: 1.75rem;
+      }
+    }
+  }
+
+  /** A window's name in its title bar. Pair it with fp-silk; it pushes the title-bar buttons to the far end. */
+  .fp-window-title {
+    margin: 0;
+    margin-inline-end: auto;
+    font-weight: 400;
+  }
+
+  /** The padded body under a window's title bar. */
+  .fp-window-body {
+    padding: 0.75rem;
+  }
+
+  /** Recessed well inside a matte panel, for secondary content or an empty slot. */
+  .fp-well {
+    color-scheme: var(--fp-scheme);
+    border-radius: 6px;
+    background-color: var(--fp-color-well);
+    box-shadow:
+      inset 1px 1px 2px var(--fp-color-bevel-lo),
+      inset -1px -1px 0 var(--fp-color-bevel-hi);
+  }
+
+  /** Silkscreened hardware label. */
+  .fp-silk {
+    font-family: var(--fp-font-display);
+    font-size: 11px;
+    line-height: 1.3;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--fp-color-ink-soft);
+  }
+
+  /** LCD glass, recessed into the chrome. Text on it uses `--fp-font-lcd`; drawings use `--fp-color-lcd-ink`. */
+  .fp-lcd {
+    border-radius: 8px;
+    color: var(--fp-color-lcd-ink);
+    background-color: var(--fp-color-lcd-bg);
+    background-image: repeating-linear-gradient(0deg, rgb(0 0 0 / 0.04) 0 1px, transparent 1px 3px);
+    box-shadow:
+      0 0 0 2px var(--fp-color-chrome-800),
+      inset 2px 2px 4px rgb(0 0 0 / 0.35),
+      inset -1px -1px 0 rgb(255 255 255 / 0.2);
+  }
+
+  /** One line of LCD text. Cells of fp-lcd-ghost stacked behind it show the unlit segments, as on real glass. */
+  .fp-lcd-line {
+    display: grid;
+    margin: 0;
+    font-family: var(--fp-font-lcd);
+    white-space: pre;
+
+    & > * {
+      grid-area: 1 / 1;
+    }
+  }
+
+  /** The unlit segments behind an LCD line. Decorative: give it aria-hidden="true". */
+  .fp-lcd-ghost {
+    color: var(--fp-color-lcd-ghost);
+  }
+
+  /** Dark housing that LEDs and small readouts sit in. */
+  .fp-housing {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+    border-radius: 9999px;
+    padding: 0.125rem 0.5rem;
+    color: var(--fp-color-housing-ink);
+    font-size: 12px;
+    font-weight: 700;
+    background-color: var(--fp-color-housing);
+    box-shadow:
+      inset 1px 1px 2px rgb(0 0 0 / 0.5),
+      0 1px 0 var(--fp-color-bevel-hi);
+  }
+
+  /** An LED with its own dark bezel ring, so a lit one reads on light chrome too. Unlit by default. */
+  .fp-led {
+    display: inline-block;
+    flex-shrink: 0;
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 9999px;
+    background-color: var(--fp-color-led-off);
+    box-shadow:
+      0 0 0 2px var(--fp-color-housing),
+      inset 0 -1px 1px rgb(0 0 0 / 0.45);
+
+    /* Forced colours drop the fill and the ring: an outline keeps an unlit LED in view. */
+    @media (forced-colors: active) {
+      outline: 1px solid CanvasText;
+      outline-offset: 1px;
+    }
+  }
+
+  /** Green for an fp-led or fp-readout, the default. */
+  .fp-led-green {
+    --fp-led: var(--fp-color-led-on);
+  }
+
+  /** Amber for an fp-led or fp-readout. */
+  .fp-led-amber {
+    --fp-led: var(--fp-color-led-amber);
+  }
+
+  /** Red for an fp-led or fp-readout. */
+  .fp-led-red {
+    --fp-led: var(--fp-color-led-red);
+  }
+
+  /**
+   * Lights an fp-led in its colour, brightest over the chip in its middle, with a glow. The lens sets
+   * how strong both are. Say what it means in text nearby, never by colour alone.
+   */
+  .fp-led-lit {
+    background-color: var(--fp-led, var(--fp-color-led-on));
+    background-image: radial-gradient(
+      closest-side,
+      color-mix(in srgb, var(--fp-led, var(--fp-color-led-on)) calc((1 - var(--fp-led-core, 0.3)) * 100%), white),
+      var(--fp-led, var(--fp-color-led-on))
+    );
+    box-shadow:
+      0 0 0 2px var(--fp-color-housing),
+      0 0 calc(7px * var(--fp-led-glow, 1)) calc(2px * var(--fp-led-glow, 1))
+        color-mix(in srgb, var(--fp-led, var(--fp-color-led-on)) 65%, transparent),
+      inset 0 -1px 1px rgb(0 0 0 / 0.2);
+
+    /* Lit is filled, so it reads apart from unlit by shape as well as colour. */
+    @media (forced-colors: active) {
+      forced-color-adjust: none;
+      background: CanvasText;
+      box-shadow: none;
+    }
+  }
+
+  /**
+   * LED lens, flat: an even fill with no hot spot. A lens class works on an fp-led, fp-meter or
+   * fp-readout, or on any element around them, such as a device body, to set every one inside.
+   */
+  .fp-lens-flat {
+    --fp-led-core: 0;
+    --fp-led-glow: 1;
+  }
+
+  /**
+   * LED lens, diffused, the default: like most real displays, each LED is a little brighter over its
+   * chip, in the middle, with a soft glow.
+   */
+  .fp-lens-diffused {
+    --fp-led-core: 0.3;
+    --fp-led-glow: 1;
+  }
+
+  /** LED lens, clear: a bright, pale core over each chip and a wider glow, like a water-clear lens. */
+  .fp-lens-clear {
+    --fp-led-core: 0.5;
+    --fp-led-glow: 1.5;
+  }
+
+  /** Decorative screw head. Give it aria-hidden="true". */
+  .fp-screw {
+    display: inline-block;
+    flex-shrink: 0;
+    width: 10px;
+    height: 10px;
+    border-radius: 9999px;
+    background-image:
+      linear-gradient(135deg, transparent 44%, var(--fp-color-chrome-800) 44% 56%, transparent 56%),
+      radial-gradient(circle at 35% 30%, var(--fp-color-chrome-hi), var(--fp-color-chrome-300) 60%, var(--fp-color-chrome-500));
+    box-shadow: 0 0 0 1px var(--fp-color-edge);
+  }
+
+  /** A scrolling panel, such as a list window, with a thin scrollbar that never pushes the layout. */
+  .fp-scroll-thin {
+    color-scheme: var(--fp-scheme);
+    scrollbar-width: thin;
+    scrollbar-color: var(--fp-color-scroll-thumb) transparent;
+  }
+
+  /** A 16 px pixel icon. Size it in whole multiples of 16 px so its pixels stay crisp. */
+  .fp-icon {
+    flex-shrink: 0;
+    width: 16px;
+    height: 16px;
+    fill: currentColor;
+    shape-rendering: crispEdges;
+  }
+}