/*
 * TRIP Limiter's face on its model (TripFace.tsx): the 1.0.4 editor, 1040
 * by 480 of its points, every measure and colour its own (PluginEditor.cpp:
 * Theme, Content, Knob, Display, WorkflowFooter). --u is one of its points
 * at the size the model has; on the slab, Z lifts what stands off the face.
 *
 * Every rule is scoped to .model .model-trip, so the ACID face keeps its own
 * finish, and nothing here is a style attribute: the web site uses this file
 * as it is (central/scripts/trip-site.mjs copies it there). Only opacity and
 * transform ever ease, and hover is for a pointer that can hover.
 */

.model .model-trip {
  --trip-cream: #e8e9ee;
  --trip-dim: #a9acb8;
  --trip-faint: #989ba8;
  --trip-caption: #bec1ca;
  --trip-button-text: #adb0bc;
  --trip-cyan: #6ce9e3;
  --trip-control: #221d2c;
  --trip-rest: #292433;
  --trip-hover: #2e283c;
  --trip-pressed: #382f45;

  /* The whole face, on either host: Central's .model-instrument says the same; the web site has no such rule. */
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transform-style: preserve-3d;
  background: #0a0714;
  color: var(--trip-cream);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', sans-serif;
  font-size: calc(11 * var(--u));
  font-variant-numeric: tabular-nums;
  line-height: 1;
  /* The editor's text is drawn by the Mac with its own smoothing, a little fuller than the window's. */
  -webkit-font-smoothing: auto;
}

/* ---- The stage: the liquid and the logo, fading out towards the instrument ---- */

.model .model-trip .model-art {
  width: calc(320 * var(--u));
}

