/* Shared visual treatment based on the supplied AOM Ran reference. */
:root {
  --bg: #163959;
  --panel: rgba(14, 43, 72, .8);
  --panel-light: rgba(34, 73, 110, .72);
  --line: rgba(181, 221, 250, .62);
  --ice: #b6eaff;
  --silver: #e4edf5;
  --muted: #bacfe3;
  --pink: #f2b1d0;
  --text: #f0f5fb;
  --serif: "Noto Serif TC", "PMingLiU", "MingLiU", serif;
  --font: var(--serif);
  --font-heading: var(--serif);
}

body {
  font-family: var(--serif);
  font-size: calc(17 * var(--interior-px, 1px));
  background: #183d60;
  letter-spacing: .035em;
}

body::before {
  background: linear-gradient(180deg, rgba(19, 45, 74, .03), rgba(20, 52, 88, .13)),
    url('/assets/background.jpg') center top / 100% auto repeat-y;
}

.container {
  width: min(calc(1800 * var(--interior-px, 1px)), calc(100% - clamp(calc(32 * var(--interior-px, 1px)), 6.25vw, calc(120 * var(--interior-px, 1px)))));
  margin-inline: auto;
}

.utility-bar {
  height: calc(24 * var(--interior-px, 1px));
  background: transparent;
  border: 0;
  letter-spacing: .06em;
}

.utility-inner { justify-content: flex-end; }
.utility-inner > span,
.utility-inner .desktop-only { display: none; }
.utility-inner > div { gap: calc(24 * var(--interior-px, 1px)); }
.utility-inner button { font-size: calc(11 * var(--interior-px, 1px)); color: #cbdfef; }

.site-header {
  background: transparent;
  border: 0;
  backdrop-filter: none;
}

.header-inner {
  min-height: clamp(calc(155 * var(--interior-px, 1px)), 13vw, calc(250 * var(--interior-px, 1px)));
  align-items: flex-end;
  gap: clamp(calc(26 * var(--interior-px, 1px)), 3.5vw, calc(68 * var(--interior-px, 1px)));
  padding-top: calc(14 * var(--interior-px, 1px));
  padding-bottom: calc(22 * var(--interior-px, 1px));
  border-bottom: 1px solid rgba(199, 230, 250, .72);
  box-shadow: 0 1px calc(3 * var(--interior-px, 1px)) #9accf322;
}

.brand {
  width: clamp(calc(235 * var(--interior-px, 1px)), 31.2vw, calc(490 * var(--interior-px, 1px)));
  padding: 0;
}

.brand img { filter: drop-shadow(0 calc(3 * var(--interior-px, 1px)) calc(9 * var(--interior-px, 1px)) #03183080); }

#main-nav {
  flex: 1;
  gap: 0;
  padding: 0;
  margin-bottom: calc(15 * var(--interior-px, 1px));
}

#main-nav > a {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  padding: calc(11 * var(--interior-px, 1px)) calc(16 * var(--interior-px, 1px));
  font-family: var(--serif);
  font-size: clamp(calc(14 * var(--interior-px, 1px)), 1.2vw, calc(23 * var(--interior-px, 1px)));
  line-height: 1.45;
  font-weight: 600;
  letter-spacing: .1em;
  text-shadow: 0 1px calc(6 * var(--interior-px, 1px)) #061c3280;
}

#main-nav > a > span { display: none; }

#main-nav > a:not(:first-child) {
  background-image: linear-gradient(#b3d5ef99, #b3d5ef99);
  background-size: 1px calc(25 * var(--interior-px, 1px));
  background-repeat: no-repeat;
  background-position: left center;
}

#main-nav > a::after {
  bottom: calc(-7 * var(--interior-px, 1px));
  height: calc(3 * var(--interior-px, 1px));
  border-radius: calc(3 * var(--interior-px, 1px));
}

#main-nav > a.active::after { width: min(80%, calc(110 * var(--interior-px, 1px))); }

