/* KRYONOM Decision Time Machine — Quantum-Era shell.
   Tokens follow docs/design/concepts/instrument.md §3.1 (palette), §3.3 (typography roles) and §3.4 (motion);
   they are exported as --qe-* custom properties for every stylesheet of the experience (qe-panels.css uses them).
   The composition (src/shell/layout.ts): the world has a region of its own, which nothing of the interface lies
   over; what is read lives in the rail beside it (wide) or below it in a page that scrolls (stacked). */

@font-face {
  font-family: 'Archivo';
  src: url('/fonts/Archivo-Variable.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/fonts/JetBrainsMono-Variable.ttf') format('truetype-variations');
  font-weight: 100 800;
  font-display: swap;
}

:root {
  /* palette (instrument §3.1) */
  --qe-void: #0e040c;
  --qe-bench: #1b0718;
  --qe-bench-raised: #21091e;
  --qe-chamber: #2a0e26;
  --qe-plum-mid: #4a2143;
  --qe-structure: #35132f;
  --qe-line: #5b2b53;
  --qe-haze: #6c3a8a;
  --qe-ivory: #f4f0e4;
  --qe-ivory-dim: rgba(244, 240, 228, 0.62);
  --qe-ivory-latent: rgba(244, 240, 228, 0.3);
  --qe-ivory-hair: rgba(244, 240, 228, 0.1);
  --qe-ivory-faint: rgba(244, 240, 228, 0.05);
  --qe-lime: #c8f542;
  --qe-gold: #e2b45e;
  --qe-gold-deep: #b38b45;
  --qe-cyan: #39d3f2;
  --qe-rose: #c9727e;
  --qe-beam: #fff6d8;
  --qe-glass-rim: #dce9f2;
  --qe-lime-wash: rgba(200, 245, 66, 0.08);
  --qe-lime-edge: rgba(200, 245, 66, 0.42);

  /* glass (plates: bench at high alpha, a hairline rim, a faint top light) */
  --qe-glass-bg: linear-gradient(180deg, rgba(42, 14, 38, 0.74) 0%, rgba(27, 7, 24, 0.84) 100%);
  --qe-glass-solid: rgba(27, 7, 24, 0.94);
  --qe-glass-border: rgba(220, 233, 242, 0.11);
  --qe-glass-shadow: inset 0 1px 0 rgba(220, 233, 242, 0.07), 0 24px 60px -12px rgba(0, 0, 0, 0.6);
  --qe-glass-blur: 20px;

  /* typography (instrument §3.3) */
  --qe-font-sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --qe-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --qe-size-micro: 12px;
  --qe-size-label: 12px;
  --qe-size-readout: 13px;
  --qe-size-body: 16px;
  --qe-size-vernier: 20px;
  --qe-size-title: 20px;
  --qe-track-label: 0.14em;
  --qe-track-title: 0.12em;
  --qe-track-wordmark: 0.3em;

  /* motion (instrument §3.4) */
  --qe-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --qe-ease-dock: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* geometry */
  --qe-target: 44px;
  --qe-radius-card: 18px;
  --qe-radius-control: 12px;
  --qe-gutter: 24px;
  --qe-safe-top: env(safe-area-inset-top, 0px);
  --qe-safe-right: env(safe-area-inset-right, 0px);
  --qe-safe-bottom: env(safe-area-inset-bottom, 0px);
  --qe-safe-left: env(safe-area-inset-left, 0px);
  --qe-top: calc(var(--qe-safe-top) + 22px);
  --qe-right: calc(var(--qe-safe-right) + var(--qe-gutter));
  --qe-bottom: calc(var(--qe-safe-bottom) + 20px);
  --qe-left: calc(var(--qe-safe-left) + var(--qe-gutter));
  --qe-chrono-h: 72px;
  --qe-chrono-min: 72px;
  --qe-head-h: 64px;
  --qe-panels-top: calc(var(--qe-top) + var(--qe-head-h));
  --qe-panels-bottom: calc(var(--qe-bottom) + var(--qe-chrono-h) + 18px);
  --qe-side: calc(12px + max(var(--qe-safe-left), var(--qe-safe-right)));
  --qe-focus: 2px solid var(--qe-lime);

  color-scheme: dark;
}

