@import url('./funnels.css');

/* The ringtone maker (ringtone-maker.html). Everything comes from funnels.css except what
   this page alone has: the label rows over its two sliders, the typed start box, and the
   picture of the recording, which is shorter than a spectrogram. */
.tool-panel h2 { overflow-wrap:anywhere; }
.ring-wave { height:120px; }
.ring-slider { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 16px; margin-top:18px; color:var(--snow); font-size:15px; font-weight:500; }
.ring-slider output { color:var(--snow-2); font-variant-numeric:tabular-nums; }
.tool-row input[type="text"] { width:7.5em; min-height:44px; padding:0 12px; border:1px solid #ffffff24; border-radius:12px; background:#0b0c0f; color:var(--snow); font:500 15px var(--sans); font-variant-numeric:tabular-nums; }
#ring-range { color:var(--snow); font-variant-numeric:tabular-nums; }
@media (max-width:700px) { .ring-wave { height:96px; } }
.install-phone { margin:36px 0 4px; font-size:21px; font-weight:650; letter-spacing:-.01em; color:var(--coal); }
/* Each phone's steps sit under its h3, so they are h4, set like the step h3 of funnels.css. */
.tool-steps h4 { margin:0; font-size:19px; font-weight:650; letter-spacing:-.01em; text-wrap:balance; }