/* r4: QQ-inspired composition, original animated glass artwork. */
:root {
  --ink: #172336;
  --muted: #5d6b7c;
  --blue: #0878df;
  --line: #e5e9ef;
  --page: #fff;
  scroll-padding-top: 94px;
}
.section-wrap { width: calc(100% - 112px); max-width: 1200px; }
.site-header { background: #ffffffed; border-bottom: 1px solid #e5e9ef99; }
.site-header.scrolled { background: #ffffffed; box-shadow: 0 3px 22px #17233608; }
.header-inner { height: 72px; max-width: 1440px; padding-inline: 56px; }
.brand { gap: 10px; }
.brand img { width: 37px; }
.brand > span { font-size: 25px; letter-spacing: 1px; }
.brand-sub { font-size: 9px; letter-spacing: 2px; }
.desktop-nav { gap: 40px; margin-right: 30px; font-size: 15px; }
.button { border-radius: 32px; padding: 15px 25px; background: #0b77d8; box-shadow: none; font-weight: 500; }
.button:hover { background: #006ad0; box-shadow: 0 9px 25px #0b77d821; }
.button-small { min-height: 42px; font-size: 13px; padding: 9px 19px; }
.button-outline { color: #116ec4; background: #fff; border-color: #d1e4f6; }
.button-outline:hover { background: #f2f8fe; }
.button-white { background: #ffffffd9; color: #182c41; border-color: #ffffff65; }
.button-white:hover { background: #fffffff5; color: #0d61aa; }
.button-muted { background: #ffffff0a; color: #bed4e6; border-color: #ffffff2b; }
.text-link { font-size: 14px; font-weight: 500; }
.hero {
  --scene-a: #203677;
  --scene-b: #1279a4;
  --scene-c: #776bb8;
  --scene-d: #bad9e8;
  --scene-e: #e3cdd6;
  background: #1f5480;
  min-height: calc(100svh - 72px);
  color: #fff;
}
.hero[data-palette="violet"] { --scene-a: #37357d; --scene-b: #645497; --scene-c: #a888bd; --scene-d: #dbd3e9; --scene-e: #dec4c2; }
.hero[data-palette="mint"] { --scene-a: #164f65; --scene-b: #238886; --scene-c: #3a75a7; --scene-d: #c5e3db; --scene-e: #d3dce8; }
.hero-background { inset: 0; background: linear-gradient(180deg, var(--scene-a), var(--scene-b) 40%, var(--scene-d)); }
.hero-color-field {
  position: absolute; inset: -22%;
  background: radial-gradient(ellipse at 15% 21%, var(--scene-b) 0, transparent 38%),
    radial-gradient(ellipse at 67% 26%, var(--scene-c) 0, transparent 42%),
    radial-gradient(ellipse at 79% 85%, var(--scene-e) 0, transparent 42%),
    radial-gradient(ellipse at 34% 92%, var(--scene-d) 0, transparent 43%),
    linear-gradient(150deg, var(--scene-a) 12%, var(--scene-b) 41%, var(--scene-c) 62%, var(--scene-d) 89%);
  animation: glassFlow 18s ease-in-out infinite alternate;
  transition: background 900ms;
  will-change: transform;
}
.hero-ribs {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, #0d255815 0, #ffffff04 2px, #ffffff15 15px, #ffffff1c 21px, #0726551a 36px, #091c4624 43px, #ffffff29 45px, #ffffff05 47px);
  background-size: 47px 100%;
  mix-blend-mode: soft-light;
  pointer-events: none;
}
.hero-sheen {
  position: absolute; inset: -40%;
  background: radial-gradient(ellipse at 70% 58%, #bdfafa55, transparent 26%), radial-gradient(ellipse at 17% 70%, #adcbff36, transparent 26%);
  mix-blend-mode: screen;
  animation: glassLight 13s ease-in-out infinite alternate;
  pointer-events: none;
}
.hero-background::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #15315b12 0, #07294914 50%, #f3f6fb0d 100%); }
.hero-moon-halo {
  position: absolute; width: clamp(270px, 34vw, 510px); aspect-ratio: 1;
  left: 79%; top: 24%; transform: translate(-50%, -50%);
  background: radial-gradient(circle, #eff8ff29 0%, #e5f4ff12 13%, #b9d9ff0b 29%, transparent 65%);
  mix-blend-mode: screen; pointer-events: none;
}
.hero-moon-halo::before {
  content: ""; position: absolute; width: 19%; aspect-ratio: 1; left: 40.5%; top: 40.5%; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #f5fbff23, #e7f3ff10 58%, #cedfff06 75%);
  border: 1px solid #eef8ff0d; box-shadow: 0 0 25px #d9efff12, 0 0 68px #cadfff0d;
}
.hero-pointer-light { position: absolute; inset: 0; opacity: 0; mix-blend-mode: screen; pointer-events: none; transition: opacity 480ms ease; }
.hero.pointer-active .hero-pointer-light { opacity: 1; transition-duration: 260ms; }
.hero-pointer-light i {
  position: absolute; top: 0; left: 0; width: clamp(360px, 43vw, 680px); aspect-ratio: 1; border-radius: 50%;
  transform: translate3d(var(--glow-x, -1000px), var(--glow-y, -1000px), 0) translate(-50%, -50%);
  background: radial-gradient(circle, hsl(var(--glow-hue, 210) 93% 86% / .36), hsl(var(--glow-hue, 210) 90% 77% / .17) 21%, hsl(var(--glow-hue, 210) 90% 71% / .05) 44%, transparent 68%);
  will-change: transform;
}
.hero-pointer-light i:last-child {
  width: clamp(240px, 29vw, 450px);
  transform: translate3d(calc(var(--glow-x, -1000px) + 110px), calc(var(--glow-y, -1000px) - 70px), 0) translate(-50%, -50%);
  background: radial-gradient(circle, hsl(calc(var(--glow-hue, 210) + 58) 87% 88% / .2), transparent 65%);
}
.hero-ribs::after {
  content: ""; position: absolute; inset: 0; opacity: 0;
  background: repeating-linear-gradient(90deg, transparent 0 20px, #ecfbff1a 21px, transparent 36px, #eaffff3d 44px, transparent 47px);
  mask-image: radial-gradient(ellipse 230px 300px at var(--glow-x, -1000px) var(--glow-y, -1000px), #000, transparent 75%);
  transition: opacity 480ms ease;
}
.hero.pointer-active .hero-ribs::after { opacity: .8; }
@keyframes glassFlow { from { transform: translate(-3%, 2%) scale(1.04) rotate(-3deg); } to { transform: translate(5%, -3%) scale(1.13) rotate(4deg); } }
@keyframes glassLight { from { transform: translate(-6%, 3%); opacity: .3; } to { transform: translate(8%, -4%); opacity: .8; } }
.motion-paused :is(.hero-color-field, .hero-sheen) { animation-play-state: paused; }
.hero-inner { display: flex; flex-direction: column; justify-content: center; min-height: calc(100svh - 72px); gap: 0; padding: 110px 0 170px; }
.hero-copy { text-align: center; width: 100%; }
.hero-kicker { font-size: 16px; letter-spacing: 4px; color: #e7f6ff; }
.hero h1 { font-size: clamp(45px, 5.6vw, 80px); font-weight: 400; line-height: 1.35; letter-spacing: 2px; margin-top: 22px; text-shadow: 0 0 30px #d9f5ff20; }
.hero h1 > span { color: inherit; background: none; -webkit-text-fill-color: currentColor; }
.hero h1 { animation: titleGlow 4s ease-in-out infinite alternate; }
@keyframes titleGlow { from { text-shadow: 0 0 14px #d8f6ff0f; } to { text-shadow: 0 0 20px #e5f7ff4a, 0 0 40px #b4e7ff35; } }
.motion-paused .hero h1 { animation-play-state: paused; }
.hero-description { color: #edf5fe; font-size: 16px; margin-top: 19px; line-height: 1.8; }
.hero-actions { display: flex; flex-direction: column; align-items: center; margin-top: 35px; gap: 17px; }
.hero-actions .button { min-width: 320px; min-height: 70px; font-size: 22px; font-weight: 500; padding: 17px 29px; gap: 13px; border-radius: 40px; backdrop-filter: blur(25px); box-shadow: 0 17px 40px #19385716, inset 0 1px 1px #ffffff6e; }
.hero-actions .button svg { width: 23px; height: 23px; }
.hero-version { display: inline-block; color: #f3f8ff; background: #123250ad; border: 1px solid #ffffff1a; border-radius: 20px; padding: 5px 13px; font-size: 13px; letter-spacing: .4px; margin-top: 18px; }
.hero-secondary { display: inline-flex; gap: 10px; font-size: 15px; padding: 5px 10px; color: #f2f7fc; margin-top: 15px; }
.hero-secondary:hover { color: #fff; }
.hero-secondary span { font-size: 20px; }
.hero-bottom { bottom: 38px; font-size: 12px; color: #e6f3ff; }
.hero-palette { display: flex; align-items: center; gap: 10px; }
.hero-palette > span { font-size: 11px; color: #f2f7ff; margin-right: 3px; }
.hero-palette button { padding: 0; width: 29px; height: 29px; border-radius: 50%; background: #bacfee; border: 4px solid #ffffff75; box-shadow: 0 0 0 1px transparent; transition: box-shadow 200ms, transform 200ms; }
.hero-palette button[data-palette="violet"] { background: #b6a4d9; }
.hero-palette button[data-palette="mint"] { background: #8bbeb7; }
.hero-palette button[aria-pressed="true"] { box-shadow: 0 0 0 2px #fff; }
.hero-palette button:hover { transform: scale(1.13); }
.palette-controls { display: flex; align-items: center; gap: 2px; }
.palette-label { font-size: 11px; color: #284966; margin-right: 8px; }
.palette-button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; }
.palette-swatch { display: block; width: 21px; height: 21px; border-radius: 50%; background: #bacfee; border: 3px solid #ffffff75; box-shadow: 0 0 0 2px transparent; transition: box-shadow 200ms, transform 200ms; }
[data-palette="violet"] .palette-swatch { background: #b6a4d9; }
[data-palette="mint"] .palette-swatch { background: #8bbeb7; }
.palette-button[aria-pressed="true"] .palette-swatch { box-shadow: 0 0 0 2px #fff; }
.palette-button:hover .palette-swatch { transform: scale(1.15); }
.motion-toggle { color: #284966; background: #ffffff32; border-color: #ffffff65; min-height: 38px; padding-inline: 13px; font-size: 11px; }
.scroll-cue { color: #284966; font-size: 12px; }
.scroll-cue > span { border-color: #28496675; }
.scroll-cue > span::after { background: #284966; }
.release-strip { padding-block: 32px; border-color: #eef0f4; }
.release-strip p, .release-strip .text-link { font-size: 13px; }
.pill { font-size: 12px; border-radius: 20px; padding: 6px 11px; }
.showcase-section { padding-top: 100px; padding-bottom: 60px; }
.section-heading { margin-bottom: 52px; gap: 55px; }
.eyebrow { font-size: 12px; font-weight: 500; letter-spacing: 1.5px; color: #497fa8; }
.section-heading h2, .download-copy h2, .help-intro h2 { font-size: clamp(32px, 3.5vw, 48px); font-weight: 500; line-height: 1.4; letter-spacing: -1px; }
.section-description { font-size: 15px; max-width: 340px; }
.section-description span { font-size: 13px; }
.showcase-wrap { width: 100%; max-width: 1000px; margin-inline: auto; padding: 50px 70px 32px; background: radial-gradient(ellipse at 50% 0, #e5edf6, #f6f8fb 65%); border-radius: 24px; }
.showcase-aura { display: none; }
.platform-preview { border-radius: 13px; border-color: #ffffff; transform: rotateX(calc(1deg + var(--tilt-x, 0deg))) rotateY(calc(var(--tilt-y, 0deg))); box-shadow: 0 28px 54px #304f751d, 0 1px 4px #304f7510; background: #f9fbfe; }
.platform-preview:hover { box-shadow: 0 32px 58px #304f7528; }
.preview-titlebar { height: 52px; font-size: 13px; }
.preview-sidebar { width: 172px; padding: 25px 12px; gap: 8px; background: #eff4f9; }
.preview-menu { font-size: 12px; min-height: 46px; padding-inline: 11px; gap: 10px; }
.preview-menu svg { width: 18px; height: 18px; }
.preview-content { padding: 25px 30px 21px; }
.preview-welcome { font-size: 12px; color: #526c81; }
.showcase-panel { min-height: 270px; }
.showcase-panel h3 { font-size: 25px; font-weight: 500; margin-top: 10px; }
.mini-banner { height: 104px; padding: 20px 24px; background: linear-gradient(115deg, #deedf9, #eef6fc); }
.mini-banner span { font-size: 12px; }
.mini-banner strong { font-size: 18px; }
.mini-banner img { width: 70px; }
.mini-section-heading { font-size: 13px; }
.mini-empty strong, .preview-ticket strong { font-size: 13px; }
.mini-empty p, .mini-bottom, .preview-helper, .preview-state-row, .preview-ticket p { font-size: 12px; color: #4d6579; }
.mini-empty { padding-block: 20px; }
.mini-bottom { margin-top: 20px; padding-top: 14px; }
.showcase-caption { color: #556f88; font-size: 12px; margin-top: 29px; }
.caption-indicator { border-color: #527ea2; }
.preview-member-card { height: 140px; padding: 25px; background: linear-gradient(120deg, #17588f, #6f9ebc); }
.preview-member-card span { font-size: 11px; }
.preview-member-card strong { font-size: 28px; }
.preview-ticket { padding: 13px 14px; }
.platform-section { padding-top: 68px; padding-bottom: 120px; }
.feature-layout { grid-template-columns: 310px 1fr; gap: 48px; }
.feature-tab { border-radius: 13px; padding: 27px 21px; }
.feature-tab strong { font-size: 19px; font-weight: 500; }
.feature-tab small { font-size: 13px; }
.feature-number { font: 13px "Segoe UI", sans-serif; color: #7993ad; }
.feature-tab[aria-selected="true"] { background: #f5f9fd; box-shadow: none; }
.feature-panel { border: 0; min-height: 380px; border-radius: 20px; background: #f1f6fb; }
.panel-copy h3 { font-size: 26px; font-weight: 500; }
.panel-copy p { font-size: 15px; }
.mini-label { font-size: 11px; }
.quiet-label { font-size: 12px; border-radius: 20px; }
.games-section { background: #f7f9fc; border: 0; padding-block: 100px; }
.games-section h2 { font-size: 44px; font-weight: 500; }
.catalog { background: #fff; border-color: #e5ebf2; border-radius: 20px; box-shadow: none; }
.catalog-toolbar { padding: 28px 32px 18px; }
.filter-button { border-radius: 22px; font-size: 14px; }
.search-field { height: 46px; border-radius: 23px; padding-inline: 17px; }
.search-field input { font-size: 14px; }
.catalog-hint { font-size: 12px; }
.catalog-result { padding-top: 35px; padding-bottom: 40px; }
.catalog-result h3 { font-size: 26px; font-weight: 500; }
.catalog-result > p:not(.empty-eyebrow) { font-size: 14px; }
.catalog-footer { background: #fafbfd; font-size: 12px; }
.download-section { margin-block: 120px; padding: 70px 62px; gap: 65px; border: 0; border-radius: 24px; background: radial-gradient(ellipse at 100% 0%, #326fb0, #1b4274 48%, #162e51); box-shadow: none; }
.download-copy h2 { font-size: 40px; }
.download-copy > p:not(.eyebrow) { font-size: 15px; color: #d0e2f0; }
.download-actions .button { font-size: 13px; padding: 13px 19px; }
.release-card { border-radius: 16px; padding: 31px; box-shadow: 0 20px 46px #0b213623; }
.version { font: 62px "Segoe UI", sans-serif; font-weight: 300; letter-spacing: -2px; }
.version span { font-size: 11px; }
.release-card-top { font-size: 12px; }
.release-status dt, .release-status dd { font-size: 12px; }
.release-card-bottom, .release-card-bottom .text-link { font-size: 11px; }
.help-section { padding-bottom: 120px; gap: 90px; }
.help-intro > p:not(.eyebrow) { font-size: 15px; }
.help-intro small { font-size: 13px; }
.faq summary { font-size: 16px; padding-block: 27px; font-weight: 500; }
.faq details > div { font-size: 14px; }
.closing { border: 0; background: #f1f6fb; border-radius: 18px; padding: 38px 43px; }
.closing p { font-weight: 500; }
.site-footer { padding-top: 65px; padding-bottom: 30px; }
.footer-links { font-size: 13px; }
.site-footer > div > p { font-size: 10px; }
dialog { background: #fff; border-radius: 22px; border-color: #e4ebf2; }
dialog h2 { font-weight: 500; }
dialog .dialog-lead { font-size: 13px; }
dialog .dialog-note { font-size: 12px; }
form label { font-size: 13px; }
@media (max-width: 1100px) {
  .section-wrap { width: calc(100% - 72px); }
  .desktop-nav { gap: 25px; margin-right: 12px; }
  .header-inner { padding-inline: 36px; gap: 22px; }
  .hero h1 { font-size: 60px; }
  .showcase-wrap { padding: 40px 35px 26px; }
  .feature-layout { grid-template-columns: 280px 1fr; gap: 30px; }
  .feature-panel { grid-template-columns: 35% 65%; }
  .panel-copy { padding-right: 25px; }
  .panel-copy h3 { font-size: 23px; }
  .download-section { padding: 50px 38px; gap: 32px; }
  .download-copy h2 { font-size: 35px; }
  .release-card { padding: 23px; }
  .help-section { gap: 50px; }
}
@media (max-width: 850px) {
  .header-inner { padding-inline: 24px; }
  .desktop-nav { gap: 23px; font-size: 13px; }
  .header-cta { display: none; }
  .section-wrap { width: calc(100% - 48px); }
  .hero h1 { font-size: 48px; letter-spacing: 1px; }
  .hero-inner { display: flex; min-height: calc(100svh - 72px); padding-top: 95px; padding-bottom: 150px; }
  .hero-status, .hero-version { font-size: 13px; }
  .hero-description { font-size: 15px; }
  .hero-actions .button { font-size: 21px; min-height: 65px; }
  .hero-bottom { bottom: 32px; }
  .showcase-section { padding-top: 80px; }
  .section-heading h2, .help-intro h2 { font-size: 36px; }
  .section-description { font-size: 14px; }
  .section-description span { font-size: 12px; }
  .showcase-wrap { padding: 30px 30px 25px; }
  .preview-titlebar { height: 47px; font-size: 12px; }
  .preview-sidebar { width: 100%; flex-direction: row; padding: 10px; }
  .preview-menu { font-size: 12px; min-height: 44px; }
  .preview-content { padding: 24px; }
  .showcase-panel h3 { font-size: 25px; }
  .mini-bottom { font-size: 12px; }
  .feature-layout { grid-template-columns: 230px 1fr; gap: 24px; }
  .feature-panel { grid-template-columns: 1fr; }
  .panel-art { min-height: 165px; height: 165px; }
  .panel-copy { padding: 0 28px 30px; }
  .panel-copy h3 { font-size: 24px; }
  .panel-copy p { font-size: 14px; }
  .download-section { grid-template-columns: 1fr; padding: 45px; }
  .download-copy h2 { font-size: 36px; }
  .release-card { padding: 28px; }
  .release-status dt, .release-status dd { font-size: 13px; }
  .release-card-bottom, .release-card-bottom .text-link { font-size: 11px; }
  .help-section { grid-template-columns: .65fr 1fr; gap: 32px; }
  .help-intro > p:not(.eyebrow) { font-size: 14px; }
  .help-intro small { font-size: 12px; }
  .faq summary { font-size: 14px; }
}
@media (max-width: 640px) {
  .section-wrap { width: calc(100% - 36px); }
  .header-inner { height: 64px; padding-inline: 18px; }
  .brand > span { font-size: 21px; }
  .brand img { width: 32px; }
  .brand-sub { font-size: 8px; }
  .mobile-nav { top: 60px; }
  .hero, .hero-inner { min-height: calc(100svh - 64px); }
  .hero-inner { padding-top: 75px; padding-bottom: 135px; }
  .hero-copy { text-align: center; }
  .hero-kicker { font-size: 13px; letter-spacing: 3px; }
  .hero h1 { font-size: clamp(33px, 8.5vw, 50px); letter-spacing: .3px; font-weight: 400; margin-top: 22px; line-height: 1.45; }
  .hero h1 > span { display: block; white-space: normal; }
  .hero-description { font-size: 13px; margin-top: 18px; max-width: none; }
  .hero-actions { flex-direction: column; gap: 16px; margin-top: 32px; }
  .hero-actions .button { font-size: 18px; min-height: 58px; min-width: 260px; padding: 14px 24px; }
  .hero-actions .button svg { width: 20px; height: 20px; }
  .hero-version { font-size: 12px; }
  .hero-secondary { font-size: 13px; }
  .hero-bottom { flex-wrap: wrap; bottom: 26px; justify-content: center; gap: 22px; }
  .hero-palette { gap: 10px; }
  .hero-palette > span { font-size: 11px; }
  .hero-palette button { width: 27px; height: 27px; }
  .hero-bottom .scroll-cue { display: none; }
  .motion-toggle { min-height: 38px; font-size: 10px; padding-inline: 10px; }
  .hero-ribs { background-size: 33px 100%; }
  .hero-moon-halo { left: 82%; top: 15%; width: 290px; opacity: .7; }
  .release-strip { padding-block: 25px; }
  .release-strip p { font-size: 12px; }
  .release-strip .text-link { font-size: 11px; }
  .release-strip .pill { font-size: 11px; }
  .showcase-section { padding-top: 65px; padding-bottom: 35px; }
  .section-heading { display: block; margin-bottom: 29px; }
  .section-heading h2 { font-size: 31px; margin-top: 13px; letter-spacing: -.7px; }
  .section-description { font-size: 14px; margin-top: 19px; }
  .showcase-wrap { padding: 0; background: transparent; border-radius: 0; margin-top: 0; }
  .platform-preview { transform: none; border-color: #e3eaf2; box-shadow: 0 15px 32px #2d537417; border-radius: 12px; }
  .preview-titlebar { font-size: 11px; height: 45px; }
  .preview-menu { font-size: 11px; min-height: 44px; padding: 10px 5px; }
  .preview-content { padding: 19px 19px 17px; }
  .preview-welcome { font-size: 11px; }
  .showcase-panel { min-height: 245px; }
  .showcase-panel h3 { font-size: 23px; }
  .mini-banner { height: 95px; padding: 17px; }
  .mini-banner span { font-size: 10px; }
  .mini-banner strong { font-size: 15px; }
  .mini-banner img { width: 54px; }
  .mini-empty { padding: 15px 10px; }
  .mini-empty strong { font-size: 12px; }
  .mini-empty p, .mini-bottom { font-size: 11px; }
  .preview-state-row, .preview-helper, .preview-ticket p { font-size: 12px; }
  .showcase-caption { font-size: 11px; margin-top: 23px; letter-spacing: 0; }
  .preview-member-card { height: 125px; padding: 21px; }
  .preview-member-card span { font-size: 10px; }
  .preview-member-card strong { font-size: 24px; }
  .platform-section { padding-block: 36px 75px; }
  .feature-layout { display: block; }
  .feature-tab { padding: 14px 4px; gap: 6px; }
  .feature-tab strong { font-size: 12px; }
  .feature-tab small { display: none; }
  .feature-number { font-size: 11px; }
  .feature-panel { min-height: 385px; border-radius: 15px; }
  .panel-copy { padding: 0 25px 29px; }
  .panel-copy h3 { font-size: 24px; }
  .panel-copy p { font-size: 14px; }
  .games-section { padding-block: 65px; }
  .games-section h2 { font-size: 31px; }
  .catalog { border-radius: 16px; }
  .catalog-toolbar { padding: 19px 18px 14px; }
  .filter-button { font-size: 12px; }
  .search-field { width: 100%; margin-top: 14px; }
  .search-field input { font-size: 13px; }
  .catalog-hint { font-size: 11px; }
  .catalog-result { padding: 27px 18px 34px; }
  .catalog-result h3 { font-size: 21px; }
  .catalog-result > p:not(.empty-eyebrow) { font-size: 13px; }
  .catalog-footer { font-size: 11px; }
  .download-section { width: calc(100% - 26px); margin-block: 75px; padding: 37px 24px 25px; border-radius: 18px; }
  .download-copy h2 { font-size: 32px; }
  .download-copy > p:not(.eyebrow) { font-size: 14px; }
  .download-actions .button { font-size: 11px; padding-inline: 13px; }
  .release-card { padding: 23px 20px; }
  .release-status dt, .release-status dd { font-size: 11px; }
  .version { font-size: 59px; }
  .version span { font-size: 10px; }
  .release-card-bottom, .release-card-bottom .text-link { font-size: 10px; }
  .help-section { display: block; padding-bottom: 75px; }
  .help-intro h2 { font-size: 32px; }
  .help-intro small { font-size: 12px; }
  .faq { margin-top: 36px; }
  .faq summary { font-size: 14px; padding-block: 24px; }
  .closing { padding: 26px 19px; border-radius: 14px; }
  .closing p { font-size: 16px; }
  .site-footer { padding-top: 44px; display: block; }
  .footer-links { font-size: 12px; gap: 23px; }
  dialog { border-radius: 18px; }
}
@media (max-width: 370px) {
  .hero h1 { font-size: 32px; }
  .hero-bottom { gap: 15px; }
  .hero-palette > span { display: none; }
  .preview-content { padding-inline: 15px; }
  .showcase-panel h3 { font-size: 21px; }
  .mini-banner strong { font-size: 13px; }
  .mini-banner img { width: 45px; }
  .feature-tab strong { font-size: 11px; }
  .release-card { padding-inline: 17px; }
  .release-status dt, .release-status dd { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-color-field, .hero-sheen { animation: none; }
  .platform-preview { transform: none; }
  .hero-pointer-light, .hero-ribs::after { display: none; }
}
@media (hover: none), (pointer: coarse) {
  .hero-pointer-light, .hero-ribs::after { display: none; }
}