/* ═══════════════════════════════════════════════════════════════════════════
   Qlynic · the platform page
   Laid on the design system's own sheets. Each section's drawing is a
   script of its own; this sheet lays the words round it and stands in for
   it where it cannot be drawn.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── section 1 · the record ───────────────────────────────────────────────── */

.ql-record {
  position: relative;
  isolation: isolate;
  background: var(--ql-bg);
  padding-block: clamp(2rem, 1.1rem + 3vw, 4.25rem) clamp(2.5rem, 1.6rem + 3.6vw, 5rem);
}
.ql-record__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  row-gap: var(--ql-sp-8);
  margin-block-end: clamp(1.25rem, .5rem + 2.4vw, 2.5rem);
}
.ql-record__words,
.ql-record__side {
  display: grid;
  justify-items: start;
  row-gap: var(--ql-sp-7);
  min-inline-size: 0;
}
.ql-record__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--ql-sp-5);
  margin: 0;
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-3xs);
  font-weight: var(--ql-fw-medium);
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ql-text-body);
}
.ql-record__eyebrow .ql-quad { gap: 2px; }
.ql-record__eyebrow .ql-quad i { background: var(--q); box-shadow: 0 0 6px -1px var(--q); }
.ql-record__eyebrow .ql-quad i:nth-child(1) { --q: var(--ql-q-tl); }
.ql-record__eyebrow .ql-quad i:nth-child(2) { --q: var(--ql-q-tr); }
.ql-record__eyebrow .ql-quad i:nth-child(3) { --q: var(--ql-q-bl); }
.ql-record__eyebrow .ql-quad i:nth-child(4) { --q: var(--ql-q-br); }
.ql-record__title {
  margin: 0;
  font-size: clamp(2.5rem, .9rem + 4.6vw, 5.4rem);
  line-height: .98;
  font-weight: var(--ql-fw-bold);
  letter-spacing: -.046em;
  color: var(--ql-text-strong);
  text-wrap: balance;
}
.ql-record__title span { display: block; }
.ql-record__lead {
  margin: 0;
  max-inline-size: 44ch;
  font-size: clamp(1rem, .93rem + .28vw, 1.22rem);
  line-height: 1.6;
  color: var(--ql-text-muted);
  text-wrap: pretty;
}
.ql-record__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ql-sp-5);
}

/* ── the stage: a picture box until the script draws it ── */

.ql-record__stage { position: relative; }
.ql-record__view {
  position: relative;
  inline-size: 100%;
  aspect-ratio: 10 / 9;
}
.ql-record__gl {
  position: absolute;
  inset: 0;
  display: block;
  inline-size: 100%;
  block-size: 100%;
  opacity: 0;
  transition: opacity .9s var(--ql-ease-out);
  -webkit-tap-highlight-color: transparent;
}
.ql-record.is-live-gl .ql-record__gl { opacity: 1; }
.ql-record__frame {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.ql-record__flat {
  position: absolute;
  inset: 0;
  display: block;
}
.ql-record__still {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: none;
  object-fit: contain;
}
/* the drawing comes in under the picture, then the picture fades off it */
.ql-record.is-live-gl .ql-record__flat { opacity: 0; transition: opacity .55s var(--ql-ease) .15s; }

/* while the drawing is prepared: the stage warming up. Its picture dimmed,
   a light passing over it, and the four parts' lights waking in turn at the
   corners their lasers come from. Only transform and opacity move */
.ql-record__still { transition: filter .8s var(--ql-ease-out); }
.ql-record.is-warming .ql-record__still,
.ql-record.is-live-gl .ql-record__still { filter: brightness(.42) saturate(.5); }
.ql-record__boot {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity .6s var(--ql-ease-out);
}
.ql-record.is-warming .ql-record__boot { opacity: 1; }
.ql-record__sweep {
  position: absolute;
  inset: -20% -60%;
  background: linear-gradient(105deg, transparent 42%, rgb(255 255 255 / .06) 48%, rgb(255 255 255 / .12) 50%, rgb(255 255 255 / .06) 52%, transparent 58%);
  transform: translateX(-36%);
  animation: ql-record-sweep 3.4s cubic-bezier(.45, 0, .25, 1) infinite;
}
@keyframes ql-record-sweep { to { transform: translateX(36%); } }
.ql-record__lamp {
  position: absolute;
  inset-inline-start: var(--xw);
  inset-block-start: var(--yw);
  inline-size: var(--sw);
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, color-mix(in srgb, var(--c) 70%, transparent) 0 12%, color-mix(in srgb, var(--c) 30%, transparent) 34%, transparent 68%);
  opacity: .06;
  animation: ql-record-lamp 2.6s ease-in-out var(--d) infinite;
}
@keyframes ql-record-lamp {
  0%, 100% { opacity: .06; }
  22% { opacity: 1; }
  48% { opacity: .22; }
}
.ql-record__boot-label {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-end: 4%;
  transform: translateX(-50%);
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-3xs);
  font-weight: var(--ql-fw-medium);
  line-height: 1;
  letter-spacing: .22em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ql-text-muted);
  animation: ql-record-label 1.8s ease-in-out infinite;
}
@keyframes ql-record-label { 50% { opacity: .35; } }
@media (max-width: 1023px) {
  .ql-record__lamp { inset-inline-start: var(--xp); inset-block-start: var(--yp); inline-size: var(--sp); }
}

/* ── the four parts: on a phone under the stage, two by two in the Q's
   places; wide, at the stage's own corners, where their lasers come from.
   The one at work is lit; the one chosen keeps it ── */

.ql-record__parts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ql-sp-4);
  margin: clamp(.75rem, .4rem + 1.4vw, 1.5rem) 0 0;
  padding: 0;
  list-style: none;
}
.ql-record__parts li { display: flex; min-inline-size: 0; }
.ql-record__part {
  --q: var(--ql-q-tl);
  position: relative;
  display: grid;
  align-content: start;
  row-gap: var(--ql-sp-3);
  inline-size: 100%;
  margin: 0;
  padding: var(--ql-sp-6) var(--ql-sp-7);
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid var(--ql-line);
  border-radius: var(--ql-r-md);
  background: rgb(var(--ql-white-rgb) / .018);
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .4s var(--ql-ease-out), background-color .4s var(--ql-ease-out), transform .4s var(--ql-ease-out);
}
.ql-record__part[data-q="tr"] { --q: var(--ql-q-tr); }
.ql-record__part[data-q="bl"] { --q: var(--ql-q-bl); }
.ql-record__part[data-q="br"] { --q: var(--ql-q-br); }
.ql-record__part .ql-quad { --div-stop: var(--q); }
/* its line of colour along the top, lit while its layer is */
.ql-record__part::before {
  content: "";
  position: absolute;
  inset-inline: var(--ql-sp-7);
  inset-block-start: -1px;
  block-size: 2px;
  border-radius: 2px;
  background: var(--q);
  box-shadow: 0 0 14px 0 var(--q);
  opacity: 0;
  transform: scaleX(.35);
  transition: opacity .45s var(--ql-ease-out), transform .6s var(--ql-ease-out);
}
.ql-record__part.is-on::before,
.ql-record__part[aria-pressed="true"]::before { opacity: 1; transform: none; }
.ql-record__part.is-on {
  border-color: color-mix(in srgb, var(--q) 34%, var(--ql-line));
  background: color-mix(in srgb, var(--q) 6%, rgb(var(--ql-white-rgb) / .018));
}
.ql-record__part[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--q) 62%, transparent);
  background: color-mix(in srgb, var(--q) 9%, rgb(var(--ql-white-rgb) / .018));
}
.ql-record__part:focus-visible { outline: none; box-shadow: var(--ql-ring); }
@media (hover: hover) and (pointer: fine) {
  .ql-record__part:hover { border-color: color-mix(in srgb, var(--q) 34%, var(--ql-line)); }
}
/* where its laser comes from: a point of its colour, at the corner nearest
   the crystal (shown where the parts stand on the stage) */
.ql-record__emit {
  position: absolute;
  inline-size: 7px;
  block-size: 7px;
  border-radius: 50%;
  background: var(--q);
  box-shadow: 0 0 10px 1px var(--q), 0 0 2px 0 #fff inset;
  opacity: 0;
  pointer-events: none;
}
.ql-record__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--ql-sp-4);
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-3xs);
  font-weight: var(--ql-fw-medium);
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ql-text-body);
}
.ql-record__num { color: var(--q); }
.ql-record__name {
  font-size: var(--ql-fs-lg);
  font-weight: var(--ql-fw-semibold);
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--ql-text-strong);
}
.ql-record__line {
  font-size: var(--ql-fs-sm);
  line-height: 1.55;
  color: var(--ql-text-muted);
  text-wrap: pretty;
}
/* without script there is nothing to choose: the parts are a list */
@media (scripting: none) {
  .ql-record__part { cursor: default; }
}
.ql-record__note {
  margin: var(--ql-sp-5) 0 0;
  font-size: var(--ql-fs-2xs);
  line-height: 1.5;
  color: var(--ql-text-muted);
}

