@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *,
    ::backdrop,
    :after,
    :before {
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-border-style: solid;
      --tw-leading: initial;
      --tw-ordinal: initial;
      --tw-slashed-zero: initial;
      --tw-numeric-figure: initial;
      --tw-numeric-spacing: initial;
      --tw-numeric-fraction: initial;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
    }
  }
}

@media (hover: hover) {
  .hover\:text-\[\#00DC82\]:hover {
    color: #00dc82;
  }
}

#__nuxt,
body,
html {
  height: 100%;
  min-height: 100%;
  margin: 0;
}

body {
  width: 100%;
  margin: 0;
  padding: 0;
  font-family:
    Inter-Semi Bold,
    Inter,
    Arial,
    sans-serif;
  overflow-x: hidden;
}

.app-layout,
body {
  background: #f8fafc;
}

.app-layout {
  --status-bar-default-height: 0;
  --device-status-bar-height: env(safe-area-inset-top, 0);
  --status-bar-height: max(var(--status-bar-default-height), var(--device-status-bar-height));
  --site-header-height: 19.2vw;
  box-sizing: border-box;
  width: 100%;
  position: relative;
  overflow: visible;
}

.app-layout .app-layout-frame {
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  max-height: 100dvh;
  margin: 0 auto;
  display: flex;
  overflow: hidden;
}

.app-layout .mobile-status-bar {
  z-index: 20;
  flex: 0 0 var(--status-bar-height);
  height: var(--status-bar-height);
  color: #0d1b34;
  background: #fff;
  padding: 0 4.8vw 0 6.4vw;
  font-size: 4vw;
  font-weight: 600;
  line-height: 5.33333vw;
}

.app-layout .mobile-status-bar,
.app-layout .site-header {
  box-sizing: border-box;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  display: flex;
  position: relative;
}

.app-layout .site-header {
  z-index: 9000;
  flex: 0 0 var(--site-header-height);
  height: var(--site-header-height);
  background-color: #fff;
  border: 0.266667vw solid #ededed;
  padding: 0 4.26667vw;
}

.app-layout .site-brand {
  white-space: nowrap;
  align-items: center;
  width: 48vw;
  height: 13.8667vw;
  text-decoration: none;
  display: flex;
}

.app-layout .site-brand__copy {
  flex-direction: column;
  width: 32vw;
  height: 10.6667vw;
  margin-left: 2.66667vw;
  display: flex;
}

.app-layout .site-logo {
  color: #0f182a;
  letter-spacing: 0.8vw;
  text-transform: uppercase;
  font-size: 4.8vw;
  font-weight: 600;
}

.app-layout .site-tagline {
  color: #2463eb;
  letter-spacing: 0.533333vw;
  margin-top: 0.8vw;
  font-size: 3.2vw;
  font-weight: 500;
  line-height: 1.5;
}

.app-layout .menu-button {
  box-sizing: border-box;
  color: #334155;
  background: 0 0;
  border: 0.266667vw solid #e7ecf2;
  border-radius: 3.73333vw;
  justify-content: center;
  align-items: center;
  width: 20.8vw;
  height: 11.7333vw;
  padding: 0;
  font-size: 4.8vw;
  font-weight: 500;
  text-decoration: none;
  display: flex;
}

.app-layout .menu-button span {
  white-space: nowrap;
  line-height: 1.2;
  display: block;
}

.app-layout .layout-content {
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex: auto;
  width: 100%;
  min-height: 0;
  position: relative;
  overflow: hidden auto;
}

.app-layout .layout-content::-webkit-scrollbar {
  width: 0;
  height: 0;
}

@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
}

@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
}

@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
}

@property --tw-skew-x {
  syntax: "*";
  inherits: false;
}

@property --tw-skew-y {
  syntax: "*";
  inherits: false;
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-leading {
  syntax: "*";
  inherits: false;
}

@property --tw-ordinal {
  syntax: "*";
  inherits: false;
}

@property --tw-slashed-zero {
  syntax: "*";
  inherits: false;
}

@property --tw-numeric-figure {
  syntax: "*";
  inherits: false;
}

@property --tw-numeric-spacing {
  syntax: "*";
  inherits: false;
}

@property --tw-numeric-fraction {
  syntax: "*";
  inherits: false;
}

@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-blur {
  syntax: "*";
  inherits: false;
}

@property --tw-brightness {
  syntax: "*";
  inherits: false;
}

@property --tw-contrast {
  syntax: "*";
  inherits: false;
}

@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}

@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}

@property --tw-invert {
  syntax: "*";
  inherits: false;
}

@property --tw-opacity {
  syntax: "*";
  inherits: false;
}

@property --tw-saturate {
  syntax: "*";
  inherits: false;
}

@property --tw-sepia {
  syntax: "*";
  inherits: false;
}

