/* Voice Level Chart. The level color --vl is registered so it can fade
   from one level to the next; everything else is sized in container units. */

@property --vl {
  syntax: '<color>';
  inherits: true;
  initial-value: #4263eb;
}

.vl {
  --vl: #4263eb;
  --ctl-h: calc(clamp(36px, 8.4cqmin, 84px) + 2 * clamp(8px, 2.6cqmin, 28px));
  overflow: hidden;
  transition: --vl .45s ease;
}
.vl [hidden] { display: none !important; }

.vl-layout {
  position: absolute; inset: 0 0 var(--ctl-h); display: flex; align-items: stretch;
  gap: clamp(10px, 3cqmin, 40px); padding: clamp(10px, 3.4cqmin, 40px) clamp(12px, 4cqmin, 48px) 0;
}
.vl-main { position: relative; flex: 1 1 auto; min-width: 0; display: grid; place-items: center; }

/* ---- one big level ---- */
.vl-big {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "disc head" "disc name" "disc desc";
  align-content: center; align-items: center; column-gap: clamp(14px, 5cqmin, 70px); row-gap: .6cqmin;
  max-width: 100%;
}
.vl[data-mode="ladder"] .vl-big { display: none; }
.vl-disc {
  grid-area: disc; position: relative; width: min(60cqh, 38cqw); aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center;
  background: radial-gradient(circle at 34% 28%, color-mix(in srgb, var(--vl) 68%, #fff), var(--vl) 58%, color-mix(in srgb, var(--vl) 78%, #000));
  box-shadow: 0 1.6cqmin 4.6cqmin color-mix(in srgb, var(--vl) 38%, transparent), inset 0 -1cqmin 2.4cqmin rgba(0, 0, 0, .14);
}
.vl-disc .vl-art { width: 88%; height: 88%; }
.vl.has-work .vl-disc { width: min(54cqh, 26cqw); }
.vl-head { grid-area: head; display: flex; flex-direction: column; align-items: flex-start; align-self: end; }
.vl-cap {
  font: 650 clamp(11px, 2.8cqmin, 34px)/1.2 var(--font-display); letter-spacing: .08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--stage-ink) 55%, transparent);
}
.vl-num { font: 700 clamp(44px, 27cqmin, 560px)/.92 var(--font-display); color: var(--vl); letter-spacing: -.03em; }
.vl-name { grid-area: name; font: 700 clamp(20px, 8.4cqmin, 170px)/1.05 var(--font-display); letter-spacing: -.015em; overflow-wrap: anywhere; }
.vl-desc { grid-area: desc; align-self: start; font-size: clamp(13px, 3.8cqmin, 64px); line-height: 1.3; color: color-mix(in srgb, var(--stage-ink) 68%, transparent); max-width: 22em; }
.vl.has-work .vl-num { font-size: clamp(40px, 22cqmin, 460px); }
.vl.has-work .vl-name { font-size: clamp(18px, 6.6cqmin, 140px); }

.vl-anim-up .vl-art, .vl-anim-up .vl-num { animation: vl-up .5s cubic-bezier(.2, .9, .3, 1.15); }
.vl-anim-down .vl-art, .vl-anim-down .vl-num { animation: vl-down .5s cubic-bezier(.2, .9, .3, 1.15); }
.vl-anim-up .vl-name, .vl-anim-up .vl-desc, .vl-anim-down .vl-name, .vl-anim-down .vl-desc { animation: vl-fade .4s ease-out; }
@keyframes vl-up { from { transform: translateY(18%) scale(.88); opacity: 0; } }
@keyframes vl-down { from { transform: translateY(-18%) scale(.88); opacity: 0; } }
@keyframes vl-fade { from { opacity: 0; transform: translateX(-.3em); } }

