/* ============================================================
   Download/index.html 样式表
   分组顺序：全局重置 → 移动端导航覆盖 → 页面主体(HUD) →
            响应式 → 布局区 → 动画 → 滚动条
   ============================================================ */

/* ---------- 全局重置 ---------- */
* {
  margin: 0;
  padding: 0;
  list-style-image: none;
  list-style-type: none;
}

html {
  -webkit-text-size-adjust: none;
}

/* ---------- 移动端导航（mobile-nav 组件）本地覆盖 ---------- */
.top {
  position: absolute !important;
  background: #e9ebf0eb !important;
  backdrop-filter: saturate(150%) blur(20px);
  -webkit-backdrop-filter: saturate(150%) blur(20px);
}
/* 用更高优先级的选择器把导航栏恢复为 fixed（覆盖上方 .top 的 absolute），
   让其固定在视口顶部、浮于 HUD 装饰层 .left/.right 之上；不改动上方用户设定的背景/毛玻璃视觉值 */
/*#top {
  position: fixed !important;
}*/

    .logo img {
        display: block !important;
    }
.overlay {
  padding-top: 0px !important;
}

#mobileNavMenu ul {
  margin-top: 76px !important;
}

#mobileSearchMenu .search-panel {
  margin-top: 73px !important;
}

#mobileNavMenu.open {
  max-height: 100vh;
     background: #e9ebf0fa !important;
}

#mobileSearchMenu.open {
  max-height: 100vh;
  background: #e9ebf0f5 !important;
}

html[data-theme="dark"] #mobileNavMenu.open {
      background: #000000e6 !important;
    backdrop-filter: saturate(150%) blur(20px);
    -webkit-backdrop-filter: saturate(150%) blur(20px);
}

html[data-theme="dark"] #mobileSearchMenu.open {
  background: #000000a3 !important;
}

html[data-theme="dark"] #header {
  background: #00000000 !important;
}
/* ---------- 页面主体（HUD 风格） ---------- */
body {
  display: grid;
  place-items: center;
  background: #b8860b;
}

section {
  position: relative;
  width: 100%;
  height: 200vh; /* dvh 兜底：旧浏览器不支持 dvh 时用 vh */
  height: 200dvh;
  padding: 0px 0 !important;
}
input{
  color: #9e9e9e !important;
}
img {
  max-width: 100%;
  object-fit: cover;
}

article {
  padding-inline: 1em;
  margin-inline: 3em;
  margin-block-end: 3em;
  max-width: 60ch;
  color: white;
  background: rgba(255 255 255 / 0.1);
  border-radius: 0.4em;

  h1,
  h2,
  p {
    font-weight: 200;
    margin-block: 0.3lh;
    line-height: 1.3;
  }
}

.content {
  position: relative;
  padding: 30px 18px;
  text-align: center;
}

.nr-divider {
  position: relative;
  z-index: 3;
  width: 100%;
  padding: 14px;
  animation: rise 1s cubic-bezier(.2, .7, .2, 1) both;
}

.hud {
  width: 80%;
}

#grid {
  position: sticky;
  top: 0;
  display: grid;
  grid-template-columns: 1fr 0fr 1fr;
  place-items: start center;
  width: 100%;
  height: 100vh; /* dvh 兜底：旧浏览器不支持 dvh 时用 vh */
  height: 100dvh;
  background: #a5815f;
  font-size: 0rem;
  /* overflow: hidden; */

  animation: open 1ms linear both;
  animation-timeline: scroll();
  animation-range: 0% 40%;
}

/* iOS / Safari 等不支持 animation-timeline: scroll() 的浏览器：
   滚动驱动动画失效，基础态（中间列 0 宽 + font-size:0）会让下载内容不可见。
   这里按"已揭示"终态静态呈现，保证内容必定可见；
   Chrome/Edge 等支持滚动时间线的浏览器不匹配此块，保留原滚动展开设计。 */
@supports not (animation-timeline: scroll()) {
  #grid {
    animation: none;
    grid-template-columns: 0fr 1fr 0fr;
    font-size: 1rem;
  }
}

nav {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1em;
  width: 100%;
  padding: 0.7em 1.4em;
  background: #562638;
  color: #eff;
}

.nav {
  display: flex;
  gap: 1.5em;
  /* outline: 1px dashed white; */

  a {
    color: #eff;
    text-decoration: none;
  }
}