@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}

@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false;
}

@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false;
}

/* article-side-tool-frame */
.article-side-tool-frame {
  z-index: 30;
  pointer-events: none;
  width: 16.5333vw;
  height: 24.5333vw;
  position: fixed;
  bottom: 15%;
  right: 0.266667vw;
  transform: translateY(-50%);
}

.article-side-tool-frame button {
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  background: 0 0;
  border: 0;
  justify-content: flex-end;
  align-items: flex-start;
  width: 16.5333vw;
  height: 24.5333vw;
  padding: 0;
  display: flex;
  position: relative;
}

.article-side-tool-frame button:active {
  opacity: 0.6;
}

.article-side-tool-frame img {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  width: 10.6667vw;
  height: 10.6667vw;
  display: block;
  position: absolute;
  top: 0;
  right: 0;
}

.article-side-tool-frame .article-side-tool-icon--hair {
  width: 16.5333vw;
  height: 24.5333vw;
}

.article-side-tool-frame .article-side-tool-icon--active {
  visibility: visible;
  opacity: 1;
}

/* article-detail-footer */
.article-detail-footer {
  color: #fff;
  background: #010618;
  width: 100%;
  max-width: 100%;
  height: fit-content;
  margin-top: 5.33333vw;
  overflow: hidden;
}

.article-detail-footer__eyebrow {
  color: #2463eb;
  letter-spacing: 0.8vw;
  white-space: nowrap;
  margin: 8.53333vw 0 0 4.26667vw;
  font-size: 2.93333vw;
  font-weight: 500;
  line-height: 2.93333vw;
}

.article-detail-footer strong {
  color: #fff;
  letter-spacing: 1.06667vw;
  text-transform: uppercase;
  white-space: nowrap;
  margin: 3.73333vw 0 0 4.26667vw;
  font-size: 6.4vw;
  font-weight: 400;
  line-height: 1.4;
  display: block;
}

.article-detail-footer__copy {
  color: #90a4ba;
  width: 91.4667vw;
  margin: 3.73333vw 0 0 4.53333vw;
  font-size: 3.2vw;
  font-weight: 500;
  line-height: 6.93333vw;
  overflow: hidden;
}

.article-detail-footer nav {
  width: 91.4667vw;
  margin: 3.73333vw 0 0 4.53333vw;
  display: block;
}

.article-detail-footer nav a {
  color: #fff;
  width: max-content;
  font-size: 3.2vw;
  font-weight: 500;
  line-height: 5.06667vw;
  text-decoration: none;
  display: block;
}

.article-detail-footer nav a + a {
  margin-top: 2.13333vw;
}

.article-detail-footer small {
  color: #90a4ba;
  white-space: nowrap;
  padding: 0 0 15.2vw 4.53333vw;
  font-size: 3.46667vw;
  font-weight: 400;
  line-height: 4.8vw;
  display: block;
}

.slice-line {
  background: #f8f4f466;
  border-radius: 5.33333vw;
  width: 91.4667vw;
  height: 0.266667vw;
  margin: 6.93333vw 0 6.93333vw 4.26667vw;
}

.recommended-page {
  color: #000;
  background: #f8fafc;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  overflow: hidden;
}

.ad-divider {
  color: #8a8a8a;
  background: #e4e4e4;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 5.33333vw;
  font-size: 3.73333vw;
  display: flex;
}

.holiday-ad {
  background: #fffeff;
  border: 0.266667vw solid #e3e4e4;
  width: 100%;
  min-height: 66.6667vw;
}

.mt-14 {
  margin-top: 5.33333vw;
}

.feature-ad {
  width: 100%;
  margin-left: 0;
}

.section-divider {
  background: #e3e4e4;
  width: 100%;
  height: 5.33333vw;
  margin-bottom: 5.33333vw;
}

.recommended-page__feature {
  background: #fff;
  border: 0.266667vw solid #ededed;
  border-radius: 7.46667vw;
  width: 91.4667vw;
  height: 91.2vw;
  margin: 5.33333vw 0 0 4.26667vw;
  overflow: hidden;
}

.recommended-page__dark-link,
.recommended-page__feature-link,
.recommended-page__image-card a {
  color: inherit;
  text-decoration: none;
  display: block;
}

.recommended-page__feature img,
.recommended-page__image-card img {
  -o-object-fit: cover;
  object-fit: cover;
  width: 91.4667vw;
  height: 36.8vw;
  display: block;
}

.recommended-page__image-meta,
.recommended-page__meta {
  color: #64748b;
  gap: 1.06667vw;
  width: 82.9333vw;
  margin: 3.73333vw 4.26667vw 0;
  font-size: 3.2vw;
  line-height: 4vw;
  display: flex;
}

