:root {
  color-scheme: light;
  --sky: #7398d5;
  --grass: #7e9f36;
  --ink: #fff9a8;
  --white: #fffef0;
  --active: #f2a45f;
}

* { box-sizing: border-box; }

html, body, #world {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  background: var(--sky);
}

body { font-family: ui-rounded, "SF Pro Rounded", system-ui, sans-serif; }

#cloud {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
}

.effects {
  position: fixed;
  z-index: 4;
  top: max(20px, env(safe-area-inset-top));
  left: 50%;
  display: flex;
  gap: 18px;
  transform: translateX(-50%);
}

button, label, a {
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.effects button, .save {
  position: relative;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  color: color-mix(in srgb, var(--grass) 72%, var(--ink));
  font: 24px/34px ui-rounded, system-ui, sans-serif;
  text-align: center;
  cursor: pointer;
  --effect-amount: .5;
}

.effects button[aria-pressed="true"] {
  color: var(--ink);
  text-shadow: 0 0 10px color-mix(in srgb, var(--ink) 70%, transparent);
}

.effects button::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -3px;
  width: calc(6px + var(--effect-amount) * 24px);
  height: 4px;
  transform: translateX(-50%);
  background:
    radial-gradient(circle, var(--ink) 0 1.4px, transparent 1.8px)
    0 1px / 6px 4px repeat-x;
  opacity: .28;
  pointer-events: none;
}

.effects button[aria-pressed="true"]::after {
  opacity: calc(.38 + var(--effect-amount) * .58);
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--ink) 48%, transparent));
}

.touch-size {
  position: fixed;
  z-index: 4;
  top: max(58px, calc(env(safe-area-inset-top) + 38px));
  left: 50%;
  display: block;
  transform: translateX(-50%);
  --touch-fill: 11%;
  --touch-dot: 4px;
  --touch-track: 146px;
  pointer-events: auto;
}

.touch-size-path {
  position: relative;
  display: block;
  width: var(--touch-track);
  height: 30px;
}

.touch-size-path::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--ink) 76%, transparent) 0 var(--touch-dot), transparent calc(var(--touch-dot) + .4px))
    1px 13px / 12px 12px repeat-x;
  opacity: 0.36;
}

.touch-size-dots {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--touch-fill);
  overflow: hidden;
  pointer-events: none;
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--ink) 42%, transparent));
}

.touch-size-dots::before {
  content: "";
  position: absolute;
  inset: 0;
  width: var(--touch-track);
  background:
    radial-gradient(circle, var(--ink) 0 var(--touch-dot), transparent calc(var(--touch-dot) + .4px))
    1px 13px / 12px 12px repeat-x;
}

.touch-size input {
  position: absolute;
  inset: 0;
  width: var(--touch-track);
  height: 30px;
  margin: 0;
  opacity: 0.001;
  cursor: pointer;
}

.touch-size output {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

.chop-count {
  position: fixed;
  z-index: 4;
  top: max(86px, calc(env(safe-area-inset-top) + 66px));
  left: 50%;
  display: block;
  transform: translateX(-50%);
  --chop-fill: 100%;
  --chop-track: 112px;
  pointer-events: auto;
}

.chop-count-path {
  position: relative;
  display: block;
  width: var(--chop-track);
  height: 22px;
}

.chop-count-path::before,
.chop-count-dots::before {
  content: "";
  position: absolute;
  inset: 0;
  width: var(--chop-track);
  background:
    radial-gradient(circle, var(--ink) 0 1.7px, transparent 2.1px)
    1px 9px / 8px 8px repeat-x;
}

.chop-count-path::before { opacity: 0.2; }

.chop-count-dots {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--chop-fill);
  overflow: hidden;
  pointer-events: none;
  opacity: 0.76;
  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--ink) 38%, transparent));
}

.chop-count input {
  position: absolute;
  inset: 0;
  width: var(--chop-track);
  height: 22px;
  margin: 0;
  opacity: 0.001;
  cursor: pointer;
}

.chop-count output {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

#audio-file {
  position: fixed;
  width: 1px;
  height: 1px;
  left: 50%;
  bottom: max(26px, env(safe-area-inset-bottom));
  opacity: 0.001;
  pointer-events: none;
}

#upload {
  position: fixed;
  z-index: 5;
  left: 50%;
  bottom: max(22px, env(safe-area-inset-bottom));
  width: 38px;
  height: 38px;
  transform: translateX(-50%);
  color: var(--ink);
  font: 30px/34px ui-rounded, system-ui, sans-serif;
  text-align: center;
  cursor: pointer;
}

.record {
  position: fixed;
  z-index: 5;
  right: max(22px, env(safe-area-inset-right));
  bottom: max(24px, env(safe-area-inset-bottom));
  width: 18px;
  height: 18px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: transparent;
}

.record[aria-pressed="true"] {
  border-color: var(--active);
  background: var(--active);
}

.save {
  position: fixed;
  z-index: 5;
  right: max(62px, calc(env(safe-area-inset-right) + 40px));
  bottom: max(16px, calc(env(safe-area-inset-bottom) - 8px));
  text-decoration: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 640px) {
  .effects { gap: 12px; }
  .effects button { width: 30px; height: 30px; font-size: 21px; }
  .touch-size {
    top: max(54px, calc(env(safe-area-inset-top) + 34px));
    --touch-track: 122px;
  }
  .chop-count {
    top: max(82px, calc(env(safe-area-inset-top) + 62px));
    --chop-track: 100px;
  }
}