/* Presentation only. Download state and behaviour belong to index.html. */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
  width: 100%;
  min-height: 100%;
  background: #f7f8fc;
  color: #211f54;
  font: 14px/1.6 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  -webkit-font-smoothing: antialiased;
}
/* Keep wheel, touch and keyboard scrolling without the Windows scrollbar rail. */
html { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; width: 0; height: 0; }
button { font-family: inherit; }
#root { min-height: 100vh; }
.download-wrap {
  --download-max-width: clamp(1160px, 84vw, 3200px);
  --download-frame-height: 160px;
  --download-min-gap: 20px;
  --download-page-gutter: 48px;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  padding: 0 var(--download-page-gutter) 48px;
  background:
    linear-gradient(180deg, transparent 45%, rgba(247, 248, 255, .72)),
    linear-gradient(rgba(114, 104, 181, .065) 1px, transparent 1px),
    linear-gradient(90deg, rgba(114, 104, 181, .065) 1px, transparent 1px),
    radial-gradient(ellipse at 90% 0, rgba(214, 204, 255, .48), transparent 55%),
    radial-gradient(ellipse at 0 90%, rgba(215, 229, 255, .42), transparent 55%),
    #f7f8ff;
  background-size: auto, 64px 64px, 64px 64px, auto, auto, auto;
}
.download-wrap::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(ellipse at 82% 18%, rgba(181, 157, 255, .25), transparent 48%),
    radial-gradient(ellipse at 12% 70%, rgba(156, 192, 255, .22), transparent 46%);
  pointer-events: none;
  animation: download-atmosphere 14s ease-in-out infinite;
}
.download-topbar {
  position: relative;
  z-index: 10;
  flex-shrink: 0;
  margin: 0 calc(-1 * var(--download-page-gutter));
  padding: 0 var(--download-page-gutter);
  background: transparent;
}
.download-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  width: 100%;
  max-width: 1160px;
  max-width: var(--download-max-width);
  height: 112px;
  margin: 0 auto;
}
.logo-text { display: block; width: 146px; height: auto; max-height: 48px; object-fit: contain; object-position: left center; }
.download-product { color: #9798ac; font-size: 10px; font-weight: 600; letter-spacing: 2.2px; }
.download-content {
  display: flex;
  flex: none;
  flex-direction: column;
  width: 100%;
  max-width: 1160px;
  max-width: var(--download-max-width);
  margin: 0 auto;
  padding-top: 20px;
  padding-top: max(var(--download-min-gap), calc((100svh - var(--download-frame-height) - var(--download-surface-height, 640px)) / 2));
  animation: download-content-reveal .18s ease-out both;
}
@keyframes download-content-reveal {
  from { opacity: 0; }
  to { opacity: 1; }
}
.download-surface {
  position: relative;
  isolation: isolate;
  padding: 56px 64px 48px;
  border: 1px solid #e8e8f1;
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 20px 70px -28px rgba(44, 37, 91, .1);
}
.download-surface::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(ellipse at 95% 0, rgba(225, 217, 255, .38), transparent 48%),
    radial-gradient(ellipse at 78% 48%, rgba(232, 239, 255, .24), transparent 48%);
  pointer-events: none;
}
.download-hero { display: flex; align-items: center; justify-content: space-between; gap: 32px; min-height: 360px; min-height: clamp(360px, 36vh, 480px); }
.download-copy { flex: 1; min-width: 0; padding: 8px 0; }
.download-eyebrow { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; color: #746e96; font-size: 10px; font-weight: 600; letter-spacing: 2px; }
.download-eyebrow span { width: 6px; height: 6px; border-radius: 50%; background: #7860ee; }
.download-title { max-width: 460px; color: #211f54; font-size: 54px; line-height: 1.18; font-weight: 600; letter-spacing: -1.8px; overflow-wrap: break-word; }
.download-tip { max-width: 400px; margin-top: 22px; color: #77728b; font-size: 13px; line-height: 1.85; }
.download-visual { position: relative; flex: 0 1 48%; min-width: 0; pointer-events: none; }
.download-visual::before {
  content: '';
  position: absolute;
  inset: 6% 4%;
  border: 1px dashed rgba(128, 102, 222, .18);
  border-radius: 50%;
  transform: rotate(-16deg);
}
.download-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 8% 36%, #b4a4ed 0 3px, transparent 4px),
    radial-gradient(circle at 87% 18%, #beb4ef 0 4px, transparent 5px),
    radial-gradient(circle at 83% 87%, #afc2ef 0 3px, transparent 4px),
    radial-gradient(circle at 23% 92%, #c9baf2 0 2px, transparent 3px);
  animation: download-sparkles 7s ease-in-out infinite;
}
.download-visual img { position: relative; display: block; width: 100%; height: auto; animation: download-float 8s ease-in-out infinite; }

/* Recommended action. Script keeps ownership of inline display and disabled state. */
.main-download-area { margin-top: 32px; }
.main-download-btn {
  position: relative;
  overflow: hidden;
  display: inline-block;
  min-width: 210px;
  max-width: 100%;
  padding: 15px 28px;
  border: 1px solid #563aff;
  border-radius: 12px;
  background: #563aff;
  color: #fff;
  font-size: 15px;
  line-height: 1.5;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(86, 58, 255, .13);
  transition: background-color .18s, box-shadow .18s;
}
.main-download-btn:hover { background: #452bd9; border-color: #452bd9; box-shadow: 0 8px 24px rgba(86, 58, 255, .2); }
.main-download-btn:active { background: #3c23c4; }
.main-download-btn::after {
  content: '';
  position: absolute;
  inset: -50% -40%;
  background: linear-gradient(110deg, transparent 38%, rgba(255, 255, 255, .1) 50%, transparent 62%);
  transform: translateX(-85%);
  pointer-events: none;
}
.main-download-btn.disabled, .main-download-btn.disabled:hover, .main-download-btn.disabled:active {
  border-color: #e9e7ef; background: #e9e7ef; color: #686276; cursor: not-allowed; box-shadow: none;
}
.main-download-aux { margin-top: 12px; color: #77728b; font-size: 12px; overflow-wrap: anywhere; }
.other-toggle { display: none; margin-top: 20px; padding: 4px 0; border: 0; background: transparent; color: #6e639a; font-size: 12px; line-height: inherit; cursor: pointer; user-select: none; }
.other-toggle.visible { display: inline-block; }
.other-toggle:hover { color: #563aff; text-decoration: underline; text-underline-offset: 4px; }

/* Preserve the separate informational, warning, error and manual-selection states. */
.tip-bar { display: none; max-width: 440px; margin-top: 20px; padding: 11px 14px; border: 1px solid transparent; border-radius: 10px; font-size: 12px; line-height: 1.7; }
.tip-bar.visible { display: block; }
.tip-bar.tip-blue { background: #f5f2ff; color: #6551ad; border-color: #e8e0ff; }
.tip-bar.tip-yellow { background: #fff9ed; color: #926922; border-color: #f2e4c7; }
.tip-bar.tip-red { background: #fff2f2; color: #ae4d58; border-color: #f4dce0; }
.tip-bar.tip-gray { background: #f5f5f9; color: #73718a; border-color: #e9e8f0; }

/* Version lists share a quiet full-width section below the download hero. */
.other-panel {
  display: none;
  grid-template-rows: 0fr;
  margin-top: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  text-align: left;
  transition: grid-template-rows .32s cubic-bezier(.22, 1, .36, 1), margin-top .32s cubic-bezier(.22, 1, .36, 1), opacity .24s ease, transform .32s ease, visibility 0s linear .32s;
}
.other-panel.expanded { display: block; grid-template-rows: 1fr; margin-top: 16px; opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0s; }
.other-panel-body { min-height: 0; overflow: hidden; }
.other-panel-scroll { padding-top: 16px; overflow: visible; border-top: 1px solid #efedf5; }
.other-panel.safari-all-versions { display: block; max-height: none; overflow: visible; margin-top: 16px; opacity: 1; visibility: visible; transform: none; }
.safari-all-versions .other-panel-body, .safari-all-versions .other-panel-scroll { max-height: none; overflow: visible; }
@supports (grid-template-rows: 0fr) {
  .other-panel, .other-panel.expanded { display: grid; }
  .other-panel.safari-all-versions { display: block; }
}
.other-section-title { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; color: #4a4567; font-size: 14px; font-weight: 600; letter-spacing: .2px; }
.other-section-title::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, #e8e3f4, transparent); }
.other-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-bottom: 28px; }
.other-grid:last-child { margin-bottom: 0; }
.other-item {
  --platform-icon: url('./img/icon.png');
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 84px;
  padding: 18px 24px;
  border: 1px solid #e9e6f1;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  transition: background-color .2s, border-color .2s, box-shadow .2s;
}
.other-item[data-platform='Windows'], .other-item[data-platform='Windows32'] {
  --platform-icon: url('./img/win.png');
}
.other-item[data-platform='Mac'], .other-item[data-platform='MacM1'] { --platform-icon: url('./img/mac.png'); }
.other-item::before {
  content: '';
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  background: var(--platform-icon) center / 24px 24px no-repeat;
  pointer-events: none;
}
.other-item:hover { background: #faf9ff; border-color: #c8bcfa; box-shadow: 0 4px 14px rgba(86, 58, 255, .06); }
.other-item-info { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; flex: 1; min-width: 0; }
.other-item-label { color: #393052; font-size: 15px; line-height: 1.5; font-weight: 600; overflow-wrap: break-word; }
.other-item-desc { color: #8b859d; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.other-item-desc:empty { display: none; }
.other-item-action {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  margin-left: 20px;
  padding: 8px 16px;
  border: 1px solid #e8e1ff;
  border-radius: 8px;
  background: #f5f2ff;
  color: #6245e8;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color .18s, border-color .18s, color .18s;
}
.other-item:hover .other-item-action { border-color: #563aff; background: #563aff; color: #fff; }
.other-item:active .other-item-action { border-color: #3922b4; background: #3922b4; }

/* Manual selection: four compact platform cards on desktop, two on mobile. */
.manual-select-area { display: none; margin-top: 28px; padding-top: 32px; border-top: 1px solid #efedf5; }
.manual-select-area.visible { display: block; }
.manual-title { margin-bottom: 20px; color: #4a4567; font-size: 13px; font-weight: 500; }
.manual-cards { display: flex; justify-content: center; flex-wrap: wrap; gap: 16px; }
.manual-card { width: calc(25% - 12px); min-height: 160px; padding: 24px 12px; border: 1px solid #eae8f1; border-radius: 14px; background: #fff; text-align: center; cursor: pointer; transition: border-color .18s, background-color .18s; }
.manual-card:hover { background: #fbfaff; border-color: #c6baf8; }
.manual-card-icon { display: block; width: 32px; height: 32px; margin: 0 auto 16px; }
.manual-card-name { margin-bottom: 5px; color: #4a4567; font-size: 13px; font-weight: 500; }
.manual-card-tag { color: #78738b; font-size: 11px; }

/* Legacy cards retain both faces, recommendation badge and existing click handling. */
.download-card-wrap { display: none; width: 100%; margin-top: 28px; padding-top: 24px; border-top: 1px solid #efedf5; text-align: center; }
.download-card-wrap.visible { display: block; }
.download-card { display: inline-block; position: relative; width: calc(25% - 16px); height: 190px; margin: 8px; overflow: hidden; vertical-align: top; border: 1px solid #eae8f1; border-radius: 14px; background: #fff; cursor: pointer; transition: border-color .18s, background-color .18s; }
.download-card.has-recommended { overflow: visible; border-color: #c6baf8; }
.download-card:hover { border-color: #c6baf8; }
.download-normal, .download-hover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 0 10px; border-radius: 14px; }
.download-normal { display: block; }
.download-hover { display: none; background: #f8f6ff; }
.download-card:hover .download-normal { display: none; }
.download-card:hover .download-hover { display: block; }
.download-card.has-recommended .download-normal { display: block; }
.download-card.has-recommended .download-hover { display: none; }
.download-card.has-recommended:hover .download-normal { display: none; }
.download-card.has-recommended:hover .download-hover { display: block; }
.brand-icon, .download-icon { display: block; width: 36px; height: 36px; margin: 32px auto 0; }
.download-text { margin: 14px 0 6px; color: #4a4567; font-size: 14px; font-weight: 500; }
.upload-type { display: inline-block; color: #78738b; font-size: 11px; line-height: 1.6; }
.upload-label { margin-top: 6px; color: #78738b; font-size: 11px; line-height: 1.5; }
.download-card-tip { color: #78738b; font-size: 12px; line-height: 1.6; }
.highlight-animation { background: #fcfbff; }
.highlight-animation::before { content: attr(data-recommended); position: absolute; top: -10px; right: 12px; padding: 2px 8px; border: 2px solid #fff; border-radius: 6px; background: #7960e8; color: #fff; font-size: 10px; font-weight: 500; white-space: nowrap; }
.highlight-animation .download-text { color: #6d53df; }

/* Organization details form a footer within the same download surface. */
.org-code-container { display: none; width: 100%; margin-top: 36px; padding-top: 24px; border-top: 1px solid #efedf5; }
.org-code-content {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: 'label value copy';
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 100%;
  text-align: left;
}
#org-code-label { grid-area: label; color: #77728b; font-size: 13px; }
#org-code-value {
  grid-area: value;
  min-width: 0;
  color: #4a4567;
  font-size: 18px;
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: .3px;
  overflow-wrap: anywhere;
  word-break: break-all;
}
.copy-btn {
  grid-area: copy;
  min-width: 88px;
  padding: 9px 20px;
  border: 1px solid #e4ddfa;
  border-radius: 8px;
  background: #f8f6ff;
  color: #6d53df;
  font-size: 13px;
  line-height: 1.6;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .18s, border-color .18s;
}
.copy-btn:hover { background: #f0ebff; border-color: #c6baf8; }
.main-download-btn:focus-visible, .copy-btn:focus-visible, .other-toggle:focus-visible { outline: 3px solid #c6baf8; outline-offset: 4px; }
.download-install { display: none; position: fixed; right: 28px; bottom: 24px; padding: 10px 16px; border: 1px solid #eae8f1; border-radius: 10px; background: #fff; cursor: pointer; }
.download-install:hover { background: #fbfaff; border-color: #c6baf8; }
.download-install-text-wrap { display: inline-block; }
.icon-anzhuangwendang { position: relative; top: 3px; width: 20px; color: #6d53df; }
.download-install-text { margin-left: 4px; color: #4a4567; font-size: 13px; }
.icon-arrow-right { color: #6d53df; }

/* Decorative motion; version-list transitions are defined with the panel above. */
@keyframes download-atmosphere {
  0%, 100% { opacity: .35; }
  50% { opacity: 1; }
}
@keyframes download-float {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-10px) rotate(-.7deg); }
}
@keyframes download-sparkles {
  0%, 100% { opacity: .45; transform: translateY(3px); }
  50% { opacity: 1; transform: translateY(-5px); }
}
@keyframes download-button-sheen {
  to { transform: translateX(85%); }
}
@media (hover: hover) and (pointer: fine) {
  .main-download-btn:not(.disabled):hover::after { animation: download-button-sheen .8s ease-out; }
  .copy-btn:hover { box-shadow: 0 3px 10px rgba(86, 58, 255, .08); }
}

/* Scale the content with the desktop canvas, including text and actions. */
@media (min-width: 1600px) {
  .download-wrap {
    --download-frame-height: calc(clamp(112px, 7vw, 224px) + clamp(48px, 3vw, 96px));
    padding-bottom: clamp(48px, 3vw, 96px);
  }
  .download-header { height: clamp(112px, 7vw, 224px); }
  .logo-text { width: clamp(146px, 9vw, 288px); max-height: 80px; }
  .download-product { font-size: clamp(10px, .65vw, 20px); }
  .download-surface { padding: clamp(56px, 3.5vw, 112px) clamp(64px, 4vw, 128px) clamp(48px, 3vw, 96px); border-radius: clamp(28px, 1.75vw, 48px); }
  .download-hero { gap: clamp(32px, 2vw, 64px); min-height: clamp(400px, 26vw, 960px); }
  .download-eyebrow { margin-bottom: clamp(20px, 1.25vw, 40px); font-size: clamp(10px, .65vw, 20px); }
  .download-title { max-width: clamp(460px, 30vw, 960px); font-size: clamp(54px, 3.4vw, 112px); }
  .download-tip { max-width: clamp(400px, 30vw, 960px); margin-top: clamp(22px, 1.4vw, 44px); font-size: clamp(13px, .85vw, 24px); }
  .main-download-area { margin-top: clamp(32px, 2vw, 64px); }
  .main-download-btn { min-width: clamp(210px, 14vw, 448px); padding: clamp(15px, 1vw, 30px) clamp(28px, 1.75vw, 56px); font-size: clamp(15px, 1vw, 28px); border-radius: clamp(12px, .75vw, 24px); }
  .main-download-aux { margin-top: clamp(12px, .75vw, 24px); font-size: clamp(12px, .8vw, 24px); }
  .other-toggle { margin-top: clamp(20px, 1.25vw, 40px); font-size: clamp(12px, .8vw, 24px); }
  .tip-bar { max-width: clamp(440px, 30vw, 960px); font-size: clamp(12px, .8vw, 24px); }
  .other-section-title { font-size: clamp(14px, .9vw, 26px); }
  .other-item { min-height: clamp(84px, 5.25vw, 156px); padding: clamp(18px, 1.125vw, 36px) clamp(24px, 1.5vw, 48px); }
  .other-item-label { font-size: clamp(15px, 1vw, 28px); }
  .other-item-desc { font-size: clamp(12px, .75vw, 24px); }
  .other-item-action { font-size: clamp(12px, .8vw, 24px); }
  .org-code-container { margin-top: clamp(36px, 2.25vw, 72px); padding-top: clamp(24px, 1.5vw, 48px); }
  #org-code-label { font-size: clamp(13px, .85vw, 24px); }
  #org-code-value { font-size: clamp(18px, 1.15vw, 32px); }
  .copy-btn { min-width: clamp(88px, 5.5vw, 160px); padding: clamp(9px, .6vw, 18px) clamp(20px, 1.25vw, 40px); font-size: clamp(13px, .85vw, 24px); }
}

@media (max-width: 1100px) {
  .download-wrap { --download-frame-height: 136px; --download-min-gap: 12px; --download-page-gutter: 32px; padding: 0 var(--download-page-gutter) 40px; }
  .download-header { height: 96px; }
  .download-surface { padding: 40px; }
  .download-title { font-size: 46px; }
  .download-hero { gap: 16px; min-height: 320px; }
  .download-visual { flex-basis: 44%; }
}
@media (max-width: 767px) {
  .download-wrap { --download-page-gutter: 20px; padding: 0 var(--download-page-gutter) 32px; }
  .download-header { height: 84px; }
  .logo-text { width: 132px; }
  .download-product { font-size: 9px; letter-spacing: 1.5px; }
  .download-content { flex: none; margin-top: 8px; padding-top: 0; }
  .download-surface { padding: 32px 24px 28px; border-radius: 22px; }
  .download-hero { display: block; min-height: 0; }
  .download-copy { padding: 0; }
  .download-eyebrow { margin-bottom: 16px; }
  .download-title { max-width: none; font-size: 40px; letter-spacing: -1.2px; }
  .download-tip { margin-top: 18px; }
  .download-visual { display: none; }
  .main-download-btn { min-width: 0; width: 100%; }
  .main-download-aux { text-align: center; }
  .other-toggle { margin-top: 18px; }
  .other-panel.expanded, .other-panel.safari-all-versions { margin-top: 16px; }
  .other-panel-scroll { max-height: none; padding-top: 16px; overflow: visible; }
  .other-grid { margin-bottom: 24px; }
  .other-item { gap: 12px; padding: 16px; }
  .other-item-info { display: block; grid-column: 2; }
  .other-item-desc { margin-top: 4px; }
  .other-item-action { margin-left: 0; }
  .other-item-label { font-size: 14px; }
  .manual-select-area { padding-top: 24px; }
  .manual-cards { gap: 12px; }
  .manual-card { width: calc(50% - 6px); min-height: 150px; padding: 22px 8px; }
  .manual-card-name { font-size: 12px; }
  .download-card { width: calc(50% - 12px); margin: 6px; }
  .download-text { font-size: 12px; }
  .org-code-container { margin-top: 28px; padding-top: 20px; }
  .org-code-content { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'label copy' 'value value'; gap: 12px; }
  #org-code-value { font-size: 17px; }
  .copy-btn { min-width: 72px; padding: 8px 14px; font-size: 12px; }
  .download-install { position: relative; right: auto; bottom: auto; width: fit-content; max-width: 100%; margin: 24px auto 0; }
}
@media (max-width: 370px) {
  .download-wrap { --download-page-gutter: 12px; }
  .download-surface { padding: 28px 20px 24px; }
  .download-title { font-size: 34px; }
  .download-tip { font-size: 12px; }
  .download-card { display: block; width: 100%; margin: 12px 0; }
}
@media (max-width: 420px) {
  .other-item { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px 12px; padding: 16px; }
  .other-item-info { grid-column: 2; }
  .other-item-action { grid-column: 2; justify-self: start; margin-left: 0; padding: 8px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Compact download dashboard with an optional version list. */
.version-group { min-width: 0; }
.version-group + .version-group { margin-top: 20px; }
.other-panel.expanded { transition: none; }
@media (min-width: 768px) {
  .download-wrap {
    --download-max-width: clamp(960px, 84vw, 1520px);
    --download-header-height: clamp(60px, 9vh, 88px);
    --download-bottom-gap: clamp(16px, 3vh, 28px);
    --download-frame-height: calc(var(--download-header-height) + var(--download-bottom-gap));
    --download-min-gap: 12px;
    padding-bottom: var(--download-bottom-gap);
  }
  .download-header { height: var(--download-header-height); }
  .download-surface { padding: clamp(20px, 3vh, 32px) clamp(28px, 3vw, 48px); border-radius: 24px; }
  .download-hero { min-height: 0; gap: 28px; }
  .download-visual { flex-basis: 38%; }
  .download-visual img { max-height: clamp(160px, 28vh, 310px); object-fit: contain; }
  .download-copy { padding: 0; }
  .download-eyebrow { margin-bottom: 10px; font-size: 10px; }
  .download-title { max-width: none; font-size: clamp(32px, 4.8vh, 52px); letter-spacing: -1px; }
  .download-tip { max-width: none; margin-top: 10px; font-size: 13px; line-height: 1.6; }
  .main-download-area { margin-top: 18px; }
  .main-download-btn { min-width: 200px; padding: 11px 24px; font-size: 15px; border-radius: 10px; }
  .main-download-aux { margin-top: 8px; font-size: 12px; }
  .other-panel.expanded, .other-panel.safari-all-versions { margin-top: 18px; }
  .other-panel-scroll { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; padding-top: 16px; }
  .version-group, .other-grid { display: contents; }
  .other-section-title { display: none; }
  .other-item { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: start; min-height: 134px; gap: 12px 10px; padding: 16px; }
  .other-item::before { flex-basis: 22px; width: 22px; height: 22px; background-size: 20px; }
  .other-item-info { display: block; grid-column: 2; }
  .other-item-label { font-size: 13px; line-height: 1.5; }
  .other-item-desc { margin-top: 2px; font-size: 11px; line-height: 1.4; }
  .other-item-action { grid-column: 1 / -1; justify-self: end; align-self: end; margin-left: 0; padding: 6px 14px; font-size: 12px; }
  .org-code-container { margin-top: 16px; padding-top: 14px; }
  .org-code-content { gap: 12px; }
  #org-code-label { font-size: 12px; }
  #org-code-value { font-size: 14px; }
  .copy-btn { min-width: 64px; padding: 6px 12px; font-size: 12px; }
}
/* Keep the asynchronous areas in place from the very first paint. */
.download-action-slot { min-height: 112px; padding-top: 18px; }
.download-action-slot .main-download-area { margin-top: 0; }
.download-versions-slot {
  position: relative;
  height: 54px;
  margin-top: 18px;
  padding-top: 10px;
  border-top: 1px solid #efedf5;
}
.download-versions-slot.is-expanded { height: auto; padding-bottom: 16px; }
.download-versions-slot .other-toggle.visible { display: inline-flex; align-items: center; margin-top: 0; padding: 5px 2px; }
.download-versions-slot .other-panel { margin-top: 0; }
.download-versions-slot .other-panel.expanded { margin-top: 12px; }
.download-versions-slot .other-panel-scroll { padding-top: 0; border-top: 0; }
.download-versions-slot .download-card-wrap,
.download-versions-slot .manual-select-area { margin-top: 0; padding-top: 0; border-top: 0; }
.download-skeleton { display: none; }
.is-loading .download-versions-slot > :not(.download-skeleton) { display: none; }
.is-loading .download-skeleton { display: block; padding-top: 4px; }
.skeleton-block {
  display: block;
  border-radius: 5px;
  background: linear-gradient(100deg, #f0edf7 25%, #f8f7fc 45%, #f0edf7 65%);
  background-size: 240% 100%;
  animation: download-skeleton-shimmer 1.8s ease-in-out infinite;
}
.skeleton-toggle { width: 120px; height: 18px; }
.download-org-slot { position: relative; min-height: 65px; padding-top: 16px; }
.download-org-slot .org-code-container { margin-top: 0; }
.org-skeleton { display: none; align-items: center; gap: 16px; min-height: 49px; padding-top: 14px; border-top: 1px solid #efedf5; }
.is-loading .org-skeleton { display: flex; }
.is-loading .org-code-container { display: none !important; }
.skeleton-org-label { width: 68px; height: 12px; flex-shrink: 0; }
.skeleton-org-value { width: 44%; height: 14px; }
.skeleton-org-copy { width: 64px; height: 34px; margin-left: auto; }
.main-download-area.is-loading .main-download-btn,
.main-download-area.is-loading .main-download-btn:hover,
.main-download-area.is-loading .main-download-btn:active {
  width: 200px;
  min-width: 0;
  border-color: transparent;
  background: linear-gradient(100deg, #eeeaf8 25%, #f8f6fd 45%, #eeeaf8 65%);
  background-size: 240% 100%;
  animation: download-skeleton-shimmer 1.8s ease-in-out infinite;
  color: transparent;
  cursor: wait;
  box-shadow: none;
}
.main-download-area.is-loading .main-download-btn::after { content: none; }
.main-download-area.is-loading .main-download-aux { position: relative; height: 19px; overflow: hidden; color: transparent; }
.main-download-area.is-loading .main-download-aux::before {
  content: '';
  position: absolute;
  top: 5px;
  left: 0;
  width: 230px;
  max-width: 80%;
  height: 10px;
  border-radius: 4px;
  background: #f0edf7;
}
@keyframes download-skeleton-shimmer {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}
@media (max-width: 767px) {
  .download-action-slot { min-height: 146px; padding-top: 32px; }
  .main-download-area.is-loading .main-download-btn { width: 100%; }
  .main-download-area.is-loading .main-download-aux::before { left: 10%; width: 80%; }
  .download-versions-slot { margin-top: 16px; }
  .download-org-slot { min-height: 148px; padding-top: 24px; }
  .is-loading .org-skeleton { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding-top: 20px; }
  .skeleton-org-value { grid-row: 2; grid-column: 1 / -1; width: 90%; height: 40px; }
  .skeleton-org-copy { grid-row: 1; grid-column: 2; width: 72px; height: 37px; }
}