html {
  min-width: 320px;
  scrollbar-gutter: stable;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden;
  background: #070a12 !important;
  color: #d7deeb !important;
  font-family: "Noto Sans TC", "Microsoft JhengHei", "Segoe UI", system-ui, sans-serif !important;
  line-height: 1.82 !important;
}

header,
footer {
  flex-shrink: 0;
}

header {
  min-height: 64px;
  padding: 14px 24px !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.16) !important;
  background: rgba(7, 10, 18, 0.94) !important;
  backdrop-filter: blur(12px);
}

header a,
footer a,
main a {
  color: #7dd3fc !important;
  text-decoration: none !important;
}

header a {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border: 1px solid rgba(125, 211, 252, 0.24);
  border-radius: 8px;
  background: rgba(125, 211, 252, 0.06);
  font-weight: 800;
}

header a:hover,
header a:focus-visible,
footer a:hover,
footer a:focus-visible,
main a:hover,
main a:focus-visible {
  color: #f472b6 !important;
  text-decoration: none !important;
  outline: none;
}

.site-name {
  color: #f8fafc !important;
  font-size: 1.05rem !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}

main {
  width: min(100%, 828px);
  flex: 1 0 auto;
  margin: 38px auto !important;
  padding: 0 24px 72px !important;
}

.breadcrumb {
  min-height: 24px;
  margin-bottom: 22px !important;
  color: #7b879b !important;
  font-size: 0.82rem !important;
}

h1 {
  min-height: 42px;
  color: #f8fafc !important;
  font-size: clamp(1.55rem, 2.4vw, 1.9rem) !important;
  font-weight: 900 !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
}

h2 {
  color: #f472b6 !important;
  font-size: 1.04rem !important;
  font-weight: 900 !important;
  margin: 30px 0 8px !important;
  letter-spacing: 0 !important;
}

h3 {
  color: #f8fafc !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
}

p,
li,
.feature-card,
.email-card {
  color: #cbd5e1 !important;
}

h1,
h2,
h3,
p,
li,
th,
td,
.note,
.warning,
.answer,
.feature-card,
.email-card {
  text-wrap: pretty;
  line-break: strict;
  word-break: normal;
}

.links,
.link-row {
  align-items: flex-start;
}

.links a,
.link-row a {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  line-height: 1.35;
  white-space: nowrap;
  word-break: keep-all;
}

table {
  table-layout: auto;
}

th,
td {
  overflow-wrap: break-word;
}

.meta {
  min-height: 22px;
  color: #94a3b8 !important;
  margin-bottom: 30px !important;
}

.note,
.warning,
.feature-card,
.email-card {
  width: 100%;
  border-radius: 8px !important;
  box-shadow: none !important;
}

.note {
  color: #dbeafe !important;
  background: rgba(125, 211, 252, 0.07) !important;
  border: 1px solid rgba(125, 211, 252, 0.15) !important;
  border-left: 3px solid #38bdf8 !important;
}

.warning {
  color: #fde68a !important;
  background: rgba(251, 191, 36, 0.08) !important;
  border: 1px solid rgba(251, 191, 36, 0.18) !important;
  border-left: 3px solid #fbbf24 !important;
}

.feature-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.feature-card,
.email-card {
  background: rgba(15, 23, 42, 0.72) !important;
  border: 1px solid rgba(148, 163, 184, 0.14) !important;
  padding: 14px !important;
}

.feature-card b,
.email-card b,
main b,
main strong {
  color: #f8fafc !important;
}

footer {
  min-height: 104px;
  padding: 20px 24px 28px !important;
  border-top: 1px solid rgba(148, 163, 184, 0.14) !important;
  background: #070a12 !important;
  color: #7b879b !important;
}

footer a {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  margin: 0 7px !important;
  font-weight: 700;
}

@media (prefers-color-scheme: light) {
  body {
    background: #f4f6fa !important;
    color: #1e293b !important;
  }

  header,
  footer {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.1) !important;
  }

  .site-name,
  h1,
  h3,
  main b,
  main strong {
    color: #0f172a !important;
  }

  p,
  li,
  .feature-card,
  .email-card {
    color: #334155 !important;
  }

  .feature-card,
  .email-card {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.1) !important;
  }
}