/* two by two from a phone's width up: the parts in the Q's places, all of
   them under the stage at once */
@media (min-width: 340px) {
  .ql-record__parts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ql-record__part { padding: var(--ql-sp-5) var(--ql-sp-6); }
}

/* ── wide screens: the heading and the lead side by side, the stage in its
   whole, the parts at its four corners ── */

@media (min-width: 1024px) {
  .ql-record__head {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    column-gap: clamp(2rem, 1rem + 4vw, 6rem);
  }
  .ql-record__view { aspect-ratio: 1600 / 712; }
  .ql-record__parts {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: clamp(.75rem, .2rem + 1vw, 1.5rem);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    pointer-events: none;
  }
  .ql-record__parts li { pointer-events: none; }
  .ql-record__parts li:nth-child(1) { justify-self: start; align-self: start; }
  .ql-record__parts li:nth-child(2) { justify-self: end; align-self: start; }
  .ql-record__parts li:nth-child(3) { justify-self: start; align-self: end; }
  .ql-record__parts li:nth-child(4) { justify-self: end; align-self: end; }
  .ql-record__part {
    inline-size: clamp(15rem, 10rem + 9vw, 19.5rem);
    pointer-events: auto;
    background: rgb(5 5 5 / .55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
  .ql-record__part[data-q="tr"],
  .ql-record__part[data-q="br"] { text-align: end; justify-items: end; }
  .ql-record__emit { opacity: 1; }
  .ql-record__part[data-q="tl"] .ql-record__emit { inset-inline-end: -4px; inset-block-end: -4px; }
  .ql-record__part[data-q="tr"] .ql-record__emit { inset-inline-start: -4px; inset-block-end: -4px; }
  .ql-record__part[data-q="bl"] .ql-record__emit { inset-inline-end: -4px; inset-block-start: -4px; }
  .ql-record__part[data-q="br"] .ql-record__emit { inset-inline-start: -4px; inset-block-start: -4px; }
}

@media (prefers-reduced-motion: reduce) {
  .ql-record__sweep { display: none; }
  .ql-record__lamp, .ql-record__boot-label { animation: none; }
  .ql-record__lamp { opacity: .55; }
  .ql-record__part, .ql-record__part::before { transition: none; }
}

/* ── section 2 · the front desk: its day, kept like a fine watch ─────────── */

.ql-clock {
  position: relative;
  isolation: isolate;
  background: var(--ql-bg);
  padding-block: clamp(2.5rem, 1.4rem + 3.6vw, 5rem) clamp(2.5rem, 1.6rem + 3.6vw, 5rem);
  border-block-start: 1px solid var(--ql-line);
}
.ql-clock__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  row-gap: var(--ql-sp-7);
  margin-block-end: clamp(1.25rem, .5rem + 2.4vw, 2.5rem);
}
.ql-clock__words,
.ql-clock__side {
  display: grid;
  justify-items: start;
  row-gap: var(--ql-sp-7);
  min-inline-size: 0;
}
.ql-clock__eyebrow {
  --div-stop: var(--ql-q-tl);
  display: inline-flex;
  align-items: center;
  gap: var(--ql-sp-4);
  margin: 0;
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-3xs);
  font-weight: var(--ql-fw-medium);
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ql-text-body);
}
.ql-clock__num { color: var(--ql-q-tl); }
.ql-clock__title {
  margin: 0;
  font-size: clamp(2.25rem, .9rem + 4vw, 4.6rem);
  line-height: .98;
  font-weight: var(--ql-fw-bold);
  letter-spacing: -.044em;
  color: var(--ql-text-strong);
  text-wrap: balance;
}
.ql-clock__title span { display: block; }
.ql-clock__lead {
  margin: 0;
  max-inline-size: 46ch;
  font-size: clamp(1rem, .93rem + .28vw, 1.22rem);
  line-height: 1.6;
  color: var(--ql-text-muted);
  text-wrap: pretty;
}

/* ── the stage: a picture box until the script draws it ── */

.ql-clock__stage { position: relative; }
.ql-clock__view {
  position: relative;
  inline-size: 100%;
  aspect-ratio: 10 / 9;
}
.ql-clock__gl {
  position: absolute;
  inset: 0;
  display: block;
  inline-size: 100%;
  block-size: 100%;
  opacity: 0;
  transition: opacity .9s var(--ql-ease-out);
  -webkit-tap-highlight-color: transparent;
}
.ql-clock.is-live-gl .ql-clock__gl { opacity: 1; }
.ql-clock__frame {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.ql-clock__flat {
  position: absolute;
  inset: 0;
  display: block;
}
.ql-clock__still {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: none;
  object-fit: contain;
}
.ql-clock.is-live-gl .ql-clock__flat { opacity: 0; transition: opacity .55s var(--ql-ease) .15s; }

/* while the drawing is prepared: the picture dimmed, a light passing over
   it, and the four cards' lights waking in turn where their threads begin */
.ql-clock__still { transition: filter .8s var(--ql-ease-out); }
.ql-clock.is-warming .ql-clock__still,
.ql-clock.is-live-gl .ql-clock__still { filter: brightness(.42) saturate(.5); }
.ql-clock__boot {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity .6s var(--ql-ease-out);
}
.ql-clock.is-warming .ql-clock__boot { opacity: 1; }
.ql-clock__sweep {
  position: absolute;
  inset: -20% -60%;
  background: linear-gradient(105deg, transparent 42%, rgb(255 255 255 / .06) 48%, rgb(255 255 255 / .12) 50%, rgb(255 255 255 / .06) 52%, transparent 58%);
  transform: translateX(-36%);
  animation: ql-clock-sweep 3.4s cubic-bezier(.45, 0, .25, 1) infinite;
}
@keyframes ql-clock-sweep { to { transform: translateX(36%); } }
.ql-clock__lamp {
  position: absolute;
  inset-inline-start: var(--xw);
  inset-block-start: var(--yw);
  inline-size: var(--sw);
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, color-mix(in srgb, var(--c) 70%, transparent) 0 12%, color-mix(in srgb, var(--c) 30%, transparent) 34%, transparent 68%);
  opacity: .06;
  animation: ql-clock-lamp 2.6s ease-in-out var(--d) infinite;
}
@keyframes ql-clock-lamp {
  0%, 100% { opacity: .06; }
  22% { opacity: 1; }
  48% { opacity: .22; }
}
.ql-clock__boot-label {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-end: 4%;
  transform: translateX(-50%);
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-3xs);
  font-weight: var(--ql-fw-medium);
  line-height: 1;
  letter-spacing: .22em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ql-text-muted);
  animation: ql-clock-label 1.8s ease-in-out infinite;
}
@keyframes ql-clock-label { 50% { opacity: .35; } }
@media (max-width: 1023px) {
  .ql-clock__lamp { inset-inline-start: var(--xp); inset-block-start: var(--yp); inline-size: var(--sp); }
}

/* ── the four cards: the three doors and the reminders. On a phone under
   the stage, two by two; wide, at the stage's own corners, where their
   threads begin. The one at work is lit; the one chosen keeps it ── */

