:root {
        color-scheme: dark;
        font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
        color: #fff;
        background: #000;
        font-synthesis: none;
        -webkit-font-smoothing: antialiased;
      }
      * { box-sizing: border-box; }
      body {
        margin: 0;
        min-height: 100svh;
        display: grid;
        place-items: center;
        padding: 32px 28px;
      }
      main { width: min(100%, 720px); }
      h1 {
        margin: 0;
        font-size: clamp(36px, 5.2vw, 56px);
        font-weight: 600;
        letter-spacing: -0.055em;
        line-height: 1.08;
      }
      .intro {
        margin: 14px 0 30px;
        color: #bcbcbc;
        font-size: 18px;
        line-height: 1.4;
      }
      table { width: 100%; border-collapse: collapse; table-layout: fixed; }
      th {
        padding: 0 0 10px;
        color: #939393;
        text-align: left;
        font-size: 12px;
        font-weight: 400;
      }
      th:first-child { width: 46%; }
      td {
        border-top: 1px solid #292929;
        padding: 12px 0;
        vertical-align: middle;
        font-size: 15px;
        line-height: 1.35;
      }
      th:first-child, td:first-child { padding-right: 20px; }
      td:last-child { color: #bcbcbc; }
      .scope { margin: 10px 0 0; color: #939393; font-size: 12px; line-height: 1.4; }
      footer { margin-top: 30px; }
      .requirements { margin: 12px 0 0; color: #939393; font-size: 12px; line-height: 1.6; }
      @media (max-width: 540px) {
        body { padding: 24px 20px; }
        h1 { font-size: 40px; }
        .intro { font-size: 16px; margin: 12px 0 25px; max-width: 270px; }
        th:first-child { width: 44%; }
        th:first-child, td:first-child { padding-right: 12px; }
        td { font-size: 13px; padding: 11px 0; }
        footer { margin-top: 25px; }
      }
      @media (max-height: 700px) {
        body { padding-top: 18px; padding-bottom: 18px; }
        h1 { font-size: 36px; }
        .intro { margin-top: 10px; margin-bottom: 20px; }
        td { padding-top: 9px; padding-bottom: 9px; }
        footer { margin-top: 20px; }
      }
      @media (max-width: 360px) and (max-height: 600px) {
        body { padding: 16px; }
        h1 { font-size: 32px; }
        .intro { font-size: 15px; margin: 8px 0 18px; }
        th { font-size: 11px; }
        td { font-size: 12px; padding-top: 6px; padding-bottom: 6px; }
        footer { margin-top: 18px; }
        .requirements { font-size: 11px; margin-top: 10px; }
      }
      @media (max-height: 500px) and (min-width: 600px) {
        main { display: grid; grid-template-columns: 0.85fr 1.4fr; column-gap: 32px; }
        header { grid-column: 1; grid-row: 1; }
        .functions { grid-column: 2; grid-row: 1 / 3; }
        footer { grid-column: 1; grid-row: 2; align-self: end; margin-top: 12px; }
        h1 { font-size: 36px; }
        .intro { font-size: 15px; margin-bottom: 0; }
        th { font-size: 11px; }
        td { font-size: 12px; padding-top: 7px; padding-bottom: 7px; }
        th:first-child { width: 43%; }
        th:first-child, td:first-child { padding-right: 12px; }
        .requirements, .scope { font-size: 11px; }
      }

a { color: #fff; text-underline-offset: 4px; }
a:hover { color: #bcbcbc; }
nav { display: flex; flex-wrap: wrap; gap: 12px 24px; font-size: 13px; line-height: 1.5; }
:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.account-shell { width: min(100%, 390px); display: block; }
.account-shell header { margin-bottom: 28px; }
.account-shell .brand { display: inline-block; margin-bottom: 30px; font-size: 15px; text-decoration: none; }
.account-shell h1 { font-size: 32px; letter-spacing: -0.045em; line-height: 1.15; }
.account-shell .intro { margin: 12px 0 0; font-size: 16px; max-width: none; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
label { display: block; color: #bcbcbc; font-size: 13px; margin: 22px 0 8px; }
input, button { font: inherit; border: 1px solid #292929; border-radius: 4px; }
input { display: block; width: 100%; padding: 12px; color: #fff; background: #000; font-size: 16px; }
button { cursor: pointer; padding: 12px 16px; background: #000; color: #fff; }
button:hover { border-color: #939393; }
button:disabled { opacity: .5; cursor: default; }
.primary { width: 100%; background: #fff; color: #000; margin-top: 24px; }
.hint { font-size: 12px; line-height: 1.5; color: #939393; margin: 8px 0 0; }
.quantity-control { display: grid; grid-template-columns: 44px 1fr 44px; gap: 8px; }
.quantity-control button { padding: 8px; font-size: 20px; }
.quantity-control input { text-align: center; appearance: textfield; -moz-appearance: textfield; }
.quantity-control input::-webkit-inner-spin-button { appearance: none; }
.monthly-total { margin: 28px 0 0; font-size: 20px; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.status { font-size: 13px; color: #bcbcbc; line-height: 1.5; margin: 18px 0; }
.status:empty { display: none; }
.account-shell nav { margin-top: 26px; }
#paypal-buttons:not(:empty) { margin-top: 24px; }
#subscription-details p { border-top: 1px solid #292929; padding-top: 16px; font-size: 14px; line-height: 1.5; }
[hidden] { display: none !important; }