.recommended-page__image-meta span,
.recommended-page__meta span {
  color: #2463eb;
  letter-spacing: 0;
}

.recommended-page__feature h1,
.recommended-page__feature h2,
.recommended-page__image-card h3 {
  color: #333;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  width: 82.9333vw;
  height: 12.8vw;
  margin: 3.2vw 4.26667vw 0;
  font-size: 5.33333vw;
  font-weight: 400;
  line-height: 6.4vw;
  overflow: hidden;
}

.recommended-page__feature p,
.recommended-page__image-card p {
  color: #333;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  width: 82.9333vw;
  height: 16vw;
  margin: 2.13333vw 4.26667vw 0;
  font-size: 3.73333vw;
  line-height: 5.22667vw;
  overflow: hidden;
}

.recommended-page__byline,
.recommended-page__image-card > a > span {
  color: #90a4ba;
  letter-spacing: 0.533333vw;
  text-transform: uppercase;
  margin: 3.2vw 4.26667vw 4.26667vw;
  font-size: 3.2vw;
  line-height: 5.06667vw;
  display: block;
}

.recommended-page__dark {
  color: #fff;
  background: #010618;
  border-radius: 7.46667vw;
  width: 91.4667vw;
  margin: 5.33333vw 0 0 4.26667vw;
  padding: 6.4vw 4.8vw;
  overflow: visible;
  box-sizing: border-box;
}

.recommended-page__dark-kicker {
  color: #84c7ff;
  white-space: nowrap;
  margin: 0;
  font-size: 3.2vw;
  font-weight: 500;
  line-height: 3.2vw;
}

.recommended-page__dark-intro {
  width: 81.8667vw;
  height: 35.7333vw;
  margin-top: 4.26667vw;
}

.recommended-page__dark-intro h2 {
  letter-spacing: 0.533333vw;
  width: 81.8667vw;
  margin: 0;
  font-size: 6.4vw;
  line-height: 7.73333vw;
  overflow: hidden;
}

.recommended-page__dark-intro p {
  color: #c9d4e1;
  width: 81.8667vw;
  margin: 4.26667vw 0 0;
  font-size: 3.2vw;
  line-height: 5.44vw;
  overflow: hidden;
}

.recommended-page__dark-card {
  content-visibility: auto;
  contain-intrinsic-size: 81.8667vw 66.4vw;
  background: #1b1f2f;
  border: 0.266667vw solid #4f7399;
  border-radius: 6.66667vw;
  width: 81.8667vw;
  height: 66.4vw;
  padding: 4.26667vw;
  box-sizing: border-box;
}

.recommended-page__dark-card--lead {
  margin-top: 3.73333vw;
}

.recommended-page__dark-byline,
.recommended-page__dark-meta {
  color: #90a4ba;
  justify-content: space-between;
  font-size: 3.2vw;
  line-height: 4vw;
  display: flex;
}

.recommended-page__dark-meta span {
  text-transform: uppercase;
}

.recommended-page__dark-card h3 {
  -webkit-line-clamp: 2;
  line-clamp: 2;
  color: #fff;
  height: 12.8vw;
  margin: 6.66667vw 0 0;
  font-size: 5.33333vw;
  line-height: 6.4vw;
}

.recommended-page__dark-card h3,
.recommended-page__dark-card p {
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  width: 72.2667vw;
  overflow: hidden;
}

.recommended-page__dark-card p {
  color: #c9d4e1;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  height: 22.1333vw;
  margin: 3.73333vw 0 0;
  font-size: 3.73333vw;
  line-height: 7.46667vw;
}

.recommended-page__dark-byline {
  letter-spacing: 0.533333vw;
  margin-top: 3.2vw;
}

.recommended-page__dark-byline span {
  text-transform: uppercase;
}

.recommended-page__dark-tail {
  width: 81.8667vw;
  margin-top: 5.33333vw;
}

.recommended-page__dark-tail .recommended-page__dark-card {
  margin-bottom: 4.26667vw;
}

.recommended-page__dark-tail .recommended-page__dark-card:last-child {
  margin-bottom: 0;
}

.recommended-page__image-list {
  width: 91.4667vw;
  margin: 5.33333vw 0 0 4.26667vw;
}

.recommended-page__image-card {
  content-visibility: auto;
  contain-intrinsic-size: 91.4667vw 91.2vw;
  background: #fff;
  border: 0.266667vw solid #ededed;
  border-radius: 7.46667vw;
  width: 91.4667vw;
  height: 91.2vw;
  margin-bottom: 5.33333vw;
  overflow: hidden;
}

/* 广告位样式（保留 ad-divider / holiday-ad / section-divider 原样式，adbox 在内部居中） */
.adbox {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 66.6667vw;
  padding: 4vw 0;
}

.adbox .ad-slot {
  width: 300px;
  height: 250px;
}