.ql-clock__parts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ql-sp-4);
  margin: clamp(.75rem, .4rem + 1.4vw, 1.5rem) 0 0;
  padding: 0;
  list-style: none;
}
.ql-clock__parts li { display: flex; min-inline-size: 0; }
.ql-clock__part {
  --q: var(--ql-q-tl);
  position: relative;
  display: grid;
  align-content: start;
  row-gap: var(--ql-sp-3);
  inline-size: 100%;
  margin: 0;
  padding: var(--ql-sp-6) var(--ql-sp-7);
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid var(--ql-line);
  border-radius: var(--ql-r-md);
  background: rgb(var(--ql-white-rgb) / .018);
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .4s var(--ql-ease-out), background-color .4s var(--ql-ease-out);
}
.ql-clock__part::before {
  content: "";
  position: absolute;
  inset-inline: var(--ql-sp-7);
  inset-block-start: -1px;
  block-size: 2px;
  border-radius: 2px;
  background: var(--q);
  box-shadow: 0 0 14px 0 var(--q);
  opacity: 0;
  transform: scaleX(.35);
  transition: opacity .45s var(--ql-ease-out), transform .6s var(--ql-ease-out);
}
.ql-clock__part.is-on::before,
.ql-clock__part[aria-pressed="true"]::before { opacity: 1; transform: none; }
.ql-clock__part.is-on {
  border-color: color-mix(in srgb, var(--q) 34%, var(--ql-line));
  background: color-mix(in srgb, var(--q) 6%, rgb(var(--ql-white-rgb) / .018));
}
.ql-clock__part[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--q) 62%, transparent);
  background: color-mix(in srgb, var(--q) 9%, rgb(var(--ql-white-rgb) / .018));
}
.ql-clock__part:focus-visible { outline: none; box-shadow: var(--ql-ring); }
@media (hover: hover) and (pointer: fine) {
  .ql-clock__part:hover { border-color: color-mix(in srgb, var(--q) 34%, var(--ql-line)); }
}
/* where its thread begins: a point of sky at the corner nearest the clock */
.ql-clock__emit {
  position: absolute;
  inline-size: 7px;
  block-size: 7px;
  border-radius: 50%;
  background: var(--q);
  box-shadow: 0 0 10px 1px var(--q), 0 0 2px 0 #fff inset;
  opacity: 0;
  pointer-events: none;
}
.ql-clock__tag {
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-3xs);
  font-weight: var(--ql-fw-medium);
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--q);
}
.ql-clock__name {
  font-size: var(--ql-fs-lg);
  font-weight: var(--ql-fw-semibold);
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--ql-text-strong);
}
.ql-clock__line {
  font-size: var(--ql-fs-sm);
  line-height: 1.55;
  color: var(--ql-text-muted);
  text-wrap: pretty;
}
@media (scripting: none) {
  .ql-clock__part { cursor: default; }
}

/* the line under the stage: what the clock shows at this moment */
.ql-clock__now {
  margin: var(--ql-sp-6) 0 0;
  min-block-size: 3.2em;
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-2xs);
  line-height: 1.6;
  letter-spacing: .02em;
  color: var(--ql-text-body);
  text-align: center;
  text-wrap: balance;
}
/* the rest of the front desk, and the note */
.ql-clock__more {
  margin: var(--ql-sp-7) auto 0;
  max-inline-size: 64rem;
}
.ql-clock__more-title {
  margin: 0 0 var(--ql-sp-4);
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-3xs);
  font-weight: var(--ql-fw-medium);
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ql-text-body);
}
.ql-clock__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ql-sp-3) var(--ql-sp-8);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ql-clock__list li {
  position: relative;
  padding-inline-start: 1.1rem;
  font-size: var(--ql-fs-sm);
  line-height: 1.55;
  color: var(--ql-text-muted);
}
.ql-clock__list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .62em;
  inline-size: 5px;
  block-size: 5px;
  border-radius: 50%;
  background: var(--ql-q-tl);
  box-shadow: 0 0 6px -1px var(--ql-q-tl);
}
.ql-clock__note {
  margin: var(--ql-sp-5) 0 0;
  font-size: var(--ql-fs-2xs);
  line-height: 1.5;
  color: var(--ql-text-muted);
}

@media (min-width: 340px) {
  .ql-clock__parts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ql-clock__part { padding: var(--ql-sp-5) var(--ql-sp-6); }
}
@media (min-width: 720px) {
  .ql-clock__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── wide screens: the heading and the lead side by side, the stage in its
   whole, the cards at its four corners ── */

@media (min-width: 1024px) {
  .ql-clock__head {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    column-gap: clamp(2rem, 1rem + 4vw, 6rem);
  }
  .ql-clock__view { aspect-ratio: 1600 / 712; }
  .ql-clock__parts {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: clamp(.75rem, .2rem + 1vw, 1.5rem);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    pointer-events: none;
  }
  .ql-clock__parts li { pointer-events: none; }
  .ql-clock__parts li:nth-child(1) { justify-self: start; align-self: start; }
  .ql-clock__parts li:nth-child(2) { justify-self: end; align-self: start; }
  .ql-clock__parts li:nth-child(3) { justify-self: start; align-self: end; }
  .ql-clock__parts li:nth-child(4) { justify-self: end; align-self: end; }
  .ql-clock__part {
    inline-size: clamp(15rem, 10rem + 9vw, 19.5rem);
    pointer-events: auto;
    background: rgb(5 5 5 / .55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
  .ql-clock__part[data-q="tr"],
  .ql-clock__part[data-q="br"] { text-align: end; justify-items: end; }
  .ql-clock__emit { opacity: 1; }
  .ql-clock__part[data-q="tl"] .ql-clock__emit { inset-inline-end: -4px; inset-block-end: -4px; }
  .ql-clock__part[data-q="tr"] .ql-clock__emit { inset-inline-start: -4px; inset-block-end: -4px; }
  .ql-clock__part[data-q="bl"] .ql-clock__emit { inset-inline-end: -4px; inset-block-start: -4px; }
  .ql-clock__part[data-q="br"] .ql-clock__emit { inset-inline-start: -4px; inset-block-start: -4px; }
}

@media (prefers-reduced-motion: reduce) {
  .ql-clock__sweep { display: none; }
  .ql-clock__lamp, .ql-clock__boot-label { animation: none; }
  .ql-clock__lamp { opacity: .55; }
  .ql-clock__part, .ql-clock__part::before { transition: none; }
}

/* ── section 3 · clinical: one visit's chart, ink in water ───────────────── */

.ql-ink {
  --v-patient: var(--ql-q-bl);
  --v-assistant: var(--ql-q-br);
  --v-you: var(--ql-q-tr);
  position: relative;
  isolation: isolate;
  background: var(--ql-bg);
  padding-block: clamp(2.5rem, 1.4rem + 3.6vw, 5rem) clamp(2.5rem, 1.6rem + 3.6vw, 5rem);
  border-block-start: 1px solid var(--ql-line);
}
.ql-ink [data-voice="patient"] { --v: var(--v-patient); }
.ql-ink [data-voice="assistant"] { --v: var(--v-assistant); }
.ql-ink [data-voice="you"] { --v: var(--v-you); }

/* ── the stage: on a phone, the heading and then the tank; wide, the tank
   edge to edge and the heading over it ── */

.ql-ink__stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.ql-ink__head { position: relative; z-index: 1; min-inline-size: 0; }
.ql-ink__head-in {
  display: grid;
  justify-items: start;
  row-gap: var(--ql-sp-7);
  padding-block-end: clamp(1.25rem, .5rem + 2.4vw, 2.5rem);
}
.ql-ink__eyebrow {
  --div-stop: var(--ql-q-tr);
  display: inline-flex;
  align-items: center;
  gap: var(--ql-sp-4);
  margin: 0;
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-3xs);
  font-weight: var(--ql-fw-medium);
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ql-text-body);
}
.ql-ink__num { color: var(--ql-q-tr); }
.ql-ink__title {
  margin: 0;
  font-size: clamp(2.25rem, .9rem + 4vw, 4.6rem);
  line-height: .98;
  font-weight: var(--ql-fw-bold);
  letter-spacing: -.044em;
  color: var(--ql-text-strong);
  text-wrap: balance;
}
.ql-ink__title span { display: block; }
/* under the stage: the lead, and who puts what into the chart */
.ql-ink__intro {
  display: grid;
  justify-items: center;
  row-gap: var(--ql-sp-6);
  margin: clamp(1.25rem, .6rem + 2vw, 2.25rem) auto 0;
  max-inline-size: 64rem;
  text-align: center;
}
.ql-ink__lead {
  margin: 0;
  max-inline-size: 52ch;
  font-size: clamp(1rem, .93rem + .28vw, 1.22rem);
  line-height: 1.6;
  color: var(--ql-text-muted);
  text-wrap: pretty;
}
/* who puts what into the chart: the three inks' colours */
.ql-ink__voices {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ql-sp-3) var(--ql-sp-8);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ql-ink__voices li {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--ql-sp-3);
  padding-inline-start: 1.25rem;
  font-size: var(--ql-fs-sm);
  line-height: 1.45;
}
.ql-ink__voices li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .36em;
  inline-size: .7rem;
  block-size: .7rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, #fff 45%, var(--v)) 0 18%, var(--v) 48%, color-mix(in srgb, #000 35%, var(--v)) 100%);
  box-shadow: 0 0 10px -1px var(--v);
}
.ql-ink__who { font-weight: var(--ql-fw-semibold); color: var(--ql-text-strong); }
.ql-ink__does { color: var(--ql-text-muted); }

