/* UX Look core 1.0.0 (2026-10-18): structure of the pull tab and options drawer. Every pack skins these in its own
   CSS (colors, type, borders, glow). Nothing here sets a color except as a last-resort fallback. */

.ux-look-tab { position: fixed; z-index: 2147483000; right: env(safe-area-inset-right, 0px); top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center; width: 30px; min-height: 92px; padding: 10px 0; cursor: pointer; border: 0; }
.ux-look-tab[hidden] { display: none; }
.ux-look-tab-lbl { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }
.ux-drawer-open .ux-look-tab { right: min(380px, 100vw); }

.ux-look-drawer { position: fixed; z-index: 2147483001; top: 0; right: 0; bottom: 0; width: min(380px, 100vw); display: flex; flex-direction: column;
  padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); padding-right: env(safe-area-inset-right, 0px);
  box-sizing: border-box; overflow: hidden; background: Canvas; color: CanvasText; }
.ux-look-drawer[hidden] { display: none; }
.ux-look-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px 12px; flex: none; }
.ux-look-title { margin: 0; }
.ux-look-close { cursor: pointer; }
.ux-look-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 4px 18px 18px; display: flex; flex-direction: column; gap: 18px; }
.ux-look-section { display: flex; flex-direction: column; gap: 14px; }
.ux-look-section-title { margin: 6px 0 0; }
.ux-look-group { display: flex; flex-direction: column; gap: 8px; }
.ux-look-label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ux-look-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ux-look-card { display: flex; flex-direction: column; gap: 6px; align-items: stretch; text-align: left; cursor: pointer; padding: 10px; min-width: 0; }
.ux-look-swatches { display: flex; gap: 3px; height: 10px; }
.ux-look-swatches i { flex: 1; display: block; }
.ux-look-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.ux-look-seg-b { cursor: pointer; flex: 1 1 auto; min-height: 34px; padding: 6px 10px; }
.ux-look-range { width: 100%; }
.ux-look-toggle { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 8px 12px; cursor: pointer; text-align: left; }
.ux-look-hint { margin: 0; }
.ux-look-foot { flex: none; display: flex; flex-direction: column; gap: 8px; padding: 12px 18px 16px; }
.ux-look-reset { cursor: pointer; min-height: 38px; }
.ux-look-report { margin: 0; }
@media (max-width: 520px) { .ux-drawer-open .ux-look-tab { display: none; } }
@media print { .ux-look-tab, .ux-look-drawer { display: none !important; } }

/* Hauler pack 1.0.0 (2026-10-18): cassette futurism. Wandzilak Web Design.

   A plastic case with a bezel around a dark CRT. .ux-shell is the case; its ::before is the glass (spanning the
   header, nav and main rows of the shell grid) and its ::after is the tube's light layer (flicker, power-on flash).
   Both sit UNDER the content, so raster lines and flicker never dim a letter. .ux-footer sits on the case below the
   screen, where the physical keys live.

   Everything is keyed to html.ux-pack-hauler.ux-on and reads only --ux-* (CONTRACT.md) and --hl-* tokens written by
   hauler-pack.js. Grounds: on the glass use --ux-*; on the case (footer, .hl-case, the Look drawer) use --hl-case-*
   and --hl-key-*. Motion lives only inside prefers-reduced-motion: no-preference. */

/* ============================================================================================ root + scale */
.ux-pack-hauler.ux-on {
  color-scheme: dark;
  background: var(--ux-bg);
  scrollbar-color: var(--ux-line-strong) var(--ux-bg);
  --hl-case-font: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
  --hl-fs: 21px; --hl-lh: 1.18; --hl-fs-sm: 18px; --hl-fs-xs: 17px; --hl-track: .05em; --hl-label-w: 400; --hl-label-track: .08em;
  --hl-h1: 44px; --hl-h2: 32px; --hl-h3: 25px; --hl-title: 42px; --hl-value: 38px; --hl-clock: 28px;
  --hl-nav-w: 184px; --hl-key-h: 46px; --hl-ctl-h: 38px;
  --hl-glass-r: 30px / 24px;
}
.ux-pack-hauler.ux-on.ux-type-mono { --hl-fs: 15px; --hl-lh: 1.55; --hl-fs-sm: 12px; --hl-fs-xs: 11.5px; --hl-track: .02em; --hl-label-w: 600; --hl-label-track: .12em; }
.ux-pack-hauler.ux-on.ux-compact { --hl-fs: 19px; --hl-fs-sm: 17px; --hl-fs-xs: 16px; --hl-h1: 38px; --hl-h2: 28px; --hl-h3: 22px; --hl-title: 34px; --hl-value: 32px; --hl-clock: 24px;
  --hl-nav-w: 156px; --hl-key-h: 38px; --hl-ctl-h: 36px; }
.ux-pack-hauler.ux-on.ux-compact.ux-type-mono { --hl-fs: 14px; --hl-lh: 1.5; --hl-fs-sm: 11.5px; --hl-fs-xs: 11px; }
.ux-pack-hauler.ux-on.ux-curve-flat { --hl-glass-r: 7px; }

.ux-pack-hauler.ux-on body {
  background: var(--ux-bg); color: var(--ux-text);
  font-family: var(--ux-font-body); font-size: var(--hl-fs); line-height: var(--hl-lh); letter-spacing: var(--hl-track);
  text-shadow: var(--ux-text-glow);
}
.ux-pack-hauler.ux-on ::selection { background: var(--hl-select); color: var(--hl-bright); }
.ux-pack-hauler.ux-on :focus-visible { outline: 2px solid var(--ux-focus); outline-offset: 2px; }

/* ============================================================================================ shell = the case */
.ux-pack-hauler.ux-on .ux-shell {
  position: relative; box-sizing: border-box;
  container: hl-shell / inline-size;
  display: grid;
  grid-template-columns: minmax(0, var(--hl-nav-w)) minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  padding: 40px 24px 22px; border-radius: 22px;
  background: linear-gradient(180deg, var(--hl-case-hi) 0, var(--hl-case) 34%, var(--hl-case-lo) 100%);
  box-shadow: inset 0 2px 0 var(--hl-key-hl), inset 0 -4px 0 var(--hl-case-deep), 0 24px 50px rgba(0, 0, 0, .55);
  color: var(--hl-case-ink); text-shadow: none;
}
/* the glass */
.ux-pack-hauler.ux-on .ux-shell::before {
  content: ''; grid-row: 1 / 4; grid-column: 1 / -1; z-index: 0; pointer-events: none;
  border-radius: var(--hl-glass-r);
  background:
    repeating-linear-gradient(180deg, var(--hl-raster) 0 1px, var(--hl-raster-gap) 1px 2px, transparent 2px 3px),
    radial-gradient(ellipse 70% 60% at 50% 42%, var(--hl-glass-hi), transparent 72%),
    var(--hl-glass);
  box-shadow: inset 0 0 0 2px var(--hl-glass-edge), 0 0 0 10px var(--hl-bezel), 0 0 0 12px var(--hl-rim), 0 0 0 13px var(--hl-case-deep);
}
.ux-pack-hauler.ux-on.ux-curve-curved .ux-shell::before {
  box-shadow: inset 0 0 80px rgba(0, 0, 0, .88), inset 0 0 22px rgba(0, 0, 0, .6), 0 0 0 10px var(--hl-bezel), 0 0 0 12px var(--hl-rim), 0 0 0 13px var(--hl-case-deep);
}
.ux-pack-hauler.ux-on.ux-curve-flat .ux-shell::before {
  background: repeating-linear-gradient(180deg, var(--hl-raster) 0 1px, var(--hl-raster-gap) 1px 2px, transparent 2px 3px), var(--hl-glass);
}
/* the tube's light layer: flicker and the power-on flash; under the content */
.ux-pack-hauler.ux-on .ux-shell::after {
  content: ''; grid-row: 1 / 4; grid-column: 1 / -1; z-index: 0; pointer-events: none;
  border-radius: var(--hl-glass-r); background-color: transparent;
}
.ux-pack-hauler.ux-on .ux-shell > .ux-header, .ux-pack-hauler.ux-on .ux-shell > .ux-nav, .ux-pack-hauler.ux-on .ux-shell > .ux-main { position: static; z-index: 1; color: var(--ux-text); text-shadow: var(--ux-text-glow); min-width: 0; }

/* plate line on the case: .ux-brand moves up there unless the shell carries its own .hl-plate. The header stays
   position: static (grid items take z-index without it), so the brand is placed against the shell. */