/* The still light (trip-liquid.ts's TRIP_STILL), until the liquid's first picture and wherever it cannot be drawn. */
.model .model-trip .model-marble {
  background:
    radial-gradient(circle calc(250 * var(--u)) at 31.9% 80%, rgb(133 44 250 / 0.62), transparent),
    radial-gradient(circle calc(210 * var(--u)) at 81.9% 22.9%, rgb(255 82 194 / 0.42), transparent),
    radial-gradient(circle calc(190 * var(--u)) at 15% 31.3%, rgb(83 224 223 / 0.36), transparent),
    radial-gradient(circle calc(150 * var(--u)) at 65.6% 62.5%, rgb(166 247 66 / 0.26), transparent),
    #190d40;
  /* Out from 240 to 308 of its 320 points, eased as the editor eases it. */
  -webkit-mask-image: linear-gradient(90deg, #000 75%, rgb(0 0 0 / 0.844) 79.25%, rgb(0 0 0 / 0.5) 85.6%, rgb(0 0 0 / 0.156) 91.9%, transparent 96.25%);
  mask-image: linear-gradient(90deg, #000 75%, rgb(0 0 0 / 0.844) 79.25%, rgb(0 0 0 / 0.5) 85.6%, rgb(0 0 0 / 0.156) 91.9%, transparent 96.25%);
}

.model .model-trip .model-logo {
  top: calc(24 * var(--u));
  left: calc(24 * var(--u));
}

/*
 * The room behind the instrument: the surface with the liquid in it, faint
 * and still (trip-tap.ts keeps one picture of it in canvas.trip-material;
 * until then, and on a passive tile, soft light in its colours), its edge
 * fading into the stage.
 */
.model .model-trip .trip-room {
  position: absolute;
  top: 0;
  left: calc(320 * var(--u));
  width: calc(720 * var(--u));
  height: 100%;
  overflow: hidden;
  border-radius: 0 calc(20 * var(--u)) calc(20 * var(--u)) 0;
  background:
    radial-gradient(60% 46% at 30% 30%, rgb(133 44 250 / 0.07), transparent),
    radial-gradient(48% 40% at 74% 64%, rgb(255 82 194 / 0.045), transparent),
    radial-gradient(50% 44% at 52% 86%, rgb(83 224 223 / 0.035), transparent),
    radial-gradient(44% 36% at 92% 12%, rgb(156 90 255 / 0.05), transparent);
  pointer-events: none;
}

.model .model-trip[data-tap='on'] .trip-room {
  background: none;
}

.model .model-trip .trip-room::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #0a0714, rgb(10 7 20 / 0) calc(56 * var(--u)));
}

.model .model-trip .trip-material {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0.06;
}

/* The gradients and clips every capsule shares: there to be referred to, never drawn. */
.model .model-trip .trip-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* The liquid cut into the controls (trip-tap.ts): over the instrument, between each capsule's two layers. */
.model .model-trip .trip-tap {
  position: absolute;
  top: 0;
  left: calc(320 * var(--u));
  width: calc(720 * var(--u));
  height: 100%;
  transform: translateZ(calc(0.9 * var(--u)));
  pointer-events: none;
}

.model .model-trip .trip-help {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- The six dials ---- */

.model .model-trip .trip-title {
  position: absolute;
  width: calc(92 * var(--u));
  height: calc(16 * var(--u));
  color: var(--trip-caption);
  font-size: calc(10 * var(--u));
  font-weight: 500;
  line-height: calc(16 * var(--u));
  text-align: center;
  white-space: nowrap;
}

.model .model-trip .trip-title-input,
.model .model-trip .trip-title-clip {
  left: calc(346 * var(--u));
}

.model .model-trip .trip-title-ceiling,
.model .model-trip .trip-title-trip {
  left: calc(458 * var(--u));
}

.model .model-trip .trip-title-output,
.model .model-trip .trip-title-link {
  left: calc(570 * var(--u));
}

.model .model-trip :is(.trip-title-input, .trip-title-ceiling, .trip-title-output) {
  top: calc(46 * var(--u));
}

.model .model-trip :is(.trip-title-clip, .trip-title-trip, .trip-title-link) {
  top: calc(222 * var(--u));
}

/* A dial: the editor's component, which takes the pointer; the capsule in two layers inside it. */
.model .model-trip .trip-knob {
  position: absolute;
  width: calc(92 * var(--u));
  height: calc(95 * var(--u));
  outline: none;
  transform-style: preserve-3d;
}

.model .model-trip .trip-knob::before {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateZ(calc(1.3 * var(--u)));
}

.model .model-trip .trip-knob-input,
.model .model-trip .trip-knob-clip {
  left: calc(346 * var(--u));
}

.model .model-trip .trip-knob-ceiling {
  left: calc(454 * var(--u));
  width: calc(100 * var(--u));
}

.model .model-trip .trip-knob-trip {
  left: calc(458 * var(--u));
}

.model .model-trip .trip-knob-output,
.model .model-trip .trip-knob-link {
  left: calc(570 * var(--u));
}

.model .model-trip :is(.trip-knob-input, .trip-knob-ceiling, .trip-knob-output) {
  top: calc(74 * var(--u));
}

.model .model-trip :is(.trip-knob-clip, .trip-knob-trip, .trip-knob-link) {
  top: calc(250 * var(--u));
}

/* 88 points square about the dial's centre: under the liquid, the ring and the capsule's body; over it, its light and pointer. */
.model .model-trip :is(.trip-pill-under, .trip-pill-over) {
  position: absolute;
  top: calc(-6 * var(--u));
  left: calc(2 * var(--u));
  width: calc(88 * var(--u));
  height: calc(88 * var(--u));
  overflow: visible;
  pointer-events: none;
}

.model .model-trip .trip-knob-ceiling :is(.trip-pill-under, .trip-pill-over) {
  left: calc(6 * var(--u));
}

.model .model-trip .trip-pill-under {
  transform: translateZ(calc(0.5 * var(--u)));
}

.model .model-trip .trip-pill-over {
  transform: translateZ(calc(1.2 * var(--u)));
}

.model .model-trip :is(.trip-ring, .trip-ring-lit) {
  fill: none;
  stroke-width: 3.5;
  stroke-linecap: round;
}

.model .model-trip .trip-ring {
  stroke: #484e5a;
}

.model .model-trip .trip-ring-lit {
  stroke: var(--trip-cream);
  opacity: 0;
  transition: opacity 110ms ease-out;
}

.model .model-trip .trip-tick {
  fill: none;
  stroke: rgb(232 233 238 / 0.4);
  stroke-width: 1;
}

/* The value's arc in flat cyan, where the liquid is not cut into it. */
.model .model-trip .trip-arc {
  fill: none;
  stroke: var(--trip-cyan);
  stroke-width: 3.5;
}

.model .model-trip .trip-arc-end {
  fill: var(--trip-cyan);
}

.model .model-trip[data-tap='on'] :is(.trip-arc, .trip-arc-end, .trip-rail-fill) {
  visibility: hidden;
}

.model .model-trip .trip-shadow {
  fill: #000;
}

.model .model-trip .trip-underside {
  fill: #18202d;
}

.model .model-trip :is(.trip-pearl, .trip-caustic, .trip-imprint, .trip-imprint-light, .trip-reflection, .trip-glint, .trip-seam, .trip-lip, .trip-outline, .trip-pointer) {
  fill: none;
  stroke-linecap: round;
}

.model .model-trip .trip-pearl {
  stroke-width: 0.85;
}

.model .model-trip .trip-caustic {
  stroke-width: 1.1;
}

.model .model-trip .trip-imprint {
  stroke: rgb(94 101 112 / 0.2);
  stroke-width: 0.8;
}

.model .model-trip .trip-imprint-light {
  stroke: rgb(255 255 255 / 0.6);
  stroke-width: 0.65;
}

.model .model-trip .trip-reflection {
  stroke-width: 3.5;
}

.model .model-trip .trip-veil {
  fill: rgb(181 138 255 / 0.18);
}

.model .model-trip .trip-glint {
  stroke: rgb(255 255 255 / 0.2);
  stroke-width: 0.8;
}

.model .model-trip .trip-seam {
  stroke: rgb(37 27 61 / 0.88);
  stroke-width: 1.15;
}

.model .model-trip .trip-lip {
  stroke: rgb(255 255 255 / 0.32);
  stroke-width: 0.6;
}

.model .model-trip .trip-outline {
  stroke-width: 0.9;
}

.model .model-trip .trip-face-lit {
  fill: #fff;
  opacity: 0;
  transition: opacity 110ms ease-out;
}

.model .model-trip .trip-face-focus {
  fill: none;
  stroke: rgb(108 233 227 / 0.82);
  stroke-width: 1.2;
  opacity: 0;
}

.model .model-trip .trip-pointer {
  stroke: var(--trip-cream);
  stroke-width: 2;
}

/* Under the pointer the capsule catches a little more light and the ring lights faintly; held, more of both. */
@media (hover: hover) {
  .model[data-interactive='true'] .model-trip .trip-knob:hover .trip-face-lit {
    opacity: 0.03;
  }

  .model[data-interactive='true'] .model-trip .trip-knob:hover .trip-ring-lit {
    opacity: 0.16;
  }
}

.model .model-trip .trip-knob[data-held='true'] .trip-face-lit {
  opacity: 0.055;
}

.model .model-trip .trip-knob[data-held='true'] .trip-ring-lit {
  opacity: 0.36;
}

.model .model-trip .trip-knob:focus-visible .trip-face-focus {
  opacity: 1;
}

/* A dial's value under it: the number in the cream, its unit a step dimmer, three points apart. */
.model .model-trip .trip-reading {
  position: absolute;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: calc(3 * var(--u));
  width: calc(112 * var(--u));
  height: calc(16 * var(--u));
  color: var(--trip-dim);
  font-size: calc(10 * var(--u));
  line-height: calc(16 * var(--u));
  white-space: nowrap;
  transform: translateZ(calc(1.4 * var(--u)));
  transform-style: preserve-3d;
  pointer-events: none;
}

.model .model-trip .trip-reading b {
  color: var(--trip-cream);
  font-size: calc(12 * var(--u));
  font-weight: 500;
}

.model .model-trip .trip-reading-input,
.model .model-trip .trip-reading-clip {
  left: calc(336 * var(--u));
}

.model .model-trip .trip-reading-ceiling,
.model .model-trip .trip-reading-trip {
  left: calc(448 * var(--u));
}

.model .model-trip .trip-reading-output,
.model .model-trip .trip-reading-link {
  left: calc(560 * var(--u));
}

.model .model-trip :is(.trip-reading-input, .trip-reading-ceiling, .trip-reading-output) {
  top: calc(152 * var(--u));
}

.model .model-trip :is(.trip-reading-clip, .trip-reading-trip, .trip-reading-link) {
  top: calc(328 * var(--u));
}

/* The Ceiling's unit is a switch: dBTP or dBFS. A soft pill lights behind it under the pointer. */
.model .model-trip .trip-unit {
  position: relative;
  outline: none;
  pointer-events: auto;
}

.model .model-trip .trip-unit::before {
  content: '';
  position: absolute;
  top: 50%;
  left: calc(-2 * var(--u));
  right: calc(-2.5 * var(--u));
  height: calc(13 * var(--u));
  margin-top: calc(-6.5 * var(--u));
  border-radius: calc(6.5 * var(--u));
  background: rgb(232 233 238 / 0.07);
  opacity: 0;
  transition: opacity 110ms ease-out;
}

/* The finger's target: larger than the word, never over the dial's capsule. */
.model .model-trip .trip-unit::after {
  content: '';
  position: absolute;
  inset: calc(-4 * var(--u)) calc(-6 * var(--u));
}

.model[data-interactive='true'] .model-trip .trip-unit {
  cursor: pointer;
  touch-action: manipulation;
}

@media (hover: hover) {
  .model[data-interactive='true'] .model-trip .trip-unit:hover {
    color: #ccced6;
  }

  .model[data-interactive='true'] .model-trip .trip-unit:hover::before {
    opacity: 0.7;
  }
}

.model .model-trip .trip-unit[data-pressed='true'] {
  color: #dbdce3;
}

.model .model-trip .trip-unit[data-pressed='true']::before {
  opacity: 1;
}

.model .model-trip .trip-unit:focus-visible {
  text-decoration: underline max(1px, var(--u)) rgb(108 233 227 / 0.75);
  text-underline-offset: calc(3 * var(--u));
}

/* ---- The edges the editor draws in its three acid colours ---- */

.model .model-trip :is(.trip-display, .trip-loudness, .trip-slider, .trip-dock, .trip-preset)::after,
.model .model-trip .trip-bank[data-on='true']::after {
  content: '';
  position: absolute;
  inset: 0;
  padding: calc(0.8 * var(--u));
  border-radius: inherit;
  background: linear-gradient(to bottom right, rgb(108 233 227 / var(--rim)), rgb(181 138 255 / calc(0.9 * var(--rim))) 50%, rgb(255 112 208 / calc(0.82 * var(--rim))));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}

/* ---- The meters: GR, In and Out, and the loudness box ---- */

.model .model-trip .trip-display {
  --rim: 0.29;

  position: absolute;
  top: calc(16 * var(--u));
  left: calc(704 * var(--u));
  width: calc(304 * var(--u));
  height: calc(368 * var(--u));
  border-radius: calc(20 * var(--u));
  background: #211c2a;
  transform-style: preserve-3d;
}

.model .model-trip .trip-meters {
  position: absolute;
  inset: 0;
}

.model .model-trip .trip-heading {
  position: absolute;
  top: calc(10 * var(--u));
  width: calc(40 * var(--u));
  height: calc(16 * var(--u));
  color: var(--trip-dim);
  font-size: calc(11 * var(--u));
  font-weight: 500;
  line-height: calc(16 * var(--u));
  text-align: center;
}

.model .model-trip .trip-heading-gr {
  left: calc(10 * var(--u));
}

.model .model-trip .trip-heading-in {
  left: calc(110 * var(--u));
}

.model .model-trip .trip-heading-out {
  left: calc(210 * var(--u));
}

.model .model-trip .trip-lane {
  --level: 0;
  --hold: -1;

  position: absolute;
  top: calc(36 * var(--u));
  width: calc(18 * var(--u));
  height: calc(224 * var(--u));
  overflow: hidden;
  border-radius: calc(9 * var(--u));
  background: #100d18;
}

.model .model-trip .trip-lane-gr {
  left: calc(17 * var(--u));
  width: calc(26 * var(--u));
  border-radius: calc(13 * var(--u));
}

.model .model-trip .trip-lane-in-l {
  left: calc(111 * var(--u));
}

.model .model-trip .trip-lane-in-r {
  left: calc(131 * var(--u));
}

.model .model-trip .trip-lane-out-l {
  left: calc(211 * var(--u));
}

.model .model-trip .trip-lane-out-r {
  left: calc(231 * var(--u));
}

/* The level in flat violet and its peak line, where the liquid is not cut into the lane. Reduction fills down from the top. */
.model .model-trip :is(.trip-lane-fill, .trip-lane-hold) {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

.model .model-trip .trip-lane-fill {
  height: 100%;
  border-radius: calc(3 * var(--u));
  background: #b58aff;
  transform: scaleY(var(--level));
  transform-origin: bottom;
}

.model .model-trip .trip-lane-hold {
  height: max(1px, calc(0.5 * var(--u)));
  background: var(--trip-cream);
  opacity: clamp(0, calc(var(--hold) * 1000), 1);
  transform: translateY(calc(var(--hold) * -224 * var(--u)));
}

.model .model-trip .trip-lane-gr :is(.trip-lane-fill, .trip-lane-hold) {
  top: 0;
  bottom: auto;
}

.model .model-trip .trip-lane-gr .trip-lane-fill {
  transform-origin: top;
}

.model .model-trip .trip-lane-gr .trip-lane-hold {
  transform: translateY(calc(var(--hold) * 224 * var(--u)));
}

.model .model-trip[data-tap='on'] :is(.trip-lane-fill, .trip-lane-hold) {
  visibility: hidden;
}

/* A scale's six marks stand on the lane's top, its bottom, and four lines between. */
.model .model-trip .trip-scale {
  position: absolute;
  top: calc(36 * var(--u));
  height: calc(224 * var(--u));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: rgb(152 155 168 / 0.8);
  font-size: calc(10 * var(--u));
}

.model .model-trip .trip-scale span {
  display: flex;
  align-items: center;
  height: 0;
  white-space: nowrap;
}

.model .model-trip .trip-scale-gr {
  left: calc(56 * var(--u));
}

.model .model-trip .trip-scale-in {
  left: calc(160 * var(--u));
}

.model .model-trip .trip-scale-out {
  left: calc(260 * var(--u));
}

.model .model-trip .trip-readout {
  position: absolute;
  top: calc(270 * var(--u));
  width: calc(60 * var(--u));
  height: calc(16 * var(--u));
  color: var(--trip-cream);
  font-size: calc(12 * var(--u));
  font-weight: 500;
  line-height: calc(16 * var(--u));
  text-align: center;
}

.model .model-trip .trip-readout-gr {
  left: 0;
}

.model .model-trip .trip-readout-in {
  left: calc(100 * var(--u));
}

.model .model-trip .trip-readout-out {
  left: calc(200 * var(--u));
}

.model .model-trip :is(.trip-readout, .trip-lufs, .trip-peak)[data-absent='true'] {
  color: var(--trip-faint);
}

.model .model-trip .trip-loudness {
  position: absolute;
  top: calc(296 * var(--u));
  left: calc(16 * var(--u));
  width: calc(272 * var(--u));
  height: calc(60 * var(--u));
  border-radius: calc(12 * var(--u));
  background: #1d1925;
  transform-style: preserve-3d;
}

.model .model-trip .trip-loudness::after {
  padding: calc(0.7 * var(--u));
  background: linear-gradient(to bottom right, rgb(108 233 227 / 0.15), rgb(181 138 255 / 0.23) 54%, rgb(255 112 208 / 0.12));
}

/* "Short-term" or "Integrated", with its chevron: the view of the first row. */
.model .model-trip .trip-view {
  position: absolute;
  top: calc(2 * var(--u));
  left: calc(16 * var(--u));
  width: calc(100 * var(--u));
  height: calc(28 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(5 * var(--u));
  color: var(--trip-dim);
  font-size: calc(10 * var(--u));
  outline: none;
}

.model .model-trip .trip-view-chevron {
  width: calc(8 * var(--u));
  height: calc(5 * var(--u));
  margin-top: calc(1 * var(--u));
  overflow: visible;
}

.model .model-trip .trip-view-chevron path {
  fill: none;
  stroke: var(--trip-faint);
  stroke-width: 1.2;
}

.model[data-interactive='true'] .model-trip .trip-view {
  cursor: pointer;
  touch-action: manipulation;
}

@media (hover: hover) {
  .model[data-interactive='true'] .model-trip .trip-view:hover {
    color: #c8cad3;
  }

  .model[data-interactive='true'] .model-trip .trip-view:hover path {
    stroke: var(--trip-dim);
  }
}

.model .model-trip .trip-view[data-pressed='true'] {
  color: #dbdce3;
}

/* Keyboard focus: one cyan line under the words and the chevron, three points above the view's foot, as the editor draws it. */
.model .model-trip .trip-view [data-trip-loudness-caption] {
  position: relative;
}

.model .model-trip .trip-view:focus-visible [data-trip-loudness-caption]::after {
  content: '';
  position: absolute;
  top: calc(16 * var(--u));
  right: calc(-12 * var(--u));
  left: 0;
  height: max(1px, calc(1 * var(--u)));
  border-radius: calc(0.5 * var(--u));
  background: rgb(108 233 227 / 0.75);
}

.model .model-trip .trip-figures {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.model .model-trip :is(.trip-lufs, .trip-peak) {
  position: absolute;
  right: calc(54 * var(--u));
  height: calc(16 * var(--u));
  color: var(--trip-cream);
  font-size: calc(12 * var(--u));
  font-weight: 500;
  line-height: calc(16 * var(--u));
  white-space: nowrap;
}

.model .model-trip :is(.trip-lufs-unit, .trip-peak-unit, .trip-peak-caption) {
  position: absolute;
  height: calc(16 * var(--u));
  color: var(--trip-dim);
  font-size: calc(10 * var(--u));
  line-height: calc(16 * var(--u));
  white-space: nowrap;
}

.model .model-trip :is(.trip-lufs-unit, .trip-peak-unit) {
  left: calc(226 * var(--u));
}

.model .model-trip :is(.trip-lufs, .trip-lufs-unit) {
  top: calc(8 * var(--u));
}

.model .model-trip :is(.trip-peak, .trip-peak-unit, .trip-peak-caption) {
  top: calc(35.5 * var(--u));
}

.model .model-trip .trip-peak-caption {
  left: calc(16 * var(--u));
}

/* ---- 808 Protect and Punch ---- */

.model .model-trip .trip-slider {
  --at: 0.5;
  --rim: 0.15;

  position: absolute;
  top: calc(396 * var(--u));
  width: calc(164 * var(--u));
  height: calc(64 * var(--u));
  border-radius: calc(12 * var(--u));
  background: var(--trip-control);
  outline: none;
  transform-style: preserve-3d;
}

.model .model-trip .trip-slider::before {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateZ(calc(1.3 * var(--u)));
}

.model .model-trip .trip-slider-bass-protect {
  left: calc(352 * var(--u));
}

.model .model-trip .trip-slider-punch {
  left: calc(524 * var(--u));
}

/* The rim a little brighter under the pointer. */
.model .model-trip .trip-slider-glow {
  position: absolute;
  inset: 0;
  padding: calc(0.8 * var(--u));
  border-radius: inherit;
  background: linear-gradient(to bottom right, rgb(108 233 227 / 0.2), rgb(181 138 255 / 0.18) 50%, rgb(255 112 208 / 0.164));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
  transition: opacity 110ms ease-out;
}

.model[data-interactive='true'] .model-trip .trip-slider {
  cursor: ew-resize;
  touch-action: none;
}

@media (hover: hover) {
  .model[data-interactive='true'] .model-trip .trip-slider:hover .trip-slider-glow {
    opacity: 1;
  }
}

.model .model-trip .trip-slider[data-held='true'] .trip-slider-glow {
  opacity: 1;
}

.model .model-trip .trip-slider:focus-visible {
  outline: max(1px, calc(1 * var(--u))) solid rgb(108 233 227 / 0.82);
  outline-offset: calc(-2 * var(--u));
}

.model .model-trip .trip-slider-caption {
  position: absolute;
  top: calc(11.5 * var(--u));
  left: calc(14 * var(--u));
  height: calc(12 * var(--u));
  color: var(--trip-caption);
  font-size: calc(10 * var(--u));
  font-weight: 500;
  line-height: calc(12 * var(--u));
  white-space: nowrap;
}

.model .model-trip .trip-slider-amount {
  position: absolute;
  top: calc(9.5 * var(--u));
  right: calc(14 * var(--u));
  display: flex;
  align-items: baseline;
  gap: calc(3 * var(--u));
  height: calc(14 * var(--u));
  color: var(--trip-dim);
  font-size: calc(10 * var(--u));
  line-height: calc(14 * var(--u));
  white-space: nowrap;
}

.model .model-trip .trip-slider-amount b {
  color: var(--trip-cream);
  font-size: calc(12 * var(--u));
  font-weight: 500;
}

.model .model-trip .trip-rail {
  position: absolute;
  top: calc(42 * var(--u));
  left: calc(14 * var(--u));
  width: calc(136 * var(--u));
  height: calc(6 * var(--u));
  overflow: hidden;
  border-radius: calc(3 * var(--u));
  background: #27242e;
}

/* The amount in flat colour, where the liquid is not cut into the rail. */
.model .model-trip .trip-rail-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  border-radius: calc(3 * var(--u));
  background: linear-gradient(90deg, #a6f742, #6ce9e3 45%, #852cfa);
  transform: scaleX(var(--at));
  transform-origin: left;
}

.model .model-trip .trip-rail-tick {
  position: absolute;
  top: calc(55 * var(--u));
  left: calc(81.5 * var(--u));
  width: calc(1 * var(--u));
  height: calc(2 * var(--u));
  background: rgb(152 155 168 / 0.45);
}

.model .model-trip .trip-thumb {
  position: absolute;
  top: calc(36 * var(--u));
  left: calc(8 * var(--u));
  width: calc(12 * var(--u));
  height: calc(18 * var(--u));
  border-radius: calc(6 * var(--u));
  background: linear-gradient(#edf1f4, #bdc6d1);
  box-shadow: 0 calc(1 * var(--u)) 0 rgb(0 0 0 / 0.28), inset 0 0 0 calc(0.7 * var(--u)) rgb(255 255 255 / 0.45);
  transform: translate3d(calc(var(--at) * 136 * var(--u)), 0, calc(1.2 * var(--u)));
  pointer-events: none;
}

/* ---- The dock: presets, A | B, the status and Reset ---- */

.model .model-trip .trip-dock {
  --rim: 0.14;

  position: absolute;
  top: calc(396.5 * var(--u));
  left: calc(704.5 * var(--u));
  width: calc(303 * var(--u));
  height: calc(63 * var(--u));
  border-radius: calc(12 * var(--u));
  background: #1c1825;
  transform-style: preserve-3d;
}

.model .model-trip :is(.trip-preset, .trip-bank, .trip-reset, .trip-status) {
  position: absolute;
  height: calc(24 * var(--u));
  font-size: calc(11 * var(--u));
  line-height: calc(24 * var(--u));
  outline: none;
  white-space: nowrap;
}

.model[data-interactive='true'] .model-trip :is(.trip-preset, .trip-bank, .trip-reset, .trip-option) {
  cursor: pointer;
  touch-action: manipulation;
}

/* The buttons stand a hair off the face, so a press on one is plainly on it however the model is turned. */
.model .model-trip :is(.trip-preset, .trip-bank, .trip-reset, .trip-view) {
  transform: translateZ(calc(0.3 * var(--u)));
}

.model .model-trip :is(.trip-preset, .trip-bank, .trip-reset):focus-visible {
  box-shadow: inset 0 0 0 calc(1 * var(--u)) rgb(108 233 227 / 0.82);
}

.model .model-trip .trip-preset {
  --rim: 0.3;

  top: calc(5.5 * var(--u));
  left: calc(7.5 * var(--u));
  width: calc(224 * var(--u));
  border-radius: calc(8 * var(--u));
  background: var(--trip-rest);
  box-shadow: inset 0 0 0 calc(0.8 * var(--u)) rgb(232 233 238 / 0.085);
  color: var(--trip-cream);
}

.model .model-trip .trip-preset [data-trip-preset-name] {
  position: absolute;
  left: calc(17 * var(--u));
}

.model .model-trip .trip-preset-chevron {
  position: absolute;
  top: calc(9.5 * var(--u));
  left: calc(206 * var(--u));
  width: calc(8 * var(--u));
  height: calc(5 * var(--u));
  overflow: visible;
}

.model .model-trip .trip-preset-chevron path {
  fill: none;
  stroke: var(--trip-dim);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (hover: hover) {
  .model[data-interactive='true'] .model-trip .trip-preset:hover {
    --rim: 0.36;

    background: var(--trip-hover);
    box-shadow: inset 0 0 0 calc(0.8 * var(--u)) rgb(232 233 238 / 0.14);
  }
}

.model .model-trip .trip-preset:is([data-pressed='true'], [aria-expanded='true']) {
  --rim: 0.44;

  background: var(--trip-pressed);
  box-shadow: inset 0 0 0 calc(0.8 * var(--u)) rgb(232 233 238 / 0.16);
}

/* The presets' menu: above the button, over the face. */
.model .model-trip .trip-menu {
  position: absolute;
  bottom: calc(59.5 * var(--u));
  left: calc(7.5 * var(--u));
  width: calc(224 * var(--u));
  padding: calc(5 * var(--u));
  border: max(1px, calc(1 * var(--u))) solid rgb(232 233 238 / 0.12);
  border-radius: calc(10 * var(--u));
  background: var(--trip-control);
  box-shadow: 0 calc(8 * var(--u)) calc(24 * var(--u)) rgb(0 0 0 / 0.45);
  outline: none;
  transform: translateZ(calc(6 * var(--u)));
}

.model .model-trip .trip-menu[hidden] {
  display: none;
}

.model .model-trip .trip-option {
  position: relative;
  display: block;
  height: calc(27 * var(--u));
  padding-left: calc(25 * var(--u));
  border-radius: calc(6 * var(--u));
  color: var(--trip-cream);
  font-size: calc(11 * var(--u));
  line-height: calc(27 * var(--u));
  white-space: nowrap;
}

.model .model-trip .trip-option[data-active='true'] {
  background: #372e49;
}

.model .model-trip .trip-option-tick {
  position: absolute;
  top: calc(9.5 * var(--u));
  left: calc(8 * var(--u));
  width: calc(10 * var(--u));
  height: calc(8 * var(--u));
  overflow: visible;
  visibility: hidden;
}

.model .model-trip .trip-option[aria-selected='true'] .trip-option-tick {
  visibility: visible;
}

.model .model-trip .trip-option-tick path {
  fill: none;
  stroke: var(--trip-cyan);
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/*
 * On a phone (the web site's) the menu's lines are a finger's height and
 * their words big enough to read, so the menu is as wide as its words,
 * never narrower than the editor's, and its tick and edges grow with them.
 * It keeps to the right edge of the preset button (936 of the editor's
 * points), where the editor's own menu ends, and grows to the left, so a
 * small model's menu stays on the screen.
 */
@media (pointer: coarse) {
  .model .model-trip .trip-menu {
    right: calc(71.5 * var(--u));
    left: auto;
    width: max-content;
    min-width: calc(224 * var(--u));
    padding: max(calc(5 * var(--u)), 4px);
    border-radius: max(calc(10 * var(--u)), 10px);
  }

  .model .model-trip .trip-option {
    height: max(calc(27 * var(--u)), 28px);
    padding-right: max(calc(12 * var(--u)), 14px);
    padding-left: max(calc(25 * var(--u)), 28px);
    border-radius: max(calc(6 * var(--u)), 6px);
    font-size: max(calc(11 * var(--u)), 12px);
    line-height: max(calc(27 * var(--u)), 28px);
  }

  .model .model-trip .trip-option-tick {
    top: calc(50% - max(calc(4 * var(--u)), 4px));
    left: max(calc(8 * var(--u)), 9px);
    width: max(calc(10 * var(--u)), 10px);
    height: max(calc(8 * var(--u)), 8px);
  }
}

.model .model-trip .trip-bank {
  --rim: 0.53;

  top: calc(5.5 * var(--u));
  width: calc(28 * var(--u));
  background: var(--trip-rest);
  box-shadow: inset 0 0 0 max(1px, calc(1 * var(--u))) rgb(232 233 238 / 0.055);
  color: var(--trip-button-text);
  font-weight: 500;
  text-align: center;
}

.model .model-trip .trip-bank-a {
  left: calc(239.5 * var(--u));
  border-radius: calc(8 * var(--u)) 0 0 calc(8 * var(--u));
}

.model .model-trip .trip-bank-b {
  left: calc(267.5 * var(--u));
  border-radius: 0 calc(8 * var(--u)) calc(8 * var(--u)) 0;
}

.model .model-trip .trip-bank[data-on='true'] {
  background: linear-gradient(to bottom right, #262a38, #2f263e);
  box-shadow: none;
  color: var(--trip-cream);
}

.model .model-trip .trip-reset {
  top: calc(33.5 * var(--u));
  left: calc(239.5 * var(--u));
  width: calc(56 * var(--u));
  border-radius: calc(8 * var(--u));
  background: var(--trip-rest);
  color: var(--trip-button-text);
  text-align: center;
}

@media (hover: hover) {
  .model[data-interactive='true'] .model-trip :is(.trip-bank[data-on='false'], .trip-reset):hover {
    background: var(--trip-hover);
    box-shadow: inset 0 0 0 max(1px, calc(1 * var(--u))) rgb(232 233 238 / 0.14);
  }

  .model[data-interactive='true'] .model-trip .trip-bank[data-on='true']:hover {
    --rim: 0.68;

    background: linear-gradient(to bottom right, #29313e, #342b47);
  }
}

.model .model-trip :is(.trip-bank[data-on='false'], .trip-reset)[data-pressed='true'] {
  background: var(--trip-pressed);
}

.model .model-trip .trip-bank[data-on='true'][data-pressed='true'] {
  background: linear-gradient(to bottom right, #2a3542, #3a2f4f);
}

/* What the status says, in its colour, after a small dot of the same. */
.model .model-trip .trip-status {
  top: calc(33.5 * var(--u));
  left: calc(7.5 * var(--u));
  width: calc(224 * var(--u));
  border-radius: calc(8 * var(--u));
  background: #1f1a28;
  color: var(--trip-dim);
}

.model .model-trip .trip-status[data-trip-status='none'] {
  color: var(--trip-faint);
}

.model .model-trip .trip-status[data-trip-status='over'] {
  color: #f94c76;
}

.model .model-trip .trip-status[data-trip-status='above'] {
  color: #e3bb76;
}

.model .model-trip .trip-status-dot {
  position: absolute;
  top: calc(10.5 * var(--u));
  left: calc(9 * var(--u));
  width: calc(3 * var(--u));
  height: calc(3 * var(--u));
  border-radius: 50%;
  background: currentColor;
  opacity: 0.8;
}

.model .model-trip [data-trip-status-text] {
  position: absolute;
  left: calc(20 * var(--u));
}

/* The editor's resize grip, in its corner. */
.model .model-trip .trip-grip {
  position: absolute;
  top: calc(462 * var(--u));
  left: calc(1022 * var(--u));
  width: calc(18 * var(--u));
  height: calc(18 * var(--u));
  overflow: visible;
  pointer-events: none;
}

.model .model-trip .trip-grip path {
  fill: none;
  stroke: rgb(232 233 238 / 0.2);
  stroke-width: 1;
}

.model[data-interactive='true'] .model-trip .trip-knob {
  cursor: ns-resize;
  touch-action: none;
}

/*
 * For a finger (the web site's, on a phone or a tablet), where the whole
 * editor is a few hundred pixels wide: the small controls take more of the
 * face than they show. Each takes empty face about it that is its own and
 * no other control's, so no two of them meet; where there is room they are
 * at least 24 pixels each way, and where there is not (A, B and Reset share
 * 96 points square of the face) as much as there is.
 */
@media (pointer: coarse) {
  /* The Ceiling's unit: centred on the word and grown downwards, under the dial's ring and capsule, never over them. */
  .model[data-interactive='true'] .model-trip .trip-unit::after {
    inset: calc(-4 * var(--u)) min(calc(-6 * var(--u)), calc(50% - 12px)) min(calc(-4 * var(--u)), calc(100% + 4 * var(--u) - 24px));
  }

  /* 808 Protect and Punch: their cards, a little taller where they are less than a finger's height. */
  .model[data-interactive='true'] .model-trip .trip-slider::before {
    inset: min(0px, calc(32 * var(--u) - 12px)) 0;
  }

  /* The loudness view: the box's edge beside it, the gap above it, and as much of the box under it as it needs. */
  .model[data-interactive='true'] .model-trip .trip-view::before {
    content: '';
    position: absolute;
    inset: calc(-10 * var(--u)) 0 max(calc(-42 * var(--u)), min(0px, calc(38 * var(--u) - 24px))) calc(-16 * var(--u));
  }

  .model[data-interactive='true'] .model-trip :is(.trip-preset, .trip-bank, .trip-reset)::before {
    content: '';
    position: absolute;
  }

  /* The presets: the dock from its left edge, the gap above it, and as much of the status's row under it as it needs. */
  .model[data-interactive='true'] .model-trip .trip-preset::before {
    inset: calc(-18 * var(--u)) calc(-2 * var(--u)) max(calc(-54 * var(--u)), min(0px, calc(42 * var(--u) - 24px))) calc(-8 * var(--u));
  }

  /* A and B: up to the loudness box (the gap and the meters' panel's empty foot), half the gap down to Reset; A the gap from the presets, B the face out to its edge. */
  .model[data-interactive='true'] .model-trip .trip-bank-a::before {
    inset: calc(-30 * var(--u)) 0 calc(-2 * var(--u)) calc(-6 * var(--u));
  }

  .model[data-interactive='true'] .model-trip .trip-bank-b::before {
    inset: calc(-30 * var(--u)) calc(-40 * var(--u)) calc(-2 * var(--u)) 0;
  }

  /* Reset: half the gap up to A and B, and the face out to its edge and its foot. */
  .model[data-interactive='true'] .model-trip .trip-reset::before {
    inset: calc(-2 * var(--u)) calc(-40 * var(--u)) calc(-26 * var(--u)) calc(-6 * var(--u));
  }
}