/* ------------------------------------------------------------------ base */
*,
*::before,
*::after {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
html,
body {
  margin: 0;
  padding: 0;
  background: var(--qe-void);
  color: var(--qe-ivory);
  /* the document grows with its content and scrolls; the world never rubber-bands or pulls the page to refresh */
  overscroll-behavior-y: none;
}
body {
  font-family: var(--qe-font-sans);
  font-size: var(--qe-size-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
button {
  -webkit-user-select: none;
  user-select: none;
}
:focus {
  outline: none;
}
:focus-visible {
  outline: var(--qe-focus);
  outline-offset: 2px;
}
.qe-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------------ the composition (layout.ts) */
.qe-app {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  /* nothing leaves the page sideways (the wide layout's rail glides in from the right edge); clip makes no scroller */
  overflow-x: clip;
  background: var(--qe-void);
}
/* the world region: the stage fills it and nothing of the interface lies over it but the whisper's single line; its
   framing margins for the world (src/world/free-area.ts) are its own edges */
.qe-world {
  position: relative;
  overflow: hidden;
  background: var(--qe-void);
  --qe-hud-top: 12px;
  --qe-panels-bottom: 36px;
}
.qe-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  touch-action: none;
}

/* wide: the world column (pinned, one screen tall: header, world, Chronometer) beside the rail, which glides open
   from the right edge while something is shown in it; the document scrolls the rail */
.qe-app[data-layout='wide'] {
  --qe-rail-open: clamp(380px, 31vw, 500px);
  --qe-rail-w: 0px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--qe-rail-w);
  align-items: start;
  transition: grid-template-columns 460ms var(--qe-ease-out);
}
.qe-app[data-layout='wide'][data-rail='open'] {
  --qe-rail-w: var(--qe-rail-open);
}
.qe-app[data-layout='wide'] .qe-worldcol {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.qe-app[data-layout='wide'] .qe-world {
  flex: 1 1 auto;
  min-height: 0;
}
.qe-app[data-layout='wide'] .qe-chrono-dock {
  flex: none;
  padding: 12px 0 var(--qe-bottom);
}
.qe-app[data-layout='wide'] .qe-rail {
  width: var(--qe-rail-open);
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: var(--qe-top) calc(var(--qe-safe-right) + 20px) 32px 20px;
  border-left: 1px solid var(--qe-ivory-hair);
  background:
    radial-gradient(120% 60% at 0% 0%, rgba(108, 58, 138, 0.1), transparent 70%), linear-gradient(180deg, #1d0819 0%, #160614 100%);
  box-shadow: inset 1px 0 0 rgba(220, 233, 242, 0.04);
}

/* stacked: one page that grows with its content. The world viewport fills the first screen above the Chronometer
   and, while there are sections, leaves the head of the first in sight below it; the Chronometer rests at the foot
   of the screen wherever the page is scrolled */
.qe-app[data-layout='stacked'] {
  --qe-peek: 0px;
  display: flex;
  flex-direction: column;
}
.qe-app[data-layout='stacked'][data-rail='open'] {
  --qe-peek: 76px;
}
.qe-app[data-layout='stacked'] .qe-worldcol {
  display: contents;
}
.qe-app[data-layout='stacked'] .qe-top {
  order: 1;
}
.qe-app[data-layout='stacked'] .qe-world {
  order: 2;
  flex: none;
  height: calc(100vh - var(--qe-top-h, 72px) - var(--qe-chrono-h, 112px) - var(--qe-bottom) - 10px - var(--qe-peek));
  height: calc(100svh - var(--qe-top-h, 72px) - var(--qe-chrono-h, 112px) - var(--qe-bottom) - 10px - var(--qe-peek));
  min-height: 220px;
}
/* the world glides to its new height while the rail opens or closes (layout.ts marks that moment); a header or a
   Chronometer that changes its own height moves the world at once, in a single frame */
.qe-app[data-layout='stacked'][data-glide] .qe-world {
  transition: height 420ms var(--qe-ease-out);
}
/* one finger scrolls the page; the world takes sideways drags, taps and pinches (the canvas follows, layout.ts) */
.qe-app[data-layout='stacked'] .qe-stage {
  touch-action: pan-y;
}
.qe-app[data-layout='stacked'] .qe-rail {
  order: 3;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 10px var(--qe-side) 16px;
}
.qe-app[data-layout='stacked'][data-rail='closed'] .qe-rail {
  display: none;
}
.qe-app[data-layout='stacked'] .qe-chrono-dock {
  order: 4;
  position: sticky;
  bottom: var(--qe-bottom);
  z-index: 20;
  margin: auto 0 var(--qe-bottom);
}
.qe-app[data-layout='stacked'] .qe-chrono {
  margin: 0 var(--qe-side);
  width: auto;
}

/* the sections of the rail: the height of their content (the page or the wide rail scrolls, never a section); even
   plates on the rail, the composer's actions within reach at the foot of the screen */
.qe-rail .qe-glass {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.qe-rail .qe-card.qe-composer {
  overflow: clip;
}
.qe-rail .qe-composer-body {
  flex: none;
  overflow: visible;
}
.qe-rail .qe-composer-body.is-clipped {
  -webkit-mask-image: none;
  mask-image: none;
}
.qe-rail .qe-composer-foot {
  position: sticky;
  bottom: 0;
  z-index: 2;
  background: rgb(27, 7, 24);
}
.qe-app[data-layout='stacked'] .qe-rail .qe-composer-foot {
  position: static;
}

/* the Chronometer arranges itself by the width of its dock (the queries under "medium widths" and "phone"): a
   phone's, or the world column's beside the rail; in the wide layout the header follows its own width as well */
.qe-chrono-dock {
  container: qe-dock / inline-size;
}
.qe-app[data-layout='wide'] .qe-top {
  container: qe-top / inline-size;
}
.qe-stage .world-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.qe-stage .world-labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.qe-stage .world-labels > * {
  position: absolute;
  left: 0;
  top: 0;
  will-change: transform;
}
/* a quiet sky above and a floor below, so text on the HUD never sits on the brightest part of the world */
.qe-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(14, 4, 12, 0.62) 0%, rgba(14, 4, 12, 0) 16%),
    linear-gradient(0deg, rgba(14, 4, 12, 0.7) 0%, rgba(14, 4, 12, 0) 24%),
    radial-gradient(120% 90% at 50% 46%, rgba(14, 4, 12, 0) 58%, rgba(14, 4, 12, 0.5) 100%);
}
.qe-stage.is-unavailable {
  background: radial-gradient(80% 60% at 50% 45%, var(--qe-chamber), var(--qe-void));
}

/* ------------------------------------------------------------------ glass */
.qe-glass {
  background: var(--qe-glass-bg);
  border: 1px solid var(--qe-glass-border);
  box-shadow: var(--qe-glass-shadow);
  -webkit-backdrop-filter: blur(var(--qe-glass-blur)) saturate(135%);
  backdrop-filter: blur(var(--qe-glass-blur)) saturate(135%);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .qe-glass {
    background: var(--qe-glass-solid);
  }
}

/* ------------------------------------------------------------------ typographic roles */
.qe-label {
  font: 500 var(--qe-size-label) / 1.2 var(--qe-font-sans);
  letter-spacing: var(--qe-track-label);
  text-transform: uppercase;
  color: var(--qe-ivory-dim);
}
.qe-title {
  margin: 0;
  font: 600 var(--qe-size-title) / 1.2 var(--qe-font-sans);
  letter-spacing: var(--qe-track-title);
  text-transform: uppercase;
  color: var(--qe-ivory);
}
.qe-dim {
  color: var(--qe-ivory-dim);
}

/* ------------------------------------------------------------------ controls */
.qe-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--qe-target);
  padding: 0 16px;
  border-radius: var(--qe-radius-control);
  border: 1px solid rgba(244, 240, 228, 0.16);
  background: var(--qe-ivory-faint);
  color: var(--qe-ivory);
  font: 500 14px / 1 var(--qe-font-sans);
  letter-spacing: 0.01em;
  cursor: pointer;
  transition:
    background 160ms ease,
    border-color 160ms ease,
    color 160ms ease;
}
.qe-btn:hover:not(:disabled) {
  background: rgba(244, 240, 228, 0.09);
  border-color: rgba(244, 240, 228, 0.28);
}
.qe-btn:disabled {
  cursor: default;
  color: var(--qe-ivory-latent);
  border-color: var(--qe-ivory-hair);
  background: transparent;
}
.qe-btn-primary {
  background: var(--qe-lime);
  border-color: var(--qe-lime);
  color: var(--qe-bench);
  font-weight: 600;
}
.qe-btn-primary:hover:not(:disabled) {
  background: #d6ff5c;
  border-color: #d6ff5c;
  box-shadow: 0 0 24px -4px rgba(200, 245, 66, 0.55);
}
.qe-btn-quiet {
  background: transparent;
  border-color: var(--qe-ivory-hair);
  color: var(--qe-ivory-dim);
}
.qe-btn-quiet:hover:not(:disabled) {
  color: var(--qe-ivory);
}
.qe-btn-small {
  padding: 0 12px;
  font-size: 13px;
}
.qe-btn-danger {
  color: var(--qe-rose);
  border-color: rgba(201, 114, 126, 0.36);
}
.qe-btn-danger:hover:not(:disabled) {
  background: rgba(201, 114, 126, 0.1);
  border-color: rgba(201, 114, 126, 0.6);
}
.qe-iconbtn {
  display: inline-grid;
  place-items: center;
  width: var(--qe-target);
  height: var(--qe-target);
  padding: 0;
  border: 0;
  border-radius: var(--qe-radius-control);
  background: transparent;
  color: var(--qe-ivory-dim);
  cursor: pointer;
  transition:
    color 160ms ease,
    background 160ms ease;
}
.qe-iconbtn:hover {
  color: var(--qe-ivory);
  background: rgba(244, 240, 228, 0.07);
}
.qe-icon {
  display: block;
  flex: none;
}
.qe-pill {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 12px;
  border: 1px solid var(--qe-ivory-hair);
  font: 600 var(--qe-size-micro) / 1 var(--qe-font-sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.qe-chip {
  display: inline-flex;
  align-items: center;
  min-height: var(--qe-target);
  padding: 0 14px;
  border-radius: 22px;
  border: 1px solid rgba(244, 240, 228, 0.16);
  background: var(--qe-ivory-faint);
  color: var(--qe-ivory);
  font: 500 13px / 1 var(--qe-font-mono);
  letter-spacing: 0.04em;
  cursor: pointer;
  transition:
    border-color 160ms ease,
    background 160ms ease;
}
.qe-chip:hover {
  border-color: rgba(244, 240, 228, 0.36);
  background: rgba(244, 240, 228, 0.08);
}
.qe-chip {
  gap: 8px;
}
.qe-chip-delta {
  color: var(--qe-ivory-dim);
  font-size: 12px;
  letter-spacing: 0;
}
.qe-chip-delta.is-up {
  color: var(--qe-lime);
}
.qe-chip-delta.is-down {
  color: var(--qe-rose);
}
.qe-label-tick {
  text-transform: none;
  font-family: var(--qe-font-mono);
  letter-spacing: 0.02em;
}

/* sliders: a hairline track and an ivory bead */
.qe-range,
.qe-volume-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: var(--qe-target);
  margin: 0;
  background: transparent;
  cursor: pointer;
}
.qe-range::-webkit-slider-runnable-track,
.qe-volume-slider::-webkit-slider-runnable-track {
  height: 2px;
  border-radius: 1px;
  background: rgba(244, 240, 228, 0.18);
}
.qe-range::-webkit-slider-runnable-track {
  background: linear-gradient(
    90deg,
    rgba(244, 240, 228, 0.16) calc(var(--qe-lo, 0) * 100%),
    rgba(244, 240, 228, 0.78) calc(var(--qe-lo, 0) * 100%) calc(var(--qe-hi, 0) * 100%),
    rgba(244, 240, 228, 0.16) calc(var(--qe-hi, 0) * 100%)
  );
}
.qe-range::-webkit-slider-thumb,
.qe-volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -8px;
  border-radius: 50%;
  background: var(--qe-ivory);
  border: 0;
  box-shadow:
    0 0 0 5px rgba(200, 245, 66, 0.14),
    0 2px 10px rgba(0, 0, 0, 0.5);
}
.qe-range::-moz-range-track,
.qe-volume-slider::-moz-range-track {
  height: 2px;
  border-radius: 1px;
  background: rgba(244, 240, 228, 0.18);
}
.qe-range::-moz-range-thumb,
.qe-volume-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--qe-ivory);
  border: 0;
  box-shadow: 0 0 0 5px rgba(200, 245, 66, 0.14);
}
.qe-range:focus-visible,
.qe-volume-slider:focus-visible {
  outline-offset: 0;
}
.qe-num,
.qe-select {
  height: var(--qe-target);
  border-radius: 10px;
  border: 1px solid rgba(244, 240, 228, 0.14);
  background: rgba(14, 4, 12, 0.55);
  color: var(--qe-ivory);
  font: 400 14px / 1 var(--qe-font-mono);
  padding: 0 12px;
}
.qe-num {
  width: 104px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.qe-select {
  width: 100%;
  font-family: var(--qe-font-sans);
  font-size: 14px;
}
.qe-num:focus-visible,
.qe-select:focus-visible {
  outline-offset: 1px;
}

/* ------------------------------------------------------------------ top: wordmark, breadcrumb, sound */
/* the header has its own band above the world (it never lies over it) */
.qe-top {
  position: relative;
  flex: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: var(--qe-top) var(--qe-right) 14px var(--qe-left);
  z-index: 20;
}
.qe-top > .qe-top-left {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}
.qe-wordmark {
  padding-top: 4px;
  text-shadow: 0 1px 14px rgba(14, 4, 12, 0.9);
}
/* inside an organism the breadcrumb leads back to the farm: the farm in miniature (where this organism stands, what
   the others are doing), "Farm › BTC/EUR"; always in the same place */
.qe-crumb {
  display: none;
  align-items: center;
  gap: 8px;
  min-width: 0;
  height: var(--qe-target);
  padding: 0 18px 0 10px;
  border-radius: 22px;
  color: var(--qe-ivory);
  font: 500 var(--qe-size-label) / 1 var(--qe-font-sans);
  letter-spacing: var(--qe-track-label);
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition:
    border-color 160ms ease,
    background 160ms ease;
}
.qe-crumb:hover {
  border-color: rgba(244, 240, 228, 0.3);
}
.qe-app[data-mode='chamber'] .qe-crumb {
  display: inline-flex;
}
.qe-crumb-farm {
  color: var(--qe-ivory-dim);
}
.qe-crumb-sep {
  color: var(--qe-ivory-latent);
  letter-spacing: 0;
}
.qe-crumb-here {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
}
.qe-orbit {
  flex: none;
  width: 30px;
  height: 30px;
  overflow: visible;
}
.qe-orbit-arc {
  fill: none;
  stroke: rgba(244, 240, 228, 0.16);
  stroke-width: 0.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.qe-orbit-core {
  fill: rgba(226, 180, 94, 0.32);
  stroke: var(--qe-gold);
  stroke-width: 0.9;
}
.qe-orbit-dot {
  fill: #8a6a86;
  transition: fill 300ms ease;
}
.qe-orbit-here {
  fill: none;
  stroke: var(--qe-ivory);
  stroke-width: 1.3;
  filter: drop-shadow(0 0 2px rgba(255, 246, 216, 0.8));
}
.qe-wordmark-name {
  margin: 0;
  font: 600 13px / 1 var(--qe-font-sans);
  font-stretch: 125%;
  letter-spacing: var(--qe-track-wordmark);
  color: var(--qe-ivory);
}
.qe-wordmark-line {
  margin: 9px 0 0;
  font: 500 var(--qe-size-micro) / 1.3 var(--qe-font-sans);
  letter-spacing: 0.03em;
  color: var(--qe-ivory-dim);
}
.qe-top-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* only the pill takes touches: the corners its roundness leaves reach the world */
.qe-top > .qe-top-right {
  pointer-events: none;
}
.qe-top-right > * {
  pointer-events: auto;
}
.qe-sound {
  display: flex;
  align-items: center;
  height: var(--qe-target);
  padding: 0 0 0 14px;
}
.qe-sound-toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: var(--qe-target);
  padding: 0 12px 0 10px;
  border: 0;
  border-radius: 22px;
  background: transparent;
  color: var(--qe-ivory-dim);
  font: 500 var(--qe-size-label) / 1 var(--qe-font-sans);
  letter-spacing: var(--qe-track-label);
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: color 160ms ease;
}
.qe-sound-toggle:hover,
.qe-sound.is-on .qe-sound-toggle {
  color: var(--qe-ivory);
}
.qe-sound-glyph {
  display: inline-grid;
  place-items: center;
}
.qe-sound[data-state='suspended'] .qe-sound-toggle {
  color: var(--qe-gold);
}
.qe-sound[data-state='unavailable'] .qe-sound-toggle {
  color: var(--qe-rose);
}
.qe-meter {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 14px;
  width: 18px;
  opacity: 0.55;
  transition: opacity 240ms ease;
}
.qe-sound.is-on .qe-meter {
  opacity: 1;
}
.qe-meter-bar {
  flex: 1;
  border-radius: 1px;
  background: var(--qe-ivory-latent);
  transition: background 60ms linear;
}
.qe-meter-bar:nth-child(1) {
  height: 3px;
}
.qe-meter-bar:nth-child(2) {
  height: 5px;
}
.qe-meter-bar:nth-child(3) {
  height: 8px;
}
.qe-meter-bar:nth-child(4) {
  height: 11px;
}
.qe-meter-bar:nth-child(5) {
  height: 14px;
}
.qe-meter-bar.is-lit {
  background: var(--qe-lime);
  box-shadow: 0 0 6px rgba(200, 245, 66, 0.55);
}
.qe-volume {
  display: flex;
  align-items: center;
  width: 108px;
  padding: 0 12px 0 4px;
}
.qe-volume-slider::-webkit-slider-thumb {
  width: 14px;
  height: 14px;
  margin-top: -6px;
  box-shadow: 0 0 0 4px rgba(200, 245, 66, 0.12);
}
.qe-controls {
  display: flex;
  align-items: center;
  height: var(--qe-target);
  padding: 0 2px 0 0;
  border-radius: 22px;
}
.qe-controls-rule {
  width: 1px;
  height: 20px;
  background: var(--qe-ivory-hair);
}
.qe-library-toggle {
  border-radius: 20px;
}
.qe-app.is-library-open .qe-library-toggle {
  color: var(--qe-ivory);
  background: rgba(244, 240, 228, 0.09);
}

/* ------------------------------------------------------------------ the Chronometer */
.qe-chrono {
  position: relative;
  margin: 0 auto;
  width: min(1180px, calc(100% - var(--qe-safe-left) - var(--qe-safe-right) - 2 * var(--qe-gutter)));
  /* a floor of its own: --qe-chrono-h is its measured height, which a floor made of it could never give back */
  min-height: var(--qe-chrono-min);
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 12px 10px 10px;
  border-radius: 22px;
  z-index: 20;
}
.qe-rule {
  flex: none;
  width: 1px;
  align-self: stretch;
  margin: 8px 0;
  background: var(--qe-ivory-hair);
}
.qe-transport {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: none;
}
.qe-tbtn {
  display: inline-grid;
  place-items: center;
  width: var(--qe-target);
  height: var(--qe-target);
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--qe-ivory-dim);
  cursor: pointer;
  transition:
    color 160ms ease,
    background 160ms ease,
    box-shadow 240ms ease;
}
.qe-tbtn:hover:not(:disabled) {
  color: var(--qe-ivory);
  background: rgba(244, 240, 228, 0.07);
}
.qe-tbtn:active:not(:disabled) {
  background: rgba(244, 240, 228, 0.12);
}
.qe-tbtn:disabled {
  color: rgba(244, 240, 228, 0.22);
  cursor: default;
}
.qe-tbtn-glyph {
  display: inline-grid;
  place-items: center;
}
/* decisions are cyan everywhere in the instrument (the Rail's decision marks) */
.qe-tbtn .qe-glyph-decision {
  fill: var(--qe-cyan);
  opacity: 0.9;
}
.qe-tbtn:disabled .qe-glyph-decision {
  opacity: 0.3;
}
.qe-tbtn-play {
  width: 50px;
  height: 50px;
  margin: 0 4px;
  border-radius: 50%;
  color: var(--qe-ivory);
  box-shadow: inset 0 0 0 1px rgba(244, 240, 228, 0.22);
}
.qe-tbtn-play:hover:not(:disabled) {
  box-shadow: inset 0 0 0 1px rgba(244, 240, 228, 0.45);
}
.qe-tbtn-play.is-playing {
  color: var(--qe-lime);
  box-shadow:
    inset 0 0 0 1px rgba(200, 245, 66, 0.55),
    0 0 26px -6px rgba(200, 245, 66, 0.45);
}
.qe-tbtn-play:disabled {
  box-shadow: inset 0 0 0 1px rgba(244, 240, 228, 0.1);
}
.qe-speed {
  width: auto;
  min-width: 48px;
  padding: 0 8px;
  font: 500 13px / 1 var(--qe-font-mono);
  letter-spacing: 0.02em;
}
.qe-moment {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.qe-moment-main {
  display: flex;
  align-items: baseline;
  gap: 12px;
  white-space: nowrap;
}
.qe-moment-day {
  font: 500 var(--qe-size-label) / 1 var(--qe-font-sans);
  letter-spacing: var(--qe-track-label);
  text-transform: uppercase;
  color: var(--qe-ivory-dim);
}
.qe-moment-clock,
.qe-equity {
  font: 500 var(--qe-size-vernier) / 1.1 var(--qe-font-mono);
  letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--qe-ivory);
}
.qe-moment-sub,
.qe-treasury-sub {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 400 var(--qe-size-micro) / 1.3 var(--qe-font-mono);
  letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--qe-ivory-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qe-moment-phase {
  font-family: var(--qe-font-sans);
  letter-spacing: 0.02em;
}
.qe-dot {
  flex: none;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--qe-ivory-latent);
}
.qe-treasury {
  flex: none;
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}
.qe-treasury-main {
  display: flex;
  align-items: baseline;
  gap: 10px;
  white-space: nowrap;
}
.qe-change,
.qe-treasury-ghost {
  font: 400 var(--qe-size-readout) / 1 var(--qe-font-mono);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--qe-ivory-dim);
}
.qe-change.is-up,
.qe-treasury-ghost.is-up,
.qe-future-diff.is-up {
  color: var(--qe-lime);
}
.qe-change.is-down,
.qe-treasury-ghost.is-down,
.qe-future-diff.is-down {
  color: var(--qe-rose);
}
.qe-treasury-ghost {
  font-size: var(--qe-size-micro);
}
.qe-gross {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.qe-gross-bar {
  position: relative;
  display: inline-block;
  width: 64px;
  height: 3px;
  border-radius: 2px;
  background: rgba(244, 240, 228, 0.12);
  overflow: hidden;
}
.qe-gross-fill {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  transform: scaleX(var(--qe-fill, 0));
  background: var(--qe-gold);
  transition: transform 220ms var(--qe-ease-out);
}
.qe-gross-bar.is-near .qe-gross-fill {
  background: var(--qe-rose);
}
.qe-whatif {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 50px;
  padding: 0 18px 0 14px;
  border-radius: 16px;
  border: 1px solid var(--qe-lime-edge);
  background: var(--qe-lime-wash);
  color: var(--qe-lime);
  font: 500 15px / 1 var(--qe-font-sans);
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background 180ms ease,
    border-color 180ms ease,
    box-shadow 240ms ease;
}
.qe-whatif:hover {
  background: rgba(200, 245, 66, 0.14);
  border-color: rgba(200, 245, 66, 0.7);
  box-shadow: 0 0 30px -8px rgba(200, 245, 66, 0.5);
}
.qe-whatif-glyph {
  display: inline-grid;
  place-items: center;
}
.qe-whatif.is-open {
  background: rgba(200, 245, 66, 0.16);
  border-color: rgba(200, 245, 66, 0.75);
}

/* ------------------------------------------------------------------ the whisper line on the floor of the world */
.qe-whisper {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  margin: 0 auto;
  width: min(720px, calc(100% - 2 * var(--qe-gutter)));
  text-align: center;
  pointer-events: none;
  z-index: 15;
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity 420ms ease,
    transform 420ms var(--qe-ease-out);
}
.qe-whisper.is-visible {
  opacity: 1;
  transform: none;
}
.qe-whisper-line {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  max-width: 100%;
  font: 500 var(--qe-size-micro) / 1.4 var(--qe-font-sans);
  letter-spacing: 0.03em;
  color: var(--qe-ivory-dim);
  text-shadow: 0 1px 12px rgba(14, 4, 12, 0.95);
}
.qe-whisper-label {
  color: var(--qe-ivory);
  letter-spacing: var(--qe-track-label);
  text-transform: uppercase;
  white-space: nowrap;
}
.qe-whisper-label:empty {
  display: none;
}
.qe-whisper[data-tone='engrave'] .qe-whisper-text {
  font-family: var(--qe-font-mono);
  font-variant-numeric: tabular-nums;
}
.qe-whisper[data-tone='engrave'] .qe-whisper-label::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 10px 1px 0;
  border-radius: 50%;
  background: var(--qe-beam);
  box-shadow: 0 0 10px var(--qe-beam);
  animation: qe-breathe 1.6s ease-in-out infinite;
}
.qe-whisper-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qe-whisper-bar {
  position: relative;
  display: block;
  width: 240px;
  height: 1px;
  margin: 10px auto 0;
  background: rgba(244, 240, 228, 0.12);
  overflow: hidden;
}
.qe-whisper-fill,
.qe-progress-fill {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  transform: scaleX(var(--qe-fill, 0));
  background: var(--qe-beam);
  box-shadow: 0 0 10px var(--qe-beam);
  transition: transform 300ms linear;
}