#main-nav > a.nav-register {
  flex: 0 0 auto;
  padding: calc(11 * var(--interior-px, 1px)) clamp(calc(20 * var(--interior-px, 1px)), 2vw, calc(38 * var(--interior-px, 1px)));
  margin-right: calc(20 * var(--interior-px, 1px));
  color: #142b47;
  border: 1px solid #f7c9dd;
  border-radius: calc(17 * var(--interior-px, 1px));
  background: linear-gradient(120deg, #f9cee1, #e8a3c5);
  box-shadow: inset 0 0 calc(10 * var(--interior-px, 1px)) #ffe8f45c, 0 1px calc(10 * var(--interior-px, 1px)) #e5accc17;
  text-shadow: none;
}

#main-nav > a.nav-register::after { bottom: calc(-13 * var(--interior-px, 1px)); }

.button {
  border-radius: calc(22 * var(--interior-px, 1px));
  min-height: calc(51 * var(--interior-px, 1px));
  padding: calc(12 * var(--interior-px, 1px)) calc(29 * var(--interior-px, 1px));
  font-family: var(--serif);
  font-size: calc(18 * var(--interior-px, 1px));
  font-weight: 600;
  letter-spacing: .08em;
  border-color: #c3e4f5;
  box-shadow: inset 0 0 calc(12 * var(--interior-px, 1px)) #cceaff11;
}

