:root {--background: #f8fffe;--foreground: #134e4a;--card: #ffffff;--card-hover: #f0fdfa;--muted: #5f7a76;--border: #d1e7e4;--primary: #0d9488;--primary-light: #14b8a6;--primary-dark: #0f766e;--primary-50: #f0fdfa;--primary-100: #ccfbf1;--accent: #ea580c;--font-sans: "Plus Jakarta Sans", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-serif: "DM Serif Display", "Georgia", "Times New Roman", serif;}
.dark {--background: #0c1a19;--foreground: #e6f7f5;--card: #142926;--card-hover: #1e3a36;--muted: #8fb5af;--border: #1e3a36;--primary: #2dd4bf;--primary-light: #5eead4;--primary-dark: #14b8a6;--primary-50: rgba(45, 212, 191, 0.10);--primary-100: rgba(45, 212, 191, 0.16);}
* {box-sizing: border-box;margin: 0;padding: 0;}
html {scroll-behavior: smooth;-webkit-text-size-adjust: 100%;}
body {background: var(--background);color: var(--foreground);font-family: var(--font-sans);font-size: 16px;line-height: 1.5;transition: background-color 0.3s ease, color 0.3s ease;overflow-x: hidden;min-height: 100vh;display: flex;flex-direction: column;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
img {max-width: 100%;display: block;}
a {color: inherit;text-decoration: none;}
button {font-family: inherit;cursor: pointer;border: none;background: none;color: inherit;}
ul, ol {list-style: none;}
.i {fill: none;stroke: currentColor;stroke-width: 2;stroke-linecap: round;stroke-linejoin: round;}
::-webkit-scrollbar {width: 6px;}
::-webkit-scrollbar-track {background: var(--background);}
::-webkit-scrollbar-thumb {background: #99f6e4;border-radius: 3px;}
.dark ::-webkit-scrollbar-thumb {background: #1e3a36;}
.container {max-width: 1152px;margin: 0 auto;padding: 0 16px;}
.container-narrow {max-width: 896px;margin: 0 auto;padding: 0 16px;}
.container-contact {max-width: 768px;margin: 0 auto;padding: 0 16px;}
@media (min-width: 640px) {.container, .container-narrow, .container-contact {padding: 0 24px;}}
.main {flex: 1;}
.font-serif {font-family: var(--font-serif);}
.text-primary {color: var(--primary);}
.text-muted {color: var(--muted);}
.text-foreground {color: var(--foreground);}
.section-pad {padding: 48px 0;}
@media (min-width: 640px) {.section-pad {padding: 64px 0;}}
.section-alt {background: #f0fdfa;}
.dark .section-alt {background: rgba(12, 26, 25, 0.6);}
.section-heading {margin-bottom: 32px;}
.section-heading .eyebrow {color: var(--primary);font-weight: 700;font-size: 11px;letter-spacing: 0.12em;text-transform: uppercase;margin-bottom: 6px;}
.section-heading h2 {font-family: var(--font-serif);font-size: 20px;font-weight: 400;}
@media (min-width: 640px) {.section-heading h2 {font-size: 24px;}}
.line-clamp-2 {display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;}
.line-clamp-3 {display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;overflow: hidden;}
.sm-only {display: none;}
@media (min-width: 640px) {.sm-only {display: inline;}}
.ad-slot {width: 100%;text-align: center;}
.site-header {position: relative;z-index: 30;background: rgba(248, 255, 254, 0.85);backdrop-filter: blur(12px);-webkit-backdrop-filter: blur(12px);border-bottom: 1px solid var(--border);}
.dark .site-header {background: rgba(12, 26, 25, 0.88);border-bottom-color: var(--border);}
.header-inner {max-width: 1152px;margin: 0 auto;padding: 0 16px;}
.header-row {display: flex;align-items: center;justify-content: space-between;height: 56px;}
@media (min-width: 640px) {.header-inner {padding: 0 24px;} .header-row {height: 64px;}}
.brand {display: flex;align-items: center;gap: 8px;}
.brand-logo {width: 28px;height: 28px;border-radius: 8px;overflow: hidden;transition: transform 0.2s ease;}
.brand:hover .brand-logo {transform: scale(1.05);}
.brand-logo img {width: 100%;height: 100%;}
.brand-name {font-weight: 800;font-size: 16px;letter-spacing: -0.03em;}
@media (min-width: 1024px) {.brand-logo {width: 32px;height: 32px;} .brand-name {font-size: 18px;}}
.desktop-nav {display: none;align-items: center;gap: 2px;}
.desktop-nav a {padding: 6px 14px;font-size: 14px;font-weight: 500;border-radius: 8px;transition: color 0.2s ease, background-color 0.2s ease;}
.desktop-nav a:hover, .desktop-nav a[aria-current="page"] {background: rgba(13, 148, 136, 0.08);color: var(--primary);}
.dark .desktop-nav a:hover, .dark .desktop-nav a[aria-current="page"] {background: rgba(45, 212, 191, 0.12);}
@media (min-width: 1024px) {.desktop-nav {display: flex;}}
.header-actions {display: flex;align-items: center;gap: 8px;}
.theme-toggle {padding: 8px;border-radius: 9999px;transition: background-color 0.2s ease;display: inline-flex;}
.theme-toggle:hover {background: rgba(13, 148, 136, 0.1);}
.dark .theme-toggle:hover {background: rgba(45, 212, 191, 0.12);}
.theme-toggle svg {width: 20px;height: 20px;}
.theme-toggle .icon-sun {display: none;color: var(--primary-light);}
.theme-toggle .icon-moon {display: block;color: #92400e;}
.dark .theme-toggle .icon-sun {display: block;}
.dark .theme-toggle .icon-moon {display: none;}
.menu-button {display: inline-flex;padding: 8px;border-radius: 8px;transition: background-color 0.2s ease;}
.menu-button:hover {background: rgba(13, 148, 136, 0.08);}
.dark .menu-button:hover {background: rgba(45, 212, 191, 0.12);}
.menu-button svg {width: 20px;height: 20px;}
@media (min-width: 1024px) {.menu-button {display: none;}}
.mobile-nav-overlay {position: fixed;inset: 0;z-index: 40;background: rgba(0, 0, 0, 0.35);backdrop-filter: blur(4px);-webkit-backdrop-filter: blur(4px);opacity: 0;pointer-events: none;transition: opacity 0.3s ease;}
.mobile-nav-panel {position: fixed;top: 0;right: 0;z-index: 50;width: 280px;max-width: 85vw;height: 100vh;background: var(--card);box-shadow: -4px 0 24px rgba(0, 0, 0, 0.10);overflow-y: auto;transform: translateX(100%);transition: transform 0.3s ease;}
body.menu-open .mobile-nav-overlay {opacity: 1;pointer-events: auto;}
body.menu-open .mobile-nav-panel {transform: translateX(0);}
body.menu-open {overflow: hidden;}
.mobile-nav-head {display: flex;align-items: center;justify-content: space-between;margin-bottom: 32px;}
.mobile-nav-close {padding: 8px;border-radius: 8px;transition: background-color 0.2s ease;display: inline-flex;}
.mobile-nav-close:hover {background: rgba(107, 114, 128, 0.12);}
.mobile-nav-close svg {width: 20px;height: 20px;}
.mobile-nav-links {display: flex;flex-direction: column;gap: 4px;}
.mobile-nav-links a {padding: 12px 16px;font-size: 16px;font-weight: 500;border-radius: 10px;transition: color 0.2s ease, background-color 0.2s ease;}
.mobile-nav-links a:hover, .mobile-nav-links a[aria-current="page"] {background: rgba(13, 148, 136, 0.08);color: var(--primary);}
.dark .mobile-nav-links a:hover, .dark .mobile-nav-links a[aria-current="page"] {background: rgba(45, 212, 191, 0.12);}
.btn-primary {display: inline-flex;align-items: center;gap: 8px;padding: 12px 24px;background: var(--primary);color: #fff;font-weight: 600;border-radius: 10px;transition: background-color 0.2s ease;word-break: break-all;}
.btn-primary:hover {background: var(--primary-dark);}
.btn-primary svg {width: 16px;height: 16px;flex-shrink: 0;}
.hero {position: relative;overflow: hidden;min-height: 520px;}
@media (min-width: 640px) {.hero {min-height: 600px;}}
.hero-bg {position: absolute;inset: 0;background-size: cover;background-position: center;background-repeat: no-repeat;}
.hero-overlay {position: absolute;inset: 0;background: linear-gradient(135deg, rgba(4, 47, 46, 0.82), rgba(13, 148, 136, 0.55) 50%, rgba(234, 88, 12, 0.30));}
.hero-fade {position: absolute;bottom: 0;left: 0;right: 0;height: 128px;background: linear-gradient(to top, var(--background), transparent);}
.hero-content {position: relative;z-index: 10;max-width: 1152px;margin: 0 auto;padding: 64px 16px;}
@media (min-width: 640px) {.hero-content {padding: 96px 24px;}}
.hero-grid {display: grid;grid-template-columns: 1fr;gap: 32px;align-items: center;}
@media (min-width: 1024px) {.hero-grid {grid-template-columns: repeat(12, 1fr);}}
.hero-left {grid-column: span 1;}
.hero-right {grid-column: span 1;}
@media (min-width: 1024px) {.hero-left {grid-column: span 7;} .hero-right {grid-column: span 5;}}
.hero-card {display: block;border-radius: 16px;overflow: hidden;box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35);transition: box-shadow 0.5s ease;}
.hero-card-media {position: relative;aspect-ratio: 16 / 10;}
.hero-card-media img {width: 100%;height: 100%;object-fit: cover;}
.hero-card-shade {position: absolute;inset: 0;background: linear-gradient(to top, rgba(0, 0, 0, 0.65), transparent 50%);pointer-events: none;}
.hero-card-title {position: absolute;bottom: 0;left: 0;right: 0;z-index: 10;padding: 24px;font-family: var(--font-serif);font-size: 24px;font-weight: 400;color: #fff;line-height: 1.25;transition: color 0.3s ease;}
@media (min-width: 640px) {.hero-card-title {font-size: 30px;}}
@media (min-width: 768px) {.hero-card-title {font-size: 36px;}}
.hero-card:hover .hero-card-title {color: #fdba74;}
.hero-eyebrow {display: flex;align-items: center;gap: 8px;margin-bottom: 12px;}
.hero-eyebrow svg {width: 16px;height: 16px;color: var(--accent);}
.hero-eyebrow span {color: var(--accent);font-size: 12px;font-weight: 700;letter-spacing: 0.06em;text-transform: uppercase;}
.hero-right .hero-right-inner > * + * {margin-top: 0;}
.hero-excerpt {color: rgba(255, 255, 255, 0.88);font-size: 14px;line-height: 1.625;margin-bottom: 16px;}
@media (min-width: 640px) {.hero-excerpt {font-size: 16px;}}
.hero-meta {display: flex;align-items: center;gap: 12px;font-size: 12px;color: rgba(255, 255, 255, 0.65);margin-bottom: 24px;}
.hero-meta .dot {width: 4px;height: 4px;border-radius: 9999px;background: rgba(255, 255, 255, 0.35);}
.hero-meta svg {width: 12px;height: 12px;}
.hero-cta {display: inline-flex;align-items: center;gap: 8px;padding: 12px 24px;background: var(--primary);color: #fff;font-weight: 600;border-radius: 10px;transition: background-color 0.2s ease;box-shadow: 0 10px 15px -3px rgba(13, 148, 136, 0.3);}
.hero-cta:hover {background: var(--primary-dark);}
.hero-cta svg {width: 16px;height: 16px;}
.editors-grid {display: grid;grid-template-columns: 1fr;gap: 20px;}
@media (min-width: 1024px) {.editors-grid {grid-template-columns: repeat(12, 1fr);}}
.editors-main {grid-column: span 1;display: block;}
.editors-side {grid-column: span 1;display: flex;flex-direction: column;gap: 20px;}
@media (min-width: 1024px) {.editors-main {grid-column: span 7;} .editors-side {grid-column: span 5;}}
.editors-main-card {display: flex;flex-direction: column;height: 100%;border-radius: 16px;overflow: hidden;background: var(--card);border: 1px solid var(--border);transition: border-color 0.3s ease, box-shadow 0.3s ease;}
.editors-main-card:hover {border-color: rgba(13, 148, 136, 0.3);box-shadow: 0 20px 25px -5px rgba(13, 148, 136, 0.08);}
.editors-main-media {position: relative;aspect-ratio: 16 / 7;}
.editors-main-media img {width: 100%;height: 100%;object-fit: cover;}
.editors-main-shade {position: absolute;inset: 0;background: linear-gradient(to top, rgba(0, 0, 0, 0.65), transparent);pointer-events: none;}
.editors-main-title {position: absolute;bottom: 0;left: 0;right: 0;z-index: 10;padding: 20px;font-family: var(--font-serif);font-size: 18px;font-weight: 400;color: #fff;line-height: 1.375;}
@media (min-width: 640px) {.editors-main-title {font-size: 20px;}}
.editors-main-card:hover .editors-main-title {color: #99f6e4;}
.editors-main-body {padding: 16px;}
.editors-main-body p {color: var(--muted);font-size: 12px;line-height: 1.625;margin-bottom: 8px;}
@media (min-width: 640px) {.editors-main-body p {font-size: 14px;}}
.editors-main-body .card-meta {display: flex;align-items: center;gap: 8px;font-size: 11px;color: var(--muted);}
.editors-main-body .card-meta svg {width: 12px;height: 12px;}
.mini-card {display: flex;gap: 12px;padding: 12px;border-radius: 12px;background: var(--card);border: 1px solid var(--border);transition: border-color 0.2s ease;flex: 1;}
.mini-card:hover {border-color: rgba(13, 148, 136, 0.3);}
.mini-thumb {flex-shrink: 0;width: 96px;height: 96px;border-radius: 8px;overflow: hidden;}
.mini-thumb img {width: 100%;height: 100%;object-fit: cover;}
.mini-thumb .cover-fallback {width: 100%;height: 100%;}
.mini-body {flex: 1;min-width: 0;display: flex;flex-direction: column;justify-content: center;}
.mini-body h3 {font-family: var(--font-serif);font-size: 12px;font-weight: 400;line-height: 1.375;}
@media (min-width: 640px) {.mini-body h3 {font-size: 14px;}}
.mini-card:hover .mini-body h3 {color: var(--primary);}
.mini-meta {display: flex;align-items: center;gap: 6px;font-size: 10px;color: var(--muted);margin-top: 4px;}
.mini-meta svg {width: 10px;height: 10px;}
.card-grid {display: grid;grid-template-columns: 1fr;gap: 20px;}
@media (min-width: 640px) {.card-grid {grid-template-columns: repeat(2, 1fr);}}
@media (min-width: 1024px) {.card-grid {grid-template-columns: repeat(3, 1fr);}}
.article-card {display: block;transition: transform 0.3s ease, box-shadow 0.3s ease;}
.article-card:hover {transform: translateY(-4px);box-shadow: 0 12px 32px rgba(13, 148, 136, 0.10);}
.article-card-inner {position: relative;height: 100%;border-radius: 14px;overflow: hidden;background: var(--card);border: 1px solid var(--border);transition: border-color 0.3s ease, box-shadow 0.3s ease;}
.article-card:hover .article-card-inner {border-color: rgba(13, 148, 136, 0.25);box-shadow: 0 10px 15px -3px rgba(13, 148, 136, 0.06);}
.card-image-wrap {position: relative;aspect-ratio: 16 / 10;overflow: hidden;}
.card-image-wrap img {width: 100%;height: 100%;object-fit: cover;transition: transform 0.4s ease;}
.article-card:hover .card-image-wrap img {transform: scale(1.04);}
.card-hover-shade {position: absolute;inset: 0;background: linear-gradient(to top, rgba(0, 0, 0, 0.35), transparent);opacity: 0;transition: opacity 0.3s ease;}
.article-card:hover .card-hover-shade {opacity: 1;}
.card-hover-arrow {position: absolute;top: 10px;right: 10px;width: 28px;height: 28px;border-radius: 9999px;background: rgba(255, 255, 255, 0.9);display: flex;align-items: center;justify-content: center;opacity: 0;transition: opacity 0.3s ease;}
.article-card:hover .card-hover-arrow {opacity: 1;}
.card-hover-arrow svg {width: 14px;height: 14px;color: #042f2e;}
.card-body {padding: 14px;}
@media (min-width: 640px) {.card-body {padding: 16px;}}
.card-body h3 {font-family: var(--font-serif);font-size: 14px;font-weight: 400;line-height: 1.375;margin-bottom: 6px;transition: color 0.2s ease;}
@media (min-width: 640px) {.card-body h3 {font-size: 16px;}}
.article-card:hover .card-body h3 {color: var(--primary);}
.card-body .card-excerpt {color: var(--muted);font-size: 11px;line-height: 1.625;margin-bottom: 10px;}
@media (min-width: 640px) {.card-body .card-excerpt {font-size: 12px;}}
.card-body .card-footer {display: flex;align-items: center;justify-content: flex-end;padding-top: 8px;border-top: 1px solid rgba(209, 231, 228, 0.6);}
.dark .card-body .card-footer {border-top-color: rgba(30, 58, 54, 0.6);}
.card-footer .card-meta {display: flex;align-items: center;gap: 6px;font-size: 10px;color: var(--muted);}
.card-footer .card-meta .dot {width: 4px;height: 4px;border-radius: 9999px;background: rgba(95, 122, 118, 0.3);}
.card-footer .card-meta svg {width: 10px;height: 10px;}
.simple-card {display: block;height: 100%;border-radius: 14px;overflow: hidden;background: var(--card);border: 1px solid var(--border);transition: border-color 0.2s ease, box-shadow 0.2s ease;}
.simple-card:hover {border-color: rgba(13, 148, 136, 0.3);box-shadow: 0 10px 15px -3px rgba(13, 148, 136, 0.08);}
.simple-card-media {position: relative;aspect-ratio: 16 / 10;}
.simple-card-media img {width: 100%;height: 100%;object-fit: cover;}
.simple-card-body {padding: 14px;}
@media (min-width: 640px) {.simple-card-body {padding: 16px;}}
.simple-card-body h3 {font-family: var(--font-serif);font-size: 14px;font-weight: 400;line-height: 1.375;margin-bottom: 6px;transition: color 0.2s ease;}
@media (min-width: 640px) {.simple-card-body h3 {font-size: 16px;}}
.simple-card:hover .simple-card-body h3 {color: var(--primary);}
.simple-card-body .mini-meta {display: flex;align-items: center;gap: 6px;font-size: 10px;color: var(--muted);}
.simple-card-body .mini-meta svg {width: 10px;height: 10px;}
.cover-fallback {width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;background: var(--card);position: relative;}
.cover-fallback svg {width: 80px;height: 80px;color: rgba(13, 148, 136, 0.25);position: relative;z-index: 1;}
.cover-fallback .blur-icon {position: absolute;inset: 0;margin: auto;width: 80px;height: 80px;color: rgba(13, 148, 136, 0.10);filter: blur(24px);z-index: 0;}
.category-banner {position: relative;overflow: hidden;padding: 48px 0;}
@media (min-width: 640px) {.category-banner {padding: 64px 0;}}
.category-banner-blur {position: absolute;inset: 0;opacity: 0.3;pointer-events: none;}
.category-banner .blur-circle {position: absolute;border-radius: 9999px;filter: blur(64px);}
.category-banner .blur-circle-top {top: 0;right: 25%;width: 384px;height: 384px;}
.category-banner .blur-circle-bottom {bottom: 0;left: 25%;width: 320px;height: 320px;}
.category-banner-inner {position: relative;z-index: 10;max-width: 1152px;margin: 0 auto;padding: 0 16px;}
@media (min-width: 640px) {.category-banner-inner {padding: 0 24px;}}
.breadcrumbs {display: flex;align-items: center;gap: 6px;font-size: 12px;color: var(--muted);margin-bottom: 24px;overflow-x: auto;white-space: nowrap;}
.breadcrumbs a {display: inline-flex;align-items: center;gap: 4px;transition: color 0.2s ease;}
.breadcrumbs a:hover {color: var(--primary);}
.breadcrumbs svg {width: 12px;height: 12px;flex-shrink: 0;}
.breadcrumbs .current {color: var(--foreground);font-weight: 500;}
.breadcrumbs-light {color: rgba(255, 255, 255, 0.6);}
.breadcrumbs-light a:hover {color: #fff;}
.breadcrumbs-light .current {color: rgba(255, 255, 255, 0.9);}
.category-title-row {display: flex;align-items: flex-start;gap: 16px;margin-bottom: 16px;}
.category-icon-box {width: 64px;height: 64px;flex-shrink: 0;border-radius: 14px;display: flex;align-items: center;justify-content: center;box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);}
.category-icon-box svg {width: 32px;height: 32px;color: #fff;}
.category-title-row h1 {font-family: var(--font-serif);font-size: 30px;font-weight: 400;line-height: 1.15;margin-bottom: 8px;}
@media (min-width: 640px) {.category-title-row h1 {font-size: 36px;}}
@media (min-width: 768px) {.category-title-row h1 {font-size: 48px;}}
.category-title-row p {color: var(--muted);font-size: 14px;line-height: 1.625;max-width: 672px;}
@media (min-width: 640px) {.category-title-row p {font-size: 16px;}}
@media (min-width: 768px) {.category-title-row p {font-size: 18px;}}
.category-count {margin-top: 24px;display: flex;align-items: center;gap: 8px;font-size: 12px;color: var(--muted);}
.category-count span {padding: 4px 12px;border-radius: 9999px;background: rgba(255, 255, 255, 0.5);backdrop-filter: blur(4px);}
.dark .category-count span {background: rgba(255, 255, 255, 0.1);}
.featured-article {margin-bottom: 32px;}
.featured-card {display: grid;grid-template-columns: 1fr;gap: 0;border-radius: 16px;overflow: hidden;background: var(--card);border: 1px solid var(--border);transition: border-color 0.3s ease, box-shadow 0.3s ease;}
.featured-card:hover {border-color: rgba(13, 148, 136, 0.3);box-shadow: 0 20px 25px -5px rgba(13, 148, 136, 0.08);}
@media (min-width: 1024px) {.featured-card {grid-template-columns: repeat(12, 1fr);}}
.featured-media {grid-column: span 1;position: relative;aspect-ratio: 16 / 10;background: #f0fdfa;}
@media (min-width: 1024px) {.featured-media {grid-column: span 7;aspect-ratio: auto;min-height: 300px;}}
.featured-media img {width: 100%;height: 100%;object-fit: cover;position: absolute;inset: 0;}
.featured-media .cover-fallback {position: absolute;inset: 0;}
.featured-media-shade {position: absolute;inset: 0;background: linear-gradient(to top, rgba(0, 0, 0, 0.45), transparent);pointer-events: none;}
@media (min-width: 1024px) {.featured-media-shade {background: linear-gradient(to right, rgba(0, 0, 0, 0.45), transparent);}}
.featured-badge {position: absolute;top: 16px;left: 16px;display: inline-block;padding: 4px 12px;font-size: 12px;font-weight: 700;color: #fff;border-radius: 9999px;background: var(--accent);}
.featured-body {grid-column: span 1;padding: 24px;display: flex;flex-direction: column;justify-content: center;}
@media (min-width: 1024px) {.featured-body {grid-column: span 5;}}
.featured-body h2 {font-family: var(--font-serif);font-size: 20px;font-weight: 400;line-height: 1.375;margin-bottom: 12px;transition: color 0.2s ease;}
@media (min-width: 640px) {.featured-body h2 {font-size: 24px;}}
.featured-card:hover .featured-body h2 {color: var(--primary);}
.featured-body p {color: var(--muted);font-size: 14px;line-height: 1.625;margin-bottom: 16px;}
.featured-meta {display: flex;align-items: center;gap: 12px;font-size: 12px;color: var(--muted);flex-wrap: wrap;}
.featured-meta span {display: inline-flex;align-items: center;gap: 6px;}
.featured-meta svg {width: 14px;height: 14px;}
.featured-meta .dot {width: 4px;height: 4px;border-radius: 9999px;background: rgba(95, 122, 118, 0.3);}
.pagination {margin-top: 40px;display: flex;align-items: center;justify-content: center;gap: 8px;flex-wrap: wrap;}
@media (min-width: 640px) {.pagination {margin-top: 56px;}}
.pagination a, .pagination span {display: flex;align-items: center;justify-content: center;gap: 4px;min-width: 40px;height: 40px;padding: 0 16px;border-radius: 10px;border: 1px solid var(--border);font-size: 14px;font-weight: 500;transition: border-color 0.2s ease, background-color 0.2s ease;}
.pagination a:hover {border-color: rgba(13, 148, 136, 0.4);background: rgba(13, 148, 136, 0.05);}
.pagination a.current {background: var(--primary);color: #fff;border-color: var(--primary);box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);}
.pagination .disabled {color: rgba(95, 122, 118, 0.5);cursor: not-allowed;}
.pagination svg {width: 16px;height: 16px;}
.empty-state {text-align: center;padding: 64px 0;}
.empty-state .empty-icon {width: 80px;height: 80px;border-radius: 16px;background: rgba(13, 148, 136, 0.08);display: flex;align-items: center;justify-content: center;margin: 0 auto 16px;}
.empty-state .empty-icon svg {width: 40px;height: 40px;color: rgba(13, 148, 136, 0.4);}
.empty-state p {color: var(--muted);font-size: 14px;}
@media (min-width: 640px) {.empty-state p {font-size: 18px;}}
.reading-progress {position: fixed;top: 0;left: 0;height: 3px;width: 0;background: linear-gradient(90deg, #0d9488, #ea580c);z-index: 9999;transition: width 0.1s linear;}
.article-hero {position: relative;overflow: hidden;min-height: 380px;}
@media (min-width: 640px) {.article-hero {min-height: 420px;}}
.article-hero-bg {position: absolute;inset: 0;background-size: cover;background-position: center;background-repeat: no-repeat;}
.article-hero-shade {position: absolute;inset: 0;background: linear-gradient(to top, rgba(4, 47, 46, 0.85), rgba(13, 148, 136, 0.5) 50%, rgba(4, 47, 46, 0.4));}
.article-hero-fallback {position: absolute;inset: 0;background: linear-gradient(to bottom right, #042f2e, #0f766e 50%, #0d9488);}
.article-hero-content {position: relative;z-index: 10;max-width: 896px;margin: 0 auto;padding: 48px 16px;}
@media (min-width: 640px) {.article-hero-content {padding: 64px 24px;}}
.article-hero-content h1 {font-family: var(--font-serif);font-size: 30px;font-weight: 400;color: #fff;line-height: 1.25;margin-bottom: 24px;}
@media (min-width: 640px) {.article-hero-content h1 {font-size: 36px;}}
@media (min-width: 768px) {.article-hero-content h1 {font-size: 48px;}}
.article-lead {color: rgba(255, 255, 255, 0.8);font-size: 14px;line-height: 1.625;margin-bottom: 24px;max-width: 768px;}
@media (min-width: 640px) {.article-lead {font-size: 16px;}}
.article-meta {display: flex;flex-wrap: wrap;align-items: center;gap: 16px;font-size: 12px;color: rgba(255, 255, 255, 0.6);}
.article-meta span {display: inline-flex;align-items: center;gap: 6px;}
.article-meta svg {width: 14px;height: 14px;}
.article-meta .dot {width: 4px;height: 4px;border-radius: 9999px;background: rgba(255, 255, 255, 0.35);}
.article-body-wrap {max-width: 896px;margin: 0 auto;padding: 40px 16px 56px;}
@media (min-width: 640px) {.article-body-wrap {padding: 56px 24px 64px;}}
.disclaimer {margin-top: 40px;padding: 20px;border-radius: 12px;background: #fff7ed;border: 1px solid #fed7aa;}
.dark .disclaimer {background: rgba(67, 20, 7, 0.3);border-color: rgba(154, 52, 18, 0.5);}
.disclaimer p {font-size: 12px;color: #9a3412;line-height: 1.625;}
.dark .disclaimer p {color: #fdba74;}
.prose {max-width: none;}
.prose h1 {font-family: var(--font-serif);font-size: 1.8rem;font-weight: 400;margin: 2rem 0 1rem;color: var(--foreground);line-height: 1.3;}
.prose h2 {font-family: var(--font-serif);font-size: 1.6rem;font-weight: 400;margin: 2rem 0 1rem;color: var(--foreground);line-height: 1.3;}
.prose h3 {font-family: var(--font-serif);font-size: 1.25rem;font-weight: 400;margin: 1.5rem 0 0.75rem;color: var(--foreground);}
.prose h4 {font-weight: 600;margin: 1.25rem 0 0.5rem;color: var(--foreground);}
.prose p {margin-bottom: 1.25rem;line-height: 1.8;color: var(--muted);}
.prose ul, .prose ol {margin-bottom: 1.25rem;padding-left: 1.5rem;}
.prose ul li {list-style: disc;}
.prose ol li {list-style: decimal;}
.prose li {margin-bottom: 0.5rem;line-height: 1.7;color: var(--muted);}
.prose strong {color: var(--foreground);font-weight: 600;}
.prose blockquote {border-left: 3px solid var(--primary);padding: 16px 20px;margin: 24px 0;font-style: italic;color: var(--muted);background: var(--primary-50);border-radius: 0 10px 10px 0;}
.dark .prose blockquote {background: rgba(45, 212, 191, 0.10);color: #b5d5cf;}
.prose img {border-radius: 12px;margin: 24px 0;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);}
.prose a {color: var(--primary);text-decoration: underline;text-underline-offset: 2px;}
.prose a:hover {text-decoration-thickness: 2px;}
.dark .prose a:hover {color: #99f6e4;}
.prose code {background: var(--primary-50);color: var(--primary-dark);padding: 0.15em 0.4em;border-radius: 4px;font-size: 0.875em;font-weight: 500;}
.dark .prose code {background: rgba(45, 212, 191, 0.12);color: #5eead4;}
@media (max-width: 640px) {.prose h2 {font-size: 1.35rem;}
.prose h3 {font-size: 1.1rem;}
.prose p {font-size: 0.95rem;line-height: 1.75;}
.prose li {font-size: 0.95rem;}}
.content-section {margin-bottom: 40px;}
@media (min-width: 640px) {.content-section {margin-bottom: 56px;}}
.content-page {max-width: 896px;margin: 0 auto;padding: 40px 16px 56px;}
.content-page-contact {max-width: 768px;}
@media (min-width: 640px) {.content-page {padding: 56px 24px 64px;}}
.content-hero {text-align: center;margin-bottom: 48px;}
@media (min-width: 640px) {.content-hero {margin-bottom: 64px;}}
.content-hero .hero-icon-box {display: inline-flex;align-items: center;justify-content: center;width: 64px;height: 64px;border-radius: 16px;background: linear-gradient(to bottom right, #0d9488, #ea580c);box-shadow: 0 10px 15px -3px rgba(13, 148, 136, 0.2);margin-bottom: 24px;}
@media (min-width: 640px) {.content-hero .hero-icon-box {width: 80px;height: 80px;}}
.content-hero .hero-icon-box svg {width: 32px;height: 32px;color: #fff;}
@media (min-width: 640px) {.content-hero .hero-icon-box svg {width: 40px;height: 40px;}}
.content-hero h1 {font-family: var(--font-serif);font-size: 30px;font-weight: 400;margin-bottom: 16px;}
@media (min-width: 640px) {.content-hero h1 {font-size: 36px;}}
@media (min-width: 768px) {.content-hero h1 {font-size: 48px;}}
.content-hero .hero-sub {color: var(--muted);font-size: 14px;line-height: 1.625;max-width: 672px;margin: 0 auto;}
@media (min-width: 640px) {.content-hero .hero-sub {font-size: 18px;}}
.info-card {padding: 24px;border-radius: 16px;background: var(--card);border: 1px solid var(--border);}
@media (min-width: 640px) {.info-card {padding: 32px;}}
.info-card-head {display: flex;align-items: center;gap: 12px;margin-bottom: 16px;}
.info-card-head .icon-chip {width: 40px;height: 40px;border-radius: 10px;background: rgba(13, 148, 136, 0.1);display: flex;align-items: center;justify-content: center;}
.dark .info-card-head .icon-chip {background: rgba(45, 212, 191, 0.12);}
.info-card-head .icon-chip svg {width: 20px;height: 20px;color: var(--primary);}
.info-card-head h2 {font-family: var(--font-serif);font-size: 20px;font-weight: 400;}
@media (min-width: 640px) {.info-card-head h2 {font-size: 24px;}}
.info-card p {color: var(--muted);font-size: 14px;line-height: 1.625;}
@media (min-width: 640px) {.info-card p {font-size: 16px;}}
.info-card p + p {margin-top: 16px;}
.value-grid {display: grid;grid-template-columns: 1fr;gap: 16px;}
@media (min-width: 640px) {.value-grid {grid-template-columns: repeat(3, 1fr);gap: 24px;}}
.value-card {padding: 20px;border-radius: 14px;background: var(--card);border: 1px solid var(--border);}
@media (min-width: 640px) {.value-card {padding: 24px;}}
.value-card .icon-chip {width: 40px;height: 40px;border-radius: 10px;background: rgba(13, 148, 136, 0.1);display: flex;align-items: center;justify-content: center;margin-bottom: 12px;}
.dark .value-card .icon-chip {background: rgba(45, 212, 191, 0.12);}
.value-card .icon-chip svg {width: 20px;height: 20px;color: var(--primary);}
.value-card h3 {font-family: var(--font-serif);font-weight: 400;font-size: 16px;margin-bottom: 8px;}
@media (min-width: 640px) {.value-card h3 {font-size: 18px;}}
.value-card p {color: var(--muted);font-size: 12px;line-height: 1.625;}
@media (min-width: 640px) {.value-card p {font-size: 14px;}}
.cover-grid {display: grid;grid-template-columns: 1fr;gap: 16px;}
@media (min-width: 640px) {.cover-grid {grid-template-columns: repeat(2, 1fr);gap: 24px;}}
.cover-card {padding: 20px;border-radius: 14px;background: var(--card);border: 1px solid var(--border);transition: border-color 0.2s ease;}
@media (min-width: 640px) {.cover-card {padding: 24px;}}
.cover-card:hover {border-color: rgba(13, 148, 136, 0.35);}
.cover-card > svg {width: 28px;height: 28px;color: var(--primary);margin-bottom: 10px;}
@media (min-width: 640px) {.cover-card > svg {width: 32px;height: 32px;margin-bottom: 12px;}}
.cover-card h3 {font-family: var(--font-serif);font-weight: 400;font-size: 16px;margin-bottom: 6px;}
@media (min-width: 640px) {.cover-card h3 {font-size: 18px;margin-bottom: 8px;}}
.cover-card p {color: var(--muted);font-size: 12px;line-height: 1.625;}
@media (min-width: 640px) {.cover-card p {font-size: 14px;}}
.section-title-center {font-family: var(--font-serif);font-size: 20px;font-weight: 400;text-align: center;margin-bottom: 24px;}
@media (min-width: 640px) {.section-title-center {font-size: 24px;margin-bottom: 32px;}}
.contact-card {border-radius: 16px;background: var(--card);border: 1px solid var(--border);padding: 24px;text-align: center;box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);}
@media (min-width: 640px) {.contact-card {padding: 40px;}}
.contact-card h2 {font-family: var(--font-serif);font-size: 20px;font-weight: 400;margin-bottom: 12px;}
@media (min-width: 640px) {.contact-card h2 {font-size: 24px;}}
.contact-card .contact-desc {color: var(--muted);font-size: 14px;line-height: 1.625;max-width: 512px;margin: 0 auto 24px;}
@media (min-width: 640px) {.contact-card .contact-desc {font-size: 16px;}}
.content-updated {text-align: center;color: var(--muted);font-size: 12px;}
@media (min-width: 640px) {.content-updated {font-size: 14px;}}
.terms-intro {margin-bottom: 40px;padding: 20px;border-radius: 16px;background: var(--primary-50);border: 1px solid rgba(13, 148, 136, 0.12);}
@media (min-width: 640px) {.terms-intro {padding: 24px;}}
.terms-intro p {font-size: 14px;line-height: 1.625;}
@media (min-width: 640px) {.terms-intro p {font-size: 16px;}}
.terms-important {padding: 16px;border-radius: 12px;background: #fff7ed;border: 1px solid #fed7aa;margin-bottom: 16px;}
.dark .terms-important {background: rgba(67, 20, 7, 0.3);border-color: rgba(154, 52, 18, 0.5);}
.terms-important .important-title {font-weight: 600;font-size: 14px;margin-bottom: 8px;}
.terms-important p {font-size: 14px;line-height: 1.625;}
@media (min-width: 640px) {.terms-important p {font-size: 16px;}}
.contact-box {padding: 20px;border-radius: 12px;background: var(--primary-50);border: 1px solid rgba(13, 148, 136, 0.12);}
.contact-box p {font-size: 14px;line-height: 1.625;}
.site-footer {background: #042f2e;color: #8fb5af;}
.footer-inner {max-width: 1152px;margin: 0 auto;padding: 48px 16px;}
@media (min-width: 640px) {.footer-inner {padding: 64px 24px;}}
.footer-grid {display: grid;grid-template-columns: 1fr;gap: 32px 16px;}
@media (min-width: 1024px) {.footer-grid {grid-template-columns: repeat(2, 1fr);gap: 32px 40px;}}
.footer-brand {display: flex;align-items: center;gap: 6px;margin-bottom: 16px;}
.footer-brand .brand-logo {width: 28px;height: 28px;border-radius: 8px;overflow: hidden;}
.footer-brand .brand-logo img {width: 100%;height: 100%;}
.footer-brand span {font-weight: 800;font-size: 18px;color: #fff;}
.footer-brand .wise {color: #2dd4bf;}
.footer-desc {font-size: 14px;line-height: 1.625;color: #5f8a84;max-width: 320px;margin-bottom: 16px;}
.footer-title {font-weight: 700;font-size: 12px;color: #fff;margin-bottom: 16px;text-transform: uppercase;letter-spacing: 0.06em;}
.footer-links {display: flex;flex-direction: column;gap: 10px;}
.footer-links a {font-size: 14px;color: #5f8a84;display: inline-flex;align-items: center;gap: 4px;transition: color 0.2s ease;}
.footer-links a:hover {color: #2dd4bf;}
.footer-links a svg {width: 12px;height: 12px;opacity: 0;transition: opacity 0.2s ease;}
.footer-links a:hover svg {opacity: 1;}
.footer-bottom {margin-top: 40px;padding-top: 24px;border-top: 1px solid rgba(20, 41, 38, 0.8);display: flex;flex-direction: column;align-items: center;justify-content: space-between;gap: 12px;}
@media (min-width: 640px) {.footer-bottom {flex-direction: row;}}
.footer-bottom p {font-size: 12px;color: #3d6b65;}
.footer-bottom .tagline {display: inline-flex;align-items: center;gap: 4px;}
.scroll-top {position: fixed;bottom: 32px;right: 32px;z-index: 40;width: 44px;height: 44px;padding: 0;border-radius: 9999px;background: var(--primary);color: #fff;display: flex;align-items: center;justify-content: center;box-shadow: 0 10px 15px -3px rgba(13, 148, 136, 0.25);transition: background-color 0.3s ease, opacity 0.3s ease, transform 0.3s ease;opacity: 0;pointer-events: none;transform: translateY(8px);}
.scroll-top.is-visible {opacity: 1;pointer-events: auto;transform: translateY(0);}
.scroll-top:hover {background: var(--primary-dark);box-shadow: 0 20px 25px -5px rgba(13, 148, 136, 0.3);}
.scroll-top svg {width: 20px;height: 20px;}
.notfound-card {border-radius: 16px;background: var(--card);border: 1px solid var(--border);text-align: center;padding: 48px 24px;}
.notfound-card .code {color: var(--primary);font-weight: 700;font-size: 14px;letter-spacing: 0.1em;margin-bottom: 8px;}
.notfound-card h1 {font-family: var(--font-serif);font-size: 24px;font-weight: 400;margin-bottom: 8px;}
.notfound-card p {color: var(--muted);font-size: 14px;margin-bottom: 24px;}
@keyframes fadeInUp {from {opacity: 0;transform: translateY(24px);}
to {opacity: 1;transform: translateY(0);}}
.animate-fade-in-up {animation: fadeInUp 0.5s ease forwards;}