.ux-pack-hauler.ux-on .ux-shell > .ux-header .ux-brand, .ux-pack-hauler.ux-on .ux-shell > .hl-plate { position: absolute; top: 13px; left: 30px; right: 30px; }
.ux-pack-hauler.ux-on .ux-shell > .ux-header .ux-brand {
  font: 600 11px/1 var(--hl-case-font); letter-spacing: .22em; text-transform: uppercase; color: var(--hl-case-ink); text-shadow: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ux-pack-hauler.ux-on .ux-shell:has(> .hl-plate) > .ux-header .ux-brand {
  position: static; font: inherit; font-size: var(--hl-fs-sm); letter-spacing: .08em; color: var(--ux-text-2); text-shadow: var(--ux-text-glow); flex-basis: 100%; white-space: normal;
}

/* header on the glass */
.ux-pack-hauler.ux-on .ux-header { grid-row: 1; grid-column: 1 / -1; display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 20px; padding: 20px 26px 10px; }
.ux-pack-hauler.ux-on .ux-title { margin: 0; font: 400 var(--hl-title)/1 var(--ux-font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--hl-bright); text-shadow: var(--ux-text-glow); }
.ux-pack-hauler.ux-on .ux-header-end { margin-left: auto; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ux-pack-hauler.ux-on .ux-clock { font: 400 var(--hl-clock)/1 var(--ux-font-display); font-variant-numeric: tabular-nums; color: var(--ux-text); letter-spacing: .06em; }

/* nav: "> " marks the current item, which is shown in inverse video */
.ux-pack-hauler.ux-on .ux-nav { grid-row: 2 / 4; grid-column: 1; padding: 8px 4px 24px 18px; }
.ux-pack-hauler.ux-on .ux-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ux-pack-hauler.ux-on .ux-nav-item {
  display: flex; align-items: center; width: 100%; box-sizing: border-box; min-height: 36px; padding: 3px 10px 3px 6px; margin: 0;
  font: inherit; font-family: var(--ux-font-body); text-transform: uppercase; letter-spacing: .07em; text-align: left; text-decoration: none;
  color: var(--ux-text); background: transparent; border: 0; border-radius: 0; cursor: pointer; text-shadow: inherit;
}
.ux-pack-hauler.ux-on .ux-nav-item::before { content: '\00a0\00a0'; white-space: pre; font-family: var(--ux-font-mono); }
.ux-pack-hauler.ux-on .ux-nav-item:hover { background: var(--ux-surface-2); color: var(--hl-bright); }
.ux-pack-hauler.ux-on .ux-nav-item[aria-current="page"], .ux-pack-hauler.ux-on .ux-nav-item.is-active { background: var(--ux-accent); color: var(--ux-accent-ink); text-shadow: none; box-shadow: var(--ux-glow); }
.ux-pack-hauler.ux-on .ux-nav-item[aria-current="page"]::before, .ux-pack-hauler.ux-on .ux-nav-item.is-active::before { content: '>\00a0'; }
.ux-pack-hauler.ux-on .ux-nav-item:focus-visible { outline: 2px solid var(--ux-focus); outline-offset: 2px; }

/* main */
.ux-pack-hauler.ux-on .ux-main { grid-row: 2 / 4; grid-column: 2; container: hl-main / inline-size; display: flex; flex-direction: column; gap: var(--ux-gap); padding: 8px 26px 26px 14px; }
.ux-pack-hauler.ux-on .ux-shell:not(:has(> .ux-nav)) > .ux-main { grid-column: 1 / -1; padding-left: 26px; }

/* footer: on the case, below the screen */
.ux-pack-hauler.ux-on .ux-shell > .ux-footer {
  grid-row: 4; grid-column: 1 / -1; margin-top: 28px; padding: 0 4px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  font: 500 12px/1.4 var(--hl-case-font); letter-spacing: .06em; color: var(--hl-case-ink); text-shadow: none;
}

@container hl-shell (max-width: 760px) {
  .ux-pack-hauler.ux-on .ux-nav { grid-row: 2; grid-column: 1 / -1; padding: 2px 12px 0; }
  .ux-pack-hauler.ux-on .ux-nav ul { flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .ux-pack-hauler.ux-on .ux-nav-item { width: auto; padding: 3px 10px 3px 4px; }
  .ux-pack-hauler.ux-on .ux-main { grid-row: 3; grid-column: 1 / -1; padding: 12px 12px 16px; }
  .ux-pack-hauler.ux-on .ux-header { padding: 16px 16px 6px; }
  .ux-pack-hauler.ux-on .ux-title { font-size: calc(var(--hl-title) * .8); }
}
@media (max-width: 600px) {
  .ux-pack-hauler.ux-on .ux-shell { padding: 36px 14px 16px; border-radius: 16px; }
  .ux-pack-hauler.ux-on .ux-shell > .ux-header .ux-brand, .ux-pack-hauler.ux-on .ux-shell > .hl-plate { left: 20px; right: 20px; top: 12px; }
  .ux-pack-hauler.ux-on { --hl-glass-r: 18px / 14px; }
  .ux-pack-hauler.ux-on.ux-curve-flat { --hl-glass-r: 6px; }
  .ux-pack-hauler.ux-on .ux-shell::before, .ux-pack-hauler.ux-on.ux-curve-curved .ux-shell::before { box-shadow: inset 0 0 50px rgba(0, 0, 0, .8), 0 0 0 7px var(--hl-bezel), 0 0 0 9px var(--hl-rim), 0 0 0 10px var(--hl-case-deep); }
  .ux-pack-hauler.ux-on.ux-curve-flat .ux-shell::before { box-shadow: inset 0 0 0 2px var(--hl-glass-edge), 0 0 0 7px var(--hl-bezel), 0 0 0 9px var(--hl-rim), 0 0 0 10px var(--hl-case-deep); }
  .ux-pack-hauler.ux-on .ux-shell > .ux-footer { margin-top: 22px; }
}

/* ============================================================================================ layout */
.ux-pack-hauler.ux-on .ux-grid { display: grid; gap: var(--ux-gap); grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.ux-pack-hauler.ux-on .ux-grid-2 { display: grid; gap: var(--ux-gap); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ux-pack-hauler.ux-on .ux-grid-3 { display: grid; gap: var(--ux-gap); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ux-pack-hauler.ux-on .ux-grid-4 { display: grid; gap: var(--ux-gap); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ux-pack-hauler.ux-on .ux-stack { display: flex; flex-direction: column; gap: var(--ux-gap); min-width: 0; }
.ux-pack-hauler.ux-on .ux-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ux-gap); min-width: 0; }
.ux-pack-hauler.ux-on .ux-span-2 { grid-column: span 2; }
.ux-pack-hauler.ux-on .ux-span-all { grid-column: 1 / -1; }
@container (max-width: 860px) { .ux-pack-hauler.ux-on .ux-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 680px) { .ux-pack-hauler.ux-on .ux-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 560px) {
  .ux-pack-hauler.ux-on .ux-grid-2, .ux-pack-hauler.ux-on .ux-grid-3 { grid-template-columns: minmax(0, 1fr); }
  .ux-pack-hauler.ux-on .ux-span-2 { grid-column: 1 / -1; }
}
@container (max-width: 230px) { .ux-pack-hauler.ux-on .ux-grid-4 { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================================================ panels */
.ux-pack-hauler.ux-on .ux-panel { box-sizing: border-box; min-width: 0; display: flex; flex-direction: column; gap: 10px; padding: var(--ux-pad);
  background: var(--ux-surface); border: 2px solid var(--ux-line); border-radius: var(--ux-radius); }
.ux-pack-hauler.ux-on .ux-panel-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; padding-bottom: 5px; border-bottom: 2px dashed var(--ux-line); }
.ux-pack-hauler.ux-on .ux-panel-title { margin: 0; font: 400 calc(var(--hl-h3) * .92)/1.05 var(--ux-font-display); letter-spacing: .09em; text-transform: uppercase; color: var(--hl-bright); }
.ux-pack-hauler.ux-on .ux-panel-meta { font-size: var(--hl-fs-sm); color: var(--ux-muted); letter-spacing: .04em; }
.ux-pack-hauler.ux-on .ux-panel-body { min-width: 0; display: flex; flex-direction: column; gap: 10px; }

/* .hl-ascii: a double-ruled box-drawing frame with the title in brackets, like a terminal window */
.ux-pack-hauler.ux-on .hl-ascii { border: 4px double var(--ux-line-strong); border-radius: 0; }
.ux-pack-hauler.ux-on .hl-ascii > .ux-panel-head { border-bottom-style: solid; border-bottom-width: 1px; }
.ux-pack-hauler.ux-on .hl-ascii .ux-panel-title::before { content: '[\00a0'; color: var(--ux-text-2); }
.ux-pack-hauler.ux-on .hl-ascii .ux-panel-title::after { content: '\00a0]'; color: var(--ux-text-2); }

/* ============================================================================================ type */
.ux-pack-hauler.ux-on .ux-h1, .ux-pack-hauler.ux-on .ux-h2, .ux-pack-hauler.ux-on .ux-h3 { margin: 0 0 .35em; font-family: var(--ux-font-display); font-weight: 400; line-height: 1.02; text-transform: uppercase; color: var(--hl-bright); text-shadow: var(--ux-text-glow); }
.ux-pack-hauler.ux-on .ux-h1 { font-size: var(--hl-h1); letter-spacing: .1em; }
.ux-pack-hauler.ux-on .ux-h2 { font-size: var(--hl-h2); letter-spacing: .08em; }
.ux-pack-hauler.ux-on .ux-h3 { font-size: var(--hl-h3); letter-spacing: .07em; }
.ux-pack-hauler.ux-on .ux-text { margin: 0 0 .6em; color: var(--ux-text); max-width: 76ch; }
.ux-pack-hauler.ux-on .ux-muted { color: var(--ux-muted); }
.ux-pack-hauler.ux-on .ux-label { display: inline-block; font-family: var(--ux-font-body); font-size: var(--hl-fs-sm); font-weight: var(--hl-label-w); letter-spacing: var(--hl-label-track); text-transform: uppercase; color: var(--ux-muted); }
.ux-pack-hauler.ux-on .ux-mono { font-family: var(--ux-font-mono); font-variant-numeric: tabular-nums; }
.ux-pack-hauler.ux-on .ux-kbd {
  display: inline-block; min-width: 1.4em; box-sizing: border-box; padding: 3px 6px 2px; margin: 0 1px 3px; vertical-align: .12em;
  font: 600 11px/1.2 var(--hl-case-font); letter-spacing: .06em; text-align: center; text-transform: uppercase; text-shadow: none;
  color: var(--hl-key-ink); background: linear-gradient(180deg, var(--hl-key-top), var(--hl-key-bot)); border-radius: 4px;
  box-shadow: 0 2px 0 var(--hl-key-edge), inset 0 1px 0 var(--hl-key-hl);
}
.ux-pack-hauler.ux-on .ux-link, .ux-pack-hauler.ux-on .ux-main a:not([class]), .ux-pack-hauler.ux-on .ux-panel a:not([class]) { color: var(--ux-accent-text); text-decoration: underline dotted 2px; text-underline-offset: .2em; text-decoration-skip-ink: none; }
.ux-pack-hauler.ux-on .ux-link:hover, .ux-pack-hauler.ux-on .ux-main a:not([class]):hover, .ux-pack-hauler.ux-on .ux-panel a:not([class]):hover { background: var(--ux-accent); color: var(--ux-accent-ink); text-decoration: none; text-shadow: none; }
.ux-pack-hauler.ux-on .ux-divider { border: 0; height: 2px; margin: 14px 0; background: repeating-linear-gradient(90deg, var(--ux-line-strong) 0 10px, transparent 10px 16px); }

/* ============================================================================================ tone glyphs */
/* every tone carries a glyph as well as a color: + ok, ! warn, !! bad, i info (read aloud as nothing where supported) */
.ux-pack-hauler.ux-on .is-ok { --hl-tone: var(--ux-ok-text); --hl-tone-fill: var(--ux-ok); --hl-tone-ink: var(--ux-ok-ink); --hl-tone-bg: var(--ux-ok-bg); --hl-glyph: '+'; }
.ux-pack-hauler.ux-on .is-warn { --hl-tone: var(--ux-warn-text); --hl-tone-fill: var(--ux-warn); --hl-tone-ink: var(--ux-warn-ink); --hl-tone-bg: var(--ux-warn-bg); --hl-glyph: '!'; }
.ux-pack-hauler.ux-on .is-bad { --hl-tone: var(--ux-bad-text); --hl-tone-fill: var(--ux-bad); --hl-tone-ink: var(--ux-bad-ink); --hl-tone-bg: var(--ux-bad-bg); --hl-glyph: '!!'; }
.ux-pack-hauler.ux-on .is-info { --hl-tone: var(--ux-info-text); --hl-tone-fill: var(--ux-info); --hl-tone-ink: var(--ux-info-ink); --hl-tone-bg: var(--ux-info-bg); --hl-glyph: 'i'; }

/* ============================================================================================ data */
.ux-pack-hauler.ux-on .ux-stat { box-sizing: border-box; min-width: 0; display: grid; gap: 3px; align-content: start; padding: 8px 12px 10px;
  background: var(--ux-surface); border: 2px solid var(--ux-line); border-radius: var(--ux-radius); }
.ux-pack-hauler.ux-on .ux-stat-label { font-size: var(--hl-fs-sm); font-weight: var(--hl-label-w); letter-spacing: var(--hl-label-track); text-transform: uppercase; color: var(--ux-muted); }
.ux-pack-hauler.ux-on .ux-stat-value { font: 400 var(--hl-value)/1 var(--ux-font-display); letter-spacing: .03em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--hl-bright); }
.ux-pack-hauler.ux-on .ux-stat-note { font-size: var(--hl-fs-sm); color: var(--ux-text-2); }
.ux-pack-hauler.ux-on .ux-stat:is(.is-ok, .is-warn, .is-bad, .is-info) { border-left: 8px solid var(--hl-tone); }
.ux-pack-hauler.ux-on .ux-stat:is(.is-ok, .is-warn, .is-bad, .is-info) .ux-stat-value { color: var(--hl-tone); }
.ux-pack-hauler.ux-on .ux-stat:is(.is-ok, .is-warn, .is-bad, .is-info) .ux-stat-label::before { content: var(--hl-glyph) '\00a0'; content: var(--hl-glyph) '\00a0' / ''; color: var(--hl-tone); }

@container (max-width: 420px) { .ux-pack-hauler.ux-on .ux-stat { padding: 7px 9px 8px; } .ux-pack-hauler.ux-on .ux-stat-value { font-size: min(var(--hl-value), 9.5cqi); } }

.ux-pack-hauler.ux-on .ux-table-wrap { max-width: 100%; overflow-x: auto; scrollbar-color: var(--ux-line-strong) transparent; }
.ux-pack-hauler.ux-on .ux-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ux-pack-hauler.ux-on .ux-table th { padding: 4px 14px 4px 0; text-align: left; vertical-align: bottom; white-space: nowrap;
  font-size: var(--hl-fs-sm); font-weight: var(--hl-label-w); letter-spacing: var(--hl-label-track); text-transform: uppercase; color: var(--ux-muted); border-bottom: 2px dashed var(--ux-line-strong); }
.ux-pack-hauler.ux-on .ux-table td { padding: 5px 14px 5px 0; vertical-align: top; border-bottom: 1px dotted var(--ux-line); }
.ux-pack-hauler.ux-on .ux-table :is(th, td):last-child { padding-right: 0; }
.ux-pack-hauler.ux-on .ux-table tbody tr:hover { background: var(--ux-surface-2); }
.ux-pack-hauler.ux-on .ux-table .ux-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ux-pack-hauler.ux-on .ux-table caption { caption-side: top; text-align: left; padding-bottom: 6px; color: var(--ux-text-2); }

.ux-pack-hauler.ux-on .ux-badge {
  display: inline-flex; align-items: center; gap: .35em; padding: 1px 7px; vertical-align: .08em; white-space: nowrap;
  font-family: var(--ux-font-body); font-size: var(--hl-fs-xs); line-height: 1.15; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ux-text-2); background: transparent; border: 1px solid currentColor; border-radius: 1px;
}
.ux-pack-hauler.ux-on .ux-badge:is(.is-ok, .is-warn, .is-bad) { background: var(--hl-tone-fill); color: var(--hl-tone-ink); border-color: var(--hl-tone-fill); text-shadow: none; }
.ux-pack-hauler.ux-on .ux-badge.is-info { color: var(--ux-info-text); border-color: currentColor; }
.ux-pack-hauler.ux-on .ux-badge.is-bad { box-shadow: 0 0 0 2px var(--ux-bg), 0 0 0 3px var(--hl-tone-fill); }
.ux-pack-hauler.ux-on :is(.ux-stack, .ux-panel, .ux-panel-body, .ux-field, .ux-dialog-body) > .ux-badge { align-self: flex-start; }
.ux-pack-hauler.ux-on .ux-badge:is(.is-ok, .is-warn, .is-bad, .is-info)::before { content: var(--hl-glyph); content: var(--hl-glyph) / ''; }

/* status lights: the tone is also a shape (ok round, warn triangle, bad square with a ring, info hollow ring) */
.ux-pack-hauler.ux-on .ux-light { display: inline-block; flex: none; width: .55em; height: .55em; vertical-align: .05em; background: var(--ux-text-2); box-shadow: 0 0 var(--hl-led-blur) var(--ux-text-2); }
.ux-pack-hauler.ux-on .ux-light.is-ok { background: var(--ux-ok-text); border-radius: 50%; box-shadow: 0 0 var(--hl-led-blur) var(--ux-ok-text); }
.ux-pack-hauler.ux-on .ux-light.is-warn { background: var(--ux-warn-text); width: .66em; clip-path: polygon(50% 0, 100% 100%, 0 100%); box-shadow: none; }
.ux-pack-hauler.ux-on .ux-light.is-bad { background: var(--ux-bad-text); box-shadow: 0 0 0 2px var(--ux-bg), 0 0 0 3.5px var(--ux-bad-text), 0 0 var(--hl-led-blur) var(--ux-bad-text); }
.ux-pack-hauler.ux-on .ux-light.is-info { background: transparent; border: 2px solid var(--ux-info-text); border-radius: 50%; box-sizing: border-box; box-shadow: 0 0 var(--hl-led-blur) var(--ux-info-text); }

/* meters and progress: block bars */
.ux-pack-hauler.ux-on .ux-meter, .ux-pack-hauler.ux-on .ux-progress {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 16px; box-sizing: border-box; padding: 2px; margin: 0;
  background: var(--ux-surface); border: 1px solid var(--ux-line-strong); border-radius: 0; color: var(--ux-text);
}
.ux-pack-hauler.ux-on .ux-meter::-webkit-meter-bar { background: transparent; border: 0; border-radius: 0; height: 100%; }
.ux-pack-hauler.ux-on .ux-meter::-webkit-meter-optimum-value { background: repeating-linear-gradient(90deg, var(--ux-text) 0 8px, transparent 8px 11px); box-shadow: none; }
.ux-pack-hauler.ux-on .ux-meter::-webkit-meter-suboptimum-value { background: repeating-linear-gradient(90deg, var(--ux-warn-text) 0 8px, transparent 8px 11px); }
.ux-pack-hauler.ux-on .ux-meter::-webkit-meter-even-less-good-value { background: repeating-linear-gradient(90deg, var(--ux-bad-text) 0 8px, transparent 8px 11px); }
.ux-pack-hauler.ux-on .ux-meter::-moz-meter-bar { background: repeating-linear-gradient(90deg, var(--ux-text) 0 8px, transparent 8px 11px); }
.ux-pack-hauler.ux-on .ux-meter:-moz-meter-sub-optimum::-moz-meter-bar { background: repeating-linear-gradient(90deg, var(--ux-warn-text) 0 8px, transparent 8px 11px); }
.ux-pack-hauler.ux-on .ux-meter:-moz-meter-sub-sub-optimum::-moz-meter-bar { background: repeating-linear-gradient(90deg, var(--ux-bad-text) 0 8px, transparent 8px 11px); }
.ux-pack-hauler.ux-on .ux-progress::-webkit-progress-bar { background: transparent; }
.ux-pack-hauler.ux-on .ux-progress::-webkit-progress-value { background: repeating-linear-gradient(90deg, var(--ux-accent) 0 8px, transparent 8px 11px); }
.ux-pack-hauler.ux-on .ux-progress::-moz-progress-bar { background: repeating-linear-gradient(90deg, var(--ux-accent) 0 8px, transparent 8px 11px); }
.ux-pack-hauler.ux-on .ux-progress:indeterminate { background: repeating-linear-gradient(90deg, var(--ux-text-2) 0 8px, transparent 8px 11px) content-box, var(--ux-surface); background-size: 33% 100%; background-repeat: no-repeat; }
.ux-pack-hauler.ux-on .ux-progress:indeterminate::-webkit-progress-bar { background: transparent; }

.ux-pack-hauler.ux-on .ux-chart { min-width: 0; position: relative; }
.ux-pack-hauler.ux-on .ux-chart svg { display: block; width: 100%; height: auto; overflow: visible; filter: var(--hl-chart-filter); font-family: var(--ux-font-display); }
.ux-pack-hauler.ux-on .ux-chart svg text { fill: var(--ux-text-2); }

.ux-pack-hauler.ux-on .ux-list { list-style: none; margin: 0; padding: 0; }
.ux-pack-hauler.ux-on .ux-list > li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; padding: 5px 0; border-bottom: 1px dotted var(--ux-line); }
.ux-pack-hauler.ux-on .ux-list > li:last-child { border-bottom: 0; }
.ux-pack-hauler.ux-on .ux-list-time { flex: none; color: var(--ux-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ux-pack-hauler.ux-on .ux-list-main { flex: 1 1 14em; min-width: 0; }
.ux-pack-hauler.ux-on .ux-list-end { margin-left: auto; flex: none; }

.ux-pack-hauler.ux-on .ux-empty { box-sizing: border-box; padding: 26px 18px; text-align: center; color: var(--ux-text-2); text-transform: uppercase; letter-spacing: .1em; border: 2px dashed var(--ux-line); }
.ux-pack-hauler.ux-on .ux-empty::after { content: ''; display: inline-block; width: .55em; height: .95em; margin-left: .35em; vertical-align: -.12em; background: currentColor; }

/* ============================================================================================ feedback */
.ux-pack-hauler.ux-on .ux-alert { box-sizing: border-box; min-width: 0; padding: 8px 12px; border-radius: var(--ux-radius);
  background: var(--ux-accent); color: var(--ux-accent-ink); text-shadow: none; box-shadow: var(--ux-glow); }
.ux-pack-hauler.ux-on .ux-alert-title { display: inline; margin-right: .7em; font-weight: inherit; text-transform: uppercase; letter-spacing: .1em; }
.ux-pack-hauler.ux-on .ux-alert-title::before { content: '!!\00a0'; content: '!!\00a0' / ''; }
.ux-pack-hauler.ux-on .ux-alert:is(.is-warn, .is-bad) { background: var(--hl-tone-fill); color: var(--hl-tone-ink); box-shadow: 0 0 var(--hl-led-blur) var(--hl-tone-fill); }
.ux-pack-hauler.ux-on .ux-alert.is-bad { outline: 2px solid var(--hl-tone-fill); outline-offset: 3px; }
.ux-pack-hauler.ux-on .ux-alert:is(.is-ok, .is-info) { background: var(--hl-tone-bg); color: var(--hl-tone); border-left: 6px solid var(--hl-tone); box-shadow: none; text-shadow: var(--ux-text-glow); }
.ux-pack-hauler.ux-on .ux-alert:is(.is-ok, .is-warn, .is-bad, .is-info) .ux-alert-title::before { content: var(--hl-glyph) '\00a0'; content: var(--hl-glyph) '\00a0' / ''; }
.ux-pack-hauler.ux-on .ux-alert a { color: inherit; text-decoration: underline; }
.ux-pack-hauler.ux-on .ux-alert a:hover { background: transparent; color: inherit; }

.ux-pack-hauler.ux-on .ux-toast {
  position: fixed; z-index: 2147482000; right: max(16px, env(safe-area-inset-right, 0px)); bottom: max(16px, env(safe-area-inset-bottom, 0px));
  box-sizing: border-box; max-width: min(400px, calc(100vw - 48px)); padding: 12px 16px; border-radius: 10px / 8px;
  color: var(--ux-text); text-shadow: var(--ux-text-glow); font-family: var(--ux-font-body); font-size: var(--hl-fs);
  background: repeating-linear-gradient(180deg, var(--hl-raster) 0 1px, var(--hl-raster-gap) 1px 2px, transparent 2px 3px), var(--hl-glass);
  box-shadow: 0 0 0 5px var(--hl-bezel), 0 0 0 7px var(--hl-rim), 0 18px 44px rgba(0, 0, 0, .65);
}
.ux-pack-hauler.ux-on .ux-toast:is(.is-ok, .is-warn, .is-bad, .is-info) { border-left: 6px solid var(--hl-tone); }

/* ============================================================================================ buttons */
.ux-pack-hauler.ux-on .ux-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4em; box-sizing: border-box; min-height: var(--hl-ctl-h); padding: 3px 14px; margin: 0;
  font: inherit; font-family: var(--ux-font-body); font-size: var(--hl-fs); line-height: 1.1; letter-spacing: .07em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  color: var(--ux-text); background: transparent; border: 2px solid var(--ux-line-strong); border-radius: var(--ux-radius); cursor: pointer; text-shadow: inherit;
}
.ux-pack-hauler.ux-on .ux-btn:hover { background: var(--ux-accent); border-color: var(--ux-accent); color: var(--ux-accent-ink); text-shadow: none; }
.ux-pack-hauler.ux-on .ux-btn:active { background: var(--hl-bright); border-color: var(--hl-bright); color: var(--ux-accent-ink); }
.ux-pack-hauler.ux-on .ux-btn.is-primary { background: var(--ux-accent); border-color: var(--ux-accent); color: var(--ux-accent-ink); text-shadow: none; box-shadow: var(--ux-glow); }
.ux-pack-hauler.ux-on .ux-btn.is-primary:hover { background: var(--hl-bright); border-color: var(--hl-bright); }
.ux-pack-hauler.ux-on .ux-btn.is-danger { color: var(--ux-bad-text); border-color: var(--ux-bad-text); }
.ux-pack-hauler.ux-on .ux-btn.is-danger::before { content: '!!'; content: '!!' / ''; }
.ux-pack-hauler.ux-on .ux-btn.is-danger:hover { background: var(--ux-bad); border-color: var(--ux-bad); color: var(--ux-bad-ink); }
.ux-pack-hauler.ux-on .ux-btn.is-quiet { border-color: transparent; color: var(--ux-text-2); }
.ux-pack-hauler.ux-on .ux-btn.is-quiet:hover { background: var(--ux-surface-2); border-color: var(--ux-line); color: var(--ux-text); text-shadow: inherit; }
.ux-pack-hauler.ux-on .ux-btn:is(:disabled, [aria-disabled="true"]), .ux-pack-hauler.ux-on .ux-btn:is(:disabled, [aria-disabled="true"]):hover {
  cursor: not-allowed; background: transparent; color: var(--ux-muted); border-color: var(--ux-line); border-style: dashed; box-shadow: none; text-shadow: none;
}
.ux-pack-hauler.ux-on .ux-btn:is(:focus-visible, .is-focus) { outline: 2px solid var(--ux-focus); outline-offset: 3px; }

/* ============================================================================================ fields */
.ux-pack-hauler.ux-on .ux-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ux-pack-hauler.ux-on .ux-field > label, .ux-pack-hauler.ux-on .ux-field > .ux-label { font-size: var(--hl-fs-sm); font-weight: var(--hl-label-w); letter-spacing: var(--hl-label-track); text-transform: uppercase; color: var(--ux-muted); }
.ux-pack-hauler.ux-on :is(.ux-input, .ux-select, .ux-textarea, .ux-search) {
  box-sizing: border-box; width: 100%; min-height: var(--hl-ctl-h); padding: 4px 10px; margin: 0;
  font: inherit; font-family: var(--ux-font-body); font-size: var(--hl-fs); line-height: 1.2; letter-spacing: .03em;
  color: var(--ux-text); caret-color: var(--hl-bright); text-shadow: inherit;
  background-color: var(--ux-surface); border: 0; border-bottom: 2px solid var(--ux-line-strong); border-radius: 0; box-shadow: inset 0 0 0 1px var(--ux-line);
}
.ux-pack-hauler.ux-on :is(.ux-input, .ux-select, .ux-textarea, .ux-search)::placeholder { color: var(--ux-muted); opacity: 1; }
.ux-pack-hauler.ux-on :is(.ux-input, .ux-select, .ux-textarea, .ux-search):is(:focus-visible, .is-focus) { outline: 2px solid var(--ux-focus); outline-offset: 2px; border-bottom-color: var(--hl-bright); }
.ux-pack-hauler.ux-on :is(.ux-input, .ux-select, .ux-textarea, .ux-search):focus { border-bottom-color: var(--hl-bright); }
.ux-pack-hauler.ux-on :is(.ux-input, .ux-select, .ux-textarea, .ux-search)[aria-invalid="true"], .ux-pack-hauler.ux-on .ux-field.is-invalid :is(.ux-input, .ux-select, .ux-textarea, .ux-search) {
  border-bottom-color: var(--ux-bad-text); box-shadow: inset 0 0 0 1px var(--ux-bad-text);
}
.ux-pack-hauler.ux-on :is(.ux-input, .ux-select, .ux-textarea, .ux-search):disabled { cursor: not-allowed; color: var(--ux-muted); background-color: transparent; border-bottom-style: dashed; box-shadow: inset 0 0 0 1px var(--ux-line); }
.ux-pack-hauler.ux-on .ux-textarea { min-height: 104px; resize: vertical; line-height: var(--hl-lh); padding-block: 6px; }
.ux-pack-hauler.ux-on .ux-select {
  -webkit-appearance: none; appearance: none; padding-right: 34px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ux-text) 50%), linear-gradient(135deg, var(--ux-text) 50%, transparent 50%);
  background-position: calc(100% - 19px) 52%, calc(100% - 13px) 52%; background-size: 6px 6px; background-repeat: no-repeat;
}
.ux-pack-hauler.ux-on .ux-select option { background: var(--hl-glass); color: var(--ux-text); }
.ux-pack-hauler.ux-on .ux-search {
  -webkit-appearance: none; appearance: none; padding-left: 36px;
  background-image: radial-gradient(circle at 16px 50%, transparent 0 5px, var(--ux-text-2) 5.5px 7.5px, transparent 8px),
    linear-gradient(45deg, transparent 0 38%, var(--ux-text-2) 38% 62%, transparent 62%);
  background-position: 0 0, 20px calc(50% + 5px); background-size: 100% 100%, 7px 7px; background-repeat: no-repeat;
}
.ux-pack-hauler.ux-on .ux-search::-webkit-search-cancel-button { filter: grayscale(1); cursor: pointer; }
.ux-pack-hauler.ux-on .ux-hint { font-size: var(--hl-fs-sm); color: var(--ux-text-2); }
.ux-pack-hauler.ux-on .ux-error { font-size: var(--hl-fs-sm); color: var(--ux-bad-text); }
.ux-pack-hauler.ux-on .ux-error::before { content: '!!\00a0'; content: '!!\00a0' / ''; }

/* checks, radios, switches */
.ux-pack-hauler.ux-on .ux-check { display: inline-flex; align-items: center; gap: .6em; min-height: 36px; cursor: pointer; color: var(--ux-text); }
.ux-pack-hauler.ux-on .ux-check input[type="checkbox"]:not(.ux-switch), .ux-pack-hauler.ux-on .ux-check input[type="radio"] {
  -webkit-appearance: none; appearance: none; flex: none; box-sizing: border-box; width: 22px; height: 22px; margin: 0; padding: 3px; cursor: pointer;
  background: var(--ux-surface); border: 2px solid var(--ux-line-strong); border-radius: 0;
}
.ux-pack-hauler.ux-on .ux-check input[type="radio"] { border-radius: 50%; }
.ux-pack-hauler.ux-on .ux-check input:checked:not(.ux-switch) { background: var(--ux-accent) content-box; border-color: var(--ux-accent); box-shadow: var(--ux-glow); }
.ux-pack-hauler.ux-on .ux-check input:is(:focus-visible, .is-focus) { outline: 2px solid var(--ux-focus); outline-offset: 3px; }
.ux-pack-hauler.ux-on .ux-check:has(input:disabled) { cursor: not-allowed; color: var(--ux-muted); }
.ux-pack-hauler.ux-on .ux-check input:disabled { cursor: not-allowed; border-style: dashed; border-color: var(--ux-line); box-shadow: none; }
.ux-pack-hauler.ux-on .ux-check input:disabled:checked:not(.ux-switch) { background: var(--ux-muted) content-box; }

.ux-pack-hauler.ux-on .ux-switch {
  -webkit-appearance: none; appearance: none; flex: none; box-sizing: border-box; width: 52px; height: 28px; margin: 0; vertical-align: middle; cursor: pointer;
  border: 2px solid var(--ux-line-strong); border-radius: 0; background-color: var(--ux-surface);
  background-image: linear-gradient(var(--ux-text-2), var(--ux-text-2)); background-size: 18px 18px; background-repeat: no-repeat; background-position: 3px 50%;
}
.ux-pack-hauler.ux-on .ux-switch:checked { background-color: var(--ux-accent); border-color: var(--ux-accent); background-image: linear-gradient(var(--ux-accent-ink), var(--ux-accent-ink)); background-position: calc(100% - 3px) 50%; box-shadow: var(--ux-glow); }
.ux-pack-hauler.ux-on .ux-switch:is(:focus-visible, .is-focus) { outline: 2px solid var(--ux-focus); outline-offset: 3px; }
.ux-pack-hauler.ux-on .ux-switch:disabled { cursor: not-allowed; border-style: dashed; border-color: var(--ux-line); background-color: transparent; background-image: linear-gradient(var(--ux-muted), var(--ux-muted)); box-shadow: none; }

/* tabs */
.ux-pack-hauler.ux-on .ux-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 2px solid var(--ux-line-strong); }
.ux-pack-hauler.ux-on .ux-tab {
  box-sizing: border-box; min-height: 36px; padding: 3px 14px; margin: 0 0 -2px; cursor: pointer;
  font: inherit; font-family: var(--ux-font-body); font-size: var(--hl-fs); letter-spacing: .07em; text-transform: uppercase;
  color: var(--ux-text-2); background: transparent; border: 2px solid transparent; border-bottom: 0; border-radius: 0; text-shadow: inherit;
}
.ux-pack-hauler.ux-on .ux-tab:hover { color: var(--ux-text); background: var(--ux-surface-2); }
.ux-pack-hauler.ux-on .ux-tab[aria-selected="true"] { color: var(--ux-accent-ink); background: var(--ux-accent); border-color: var(--ux-accent); text-shadow: none; box-shadow: var(--ux-glow); }
.ux-pack-hauler.ux-on .ux-tab:is(:focus-visible, .is-focus) { outline: 2px solid var(--ux-focus); outline-offset: 2px; }
.ux-pack-hauler.ux-on .ux-tab:disabled { cursor: not-allowed; color: var(--ux-muted); }

/* dialog: a small monitor of its own */
.ux-pack-hauler.ux-on .ux-dialog {
  box-sizing: border-box; width: min(560px, calc(100vw - 40px)); max-width: none; max-height: calc(100dvh - 48px); padding: 0; overflow: auto;
  border: 0; border-radius: 16px / 12px; color: var(--ux-text); text-shadow: var(--ux-text-glow);
  font-family: var(--ux-font-body); font-size: var(--hl-fs); line-height: var(--hl-lh); letter-spacing: var(--hl-track);
  background: repeating-linear-gradient(180deg, var(--hl-raster) 0 1px, var(--hl-raster-gap) 1px 2px, transparent 2px 3px), var(--hl-glass);
  box-shadow: inset 0 0 40px rgba(0, 0, 0, .7), 0 0 0 7px var(--hl-bezel), 0 0 0 9px var(--hl-rim), 0 30px 80px rgba(0, 0, 0, .75);
}
.ux-pack-hauler.ux-on .ux-dialog::backdrop { background: rgba(0, 0, 0, .72); }
.ux-pack-hauler.ux-on .ux-dialog-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 16px 20px 8px; border-bottom: 2px dashed var(--ux-line); }
.ux-pack-hauler.ux-on .ux-dialog-head :is(h1, h2, h3) { margin: 0; font: 400 var(--hl-h3)/1.05 var(--ux-font-display); letter-spacing: .09em; text-transform: uppercase; color: var(--hl-bright); }
.ux-pack-hauler.ux-on .ux-dialog-body { padding: 14px 20px; display: flex; flex-direction: column; gap: 10px; }
.ux-pack-hauler.ux-on .ux-dialog-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; padding: 12px 20px 18px; border-top: 2px dashed var(--ux-line); }

