/* One cascade layer for the whole kit: an unlayered rule in a host stylesheet beats any kit rule,
   whatever its specificity. Order inside the layer is the kit's own source order, unchanged. */
@layer marius-ui, marius-ui-hidden;
@import './material.css' layer(marius-ui);
@import './tokens.css' layer(marius-ui);
@import './fonts.css' layer(marius-ui);
@import './type.css' layer(marius-ui);
@import './controls/controls.css' layer(marius-ui);
@import './controls/color-control.css' layer(marius-ui);
@import './controls/icon-button.css' layer(marius-ui);
@import './controls/swatch-choice.css' layer(marius-ui);
@import './controls/flat-button.css' layer(marius-ui);
@import './controls/status-line.css' layer(marius-ui);
@import './instruments/instruments.css' layer(marius-ui);
@import './instruments/strip-chart.css' layer(marius-ui);
@import './instruments/segment-ring.css' layer(marius-ui);
@import './instruments/streak.css' layer(marius-ui);
@import './instruments/target-ring.css' layer(marius-ui);
@import './instruments/ball.css' layer(marius-ui);
@import './instruments/marks.css' layer(marius-ui);
@import './instruments/measures.css' layer(marius-ui);
@import './frames/application-frame.css' layer(marius-ui);
@import './frames/settings-frame.css' layer(marius-ui);
@import './frames/task-rail.css' layer(marius-ui);
@import './frames/task-dialog.css' layer(marius-ui);
@import './frames/rail.css' layer(marius-ui);
@import './frames/page-frame.css' layer(marius-ui);
@import './frames/band-page.css' layer(marius-ui);
@import './layout.css' layer(marius-ui);
@import './patterns/page-words.css' layer(marius-ui);
@import './patterns/lists.css' layer(marius-ui);
@import './patterns/info-list.css' layer(marius-ui);
@import './patterns/setting-family.css' layer(marius-ui);
@import './patterns/tile-grid.css' layer(marius-ui);
@import './patterns/cell-row.css' layer(marius-ui);
@import './patterns/event-list.css' layer(marius-ui);
@import './patterns/contract-controls.css' layer(marius-ui);
@import './patterns/action-row.css' layer(marius-ui);
@import './controls/pressable.css' layer(marius-ui);
@import './controls/slot-marks.css' layer(marius-ui);
@import './patterns/placeholder.css' layer(marius-ui);
@import './treatment.css' layer(marius-ui);
@import './face-tones.css' layer(marius-ui);
@import './hidden.css' layer(marius-ui-hidden);
/* A scroll affordance (10.2.0): where a panel's content runs past its edge, that edge fades, 24px, and a thin bronze
   track shows. It follows the scroll: no fade at the top until the content has moved, none at the foot once it has
   reached the end, and none at all where the content fits: then the scroll timeline is inactive, so the mask, which
   applies only while the animation runs, is not applied at all (an idle mask would still change how the page is drawn).
   The fade lengths are registered properties so they can be animated. */
@property --ui-fade-top {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}
@property --ui-fade-bottom {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}
/* Set only while the scroll timeline is active (17.5.3). The mask reads it outside the animation: a var() inside a
   keyframe takes that keyframe's own values, so a mask written in the keyframes stayed at its start, the foot faded
   at the end and the top never. */