@media (max-width: 720px) {
  header {
    min-height: 80px;
    align-items: flex-start !important;
    padding: 12px 18px !important;
  }

  main {
    margin: 28px auto !important;
    padding: 0 18px 56px !important;
  }

  h1 {
    min-height: auto;
    font-size: 1.45rem !important;
    line-height: 1.35 !important;
  }

  .feature-grid {
    grid-template-columns: 1fr !important;
  }

  .links a,
  .link-row a {
    white-space: normal;
  }

  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .email-card {
    align-items: flex-start !important;
  }
}

/* TYFunLab static page vitality pass */
:root {
  color-scheme: dark light;
  --ty-bg: #0c1018;
  --ty-surface: rgba(17, 22, 33, 0.94);
  --ty-surface-soft: rgba(28, 35, 49, 0.86);
  --ty-line: rgba(210, 232, 238, 0.14);
  --ty-text: #fff8fb;
  --ty-text-2: #dce8ee;
  --ty-muted: #9caeba;
  --ty-pink: #f43f9d;
  --ty-cyan: #2dd4d4;
  --ty-gold: #f7b84b;
  --ty-radius: 8px;
}

body {
  background:
    linear-gradient(180deg, rgba(45, 212, 212, 0.06) 0%, transparent 260px),
    linear-gradient(115deg, rgba(247, 184, 75, 0.035) 0%, transparent 30%),
    linear-gradient(145deg, rgba(244, 63, 157, 0.035) 0%, transparent 44%),
    var(--ty-bg) !important;
  color: var(--ty-text-2) !important;
}

header {
  background: color-mix(in srgb, var(--ty-bg) 92%, transparent) !important;
  border-bottom-color: var(--ty-line) !important;
}

.site-name {
  background: linear-gradient(90deg, var(--ty-text) 0%, var(--ty-cyan) 62%, var(--ty-gold) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

header a,
footer a,
main a {
  color: var(--ty-cyan) !important;
}

header a {
  border-color: color-mix(in srgb, var(--ty-cyan) 34%, transparent) !important;
  background: color-mix(in srgb, var(--ty-cyan) 8%, transparent) !important;
  border-radius: var(--ty-radius) !important;
}

main::before {
  content: "";
  display: block;
  width: min(360px, 64vw);
  height: 3px;
  margin-bottom: 16px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--ty-pink), var(--ty-gold), var(--ty-cyan));
}

h1,
h3,
main b,
main strong {
  color: var(--ty-text) !important;
}

h2 {
  color: var(--ty-pink) !important;
}

.breadcrumb,
.meta {
  color: var(--ty-muted) !important;
}

.note {
  color: var(--ty-text-2) !important;
  background: color-mix(in srgb, var(--ty-surface-soft) 78%, var(--ty-cyan) 5%) !important;
  border-color: color-mix(in srgb, var(--ty-cyan) 26%, var(--ty-line)) !important;
  border-left-color: var(--ty-cyan) !important;
}

.warning {
  color: var(--ty-text-2) !important;
  background: color-mix(in srgb, var(--ty-surface-soft) 78%, var(--ty-gold) 6%) !important;
  border-color: color-mix(in srgb, var(--ty-gold) 30%, var(--ty-line)) !important;
  border-left-color: var(--ty-gold) !important;
}

.feature-card,
.email-card {
  background: color-mix(in srgb, var(--ty-surface) 88%, var(--ty-cyan) 2%) !important;
  border-color: var(--ty-line) !important;
  border-radius: var(--ty-radius) !important;
}

footer {
  background: color-mix(in srgb, var(--ty-bg) 96%, transparent) !important;
  border-top-color: var(--ty-line) !important;
  color: var(--ty-muted) !important;
}

@media (prefers-color-scheme: light) {
  :root {
    --ty-bg: #fffaf3;
    --ty-surface: #fffdf8;
    --ty-surface-soft: #fff7ee;
    --ty-line: rgba(88, 60, 35, 0.15);
    --ty-text: #261b16;
    --ty-text-2: #4d3a31;
    --ty-muted: #806c60;
    --ty-pink: #c81e73;
    --ty-cyan: #0f8f9a;
    --ty-gold: #b7791f;
  }

  body {
    background:
      linear-gradient(180deg, rgba(183, 121, 31, 0.08) 0%, transparent 240px),
      linear-gradient(115deg, rgba(15, 143, 154, 0.055) 0%, transparent 38%),
      linear-gradient(145deg, rgba(200, 30, 115, 0.032) 0%, transparent 45%),
      var(--ty-bg) !important;
  }

  header,
  footer,
  .feature-card,
  .email-card {
    background: var(--ty-surface) !important;
  }
}