/* ============================================================================================ the case: footer, .hl-case, keys */
.ux-pack-hauler.ux-on .hl-case {
  box-sizing: border-box; padding: 18px 20px; border-radius: 16px; color: var(--hl-case-ink); text-shadow: none;
  font-family: var(--hl-case-font); font-size: 13px; line-height: 1.45; letter-spacing: .02em;
  background: linear-gradient(180deg, var(--hl-case-hi) 0, var(--hl-case) 34%, var(--hl-case-lo) 100%);
  box-shadow: inset 0 2px 0 var(--hl-key-hl), inset 0 -4px 0 var(--hl-case-deep), 0 14px 30px rgba(0, 0, 0, .5);
}
.ux-pack-hauler.ux-on :is(.ux-shell > .ux-footer, .hl-case) :is(.ux-text, .ux-h1, .ux-h2, .ux-h3) { color: var(--hl-case-ink); text-shadow: none; font-family: var(--hl-case-font); }
.ux-pack-hauler.ux-on :is(.ux-shell > .ux-footer, .hl-case) :is(.ux-muted, .ux-label, .ux-hint) { color: var(--hl-case-ink-2); text-shadow: none; font-family: var(--hl-case-font); font-size: 11px; font-weight: 600; letter-spacing: .16em; }
.ux-pack-hauler.ux-on :is(.ux-shell > .ux-footer, .hl-case) :is(.ux-link, a:not([class])) { color: var(--hl-case-ink); text-decoration: underline; text-underline-offset: .2em; text-shadow: none; }
.ux-pack-hauler.ux-on :is(.ux-shell > .ux-footer, .hl-case) :is(.ux-link, a:not([class])):hover { background: transparent; color: var(--hl-case-ink); text-decoration-thickness: 2px; }
.ux-pack-hauler.ux-on :is(.ux-shell > .ux-footer, .hl-case) :focus-visible { outline: 3px solid var(--hl-case-focus); outline-offset: 4px; }
.ux-pack-hauler.ux-on :is(.ux-shell > .ux-footer, .hl-case) .ux-badge { background: var(--hl-case-ink); color: var(--hl-case); border-color: var(--hl-case-ink); font-family: var(--hl-case-font); font-size: 11px; font-weight: 600; text-shadow: none; }
.ux-pack-hauler.ux-on :is(.ux-shell > .ux-footer, .hl-case) .ux-badge:is(.is-ok, .is-warn, .is-bad, .is-info) { background: var(--hl-tone-fill); color: var(--hl-tone-ink); border-color: var(--hl-case-deep); }