/* ------------------------------------------------------------------ cards: composer, comparison (in the rail) */
/* every section of the rail has the height of its content: the page (or the wide rail) scrolls, never a section */
.qe-card {
  position: relative;
  padding: 18px 20px 20px;
  border-radius: var(--qe-radius-card);
}
.qe-card:not([hidden]) {
  animation: qe-card-in 420ms var(--qe-ease-out) both;
}
.qe-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: -8px -10px 14px 0;
}
.qe-card-head .qe-title:focus-visible {
  outline-offset: 4px;
}
.qe-card-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.qe-field {
  margin-top: 16px;
}
.qe-field > .qe-label {
  display: block;
  margin-bottom: 8px;
}
.qe-field-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.qe-value {
  font: 500 15px / 1.2 var(--qe-font-mono);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--qe-ivory);
  text-align: right;
}
.qe-value.qe-dim {
  font: 400 var(--qe-size-micro) / 1.2 var(--qe-font-sans);
  letter-spacing: 0.02em;
}
.qe-field-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: -4px;
}
.qe-bounds {
  font: 400 var(--qe-size-micro) / 1.3 var(--qe-font-mono);
  color: var(--qe-ivory-dim);
}

/* choices: native radios and checkboxes, drawn as quiet glass keys */
.qe-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.qe-families {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.qe-choice {
  position: relative;
  display: flex;
  min-width: 0;
}
.qe-choice-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.qe-choice-face {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: var(--qe-target);
  padding: 0 14px;
  border-radius: var(--qe-radius-control);
  border: 1px solid var(--qe-ivory-hair);
  background: rgba(244, 240, 228, 0.025);
  color: var(--qe-ivory-dim);
  font: 500 14px / 1.15 var(--qe-font-sans);
  letter-spacing: 0.005em;
  transition:
    color 160ms ease,
    border-color 160ms ease,
    background 160ms ease;
  pointer-events: none;
}
.qe-choice:hover .qe-choice-face {
  color: var(--qe-ivory);
  border-color: rgba(244, 240, 228, 0.22);
}
.qe-choice-input:checked + .qe-choice-face {
  color: var(--qe-ivory);
  border-color: rgba(200, 245, 66, 0.5);
  background: var(--qe-lime-wash);
}
.qe-choice-input:focus-visible + .qe-choice-face {
  outline: var(--qe-focus);
  outline-offset: 3px;
}
.qe-choice-check .qe-choice-face::before {
  content: '';
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  border: 1px solid rgba(244, 240, 228, 0.4);
}
.qe-choice-check .qe-choice-input:checked + .qe-choice-face::before {
  border-color: var(--qe-lime);
  background: var(--qe-lime);
  box-shadow: 0 0 8px rgba(200, 245, 66, 0.6);
}
.qe-choices-small .qe-choice-face {
  font-size: 13px;
  padding: 0 12px;
}
.qe-targets {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
.qe-choice-target .qe-choice-face {
  justify-content: center;
  padding: 0 2px;
  font: 500 var(--qe-size-micro) / 1 var(--qe-font-mono);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* the composer: the question anchored at its moment, a scrolling body, a pinned foot */
.qe-card.qe-composer {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}
.qe-composer-head {
  position: relative;
  flex: none;
  display: block;
  margin: 0;
  padding: 16px 20px 12px;
}
.qe-composer-head > .qe-iconbtn {
  position: absolute;
  top: 10px;
  right: 8px;
}
.qe-composer-head .qe-title {
  padding-right: 40px;
}
.qe-composer-heading {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  padding-top: 6px;
}
.qe-fork {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  margin: 0;
}
.qe-fork-line {
  font: 400 var(--qe-size-micro) / 1.35 var(--qe-font-mono);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--qe-ivory-dim);
}
.qe-linkbtn {
  min-height: var(--qe-target);
  padding: 0;
  border: 0;
  background: none;
  color: var(--qe-ivory);
  font: 500 var(--qe-size-micro) / 1.35 var(--qe-font-sans);
  text-decoration: underline;
  text-decoration-color: rgba(244, 240, 228, 0.35);
  text-underline-offset: 3px;
  cursor: pointer;
}
.qe-linkbtn:hover {
  text-decoration-color: var(--qe-ivory);
}
.qe-composer-body {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  margin: 0;
  border: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 2px 20px 18px;
  scrollbar-width: thin;
  scrollbar-color: rgba(244, 240, 228, 0.18) transparent;
}
.qe-composer-body.is-clipped {
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 36px), transparent);
  mask-image: linear-gradient(180deg, #000 calc(100% - 36px), transparent);
}
.qe-composer-body:disabled .qe-choice-face,
.qe-composer-body:disabled .qe-range,
.qe-composer-body:disabled .qe-select {
  opacity: 0.5;
}
.qe-composer-help {
  margin: 12px 2px 0;
  font: 400 13px / 1.45 var(--qe-font-sans);
  color: var(--qe-ivory-dim);
}
.qe-field-target {
  margin-top: 16px;
}
.qe-field-slider .qe-field-head {
  margin-bottom: -6px;
}
.qe-range-ends {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-top: -8px;
  font: 400 var(--qe-size-micro) / 1.3 var(--qe-font-mono);
  color: var(--qe-ivory-dim);
}
.qe-range-caption {
  font-family: var(--qe-font-sans);
  text-align: center;
}
.qe-field-inline {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.qe-field-inline .qe-value {
  font-family: var(--qe-font-sans);
  font-size: 14px;
  color: var(--qe-ivory-dim);
}
.qe-note {
  font: 400 var(--qe-size-micro) / 1.2 var(--qe-font-sans);
  color: var(--qe-ivory-dim);
}
.qe-field > .qe-field-head + .qe-select {
  margin-top: 8px;
}
.qe-composer-foot {
  flex: none;
  padding: 14px 16px 16px 20px;
  border-top: 1px solid var(--qe-ivory-hair);
  background: rgba(21, 5, 18, 0.5);
}
.qe-composer-foot .qe-card-actions {
  margin-top: 2px;
}
.qe-composer-status {
  display: flex;
  align-items: baseline;
  gap: 9px;
  min-height: 1.45em;
  margin: 0 0 10px;
  font: 400 14px / 1.45 var(--qe-font-sans);
  color: var(--qe-ivory);
}
.qe-composer-status::before {
  content: '';
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  transform: translateY(-1px);
  background: var(--qe-ivory-latent);
}
.qe-composer-status[data-tone='ok']::before {
  background: var(--qe-lime);
  box-shadow: 0 0 10px rgba(200, 245, 66, 0.7);
}
.qe-composer-status[data-tone='error'] {
  color: var(--qe-rose);
}
.qe-composer-status[data-tone='error']::before {
  background: var(--qe-rose);
}
.qe-composer-status[data-tone='busy']::before {
  background: var(--qe-beam);
  box-shadow: 0 0 10px var(--qe-beam);
  animation: qe-breathe 1.4s ease-in-out infinite;
}
.qe-composer-status[data-tone='busy'] {
  font-family: var(--qe-font-mono);
  font-size: var(--qe-size-readout);
}
.qe-composer-status[data-tone='info'] {
  color: var(--qe-ivory-dim);
}
.qe-progress {
  position: relative;
  height: 2px;
  margin: 0 0 14px;
  border-radius: 1px;
  background: rgba(244, 240, 228, 0.12);
  overflow: hidden;
}

/* the comparison readout */
.qe-compare-pending {
  margin: 0;
  font: 400 14px / 1.45 var(--qe-font-sans);
  color: var(--qe-ivory-dim);
}
.qe-compare-body > * + * {
  margin-top: 18px;
}
.qe-compare-body .qe-label {
  display: block;
  margin-bottom: 8px;
}
.qe-divergence-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.qe-category[data-category='INPUT'] {
  color: var(--qe-cyan);
  border-color: rgba(57, 211, 242, 0.42);
}
.qe-category[data-category='AUTHORITY'] {
  color: var(--qe-gold);
  border-color: rgba(226, 180, 94, 0.42);
}
.qe-category[data-category='ACCOUNTING'] {
  color: var(--qe-rose);
  border-color: rgba(201, 114, 126, 0.42);
}
.qe-category[data-category='NONE'] {
  color: var(--qe-ivory-dim);
}
.qe-divergence-where {
  font: 500 var(--qe-size-readout) / 1.3 var(--qe-font-mono);
  letter-spacing: 0.02em;
  color: var(--qe-ivory);
}
.qe-divergence-tech {
  margin: 4px 0 0;
  font: 400 12px / 1.4 var(--qe-font-mono);
  color: var(--qe-ivory-dim);
  opacity: 0.8;
  overflow-wrap: anywhere;
}
.qe-divergence-text {
  margin: 8px 0 0;
  font: 400 13px / 1.45 var(--qe-font-sans);
  color: var(--qe-ivory-dim);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.qe-futures-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
}
.qe-future {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 10px 10px 11px;
  border-radius: var(--qe-radius-control);
  border: 1px solid var(--qe-ivory-hair);
}
.qe-compare-body .qe-future .qe-label {
  margin: 0;
}
.qe-future.is-observed {
  border-color: rgba(244, 240, 228, 0.34);
  background: rgba(244, 240, 228, 0.045);
}
.qe-future.is-observed .qe-label::after {
  content: ' ●';
  color: var(--qe-ivory);
  letter-spacing: 0;
}
.qe-future-delta {
  border-style: dashed;
}
.qe-future-value,
.qe-future-diff {
  font: 500 13px / 1.2 var(--qe-font-mono);
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  color: var(--qe-ivory);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qe-reached {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.qe-reached .qe-dim {
  font-size: 13px;
}
.qe-observe {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.qe-compare-body .qe-observe .qe-label {
  flex-basis: 100%;
  margin-bottom: 0;
}
.qe-segmented {
  display: inline-flex;
  padding: 3px;
  border-radius: 14px;
  border: 1px solid rgba(244, 240, 228, 0.14);
}
.qe-segmented.is-busy {
  opacity: 0.6;
}
.qe-segment {
  position: relative;
  display: flex;
}
.qe-segment-face {
  display: flex;
  align-items: center;
  min-height: var(--qe-target);
  padding: 0 16px;
  border-radius: 11px;
  color: var(--qe-ivory-dim);
  font: 500 13px / 1 var(--qe-font-sans);
  letter-spacing: 0.02em;
  pointer-events: none;
  transition:
    background 160ms ease,
    color 160ms ease;
}
.qe-segment:hover .qe-segment-face {
  color: var(--qe-ivory);
}
.qe-segment .qe-choice-input:checked + .qe-segment-face {
  background: rgba(244, 240, 228, 0.12);
  color: var(--qe-ivory);
}
.qe-segment .qe-choice-input:focus-visible + .qe-segment-face {
  outline: var(--qe-focus);
  outline-offset: 1px;
}
.qe-replay {
  margin-left: auto;
}

/* ------------------------------------------------------------------ panel slots (contents: qe-panels.css) */
/* the organism panel and the decision lens are sections of the rail */
.qe-slot {
  position: relative;
  color: var(--qe-ivory);
  font: 400 14px / 1.45 var(--qe-font-sans);
}
.qe-slot:focus {
  outline: none;
}
.qe-slot:not([hidden]) {
  animation: qe-card-in 480ms var(--qe-ease-out) both;
}

/* ------------------------------------------------------------------ the Library (a section of the rail) */
.qe-library {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 18px 20px 20px 24px;
  border-radius: var(--qe-radius-card);
}
.qe-library:not([hidden]) {
  animation: qe-drawer-in 460ms var(--qe-ease-out) both;
}
.qe-library .qe-card-head {
  margin: -8px -12px 16px 0;
}
.qe-library-heading {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.qe-library-count {
  font: 400 var(--qe-size-micro) / 1 var(--qe-font-mono);
  color: var(--qe-ivory-dim);
}
.qe-library-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.qe-library-row {
  padding: 16px 0 16px 14px;
  border-top: 1px solid var(--qe-ivory-hair);
  position: relative;
}
.qe-library-row::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20px;
  width: 2px;
  height: 18px;
  border-radius: 1px;
  background: var(--qe-ivory-hair);
}
.qe-library-row.is-active::before {
  background: var(--qe-lime);
  box-shadow: 0 0 10px rgba(200, 245, 66, 0.6);
}
.qe-library-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.qe-library-title {
  font: 500 16px / 1.3 var(--qe-font-sans);
  color: var(--qe-ivory);
}
.qe-pill-observed {
  color: var(--qe-lime);
  border-color: rgba(200, 245, 66, 0.4);
}
.qe-library-facts {
  margin: 6px 0 12px;
  font: 400 var(--qe-size-micro) / 1.45 var(--qe-font-mono);
  letter-spacing: 0.01em;
  color: var(--qe-ivory-dim);
}
.qe-library-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.qe-verify {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 10px 0 0;
  font: 400 var(--qe-size-micro) / 1.4 var(--qe-font-mono);
  color: var(--qe-ivory-dim);
}
.qe-verify.is-ok {
  color: var(--qe-lime);
}
.qe-verify.is-bad {
  color: var(--qe-rose);
}
.qe-verify.is-running::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--qe-beam);
  animation: qe-breathe 1.2s ease-in-out infinite;
}
.qe-library-empty {
  padding: 16px 0;
  color: var(--qe-ivory-dim);
  font-size: 14px;
}
.qe-library-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 18px 0 0;
  border-top: 1px solid var(--qe-ivory-hair);
}
.qe-library-note {
  margin: 0;
  padding-top: 20px;
  font: 500 var(--qe-size-micro) / 1.45 var(--qe-font-sans);
  color: var(--qe-ivory-dim);
}

/* ------------------------------------------------------------------ the error toast (over the screen, wherever the page is scrolled) */
.qe-toast {
  position: fixed;
  top: var(--qe-top);
  left: 0;
  right: 0;
  margin: 0 auto;
  width: min(560px, calc(100% - 2 * var(--qe-gutter) - 2 * 160px));
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 6px 12px 18px;
  border-radius: 16px;
  z-index: 40;
}
.qe-toast:not([hidden]) {
  animation: qe-card-in 360ms var(--qe-ease-out) both;
}

/* ------------------------------------------------------------------ the sound check (#soundcheck) */
.qe-soundcheck {
  position: fixed;
  top: calc(var(--qe-top) + 64px);
  left: max(var(--qe-gutter), env(safe-area-inset-left, 0px));
  right: max(var(--qe-gutter), env(safe-area-inset-right, 0px));
  margin: 0 auto;
  max-width: 560px;
  max-height: calc(100vh - var(--qe-top) - 64px - var(--qe-chrono-h) - var(--qe-bottom) - 24px);
  overflow: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px 16px;
  border-radius: 16px;
  z-index: 45;
}
.qe-soundcheck-lines {
  margin: 0;
  font: 400 var(--qe-size-micro) / 1.55 var(--qe-font-mono);
  color: var(--qe-ivory);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.qe-soundcheck-note {
  margin: 0;
  font-size: var(--qe-size-micro);
  color: var(--qe-ivory-dim);
}
.qe-soundcheck-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.qe-toast::before {
  content: '';
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 2px;
  border-radius: 1px;
  background: var(--qe-rose);
}
.qe-toast-body {
  flex: 1;
  min-width: 0;
  padding-top: 4px;
}
.qe-toast-title {
  color: var(--qe-rose);
  margin-right: 10px;
}
.qe-toast-code {
  font: 400 var(--qe-size-micro) / 1 var(--qe-font-mono);
  color: var(--qe-ivory-dim);
}
.qe-toast-message {
  margin: 6px 0 4px;
  font: 400 14px / 1.45 var(--qe-font-sans);
  color: var(--qe-ivory);
}

/* ------------------------------------------------------------------ arrival: the void first, then the instrument */
.qe-app:not(.is-arriving) .qe-wordmark {
  animation: qe-fade 1100ms ease-out 120ms both;
}
.qe-app:not(.is-arriving) .qe-top-right {
  animation: qe-fade 900ms ease-out 420ms both;
}
.qe-app:not(.is-arriving) .qe-chrono {
  animation: qe-rise 1100ms var(--qe-ease-out) 620ms both;
}
.qe-app.is-arriving .qe-top,
.qe-app.is-arriving .qe-chrono,
.qe-app.is-arriving .qe-whisper {
  opacity: 0;
}

@keyframes qe-fade {
  from {
    opacity: 0;
  }
}
@keyframes qe-rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}
@keyframes qe-card-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.985);
  }
}
@keyframes qe-drawer-in {
  from {
    opacity: 0;
    transform: translateX(28px);
  }
}
@keyframes qe-breathe {
  0%,
  100% {
    opacity: 0.35;
  }
  50% {
    opacity: 1;
  }
}