/* ---------- 响应式（≤950px） ---------- */
@media screen and (max-width: 950px) {
  * {
    margin: 0;
    padding: 0;
    list-style-image: none;
    list-style-type: none;
    vertical-align: top;
    -webkit-tap-highlight-color: transparent;
  }

  .hud {
    width: 100% !important;
  }

  .content {
    position: relative;
    padding: 0px 0px;
    text-align: center;
  }

  .logo {
    margin-bottom: 0px !important;
    padding: 9px 17px !important;
    height: 83px !important;
    width: 83px !important;
  }

  .nr-divider {
    position: relative;
    z-index: 3;
    width: 100%;
    padding: 28px;
    animation: rise 1s cubic-bezier(.2, .7, .2, 1) both;
  }
}

/* ---------- 布局区（左/中/右） ---------- */
.middle {
  width: 100%;
  height: 100%;
  background-color: crimson;
  display: grid;
  place-items: start center;
}

.left,
.right {
  width: 100%;
  height: 100%;
  background: dodgerblue;
  background-attachment: fixed;
}

.left {
  background: 100% 0% / cover no-repeat
    url("./wanted-feathers-mcgraw-left.jpg");
}

.right {
  background: 0% 0% / cover no-repeat
    url("./wanted-feathers-mcgraw-right.jpg");
}

/* ---------- 动画 ---------- */
@keyframes open {
  to {
    grid-template-columns: 0fr 1fr 0fr;
    font-size: 1rem;
  }
}

.spacer {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 50vh; /* dvh 兜底：旧浏览器不支持 dvh 时用 vh */
  min-height: 50dvh;
  background: dodgerblue;
  display: none;
}

h2 {
  max-width: 80%;
  text-align: center;
}

/* ---------- 滚动条 ---------- */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-button:vertical {
  display: none;
}

::-webkit-scrollbar-track:vertical {
  background-color: black;
}

::-webkit-scrollbar-track-piece {
  background: #EAEAEA;
}

::-webkit-scrollbar-thumb:vertical {
  background-color: #afafaf;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:vertical:hover {
  background-color: #afafaf;
}

::-webkit-scrollbar-corner:vertical {
  background-color: #535353;
}

::-webkit-scrollbar-resizer:vertical {
  background-color: #FF6E00;
}

/* ============================================================
   Download/index.html 内联 <style> 外置（下方由 index.html 迁移）
   ============================================================ */

/* ---------- HUD 设计令牌 ---------- */
:root {
  --cyan: #2de2ff;
  --magenta: #ff2e88;
  --purple: #7c4dff;
  --ink: #eaf6ff;
  --grad: linear-gradient(120deg, #2de2ff 0%, #7c4dff 55%, #ff2e88 100%);
  --font: "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}

/* ---------- 基础 ---------- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font);
  color: var(--ink);
  background: #04050b;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ---------- HUD 视觉层 ---------- */
.stage {
  position: relative;
  height: 100svh;
  min-height: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow: hidden;
  width: 100%;
  padding: 0.7em 1.4em;
  background: #04050b;
}

.aura {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(38% 46% at 22% 28%, rgba(45, 226, 255, .20), transparent 62%),
    radial-gradient(42% 50% at 80% 30%, rgba(255, 46, 136, .18), transparent 62%),
    radial-gradient(50% 56% at 65% 82%, rgba(124, 77, 255, .22), transparent 62%);
  filter: blur(10px);
  animation: aura 16s ease-in-out infinite alternate;
}

@keyframes aura {
  0% {
    opacity: .7;
    transform: scale(1);
  }
  100% {
    opacity: 1;
    transform: scale(1.06);
  }
}

.floor {
  position: absolute;
  left: -25%;
  right: -25%;
  bottom: -10%;
  height: 55%;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(45, 226, 255, .22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(45, 226, 255, .18) 1px, transparent 1px);
  background-size: 54px 54px;
  transform: perspective(420px) rotateX(72deg);
  transform-origin: bottom center;
  mask-image: linear-gradient(to top, #000, transparent 78%);
  -webkit-mask-image: linear-gradient(to top, #000, transparent 78%);
  animation: floor 6s linear infinite;
  opacity: .55;
}

@keyframes floor {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 54px;
  }
}

.scan {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 3px);
  opacity: .5;
  animation: scanroll 7s linear infinite;
}

@keyframes scanroll {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 90px;
  }
}

.vig {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(120% 120% at 50% 42%, transparent 48%, rgba(2, 3, 8, .85) 100%);
}

/* ---------- HUD 内容组件 ---------- */
/*  .hud { position: relative; z-index: 3; width: 100%; padding: 14px; animation: rise 1s cubic-bezier(.2, .7, .2, 1) both } */
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.corner {
  position: absolute;
  width: 28px;
  height: 28px;
  border: 2px solid rgba(45, 226, 255, .6);
  z-index: 4;
}

.c-tl {
  top: 0;
  left: 0;
  border-right: 0;
  border-bottom: 0;
}

.c-tr {
  top: 0;
  right: 0;
  border-left: 0;
  border-bottom: 0;
}

.c-bl {
  bottom: 0;
  left: 0;
  border-right: 0;
  border-top: 0;
}

.c-br {
  bottom: 0;
  right: 0;
  border-left: 0;
  border-top: 0;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-weight: 800;
  font-size: 17px;
  margin-bottom: 20px;
  padding: none;
    height: 50px;
    width: 50px;
}

.logo .mark {
  position: relative;
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: var(--grad);
  display: grid;
  place-items: center;
  font-size: 16px;
  box-shadow: 0 0 16px rgba(124, 77, 255, .55);
  z-index: 1;
}

.logo .mark::before {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 12px;
  border: 2px solid transparent;
  background: conic-gradient(from 0deg, var(--cyan), transparent 35%, var(--magenta), transparent 70%, var(--cyan)) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: spin 4s linear infinite;
  z-index: -1;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--cyan);
  padding: 5px 13px;
  border-radius: 999px;
  background: rgba(45, 226, 255, .07);
  border: 1px solid rgba(45, 226, 255, .3);
  text-shadow: 0 0 10px rgba(45, 226, 255, .6);
}

