/* The leashed nib: on white, a pad drawn with a hairline, a baseline, near-black ink and one vermilion nib tied to the
   hand by a grey thread; the words in Roboto Flex (a variable sans: weight 100 to 1000, width 25 to 151, optical size
   8 to 144). The script draws the ink on the canvas, the thread, the hand and the nib in the SVG over it, and sets the
   width of the word Leash from the length of the thread. */
:root {
  --page: #ffffff;          /* the page and the inside of the nib, lifted */
  --ink: #141414;           /* the ink, the words and the thread pulled taut */
  --muted: #8f8b84;         /* the hint and the buttons with nothing to do */
  --hair: #dcd8d0;          /* the frame of the pad, the baseline and the slider's track */
  --leash: #aaa69e;         /* the thread, slack */
  --accent: #ff4a1c;        /* the nib */
}

* {
  box-sizing: border-box;
}

html {
  touch-action: manipulation;
}

html,
body {
  margin: 0;
  overflow-x: clip;
}

body {
  min-height: 100svh;
  background: var(--page);
  color: var(--ink);
  font-family: 'Roboto Flex Variable', 'Roboto Flex', 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

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

/* ---------------------------------------------------------------- the sheet */
.sheet {
  width: min(560px, 100%);
}

.sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 34px;
  margin-bottom: 14px;
}

.sheet__title {
  margin: 0;
  font-size: 19px;
  line-height: 1.15;
  font-weight: 400;
  letter-spacing: -0.01em;
  font-variation-settings: 'wght' 560, 'wdth' 92, 'opsz' 24;
  white-space: nowrap;
}

.sheet__acts {
  display: flex;
  gap: 6px;
}

/* the buttons: a hairline pill, the word widens and takes weight under the mouse */
.act {
  height: 32px;
  padding: 0 14px;
  border: 1px solid var(--hair);
  border-radius: 16px;
  background: var(--page);
  color: var(--ink);
  font: 400 14px/1 'Roboto Flex Variable', 'Roboto Flex', 'Helvetica Neue', Arial, sans-serif;
  cursor: pointer;
  transition: border-color 0.25s, color 0.25s, transform 0.3s cubic-bezier(0.3, 1.7, 0.5, 1);
  -webkit-tap-highlight-color: transparent;
}

.act__word {
  display: inline-block;
  font-variation-settings: 'wght' 480, 'wdth' 96, 'opsz' 14;
  transition: font-variation-settings 0.45s cubic-bezier(0.3, 1.5, 0.5, 1);
}

@media (hover: hover) {
  .act:not(:disabled):hover {
    border-color: var(--ink);
  }

  .act:not(:disabled):hover .act__word {
    font-variation-settings: 'wght' 620, 'wdth' 118, 'opsz' 14;
  }
}

.act:not(:disabled):active,
.act.is-pressed {
  transform: scale(0.95);
}

.act:disabled {
  color: var(--muted);
  cursor: default;
}

/* ---------------------------------------------------------------- the pad */
.pad {
  position: relative;
  height: 232px;
  outline: none;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) and (pointer: fine) {
  .pad {
    cursor: none;
  }
}

.pad__ink,
.pad__over {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.pad__over {
  overflow: visible;
  pointer-events: none;
}

.pad__frame {
  fill: none;
  stroke: var(--hair);
  stroke-width: 1;
  stroke-dasharray: 1 1;
}

.pad__base {
  stroke: var(--hair);
  stroke-width: 1;
  stroke-dasharray: 1 1;
}

/* the ring of the focus is the frame, gone dark */
.pad:focus-visible .pad__frame {
  stroke: var(--ink);
}

html[data-using='pointer'] .pad:focus-visible .pad__frame {
  stroke: var(--hair);
}

.pad__hint {
  position: absolute;
  left: 24px;
  top: calc(72% + 10px);
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1;
  font-variation-settings: 'wght' 420, 'wdth' 100, 'opsz' 12;
  letter-spacing: 0.01em;
  pointer-events: none;
}

.leash {
  fill: none;
  stroke: var(--leash);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hand line {
  stroke: var(--ink);
  stroke-width: 1;
  stroke-linecap: square;
}

.hand {
  opacity: 0;
}

/* the nib: an outline lifted, filled when it writes */
.nib__shape {
  fill: var(--page);
  stroke: var(--accent);
  stroke-width: 1.4;
  transition: fill 0.12s;
}

.nib.is-down .nib__shape {
  fill: var(--accent);
}

/* the ends of the length of the thread, while the slider moves */
.dim {
  opacity: 0;
}

.dim__end {
  stroke: var(--ink);
  stroke-width: 1;
}

/* ---------------------------------------------------------------- the length of the thread */
.sheet__foot {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
}

/* the word stretches with the thread: a slot as wide as its widest */
.leash-word {
  flex: none;
  width: 72px;
  font-size: 16px;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

.leash-word span {
  display: inline-block;
  font-variation-settings: 'wght' 560, 'wdth' 100, 'opsz' 16;
}

.range-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
}

.range {
  --v: 0.37;
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 32px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.range:focus {
  outline: none;
}

.range::-webkit-slider-runnable-track {
  height: 1px;
  background: linear-gradient(to right, var(--ink) calc(7px + (100% - 14px) * var(--v)), var(--hair) 0);
}

.range::-moz-range-track {
  height: 1px;
  background: linear-gradient(to right, var(--ink) calc(7px + (100% - 14px) * var(--v)), var(--hair) 0);
}

/* the thumb is a hairline upright, two pixels wide inside a wider grip */
.range::-webkit-slider-thumb {
  width: 14px;
  height: 20px;
  margin-top: -9.5px;
  border: 0;
  background: linear-gradient(to right, transparent 6px, var(--ink) 6px 8px, transparent 8px);
  -webkit-appearance: none;
  appearance: none;
}

.range::-moz-range-thumb {
  width: 14px;
  height: 20px;
  border: 0;
  border-radius: 0;
  background: linear-gradient(to right, transparent 6px, var(--ink) 6px 8px, transparent 8px);
}

.range:active::-webkit-slider-thumb {
  background: linear-gradient(to right, transparent 5.5px, var(--ink) 5.5px 8.5px, transparent 8.5px);
}

.range:focus-visible::-webkit-slider-thumb {
  background: linear-gradient(to right, transparent 5px, var(--ink) 5px 9px, transparent 9px);
}

.range:focus-visible::-moz-range-thumb {
  background: linear-gradient(to right, transparent 5px, var(--ink) 5px 9px, transparent 9px);
}

html[data-using='pointer'] .range:focus-visible::-webkit-slider-thumb {
  background: linear-gradient(to right, transparent 6px, var(--ink) 6px 8px, transparent 8px);
}

/* a tick every ten pixels of thread, under the track */
.range__ticks {
  position: absolute;
  left: 7px;
  right: 7px;
  top: 21px;
  height: 5px;
  pointer-events: none;
}

.range__ticks i {
  position: absolute;
  top: 0;
  width: 1px;
  height: 5px;
  margin-left: -0.5px;
  background: var(--hair);
}

.leash-val {
  flex: none;
  width: 44px;
  text-align: right;
  font-size: 13px;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  font-variation-settings: 'wght' 460, 'wdth' 100, 'opsz' 13;
}

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

@media (max-width: 420px) {
  .sheet__title {
    font-size: 17px;
  }

  .pad {
    height: 214px;
  }

  .act {
    padding: 0 12px;
  }
}