/* ------------------------------------------------------------------ medium widths (the Chronometer's dock) */
@container qe-dock (max-width: 1100px) {
  .qe-chrono {
    gap: 12px;
  }
  .qe-treasury-sub .qe-reserved,
  .qe-moment-phase,
  .qe-moment-sub .qe-hide-phone,
  .qe-moment-sub .qe-of {
    display: none;
  }
}
/* the treasury stands in two lines and "What if…" keeps its glyph, so the one row still holds every 44 px target */
@container qe-dock (max-width: 940px) {
  .qe-whatif-text {
    display: none;
  }
  .qe-whatif {
    width: 50px;
    padding: 0;
    justify-content: center;
  }
  .qe-treasury-main {
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
  }
  .qe-change {
    font-size: var(--qe-size-micro);
  }
  .qe-gross-label,
  .qe-gross-pct {
    display: none;
  }
}
/* a narrow world column beside the rail: inside an organism the breadcrumb takes the wordmark's place, as on a phone */
@container qe-top (max-width: 820px) {
  .qe-app[data-mode='chamber'] .qe-wordmark {
    display: none;
  }
}

/* ------------------------------------------------------------------ phone (≤ 820 px): compact header and Chronometer */
@media (max-width: 820px) {
  :root {
    --qe-gutter: 16px;
    --qe-top: calc(var(--qe-safe-top) + 14px);
    --qe-bottom: calc(var(--qe-safe-bottom) + 8px);
    --qe-chrono-h: 112px;
    --qe-chrono-min: 0px;
    --qe-side: calc(8px + max(var(--qe-safe-left), var(--qe-safe-right)));
  }
  .qe-top {
    padding-bottom: 10px;
  }
  .qe-wordmark {
    padding-top: 6px;
  }
  .qe-wordmark-name {
    font-size: 12px;
  }
  .qe-wordmark-line {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 8px;
  }
  .qe-wordmark-sep {
    display: none;
  }
  .qe-sound {
    padding: 0 2px 0 4px;
  }
  .qe-sound.is-on {
    padding-left: 12px;
  }
  .qe-sound:not(.is-on) .qe-meter {
    display: none;
  }
  .qe-sound-toggle {
    gap: 7px;
    padding: 0 12px 0 8px;
    letter-spacing: 0.1em;
  }
  /* the volume: a row of its own under the sound control while sound is on, inside the header's band, which makes
     room for it (it never hangs over the world, and never crowds the wordmark or the breadcrumb) */
  .qe-controls {
    position: relative;
  }
  .qe-top:has(.qe-volume:not([hidden])) {
    min-height: calc(var(--qe-top) + 2 * var(--qe-target) + 8px + 10px);
  }
  .qe-volume {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 160px;
    height: var(--qe-target);
    padding: 0 14px;
    border-radius: 22px;
    background: var(--qe-glass-bg);
    border: 1px solid var(--qe-glass-border);
    -webkit-backdrop-filter: blur(var(--qe-glass-blur));
    backdrop-filter: blur(var(--qe-glass-blur));
  }
  .qe-divergence-tech {
    display: none;
  }
  .qe-card {
    padding: 16px 16px 18px;
  }
  .qe-composer-head {
    padding: 12px 6px 8px 16px;
  }
  .qe-composer-body {
    padding: 0 16px 14px;
  }
  .qe-composer-foot {
    padding: 10px 12px 12px 16px;
  }
  .qe-title {
    font-size: 17px;
  }
  .qe-families {
    grid-template-columns: 1fr 1fr;
  }
  .qe-choice-face {
    font-size: 13px;
    padding: 0 10px;
  }
  .qe-futures-row {
    grid-template-columns: 1fr 1fr;
  }
  .qe-future-delta {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
  }
  .qe-library {
    padding: 16px 16px 18px 18px;
    border-radius: 20px;
  }
  .qe-toast {
    width: calc(100% - 2 * var(--qe-side));
    top: calc(var(--qe-top) + 56px);
  }
}

