/* The coil spring slider: a compressor's ratio on a black page. A chrome steel spring with an anodized collar on it;
   the script reads from here the colours of the steel, the collar and the caps. */
:root {
  --page: #000000;          /* the page */
  --ink: #f2f2f3;           /* the words and the focus ring */
  --muted: #74767d;         /* the unit and the scale */
  --steel: #8f96a0;         /* the wire in half light */
  --steel-shine: #ffffff;   /* the light it catches on top of each turn */
  --steel-shadow: #191b1f;  /* the wire turned away from the light */
  --steel-rim: #5d6c86;     /* a cool light from below, under each turn */
  --steel-back: #50545c;    /* the far half of each turn, seen from inside */
  --anodized: #ff5b1c;      /* the collar, and the rod up to it */
  --anodized-light: #ffb38c;
  --anodized-deep: #5c1700;
  --graphite: #2b2d32;      /* the two end caps, and the rod after the collar */
}

* {
  box-sizing: border-box;
}

/* the canvas runs a little past the slider on both sides: never a sideways scroll for it */
html,
body {
  margin: 0;
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  min-height: 100svh;
  background: var(--page);
  color: var(--ink);
  font-family: 'Inter Tight Variable', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.stage {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 32px 16px;
}

.ratio {
  width: min(440px, 100%);
  user-select: none;
  -webkit-user-select: none;
}

/* ---------------------------------------------------------------- the name and the ratio */
.ratio__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

.ratio__label {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* the compressor's curve: straight up to the knee, then flatter the higher the ratio (the script bends it) */
.ratio__icon {
  width: 22px;
  height: 22px;
  overflow: visible;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ratio__axes {
  stroke: var(--muted);
  stroke-width: 1.4;
}

.ratio__unity {
  stroke: var(--muted);
  stroke-width: 1.2;
  stroke-dasharray: 1.5 2.6;
  opacity: 0.7;
}

.ratio__curve {
  stroke: var(--anodized);
  stroke-width: 2;
}

.ratio__value {
  display: flex;
  align-items: baseline;
  font-variant-numeric: tabular-nums;
}

.ratio__number {
  font-size: 25px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.ratio__unit {
  margin-left: 1px;
  color: var(--muted);
  font-size: 19px;
  font-weight: 500;
}

/* ---------------------------------------------------------------- the spring */
/* the whole strip is the slider: pressed anywhere, the collar runs there. No scrolling on it: a finger drags */
.ratio__track {
  position: relative;
  height: 92px;
  touch-action: none;
  outline: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.is-held .ratio__track {
  cursor: grabbing;
}

/* the canvas runs past the strip on both sides, for the end caps' rounded faces */
.ratio__coil {
  position: absolute;
  left: -14px;
  top: 0;
  width: calc(100% + 28px);
  height: 100%;
  pointer-events: none;
}

/* an empty box the script keeps on the collar: the hand cursor over it, and the keys' ring round it */
.ratio__grip {
  position: absolute;
  left: 0;
  top: 0;
  width: 44px;
  height: 62px;
  border-radius: 13px;
  cursor: grab;
}

.is-held .ratio__grip {
  cursor: grabbing;
}

.ratio__grip::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 2px var(--ink);
  opacity: 0;
  transition: opacity 0.15s;
}

.ratio__track:focus-visible .ratio__grip::after {
  opacity: 1;
}

/* ---------------------------------------------------------------- the two ends */
.ratio__scale {
  position: relative;
  height: 16px;
  margin-top: -6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}

.ratio__scale span {
  position: absolute;
  top: 0;
  translate: -50% 0;
  white-space: nowrap;
}