.status .pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 10px var(--cyan);
  animation: blink 1.6s ease-in-out infinite;
}

@keyframes blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: .2;
  }
}

h1 {
  font-size: clamp(32px, 6vw, 58px);
  line-height: 1.4;
  font-weight: 850;
  letter-spacing: .01em;
  margin-bottom: 14px;
}

h1 .grad {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.glitch {
  position: relative;
  display: inline-block;
  color: var(--ink);
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  clip-path: inset(0 0 0 0);
}

.glitch::before {
  color: var(--cyan);
  text-shadow: -2px 0 var(--cyan);
  animation: g1 2.6s infinite linear alternate-reverse;
}

.glitch::after {
  color: var(--magenta);
  text-shadow: 2px 0 var(--magenta);
  animation: g2 3.4s infinite linear alternate-reverse;
}

@keyframes g1 {
  0% { clip-path: inset(10% 0 82% 0); }
  20% { clip-path: inset(40% 0 40% 0); }
  40% { clip-path: inset(70% 0 8% 0); }
  60% { clip-path: inset(20% 0 62% 0); }
  80% { clip-path: inset(55% 0 25% 0); }
  100% { clip-path: inset(8% 0 78% 0); }
}

@keyframes g2 {
  0% { clip-path: inset(75% 0 12% 0); }
  25% { clip-path: inset(15% 0 70% 0); }
  50% { clip-path: inset(48% 0 30% 0); }
  75% { clip-path: inset(30% 0 55% 0); }
  100% { clip-path: inset(64% 0 20% 0); }
}

.lead {
  font-size: clamp(14.5px, 2vw, 18px);
  color: rgba(234, 246, 255, .74);
  max-width: 470px;
  margin: 0 auto 32px;
  line-height: 1.6;
}

.dl-row {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.dl-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 230px;
  padding: 16px 22px;
  border-radius: 14px;
  cursor: pointer;
  border: 1px solid rgba(45, 226, 255, .35);
  background: rgba(10, 16, 28, .5);
  backdrop-filter: blur(8px);
  transition: transform .2s, box-shadow .28s, background .25s;
  position: relative;
}

.dl-btn .ic {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  font-size: 23px;
  flex: none;
}

.dl-btn .t {
  text-align: left;
  line-height: 1.22;
}

.dl-btn .t small {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(234, 246, 255, .66);
  font-family: var(--mono);
  letter-spacing: .03em;
}

.dl-btn .t b {
  font-size: 17px;
  color: #ffffff;
  font-weight: 800;
}

.dl-mac .ic {
  background: linear-gradient(135deg, rgba(45, 226, 255, .3), rgba(45, 226, 255, .08));
  box-shadow: 0 0 14px rgba(45, 226, 255, .3);
}

.dl-mac {
  border-color: rgba(45, 226, 255, .45);
}

.dl-mac:hover {
  transform: translateY(-3px);
  background: rgba(45, 226, 255, .1);
  box-shadow: 0 0 26px rgba(45, 226, 255, .45);
}

.dl-win .ic {
  background: linear-gradient(135deg, rgba(255, 46, 136, .3), rgba(255, 46, 136, .08));
  box-shadow: 0 0 14px rgba(255, 46, 136, .3);
}

.dl-win {
  border-color: rgba(255, 46, 136, .45);
}

.dl-win:hover {
  transform: translateY(-3px);
  background: rgba(255, 46, 136, .1);
  box-shadow: 0 0 26px rgba(255, 46, 136, .45);
}

.meta {
  margin-top: 28px;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .05em;
  color: rgba(234, 246, 255, .55);
  display: flex;
  gap: 18px;
  justify-content: center;
  flex-wrap: wrap;
}

.meta span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.meta .d {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 10px var(--cyan);
}

.foot {
  position: absolute;
  bottom: 16px;
  left: 0;
  right: 0;
  z-index: 3;
  text-align: center;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .06em;
  color: rgba(234, 246, 255, .35);
}

@media (max-width: 560px) {
  .dl-btn {
    min-width: 100%;
  }
  .hud .corner {
    width: 22px;
    height: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .aura, .floor, .scan, .logo .mark::before, .glitch::before, .glitch::after {
    animation: none;
  }
  .glitch::before, .glitch::after {
    display: none;
  }
}

/* ---------- PC 顶部导航（桌面端显示，移动端由 mobile-top-nav 接管） ----------
   背景 / 配色 / 高度由 media_time.css 提供（同 shop2.html）；
   本地只补 media_time.css 未覆盖的结构布局（flex 容器、toolbar 位置） */
#header {
  position: relative;
  z-index: 60;
  background: #00000000 !important;
}

#header > header {
  background-color: #e9ebf000;
  border-bottom: none;
  backdrop-filter: blur(0px);
  background: linear-gradient(180deg, hsl(0deg 0% 0% / 53%), hsl(0deg 0% 100% / 0%));
}