/* the Chronometer of a phone, or of a world column as narrow beside the rail: the present, the treasury and "What if…"
   in a row over the transport */
@container qe-dock (max-width: 820px) {
  .qe-chrono {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas:
      'moment treasury whatif'
      'transport transport transport';
    align-items: center;
    gap: 6px 10px;
    padding: 12px 8px 4px 14px;
    border-radius: 20px;
  }
  .qe-rule {
    display: none;
  }
  .qe-moment {
    grid-area: moment;
    gap: 4px;
  }
  .qe-treasury {
    grid-area: treasury;
    margin-left: 0;
    gap: 4px;
  }
  .qe-whatif {
    grid-area: whatif;
    width: auto;
    height: 44px;
    padding: 0 12px 0 10px;
    gap: 6px;
    font-size: 14px;
  }
  .qe-whatif-text {
    display: inline;
  }
  .qe-transport {
    grid-area: transport;
    justify-content: space-between;
    margin: 0 -2px 0 -8px;
    gap: 0;
  }
  .qe-tbtn-play {
    width: 48px;
    height: 48px;
    margin: 0;
  }
  .qe-speed {
    min-width: 44px;
    padding: 0 4px;
  }
  .qe-moment-main {
    gap: 8px;
  }
  .qe-moment-clock,
  .qe-equity {
    font-size: 17px;
  }
  .qe-moment-sub .qe-hide-phone,
  .qe-moment-sub .qe-of,
  .qe-moment-phase,
  .qe-treasury-sub .qe-reserved,
  .qe-gross-label,
  .qe-gross-pct,
  .qe-treasury-ghost {
    display: none;
  }
  .qe-change {
    font-size: var(--qe-size-micro);
  }
  .qe-treasury-main {
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
  }
  .qe-gross-bar {
    width: 56px;
  }
}

