Screen Time Configuration

<div class="w-full bg-gray-100">
  <style>@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');</style>
  <div class="bg-gray-100 rounded-lg p-5 mb-7" style="font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;">
    <div class="text-lg font-medium mb-4">Screen Time Limits</div>
    <div class="flex gap-15 justify-center mb-8">
      <div class="flex flex-col items-center">
        <label class="mb-2">Weekdays</label>
        <input type="range" min="20" max="90" step="5" value="60" class="h-40 slider-vertical writing-mode-bt-lr" style="writing-mode: bt-lr; -webkit-appearance: slider-vertical;" />
        <div class="mt-2">60 mins</div>
      </div>
      <div class="flex flex-col items-center">
        <label class="mb-2">Weekends</label>
        <input type="range" min="40" max="240" step="10" value="150" class="h-40 slider-vertical writing-mode-bt-lr" style="writing-mode: bt-lr; -webkit-appearance: slider-vertical;" />
        <div class="mt-2">150 mins</div>
      </div>
    </div>
    <h3 class="text-lg font-medium mt-8 mb-5">Screen Time Earning Rate</h3>
    <div class="text-center mt-5">
      <svg width="300" height="150" class="mx-auto">
        <line x1="40" y1="110" x2="260" y2="30" stroke="#007aff" stroke-width="2"></line>
        <circle cx="150" cy="70" r="6" fill="#007aff"></circle>
        <text x="40" y="130" font-size="12">Correct Answers</text>
        <text x="200" y="20" font-size="12">Time Earned</text>
      </svg>
      <div class="mt-2.5 font-medium">30 seconds per correct answer</div>
      <div class="text-sm text-gray-500 mt-2 leading-relaxed">
        <br />
      </div>
    </div>
  </div>
</div>