header.smaller h1#logobag {
  height: 50px;
  line-height: 50px;
  font-size: 30px;
}

#mobileNavMenu ul {
  height: 126px !important;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px !important;
  width: 95%;
  margin: auto;
  margin-top: 75px !important;
  font-size: 15px !important;
}

#top-theme-toggle {
  margin-right: 0px !important;
}

header.smaller #toolbar-wrap {
  border: 1px solid #ffffff40 !important;
}

#toolbar-wrap {
  border: 1px solid #ffffff40 !important;
}

#toolbar-wrap > li.search .icon-sousuo2 {
  color: #dfdfdf !important;
}

#theme-toggle-li .theme-icon-moon {
  color: #dfdfdf !important;
}

header.smaller h1#logoqj {
  margin-top: 24px;
  padding: 0px 11px;
  font-weight: 400;
  font-size: 14px !important;
  background: linear-gradient(157.87deg, hsl(0deg 0% 100% / 24%), hsl(0deg 0% 100% / 24%));
  box-shadow: 0 0 5px rgb(0 0 0 / 4%) !important;
  border: 1px solid #ffffff40 !important;
  line-height: 24px;
}

#logoqj a {
  font-size: 10px !important;
  color: rgb(255 255 255) !important;
}

header h1#logobag {
  display: inline-block;
  height: 100px;
  line-height: 100px;
  float: left;
  font-size: 30px;
  padding-top: 11px;
  color: #ffffff;
  font-weight: 500;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

header h1#logoqj {
  padding: 1px 11px;
  font-weight: 400;
  font-size: 14px !important;
  background: linear-gradient(157.87deg, hsl(0deg 0% 100% / 24%), hsl(0deg 0% 100% / 24%));
  box-shadow: 0 0 5px rgb(0 0 0 / 4%) !important;
  border: 1px solid #ffffff40 !important;
  line-height: 24px;
}

/*  #header .container.clearfix {
    max-width: 1240px; margin: 0 auto; padding: 12px 22px;
    display: flex; align-items: center; gap: 14px;
  } */

/*  #header #toolbar-wrap { float: none; margin-top: 0; margin-left: auto; } */

/* 移动端隐藏整条 PC 顶栏，避免与 mobile-top-nav 重复；
   commonn.js 注入的浮动 #theme-toggle-mobile 与 mobile-top-nav 的 #top-theme-toggle 重复，一并隐藏 */
@media (max-width: 950px) {
  #header {
    display: none !important;
  }
  #theme-toggle-mobile {
    display: none !important;
  }
}