/* a narrow phone (375 px): the present and the treasury keep apart beside "What if…" */
@container qe-dock (max-width: 380px) {
  .qe-moment-clock,
  .qe-equity {
    font-size: 15px;
  }
  .qe-moment-main {
    gap: 6px;
  }
  .qe-moment-day {
    letter-spacing: 0.08em;
  }
  .qe-chrono {
    column-gap: 8px;
    padding-left: 12px;
  }
  .qe-whatif {
    padding: 0 10px 0 8px;
  }
  /* every transport control keeps its 44 px target: the row borrows a little of the plate's padding instead */
  .qe-transport {
    margin: 0 -6px 0 -10px;
  }
  .qe-tbtn {
    flex: 0 0 var(--qe-target);
  }
  .qe-tbtn-play {
    width: var(--qe-target);
    height: var(--qe-target);
  }
}
@container qe-dock (max-width: 371px) {
  /* narrower than any current iPhone (375 px and up): let the row shrink rather than overflow */
  .qe-tbtn {
    flex: 0 1 var(--qe-target);
  }
}

/* ------------------------------------------------------------------ phones, both orientations: the breadcrumb */
@media (max-width: 820px), (orientation: landscape) and (max-height: 500px) {
  /* inside an organism the breadcrumb takes the wordmark's place: the farm in miniature and the organism's name */
  .qe-app[data-mode='chamber'] .qe-wordmark {
    display: none;
  }
  .qe-crumb {
    padding: 0 16px 0 8px;
  }
  .qe-crumb-farm,
  .qe-crumb-sep {
    display: none;
  }
}