.ql-ink__view {
  position: relative;
  inline-size: 100%;
  aspect-ratio: 4 / 5;
  max-block-size: 88vh;
}
.ql-ink__gl {
  position: absolute;
  inset: 0;
  display: block;
  inline-size: 100%;
  block-size: 100%;
  opacity: 0;
  transition: opacity .9s var(--ql-ease-out);
  -webkit-tap-highlight-color: transparent;
}
.ql-ink.is-live-gl .ql-ink__gl { opacity: 1; }
.ql-ink__frame {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.ql-ink__flat {
  position: absolute;
  inset: 0;
  display: block;
}
.ql-ink__still {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: none;
  object-fit: cover;
}
.ql-ink.is-live-gl .ql-ink__flat { opacity: 0; transition: opacity .55s var(--ql-ease) .15s; }

/* while the drawing is prepared: the picture dimmed, a light passing over it */
.ql-ink__still { transition: filter .8s var(--ql-ease-out); }
.ql-ink.is-warming .ql-ink__still,
.ql-ink.is-live-gl .ql-ink__still { filter: brightness(.42) saturate(.5); }
.ql-ink__boot {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity .6s var(--ql-ease-out);
}
.ql-ink.is-warming .ql-ink__boot { opacity: 1; }
.ql-ink__sweep {
  position: absolute;
  inset: -20% -60%;
  background: linear-gradient(105deg, transparent 42%, rgb(255 255 255 / .06) 48%, rgb(255 255 255 / .12) 50%, rgb(255 255 255 / .06) 52%, transparent 58%);
  transform: translateX(-36%);
  animation: ql-ink-sweep 3.4s cubic-bezier(.45, 0, .25, 1) infinite;
}
@keyframes ql-ink-sweep { to { transform: translateX(36%); } }
.ql-ink__boot-label {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-end: 4%;
  transform: translateX(-50%);
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-3xs);
  font-weight: var(--ql-fw-medium);
  line-height: 1;
  letter-spacing: .22em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ql-text-muted);
  animation: ql-ink-label 1.8s ease-in-out infinite;
}
@keyframes ql-ink-label { 50% { opacity: .35; } }

/* the line under the stage: what the stage shows at this moment */
.ql-ink__now {
  margin: var(--ql-sp-5) auto 0;
  max-inline-size: 64rem;
  min-block-size: 3.2em;
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-2xs);
  line-height: 1.6;
  letter-spacing: .02em;
  color: var(--ql-text-body);
  text-align: center;
  text-wrap: balance;
}

/* ── the visit in three chapters: before it, in it, after it. Each item
   plays its moment on the stage again; the one at work is lit ── */

.ql-ink__chapters {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ql-sp-7) clamp(1rem, .4rem + 1.6vw, 2rem);
  margin-block-start: clamp(1.5rem, .8rem + 2vw, 2.75rem);
}
.ql-ink__chapter { display: grid; align-content: start; row-gap: var(--ql-sp-4); min-inline-size: 0; }
.ql-ink__when {
  display: flex;
  align-items: center;
  gap: var(--ql-sp-4);
  margin: 0;
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-3xs);
  font-weight: var(--ql-fw-medium);
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ql-text-body);
}
.ql-ink__when::after { content: ""; flex: 1; block-size: 1px; background: linear-gradient(90deg, var(--ql-line), transparent); }
.ql-ink__items {
  display: grid;
  gap: var(--ql-sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ql-ink__items li { display: flex; min-inline-size: 0; }
.ql-ink__item {
  position: relative;
  display: grid;
  align-content: start;
  row-gap: var(--ql-sp-2);
  inline-size: 100%;
  margin: 0;
  padding: var(--ql-sp-5) var(--ql-sp-6) var(--ql-sp-5) calc(var(--ql-sp-6) + .55rem);
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid var(--ql-line);
  border-radius: var(--ql-r-md);
  background: rgb(var(--ql-white-rgb) / .018);
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .4s var(--ql-ease-out), background-color .4s var(--ql-ease-out);
}
/* the item's thread: its voice's colour down its edge */
.ql-ink__item::before {
  content: "";
  position: absolute;
  inset-block: var(--ql-sp-5);
  inset-inline-start: var(--ql-sp-5);
  inline-size: 2px;
  border-radius: 2px;
  background: var(--v);
  opacity: .45;
  transition: opacity .45s var(--ql-ease-out), box-shadow .45s var(--ql-ease-out);
}
.ql-ink__item.is-on::before,
.ql-ink__item[aria-pressed="true"]::before { opacity: 1; box-shadow: 0 0 12px 0 var(--v); }
.ql-ink__item.is-on {
  border-color: color-mix(in srgb, var(--v) 34%, var(--ql-line));
  background: color-mix(in srgb, var(--v) 6%, rgb(var(--ql-white-rgb) / .018));
}
.ql-ink__item[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--v) 62%, transparent);
  background: color-mix(in srgb, var(--v) 9%, rgb(var(--ql-white-rgb) / .018));
}
.ql-ink__item:focus-visible { outline: none; box-shadow: var(--ql-ring); }
@media (hover: hover) and (pointer: fine) {
  .ql-ink__item:hover { border-color: color-mix(in srgb, var(--v) 34%, var(--ql-line)); }
}
.ql-ink__name {
  font-size: var(--ql-fs-md);
  font-weight: var(--ql-fw-semibold);
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--ql-text-strong);
}
.ql-ink__line {
  font-size: var(--ql-fs-sm);
  line-height: 1.55;
  color: var(--ql-text-muted);
  text-wrap: pretty;
}
@media (scripting: none) {
  .ql-ink__item { cursor: default; }
}

/* the rest of the clinical part, and the note */
.ql-ink__more {
  margin: var(--ql-sp-8) auto 0;
  max-inline-size: 64rem;
}
.ql-ink__more-title {
  margin: 0 0 var(--ql-sp-4);
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-3xs);
  font-weight: var(--ql-fw-medium);
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ql-text-body);
}
.ql-ink__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ql-sp-3) var(--ql-sp-8);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ql-ink__list li {
  position: relative;
  padding-inline-start: 1.1rem;
  font-size: var(--ql-fs-sm);
  line-height: 1.55;
  color: var(--ql-text-muted);
}
.ql-ink__list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .62em;
  inline-size: 5px;
  block-size: 5px;
  border-radius: 50%;
  background: var(--ql-q-tr);
  box-shadow: 0 0 6px -1px var(--ql-q-tr);
}
.ql-ink__note {
  margin: var(--ql-sp-5) 0 0;
  font-size: var(--ql-fs-2xs);
  line-height: 1.5;
  color: var(--ql-text-muted);
}

