:root {
      --ink: #25313c;
      --canvas: #ffffff;
      --surface: #fff8e7;
            --accent: #ef7047;
      --accent-dark: #24766e;
          }

    html {
      background: var(--canvas);
    }

    body {
      margin: 0;
      min-height: 100vh;
      padding-bottom: 112px;
      color: var(--ink);
      background-color: #bdd6dc;
    }

    main {
      width: 100%;
      max-width: 1120px;
      margin: 0 auto;
      padding: 52px 20px 132px;
    }

    .tracker-heading {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 28px;
    }

    .tracker-heading p {
      margin-bottom: 0;
    }

    .site-logo {
      display: block;
      width: 96px;
      height: 96px;
      flex-shrink: 0;
      object-fit: contain;
    }

    h1 {
      margin: 0 0 12px;
      font-size: 42px;
      line-height: 1.08;
    }

    p {
      margin: 0 0 28px;
      color: #444;
      font-size: 18px;
      line-height: 1.5;
    }

    .tracker {
      border: 1px solid #ddd;
      padding: 26px;
      background: var(--surface);
    }

    label {
      display: block;
      margin-bottom: 8px;
    }

    input,
    select {
      width: 100%;
      margin-bottom: 18px;
      padding: 13px 12px;
      border: 1px solid #bbb;
      font-size: 16px;
      background: var(--surface);
    }

    button {
      padding: 13px 18px;
      border: 0;
      color: #fff;
      background: var(--accent-dark);
      font-size: 16px;
      cursor: pointer;
    }

    #cityPicker,
    #rawSection {
      display: none;
      margin-top: 18px;
    }

    #result {
      margin-top: 22px;
      font-size: 18px;
      line-height: 1.5;
      white-space: pre-line;
    }

    @media (max-width: 650px) {
    h1 {
      font-size: 34px;
    }

    }

    .city-time-box time {
      font-size: 24px;
    }