/* ------------------------------------------------------------------ landscape phone (≤ 500 px tall): the stacked page
   with a header and a Chronometer of one row each, so the world viewport keeps most of the short screen */
@media (orientation: landscape) and (max-height: 500px) {
  :root {
    --qe-gutter: 16px;
    --qe-top: calc(var(--qe-safe-top) + 8px);
    --qe-bottom: calc(var(--qe-safe-bottom) + 6px);
    --qe-chrono-h: 58px;
    --qe-chrono-min: 0px;
    --qe-side: calc(12px + max(var(--qe-safe-left), var(--qe-safe-right)));
  }
  /* the short screen keeps most of itself for the world: a narrower glimpse of the section below */
  .qe-app[data-layout='stacked'][data-rail='open'] {
    --qe-peek: 40px;
  }
  .qe-app[data-layout='stacked'] .qe-world {
    min-height: 180px;
  }
  .qe-top {
    align-items: center;
    padding-bottom: 8px;
  }
  /* the wordmark on one line, the volume inline */
  .qe-wordmark {
    padding-top: 2px;
  }
  .qe-wordmark-line {
    display: block;
    margin-top: 6px;
  }
  .qe-wordmark-sep {
    display: inline;
  }
  .qe-top:has(.qe-volume:not([hidden])) {
    min-height: 0;
  }
  .qe-volume {
    position: static;
    width: 108px;
    height: auto;
    padding: 0 12px 0 4px;
    border: 0;
    border-radius: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  /* the Chronometer: transport, the present, the treasury and "What if…" on one row */
  .qe-chrono {
    display: flex;
    gap: 10px;
    padding: 6px 8px 6px 6px;
    border-radius: 18px;
  }
  .qe-rule {
    display: block;
    margin: 6px 0;
  }
  .qe-transport {
    margin: 0;
    gap: 0;
  }
  .qe-tbtn-play {
    width: 46px;
    height: 46px;
    margin: 0 2px;
  }
  .qe-speed {
    min-width: 44px;
    padding: 0 4px;
  }
  .qe-moment {
    gap: 3px;
  }
  .qe-moment-main {
    gap: 8px;
  }
  .qe-moment-clock,
  .qe-equity {
    font-size: 16px;
  }
  .qe-moment-sub .qe-hide-phone,
  .qe-moment-sub .qe-of,
  .qe-moment-phase,
  .qe-treasury-sub .qe-reserved,
  .qe-gross-label,
  .qe-gross-pct,
  .qe-treasury-ghost {
    display: none;
  }
  .qe-treasury {
    margin-left: auto;
    gap: 3px;
  }
  .qe-treasury-main {
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
  }
  .qe-change {
    font-size: var(--qe-size-micro);
  }
  .qe-gross-bar {
    width: 56px;
  }
  .qe-whatif {
    width: 46px;
    height: 46px;
    padding: 0;
    justify-content: center;
  }
  .qe-whatif-text {
    display: none;
  }
  .qe-card {
    padding: 16px 16px 18px;
  }
  .qe-title {
    font-size: 17px;
  }
  .qe-divergence-tech {
    display: none;
  }
  .qe-futures-row {
    grid-template-columns: 1fr 1fr;
  }
  .qe-future-delta {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
  }
  .qe-composer-body {
    padding: 0 16px 14px;
  }
  .qe-composer-foot {
    padding: 10px 12px 12px 16px;
  }
  .qe-choice-face {
    font-size: 13px;
    padding: 0 10px;
  }
  .qe-library {
    border-radius: 20px;
  }
  .qe-toast {
    top: calc(var(--qe-top) + 52px);
    width: min(520px, calc(100% - 2 * var(--qe-gutter)));
  }
}
/* a narrow landscape phone (iPhone SE on its side): the one row keeps its 44 px targets, the numerals give way */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 760px) {
  .qe-chrono {
    gap: 6px;
    padding: 6px 6px 6px 4px;
  }
  .qe-rule {
    display: none;
  }
  .qe-moment-clock,
  .qe-equity {
    font-size: 14px;
  }
  .qe-moment-main {
    gap: 6px;
  }
  .qe-moment-day {
    letter-spacing: 0.08em;
  }
}

/* ------------------------------------------------------------------ reduced motion: cuts and still light */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}
.qe-app.qe-reduced *,
.qe-app.qe-reduced *::before,
.qe-app.qe-reduced *::after {
  animation: none !important;
  transition: none !important;
}