@media (min-width: 720px) {
  .ql-ink__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── wide screens: the stage edge to edge, the heading over its dark top
   left, the three chapters side by side under it ── */

@media (min-width: 1024px) {
  .ql-ink { padding-block-start: 0; }
  .ql-ink__head,
  .ql-ink__view { grid-area: 1 / 1; }
  .ql-ink__head { align-self: start; pointer-events: none; }
  .ql-ink__head-in { padding-block: clamp(2.5rem, 1rem + 3vw, 4.5rem) 0; row-gap: var(--ql-sp-6); }
  .ql-ink__title { font-size: clamp(2.6rem, 1rem + 3.2vw, 4.4rem); }
  .ql-ink__view { aspect-ratio: 1600 / 720; max-block-size: 92vh; }
  .ql-ink__chapters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .ql-ink__sweep { display: none; }
  .ql-ink__boot-label { animation: none; }
  .ql-ink__item, .ql-ink__item::before { transition: none; }
}

/* ── section 4 · patients: a week of messages, paper cranes in a window ──── */

.ql-cranes {
  --v-patient: var(--ql-q-bl);
  --v-assistant: var(--ql-q-br);
  --v-clinic: var(--ql-q-tl);
  --v-doctor: var(--ql-q-tr);
  position: relative;
  isolation: isolate;
  background: var(--ql-bg);
  padding-block: clamp(2.5rem, 1.4rem + 3.6vw, 5rem) clamp(2.5rem, 1.6rem + 3.6vw, 5rem);
  border-block-start: 1px solid var(--ql-line);
}
.ql-cranes [data-voice="patient"] { --v: var(--v-patient); }
.ql-cranes [data-voice="assistant"] { --v: var(--v-assistant); }
.ql-cranes [data-voice="clinic"] { --v: var(--v-clinic); }
.ql-cranes [data-voice="doctor"] { --v: var(--v-doctor); }

/* ── the stage: on a phone, the heading and then the window; wide, the
   window edge to edge and the heading over it ── */

.ql-cranes__stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.ql-cranes__head { position: relative; z-index: 1; min-inline-size: 0; }
.ql-cranes__head-in {
  display: grid;
  justify-items: start;
  row-gap: var(--ql-sp-7);
  padding-block-end: clamp(1.25rem, .5rem + 2.4vw, 2.5rem);
}
.ql-cranes__eyebrow {
  --div-stop: var(--ql-q-bl);
  display: inline-flex;
  align-items: center;
  gap: var(--ql-sp-4);
  margin: 0;
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-3xs);
  font-weight: var(--ql-fw-medium);
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ql-text-body);
}
.ql-cranes__num { color: var(--ql-q-bl); }
.ql-cranes__title {
  margin: 0;
  font-size: clamp(2.25rem, .9rem + 4vw, 4.6rem);
  line-height: .98;
  font-weight: var(--ql-fw-bold);
  letter-spacing: -.044em;
  color: var(--ql-text-strong);
  text-wrap: balance;
}
.ql-cranes__title span { display: block; }
/* under the stage: the lead, and who writes on each paper */
.ql-cranes__intro {
  display: grid;
  justify-items: center;
  row-gap: var(--ql-sp-6);
  margin: clamp(1.25rem, .6rem + 2vw, 2.25rem) auto 0;
  max-inline-size: 64rem;
  text-align: center;
}
.ql-cranes__lead {
  margin: 0;
  max-inline-size: 52ch;
  font-size: clamp(1rem, .93rem + .28vw, 1.22rem);
  line-height: 1.6;
  color: var(--ql-text-muted);
  text-wrap: pretty;
}
/* who writes on each paper: the four papers' colours */
.ql-cranes__voices {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ql-sp-3) var(--ql-sp-8);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ql-cranes__voices li {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--ql-sp-3);
  padding-inline-start: 1.25rem;
  font-size: var(--ql-fs-sm);
  line-height: 1.45;
}
.ql-cranes__voices li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .36em;
  inline-size: .7rem;
  block-size: .7rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, #fff 45%, var(--v)) 0 18%, var(--v) 48%, color-mix(in srgb, #000 35%, var(--v)) 100%);
  box-shadow: 0 0 10px -1px var(--v);
}
.ql-cranes__who { font-weight: var(--ql-fw-semibold); color: var(--ql-text-strong); }
.ql-cranes__does { color: var(--ql-text-muted); }

.ql-cranes__view {
  position: relative;
  inline-size: 100%;
  aspect-ratio: 4 / 5;
  max-block-size: 88vh;
}
.ql-cranes__gl {
  position: absolute;
  inset: 0;
  display: block;
  inline-size: 100%;
  block-size: 100%;
  opacity: 0;
  transition: opacity .9s var(--ql-ease-out);
  -webkit-tap-highlight-color: transparent;
}
.ql-cranes.is-live-gl .ql-cranes__gl { opacity: 1; }
.ql-cranes__frame {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.ql-cranes__flat {
  position: absolute;
  inset: 0;
  display: block;
}
.ql-cranes__still {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: none;
  object-fit: cover;
}
.ql-cranes.is-live-gl .ql-cranes__flat { opacity: 0; transition: opacity .55s var(--ql-ease) .15s; }

/* while the drawing is prepared: the picture dimmed, a light passing over it */
.ql-cranes__still { transition: filter .8s var(--ql-ease-out); }
.ql-cranes.is-warming .ql-cranes__still,
.ql-cranes.is-live-gl .ql-cranes__still { filter: brightness(.42) saturate(.5); }
.ql-cranes__boot {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity .6s var(--ql-ease-out);
}
.ql-cranes.is-warming .ql-cranes__boot { opacity: 1; }
.ql-cranes__sweep {
  position: absolute;
  inset: -20% -60%;
  background: linear-gradient(105deg, transparent 42%, rgb(255 255 255 / .06) 48%, rgb(255 255 255 / .12) 50%, rgb(255 255 255 / .06) 52%, transparent 58%);
  transform: translateX(-36%);
  animation: ql-cranes-sweep 3.4s cubic-bezier(.45, 0, .25, 1) infinite;
}
@keyframes ql-cranes-sweep { to { transform: translateX(36%); } }
.ql-cranes__boot-label {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-end: 4%;
  transform: translateX(-50%);
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-3xs);
  font-weight: var(--ql-fw-medium);
  line-height: 1;
  letter-spacing: .22em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ql-text-muted);
  animation: ql-cranes-label 1.8s ease-in-out infinite;
}
@keyframes ql-cranes-label { 50% { opacity: .35; } }

/* the line under the stage: what the stage shows at this moment */
.ql-cranes__now {
  margin: var(--ql-sp-5) auto 0;
  max-inline-size: 64rem;
  min-block-size: 3.2em;
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-2xs);
  line-height: 1.6;
  letter-spacing: .02em;
  color: var(--ql-text-body);
  text-align: center;
  text-wrap: balance;
}

/* ── the week in three chapters. Each item plays its moment on the stage
   again; the one at work is lit ── */

.ql-cranes__chapters {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ql-sp-7) clamp(1rem, .4rem + 1.6vw, 2rem);
  margin-block-start: clamp(1.5rem, .8rem + 2vw, 2.75rem);
}
.ql-cranes__chapter { display: grid; align-content: start; row-gap: var(--ql-sp-4); min-inline-size: 0; }
.ql-cranes__when {
  display: flex;
  align-items: center;
  gap: var(--ql-sp-4);
  margin: 0;
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-3xs);
  font-weight: var(--ql-fw-medium);
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ql-text-body);
}
.ql-cranes__when::after { content: ""; flex: 1; block-size: 1px; background: linear-gradient(90deg, var(--ql-line), transparent); }
.ql-cranes__items {
  display: grid;
  gap: var(--ql-sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ql-cranes__items li { display: flex; min-inline-size: 0; }
.ql-cranes__item {
  position: relative;
  display: grid;
  align-content: start;
  row-gap: var(--ql-sp-2);
  inline-size: 100%;
  margin: 0;
  padding: var(--ql-sp-5) var(--ql-sp-6) var(--ql-sp-5) calc(var(--ql-sp-6) + .55rem);
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid var(--ql-line);
  border-radius: var(--ql-r-md);
  background: rgb(var(--ql-white-rgb) / .018);
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .4s var(--ql-ease-out), background-color .4s var(--ql-ease-out);
}
/* the item's thread: its voice's colour down its edge */
.ql-cranes__item::before {
  content: "";
  position: absolute;
  inset-block: var(--ql-sp-5);
  inset-inline-start: var(--ql-sp-5);
  inline-size: 2px;
  border-radius: 2px;
  background: var(--v);
  opacity: .45;
  transition: opacity .45s var(--ql-ease-out), box-shadow .45s var(--ql-ease-out);
}
.ql-cranes__item.is-on::before,
.ql-cranes__item[aria-pressed="true"]::before { opacity: 1; box-shadow: 0 0 12px 0 var(--v); }
.ql-cranes__item.is-on {
  border-color: color-mix(in srgb, var(--v) 34%, var(--ql-line));
  background: color-mix(in srgb, var(--v) 6%, rgb(var(--ql-white-rgb) / .018));
}
.ql-cranes__item[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--v) 62%, transparent);
  background: color-mix(in srgb, var(--v) 9%, rgb(var(--ql-white-rgb) / .018));
}
.ql-cranes__item:focus-visible { outline: none; box-shadow: var(--ql-ring); }
@media (hover: hover) and (pointer: fine) {
  .ql-cranes__item:hover { border-color: color-mix(in srgb, var(--v) 34%, var(--ql-line)); }
}
.ql-cranes__name {
  font-size: var(--ql-fs-md);
  font-weight: var(--ql-fw-semibold);
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--ql-text-strong);
}
.ql-cranes__line {
  font-size: var(--ql-fs-sm);
  line-height: 1.55;
  color: var(--ql-text-muted);
  text-wrap: pretty;
}
@media (scripting: none) {
  .ql-cranes__item { cursor: default; }
}

/* the rest of the patients' part, and the note */
.ql-cranes__more {
  margin: var(--ql-sp-8) auto 0;
  max-inline-size: 64rem;
}
.ql-cranes__more-title {
  margin: 0 0 var(--ql-sp-4);
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-3xs);
  font-weight: var(--ql-fw-medium);
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ql-text-body);
}
.ql-cranes__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ql-sp-3) var(--ql-sp-8);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ql-cranes__list li {
  position: relative;
  padding-inline-start: 1.1rem;
  font-size: var(--ql-fs-sm);
  line-height: 1.55;
  color: var(--ql-text-muted);
}
.ql-cranes__list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .62em;
  inline-size: 5px;
  block-size: 5px;
  border-radius: 50%;
  background: var(--ql-q-bl);
  box-shadow: 0 0 6px -1px var(--ql-q-bl);
}
.ql-cranes__note {
  margin: var(--ql-sp-5) 0 0;
  font-size: var(--ql-fs-2xs);
  line-height: 1.5;
  color: var(--ql-text-muted);
}