/* glass set into the case (.hl-screen inside the footer or .hl-case) goes back to screen colors */
.ux-pack-hauler.ux-on :is(.ux-shell > .ux-footer, .hl-case) .hl-screen :is(.ux-text, .ux-h1, .ux-h2, .ux-h3) { color: var(--ux-text); text-shadow: var(--ux-text-glow); font-family: var(--ux-font-body); }
.ux-pack-hauler.ux-on :is(.ux-shell > .ux-footer, .hl-case) .hl-screen :is(.ux-muted, .ux-label, .ux-hint) { color: var(--ux-muted); text-shadow: none; font-family: var(--ux-font-body); font-size: var(--hl-fs-sm); font-weight: var(--hl-label-w); letter-spacing: var(--hl-label-track); }
.ux-pack-hauler.ux-on :is(.ux-shell > .ux-footer, .hl-case) .hl-screen :is(.ux-link, a:not([class])) { color: var(--ux-accent-text); text-decoration: underline dotted 2px; }
.ux-pack-hauler.ux-on :is(.ux-shell > .ux-footer, .hl-case) .hl-screen :focus-visible { outline: 2px solid var(--ux-focus); outline-offset: 2px; }
.ux-pack-hauler.ux-on :is(.ux-shell > .ux-footer, .hl-case) .hl-screen .ux-badge { background: transparent; color: var(--ux-text-2); border-color: currentColor; font-family: var(--ux-font-body); font-size: var(--hl-fs-xs); font-weight: 400; }
.ux-pack-hauler.ux-on :is(.ux-shell > .ux-footer, .hl-case) .hl-screen .ux-badge:is(.is-ok, .is-warn, .is-bad) { background: var(--hl-tone-fill); color: var(--hl-tone-ink); border-color: var(--hl-tone-fill); }
.ux-pack-hauler.ux-on :is(.ux-shell > .ux-footer, .hl-case) .hl-screen .ux-badge.is-info { background: transparent; color: var(--ux-info-text); }