.button-primary {
  color: #122944;
  border-color: #ffd2e5;
  background: linear-gradient(115deg, #f9cfdf, #e69ec1);
  box-shadow: inset 0 0 calc(13 * var(--interior-px, 1px)) #ffe7f550, 0 1px calc(10 * var(--interior-px, 1px)) #e4a7c323;
}

.button-ice {
  background: linear-gradient(115deg, #bdefff, #81c5f0);
  border-color: #d3f0ff;
}

.button-ghost {
  color: #d7ecf9;
  background: linear-gradient(120deg, #32638570, #1f4c6c80);
  border-color: #95c6e4;
}

.button:hover { box-shadow: inset 0 0 calc(12 * var(--interior-px, 1px)) #e8f6ff1a, 0 calc(3 * var(--interior-px, 1px)) calc(16 * var(--interior-px, 1px)) #b3ddff24; }

.tab {
  border-radius: calc(9 * var(--interior-px, 1px));
  border-color: #82b4d4;
  font-family: var(--serif);
  font-size: calc(18 * var(--interior-px, 1px));
  padding: calc(10 * var(--interior-px, 1px)) calc(27 * var(--interior-px, 1px));
  background: linear-gradient(130deg, #37658b64, #1a3e6080);
  color: #edf5fb;
  box-shadow: inset 0 0 calc(9 * var(--interior-px, 1px)) #92c4ed0a;
}

.tab.active {
  color: #162c46;
  background: linear-gradient(120deg, #fad0e1, #e9a1c4);
  border-color: #fbd5e5;
  box-shadow: inset 0 0 calc(12 * var(--interior-px, 1px)) #ffe1ed3b;
}

.panel {
  border: calc(1.5 * var(--interior-px, 1px)) solid #b5def5;
  border-radius: calc(14 * var(--interior-px, 1px));
  background: linear-gradient(130deg, rgba(23, 56, 90, .81), rgba(12, 38, 65, .84));
  box-shadow: inset 0 0 calc(15 * var(--interior-px, 1px)) #9cd5ff16, 0 0 calc(4 * var(--interior-px, 1px)) #aad8ff55;
  backdrop-filter: blur(calc(3 * var(--interior-px, 1px)));
}

.panel-title {
  padding-left: calc(28 * var(--interior-px, 1px));
  font-size: clamp(calc(26 * var(--interior-px, 1px)), 2.15vw, calc(40 * var(--interior-px, 1px)));
  font-weight: 500;
  letter-spacing: .11em;
  line-height: 1.45;
}

.panel-title::before {
  top: calc(9 * var(--interior-px, 1px));
  bottom: calc(7 * var(--interior-px, 1px));
  width: calc(6 * var(--interior-px, 1px));
  border-radius: calc(5 * var(--interior-px, 1px));
  background: linear-gradient(#ffd1e6, #e797c0);
  box-shadow: 0 0 calc(5 * var(--interior-px, 1px)) #f8b8d260;
}

.page-shell,
.sponsor-page { padding-top: calc(33 * var(--interior-px, 1px)); }

.page-heading { margin-bottom: calc(31 * var(--interior-px, 1px)); }
.page-heading .eyebrow { font-family: var(--serif); font-size: calc(13 * var(--interior-px, 1px)); letter-spacing: .16em; }
.page-heading h1,
.page-title { font-size: clamp(calc(38 * var(--interior-px, 1px)), 3.2vw, calc(60 * var(--interior-px, 1px))); font-weight: 500; letter-spacing: .13em; padding-left: calc(31 * var(--interior-px, 1px)); }
.page-heading h1::before,
.page-title::before { width: calc(7 * var(--interior-px, 1px)); top: calc(10 * var(--interior-px, 1px)); bottom: calc(9 * var(--interior-px, 1px)); background: linear-gradient(#ffd0e6, #e99fc4); box-shadow: 0 0 calc(5 * var(--interior-px, 1px)) #f8b8d250; }
.page-subtitle { font-size: calc(18 * var(--interior-px, 1px)); letter-spacing: .12em; color: #d5e5f2; padding-left: calc(32 * var(--interior-px, 1px)); }
.breadcrumb { font-size: calc(14 * var(--interior-px, 1px)); color: #d3e4f3; }
.eyebrow { font-family: var(--serif); }
.tag { border-radius: calc(20 * var(--interior-px, 1px)); font-size: calc(14 * var(--interior-px, 1px)); padding: calc(3 * var(--interior-px, 1px)) calc(17 * var(--interior-px, 1px)); background: #3e729449; border-color: #9bd5f3b0; }
.tag.pink { background: #d9a2c440; border-color: #efb7d3; }
.data-table { font-size: clamp(calc(15 * var(--interior-px, 1px)), 1.1vw, calc(20 * var(--interior-px, 1px))); }
.data-table th { font-size: calc(18 * var(--interior-px, 1px)); padding-top: calc(17 * var(--interior-px, 1px)); padding-bottom: calc(17 * var(--interior-px, 1px)); }
.data-table td { padding-top: calc(20 * var(--interior-px, 1px)); padding-bottom: calc(20 * var(--interior-px, 1px)); }
.data-table .news-title-link { font-size: calc(21 * var(--interior-px, 1px)); }
.news-table time { font-size: calc(17 * var(--interior-px, 1px)); color: #d0e0ef; }
.rank-character { font-size: calc(23 * var(--interior-px, 1px)); }
.academy-mark { font-size: calc(16 * var(--interior-px, 1px)); }
.search-field input,
.ranking-filters select { font-size: calc(17 * var(--interior-px, 1px)); }
.field,
input:not([type=checkbox]),
select,
textarea { border-color: #a9cee4; background: #2146676b; border-radius: calc(9 * var(--interior-px, 1px)); font-family: var(--serif); }
input::placeholder { color: #c5d6e4ae; }
.form-field > label { font-size: calc(17 * var(--interior-px, 1px)); }
.form-field .field-hint { font-size: calc(12 * var(--interior-px, 1px)); }
.form-agreement { font-size: calc(15 * var(--interior-px, 1px)); }
.form-agreement button { font-family: var(--serif); font-size: calc(15 * var(--interior-px, 1px)); }
.class-description { font-size: calc(18 * var(--interior-px, 1px)); }
.class-specs dt { font-size: calc(13 * var(--interior-px, 1px)); }
.class-specs dd { font-size: calc(17 * var(--interior-px, 1px)); }
.pagination button { min-width: calc(43 * var(--interior-px, 1px)); height: calc(38 * var(--interior-px, 1px)); border-radius: calc(7 * var(--interior-px, 1px)); font-size: calc(17 * var(--interior-px, 1px)); }
.plan-select { border-radius: calc(15 * var(--interior-px, 1px)); }
.currency-option { border-radius: calc(18 * var(--interior-px, 1px)); }
.sponsor-page .sponsor-flow li { font-size: calc(16 * var(--interior-px, 1px)); }
.sponsor-page .sponsor-flow-panel h2,
.sponsor-page .sponsor-table-top h2,
.sponsor-page .currency-heading h2 { font-size: calc(25 * var(--interior-px, 1px)); }
.sponsor-page .small-cross { font-size: calc(23 * var(--interior-px, 1px)); }
.sponsor-page .sponsor-table thead th { font-size: calc(21 * var(--interior-px, 1px)); }
.sponsor-page .sponsor-table thead small { font-size: calc(15 * var(--interior-px, 1px)); }
.sponsor-page .plan-price { font-size: calc(30 * var(--interior-px, 1px)); }
.sponsor-page .plan-select { font-size: calc(15 * var(--interior-px, 1px)); padding: calc(8 * var(--interior-px, 1px)) calc(12 * var(--interior-px, 1px)); }
.sponsor-page .support-link { font-size: calc(15 * var(--interior-px, 1px)); }
.sponsor-page .sponsor-table tbody .points-column strong { font-size: calc(30 * var(--interior-px, 1px)); }
.sponsor-page .sponsor-table tbody .points-column > span { font-size: calc(18 * var(--interior-px, 1px)); }
.sponsor-page .sponsor-table-note p { font-size: calc(15 * var(--interior-px, 1px)); }
.sponsor-page .sponsor-table-note p > span { font-size: calc(13 * var(--interior-px, 1px)); }
.sponsor-page .currency-option { font-size: calc(22 * var(--interior-px, 1px)); }
.sponsor-page .checkout-summary h2 { font-size: calc(34 * var(--interior-px, 1px)); }
.sponsor-page .checkout-summary dt { font-size: calc(17 * var(--interior-px, 1px)); }
.sponsor-page .checkout-summary dd { font-size: calc(22 * var(--interior-px, 1px)); }
.sponsor-page .checkout-summary .summary-amount { font-size: calc(38 * var(--interior-px, 1px)); }

.site-footer { padding-top: calc(62 * var(--interior-px, 1px)); padding-bottom: calc(45 * var(--interior-px, 1px)); }
.footer-mark { gap: calc(35 * var(--interior-px, 1px)); margin-bottom: calc(24 * var(--interior-px, 1px)); }
.footer-mark > span { max-width: calc(520 * var(--interior-px, 1px)); background: linear-gradient(90deg, transparent, #c0dbee); }
.footer-mark .footer-name,
.footer-mark .footer-brand-name { flex: 0 0 auto; max-width: none; height: auto; background: none; transform: none; font-family: var(--serif); font-size: calc(25 * var(--interior-px, 1px)); letter-spacing: .18em; color: #e3edf7; }
.footer-links a,
.footer-links button { color: #bad0e2; font-family: var(--serif); font-size: calc(13 * var(--interior-px, 1px)); }
.site-footer p { color: #a9c3da; font-size: calc(12 * var(--interior-px, 1px)); }
.site-footer p.footer-note { color: #bbd2e3; font-size: calc(12 * var(--interior-px, 1px)); }

@media (max-width: 1350px) {
  .header-inner { gap: calc(27 * var(--interior-px, 1px)); padding-bottom: calc(19 * var(--interior-px, 1px)); }
  #main-nav { margin-bottom: calc(12 * var(--interior-px, 1px)); }
  #main-nav > a { padding: calc(10 * var(--interior-px, 1px)) calc(9 * var(--interior-px, 1px)); font-size: calc(16 * var(--interior-px, 1px)); letter-spacing: .08em; }
  #main-nav > a.nav-register { padding: calc(9 * var(--interior-px, 1px)) calc(23 * var(--interior-px, 1px)); margin-right: calc(15 * var(--interior-px, 1px)); border-radius: calc(15 * var(--interior-px, 1px)); }
  #main-nav > a:not(:first-child) { background-size: 1px calc(21 * var(--interior-px, 1px)); }
  .button { font-size: calc(17 * var(--interior-px, 1px)); padding: calc(11 * var(--interior-px, 1px)) calc(25 * var(--interior-px, 1px)); min-height: calc(47 * var(--interior-px, 1px)); }
  .tab { font-size: calc(16 * var(--interior-px, 1px)); padding: calc(9 * var(--interior-px, 1px)) calc(23 * var(--interior-px, 1px)); }
  .data-table .news-title-link { font-size: calc(18 * var(--interior-px, 1px)); }
  .news-table time { font-size: calc(15 * var(--interior-px, 1px)); }
  .sponsor-page .sponsor-flow li { font-size: calc(13 * var(--interior-px, 1px)); }
  .sponsor-page .sponsor-table thead th { font-size: calc(17 * var(--interior-px, 1px)); }
  .sponsor-page .sponsor-table thead small { font-size: calc(12 * var(--interior-px, 1px)); }
  .sponsor-page .plan-price { font-size: calc(25 * var(--interior-px, 1px)); }
  .sponsor-page .plan-select { font-size: calc(12 * var(--interior-px, 1px)); padding: calc(7 * var(--interior-px, 1px)) calc(9 * var(--interior-px, 1px)); }
  .sponsor-page .support-link { font-size: calc(12 * var(--interior-px, 1px)); }
  .sponsor-page .sponsor-table tbody .points-column strong { font-size: calc(24 * var(--interior-px, 1px)); }
  .sponsor-page .sponsor-table tbody .points-column > span { font-size: calc(14 * var(--interior-px, 1px)); }
  .sponsor-page .sponsor-table-note p { font-size: calc(12 * var(--interior-px, 1px)); }
  .sponsor-page .sponsor-table-note p > span { font-size: calc(11 * var(--interior-px, 1px)); }
  .sponsor-page .currency-option { font-size: calc(19 * var(--interior-px, 1px)); }
  .sponsor-page .sponsor-flow-panel h2,
  .sponsor-page .sponsor-table-top h2,
  .sponsor-page .currency-heading h2 { font-size: calc(22 * var(--interior-px, 1px)); }
  .sponsor-page .checkout-summary h2 { font-size: calc(29 * var(--interior-px, 1px)); }
  .sponsor-page .checkout-summary dt { font-size: calc(14 * var(--interior-px, 1px)); }
  .sponsor-page .checkout-summary dd { font-size: calc(19 * var(--interior-px, 1px)); }
  .sponsor-page .checkout-summary .summary-amount { font-size: calc(31 * var(--interior-px, 1px)); }
}

@media (min-width: 761px) and (max-width: 1000px) {
  .header-inner { min-height: calc(152 * var(--interior-px, 1px)); gap: calc(22 * var(--interior-px, 1px)); padding-top: calc(13 * var(--interior-px, 1px)); padding-bottom: calc(19 * var(--interior-px, 1px)); }
  .brand { width: 31.2vw; }
  #main-nav { margin-bottom: calc(11 * var(--interior-px, 1px)); }
  #main-nav > a { font-size: calc(14 * var(--interior-px, 1px)); padding: calc(8 * var(--interior-px, 1px)) calc(7 * var(--interior-px, 1px)); letter-spacing: .02em; }
  #main-nav > a.nav-register { padding: calc(8 * var(--interior-px, 1px)) calc(19 * var(--interior-px, 1px)); margin-right: calc(10 * var(--interior-px, 1px)); border-radius: calc(12 * var(--interior-px, 1px)); }
  #main-nav > a:not(:first-child) { background-size: 1px calc(19 * var(--interior-px, 1px)); }
}

@media (max-width: 760px) {
  body { font-size: calc(15 * var(--interior-px, 1px)); }
  body::before { background-position: 34% top; }
  .container { width: calc(100% - calc(32 * var(--interior-px, 1px))); }
  .utility-bar { height: calc(24 * var(--interior-px, 1px)); }
  .utility-inner > div { gap: calc(18 * var(--interior-px, 1px)); }
  .utility-inner button { font-size: calc(10 * var(--interior-px, 1px)); }
  .header-inner { min-height: calc(112 * var(--interior-px, 1px)); align-items: center; gap: calc(20 * var(--interior-px, 1px)); padding-top: calc(4 * var(--interior-px, 1px)); padding-bottom: calc(15 * var(--interior-px, 1px)); }
  .brand { width: calc(225 * var(--interior-px, 1px)); padding: 0; }
  .menu-toggle { display: flex; width: calc(41 * var(--interior-px, 1px)); height: calc(40 * var(--interior-px, 1px)); justify-content: center; padding: calc(10 * var(--interior-px, 1px)); gap: calc(6 * var(--interior-px, 1px)); border: 1px solid #adcfe5; border-radius: calc(8 * var(--interior-px, 1px)); background: #173c5d66; }
  .menu-toggle span { width: calc(21 * var(--interior-px, 1px)); background: #e1eff8; }
  #main-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; padding: calc(20 * var(--interior-px, 1px)) calc(16 * var(--interior-px, 1px)); margin: 0; gap: calc(11 * var(--interior-px, 1px)); background: #143654f7; border-bottom: 1px solid #bbddef; box-shadow: 0 calc(10 * var(--interior-px, 1px)) calc(25 * var(--interior-px, 1px)) #07213b77; }
  #main-nav.open { display: grid; }
  #main-nav > a { font-size: calc(17 * var(--interior-px, 1px)); padding: calc(12 * var(--interior-px, 1px)) calc(10 * var(--interior-px, 1px)); border: 1px solid #82acca; border-radius: calc(8 * var(--interior-px, 1px)); line-height: 1.5; background: #325a7a45; }
  #main-nav > a:not(:first-child) { background-image: none; }
  #main-nav > a.nav-register { margin: 0; padding: calc(12 * var(--interior-px, 1px)) calc(10 * var(--interior-px, 1px)); border-radius: calc(8 * var(--interior-px, 1px)); }
  #main-nav > a.active::after { display: none; }
  .button { border-radius: calc(20 * var(--interior-px, 1px)); min-height: calc(45 * var(--interior-px, 1px)); padding: calc(11 * var(--interior-px, 1px)) calc(24 * var(--interior-px, 1px)); font-size: calc(15 * var(--interior-px, 1px)); }
  .tab { border-radius: calc(8 * var(--interior-px, 1px)); font-size: calc(14 * var(--interior-px, 1px)); padding: calc(8 * var(--interior-px, 1px)) calc(18 * var(--interior-px, 1px)); }
  .panel { border-radius: calc(11 * var(--interior-px, 1px)); border-width: 1px; }
  .panel-title { font-size: calc(27 * var(--interior-px, 1px)); padding-left: calc(23 * var(--interior-px, 1px)); letter-spacing: .08em; }
  .panel-title::before { width: calc(5 * var(--interior-px, 1px)); top: calc(7 * var(--interior-px, 1px)); bottom: calc(5 * var(--interior-px, 1px)); }
  .page-shell,
  .sponsor-page { padding-top: calc(25 * var(--interior-px, 1px)); }
  .page-heading { margin-bottom: calc(25 * var(--interior-px, 1px)); }
  .page-heading .eyebrow { font-size: calc(11 * var(--interior-px, 1px)); }
  .page-heading h1,
  .page-title { font-size: calc(35 * var(--interior-px, 1px)); padding-left: calc(24 * var(--interior-px, 1px)); letter-spacing: .12em; }
  .page-heading h1::before,
  .page-title::before { width: calc(5 * var(--interior-px, 1px)); top: calc(7 * var(--interior-px, 1px)); bottom: calc(6 * var(--interior-px, 1px)); }
  .page-subtitle { font-size: calc(13 * var(--interior-px, 1px)); padding-left: calc(25 * var(--interior-px, 1px)); letter-spacing: .07em; }
  .breadcrumb { font-size: calc(12 * var(--interior-px, 1px)); }
  .tag { font-size: calc(11 * var(--interior-px, 1px)); padding: calc(2 * var(--interior-px, 1px)) calc(10 * var(--interior-px, 1px)); }
  .data-table { font-size: calc(14 * var(--interior-px, 1px)); }
  .data-table th { font-size: calc(13 * var(--interior-px, 1px)); padding-top: calc(14 * var(--interior-px, 1px)); padding-bottom: calc(14 * var(--interior-px, 1px)); }
  .data-table td { padding-top: calc(16 * var(--interior-px, 1px)); padding-bottom: calc(16 * var(--interior-px, 1px)); }
  .data-table .news-title-link { font-size: calc(15 * var(--interior-px, 1px)); }
  .news-table time { font-size: calc(11 * var(--interior-px, 1px)); }
  .rank-character { font-size: calc(18 * var(--interior-px, 1px)); }
  .academy-mark { font-size: calc(12 * var(--interior-px, 1px)); }
  .search-field input,
  .ranking-filters select { font-size: calc(14 * var(--interior-px, 1px)); }
  .form-field > label { font-size: calc(15 * var(--interior-px, 1px)); }
  .form-field .field-hint { font-size: calc(11 * var(--interior-px, 1px)); }
  .form-agreement,
  .form-agreement button { font-size: calc(12 * var(--interior-px, 1px)); }
  .class-description { font-size: calc(15 * var(--interior-px, 1px)); }
  .class-specs dt { font-size: calc(11 * var(--interior-px, 1px)); }
  .class-specs dd { font-size: calc(14 * var(--interior-px, 1px)); }
  .pagination button { min-width: calc(33 * var(--interior-px, 1px)); height: calc(33 * var(--interior-px, 1px)); font-size: calc(13 * var(--interior-px, 1px)); }
  .sponsor-page .sponsor-flow li { font-size: calc(11 * var(--interior-px, 1px)); }
  .sponsor-page .sponsor-table thead th { font-size: calc(16 * var(--interior-px, 1px)); }
  .sponsor-page .sponsor-table thead small { font-size: calc(11 * var(--interior-px, 1px)); }
  .sponsor-page .plan-price { font-size: calc(23 * var(--interior-px, 1px)); }
  .sponsor-page .plan-select { font-size: calc(11 * var(--interior-px, 1px)); padding: calc(7 * var(--interior-px, 1px)) calc(9 * var(--interior-px, 1px)); }
  .sponsor-page .support-link { font-size: calc(11 * var(--interior-px, 1px)); }
  .sponsor-page .sponsor-table tbody .points-column strong { font-size: calc(23 * var(--interior-px, 1px)); }
  .sponsor-page .sponsor-table tbody .points-column > span { font-size: calc(12 * var(--interior-px, 1px)); }
  .sponsor-page .sponsor-table-note p,
  .sponsor-page .sponsor-table-note p > span { font-size: calc(10 * var(--interior-px, 1px)); }
  .sponsor-page .currency-option { font-size: calc(15 * var(--interior-px, 1px)); border-radius: calc(13 * var(--interior-px, 1px)); }
  .sponsor-page .sponsor-flow-panel h2,
  .sponsor-page .sponsor-table-top h2,
  .sponsor-page .currency-heading h2 { font-size: calc(20 * var(--interior-px, 1px)); }
  .sponsor-page .checkout-summary h2 { font-size: calc(28 * var(--interior-px, 1px)); }
  .sponsor-page .checkout-summary dt { font-size: calc(13 * var(--interior-px, 1px)); }
  .sponsor-page .checkout-summary dd { font-size: calc(18 * var(--interior-px, 1px)); }
  .sponsor-page .checkout-summary .summary-amount { font-size: calc(32 * var(--interior-px, 1px)); }
  .site-footer { padding-top: calc(42 * var(--interior-px, 1px)); padding-bottom: calc(30 * var(--interior-px, 1px)); }
  .footer-mark { gap: calc(17 * var(--interior-px, 1px)); }
  .footer-mark .footer-name,
  .footer-mark .footer-brand-name { font-size: calc(16 * var(--interior-px, 1px)); letter-spacing: .1em; }
  .footer-links a,
  .footer-links button { font-size: calc(11 * var(--interior-px, 1px)); }
  .site-footer p { font-size: calc(10 * var(--interior-px, 1px)); }
  .site-footer p.footer-note { font-size: calc(11 * var(--interior-px, 1px)); }
}

@media (max-width: 390px) {
  .brand { width: calc(208 * var(--interior-px, 1px)); }
  .header-inner { min-height: calc(104 * var(--interior-px, 1px)); }
  .panel-title { font-size: calc(25 * var(--interior-px, 1px)); }
  .page-heading h1,
  .page-title { font-size: calc(32 * var(--interior-px, 1px)); }
  .form-agreement,
  .form-agreement button { font-size: calc(11 * var(--interior-px, 1px)); }
  .sponsor-page .currency-option { font-size: calc(14 * var(--interior-px, 1px)); }
}