/* Must be declared before this file or Tailwind is first loaded. Otherwise
   @layer flapkit is created first and loses to Tailwind preflight (* { padding: 0 }). */
/* Style the public primitives with ordinary CSS. All custom properties below are
   private renderer geometry/materials, not a consumer configuration API. */
@layer theme, base, components, flapkit, utilities;

@layer flapkit {
  :where(.flapkit-sr-only) {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  :where(.flapkit-board) {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    margin: 0;
    padding: var(--flapkit-frame-top, 16px) var(--flapkit-frame-right, 16px)
      var(--flapkit-frame-bottom, 16px) var(--flapkit-frame-left, 16px);
    row-gap: 3.2px;
    width: max-content;
    overflow: hidden;
    border-radius: 1px;
    background-color: var(--flapkit-board-background-color);
    background-image: var(--flapkit-board-background-image);
    box-shadow: var(--flapkit-board-shadow);
  }
  :where(.flapkit-board-content) {
    position: relative;
    display: block;
    box-sizing: border-box;
    row-gap: inherit;
  }
  :where(.flapkit-standalone-grid) {
    position: relative;
    z-index: 1;
    margin: 0;
    width: max-content;
    overflow: clip;
    overflow-clip-margin: 1px;
    isolation: isolate;
    row-gap: 3.2px;
  }
  :where(.flapkit-outer-rim) {
    position: absolute;
    z-index: 2;
    inset: 5px;
    border-radius: 0.5px;
    box-shadow: var(--flapkit-outer-rim-shadow);
    pointer-events: none;
  }
  :where(.flapkit-inner-rim) {
    position: absolute;
    z-index: 2;
    top: calc(var(--flapkit-rendered-header-height) - 1px);
    right: -5px;
    bottom: -5px;
    left: -5px;
    border-radius: 0;
    box-shadow: var(--flapkit-inner-rim-shadow);
    pointer-events: none;
  }
  :where(.flapkit-board-sheen) {
    position: absolute;
    z-index: 4;
    inset: 0;
    background-image: var(--flapkit-board-sheen);
    pointer-events: none;
  }
  :where(.flapkit-board-grain) {
    position: absolute;
    z-index: 5;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.32;
    mix-blend-mode: overlay;
    pointer-events: none;
  }
  :where(.flapkit-board-header) {
    position: relative;
    z-index: 3;
    display: grid;
    box-sizing: border-box;
    width: 0;
    min-width: 100%;
    height: var(--flapkit-rendered-header-height);
    grid-template-rows: max-content 1fr;
    color: var(--flapkit-header-color);
    font-family: var(--flapkit-label-font-family);
    text-shadow: var(--flapkit-header-text-shadow);
    text-transform: uppercase;
    pointer-events: none;
  }
  :where(.flapkit-board-column-labels) {
    display: grid;
    align-self: end;
    min-width: 0;
    padding-bottom: 8px;
    color: var(--flapkit-column-label-color);
    font-size: 7.5px;
    font-weight: 570;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.075em;
    line-height: 1;
  }
  :where(.flapkit-board-column-label) {
    overflow: hidden;
    min-width: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  :where(.flapkit-grid) {
    position: relative;
    z-index: 3;
    display: grid;
    width: max-content;
    row-gap: inherit;
    background-color: var(--flapkit-grid-background-color);
    background-image: var(--flapkit-grid-background-image);
    box-shadow: var(--flapkit-grid-shadow);
  }
  :where(.flapkit-motion-canvas) {
    position: absolute;
    z-index: 5;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }
  :where(.flapkit-static-motion-canvas) {
    z-index: 4;
  }
  :where(.flapkit-departure-row) {
    position: relative;
    display: flex;
    gap: 6.4px;
    width: max-content;
    background-color: var(--flapkit-row-background-color);
    background-image: var(--flapkit-row-background-image);
    box-shadow: var(--flapkit-row-shadow);
  }
  :where(.flapkit-departure-group) {
    position: relative;
    display: flex;
    gap: 0.56px;
    min-width: 0;
  }
  :where(.flapkit-departure-row[data-flat]) {
    gap: 0.56px;
  }
  :where(.flapkit-departure-row[data-flat] > .flapkit-departure-group) {
    display: contents;
  }
  :where(.flapkit-cassette-scale) {
    position: absolute;
    display: block;
    width: 1000%;
    height: 100%;
    container-type: inline-size;
    pointer-events: none;
  }
  :where(.flapkit-cassette-body) {
    display: block;
    position: relative;
    width: 10%;
    height: 100%;
  }
  .flapkit-cassette:where([data-wide]) {
    width: calc(2 * var(--flapkit-cell-track, 20px));
  }
  :where(.flapkit-cassette[data-wide] > .flapkit-cassette-scale) {
    width: 500%;
  }
  :where(.flapkit-cassette[data-wide] > .flapkit-cassette-scale > .flapkit-cassette-body) {
    width: 20%;
  }
  :where(.flapkit-departure-group-scale-context) {
    position: relative;
    container-type: inline-size;
    pointer-events: none;
  }
  :where(.flapkit-departure-group-grid) {
    display: grid;
    height: max-content;
    pointer-events: auto;
  }
  :where(.flapkit-cassette) {
    font-size: var(--fk-default-font-size, 19.1px);
    letter-spacing: var(--flapkit-glyph-tracking);
    /* Canvas text ignores the host's `antialiased` smoothing; keep the DOM glyph on the
       same raster weight so the canvas -> DOM hand-off after a pitch does not jump. */
    -webkit-font-smoothing: auto;
    position: relative;
    display: block;
    flex: none;
    width: var(--flapkit-cell-track, 20px);
    height: var(--flapkit-cell-height, 34px);
    min-width: 0;
    overflow: visible;
    border-radius: var(--flapkit-cassette-radius);
    background-color: var(--flapkit-cassette-background-color);
    background-image: var(--flapkit-cassette-background-image);
    box-shadow: var(--flapkit-cassette-shadow);

    /* Per-cell wear is driven by a handful of `--fk-*` numbers the renderer writes on the
       cassette root (see cassette.tsx). Everything below composes them into the shared
       materials so the inline style stays a few hundred bytes per cassette. */
    /* Leaf clearance = activeLeafClearance + spareLeafStep * (splitFlapSpareLeafCount - 1). */
    --flapkit-active-bottom-inset: calc(var(--flapkit-face-inset-y) + 1.6cqw);
    --fk-top-face: color-mix(
      in srgb,
      var(--flapkit-top-face-color) var(--fk-hlfi, 100%),
      var(--flapkit-highlight-face) var(--fk-hlf, 0%)
    );
    --fk-bottom-face: color-mix(
      in srgb,
      var(--flapkit-bottom-face-color) var(--fk-hlfi, 100%),
      var(--flapkit-highlight-face) var(--fk-hlf, 0%)
    );
    --flapkit-glyph-white-top: color-mix(
      in srgb,
      var(--flapkit-glyph-white) var(--fk-hlgi, 100%),
      var(--flapkit-highlight-glyph) var(--fk-hlg, 0%)
    );
    --flapkit-glyph-white-bottom: color-mix(
      in srgb,
      var(--flapkit-glyph-white-top) 96%,
      var(--fk-bottom-face) 4%
    );
    --flapkit-glyph-yellow-top: color-mix(
      in srgb,
      var(--flapkit-glyph-yellow) var(--fk-hlgi, 100%),
      var(--flapkit-highlight-glyph) var(--fk-hlg, 0%)
    );
    --flapkit-glyph-yellow-bottom: color-mix(
      in srgb,
      var(--flapkit-glyph-yellow-top) 96%,
      var(--fk-bottom-face) 4%
    );
    --flapkit-glyph-orange-top: color-mix(
      in srgb,
      var(--flapkit-glyph-orange) var(--fk-hlgi, 100%),
      var(--flapkit-highlight-glyph) var(--fk-hlg, 0%)
    );
    --flapkit-glyph-orange-bottom: color-mix(
      in srgb,
      var(--flapkit-glyph-orange-top) 96%,
      var(--fk-bottom-face) 4%
    );
    /* Scratch + mottle wear layers over the look's face surface. */
    --fk-top-wear:
      linear-gradient(
        var(--fk-tsa),
        transparent calc(var(--fk-tsx) - 1%),
        rgba(218, 210, 176, var(--fk-tso)) var(--fk-tsx),
        transparent calc(var(--fk-tsx) + 1.2%)
      ),
      radial-gradient(
        ellipse 68% 42% at var(--fk-tmx) var(--fk-tmy),
        rgba(0, 0, 0, var(--fk-tma)) 0%,
        transparent 72%
      ),
      var(--flapkit-top-face-surface);
    --fk-bottom-wear:
      linear-gradient(
        var(--fk-bsa),
        transparent calc(var(--fk-bsx) - 1%),
        rgba(218, 210, 176, var(--fk-bso)) var(--fk-bsx),
        transparent calc(var(--fk-bsx) + 1.2%)
      ),
      radial-gradient(
        ellipse 72% 46% at var(--fk-bmx) var(--fk-bmy),
        rgba(0, 0, 0, var(--fk-bma)) 0%,
        transparent 74%
      ),
      var(--flapkit-bottom-face-surface);
    --fk-seam-image: linear-gradient(
      90deg,
      rgba(4 5 3 / calc(0.98 * var(--flapkit-seam-opacity))) 0%,
      rgba(9 10 7 / calc(0.94 * var(--flapkit-seam-opacity))) 38%,
      rgba(5 6 4 / var(--flapkit-seam-opacity)) 78%,
      rgba(3 4 3 / calc(0.97 * var(--flapkit-seam-opacity))) 100%
    );
    --fk-bezel-image:
      linear-gradient(
        90deg,
        rgba(82, 83, 68, 0.5) 0,
        rgba(5, 6, 4, 0.96) 0.06cqw,
        rgba(0, 0, 0, 0.42) 0.22cqw,
        transparent 0.54cqw
      ),
      linear-gradient(
        270deg,
        rgba(72, 73, 60, 0.44) 0,
        rgba(5, 6, 4, 0.94) 0.06cqw,
        rgba(0, 0, 0, 0.36) 0.22cqw,
        transparent 0.5cqw
      ),
      linear-gradient(180deg, rgba(4, 5, 3, 0.86) 0, transparent 0.44cqw),
      linear-gradient(0deg, rgba(3, 4, 2, 0.88) 0, transparent 0.18cqw);
  }
  :where(.flapkit-compact-cassette) {
    /* Spare-leaf magazine painted as background layers; `--fk-l{n}-*` come from the renderer. */
    --fk-leaf-0: linear-gradient(
        180deg,
        color-mix(in srgb, var(--flapkit-spare-leaf-top-color, #24251e) var(--fk-l0-k), black) 0%,
        color-mix(in srgb, var(--flapkit-spare-leaf-middle-color, #171812) var(--fk-l0-k), black)
          var(--flapkit-spare-leaf-middle-stop, 86%),
        color-mix(in srgb, var(--flapkit-spare-leaf-lower-color, #181910) var(--fk-l0-k), black)
          var(--flapkit-spare-leaf-lower-stop, 96.2%),
        color-mix(in srgb, var(--flapkit-spare-leaf-edge-color, #585644) var(--fk-l0-e), black)
          var(--flapkit-spare-leaf-edge-start, 97.6%),
        color-mix(in srgb, var(--flapkit-spare-leaf-edge-color, #585644) var(--fk-l0-e), black)
          var(--flapkit-spare-leaf-edge-end, 98.3%),
        color-mix(in srgb, var(--flapkit-spare-leaf-lower-color, #181910) var(--fk-l0-k), black)
          var(--flapkit-spare-leaf-tail-stop, 98.9%),
        rgba(0, 0, 0, var(--fk-l0-s)) 100%
      )
      calc(50% + var(--fk-l0-x)) calc(100% - var(--flapkit-face-inset-y) - var(--fk-l0-y)) /
      calc(100% - var(--flapkit-face-inset-x) - var(--flapkit-face-inset-x) + 0.12cqw)
      calc(50% - var(--flapkit-face-inset-y)) no-repeat;
    --fk-leaf-1: linear-gradient(
        180deg,
        color-mix(in srgb, var(--flapkit-spare-leaf-top-color, #24251e) var(--fk-l1-k), black) 0%,
        color-mix(in srgb, var(--flapkit-spare-leaf-middle-color, #171812) var(--fk-l1-k), black)
          var(--flapkit-spare-leaf-middle-stop, 86%),
        color-mix(in srgb, var(--flapkit-spare-leaf-lower-color, #181910) var(--fk-l1-k), black)
          var(--flapkit-spare-leaf-lower-stop, 96.2%),
        color-mix(in srgb, var(--flapkit-spare-leaf-edge-color, #585644) var(--fk-l1-e), black)
          var(--flapkit-spare-leaf-edge-start, 97.6%),
        color-mix(in srgb, var(--flapkit-spare-leaf-edge-color, #585644) var(--fk-l1-e), black)
          var(--flapkit-spare-leaf-edge-end, 98.3%),
        color-mix(in srgb, var(--flapkit-spare-leaf-lower-color, #181910) var(--fk-l1-k), black)
          var(--flapkit-spare-leaf-tail-stop, 98.9%),
        rgba(0, 0, 0, var(--fk-l1-s)) 100%
      )
      calc(50% + var(--fk-l1-x)) calc(100% - var(--flapkit-face-inset-y) - var(--fk-l1-y)) /
      calc(100% - var(--flapkit-face-inset-x) - var(--flapkit-face-inset-x) + 0.12cqw)
      calc(50% - var(--flapkit-face-inset-y)) no-repeat;
    --fk-leaf-2: linear-gradient(
        180deg,
        color-mix(in srgb, var(--flapkit-spare-leaf-top-color, #24251e) var(--fk-l2-k), black) 0%,
        color-mix(in srgb, var(--flapkit-spare-leaf-middle-color, #171812) var(--fk-l2-k), black)
          var(--flapkit-spare-leaf-middle-stop, 86%),
        color-mix(in srgb, var(--flapkit-spare-leaf-lower-color, #181910) var(--fk-l2-k), black)
          var(--flapkit-spare-leaf-lower-stop, 96.2%),
        color-mix(in srgb, var(--flapkit-spare-leaf-edge-color, #585644) var(--fk-l2-e), black)
          var(--flapkit-spare-leaf-edge-start, 97.6%),
        color-mix(in srgb, var(--flapkit-spare-leaf-edge-color, #585644) var(--fk-l2-e), black)
          var(--flapkit-spare-leaf-edge-end, 98.3%),
        color-mix(in srgb, var(--flapkit-spare-leaf-lower-color, #181910) var(--fk-l2-k), black)
          var(--flapkit-spare-leaf-tail-stop, 98.9%),
        rgba(0, 0, 0, var(--fk-l2-s)) 100%
      )
      calc(50% + var(--fk-l2-x)) calc(100% - var(--flapkit-face-inset-y) - var(--fk-l2-y)) /
      calc(100% - var(--flapkit-face-inset-x) - var(--flapkit-face-inset-x) + 0.12cqw)
      calc(50% - var(--flapkit-face-inset-y)) no-repeat;
  }
  :where(.flapkit-compact-cassette)::after {
    position: absolute;
    z-index: 7;
    inset: 0;
    content: '';
    background-image: var(--flapkit-compact-cover-detail);
    pointer-events: none;
  }
  :where(.flapkit-cell) {
    position: absolute;
    top: var(--flapkit-cavity-top);
    right: var(--flapkit-cavity-right);
    bottom: var(--flapkit-cavity-bottom);
    left: var(--flapkit-cavity-left);
    overflow: clip;
    perspective: 22cqw;
    perspective-origin: 50% 50%;
    border-radius: var(--flapkit-face-radius);
    background-color: var(--flapkit-cavity-color);
    box-shadow: var(--flapkit-cavity-shadow);
  }
  :where(.flapkit-compact-cell) {
    isolation: isolate;
    /* Magazine (nearest leaf last), four cavity walls, ridged back plane. */
    background:
      var(--fk-leaf-2),
      var(--fk-leaf-1),
      var(--fk-leaf-0),
      linear-gradient(
          180deg,
          rgba(41, 40, 37, 0.74) 0%,
          rgba(18, 17, 16, 0.96) 54%,
          rgba(5, 5, 5, 0.98) 100%
        )
        top / 100% 0.52cqw no-repeat,
      linear-gradient(
          90deg,
          rgba(14, 13, 12, 0.98) 0%,
          rgba(31, 29, 27, 0.84) 58%,
          rgba(4, 4, 4, 0.98) 100%
        )
        right / 0.52cqw 100% no-repeat,
      linear-gradient(
          0deg,
          rgba(4, 4, 4, 0.99) 0%,
          rgba(8, 8, 8, 0.98) 78%,
          rgba(36, 36, 32, 0.55) 94%,
          rgba(28, 28, 24, 0.7) 97%,
          rgba(8, 8, 8, 0.98) 100%
        )
        bottom / 100% 0.52cqw no-repeat,
      linear-gradient(
          270deg,
          rgba(13, 12, 11, 0.98) 0%,
          rgba(29, 27, 25, 0.83) 58%,
          rgba(4, 4, 4, 0.98) 100%
        )
        left / 0.52cqw 100% no-repeat,
      repeating-linear-gradient(
        180deg,
        transparent 0,
        transparent 0.28cqw,
        rgba(255, 255, 255, 0.016) 0.29cqw,
        rgba(0, 0, 0, 0.12) 0.31cqw
      ),
      linear-gradient(180deg, #10100f 0%, #080808 50%, #050505 100%);
    background-color: var(--flapkit-cavity-color);
  }
  :where(.flapkit-compact-cell)::after {
    position: absolute;
    z-index: 6;
    inset: 0;
    content: '';
    background-image: var(--fk-bezel-image);
    opacity: 0.92;
    pointer-events: none;
  }
  :where(.flapkit-cell-scene) {
    position: absolute;
    inset: 0;
    /* Stack settled leaves above the cavity; only the moving vane needs a
       shared 3D context. Keep its perspective local to this scene. */
    perspective: 22cqw;
    perspective-origin: 50% 50%;
    pointer-events: none;
  }
  /* Cavity depth shared by the back plane and the four walls. */
  :where(.flapkit-cavity-back-plane) {
    position: absolute;
    z-index: 0;
    inset: 0;
    background-color: var(--flapkit-cavity-back-plane-color);
    background-image: var(--flapkit-cavity-back-plane-image);
    box-shadow: var(--flapkit-cavity-back-plane-shadow);
    transform: translateZ(-0.52cqw);
    pointer-events: none;
  }
  :where(.flapkit-cavity-wall) {
    position: absolute;
    z-index: 1;
    background-color: var(--flapkit-cavity-wall-color);
    pointer-events: none;
  }
  :where(.flapkit-cavity-wall-top) {
    top: 0;
    right: 0;
    left: 0;
    height: 0.52cqw;
    background-image: var(--flapkit-cavity-wall-top-image);
    transform: rotateX(-90deg);
    transform-origin: 50% 0%;
  }
  :where(.flapkit-cavity-wall-right) {
    top: 0;
    right: 0;
    bottom: 0;
    width: 0.52cqw;
    background-image: var(--flapkit-cavity-wall-right-image);
    transform: rotateY(-90deg);
    transform-origin: 100% 50%;
  }
  :where(.flapkit-cavity-wall-bottom) {
    right: 0;
    bottom: 0;
    left: 0;
    height: 0.52cqw;
    /* Dark floor; looks may add a hairline at the front lip matching the leaf edge catch. */
    background-image: var(--flapkit-cavity-wall-bottom-image);
    transform: rotateX(90deg);
    transform-origin: 50% 100%;
  }
  :where(.flapkit-cavity-wall-left) {
    top: 0;
    bottom: 0;
    left: 0;
    width: 0.52cqw;
    background-image: var(--flapkit-cavity-wall-left-image);
    transform: rotateY(90deg);
    transform-origin: 0% 50%;
  }
  :where(.flapkit-face-layer) {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
  :where(.flapkit-outgoing-lower) {
    z-index: 2;
  }
  :where(.flapkit-arriving-upper) {
    z-index: 3;
  }
  :where(.flapkit-compact-glyph-carrier) {
    --compact-glyph-margin-left: var(--fk-gx);
    --compact-glyph-opacity: var(--flapkit-glyph-opacity);
  }
  /* Upper/lower leaf halves: glyph placement, face colour, and wear layers. */
  :where(.flapkit-compact-upper) {
    --compact-glyph-fallback-color: var(--flapkit-glyph-white-top);
    --compact-glyph-top: calc(
      var(--fk-half-cell, 6.1cqw) - 6.1cqw + var(--flapkit-glyph-y) - var(--flapkit-face-inset-y)
    );
    --compact-glyph-transform: translateX(-50%)
      scaleX(var(--flapkit-active-glyph-width, var(--flapkit-glyph-width)))
      scaleY(var(--flapkit-active-glyph-scale-y, var(--flapkit-glyph-scale-y, 0.78)));
    --wide-glyph-x-offset: 0cqw;
    background-color: var(--fk-top-face);
    background-image: linear-gradient(var(--fk-tbl), var(--fk-tbl)), var(--fk-top-wear);
  }
  :where(.flapkit-compact-lower) {
    --compact-glyph-fallback-color: var(--flapkit-glyph-white-bottom);
    --compact-glyph-top: calc(var(--flapkit-glyph-y) - 6.1cqw);
    --compact-glyph-transform: translateX(-50%) translateX(0.03cqw)
      scaleX(var(--flapkit-active-glyph-width, var(--flapkit-glyph-width)))
      scaleY(var(--flapkit-active-glyph-scale-y, var(--flapkit-glyph-scale-y, 0.78)));
    --wide-glyph-x-offset: 0.03cqw;
    background-color: var(--fk-bottom-face);
    background-image: linear-gradient(var(--fk-bbl), var(--fk-bbl)), var(--fk-bottom-wear);
  }
  :where(.flapkit-compact-glyph-carrier)::before {
    position: absolute;
    z-index: 4;
    top: var(--compact-glyph-top);
    left: 50%;
    display: block;
    content: attr(data-glyph);
    color: var(--flapkit-active-glyph-color, var(--compact-glyph-fallback-color, #e8e5d7));
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    line-height: 12.2cqw;
    margin-left: var(--compact-glyph-margin-left);
    opacity: var(--compact-glyph-opacity);
    text-align: center;
    text-shadow: 0 0 0.05cqw
      color-mix(
        in srgb,
        var(--flapkit-active-glyph-color, var(--compact-glyph-fallback-color, #e8e5d7)) 6%,
        transparent
      );
    transform: var(--compact-glyph-transform);
    transform-origin: 50% 50%;
    width: var(--compact-glyph-width, 10cqw);
    pointer-events: none;
  }
  :where(.flapkit-compact-glyph-carrier[data-custom-glyph])::before {
    color: inherit;
  }
  :where(.flapkit-compact-wide-glyph-carrier) {
    --compact-glyph-width: 20cqw;
    color: var(--flapkit-active-glyph-color, var(--compact-glyph-fallback-color, #e8e5d7));
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: 12.2cqw;
    opacity: var(--compact-glyph-opacity);
    text-shadow: 0 0 0.05cqw
      color-mix(
        in srgb,
        var(--flapkit-active-glyph-color, var(--compact-glyph-fallback-color, #e8e5d7)) 6%,
        transparent
      );
  }
  :where(.flapkit-compact-wide-glyph-carrier)::before {
    display: none;
  }
  :where(.flapkit-compact-static-face) {
    position: absolute;
    right: var(--flapkit-face-inset-x);
    left: var(--flapkit-face-inset-x);
    overflow: hidden;
    pointer-events: none;
    /* Own compositor layer: the glyph swaps every pitch, and without isolation each swap
       re-rasters the whole cavity tile (gradients + color-mix) on the GPU. */
    will-change: transform;
  }
  :where(.flapkit-compact-static-top) {
    z-index: 3;
    top: var(--flapkit-face-inset-y);
    height: calc(50% - var(--flapkit-face-inset-y));
    border-top-left-radius: var(--flapkit-face-radius);
    border-top-right-radius: var(--flapkit-face-radius);
    box-shadow: var(--flapkit-top-face-shadow);
    opacity: 0;
    transform-origin: 50% 100%;
  }
  :where(.flapkit-compact-static-bottom) {
    z-index: 2;
    top: 50%;
    bottom: var(--flapkit-active-bottom-inset);
    border-bottom-left-radius: var(--flapkit-face-radius);
    border-bottom-right-radius: var(--flapkit-face-radius);
    box-shadow: var(--flapkit-bottom-face-shadow);
    transform-origin: 50% 0%;
  }
  :where(.flapkit-compact-moving-vane) {
    z-index: 5;
    opacity: 0;
    will-change: transform;
  }
  :where(.flapkit-compact-moving-vane-face) {
    overflow: hidden;
    border-radius: var(--flapkit-face-radius);
    background-repeat: no-repeat;
  }
  :where(.flapkit-compact-moving-vane-face.flapkit-compact-upper) {
    clip-path: inset(
      var(--flapkit-face-inset-y) var(--flapkit-face-inset-x) 50% var(--flapkit-face-inset-x)
    );
    transform: translateZ(calc(var(--flapkit-leaf-thickness) / 2));
  }
  :where(.flapkit-compact-moving-vane-face.flapkit-compact-lower) {
    clip-path: inset(
      50% var(--flapkit-face-inset-x) var(--flapkit-active-bottom-inset) var(--flapkit-face-inset-x)
    );
    transform: translateZ(calc(var(--flapkit-leaf-thickness) / -2)) rotateX(180deg);
  }
  :where(.flapkit-compact-moving-stack) {
    position: absolute;
    z-index: 3;
    inset: 0;
    background:
      var(--fk-leaf-2),
      var(--fk-leaf-1),
      var(--fk-leaf-0),
      linear-gradient(rgba(5, 6, 5, 0.16), rgba(5, 6, 5, 0.16)) bottom / 100%
        calc(1.6cqw + var(--flapkit-face-inset-y)) no-repeat;
    clip-path: inset(calc(100% - 1.6cqw - var(--flapkit-face-inset-y)) 0 0);
    pointer-events: none;
    will-change: transform;
  }
  /* The 3D vane stays mounted but costs nothing until the controller activates the cassette. */
  :where(.flapkit-compact-cassette:not([data-split-flap-active]) .flapkit-compact-moving-stack),
  :where(.flapkit-compact-cassette:not([data-split-flap-active]) .flapkit-compact-moving-vane) {
    display: none;
  }
  /* Isolate an animating cassette so its per-pitch glyph repaints do not dirty the board's tiles. */
  :where(.flapkit-compact-cassette[data-split-flap-active]) {
    will-change: transform;
  }
  :where(.flapkit-moving-vane) {
    position: absolute;
    z-index: 4;
    inset: 0;
    transform: translate3d(0, 0, 0) rotateX(0deg);
    transform-origin: 50% 50%;
    transform-style: preserve-3d;
    pointer-events: none;
    will-change: transform;
  }
  :where(.flapkit-moving-vane-face) {
    position: absolute;
    inset: 0;
    isolation: isolate;
    backface-visibility: hidden;
    pointer-events: none;
  }
  :where(.flapkit-moving-vane-front) {
    transform: translateZ(calc(var(--flapkit-leaf-thickness) / 2));
  }
  :where(.flapkit-moving-vane-back) {
    transform: translateZ(calc(var(--flapkit-leaf-thickness) / -2)) rotateX(180deg);
  }
  /* Flat wash in the leaf plane. A positioned streak or background-attachment:
     fixed sits in screen space and slips as soon as the vane leaves 0deg. */
  :where(.flapkit-moving-vane-face)::after {
    position: absolute;
    inset: 0;
    z-index: 6;
    content: '';
    opacity: var(--flapkit-specular, 0);
    background-color: rgb(231 229 211 / 0.2);
    mix-blend-mode: soft-light;
    pointer-events: none;
  }
  :where(.flapkit-moving-vane-front)::after {
    clip-path: inset(
      var(--flapkit-face-inset-y) var(--flapkit-face-inset-x) 50% var(--flapkit-face-inset-x)
    );
  }
  :where(.flapkit-moving-vane-back)::after {
    clip-path: inset(
      50% var(--flapkit-face-inset-x)
        var(--flapkit-active-bottom-inset, var(--flapkit-face-inset-y)) var(--flapkit-face-inset-x)
    );
  }
  :where(.flapkit-moving-vane-side) {
    position: absolute;
    z-index: 7;
    top: var(--flapkit-face-inset-y);
    width: var(--flapkit-leaf-thickness);
    height: calc(50% - var(--flapkit-face-inset-y));
    background-color: var(--flapkit-vane-side-color);
    background-image: var(--flapkit-vane-side-image);
    box-shadow: var(--flapkit-vane-side-shadow);
    pointer-events: none;
  }
  /* After the vane crosses the seam it is the arriving lower leaf, which must
     stop short of the spare magazine the same way the idle lower face does. */
  :where([data-pitch-half='incoming'] .flapkit-moving-vane-side) {
    top: var(--flapkit-active-bottom-inset, var(--flapkit-face-inset-y));
    height: calc(50% - var(--flapkit-active-bottom-inset, var(--flapkit-face-inset-y)));
  }
  :where([data-pitch-half='incoming']) {
    --flapkit-moving-front-face-top: var(
      --flapkit-active-bottom-inset,
      var(--flapkit-face-inset-y)
    );
    --flapkit-moving-front-face-height: calc(
      50% - var(--flapkit-active-bottom-inset, var(--flapkit-face-inset-y))
    );
  }
  :where([data-pitch-half='incoming'] .flapkit-moving-vane-front)::after {
    clip-path: inset(
      var(--flapkit-active-bottom-inset, var(--flapkit-face-inset-y)) var(--flapkit-face-inset-x)
        50% var(--flapkit-face-inset-x)
    );
  }
  :where(.flapkit-moving-vane-side-left) {
    left: calc(var(--flapkit-face-inset-x) - var(--flapkit-leaf-thickness) / 2);
    transform: rotateY(90deg);
    transform-origin: 50% 50%;
  }
  :where(.flapkit-moving-vane-side-right) {
    right: calc(var(--flapkit-face-inset-x) - var(--flapkit-leaf-thickness) / 2);
    transform: rotateY(-90deg);
    transform-origin: 50% 50%;
  }
  :where(.flapkit-cassette-cover) {
    position: absolute;
    z-index: 7;
    display: block;
    background-color: transparent;
    pointer-events: none;
  }
  :where(.flapkit-cassette-cover-top) {
    top: 0;
    right: 0;
    left: 0;
    height: var(--flapkit-cavity-top);
    background-image: var(--flapkit-cover-top-background);
    box-shadow: var(--flapkit-cover-top-shadow);
  }
  :where(.flapkit-cassette-cover-right) {
    top: var(--flapkit-cavity-top);
    right: 0;
    bottom: var(--flapkit-cavity-bottom);
    width: var(--flapkit-cavity-right);
    background-image: var(--flapkit-cover-right-background);
    box-shadow: var(--flapkit-cover-right-shadow);
  }
  :where(.flapkit-cassette-cover-bottom) {
    right: 0;
    bottom: 0;
    left: 0;
    height: var(--flapkit-cavity-bottom);
    background-image: var(--flapkit-cover-bottom-background);
    box-shadow: var(--flapkit-cover-bottom-shadow);
  }
  :where(.flapkit-cassette-cover-left) {
    top: var(--flapkit-cavity-top);
    bottom: var(--flapkit-cavity-bottom);
    left: 0;
    width: var(--flapkit-cavity-left);
    background-image: var(--flapkit-cover-left-background);
    box-shadow: var(--flapkit-cover-left-shadow);
  }
  :where(.flapkit-face) {
    position: absolute;
    z-index: 1;
    right: var(--flapkit-face-inset-x);
    left: var(--flapkit-face-inset-x);
    overflow: hidden;
    backface-visibility: hidden;
  }
  :where(.flapkit-top-face) {
    z-index: 3;
    top: var(--flapkit-face-inset-y);
    height: calc(50% - var(--flapkit-face-inset-y));
    border-top-left-radius: var(--flapkit-face-radius);
    border-top-right-radius: var(--flapkit-face-radius);
    background-color: var(--fk-top-face);
    background-image: var(--fk-top-wear);
    box-shadow: var(--flapkit-top-face-shadow);
  }
  :where(.flapkit-bottom-face) {
    z-index: 2;
    top: 50%;
    bottom: var(--flapkit-active-bottom-inset);
    border-bottom-left-radius: var(--flapkit-face-radius);
    border-bottom-right-radius: var(--flapkit-face-radius);
    background-color: var(--fk-bottom-face);
    background-image: var(--fk-bottom-wear);
    box-shadow: var(--flapkit-bottom-face-shadow);
  }
  /* Stationary faces carry the per-leaf brightness/saturation wear; the vane faces do not. */
  :where(.flapkit-face-layer .flapkit-top-face) {
    filter: brightness(var(--fk-tb)) saturate(var(--fk-ts));
  }
  :where(.flapkit-face-layer .flapkit-bottom-face) {
    filter: brightness(var(--fk-bb)) saturate(var(--fk-bs));
  }
  /* The front vane face follows the pitch half; it shortens once it is the arriving lower leaf. */
  :where(.flapkit-moving-vane-front .flapkit-top-face) {
    top: var(--flapkit-moving-front-face-top, var(--flapkit-face-inset-y));
    height: var(--flapkit-moving-front-face-height, calc(50% - var(--flapkit-face-inset-y)));
  }
  :where(.flapkit-glyph) {
    position: absolute;
    top: calc(var(--fk-half-cell, 6.1cqw) - 6.1cqw + var(--flapkit-glyph-y));
    left: 50%;
    display: block;
    width: 10cqw;
    color: var(--flapkit-active-glyph-color, var(--flapkit-glyph-white-top));
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    line-height: 12.2cqw;
    opacity: var(--flapkit-glyph-opacity);
    text-align: center;
    text-shadow: 0 0 0.05cqw
      color-mix(
        in srgb,
        var(--flapkit-active-glyph-color, var(--flapkit-glyph-white-top)) 6%,
        transparent
      );
    transform: translateX(-50%)
      scaleX(var(--flapkit-active-glyph-width, var(--flapkit-glyph-width)))
      scaleY(var(--flapkit-active-glyph-scale-y, var(--flapkit-glyph-scale-y, 0.78)));
    transform-origin: 50% 50%;
    --wide-glyph-x-offset: 0cqw;
  }
  :where(.flapkit-bottom-glyph-half .flapkit-glyph) {
    color: var(--flapkit-active-glyph-color, var(--flapkit-glyph-white-bottom));
    text-shadow: 0 0 0.04cqw
      color-mix(
        in srgb,
        var(--flapkit-active-glyph-color, var(--flapkit-glyph-white-bottom)) 5%,
        transparent
      );
    transform: translateX(-50%) translateX(0.03cqw)
      scaleX(var(--flapkit-active-glyph-width, var(--flapkit-glyph-width)))
      scaleY(var(--flapkit-active-glyph-scale-y, var(--flapkit-glyph-scale-y, 0.78)));
    --wide-glyph-x-offset: 0.03cqw;
  }
  /* Wide carriers only centre; each part applies its own scale. */
  :where(.flapkit-wide-glyph-carrier) {
    display: grid;
    width: 20cqw;
    grid-template-columns: 42% 16% 42%;
    transform: translateX(-50%);
  }
  :where(.flapkit-bottom-glyph-half .flapkit-wide-glyph-carrier) {
    transform: translateX(-50%) translateX(0.03cqw);
  }
  :where(.flapkit-wide-glyph-part) {
    display: block;
    grid-row: 1;
    text-align: center;
    transform: translateX(var(--wide-glyph-x-offset, 0cqw))
      scaleX(var(--flapkit-active-glyph-width, var(--flapkit-glyph-width)))
      scaleY(var(--flapkit-active-glyph-scale-y, var(--flapkit-glyph-scale-y, 0.78)));
    transform-origin: 50% 50%;
  }
  :where(.flapkit-compact-wide-glyph-part) {
    position: absolute;
    top: var(--compact-glyph-top);
    width: 42%;
  }
  :where(.flapkit-wide-glyph-part-left) {
    left: 0;
    grid-column: 1;
  }
  :where(.flapkit-wide-glyph-part-right) {
    left: 58%;
    grid-column: 3;
  }
  :where(.flapkit-glyph-half) {
    position: absolute;
    z-index: 4;
    overflow: hidden;
    pointer-events: none;
  }
  :where(.flapkit-top-glyph-half) {
    inset: 0 0 50%;
  }
  :where(.flapkit-bottom-glyph-half) {
    inset: 0;
    clip-path: inset(50% 0 0);
  }
  :where(.flapkit-glyph-far-left) {
    margin-left: -0.12cqw;
  }
  :where(.flapkit-glyph-left) {
    margin-left: -0.06cqw;
  }
  :where(.flapkit-glyph-center) {
    margin-left: 0;
  }
  :where(.flapkit-glyph-soft-right) {
    margin-left: 0.04cqw;
  }
  :where(.flapkit-glyph-right) {
    margin-left: 0.08cqw;
  }
  :where(.flapkit-seam) {
    position: absolute;
    z-index: 5;
    top: 50%;
    right: 0.1cqw;
    left: 0.1cqw;
    height: var(--flapkit-seam-thickness);
    background-color: rgba(7 8 6 / var(--flapkit-seam-opacity));
    background-image: var(--fk-seam-image);
    transform: translateY(-50%);
  }
  :where(.flapkit-axle) {
    position: absolute;
    z-index: 7;
    top: 50%;
    width: var(--flapkit-axle-width);
    height: var(--flapkit-axle-height);
    border-radius: 42%;
    background-color: var(--flapkit-axle-color);
    background-image: var(--flapkit-axle-background);
    box-shadow: var(--flapkit-axle-shadow);
    opacity: var(--flapkit-axle-opacity);
    transform: translate3d(0, -50%, 0.18cqw);
    pointer-events: none;
  }
  :where(.flapkit-axle-left) {
    left: 0.02cqw;
  }
  :where(.flapkit-axle-right) {
    right: 0.02cqw;
  }
  :where(.flapkit-compact-hardware) {
    position: absolute;
    z-index: 8;
    top: var(--flapkit-cavity-top);
    right: var(--flapkit-cavity-right);
    bottom: var(--flapkit-cavity-bottom);
    left: var(--flapkit-cavity-left);
    pointer-events: none;
  }
  /* Compact seam drawn by the hardware layer itself instead of a dedicated element. */
  :where(.flapkit-compact-hardware)::before {
    position: absolute;
    z-index: 5;
    top: 50%;
    right: 0.1cqw;
    left: 0.1cqw;
    height: var(--flapkit-seam-thickness);
    content: '';
    background-image: var(--fk-seam-image);
    transform: translateY(-50%);
  }
  :where(.flapkit-wide-retainer) {
    position: absolute;
    z-index: 7;
    top: 50%;
    width: 0.36cqw;
    height: 4.6cqw;
    border-radius: 28%;
    background-color: var(--flapkit-axle-color);
    background-image: var(--flapkit-axle-background);
    box-shadow: var(--flapkit-axle-shadow);
    opacity: var(--flapkit-axle-opacity);
    transform: translate3d(-50%, -50%, 0.18cqw);
    pointer-events: none;
  }
  :where(.flapkit-wide-retainer-outer-left) {
    left: 0.28cqw;
  }
  :where(.flapkit-wide-retainer-inner-left) {
    left: 42%;
  }
  :where(.flapkit-wide-retainer-inner-right) {
    left: 58%;
  }
  :where(.flapkit-wide-retainer-outer-right) {
    left: calc(100% - 0.28cqw);
  }
  :where(.flapkit-spare-leaf-pack) {
    position: absolute;
    z-index: 1;
    inset: 0;
    clip-path: inset(50% 0 0);
    opacity: var(--flapkit-spare-leaf-pack-opacity, 0.92);
    transform: translate3d(0, var(--flapkit-stack-shift, 0px), 0);
    pointer-events: none;
  }
  /* Each plate reads its own `--fk-l{n}-*` set from the cassette root. */
  :where(.flapkit-spare-leaf-plate:nth-child(1)) {
    --fk-lb: var(--fk-l0-b);
    --fk-le: var(--fk-l0-e);
    --fk-les: var(--fk-l0-es);
    --fk-lsat: var(--fk-l0-sat);
    --fk-lx: var(--fk-l0-x);
    --fk-ly: var(--fk-l0-y);
    z-index: 1;
  }
  :where(.flapkit-spare-leaf-plate:nth-child(2)) {
    --fk-lb: var(--fk-l1-b);
    --fk-le: var(--fk-l1-e);
    --fk-les: var(--fk-l1-es);
    --fk-lsat: var(--fk-l1-sat);
    --fk-lx: var(--fk-l1-x);
    --fk-ly: var(--fk-l1-y);
    z-index: 2;
  }
  :where(.flapkit-spare-leaf-plate:nth-child(3)) {
    --fk-lb: var(--fk-l2-b);
    --fk-le: var(--fk-l2-e);
    --fk-les: var(--fk-l2-es);
    --fk-lsat: var(--fk-l2-sat);
    --fk-lx: var(--fk-l2-x);
    --fk-ly: var(--fk-l2-y);
    z-index: 3;
  }
  :where(.flapkit-spare-leaf-plate) {
    position: absolute;
    right: calc(var(--flapkit-face-inset-x) - 0.06cqw);
    bottom: calc(var(--flapkit-face-inset-y) + var(--fk-ly));
    left: calc(var(--flapkit-face-inset-x) - 0.06cqw);
    box-sizing: border-box;
    height: calc(50% - var(--flapkit-face-inset-y));
    border-bottom-left-radius: 0.03cqw;
    border-bottom-right-radius: 0.03cqw;
    border-bottom-width: var(--flapkit-spare-leaf-border-width, 0.03cqw);
    border-bottom-style: solid;
    border-bottom-color: var(--flapkit-spare-leaf-border-color, rgba(3, 4, 2, 0.28));
    background-color: var(--flapkit-spare-leaf-middle-color, #1a1b16);
    background-image: linear-gradient(
      180deg,
      var(--flapkit-spare-leaf-top-color, #24251e) 0%,
      var(--flapkit-spare-leaf-middle-color, #1a1b16) var(--flapkit-spare-leaf-middle-stop, 68%),
      var(--flapkit-spare-leaf-lower-color, #181910) var(--flapkit-spare-leaf-lower-stop, 96.2%),
      color-mix(in srgb, var(--flapkit-spare-leaf-edge-color, #585644) var(--fk-le), black)
        var(--flapkit-spare-leaf-edge-start, 97.6%),
      color-mix(in srgb, var(--flapkit-spare-leaf-edge-color, #585644) var(--fk-le), black)
        var(--flapkit-spare-leaf-edge-end, 98.3%),
      var(--flapkit-spare-leaf-tail-color, #1a1b16) var(--flapkit-spare-leaf-tail-stop, 98.9%),
      var(--flapkit-spare-leaf-base-color, #161710) 100%
    );
    /* Hairline lip, same scale as the stationary leaf's bottom catch. */
    box-shadow: 0 var(--flapkit-spare-leaf-highlight-inset, -0.03cqw) 0
      rgb(
        var(--flapkit-spare-leaf-highlight-rgb, 190 182 143) /
          calc(var(--fk-les) * var(--flapkit-spare-leaf-highlight-alpha, 0.1))
      )
      inset;
    filter: brightness(var(--fk-lb)) saturate(var(--fk-lsat));
    transform: translateX(var(--fk-lx));
    clip-path: polygon(
      0.03cqw 0,
      calc(100% - 0.02cqw) 0,
      100% 13%,
      calc(100% - 0.04cqw) 27%,
      100% 42%,
      calc(100% - 0.03cqw) 58%,
      100% 73%,
      calc(100% - 0.05cqw) 87%,
      calc(100% - 0.01cqw) 100%,
      0.02cqw 100%,
      0 86%,
      0.04cqw 71%,
      0 55%,
      0.05cqw 39%,
      0 24%,
      0.03cqw 11%
    );
    pointer-events: none;
  }
  :where(.flapkit-cassette-bezel) {
    position: absolute;
    z-index: 6;
    inset: 0;
    background-image: var(--fk-bezel-image);
    opacity: 0.92;
    pointer-events: none;
  }
}