@media (min-width: 720px) {
  .ql-cranes__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── wide screens: the stage edge to edge, the heading over the closed
   pane at its top left (a shade behind it, for the bright hours), the
   three chapters side by side under it ── */

@media (min-width: 1024px) {
  .ql-cranes { padding-block-start: 0; }
  .ql-cranes__head,
  .ql-cranes__view { grid-area: 1 / 1; }
  .ql-cranes__head { align-self: start; pointer-events: none; }
  .ql-cranes__head-in { padding-block: clamp(2.5rem, 1rem + 3vw, 4.5rem) 0; row-gap: var(--ql-sp-6); }
  .ql-cranes__title { font-size: clamp(2.6rem, 1rem + 3.2vw, 4.4rem); }
  .ql-cranes__view { aspect-ratio: 1600 / 720; max-block-size: 92vh; }
  .ql-cranes__view::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 52% 62% at 14% 0%, rgb(5 5 5 / .5), rgb(5 5 5 / .22) 52%, transparent 78%);
  }
  .ql-cranes__chapters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .ql-cranes__sweep { display: none; }
  .ql-cranes__boot-label { animation: none; }
  .ql-cranes__item, .ql-cranes__item::before { transition: none; }
}

/* ── section 5 · business: one clinic's month, drawn by brass drops ──────── */

.ql-drops {
  --v-patient: var(--ql-q-bl);
  --v-advisor: var(--ql-q-br);
  --v-clinic: var(--ql-q-tl);
  --v-doctor: var(--ql-q-tr);
  /* the warm light the month is drawn in, the drops' own */
  --v-gold: #FFC98A;
  position: relative;
  isolation: isolate;
  background: var(--ql-bg);
  padding-block: clamp(2.5rem, 1.4rem + 3.6vw, 5rem) clamp(2.5rem, 1.6rem + 3.6vw, 5rem);
  border-block-start: 1px solid var(--ql-line);
}
.ql-drops [data-voice="patient"] { --v: var(--v-patient); }
.ql-drops [data-voice="advisor"] { --v: var(--v-advisor); }
.ql-drops [data-voice="clinic"] { --v: var(--v-clinic); }
.ql-drops [data-voice="doctor"] { --v: var(--v-doctor); }
.ql-drops [data-voice="gold"] { --v: var(--v-gold); }

/* ── the stage: on a phone, the heading and then the gallery; wide, the
   gallery edge to edge and the heading over it ── */

.ql-drops__stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.ql-drops__head { position: relative; z-index: 1; min-inline-size: 0; }
.ql-drops__head-in {
  display: grid;
  justify-items: start;
  row-gap: var(--ql-sp-7);
  padding-block-end: clamp(1.25rem, .5rem + 2.4vw, 2.5rem);
}
.ql-drops__eyebrow {
  --div-stop: var(--ql-q-br);
  display: inline-flex;
  align-items: center;
  gap: var(--ql-sp-4);
  margin: 0;
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-3xs);
  font-weight: var(--ql-fw-medium);
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ql-text-body);
}
.ql-drops__num { color: var(--ql-q-br); }
.ql-drops__title {
  margin: 0;
  font-size: clamp(2.25rem, .9rem + 4vw, 4.6rem);
  line-height: .98;
  font-weight: var(--ql-fw-bold);
  letter-spacing: -.044em;
  color: var(--ql-text-strong);
  text-wrap: balance;
}
.ql-drops__title span { display: block; }
/* under the stage: the lead, and who moves the money */
.ql-drops__intro {
  display: grid;
  justify-items: center;
  row-gap: var(--ql-sp-6);
  margin: clamp(1.25rem, .6rem + 2vw, 2.25rem) auto 0;
  max-inline-size: 64rem;
  text-align: center;
}
.ql-drops__lead {
  margin: 0;
  max-inline-size: 52ch;
  font-size: clamp(1rem, .93rem + .28vw, 1.22rem);
  line-height: 1.6;
  color: var(--ql-text-muted);
  text-wrap: pretty;
}
/* who moves the money: the four lights' colours */
.ql-drops__voices {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ql-sp-3) var(--ql-sp-8);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ql-drops__voices li {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--ql-sp-3);
  padding-inline-start: 1.25rem;
  font-size: var(--ql-fs-sm);
  line-height: 1.45;
}
.ql-drops__voices li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .36em;
  inline-size: .7rem;
  block-size: .7rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, #fff 45%, var(--v)) 0 18%, var(--v) 48%, color-mix(in srgb, #000 35%, var(--v)) 100%);
  box-shadow: 0 0 10px -1px var(--v);
}
.ql-drops__who { font-weight: var(--ql-fw-semibold); color: var(--ql-text-strong); }
.ql-drops__does { color: var(--ql-text-muted); }

.ql-drops__view {
  position: relative;
  inline-size: 100%;
  aspect-ratio: 1 / 1;
  max-block-size: 88vh;
}
.ql-drops__gl {
  position: absolute;
  inset: 0;
  display: block;
  inline-size: 100%;
  block-size: 100%;
  opacity: 0;
  transition: opacity .9s var(--ql-ease-out);
  -webkit-tap-highlight-color: transparent;
}
.ql-drops.is-live-gl .ql-drops__gl { opacity: 1; }
.ql-drops__frame {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.ql-drops__flat {
  position: absolute;
  inset: 0;
  display: block;
}
.ql-drops__still {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: none;
  object-fit: cover;
}
.ql-drops.is-live-gl .ql-drops__flat { opacity: 0; transition: opacity .55s var(--ql-ease) .15s; }

/* while the drawing is prepared: the picture dimmed, a light passing over it */
.ql-drops__still { transition: filter .8s var(--ql-ease-out); }
.ql-drops.is-warming .ql-drops__still,
.ql-drops.is-live-gl .ql-drops__still { filter: brightness(.42) saturate(.5); }
.ql-drops__boot {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity .6s var(--ql-ease-out);
}
.ql-drops.is-warming .ql-drops__boot { opacity: 1; }
.ql-drops__sweep {
  position: absolute;
  inset: -20% -60%;
  background: linear-gradient(105deg, transparent 42%, rgb(255 255 255 / .06) 48%, rgb(255 255 255 / .12) 50%, rgb(255 255 255 / .06) 52%, transparent 58%);
  transform: translateX(-36%);
  animation: ql-drops-sweep 3.4s cubic-bezier(.45, 0, .25, 1) infinite;
}
@keyframes ql-drops-sweep { to { transform: translateX(36%); } }
.ql-drops__boot-label {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-end: 4%;
  transform: translateX(-50%);
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-3xs);
  font-weight: var(--ql-fw-medium);
  line-height: 1;
  letter-spacing: .22em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ql-text-muted);
  animation: ql-drops-label 1.8s ease-in-out infinite;
}
@keyframes ql-drops-label { 50% { opacity: .35; } }

/* the line under the stage: what the stage shows at this moment */
.ql-drops__now {
  margin: var(--ql-sp-5) auto 0;
  max-inline-size: 64rem;
  min-block-size: 3.2em;
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-2xs);
  line-height: 1.6;
  letter-spacing: .02em;
  color: var(--ql-text-body);
  text-align: center;
  text-wrap: balance;
}

/* ── the month in three chapters. Each item plays its moment on the stage
   again; the one at work is lit ── */