/* physical keys: any .ux-btn on the case */
.ux-pack-hauler.ux-on .hl-keys { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(96px, 100%), 1fr)); gap: 12px 10px; align-items: center; width: 100%; }
.ux-pack-hauler.ux-on .hl-keys > .hl-led { justify-self: center; }
.ux-pack-hauler.ux-on :is(.ux-shell > .ux-footer, .hl-case, .hl-keys) .ux-btn {
  min-height: var(--hl-key-h); padding: 6px 12px; margin-bottom: 5px;
  font: 600 12px/1.15 var(--hl-case-font); letter-spacing: .14em; text-transform: uppercase; white-space: normal; text-shadow: none;
  color: var(--hl-key-ink); border: 0; border-radius: 6px;
  background: linear-gradient(180deg, var(--hl-key-top), var(--hl-key-bot));
  box-shadow: 0 5px 0 var(--hl-key-edge), 0 7px 10px rgba(0, 0, 0, .35), inset 0 1px 0 var(--hl-key-hl);
}
.ux-pack-hauler.ux-on :is(.ux-shell > .ux-footer, .hl-case, .hl-keys) .ux-btn:hover { background: linear-gradient(180deg, var(--hl-key-top), var(--hl-key-top)); color: var(--hl-key-ink); }
.ux-pack-hauler.ux-on :is(.ux-shell > .ux-footer, .hl-case, .hl-keys) .ux-btn.is-primary { color: var(--hl-key-o-ink); background: linear-gradient(180deg, var(--hl-key-o-top), var(--hl-key-o-bot)); box-shadow: 0 5px 0 var(--hl-key-o-edge), 0 7px 10px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .35); }
.ux-pack-hauler.ux-on :is(.ux-shell > .ux-footer, .hl-case, .hl-keys) .ux-btn.is-primary:hover { background: linear-gradient(180deg, var(--hl-key-o-top), var(--hl-key-o-top)); }
.ux-pack-hauler.ux-on :is(.ux-shell > .ux-footer, .hl-case, .hl-keys) .ux-btn.is-quiet { color: var(--hl-key-g-ink); background: linear-gradient(180deg, var(--hl-key-g-top), var(--hl-key-g-bot)); box-shadow: 0 5px 0 var(--hl-key-g-edge), 0 7px 10px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .18); }
.ux-pack-hauler.ux-on :is(.ux-shell > .ux-footer, .hl-case, .hl-keys) .ux-btn.is-quiet:hover { background: linear-gradient(180deg, var(--hl-key-g-top), var(--hl-key-g-top)); }
.ux-pack-hauler.ux-on :is(.ux-shell > .ux-footer, .hl-case, .hl-keys) .ux-btn.is-danger {
  color: var(--hl-key-o-ink); background: repeating-linear-gradient(-45deg, var(--hl-key-o-top) 0 7px, var(--hl-key-o-bot) 7px 14px);
  box-shadow: 0 5px 0 var(--hl-key-o-edge), 0 7px 10px rgba(0, 0, 0, .35), inset 0 0 0 2px var(--hl-key-o-edge);
}
.ux-pack-hauler.ux-on :is(.ux-shell > .ux-footer, .hl-case, .hl-keys) .ux-btn.is-danger::before { content: none; }
.ux-pack-hauler.ux-on :is(.ux-shell > .ux-footer, .hl-case, .hl-keys) .ux-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--hl-key-edge), 0 2px 4px rgba(0, 0, 0, .35), inset 0 1px 0 var(--hl-key-hl); }
.ux-pack-hauler.ux-on :is(.ux-shell > .ux-footer, .hl-case, .hl-keys) .ux-btn:is(:disabled, [aria-disabled="true"]) {
  transform: none; cursor: not-allowed; color: var(--hl-case-ink-2); background: var(--hl-case-lo); border: 0;
  box-shadow: inset 0 0 0 1px var(--hl-case-deep), inset 0 2px 4px rgba(0, 0, 0, .3);
}
.ux-pack-hauler.ux-on :is(.ux-shell > .ux-footer, .hl-case, .hl-keys) .ux-btn:is(:focus-visible, .is-focus) { outline: 3px solid var(--hl-case-focus); outline-offset: 5px; }