/* Square-ish or tall space: everything stacks and centers. */
@container (max-aspect-ratio: 6/5) {
  .vl-big { grid-template-columns: auto auto; grid-template-areas: "disc head" "name name" "desc desc"; justify-content: center; text-align: center; column-gap: 4cqmin; }
  .vl-disc, .vl.has-work .vl-disc { width: min(36cqh, 46cqw); }
  .vl-head { align-self: center; }
  .vl-num, .vl.has-work .vl-num { font-size: clamp(40px, 24cqmin, 400px); }
  .vl-name, .vl.has-work .vl-name { font-size: clamp(18px, 8cqmin, 120px); margin-top: 1.5cqmin; }
  .vl-desc { justify-self: center; }
}

/* ---- ladder ---- */
.vl-ladder { position: absolute; inset: 0; display: none; flex-direction: column; gap: clamp(4px, 1.1cqmin, 14px); }
.vl[data-mode="ladder"] .vl-ladder { display: flex; }
.vl-row {
  --c: #4263eb;
  flex: 1 1 0; min-height: 0; display: flex; align-items: center; gap: clamp(8px, 2.4cqmin, 30px);
  padding: 0 clamp(8px, 2.6cqmin, 34px); margin: 0; border: 0; border-radius: clamp(10px, 2.2cqmin, 26px);
  background: color-mix(in srgb, var(--c) 12%, var(--stage-bg)); color: var(--stage-ink); text-align: left; cursor: pointer;
  opacity: .8; overflow: hidden;
  transition: flex-grow .45s cubic-bezier(.3, .9, .3, 1), background .35s, box-shadow .35s, opacity .35s, color .35s;
}
.vl-row:hover { opacity: 1; background: color-mix(in srgb, var(--c) 20%, var(--stage-bg)); }
.vl-row.is-on { flex-grow: 2.6; opacity: 1; background: var(--c); color: #fff; box-shadow: 0 .8cqmin 2.6cqmin color-mix(in srgb, var(--c) 40%, transparent); }
.vl-row-num {
  flex: none; display: grid; place-items: center; width: clamp(24px, 7cqh, 84px); aspect-ratio: 1; border-radius: 50%;
  background: var(--c); color: #fff; font: 700 clamp(13px, 4.2cqh, 50px)/1 var(--font-display);
  transition: width .45s, font-size .45s, background .35s, color .35s;
}
.vl-row.is-on .vl-row-num { width: clamp(30px, 12cqh, 150px); font-size: clamp(16px, 7.4cqh, 96px); background: #fff; color: var(--c); }
.vl-row-art {
  flex: none; display: grid; place-items: center; width: clamp(24px, 7cqh, 84px); aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  background: var(--c); transition: width .45s, box-shadow .35s;
}
.vl-row-art .vl-art { width: 90%; height: 90%; }
.vl-row.is-on .vl-row-art { width: clamp(34px, 15cqh, 190px); box-shadow: 0 0 0 clamp(2px, .5cqmin, 6px) rgba(255, 255, 255, .85); }
.vl-row-text { display: flex; flex-direction: column; min-width: 0; }
.vl-row-text b { font: 650 clamp(12px, 4cqh, 52px)/1.1 var(--font-display); transition: font-size .45s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vl-row-text small { display: none; font-size: clamp(11px, 3cqh, 40px); line-height: 1.25; opacity: .92; }
.vl-row.is-on .vl-row-text b { font-size: clamp(16px, 7cqh, 96px); font-weight: 700; white-space: normal; }
.vl-row.is-on .vl-row-text small { display: block; }

/* ---- how we work ---- */
.vl-work {
  flex: 0 0 auto; align-self: center; width: clamp(120px, 26cqw, 520px);
  display: flex; flex-direction: column; align-items: center; gap: clamp(4px, 1.2cqmin, 16px);
  padding: clamp(10px, 2.6cqmin, 34px); margin: 0; border-radius: clamp(14px, 3cqmin, 36px);
  border: 2px solid color-mix(in srgb, var(--cat) 30%, var(--line)); background: color-mix(in srgb, var(--cat) 6%, var(--stage-bg));
  color: var(--stage-ink); cursor: pointer; text-align: center; transition: background .15s, transform .1s;
}
.vl-work:hover { background: color-mix(in srgb, var(--cat) 12%, var(--stage-bg)); }
.vl-work:active { transform: translateY(1px); }
.vl-work-cap { font: 650 clamp(10px, 2.4cqmin, 30px)/1.2 var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--stage-ink) 55%, transparent); }
.vl-work-box { width: min(100%, 34cqh); aspect-ratio: 1; }
.vl-work-art { width: 100%; height: 100%; display: block; }
.vl-work-label { font: 700 clamp(14px, 4.6cqmin, 90px)/1.1 var(--font-display); }
@container (max-aspect-ratio: 6/5) {
  .vl-layout { flex-direction: column; }
  .vl-work { flex-direction: row; width: auto; align-self: center; padding: clamp(6px, 1.6cqmin, 20px) clamp(12px, 3cqmin, 36px); text-align: left; }
  .vl-work-box { width: clamp(36px, 13cqh, 160px); }
  .vl-work-cap { display: none; }
  .vl-work-label { font-size: clamp(14px, 4.6cqmin, 70px); }
}

/* ---- illustrations ---- */
.vl-art { display: block; overflow: visible; }
.vi-fill { fill: #fff; stroke: #1d2733; stroke-width: 3.5; stroke-linejoin: round; }
.vi-line { fill: none; stroke: #1d2733; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.vi-thick { stroke-width: 4.5; }
.vi-thin { stroke-width: 2.6; }
.vi-ink { fill: #1d2733; stroke: none; }
.vi-accent { fill: #ffd43b; stroke: #1d2733; stroke-width: 3; stroke-linejoin: round; }
.vi-cheek { fill: #ff8fa3; opacity: .7; }
.vi-wave { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; opacity: .92; }
.vi-wave-big { stroke-width: 5.5; }

.vw-p { fill: color-mix(in srgb, var(--stage-ink) 7%, var(--stage-bg)); stroke: var(--stage-ink); stroke-width: 4; stroke-linejoin: round; }
.vw-l { fill: none; stroke: var(--stage-ink); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.vw-t { fill: color-mix(in srgb, var(--cat) 22%, var(--stage-bg)); stroke: var(--cat); stroke-width: 4; }
.vw-q { stroke: var(--cat); stroke-width: 5; }

/* ---- controls ---- */
.vl-pills { display: flex; align-items: center; gap: clamp(4px, 1.2cqmin, 14px); }
.vl-pill {
  --c: #4263eb;
  display: grid; place-items: center; width: clamp(34px, 7.4cqmin, 76px); aspect-ratio: 1; padding: 0; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--c) 45%, transparent); background: color-mix(in srgb, var(--c) 12%, var(--stage-bg));
  color: var(--stage-ink); font: 700 clamp(13px, 3.2cqmin, 32px)/1 var(--font-display); cursor: pointer;
  transition: transform .2s, background .25s, color .25s, box-shadow .25s;
}
.vl-pill:hover { background: color-mix(in srgb, var(--c) 22%, var(--stage-bg)); }
.vl-pill.is-on { background: var(--c); color: #fff; border-color: transparent; transform: scale(1.14); box-shadow: 0 .5cqmin 1.6cqmin color-mix(in srgb, var(--c) 45%, transparent); }
.vl[data-mode="ladder"] .vl-pills { display: none; }
@container (max-width: 400px) { .vl-pills { display: none; } }
@container (max-height: 300px) { .vl-desc, .vl-cap { display: none; } }

/* ---- settings ---- */
.vl-word { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; align-items: start; margin-bottom: 12px; }
.vl-word:last-child { margin-bottom: 0; }
.vl-word > div { display: grid; gap: 4px; }
.vl-word input + input { font-size: .86rem; min-height: 34px; }
.vl-word-num { display: grid; place-items: center; width: 28px; height: 28px; margin-top: 6px; border-radius: 50%; background: var(--c); color: #fff; font-weight: 700; font-size: .9rem; }