.ql-drops__chapters {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ql-sp-7) clamp(1rem, .4rem + 1.6vw, 2rem);
  margin-block-start: clamp(1.5rem, .8rem + 2vw, 2.75rem);
}
.ql-drops__chapter { display: grid; align-content: start; row-gap: var(--ql-sp-4); min-inline-size: 0; }
.ql-drops__when {
  display: flex;
  align-items: center;
  gap: var(--ql-sp-4);
  margin: 0;
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-3xs);
  font-weight: var(--ql-fw-medium);
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ql-text-body);
}
.ql-drops__when::after { content: ""; flex: 1; block-size: 1px; background: linear-gradient(90deg, var(--ql-line), transparent); }
.ql-drops__items {
  display: grid;
  gap: var(--ql-sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ql-drops__items li { display: flex; min-inline-size: 0; }
.ql-drops__item {
  position: relative;
  display: grid;
  align-content: start;
  row-gap: var(--ql-sp-2);
  inline-size: 100%;
  margin: 0;
  padding: var(--ql-sp-5) var(--ql-sp-6) var(--ql-sp-5) calc(var(--ql-sp-6) + .55rem);
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid var(--ql-line);
  border-radius: var(--ql-r-md);
  background: rgb(var(--ql-white-rgb) / .018);
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .4s var(--ql-ease-out), background-color .4s var(--ql-ease-out);
}
/* the item's thread: its voice's colour down its edge */
.ql-drops__item::before {
  content: "";
  position: absolute;
  inset-block: var(--ql-sp-5);
  inset-inline-start: var(--ql-sp-5);
  inline-size: 2px;
  border-radius: 2px;
  background: var(--v);
  opacity: .45;
  transition: opacity .45s var(--ql-ease-out), box-shadow .45s var(--ql-ease-out);
}
.ql-drops__item.is-on::before,
.ql-drops__item[aria-pressed="true"]::before { opacity: 1; box-shadow: 0 0 12px 0 var(--v); }
.ql-drops__item.is-on {
  border-color: color-mix(in srgb, var(--v) 34%, var(--ql-line));
  background: color-mix(in srgb, var(--v) 6%, rgb(var(--ql-white-rgb) / .018));
}
.ql-drops__item[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--v) 62%, transparent);
  background: color-mix(in srgb, var(--v) 9%, rgb(var(--ql-white-rgb) / .018));
}
.ql-drops__item:focus-visible { outline: none; box-shadow: var(--ql-ring); }
@media (hover: hover) and (pointer: fine) {
  .ql-drops__item:hover { border-color: color-mix(in srgb, var(--v) 34%, var(--ql-line)); }
}
.ql-drops__name {
  font-size: var(--ql-fs-md);
  font-weight: var(--ql-fw-semibold);
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--ql-text-strong);
}
.ql-drops__line {
  font-size: var(--ql-fs-sm);
  line-height: 1.55;
  color: var(--ql-text-muted);
  text-wrap: pretty;
}
@media (scripting: none) {
  .ql-drops__item { cursor: default; }
}

/* claims work in one province only: the lines about them carry its name as a tag */
.ql-drops__tag {
  display: inline-flex;
  align-items: center;
  margin-inline-start: var(--ql-sp-3);
  padding: .3em .62em .28em;
  border: 1px solid rgb(167 139 250 / .42);
  border-radius: 999px;
  font-family: var(--ql-font-mono);
  font-size: .625rem;
  font-weight: var(--ql-fw-medium);
  line-height: 1;
  letter-spacing: .12em;
  text-transform: uppercase;
  vertical-align: .12em;
  color: var(--ql-q-br);
}

/* the rest of the business part, and the note */
.ql-drops__more {
  margin: var(--ql-sp-8) auto 0;
  max-inline-size: 64rem;
}
.ql-drops__more-title {
  margin: 0 0 var(--ql-sp-4);
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-3xs);
  font-weight: var(--ql-fw-medium);
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ql-text-body);
}
.ql-drops__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ql-sp-3) var(--ql-sp-8);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ql-drops__list li {
  position: relative;
  padding-inline-start: 1.1rem;
  font-size: var(--ql-fs-sm);
  line-height: 1.55;
  color: var(--ql-text-muted);
}
.ql-drops__list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .62em;
  inline-size: 5px;
  block-size: 5px;
  border-radius: 50%;
  background: var(--ql-q-br);
  box-shadow: 0 0 6px -1px var(--ql-q-br);
}
.ql-drops__note {
  margin: var(--ql-sp-5) 0 0;
  font-size: var(--ql-fs-2xs);
  line-height: 1.5;
  color: var(--ql-text-muted);
}

@media (min-width: 720px) {
  .ql-drops__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── wide screens: the stage edge to edge, the heading over the dark at
   its top left (a shade behind it, for the drops that pass), the three
   chapters side by side under it ── */

@media (min-width: 1024px) {
  .ql-drops { padding-block-start: 0; }
  .ql-drops__head,
  .ql-drops__view { grid-area: 1 / 1; }
  .ql-drops__head { align-self: start; pointer-events: none; }
  .ql-drops__head-in { padding-block: clamp(2.5rem, 1rem + 3vw, 4.5rem) 0; row-gap: var(--ql-sp-6); }
  .ql-drops__title { font-size: clamp(2.6rem, 1rem + 3.2vw, 4.4rem); }
  .ql-drops__view { aspect-ratio: 1600 / 720; max-block-size: 92vh; }
  .ql-drops__view::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 52% 62% at 14% 0%, rgb(5 5 5 / .5), rgb(5 5 5 / .22) 52%, transparent 78%);
  }
  .ql-drops__chapters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .ql-drops__sweep { display: none; }
  .ql-drops__boot-label { animation: none; }
  .ql-drops__item, .ql-drops__item::before { transition: none; }
}

/* ── section 6 · trust: a vault at night, every door keyed to its people ──── */

.ql-vault {
  --v-desk: var(--ql-q-tl);
  --v-business: var(--ql-q-br);
  --v-doctor: var(--ql-q-tr);
  /* the owner's key, the vault's own warm light; a refusal's red; the record's cool white */
  --v-gold: #FFC98A;
  --v-refused: var(--ql-danger);
  --v-crystal: #DCE8FF;
  position: relative;
  isolation: isolate;
  background: var(--ql-bg);
  padding-block: clamp(2.5rem, 1.4rem + 3.6vw, 5rem) clamp(2.5rem, 1.6rem + 3.6vw, 5rem);
  border-block-start: 1px solid var(--ql-line);
}
.ql-vault [data-voice="desk"] { --v: var(--v-desk); }
.ql-vault [data-voice="business"] { --v: var(--v-business); }
.ql-vault [data-voice="doctor"] { --v: var(--v-doctor); }
.ql-vault [data-voice="gold"] { --v: var(--v-gold); }
.ql-vault [data-voice="refused"] { --v: var(--v-refused); }
.ql-vault [data-voice="crystal"] { --v: var(--v-crystal); }

/* ── the stage: on a phone, the heading and then the vault; wide, the
   vault edge to edge and the heading over it ── */

.ql-vault__stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.ql-vault__head { position: relative; z-index: 1; min-inline-size: 0; }
.ql-vault__head-in {
  display: grid;
  justify-items: start;
  row-gap: var(--ql-sp-7);
  padding-block-end: clamp(1.25rem, .5rem + 2.4vw, 2.5rem);
}
.ql-vault__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--ql-sp-4);
  margin: 0;
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-3xs);
  font-weight: var(--ql-fw-medium);
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ql-text-body);
}
.ql-vault__eyebrow .ql-quad { gap: 2px; }
.ql-vault__eyebrow .ql-quad i { background: var(--q); box-shadow: 0 0 6px -1px var(--q); }
.ql-vault__eyebrow .ql-quad i:nth-child(1) { --q: var(--ql-q-tl); }
.ql-vault__eyebrow .ql-quad i:nth-child(2) { --q: var(--ql-q-tr); }
.ql-vault__eyebrow .ql-quad i:nth-child(3) { --q: var(--ql-q-bl); }
.ql-vault__eyebrow .ql-quad i:nth-child(4) { --q: var(--ql-q-br); }
.ql-vault__title {
  margin: 0;
  font-size: clamp(2.25rem, .9rem + 4vw, 4.6rem);
  line-height: .98;
  font-weight: var(--ql-fw-bold);
  letter-spacing: -.044em;
  color: var(--ql-text-strong);
  text-wrap: balance;
}
.ql-vault__title span { display: block; }
/* the way in: the page's last word */
.ql-vault__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ql-sp-5);
}
/* under the stage: the lead, and whose keys */
.ql-vault__intro {
  display: grid;
  justify-items: center;
  row-gap: var(--ql-sp-6);
  margin: clamp(1.25rem, .6rem + 2vw, 2.25rem) auto 0;
  max-inline-size: 64rem;
  text-align: center;
}
.ql-vault__lead {
  margin: 0;
  max-inline-size: 52ch;
  font-size: clamp(1rem, .93rem + .28vw, 1.22rem);
  line-height: 1.6;
  color: var(--ql-text-muted);
  text-wrap: pretty;
}
/* whose keys: their lights' colours */
.ql-vault__voices {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ql-sp-3) var(--ql-sp-8);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ql-vault__voices li {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--ql-sp-3);
  padding-inline-start: 1.25rem;
  font-size: var(--ql-fs-sm);
  line-height: 1.45;
}
.ql-vault__voices li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .36em;
  inline-size: .7rem;
  block-size: .7rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, #fff 45%, var(--v)) 0 18%, var(--v) 48%, color-mix(in srgb, #000 35%, var(--v)) 100%);
  box-shadow: 0 0 10px -1px var(--v);
}
.ql-vault__who { font-weight: var(--ql-fw-semibold); color: var(--ql-text-strong); }
.ql-vault__does { color: var(--ql-text-muted); }