/* Data presentation phase 5: static article information rhythm */
main {
  position: relative;
}

h2 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

h2::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--ty-pink);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ty-pink) 12%, transparent);
}

.note,
.warning {
  padding: 14px 16px !important;
}

.feature-card,
.email-card {
  position: relative;
  overflow: hidden;
}

.feature-card::before,
.email-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--ty-cyan);
}

.feature-card:nth-child(3n + 2)::before {
  background: var(--ty-gold);
}

.feature-card:nth-child(3n)::before {
  background: var(--ty-pink);
}

main a {
  border-bottom: 1px solid color-mix(in srgb, currentColor 34%, transparent);
}

main a:hover,
main a:focus-visible {
  border-bottom-color: currentColor;
}

@media (max-width: 720px) {
  h2 {
    line-height: 1.35 !important;
  }

  .note,
  .warning,
  .feature-card,
  .email-card {
    padding: 13px 14px !important;
  }
}

/* Site theme sync: localStorage theme wins over OS color preference */
[data-theme="dark"] {
  --ty-bg: #0c1018;
  --ty-surface: rgba(17, 22, 33, 0.94);
  --ty-surface-soft: rgba(28, 35, 49, 0.86);
  --ty-line: rgba(210, 232, 238, 0.14);
  --ty-text: #fff8fb;
  --ty-text-2: #dce8ee;
  --ty-muted: #9caeba;
  --ty-pink: #f43f9d;
  --ty-cyan: #2dd4d4;
  --ty-gold: #f7b84b;
}

[data-theme="dark"] body {
  background:
    linear-gradient(180deg, rgba(45, 212, 212, 0.06) 0%, transparent 260px),
    linear-gradient(115deg, rgba(247, 184, 75, 0.035) 0%, transparent 30%),
    linear-gradient(145deg, rgba(244, 63, 157, 0.035) 0%, transparent 44%),
    var(--ty-bg) !important;
}

[data-theme="dark"] header,
[data-theme="dark"] footer {
  background: color-mix(in srgb, var(--ty-bg) 92%, transparent) !important;
  border-color: var(--ty-line) !important;
}

[data-theme="dark"] .site-name,
[data-theme="dark"] h1,
[data-theme="dark"] h3,
[data-theme="dark"] main b,
[data-theme="dark"] main strong {
  color: var(--ty-text) !important;
}

[data-theme="dark"] p,
[data-theme="dark"] li,
[data-theme="dark"] .feature-card,
[data-theme="dark"] .email-card {
  color: var(--ty-text-2) !important;
}

[data-theme="dark"] .feature-card,
[data-theme="dark"] .email-card {
  background: color-mix(in srgb, var(--ty-surface) 88%, var(--ty-cyan) 2%) !important;
  border-color: var(--ty-line) !important;
}

[data-theme="dark"] .answer {
  color: var(--ty-text-2) !important;
  background: color-mix(in srgb, var(--ty-surface-soft) 78%, var(--ty-cyan) 5%) !important;
  border-color: color-mix(in srgb, var(--ty-cyan) 26%, var(--ty-line)) !important;
  border-left-color: var(--ty-cyan) !important;
}

[data-theme="dark"] .links a,
[data-theme="dark"] .link-row a {
  color: var(--ty-cyan) !important;
  background: color-mix(in srgb, var(--ty-surface) 88%, var(--ty-cyan) 3%) !important;
  border-color: color-mix(in srgb, var(--ty-cyan) 32%, var(--ty-line)) !important;
}

[data-theme="dark"] table {
  border-color: var(--ty-line) !important;
}

[data-theme="dark"] th {
  color: var(--ty-text) !important;
  background: color-mix(in srgb, var(--ty-surface-soft) 88%, var(--ty-cyan) 5%) !important;
}