@property --ui-fade-on {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}
@layer marius-ui {
  * {
    box-sizing: border-box;
  }
  .ui-page {
    margin: 0;
    background: var(--ui-page-ground);
    color: var(--ui-bone);
    font-size: var(--ui-type-body-size);
    line-height: 1.55;
  }
  .ui-heading {
    font-family: var(--ui-font-display);
    font-stretch: condensed;
    letter-spacing: 0.035em;
    text-transform: uppercase;
    line-height: 1.05;
    font-weight: 600;
  }
  .ui-kicker {
    font-size: var(--ui-type-caption-size);
    /* Its own weight (15.4.0), the 400 it inherited, so a heavier parent does not reach it. */
    font-weight: 400;
    /* The caption step at the label's tracking (16.0.0). */
    letter-spacing: var(--ui-type-label-track);
    text-transform: uppercase;
    color: var(--ui-bronze);
  }
  .ui-muted {
    color: var(--ui-muted);
  }
  .ui-divider {
    border: 0;
    border-top: 1px solid var(--ui-line);
    margin: 24px 0;
  }
  /* Construction (10.2.0): a surface is built from its family's values - face, edge, radius, a lit bevel, a drop, a
     clearance ring and relief. Each reads --ui-<family>-<part>; unset, it is the literal the kit always drew. A
     treatment sets them once on its frame. The panel family is every surface's default.
     Elevation (15.0.0): unset, a face is its own coat lifted to its level's floor (--ui-level-*, OKLCH L), and its
     shadow is its level's, so every layer stands visibly apart under 'current' too. */
  .ui-surface {
    position: relative;
    isolation: isolate;
    background-color: var(--ui-panel-face, oklch(from var(--ui-material-coat) calc(l + var(--ui-level-panel)) c h));
    border: 1px solid var(--ui-panel-edge, #0b0d0b80);
    border-radius: var(--ui-panel-radius, 3px);
    box-shadow:
      var(--ui-panel-bevel, inset 0 1px rgb(from var(--ui-light) r g b / calc(9 / 255))),
      var(--ui-panel-drop, var(--ui-level-panel-shadow)), var(--ui-panel-ring, 0 0 #0000);
    translate: var(--ui-panel-relief, none);
  }
  /* A surface that says its family stands at its level (15.0.0): ground and clear on the ground itself, a takeover as
     an overlay, a well seated in what holds it. */
  .ui-surface:is([data-family='ground'], [data-family='clear']) {
    background-color: var(--ui-material-coat);
  }
  .ui-surface[data-family='takeover'] {
    background-color: var(
      --ui-takeover-face,
      oklch(from var(--ui-material-coat) calc(l + var(--ui-level-overlay)) c h)
    );
  }
  .ui-surface[data-family='well'] {
    background-color: var(--ui-well-face, oklch(from var(--ui-material-coat) calc(l + var(--ui-level-seated)) c h));
    border-color: var(--ui-well-edge, #0b0d0b80);
    border-radius: var(--ui-well-radius, 3px);
    box-shadow: var(--ui-well-shadow, var(--ui-level-seated-shadow)), var(--ui-well-ring, 0 0 #0000);
    translate: none;
  }
  /* A frame is the ground every level stands on: its own coat, with the drop it always had. */
  .ui-surface:is(.ui-application-frame, .ui-settings-frame) {
    background-color: var(--ui-material-coat);
    box-shadow:
      var(--ui-panel-bevel, inset 0 1px rgb(from var(--ui-light) r g b / calc(9 / 255))),
      0 1px 1px #0003,
      var(--ui-panel-ring, 0 0 #0000);
  }
  /* flat (10.9.0): a surface with no construction - no edge, corners, bevel, drop or rise - whatever the treatment.
     Its coat and its texture stay. */
  .ui-surface[data-flat='true'] {
    /* A flat surface stands on no level (15.0.0): it keeps its own coat, as before. */
    background-color: var(--ui-panel-face, var(--ui-material-coat));
    border: 0;
    border-radius: 0;
    box-shadow: none;
    translate: none;
  }
  /* A button's face, and its travel: hover lifts the bevel, press moves it down by --ui-button-travel. */
  .ui-button {
    min-height: 42px;
    padding: 10px 22px;
    /* 600 (16.0.0): the heaviest Plex Mono the kit ships; 700 was drawn by the browser. */
    font: 600 var(--ui-type-body-size) var(--ui-font-mono);
    color: var(--ui-bronze);
    cursor: pointer;
    background-color: var(--ui-button-face, oklch(from var(--ui-material-coat) calc(l + var(--ui-level-raised)) c h));
    translate: var(--ui-button-relief, none);
    transition:
      box-shadow var(--ui-button-duration, 100ms),
      transform var(--ui-button-duration, 100ms);
  }
  .ui-button:hover:not(:disabled) {
    box-shadow:
      var(--ui-button-bevel-hover, inset 0 1px rgb(from var(--ui-light) r g b / calc(28 / 255))),
      var(--ui-button-drop-hover, 0 1px 2px #0005), var(--ui-button-ring, 0 0 #0000);
    filter: var(--ui-button-hover, brightness(1.08));
  }
  .ui-button:active:not(:disabled) {
    transform: translateY(var(--ui-button-travel, 1px));
    box-shadow: var(--ui-button-press, inset 0 1px 3px #0006);
  }
  .ui-button[data-variant='primary'] {
    border-bottom: 2px solid var(--ui-bronze);
  }
  .ui-button[data-variant='danger'] {
    color: var(--ui-danger-text);
  }
  /* A discrete value is a well; a choice (a tab, an option) is a tab. Unset, both are the panel's literals. */
  .ui-discrete-value {
    background-color: var(--ui-well-face, oklch(from var(--ui-material-coat) calc(l + var(--ui-level-seated)) c h));
    border-color: var(--ui-well-edge, #0b0d0b80);
    border-radius: var(--ui-well-radius, 3px);
    box-shadow:
      var(--ui-well-bevel, inset 0 1px rgb(from var(--ui-light) r g b / calc(9 / 255))),
      var(--ui-well-drop, 0 1px 1px #0003), var(--ui-well-ring, 0 0 #0000);
  }
  .ui-choice {
    background-color: var(--ui-tab-face, oklch(from var(--ui-material-coat) calc(l + var(--ui-level-panel)) c h));
    border-color: var(--ui-tab-edge, #0b0d0b80);
    border-radius: var(--ui-tab-radius, 3px);
    box-shadow:
      var(--ui-tab-bevel, inset 0 1px rgb(from var(--ui-light) r g b / calc(9 / 255))),
      var(--ui-tab-drop, 0 1px 1px #0003), var(--ui-tab-ring, 0 0 #0000);
    transition: transform var(--ui-tab-duration, 0s);
  }
  .ui-choice:active:not(:disabled) {
    transform: var(--ui-tab-press, none);
  }
  .ui-button:disabled {
    opacity: 0.36;
    cursor: not-allowed;
  }
  .ui-button:focus-visible,
  .ui-select-input:focus-visible,
  .ui-slider-number:focus-visible,
  .ui-slider-track:focus-visible {
    outline: 2px solid var(--ui-bronze);
    outline-offset: 4px;
  }
  /* A panel's spacing is written from G (15.2.0), at the values it always had at the kit's G of 32: a look's
     gutter reaches it. */
  .ui-panel {
    padding: calc(var(--ui-gutter) * 0.8125);
    min-width: 0;
    container-type: inline-size;
  }
  .ui-panel-header {
    margin-bottom: calc(var(--ui-gutter) * 0.75);
    border-bottom: 1px solid var(--ui-line);
    padding-bottom: calc(var(--ui-gutter) / 2);
  }
  /* The label role (16.0.0): small capitals at its tracking, as the group label and a definition term are. */
  .ui-panel-title {
    margin: 0;
    font-size: var(--ui-type-label-size);
    text-transform: uppercase;
    letter-spacing: var(--ui-type-label-track);
    color: var(--ui-bronze);
    font-weight: 400;
  }
  .ui-panel-description {
    color: var(--ui-muted);
    font-size: var(--ui-type-caption-size);
    margin: 9px 0 0;
  }
  .ui-panel-content {
    display: flex;
    flex-direction: column;
    gap: calc(var(--ui-gutter) * 0.5625);
  }
  .ui-control-label {
    color: var(--ui-bone);
    font-size: var(--ui-type-body-size);
  }
  .ui-slider {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 82px;
    align-items: center;
    gap: 18px;
    min-height: 52px;
    padding: 7px 0;
    border-bottom: 1px solid var(--ui-line);
  }
  .ui-slider > .ui-control-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 20px;
    min-width: 0;
  }
  .ui-slider-track {
    appearance: none;
    -webkit-appearance: none;
    width: 44%;
    min-width: 70px;
    height: 8px;
    flex-shrink: 0;
    border: 1px solid var(--ui-track-edge, #11150f);
    border-radius: var(--ui-track-radius, 3px);
    background: linear-gradient(
      to right,
      var(--ui-track-fill, var(--ui-slider-fill)) 0 var(--ui-fill),
      var(--ui-track-face, #181b17) var(--ui-fill) 100%
    );
    box-shadow: var(--ui-track-shadow, inset 0 1px 2px #0006);
    cursor: pointer;
  }
  .ui-slider-track::-webkit-slider-thumb {
    appearance: none;
    width: 17px;
    height: 17px;
    border: 1px solid var(--ui-thumb-edge, #8d8165);
    border-radius: var(--ui-thumb-radius, 2px);
    background: var(--ui-thumb-face, linear-gradient(#5c594b, #3e4036));
    box-shadow: var(--ui-thumb-drop, 0 1px 2px #0009);
  }
  .ui-slider-track::-moz-range-thumb {
    width: 15px;
    height: 15px;
    border: 1px solid var(--ui-thumb-edge, #8d8165);
    border-radius: var(--ui-thumb-radius, 2px);
    background: var(--ui-thumb-face, linear-gradient(#5c594b, #3e4036));
  }
  .ui-slider-well {
    display: flex;
    gap: 2px;
    align-items: center;
    justify-content: flex-end;
    min-height: 37px;
    padding: 4px 8px;
    background-color: var(--ui-well-face, oklch(from var(--ui-material-coat) calc(l + var(--ui-level-seated)) c h));
    border-color: var(--ui-well-edge, #0b0d0b80);
    box-shadow: var(--ui-well-shadow, inset 0 2px 4px #0005), var(--ui-well-ring, 0 0 #0000);
  }
  .ui-slider-number {
    width: 100%;
    min-width: 0;
    appearance: textfield;
    -moz-appearance: textfield;
    border: 0;
    background: transparent;
    color: var(--ui-bronze);
    text-align: right;
    font: 13px var(--ui-font-mono);
    padding: 2px;
  }
  .ui-slider-number::-webkit-inner-spin-button,
  .ui-slider-number::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  .ui-unit {
    color: var(--ui-muted);
    font-size: 10px;
    margin-left: 3px;
  }
  .ui-slider[data-disabled='true'],
  .ui-switch[data-disabled='true'] {
    opacity: 0.4;
  }
  .ui-switch {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 48px;
    border-bottom: 1px solid var(--ui-line);
    cursor: pointer;
    padding: 6px 0;
  }
  .ui-switch-input {
    position: absolute;
    right: 0;
    width: 82px;
    height: 35px;
    opacity: 0;
    cursor: inherit;
  }
  .ui-switch-track {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 82px;
    height: 35px;
    padding: 7px;
    background-color: var(--ui-switch-face, oklch(from var(--ui-material-coat) calc(l + var(--ui-level-seated)) c h));
    border-color: var(--ui-switch-edge, #0b0d0b80);
    border-radius: var(--ui-switch-radius, 3px);
    box-shadow: var(--ui-switch-shadow, inset 0 2px 4px #0005), var(--ui-switch-ring, 0 0 #0000);
    pointer-events: none;
  }
  .ui-switch-state {
    font-size: 10px;
    color: var(--ui-muted);
    width: 23px;
  }
  .ui-switch-thumb {
    width: 34px;
    height: 19px;
    border-radius: var(--ui-switch-thumb-radius, 2px);
    background: var(--ui-switch-thumb);
    border-top: 1px solid var(--ui-switch-thumb-lit, rgb(from var(--ui-light) r g b / calc(23 / 255)));
  }
  .ui-switch-input:checked + .ui-switch-track .ui-switch-thumb {
    background: var(--ui-switch-thumb-on, var(--ui-switch-on));
  }
  .ui-switch-input:checked + .ui-switch-track .ui-switch-state {
    color: var(--ui-bone);
  }
  .ui-switch-input:focus-visible + .ui-switch-track {
    outline: 2px solid var(--ui-bronze);
    outline-offset: 4px;
  }
  .ui-select {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 20px;
    min-height: 48px;
    padding: 6px 0;
    border-bottom: 1px solid var(--ui-line);
  }
  .ui-select-well {
    max-width: 100%;
    background-color: var(--ui-well-face, oklch(from var(--ui-material-coat) calc(l + var(--ui-level-seated)) c h));
    border-color: var(--ui-well-edge, #0b0d0b80);
    box-shadow: var(--ui-well-shadow, inset 0 2px 4px #0004), var(--ui-well-ring, 0 0 #0000);
    min-width: 0;
  }
  .ui-select-input {
    font: 12px var(--ui-font-mono);
    color: var(--ui-bronze);
    background: transparent;
    border: 0;
    border-radius: 3px;
    min-height: 37px;
    max-width: 100%;
    width: 100%;
    padding: 7px 25px 7px 10px;
    cursor: pointer;
  }
  .ui-select-input option {
    background: var(--ui-option-ground);
    color: var(--ui-bone);
  }
  .ui-select-input:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }
  .ui-readout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 48px;
  }
  .ui-readout-label {
    text-transform: uppercase;
    font-size: 10px;
    color: var(--ui-muted);
    letter-spacing: 0.1em;
  }
  /* A readout is a window you read into: seated (15.0.0). */
  .ui-readout-display {
    background-color: var(--ui-well-face, oklch(from var(--ui-material-coat) calc(l + var(--ui-level-seated)) c h));
    padding: 6px 10px;
    box-shadow: inset 0 2px 4px #0004;
    white-space: nowrap;
  }
  .ui-readout-value {
    font-size: 24px;
    letter-spacing: 0.09em;
    font-weight: var(--ui-type-figure-weight);
    font-variant-numeric: tabular-nums;
    color: var(--ui-bone);
  }
  @media (max-width: 520px) {
    .ui-panel {
      padding: 18px;
    }
    .ui-slider > .ui-control-label {
      align-items: flex-start;
      flex-direction: column;
      gap: 12px;
    }
    .ui-slider-track {
      width: 100%;
    }
    .ui-select {
      align-items: flex-start;
      flex-direction: column;
      gap: 8px;
    }
    .ui-select-input {
      max-width: 100%;
      width: 100%;
    }
  }
  @container (max-width:350px) {
    .ui-slider > .ui-control-label {
      align-items: flex-start;
      flex-direction: column;
      gap: 12px;
    }
    .ui-slider-track {
      width: 100%;
    }
    .ui-select {
      align-items: flex-start;
      flex-direction: column;
      gap: 8px;
    }
    .ui-select-input {
      max-width: 100%;
      width: 100%;
    }
    .ui-readout {
      flex-wrap: wrap;
    }
    .ui-slider {
      gap: 10px;
      grid-template-columns: minmax(0, 1fr) 72px;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .ui-button {
      transition: none;
    }
  }
  /* lit and selected (15.6.0): a surface that is running, and the one just made - drawn inside its own edge, so its
     construction (edge, bevel, drop) stays as it is. */
  .ui-surface-lit {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    width: 3px;
    background: var(--ui-state-healthy-mark);
    box-shadow: 0 0 10px var(--ui-state-healthy-mark);
    pointer-events: none;
  }
  .ui-surface[data-selected='true'] {
    outline: 1px solid var(--ui-state-action-mark);
    outline-offset: -1px;
  }
  .ui-dialog.ui-surface {
    position: fixed;
    inset: 0;
    margin: auto;
    max-height: calc(100dvh - 36px);
    overflow: auto;
    overscroll-behavior: contain;
  }
  .ui-slider {
    grid-template-columns: minmax(0, 1fr) 64px 78px;
    gap: 10px;
    min-height: 65px;
    padding: 8px;
  }
  .ui-slider > .ui-control-label {
    display: block;
    font-size: var(--ui-type-body-size);
    font-weight: 400;
  }
  .ui-slider > .ui-slider-track {
    width: 100%;
    min-width: 0;
    flex-shrink: 1;
  }
  .ui-slider-well {
    min-height: 34px;
    padding: 5px;
    gap: 2px;
    border-radius: var(--ui-well-radius, 3px);
  }
  .ui-slider[data-label-hidden='true'] {
    grid-template-columns: 64px minmax(0, 1fr);
  }
  .ui-slider[data-label-hidden='true'] > .ui-control-label {
    display: none;
  }
  .ui-slider-track {
    border-radius: var(--ui-track-radius, 3px);
    cursor: ew-resize;
  }
  .ui-slider-track::-webkit-slider-thumb {
    width: 16px;
    height: 14px;
    border-radius: var(--ui-thumb-radius, 2px);
    border: 1px solid var(--ui-thumb-edge, rgb(from var(--ui-bronze) r g b / calc(68 / 255)));
    background: var(
      --ui-thumb-face,
      linear-gradient(in srgb, rgb(from var(--ui-parchment) r g b / calc(21 / 255)), transparent),
      color-mix(in srgb, var(--ui-material-coat), var(--ui-bronze) 15%)
    );
  }
  .ui-navigation[data-variant='main'] .ui-choice,
  .ui-navigation[data-variant='context'] .ui-choice {
    background: none;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    border-bottom: 2px solid transparent;
    padding: 12px 0;
    font-size: var(--ui-type-body-size);
    text-transform: uppercase;
    color: var(--ui-muted);
  }
  .ui-navigation[data-variant='main'] .ui-choice::before,
  .ui-navigation[data-variant='main'] .ui-choice::after,
  .ui-navigation[data-variant='context'] .ui-choice::before,
  .ui-navigation[data-variant='context'] .ui-choice::after {
    display: none;
  }
  .ui-navigation[data-variant='main'] .ui-choice[aria-current='page'] {
    color: var(--ui-bone);
    border-bottom-color: var(--ui-bronze);
  }
  .ui-navigation[data-variant='context'] .ui-choice[aria-current='page'] {
    color: var(--ui-bone);
    border-bottom-color: var(--ui-bone);
  }
  .ui-dropdown {
    display: block;
    align-self: start;
  }
  .ui-dropdown > .ui-control-label {
    display: block;
    margin-bottom: 7px;
  }
  .ui-dropdown-list {
    position: absolute;
    top: calc(100% + 5px);
    right: auto;
    min-width: 100%;
    width: max-content;
    max-width: min(400px, 90vw);
    background: var(--ui-menu-face, oklch(from var(--ui-material-coat) calc(l + var(--ui-level-overlay)) c h));
    border: 1px solid rgb(from var(--ui-parchment) r g b / calc(38 / 255));
    box-shadow: var(--ui-menu-drop, var(--ui-level-overlay-shadow));
  }
  .ui-dropdown-option {
    white-space: nowrap;
    font-size: var(--ui-type-small-size);
    border-left: 1px solid transparent;
    padding: 10px 12px;
  }
  .ui-dropdown-option[aria-selected='true'] {
    border-left-color: var(--ui-bronze);
  }
  /* The button's construction as drawn: an edge mixed from the coat, a lit top edge, a soft drop (10.2.0: each its
     family's variable, the literal unset). */
  .ui-button {
    border: 1px solid var(--ui-button-edge, color-mix(in srgb, var(--ui-material-coat), black 8%));
    border-top-color: var(--ui-button-lit, rgb(from var(--ui-parchment) r g b / calc(20 / 255)));
    border-radius: var(--ui-button-radius, 3px);
    box-shadow: var(--ui-button-drop, var(--ui-level-raised-shadow)), var(--ui-button-ring, 0 0 #0000);
    color: var(--ui-bronze);
  }
  .ui-button[data-variant='primary'] {
    /* Raised (15.0.0); under a treatment, the button's face as the treatment's scale puts it. */
    background-color: var(
      --ui-button-face,
      oklch(from color-mix(in srgb, var(--ui-material-coat), white 1.5%) calc(l + var(--ui-level-raised)) c h)
    );
    color: var(--ui-bronze);
  }
  .ui-button:focus-visible {
    outline: none;
    border-bottom-color: var(--ui-bronze);
  }
  @container (max-width:300px) {
    .ui-slider {
      grid-template-columns: minmax(0, 1fr) 64px 65px;
      gap: 8px;
    }
    .ui-slider[data-label-hidden='true'] {
      grid-template-columns: 64px minmax(0, 1fr);
    }
  }
  /* A select is seated wherever it stands (15.0.0), in a form as in a setting row: one control, one level. */
  .ui-dropdown-trigger {
    background-color: var(--ui-well-face, oklch(from var(--ui-material-coat) calc(l + var(--ui-level-seated)) c h));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
  }
  .ui-dropdown-value {
    min-width: 0;
  }
  .ui-dropdown-chevron {
    flex: none;
    margin-left: auto;
  }
  /* Shared navigation and compact setting geometry. */
  .ui-navigation > .ui-control-label[hidden] {
    display: none;
  }
  .ui-navigation[data-variant='main'] > .ui-choice-items {
    gap: 28px;
  }
  .ui-navigation[data-variant='main'] .ui-choice {
    font-size: var(--ui-type-reading-size);
    padding: 18px 6px;
    min-height: 58px;
    text-transform: none;
  }
  .ui-navigation[data-variant='context'] > .ui-choice-items {
    gap: 25px;
  }
  .ui-navigation[data-variant='context'] .ui-choice {
    font-size: var(--ui-type-body-size);
    padding: 14px 4px;
    text-transform: none;
  }
  .ui-setting-row {
    grid-template-columns: minmax(125px, 1fr) auto minmax(142px, 1fr);
    padding: 8px;
    gap: 10px;
    min-height: 65px;
  }
  .ui-setting-content {
    grid-column: 3;
  }
  .ui-setting-label {
    font-size: var(--ui-type-small-size);
    font-weight: 400;
    color: var(--ui-muted);
  }
  .ui-setting-row[data-selected='true'] .ui-setting-label {
    color: var(--ui-bone);
  }
  .ui-setting-badge {
    font-size: 10px;
    padding: 3px;
  }
  .ui-explanation[data-layout='flush'] {
    border-left: 0;
  }
  .ui-text-input:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }
  .ui-slider[data-size='large'] {
    grid-template-columns: minmax(0, 1fr) 72px 100px;
    min-height: 66px;
  }
  .ui-slider[data-size='large'] > .ui-slider-track {
    height: 12px;
  }
  /* Opt-in compact main navigation; existing regular navigation is unchanged. */
  .ui-navigation[data-variant='main'][data-density='compact'] > .ui-choice-items {
    column-gap: 24px;
    row-gap: 0;
  }
  .ui-navigation[data-variant='main'][data-density='compact'] .ui-choice {
    font-size: 14px;
    min-height: 44px;
    padding: 10px 0;
  }
}
@layer marius-ui {
  @keyframes ui-scroll-fade {
    0% {
      --ui-fade-top: 0px;
      --ui-fade-bottom: 48px;
      --ui-fade-on: 1;
    }
    8% {
      --ui-fade-top: 48px;
    }
    92% {
      --ui-fade-bottom: 48px;
    }
    100% {
      --ui-fade-top: 48px;
      --ui-fade-bottom: 0px;
      --ui-fade-on: 1;
    }
  }
  :is(
    .ui-settings-list,
    .ui-application-sheet,
    .ui-application-frame[data-height='host'] .ui-application-content,
    .ui-application-frame[data-height='host'] .ui-application-task
  ) {
    animation: ui-scroll-fade linear both;
    animation-timeline: scroll(self);
    mask-image: if(
      style(--ui-fade-on: 1): linear-gradient(
          to bottom,
          transparent 0,
          #000 var(--ui-fade-top),
          #000 calc(100% - var(--ui-fade-bottom)),
          transparent 100%
        )
        ; else: none
    );
    scrollbar-width: thin;
    /* A cue you notice (13.0.0): a 48px fade and a bronze thumb at 70%. */
    scrollbar-color: rgb(from var(--ui-bronze) r g b / calc(179 / 255)) #0000002e;
  }
  /* Every kit scroll container keeps room for its scrollbar (11.0.0), so a scrollbar appearing never pushes what
     is inside it sideways. */
  :is(
    .ui-settings-list,
    .ui-settings-task,
    .ui-application-sheet,
    .ui-application-task,
    .ui-application-frame[data-height='host'] .ui-application-content,
    .ui-dropdown-list,
    .ui-dialog,
    .ui-task-dialog[data-layout='content']
  ) {
    scrollbar-gutter: stable;
  }
  /* A full-page task keeps that room on both edges (18.0.0), so what it centres - a calibration's pair of rings -
     stands on the canvas's axis, not half a scrollbar to its left. */
  :is(.ui-application-frame[data-height='host'] .ui-application-task, .ui-application-task) {
    scrollbar-gutter: stable both-edges;
  }
}