.ql-vault__view {
  position: relative;
  inline-size: 100%;
  aspect-ratio: 1 / 1;
  max-block-size: 88vh;
}
.ql-vault__gl {
  position: absolute;
  inset: 0;
  display: block;
  inline-size: 100%;
  block-size: 100%;
  opacity: 0;
  transition: opacity .9s var(--ql-ease-out);
  -webkit-tap-highlight-color: transparent;
}
.ql-vault.is-live-gl .ql-vault__gl { opacity: 1; }
.ql-vault__frame {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.ql-vault__flat {
  position: absolute;
  inset: 0;
  display: block;
}
.ql-vault__still {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: none;
  object-fit: cover;
}
.ql-vault.is-live-gl .ql-vault__flat { opacity: 0; transition: opacity .55s var(--ql-ease) .15s; }

/* while the drawing is prepared: the picture dimmed, a light passing over it */
.ql-vault__still { transition: filter .8s var(--ql-ease-out); }
.ql-vault.is-warming .ql-vault__still,
.ql-vault.is-live-gl .ql-vault__still { filter: brightness(.42) saturate(.5); }
.ql-vault__boot {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity .6s var(--ql-ease-out);
}
.ql-vault.is-warming .ql-vault__boot { opacity: 1; }
.ql-vault__sweep {
  position: absolute;
  inset: -20% -60%;
  background: linear-gradient(105deg, transparent 42%, rgb(255 255 255 / .06) 48%, rgb(255 255 255 / .12) 50%, rgb(255 255 255 / .06) 52%, transparent 58%);
  transform: translateX(-36%);
  animation: ql-vault-sweep 3.4s cubic-bezier(.45, 0, .25, 1) infinite;
}
@keyframes ql-vault-sweep { to { transform: translateX(36%); } }
.ql-vault__boot-label {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-end: 4%;
  transform: translateX(-50%);
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-3xs);
  font-weight: var(--ql-fw-medium);
  line-height: 1;
  letter-spacing: .22em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ql-text-muted);
  animation: ql-vault-label 1.8s ease-in-out infinite;
}
@keyframes ql-vault-label { 50% { opacity: .35; } }

/* the line under the stage: what the stage shows at this moment */
.ql-vault__now {
  margin: var(--ql-sp-5) auto 0;
  max-inline-size: 64rem;
  min-block-size: 3.2em;
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-2xs);
  line-height: 1.6;
  letter-spacing: .02em;
  color: var(--ql-text-body);
  text-align: center;
  text-wrap: balance;
}

/* ── the day in three chapters. Each item plays its moment on the stage
   again; the one at work is lit ── */

.ql-vault__chapters {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ql-sp-7) clamp(1rem, .4rem + 1.6vw, 2rem);
  margin-block-start: clamp(1.5rem, .8rem + 2vw, 2.75rem);
}
.ql-vault__chapter { display: grid; align-content: start; row-gap: var(--ql-sp-4); min-inline-size: 0; }
.ql-vault__when {
  display: flex;
  align-items: center;
  gap: var(--ql-sp-4);
  margin: 0;
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-3xs);
  font-weight: var(--ql-fw-medium);
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ql-text-body);
}
.ql-vault__when::after { content: ""; flex: 1; block-size: 1px; background: linear-gradient(90deg, var(--ql-line), transparent); }
.ql-vault__items {
  display: grid;
  gap: var(--ql-sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ql-vault__items li { display: flex; min-inline-size: 0; }
.ql-vault__item {
  position: relative;
  display: grid;
  align-content: start;
  row-gap: var(--ql-sp-2);
  inline-size: 100%;
  margin: 0;
  padding: var(--ql-sp-5) var(--ql-sp-6) var(--ql-sp-5) calc(var(--ql-sp-6) + .55rem);
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid var(--ql-line);
  border-radius: var(--ql-r-md);
  background: rgb(var(--ql-white-rgb) / .018);
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .4s var(--ql-ease-out), background-color .4s var(--ql-ease-out);
}
/* the item's thread: its voice's colour down its edge */
.ql-vault__item::before {
  content: "";
  position: absolute;
  inset-block: var(--ql-sp-5);
  inset-inline-start: var(--ql-sp-5);
  inline-size: 2px;
  border-radius: 2px;
  background: var(--v);
  opacity: .45;
  transition: opacity .45s var(--ql-ease-out), box-shadow .45s var(--ql-ease-out);
}
.ql-vault__item.is-on::before,
.ql-vault__item[aria-pressed="true"]::before { opacity: 1; box-shadow: 0 0 12px 0 var(--v); }
.ql-vault__item.is-on {
  border-color: color-mix(in srgb, var(--v) 34%, var(--ql-line));
  background: color-mix(in srgb, var(--v) 6%, rgb(var(--ql-white-rgb) / .018));
}
.ql-vault__item[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--v) 62%, transparent);
  background: color-mix(in srgb, var(--v) 9%, rgb(var(--ql-white-rgb) / .018));
}
.ql-vault__item:focus-visible { outline: none; box-shadow: var(--ql-ring); }
@media (hover: hover) and (pointer: fine) {
  .ql-vault__item:hover { border-color: color-mix(in srgb, var(--v) 34%, var(--ql-line)); }
}
.ql-vault__name {
  font-size: var(--ql-fs-md);
  font-weight: var(--ql-fw-semibold);
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--ql-text-strong);
}
.ql-vault__line {
  font-size: var(--ql-fs-sm);
  line-height: 1.55;
  color: var(--ql-text-muted);
  text-wrap: pretty;
}
@media (scripting: none) {
  .ql-vault__item { cursor: default; }
}

/* the rest of what keeps it, and the note */
.ql-vault__more {
  margin: var(--ql-sp-8) auto 0;
  max-inline-size: 64rem;
}
.ql-vault__more-title {
  margin: 0 0 var(--ql-sp-4);
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-3xs);
  font-weight: var(--ql-fw-medium);
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ql-text-body);
}
.ql-vault__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ql-sp-3) var(--ql-sp-8);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ql-vault__list li {
  position: relative;
  padding-inline-start: 1.1rem;
  font-size: var(--ql-fs-sm);
  line-height: 1.55;
  color: var(--ql-text-muted);
}
.ql-vault__list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .62em;
  inline-size: 5px;
  block-size: 5px;
  border-radius: 50%;
  background: var(--v-gold);
  box-shadow: 0 0 6px -1px var(--v-gold);
}
.ql-vault__list a {
  color: var(--ql-text-body);
  text-decoration: underline;
  text-decoration-color: rgb(var(--ql-white-rgb) / .3);
  text-underline-offset: .2em;
}
@media (hover: hover) and (pointer: fine) {
  .ql-vault__list a:hover { color: var(--ql-text-strong); text-decoration-color: currentColor; }
}
.ql-vault__list a:focus-visible { outline: none; border-radius: 2px; box-shadow: var(--ql-ring); }
.ql-vault__note {
  margin: var(--ql-sp-5) 0 0;
  font-size: var(--ql-fs-2xs);
  line-height: 1.5;
  color: var(--ql-text-muted);
}

@media (min-width: 720px) {
  .ql-vault__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── wide screens: the stage edge to edge, the heading and the way in over
   the dark at its top left (a shade behind them), the three chapters side
   by side under it ── */

@media (min-width: 1024px) {
  .ql-vault { padding-block-start: 0; }
  .ql-vault__head,
  .ql-vault__view { grid-area: 1 / 1; }
  .ql-vault__head { align-self: start; pointer-events: none; }
  .ql-vault__row { pointer-events: auto; }
  .ql-vault__head-in { padding-block: clamp(2.5rem, 1rem + 3vw, 4.5rem) 0; row-gap: var(--ql-sp-6); }
  .ql-vault__title { font-size: clamp(2.6rem, 1rem + 3.2vw, 4.4rem); }
  .ql-vault__view { aspect-ratio: 1600 / 720; max-block-size: 92vh; }
  .ql-vault__view::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 54% 70% at 14% 0%, rgb(5 5 5 / .62), rgb(5 5 5 / .28) 52%, transparent 80%);
  }
  .ql-vault__chapters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .ql-vault__sweep { display: none; }
  .ql-vault__boot-label { animation: none; }
  .ql-vault__item, .ql-vault__item::before { transition: none; }
}