[data-theme="dark"] td {
  color: var(--ty-text-2) !important;
  border-color: var(--ty-line) !important;
}

[data-theme="light"] {
  --ty-bg: #fff8ef;
  --ty-surface: #ffffff;
  --ty-surface-soft: #fff3e4;
  --ty-line: rgba(91, 59, 37, 0.2);
  --ty-text: #241711;
  --ty-text-2: #3f2b22;
  --ty-muted: #725c50;
  --ty-pink: #c81e73;
  --ty-cyan: #0f8f9a;
  --ty-gold: #b7791f;
}

[data-theme="light"] body {
  background:
    linear-gradient(180deg, rgba(183, 121, 31, 0.08) 0%, transparent 240px),
    linear-gradient(115deg, rgba(15, 143, 154, 0.055) 0%, transparent 38%),
    linear-gradient(145deg, rgba(200, 30, 115, 0.032) 0%, transparent 45%),
    var(--ty-bg) !important;
}

[data-theme="light"] header,
[data-theme="light"] footer,
[data-theme="light"] .feature-card,
[data-theme="light"] .email-card {
  background: var(--ty-surface) !important;
}

[data-theme="light"] .site-name,
[data-theme="light"] h1,
[data-theme="light"] h3,
[data-theme="light"] main b,
[data-theme="light"] main strong {
  color: var(--ty-text) !important;
}

[data-theme="light"] p,
[data-theme="light"] li,
[data-theme="light"] .feature-card,
[data-theme="light"] .email-card {
  color: var(--ty-text-2) !important;
}

[data-theme="light"] .breadcrumb,
[data-theme="light"] .meta,
[data-theme="light"] footer {
  color: var(--ty-muted) !important;
}

[data-theme="light"] h2 {
  color: var(--ty-pink) !important;
}

[data-theme="light"] header a,
[data-theme="light"] footer a,
[data-theme="light"] main a {
  color: var(--ty-cyan) !important;
}

[data-theme="light"] .note {
  color: var(--ty-text-2) !important;
  background: color-mix(in srgb, var(--ty-surface-soft) 86%, var(--ty-cyan) 4%) !important;
  border-color: color-mix(in srgb, var(--ty-cyan) 28%, var(--ty-line)) !important;
  border-left-color: var(--ty-cyan) !important;
}

[data-theme="light"] .answer {
  color: var(--ty-text-2) !important;
  background: color-mix(in srgb, var(--ty-surface-soft) 86%, var(--ty-cyan) 4%) !important;
  border-color: color-mix(in srgb, var(--ty-cyan) 28%, var(--ty-line)) !important;
  border-left-color: var(--ty-cyan) !important;
}

[data-theme="light"] .warning {
  color: var(--ty-text-2) !important;
  background: color-mix(in srgb, var(--ty-surface-soft) 88%, var(--ty-gold) 6%) !important;
  border-color: color-mix(in srgb, var(--ty-gold) 34%, var(--ty-line)) !important;
  border-left-color: var(--ty-gold) !important;
}

[data-theme="light"] .feature-card,
[data-theme="light"] .email-card {
  border-color: var(--ty-line) !important;
  box-shadow: 0 1px 0 rgba(91, 59, 37, 0.04) !important;
}

[data-theme="light"] .links a,
[data-theme="light"] .link-row a {
  color: var(--ty-cyan) !important;
  background: color-mix(in srgb, var(--ty-surface) 92%, var(--ty-cyan) 4%) !important;
  border-color: color-mix(in srgb, var(--ty-cyan) 35%, var(--ty-line)) !important;
}

[data-theme="light"] .links a:hover,
[data-theme="light"] .links a:focus-visible,
[data-theme="light"] .link-row a:hover,
[data-theme="light"] .link-row a:focus-visible {
  background: color-mix(in srgb, var(--ty-cyan) 10%, var(--ty-surface)) !important;
}

[data-theme="light"] table {
  border-color: var(--ty-line) !important;
}

[data-theme="light"] th {
  color: var(--ty-text) !important;
  background: color-mix(in srgb, var(--ty-surface-soft) 88%, var(--ty-cyan) 5%) !important;
}

[data-theme="light"] td {
  color: var(--ty-text-2) !important;
  border-color: var(--ty-line) !important;
}