:root {
      color-scheme: dark;
      --bg-deep: #061019;
      --bg-top: #173846;
      --surface: rgba(9, 26, 34, .76);
      --surface-strong: rgba(11, 31, 40, .94);
      --line: rgba(191, 226, 218, .16);
      --line-strong: rgba(191, 226, 218, .29);
      --text: #f3f8f5;
      --soft: #c8d9d3;
      --muted: #92aaa3;
      --mint: #8de0bd;
      --accent: #6fc4e5;
      --accent-2: #73d2c6;
      --season: #d7b56f;
      --glow-a: rgba(63, 154, 174, .23);
      --glow-b: rgba(72, 137, 178, .17);
      --weather: rgba(94, 134, 150, .05);
      --shadow: 0 28px 90px rgba(0, 0, 0, .3);
    }

    * {
      box-sizing: border-box
    }

    html {
      min-width: 320px;
      overflow-x: hidden
    }

    body {
      margin: 0;
      min-width: 320px;
      min-height: 100vh;
      min-height: 100svh;
      overflow-x: hidden;
      color: var(--text);
      background: var(--bg-deep);
      font: 16px/1.5 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      transition: background-color 2s ease, color 2s ease;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      z-index: -3;
      pointer-events: none;
      background:
        radial-gradient(circle at 10% -4%, var(--glow-a), transparent 35rem),
        radial-gradient(circle at 93% 8%, var(--glow-b), transparent 39rem),
        radial-gradient(circle at 55% 110%, color-mix(in srgb, var(--season) 14%, transparent), transparent 45rem),
        linear-gradient(180deg, var(--bg-top), var(--bg-deep) 68%, #03080d);
      transition: background 3s ease;
    }

    body::after {
      content: "";
      position: fixed;
      inset: 0;
      z-index: -2;
      pointer-events: none;
      background: var(--weather);
      transition: background 3s ease
    }

    .grain {
      position: fixed;
      inset: 0;
      z-index: -1;
      pointer-events: none;
      opacity: .018;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2' stitchTiles='stitchTiles'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")
    }

    a {
      color: inherit;
      text-decoration: none
    }

    :where(a, button):focus-visible {
      outline: 2px solid var(--mint);
      outline-offset: 4px
    }

    .page {
      width: calc(100% - clamp(32px, 4vw, 120px));
      min-height: 100vh;
      min-height: 100svh;
      margin: auto;
      display: flex;
      flex-direction: column;
      padding: clamp(16px, 2.5vh, 28px) 0 max(22px, env(safe-area-inset-bottom))
    }

    header {
      min-height: 66px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      border-bottom: 1px solid var(--line)
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 12px
    }

    .mark {
      width: 46px;
      height: 46px;
      display: grid;
      place-items: center;
      border: 1px solid color-mix(in srgb, var(--mint) 52%, transparent);
      border-radius: 15px;
      color: var(--mint);
      background: color-mix(in srgb, var(--mint) 9%, transparent);
      font-size: 10px;
      font-weight: 900;
      letter-spacing: .06em
    }

    .brand strong {
      display: block;
      font-size: 13px;
      letter-spacing: .18em
    }

    .brand small {
      display: block;
      margin-top: 2px;
      color: var(--muted);
      font-size: 11px
    }

    main {
      flex: 1;
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) minmax(420px, .9fr);
      gap: clamp(42px, 5vw, 120px);
      align-items: center;
      padding: clamp(44px, 8vh, 100px) 0
    }

    main>section {
      width: min(100%, 1150px);
      justify-self: center
    }

    .eyebrow {
      margin: 0 0 13px;
      color: var(--mint);
      font-size: 10px;
      font-weight: 850;
      letter-spacing: .18em;
      text-transform: uppercase
    }

    .date {
      display: block;
      margin-bottom: 24px;
      color: var(--soft);
      font-size: 14px;
      font-variant-numeric: tabular-nums
    }

    h1 {
      max-width: 11ch;
      margin: 0 0 22px;
      font: 700 clamp(3.6rem, 6.8vw, 7.6rem)/1.08 Georgia, "Times New Roman", serif;
      letter-spacing: -.065em;
      overflow: visible
    }

    h1 em {
      display: block;
      color: transparent;
      padding-bottom: .14em;
      background: linear-gradient(110deg, var(--accent), var(--accent-2) 64%, var(--season));
      -webkit-background-clip: text;
      background-clip: text;
      font-style: normal
    }

    .intro {
      max-width: 51ch;
      margin: 0;
      color: var(--muted);
      font-size: clamp(15px, 1.4vw, 18px);
      line-height: 1.65
    }

    .actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 12px;
      margin-top: 30px
    }

    .enter {
      position: relative;
      overflow: hidden;

      min-width: 230px;
      min-height: 66px;

      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 14px;

      padding: 0 28px;

      border: 1px solid color-mix(in srgb,
          var(--mint) 58%,
          transparent);

      border-radius: 20px;

      color: #06130f;

      background:
        linear-gradient(135deg,
          color-mix(in srgb, var(--mint) 96%, white),
          color-mix(in srgb, var(--accent-2) 82%, var(--mint)));

      box-shadow:
        0 18px 45px color-mix(in srgb,
          var(--mint) 20%,
          transparent),
        inset 0 1px 0 rgba(255, 255, 255, .45),
        inset 0 -1px 0 rgba(0, 0, 0, .08);

      font-size: 15px;
      font-weight: 850;
      letter-spacing: .025em;

      transition:
        transform .22s ease,
        box-shadow .22s ease,
        filter .22s ease;
    }

    .enter>* {
      position: relative;
      z-index: 1;
    }

    .enter span {
      width: 30px;
      height: 30px;

      display: grid;
      place-items: center;

      border-radius: 50%;

      background: rgba(5, 20, 15, .1);

      font-size: 18px;
      line-height: 1;

      transition:
        transform .22s ease,
        background .22s ease;
    }


    .enter::before {
      content: "";
      position: absolute;
      inset: 1px 1px auto;
      height: 48%;
      border-radius: 19px 19px 50% 50%;


      background: linear-gradient(180deg,
          rgba(255, 255, 255, .24),
          transparent);

      pointer-events: none;
    }

    .enter:hover {
      transform: translateY(-3px);

      filter: brightness(1.04);

      box-shadow:
        0 24px 58px color-mix(in srgb,
          var(--mint) 28%,
          transparent),
        inset 0 1px 0 rgba(255, 255, 255, .5),
        inset 0 -1px 0 rgba(0, 0, 0, .08);
    }

    .enter:hover span {
      transform: translateX(3px);
      background: rgba(5, 20, 15, .16);
    }

    .enter:active {
      transform: translateY(-1px);
    }

    .side {
      display: grid;
      gap: 13px;
      width: min(100%, 900px);
      justify-self: center
    }

    .weather-card {
      border: 1px solid var(--line);
      border-radius: 24px;
      background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 9%, transparent), transparent 50%), color-mix(in srgb, var(--surface-strong) 85%, transparent);
      box-shadow: var(--shadow);
      backdrop-filter: blur(18px);
      container-type: inline-size
    }

    .weather-card {
      padding: clamp(24px, 4cqw, 44px)
    }

    .card-top,
    .weather-foot {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px
    }

    .label {
      color: var(--muted);
      font-size: clamp(10px, 1.5cqw, 14px);
      font-weight: 850;
      letter-spacing: .16em;
      text-transform: uppercase
    }

    .phase {
      color: var(--soft);
      font-size: clamp(11px, 1.4cqw, 14px)
    }

    .reading {
      margin: clamp(28px, 5cqw, 46px) 0 clamp(22px, 3.5cqw, 34px)
    }

    .temp {
      display: block;
      margin-bottom: 10px;
      font: 700 clamp(64px, 10cqw, 108px)/.9 Georgia, "Times New Roman", serif
    }

    .condition {
      display: block;
      color: var(--soft);
      font-size: clamp(15px, 2cqw, 20px)
    }

    .details {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: clamp(10px, 1.5cqw, 16px);
      margin-top: clamp(20px, 3cqw, 30px)
    }

    .metric {
      padding: clamp(14px, 2.4cqw, 24px);
      border: 1px solid var(--line);
      border-radius: 12px;
      background: rgba(0, 0, 0, .09)
    }

    .metric small,
    .metric strong {
      display: block
    }

    .metric small {
      color: var(--muted);
      font-size: clamp(9px, 1.25cqw, 12px);
      letter-spacing: .08em;
      text-transform: uppercase
    }

    .metric strong {
      margin-top: 5px;
      color: var(--soft);
      font-size: clamp(14px, 1.9cqw, 19px)
    }

    .date {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 24px;
      padding: 7px 11px;
      border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
      border-radius: 999px;
      color: var(--soft);
      background: color-mix(in srgb, var(--accent) 7%, transparent);
      font-size: 13px;
      font-weight: 650;
      letter-spacing: .02em;
      font-variant-numeric: tabular-nums;
      box-shadow: 0 0 20px color-mix(in srgb, var(--accent) 7%, transparent);
    }

    .weather-foot {
      margin-top: clamp(20px, 3cqw, 30px);
      padding-top: clamp(14px, 2cqw, 22px);
      border-top: 1px solid var(--line);
      color: var(--muted);
      font-size: clamp(10px, 1.3cqw, 13px)
    }

    footer {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 12px;
      padding-top: 20px;
      border-top: 1px solid var(--line);
      color: var(--muted);
      font-size: 10px;
    }

    footer>span:first-child {
      justify-self: start;
    }

    footer>span:nth-child(3) {
      justify-self: center;
    }

    footer>span:last-child {
      justify-self: end;
    }

    .footer-spacer {
      display: none;
    }

    .footer-spacer {
      flex: 1
    }

    @media(max-width:1100px) {
      .page {
        width: calc(100% - clamp(24px, 5vw, 56px))
      }

      main {
        grid-template-columns: minmax(0, 1fr) minmax(340px, .72fr);
        gap: clamp(26px, 4vw, 44px)
      }

      h1 {
        font-size: clamp(3rem, 7.8vw, 5.4rem)
      }
    }

    @media(max-width:840px) {
      .page {
        width: min(650px, calc(100% - clamp(24px, 6vw, 40px)))
      }

      main {
        grid-template-columns: minmax(0, 1fr);
        gap: 30px;
        padding: clamp(38px, 7vh, 58px) 0
      }

      h1 {
        max-width: 100%;
        font-size: clamp(3rem, 12vw, 5.2rem)
      }
    }

    @media(max-width:520px) {
      html,
      body {
        min-width: 0
      }

      .page {
        width: auto;
        margin-left: max(16px, env(safe-area-inset-left));
        margin-right: max(16px, env(safe-area-inset-right));
        padding-top: max(12px, env(safe-area-inset-top))
      }

      header,
      main,
      footer,
      main>section,
      .side,
      .weather-card,
      .details,
      .metric {
        min-width: 0;
        max-width: 100%
      }

      .brand small {
        display: none
      }

      main {
        gap: 26px;
        padding: clamp(32px, 6vh, 44px) 0
      }

      .eyebrow {
        font-size: 9px;
        overflow-wrap: anywhere
      }

      .date {
        margin-bottom: 18px;
        font-size: 12px
      }

      h1 {
        font-size: clamp(2.55rem, 13vw, 4rem);
        letter-spacing: -.055em;
        overflow-wrap: anywhere
      }

      .intro {
        max-width: 100%;
        font-size: 14px;
        overflow-wrap: anywhere
      }

      .actions {
        align-items: stretch
      }

      .enter {
        width: 100%;
        min-width: 0;
        min-height: 60px;
        padding-inline: 20px
      }

      .weather-card {
        padding: 19px
      }

      .label {
        font-size: 9px
      }

      .phase {
        font-size: 10px
      }

      .reading {
        margin: 25px 0 19px
      }

      .temp {
        font-size: 58px
      }

      .condition {
        font-size: 14px
      }

      .details {
        grid-template-columns: 1fr
      }

      .metric {
        display: flex;
        align-items: center;
        justify-content: space-between
      }

      .metric strong {
        margin: 0
      }

      .weather-foot {
        align-items: flex-start;
        flex-direction: column
      }

      footer {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 7px;
        text-align: center
      }

      footer>span:first-child,
      footer>span:nth-child(2),
      footer>span:last-child {
        justify-self: center;
        width: auto
      }
    }

    @media(max-height:620px) and (min-width:841px) {
      main {
        align-items: start;
        padding: 34px 0
      }
    }

    @media(prefers-reduced-motion:reduce) {
      * {
        transition: none !important;
        scroll-behavior: auto !important
      }

      .enter:hover {
        transform: none
      }
    }