:root {
    font-size: min(13.333333vw, 100px);
    --u: calc(1rem / 144);
    --paper: #fdfbfb;
    --ink: #1e1e1e;
    --red: #f21820;
    --sans: "Noto Sans SC", "Noto Sans CJK SC", "PingFang SC", "Microsoft YaHei", sans-serif;
    --serif: "Noto Serif SC", "Noto Serif CJK SC", "Songti SC", SimSun, serif;
    --latin: Inter, Arial, sans-serif;
    --badge-fill: linear-gradient(180deg, #ff2524, #ed080a 50%, #c90000);
}

*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, p, ul, ol { margin: 0; }

body {
    background: #000;
    color: var(--ink);
    font-family: var(--sans);
    font-size: calc(30 * var(--u));
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

img { display: block; }

.container {
    width: 7.5rem;
    max-width: 100%;
    margin: 0 auto;
}

.content {
    overflow: hidden;
    background: var(--paper);
}

/* Layout coordinates use the 1080-pixel Figma frame as their reference. */
.layer {
    position: absolute;
    left: calc(var(--x, 0) * var(--u));
    top: calc(var(--y, 0) * var(--u));
    width: calc(var(--w) * var(--u));
    height: auto;
}

.raster {
    height: calc(var(--h) * var(--u));
    object-fit: cover;
}

.top_pic {
    position: relative;
    height: calc(1373 * var(--u));
    background: #fff8f8;
}

.hero-band {
    position: absolute;
    top: calc(225 * var(--u));
    width: 100%;
    height: calc(222 * var(--u));
    background: linear-gradient(180deg,
        rgba(255, 249, 246, 0), rgba(255, 249, 246, .96) 13%,
        rgba(255, 250, 248, .99) 58%, rgba(255, 250, 248, .97) 75%,
        rgba(255, 250, 248, .87) 84%, rgba(255, 250, 248, 0));
}

.hero-title {
    color: #c80c1a;
    font-size: calc(114 * var(--u));
    font-weight: 900;
    line-height: 1;
    letter-spacing: calc(-5.1 * var(--u));
    white-space: nowrap;
}

.hero-title__first,
.hero-title__second {
    position: absolute;
    top: calc(9 * var(--u));
    transform: matrix(1, 0, -.126, .99203, 0, 0);
    transform-origin: left top;
    background-image: linear-gradient(180deg, #f83235, #e4131d 48%, #b70811);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

.hero-title__first { left: calc(108 * var(--u)); }
.hero-title__second { left: calc(565 * var(--u)); }

.hero-title__dark {
    background-image: linear-gradient(180deg, #52251e, #210e0d);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

.entry-stack {
    display: grid;
    gap: calc(2 * var(--u));
}

.primary-entries { padding-bottom: calc(19 * var(--u)); }

.entry-card {
    position: relative;
    height: calc(211 * var(--u));
    background: url("img/card-gloss.png") center top / 100% auto no-repeat;
}

.entry-lockup {
    position: absolute;
    left: calc(72 * var(--u));
    top: calc(47 * var(--u));
    width: calc(323 * var(--u));
    height: calc(105 * var(--u));
    color: #191415;
    white-space: nowrap;
}

.lockup-name, .lockup-english, .lockup-site, .lockup-stamp { position: absolute; }

.lockup-name {
    left: calc(130 * var(--u));
    top: calc(4 * var(--u));
    font: 900 calc(40 * var(--u)) / 1 var(--serif);
    letter-spacing: calc(-1.4 * var(--u));
}

.lockup-english {
    left: calc(131 * var(--u));
    top: calc(48 * var(--u));
    font: 800 calc(10.5 * var(--u)) / 1 var(--latin);
    letter-spacing: calc(.06 * var(--u));
}

.lockup-site {
    left: calc(82.5 * var(--u));
    top: calc(65.5 * var(--u));
    color: #c70f1e;
    font: 900 calc(35 * var(--u)) / 1 var(--latin);
    letter-spacing: calc(1.8 * var(--u));
}

.primary-card--second .lockup-site {
    left: calc(84.5 * var(--u));
    top: calc(67.5 * var(--u));
}

.lockup-stamp {
    left: calc(286 * var(--u));
    top: calc(19.5 * var(--u));
    color: #fff8f0;
    font-size: calc(13.7 * var(--u));
    font-weight: 700;
    line-height: calc(16 * var(--u));
}

.entry-divider {
    position: absolute;
    top: calc(53 * var(--u));
    left: calc(412 * var(--u));
    width: calc(2 * var(--u));
    height: calc(87 * var(--u));
    background: #e70010;
}

.primary-title, .primary-domain {
    position: absolute;
    left: calc(444 * var(--u));
    white-space: nowrap;
}

.primary-title {
    top: calc(58 * var(--u));
    color: #141414;
    font-size: calc(44 * var(--u));
    font-weight: 900;
    line-height: 1;
    letter-spacing: calc(-2.98 * var(--u));
}

.primary-card--second .primary-title { letter-spacing: calc(-6.12 * var(--u)); }

.primary-domain {
    top: calc(103 * var(--u));
    color: var(--red);
    font-size: calc(30 * var(--u));
    line-height: 1;
    letter-spacing: calc(.38 * var(--u));
}

/* The button is a separate control placed above each card's image. */
.download-button {
    --visual-height: calc(92 * var(--u));
    --tap-height: max(44px, var(--visual-height));
    --tap-padding: calc((var(--tap-height) - var(--visual-height)) / 2);
    position: absolute;
    z-index: 1;
    top: calc(54 * var(--u) - var(--tap-padding));
    left: calc(760 * var(--u));
    width: calc(258 * var(--u));
    height: var(--tap-height);
    padding: 0;
    border: 0;
    border-radius: calc(46 * var(--u));
    background: transparent;
    color: #fff;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.download-button::before,
.download-button::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.download-button::before {
    top: calc(3 * var(--u) + var(--tap-padding));
    inset-inline: var(--u);
    height: calc(86 * var(--u));
    border: calc(1.25 * var(--u)) solid transparent;
    border-radius: calc(43 * var(--u));
    background:
        linear-gradient(180deg, #ff5958, #fb222a 34%, #e50c1b 72%, #b90511) padding-box,
        linear-gradient(180deg, rgba(255, 208, 193, .92), rgba(252, 116, 116, .58) 43%, rgba(185, 17, 24, .9)) border-box;
    box-shadow: 0 calc(3 * var(--u)) calc(7 * var(--u)) rgba(193, 15, 33, .22);
}

.download-button::after {
    top: calc(4.5 * var(--u) + var(--tap-padding));
    left: calc(3 * var(--u));
    right: calc(3 * var(--u));
    height: calc(82.5 * var(--u));
    border-radius: calc(41.25 * var(--u));
    background: linear-gradient(180deg, rgba(255, 255, 255, .29), rgba(255, 224, 215, .12) 18%, transparent 47%);
}

.download-button > img, .download-button > span { position: absolute; z-index: 1; }

.download-button > img {
    top: calc(26.5 * var(--u) + var(--tap-padding));
    left: calc(31 * var(--u));
    width: calc(34 * var(--u));
    height: auto;
}

.download-button > span {
    top: calc(22.8 * var(--u) + var(--tap-padding));
    left: calc(76 * var(--u));
    font-size: calc(39 * var(--u));
    font-weight: 900;
    line-height: calc(44 * var(--u));
    letter-spacing: calc(-.75 * var(--u));
    white-space: nowrap;
}

.download-button:focus-visible { outline: 2px solid #760710; outline-offset: 3px; }
.download-button:active { filter: brightness(.95); }

.affiliates-heading {
    position: relative;
    height: calc(77 * var(--u));
    color: #dc1a25;
}

.affiliates-heading::before, .affiliates-heading::after {
    content: "";
    position: absolute;
    top: calc(28 * var(--u));
    height: calc(2 * var(--u));
    background: currentColor;
}

.affiliates-heading::before { left: calc(42 * var(--u)); width: calc(163 * var(--u)); }
.affiliates-heading::after { left: calc(881 * var(--u)); width: calc(164 * var(--u)); }

.affiliates-heading h2 {
    position: absolute;
    left: calc(365 * var(--u));
    top: calc(5.5 * var(--u));
    font-size: calc(43 * var(--u));
    line-height: 1;
    letter-spacing: calc(2.43 * var(--u));
    white-space: nowrap;
}

.heading-stars {
    position: absolute;
    top: calc(13 * var(--u));
    display: flex;
    gap: calc(13.166 * var(--u));
}

.heading-stars img { width: calc(32.334 * var(--u)); height: auto; }
.heading-stars--left { left: calc(217.333 * var(--u)); }
.heading-stars--right { left: calc(749.333 * var(--u)); }
.affiliate-entries { padding-top: calc(4 * var(--u)); padding-bottom: var(--u); }
.affiliate-card .entry-divider { top: calc(56 * var(--u)); left: calc(512 * var(--u)); }

.affiliate-product, .affiliate-description {
    position: absolute;
    color: var(--red);
    font-size: calc(28 * var(--u));
    line-height: 1;
    white-space: nowrap;
}

.affiliate-product {
    top: calc(65 * var(--u));
    left: calc(538 * var(--u));
    letter-spacing: calc(2.06 * var(--u));
}

.affiliate-description {
    top: calc(104 * var(--u));
    left: calc(537 * var(--u));
    letter-spacing: calc(.39 * var(--u));
}

.notice {
    position: relative;
    height: calc(531 * var(--u));
}

.notice-title {
    position: absolute;
    top: calc(69.5 * var(--u));
    left: calc(434 * var(--u));
    color: white;
    font-size: calc(54 * var(--u));
    font-weight: 900;
    line-height: 1;
    letter-spacing: var(--u);
}

.notice-list, .seals { list-style: none; padding: 0; }

.notice-row {
    position: absolute;
    top: calc(var(--row-y) * var(--u));
    inset-inline: 0;
    height: calc(43 * var(--u));
    font-weight: 700;
    white-space: nowrap;
}

.notice-step { height: calc(49 * var(--u)); }
.notice-bullet, .notice-number { position: absolute; height: auto; }

.notice-bullet {
    left: calc(81.5 * var(--u));
    top: calc(var(--bullet-y) * var(--u));
    width: calc(27 * var(--u));
}

.notice-number {
    left: calc(81 * var(--u));
    top: calc(var(--number-y) * var(--u));
    width: calc(33 * var(--u));
}

.notice-digit {
    position: absolute;
    left: calc(var(--digit-x) * var(--u));
    top: calc(var(--digit-y) * var(--u));
    color: white;
    font-size: calc(25 * var(--u));
    line-height: 1;
    letter-spacing: calc(var(--digit-track) * var(--u));
}

.notice-line, .step-copy, .notice-tag > span {
    position: absolute;
    font-size: calc(var(--size) * var(--u));
    line-height: 1;
    letter-spacing: calc(var(--tracking) * var(--u));
}

.notice-line { left: calc(var(--copy-x) * var(--u)); top: calc(6 * var(--u)); }
.step-copy { left: calc(var(--copy-x) * var(--u)); top: calc(var(--copy-y) * var(--u)); }

.notice-tag {
    position: absolute;
    left: calc(var(--tag-x) * var(--u));
    top: calc(4 * var(--u));
    width: calc(var(--tag-w) * var(--u));
    height: calc(var(--tag-h) * var(--u));
    border-radius: calc(var(--tag-h) * var(--u) / 2);
    background: var(--badge-fill);
    color: white;
}

.notice-tag > span { left: calc(var(--label-x) * var(--u)); top: calc(var(--label-y) * var(--u)); }

.footer {
    position: relative;
    height: calc(343 * var(--u));
}

.footer-rule {
    position: absolute;
    top: var(--u);
    left: calc(31 * var(--u));
    width: calc(1018 * var(--u));
    height: calc(3 * var(--u));
    background: #db111a;
}

.providers, .seals {
    position: absolute;
    inset-inline: 0;
}

.providers { top: calc(19 * var(--u)); height: calc(80 * var(--u)); }

.provider-pg {
    position: absolute;
    top: calc(6 * var(--u));
    left: calc(30 * var(--u));
    width: calc(198 * var(--u));
    height: calc(66 * var(--u));
    color: #161517;
    font-family: var(--latin);
}

.provider-pg__text, .provider-pg__tm { position: absolute; }

.provider-pg__text {
    top: calc(7 * var(--u));
    left: calc(111 * var(--u));
    font-size: calc(15 * var(--u));
    font-weight: 900;
    line-height: calc(15.3 * var(--u));
    letter-spacing: calc(-.12 * var(--u));
}

.provider-pg__tm {
    top: calc(8 * var(--u));
    left: calc(185 * var(--u));
    font-size: calc(10.5 * var(--u));
    font-weight: 800;
    line-height: 1;
}

.provider-divider, .seal-divider {
    position: absolute;
    left: calc(var(--x) * var(--u));
    width: var(--u);
}

.provider-divider { top: calc(17 * var(--u)); height: calc(32 * var(--u)); background: #f5a2a3; }
.seal-divider { top: calc(129 * var(--u)); height: calc(37 * var(--u)); background: #ef8c91; }
.seals { top: calc(108 * var(--u)); height: calc(81 * var(--u)); }

.seal {
    position: absolute;
    left: calc(var(--x) * var(--u));
    top: 0;
    width: calc(224 * var(--u));
    height: calc(81 * var(--u));
}

.seal > img { left: 0; }

.seal-copy {
    position: absolute;
    left: calc(var(--x) * var(--u));
    top: calc(var(--y) * var(--u));
    font-size: calc(var(--size, 20) * var(--u));
    font-weight: 700;
    line-height: 1;
    letter-spacing: calc(var(--tracking) * var(--u));
    white-space: nowrap;
}

.copyright {
    position: absolute;
    top: calc(214.5 * var(--u));
    left: calc(185 * var(--u));
    color: #303030;
    font-size: calc(29 * var(--u));
    font-weight: 500;
    line-height: 1;
    letter-spacing: calc(-.21 * var(--u));
    white-space: pre;
}

.download-status {
    position: fixed;
    z-index: 2;
    bottom: max(22px, env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    padding: 10px 18px;
    border-radius: 24px;
    background: #271015;
    color: white;
    font-size: 14px;
    line-height: 1.4;
    white-space: nowrap;
    pointer-events: none;
}

.download-status:empty { padding: 0; }