/* .hl-led: an indicator lamp (physical colors, not the phosphor) */
.ux-pack-hauler.ux-on .hl-led {
  --hl-led-c: #ffb01a; display: inline-block; flex: none; width: 14px; height: 14px; border-radius: 50%; vertical-align: middle;
  background: radial-gradient(circle at 38% 32%, rgba(255, 255, 255, .75) 0 2px, transparent 3px), var(--hl-led-c);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .35), 0 0 var(--hl-led-blur) var(--hl-led-c), inset 0 -2px 3px rgba(0, 0, 0, .4);
}
.ux-pack-hauler.ux-on .hl-led.is-ok { --hl-led-c: #3fdc6c; }
.ux-pack-hauler.ux-on .hl-led.is-warn { --hl-led-c: #ffb01a; }
.ux-pack-hauler.ux-on .hl-led.is-bad { --hl-led-c: #ff4a26; }
.ux-pack-hauler.ux-on .hl-led.is-info { --hl-led-c: #4aa8ff; }
.ux-pack-hauler.ux-on .hl-led.is-off { --hl-led-c: #4d4540; background: radial-gradient(circle at 38% 32%, rgba(255, 255, 255, .25) 0 2px, transparent 3px), var(--hl-led-c); box-shadow: 0 0 0 2px rgba(0, 0, 0, .35), inset 0 -2px 3px rgba(0, 0, 0, .5); }

/* .hl-plate: a stencilled case label; .hl-vents: molded vent slots */
.ux-pack-hauler.ux-on .ux-shell > .hl-plate { flex-wrap: nowrap; }
.ux-pack-hauler.ux-on .ux-shell > .hl-plate > :not(.hl-vents) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ux-pack-hauler.ux-on .hl-plate > .hl-vents { flex: none; }
@media (max-width: 480px) { .ux-pack-hauler.ux-on .ux-shell > .hl-plate > .hl-vents { display: none; } }
.ux-pack-hauler.ux-on .hl-plate { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 14px;
  font: 600 11px/1.2 var(--hl-case-font); letter-spacing: .22em; text-transform: uppercase; color: var(--hl-case-ink); text-shadow: none; }
.ux-pack-hauler.ux-on .hl-vents { display: inline-flex; gap: 4px; }
.ux-pack-hauler.ux-on .hl-vents > i { display: block; width: 26px; height: 6px; border-radius: 3px; background: var(--hl-vent); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .45), 0 1px 0 var(--hl-key-hl); }

/* .hl-screen: a standalone piece of glass (a readout set into the case, a widget outside the shell) */
.ux-pack-hauler.ux-on .hl-screen {
  box-sizing: border-box; position: relative; margin: 8px; padding: 12px 16px; border-radius: 14px / 10px;
  color: var(--ux-text); text-shadow: var(--ux-text-glow); font-family: var(--ux-font-body); font-size: var(--hl-fs); line-height: var(--hl-lh); letter-spacing: var(--hl-track);
  background: repeating-linear-gradient(180deg, var(--hl-raster) 0 1px, var(--hl-raster-gap) 1px 2px, transparent 2px 3px),
    radial-gradient(ellipse 70% 60% at 50% 42%, var(--hl-glass-hi), transparent 72%), var(--hl-glass);
  box-shadow: inset 0 0 30px rgba(0, 0, 0, .8), 0 0 0 6px var(--hl-bezel), 0 0 0 8px var(--hl-rim);
}
.ux-pack-hauler.ux-on .hl-screen :focus-visible { outline: 2px solid var(--ux-focus); outline-offset: 2px; }

/* .hl-cursor: a blinking block cursor */
.ux-pack-hauler.ux-on .hl-cursor { display: inline-block; width: .55em; height: .95em; margin-left: .1em; vertical-align: -.12em; background: currentColor; box-shadow: var(--ux-glow); }

/* ============================================================================================ Look drawer + pull tab: a service panel in the case */
.ux-pack-hauler.ux-on .ux-look-tab {
  flex-direction: column; gap: 9px; width: 34px; min-height: 104px; border-radius: 9px 0 0 9px;
  font: 600 11px/1 var(--hl-case-font); letter-spacing: .24em; text-transform: uppercase; color: var(--hl-case-ink); text-shadow: none;
  background: linear-gradient(90deg, var(--hl-case-hi), var(--hl-case) 45%, var(--hl-case-lo));
  box-shadow: -5px 5px 16px rgba(0, 0, 0, .5), inset 0 1px 0 var(--hl-key-hl), inset 2px 0 0 var(--hl-key-hl);
}
.ux-pack-hauler.ux-on .ux-look-tab::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--hl-key-o-top); box-shadow: 0 0 6px var(--hl-key-o-top), 0 0 0 2px rgba(0, 0, 0, .3); }
.ux-pack-hauler.ux-on .ux-look-tab[aria-expanded="true"]::before { background: #3fdc6c; box-shadow: 0 0 8px #3fdc6c, 0 0 0 2px rgba(0, 0, 0, .3); }
.ux-pack-hauler.ux-on .ux-look-tab:focus-visible { outline: 3px solid var(--ux-focus); outline-offset: 3px; }

.ux-pack-hauler.ux-on .ux-look-drawer {
  color: var(--hl-case-ink); font: 500 13px/1.45 var(--hl-case-font); letter-spacing: .02em; text-shadow: none;
  background: linear-gradient(180deg, var(--hl-case-hi) 0, var(--hl-case) 90px, var(--hl-case-lo) 100%);
  box-shadow: -18px 0 44px rgba(0, 0, 0, .55), inset 3px 0 0 var(--hl-case-deep), inset 5px 0 0 var(--hl-key-hl);
}
.ux-pack-hauler.ux-on .ux-look-head { border-bottom: 1px solid var(--hl-case-deep); box-shadow: 0 1px 0 var(--hl-key-hl); }
.ux-pack-hauler.ux-on .ux-look-title { font: 600 13px/1.2 var(--hl-case-font); letter-spacing: .24em; text-transform: uppercase; color: var(--hl-case-ink); }
.ux-pack-hauler.ux-on .ux-look-section-title { display: flex; align-items: center; gap: 10px; font: 600 11px/1 var(--hl-case-font); letter-spacing: .24em; text-transform: uppercase; color: var(--hl-case-ink-2); }
.ux-pack-hauler.ux-on .ux-look-section-title::after { content: ''; flex: 1; height: 0; border-top: 1px solid var(--hl-case-deep); box-shadow: 0 1px 0 var(--hl-key-hl); }
.ux-pack-hauler.ux-on .ux-look-label { font: 600 11.5px/1.2 var(--hl-case-font); letter-spacing: .14em; text-transform: uppercase; color: var(--hl-case-ink); }
.ux-pack-hauler.ux-on .ux-look-value { font: 600 13px/1 var(--hl-case-font); color: var(--hl-case-ink); font-variant-numeric: tabular-nums; }
.ux-pack-hauler.ux-on .ux-look-hint { font-size: 12px; line-height: 1.4; color: var(--hl-case-ink-2); }
.ux-pack-hauler.ux-on .ux-look-report { font-size: 12px; color: var(--hl-case-ink-2); }

/* keys in the drawer */
.ux-pack-hauler.ux-on :is(.ux-look-close, .ux-look-seg-b, button.ux-look-toggle, .ux-look-reset) {
  min-height: 36px; padding: 6px 12px; margin-bottom: 4px; border: 0; border-radius: 6px;
  font: 600 11.5px/1.1 var(--hl-case-font); letter-spacing: .12em; text-transform: uppercase; color: var(--hl-key-ink);
  background: linear-gradient(180deg, var(--hl-key-top), var(--hl-key-bot));
  box-shadow: 0 4px 0 var(--hl-key-edge), 0 6px 9px rgba(0, 0, 0, .3), inset 0 1px 0 var(--hl-key-hl);
}
.ux-pack-hauler.ux-on :is(.ux-look-close, .ux-look-seg-b, button.ux-look-toggle, .ux-look-reset):hover { background: linear-gradient(180deg, var(--hl-key-top), var(--hl-key-top)); }
.ux-pack-hauler.ux-on button.ux-look-reset { color: var(--hl-key-g-ink); background: linear-gradient(180deg, var(--hl-key-g-top), var(--hl-key-g-bot)); box-shadow: 0 4px 0 var(--hl-key-g-edge), 0 6px 9px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .18); }
.ux-pack-hauler.ux-on button.ux-look-reset:hover { background: linear-gradient(180deg, var(--hl-key-g-top), var(--hl-key-g-top)); }
.ux-pack-hauler.ux-on .ux-look-seg-b[aria-pressed="true"] {
  color: var(--hl-key-o-ink); background: linear-gradient(180deg, var(--hl-key-o-top), var(--hl-key-o-bot));
  box-shadow: 0 1px 0 var(--hl-key-o-edge), 0 2px 4px rgba(0, 0, 0, .3), inset 0 2px 3px rgba(0, 0, 0, .25); transform: translateY(3px);
}
.ux-pack-hauler.ux-on .ux-look-toggle-state { display: inline-flex; align-items: center; gap: 8px; min-width: 4.2em; justify-content: flex-end; }
.ux-pack-hauler.ux-on .ux-look-toggle-state::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: #4d4540; box-shadow: 0 0 0 2px rgba(0, 0, 0, .3), inset 0 -1px 2px rgba(0, 0, 0, .5); }
.ux-pack-hauler.ux-on button.ux-look-toggle[aria-pressed="true"] .ux-look-toggle-state::before { background: #3fdc6c; box-shadow: 0 0 0 2px rgba(0, 0, 0, .3), 0 0 8px #3fdc6c; }

/* palette cards: little screens set into the panel */
.ux-pack-hauler.ux-on .ux-look-cards { gap: 12px; padding: 6px; }
.ux-pack-hauler.ux-on .ux-look-body { overflow-x: hidden; scrollbar-color: var(--hl-case-deep) transparent; }
.ux-pack-hauler.ux-on .ux-look-card {
  border: 0; border-radius: 9px / 7px; padding: 10px 10px 9px; margin: 0;
  color: var(--ux-text); background: var(--hl-glass); text-shadow: none;
  box-shadow: inset 0 0 14px rgba(0, 0, 0, .85), 0 0 0 3px var(--hl-bezel), 0 0 0 4px var(--hl-rim);
}
.ux-pack-hauler.ux-on .ux-look-card:hover { box-shadow: inset 0 0 14px rgba(0, 0, 0, .85), 0 0 0 3px var(--hl-bezel), 0 0 0 4px var(--hl-case-ink-2); }
.ux-pack-hauler.ux-on .ux-look-card[aria-pressed="true"] { box-shadow: inset 0 0 14px rgba(0, 0, 0, .85), 0 0 0 3px var(--hl-key-o-bot), 0 0 0 5px var(--hl-key-o-top), 0 0 12px var(--hl-key-o-top); }
.ux-pack-hauler.ux-on .ux-look-swatches { height: 12px; gap: 2px; }
.ux-pack-hauler.ux-on .ux-look-swatches i { border-radius: 1px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.ux-pack-hauler.ux-on .ux-look-card-name { font: 400 21px/1 'VT323', 'Courier New', monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--ux-text); }
.ux-pack-hauler.ux-on .ux-look-card[aria-pressed="true"] .ux-look-card-name::before { content: '>\00a0'; }
.ux-pack-hauler.ux-on .ux-look-card-desc { font: 500 11.5px/1.35 var(--hl-case-font); letter-spacing: 0; color: var(--ux-text-2); }

/* the range is a fader: a slot in the case and a key-cap thumb */
.ux-pack-hauler.ux-on input.ux-look-range { -webkit-appearance: none; appearance: none; height: 32px; margin: 0; background: transparent; cursor: pointer; }
.ux-pack-hauler.ux-on input.ux-look-range::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; background: var(--hl-case-deep); box-shadow: inset 0 2px 3px rgba(0, 0, 0, .55), 0 1px 0 var(--hl-key-hl); }
.ux-pack-hauler.ux-on input.ux-look-range::-moz-range-track { height: 8px; border-radius: 4px; background: var(--hl-case-deep); box-shadow: inset 0 2px 3px rgba(0, 0, 0, .55), 0 1px 0 var(--hl-key-hl); }
.ux-pack-hauler.ux-on input.ux-look-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 20px; height: 30px; margin-top: -11px; border: 0; border-radius: 4px;
  background: linear-gradient(90deg, transparent 9px, var(--hl-key-edge) 9px 11px, transparent 11px), linear-gradient(180deg, var(--hl-key-top), var(--hl-key-bot));
  box-shadow: 0 3px 0 var(--hl-key-edge), 0 4px 8px rgba(0, 0, 0, .4), inset 0 1px 0 var(--hl-key-hl);
}
.ux-pack-hauler.ux-on input.ux-look-range::-moz-range-thumb {
  width: 20px; height: 30px; border: 0; border-radius: 4px;
  background: linear-gradient(90deg, transparent 9px, var(--hl-key-edge) 9px 11px, transparent 11px), linear-gradient(180deg, var(--hl-key-top), var(--hl-key-bot));
  box-shadow: 0 3px 0 var(--hl-key-edge), 0 4px 8px rgba(0, 0, 0, .4), inset 0 1px 0 var(--hl-key-hl);
}
.ux-pack-hauler.ux-on .ux-look-foot { border-top: 1px solid var(--hl-case-deep); box-shadow: inset 0 1px 0 var(--hl-key-hl); }
.ux-pack-hauler.ux-on .ux-look-drawer :focus-visible { outline: 3px solid var(--hl-case-focus); outline-offset: 3px; }
.ux-pack-hauler.ux-on .ux-look-drawer .ux-look-card:focus-visible { outline-offset: 6px; }

/* ============================================================================================ motion (only when allowed) */
@media (prefers-reduced-motion: no-preference) {
  .ux-pack-hauler.ux-on.ux-flicker .ux-shell::after { animation: hl-flicker 6.5s infinite; }
  .ux-pack-hauler.ux-on .hl-cursor, .ux-pack-hauler.ux-on .ux-empty::after { animation: hl-blink 1.06s steps(1, end) infinite; }
  .ux-pack-hauler.ux-on .ux-stat.is-bad .ux-stat-label::before, .ux-pack-hauler.ux-on .ux-alert.is-bad .ux-alert-title::before, .ux-pack-hauler.ux-on .hl-led.is-blink { animation: hl-blink 1.2s steps(1, end) infinite; }
  .ux-pack-hauler.ux-on .ux-switch { transition: background-position .12s steps(3, end), background-color .12s; }
  .ux-pack-hauler.ux-on :is(.ux-shell > .ux-footer, .hl-case, .hl-keys) .ux-btn, .ux-pack-hauler.ux-on :is(.ux-look-seg-b, button.ux-look-toggle, .ux-look-close, .ux-look-reset) { transition: transform .06s, box-shadow .06s; }
  .ux-pack-hauler.ux-on .ux-progress:indeterminate { animation: hl-sweep 1.6s steps(12, end) infinite; }
  .ux-pack-hauler.ux-on .ux-toast { animation: hl-type .45s steps(10, end) both; }
  .ux-pack-hauler.ux-on .ux-dialog[open] { animation: hl-tube .32s cubic-bezier(.2, .7, .2, 1) both; }

  /* power-on: a bright line across the tube, the glass warms, the text types in */
  .ux-pack-hauler.ux-on.ux-boot .ux-shell::before { animation: hl-warm 1.2s ease-out both; }
  .ux-pack-hauler.ux-on.ux-boot .ux-shell::after {
    background: radial-gradient(ellipse 60% 50% at 50% 50%, #ffffff 0, var(--hl-phosphor) 34%, transparent 78%);
    animation: hl-line 1.25s ease-out both;
  }
  .ux-pack-hauler.ux-on.ux-boot .ux-shell > .ux-header { animation: hl-type .6s steps(12, end) .5s both; }
  .ux-pack-hauler.ux-on.ux-boot .ux-shell > .ux-nav { animation: hl-type .6s steps(8, end) .7s both; }
  .ux-pack-hauler.ux-on.ux-boot .ux-shell > .ux-main { animation: hl-type .85s steps(18, end) .85s both; }
  .ux-pack-hauler.ux-on.ux-boot .ux-shell > .ux-footer .hl-led, .ux-pack-hauler.ux-on.ux-boot .ux-header .hl-led { animation: hl-blink .25s steps(1, end) 3; }
}
@media (prefers-reduced-motion: reduce) {
  .ux-pack-hauler.ux-on :is(.ux-shell > .ux-footer, .hl-case, .hl-keys) .ux-btn:active, .ux-pack-hauler.ux-on .ux-look-seg-b[aria-pressed="true"] { transform: none; }
}
@keyframes hl-blink { 50% { opacity: 0; } }
@keyframes hl-flicker { 0%, 100% { background-color: transparent; } 47% { background-color: transparent; } 48% { background-color: rgba(0, 0, 0, .07); } 50% { background-color: rgba(0, 0, 0, .03); } 52% { background-color: rgba(0, 0, 0, .09); } 54% { background-color: transparent; } 80% { background-color: rgba(0, 0, 0, .04); } 81% { background-color: transparent; } }
@keyframes hl-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes hl-warm { 0% { filter: brightness(.15); } 40% { filter: brightness(.15); } 100% { filter: none; } }
@keyframes hl-line { 0% { clip-path: inset(49.6% 47% 49.6% 47%); opacity: 1; } 22% { clip-path: inset(49.6% 0 49.6% 0); opacity: 1; } 48% { clip-path: inset(0 0 0 0); opacity: .5; } 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
@keyframes hl-sweep { from { background-position: -40% 0; } to { background-position: 140% 0; } }
@keyframes hl-tube { from { clip-path: inset(48% 0 48% 0); } to { clip-path: inset(0 0 0 0); } }

/* ============================================================================================ print */
@media print {
  .ux-pack-hauler.ux-on, .ux-pack-hauler.ux-on body { background: #fff; color: #000; text-shadow: none; }
  .ux-pack-hauler.ux-on .ux-shell { box-shadow: none; background: none; padding: 0; }
  .ux-pack-hauler.ux-on .ux-shell::before, .ux-pack-hauler.ux-on .ux-shell::after { display: none; }
  .ux-pack-hauler.ux-on .ux-shell > :is(.ux-header, .ux-nav, .ux-main) { color: #000; text-shadow: none; }
}