:root {
  --mf-paper: #f4efe5;
  --mf-paper-2: #ebe4d7;
  --mf-card: #fffaf0;
  --mf-ink: #14201d;
  --mf-muted: #63706a;
  --mf-line: rgba(20, 32, 29, .16);
  --mf-deep: #10231f;
  --mf-deep-2: #183b34;
  --mf-gold: #d9a844;
  --mf-mint: #28d69b;
  --mf-rose: #b24545;
  --mf-blue: #2d6f84;
  --mf-white: #fffaf0;
  --mf-display: "Iowan Old Style", "Charter", Georgia, "Times New Roman", serif;
  --mf-body: -apple-system, BlinkMacSystemFont, "Noto Sans TC", "Segoe UI", system-ui, sans-serif;
  --mf-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --mf-container: 1160px;
  --mf-gutter: clamp(18px, 4vw, 44px);
  --mf-radius: 8px;
}

* { box-sizing: border-box; }
html {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  background: var(--mf-paper);
  -webkit-text-size-adjust: 100%;
}
body {
  width: 100%;
  max-width: 100%;
  margin: 0;
  overflow-x: hidden;
  background: var(--mf-paper);
  color: var(--mf-ink);
  font-family: var(--mf-body);
  font-size: 16px;
  line-height: 1.62;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body > main:not(.page) {
  min-height: 100vh;
  background: var(--mf-deep);
  color: var(--mf-white);
}
img, svg, canvas { max-width: 100%; }
h1, h2, h3, p, td, th, span, strong, a { overflow-wrap: break-word; }
h1, h2, .stat b, .ticker-item strong, .metric strong, .leader-stat strong, .yield {
  font-family: var(--mf-display) !important;
  letter-spacing: 0 !important;
}

.page, .gs-embed-root {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  background: var(--mf-paper) !important;
}
.shell,
body > main:not(.page) > .hero-top,
body > main:not(.page) > .grid,
body > main:not(.page) > footer,
main.page > section:not(.hero) > *,
main.page > section.hero > * {
  width: min(var(--mf-container), 100%);
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.hero,
main.page > section.hero,
header.hero {
  position: relative;
  overflow: hidden;
  color: var(--mf-white) !important;
  background:
    linear-gradient(90deg, rgba(16, 35, 31, .97), rgba(16, 35, 31, .72) 58%, rgba(16, 35, 31, .96)),
    var(--mf-cover-url, url("/assets/brand/marketfeel-cover-zh-tw.svg")),
    linear-gradient(135deg, #10231f, #183b34) !important;
  background-size: auto, cover, auto !important;
  background-position: center !important;
  border-bottom: 1px solid rgba(255, 250, 240, .14) !important;
}
main.page > section.hero {
  min-height: 570px;
  padding: clamp(54px, 7vw, 86px) var(--mf-gutter) clamp(38px, 6vw, 56px) !important;
}
header.hero .hero-inner {
  width: min(var(--mf-container), 100%) !important;
}
.hero::before,
main.page > section.hero::before,
header.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .24;
  background-image:
    linear-gradient(rgba(255, 250, 240, .12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 250, 240, .12) 1px, transparent 1px);
  background-size: 70px 70px;
  pointer-events: none;
}
.hero > *,
header.hero > * {
  position: relative;
  z-index: 1;
}
.brand,
.brand-row {
  align-items: center !important;
  gap: 14px !important;
}
.brand-mark,
.brand-logo,
.mark {
  width: 54px !important;
  height: 54px !important;
  border-radius: var(--mf-radius) !important;
  object-fit: cover !important;
  background: var(--mf-white) !important;
  flex: 0 0 auto;
}
.brand b,
.brand-text strong {
  color: var(--mf-white);
}
.brand span,
.brand-text span {
  color: rgba(255, 250, 240, .68) !important;
}
.eyebrow {
  color: var(--mf-gold) !important;
  font-family: var(--mf-mono) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}
.hero h1,
body > main:not(.page) h1 {
  max-width: 900px;
  color: var(--mf-white);
  font-size: clamp(42px, 7.4vw, 88px) !important;
  line-height: 1 !important;
  text-wrap: balance;
}
.lead,
.hero .lead {
  max-width: 820px;
  color: rgba(255, 250, 240, .82) !important;
  font-size: clamp(17px, 2.2vw, 22px) !important;
  line-height: 1.55 !important;
}

.stats,
.ticker,
.summary-grid {
  overflow: hidden;
  border: 1px solid rgba(255, 250, 240, .18) !important;
  border-radius: var(--mf-radius);
  background: rgba(255, 250, 240, .06) !important;
}
.stat,
.ticker-item,
.metric {
  min-width: 0;
  border-color: rgba(255, 250, 240, .16) !important;
}
.stat b,
.ticker-item strong,
.metric strong {
  color: var(--mf-white);
  font-variant-numeric: tabular-nums;
}
.stat span,
.ticker-item span {
  color: rgba(255, 250, 240, .66) !important;
}

main.page > section:not(.hero),
.gs-embed-root .band {
  padding: clamp(52px, 8vw, 88px) var(--mf-gutter) !important;
  background: var(--mf-paper) !important;
  color: var(--mf-ink) !important;
  border-top: 1px solid var(--mf-line) !important;
}
main.page > section:nth-of-type(odd):not(.hero),
.gs-embed-root .band.tint {
  background: var(--mf-paper-2) !important;
}
.gs-embed-root .band.dark {
  background: var(--mf-paper) !important;
  color: var(--mf-ink) !important;
}
.section-head {
  display: grid !important;
  grid-template-columns: minmax(0, .76fr) minmax(240px, .36fr) !important;
  gap: 24px !important;
  align-items: end !important;
  margin-bottom: 34px !important;
}
.section-head h2 {
  margin: 0 0 10px !important;
  color: var(--mf-ink) !important;
  font-size: clamp(34px, 5vw, 58px) !important;
  line-height: 1.06 !important;
  text-wrap: balance;
}
.section-head p,
.rule,
.dark .section-head p {
  max-width: 70ch;
  color: var(--mf-muted) !important;
  font-size: 16px !important;
  line-height: 1.58 !important;
}

.card,
.stock-card,
.yield-card,
.gift-card,
.insight,
.leader,
.note,
.metric,
.signal,
.mobile-card {
  min-width: 0;
  border: 1px solid var(--mf-line) !important;
  border-radius: var(--mf-radius) !important;
  background: var(--mf-card) !important;
  color: var(--mf-ink) !important;
  box-shadow: 0 18px 46px rgba(20, 32, 29, .08);
}
.card {
  text-decoration: none;
}
.card span,
.rank,
.leader .code {
  color: var(--mf-gold) !important;
  font-family: var(--mf-mono) !important;
  font-weight: 900 !important;
}
.card strong,
.leader h3,
.stock-card h3,
.yield-card h3,
.gift-card h3,
.mobile-card h3,
.note h3,
.insight b {
  color: var(--mf-ink) !important;
  letter-spacing: 0 !important;
}
.card em,
.code,
.meta,
.metrics span,
.leader-stat span,
.mobile-stats span,
.note p,
.signal p,
td span {
  color: var(--mf-muted) !important;
}
.cards,
.yield-grid,
.gift-grid,
.insights,
.leader-grid,
.note-grid,
.signal-panel {
  gap: 16px !important;
}
.metrics div,
.leader-stat div,
.mobile-stats,
.gift-card .metrics div,
.stock-card .metrics div {
  border-color: var(--mf-line) !important;
}
.metrics b,
.leader-stat strong,
.mobile-stats strong {
  color: var(--mf-ink) !important;
  font-variant-numeric: tabular-nums;
}
.yield,
.up,
.gap.go,
.go {
  color: #1f7a45 !important;
}
.gap.avoid,
.avoid {
  color: var(--mf-rose) !important;
}
.wait {
  color: #786d58 !important;
}
.badge,
.tag,
.mini {
  min-height: 26px !important;
  border-radius: 6px !important;
  padding: 4px 8px !important;
  font-family: var(--mf-body) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}
.badge.go,
.tag.green {
  background: #d9f4bc !important;
  color: #21460e !important;
  border-color: transparent !important;
}
.badge.avoid,
.tag.red,
.mini.hot {
  background: #ffd9d0 !important;
  color: #7a2010 !important;
  border-color: transparent !important;
}
.badge.wait,
.tag,
.mini {
  background: #eee7da !important;
  color: #514a3b !important;
  border-color: transparent !important;
}
.tag.gold,
.badge.hot,
.badge.new,
.badge.cross,
.mini.new,
.mini.cross {
  background: #f4df9f !important;
  color: #4c3510 !important;
  border-color: transparent !important;
}

.table-wrap {
  width: 100%;
  overflow-x: auto !important;
  border: 1px solid var(--mf-line) !important;
  border-radius: var(--mf-radius) !important;
  background: var(--mf-card) !important;
  box-shadow: 0 18px 46px rgba(20, 32, 29, .08);
}
table {
  width: 100%;
  border-collapse: collapse;
}
th,
td {
  border-bottom: 1px solid var(--mf-line) !important;
  color: var(--mf-ink) !important;
  background: transparent !important;
}
th {
  color: var(--mf-muted) !important;
  background: #fbf8ef !important;
  font-family: var(--mf-mono) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}
.num {
  font-variant-numeric: tabular-nums;
}

.footer,
.disclaimer,
main.page > section.disclaimer {
  background: var(--mf-deep) !important;
  color: rgba(255, 250, 240, .68) !important;
  border-top: 1px solid rgba(255, 250, 240, .14) !important;
}
.footer *,
.disclaimer * {
  color: inherit !important;
}

@media (max-width: 900px) {
  main.page > section.hero {
    min-height: 0;
    padding-top: 42px !important;
  }
  .section-head {
    display: block !important;
  }
  .section-head p,
  .rule {
    margin-top: 8px !important;
  }
  .stats,
  .ticker,
  .summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .cards,
  .yield-grid,
  .gift-grid,
  .insights,
  .leader-grid,
  .note-grid,
  .heat-layout {
    grid-template-columns: 1fr !important;
  }
  .hero h1,
  body > main:not(.page) h1 {
    font-size: clamp(40px, 12vw, 58px) !important;
  }
  body {
    font-size: 15px;
  }
}

@media (max-width: 640px) {
  .ticker,
  .summary-grid,
  .stats,
  .metrics,
  .leader-stat,
  .mobile-stats {
    grid-template-columns: 1fr !important;
  }
  .stat,
  .ticker-item,
  .metric {
    border-right: 0 !important;
  }
  .brand,
  .brand-row {
    margin-bottom: 38px !important;
  }
}