.learning-article-page {
  --article-bg: #f8fafc;
  --article-surface: #fff;
  --article-text: #0f172a;
  --article-muted: #64748b;
  --article-line: #e2e8f0;
  --article-accent: #2563eb;
  --article-accent-contrast: #fff;
  min-width: 320px;
  overflow-x: clip;
  background: var(--article-bg);
}

.article-skin-line {
  --article-bg: #fafafa;
  --article-text: #27322c;
  --article-muted: #66736b;
  --article-line: #dce7df;
  --article-accent: #06c755;
  --article-accent-contrast: #071d10;
}

.article-skin-fcm {
  --article-bg: #0d131f;
  --article-surface: #111827;
  --article-text: #e2e8f0;
  --article-muted: #94a3b8;
  --article-line: #263244;
  --article-accent: #f59e0b;
  --article-accent-contrast: #171008;
}

.article-skin-adsense {
  --article-bg: #f8fafc;
  --article-text: #172554;
  --article-muted: #64748b;
  --article-accent: #2563eb;
}

.article-skin-pwa {
  --article-bg: #f8fafc;
  --article-text: #172033;
  --article-muted: #64748b;
  --article-accent: #7c3aed;
}

.article-skin-citation {
  --article-bg: #f8fafc;
  --article-text: #0f172a;
  --article-muted: #64748b;
  --article-accent: #0891b2;
}

.article-skin-topic {
  --article-bg: #f8fafc;
  --article-text: #0f172a;
  --article-muted: #64748b;
  --article-accent: #2563eb;
}

.article-skin-eeat {
  --article-bg: #f8fafc;
  --article-text: #172033;
  --article-muted: #64748b;
  --article-accent: #d97706;
}

.learning-skip-link {
  position: fixed;
  inset-block-start: 8px;
  inset-inline-start: 8px;
  z-index: 1000;
  padding: 10px 14px;
  border-radius: 8px;
  color: var(--article-accent-contrast);
  background: var(--article-accent);
  translate: 0 -160%;
}

.learning-skip-link:focus {
  translate: 0;
}

.learning-site-bar {
  position: relative;
  z-index: 70;
  color: var(--article-text);
  background: color-mix(in srgb, var(--article-surface) 96%, transparent);
  border-block-end: 1px solid var(--article-line);
}

.article-skin-fcm .learning-site-bar {
  background: rgb(13 19 31 / 96%);
}

.learning-site-bar__inner {
  display: grid;
  grid-template-columns: minmax(250px, 1fr) auto;
  gap: 12px 32px;
  width: min(1180px, calc(100% - 40px));
  margin-inline: auto;
  padding-block: 18px 14px;
}

.learning-site-brand {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
}

.learning-site-brand__mark {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 10px;
  color: var(--article-accent-contrast);
  background: var(--article-accent);
  font-family: "Noto Serif TC", "Songti TC", serif;
  font-size: 23px;
  font-weight: 800;
}

.learning-site-brand strong,
.learning-site-brand small {
  display: block;
}

.learning-site-brand strong {
  font-family: "Noto Serif TC", "Songti TC", serif;
  font-size: 18px;
  letter-spacing: .02em;
}

.learning-site-brand small {
  margin-block-start: 2px;
  color: var(--article-muted);
  font-size: 11px;
  letter-spacing: .04em;
}

.learning-site-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

.learning-site-nav a {
  min-height: 42px;
  padding: 11px 12px;
  border-radius: 9px;
  color: var(--article-muted);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.learning-site-nav a:hover,
.learning-site-nav a:focus-visible,
.learning-site-nav a[aria-current="page"] {
  color: var(--article-text);
  background: color-mix(in srgb, var(--article-accent) 10%, transparent);
}

.learning-site-context {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding-block-start: 10px;
  color: var(--article-muted);
  border-block-start: 1px solid var(--article-line);
  font-size: 12px;
}

.learning-site-context span {
  color: var(--article-accent);
  font-weight: 800;
}

.learning-site-context time::before {
  margin-inline-end: 10px;
  color: var(--article-line);
  content: "•";
}

.learning-imported-article {
  display: block;
}

.learning-imported-article a:not([class]) {
  color: var(--article-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.learning-imported-article :is(pre, table) {
  max-width: 100%;
}

.learning-imported-article pre,
.learning-imported-article table {
  overflow-x: auto;
}

.learning-imported-article table {
  display: block;
}

.learning-imported-article :is([data-learning-panel], [data-learning-disclosure-panel])[hidden] {
  display: none !important;
}

.learning-imported-article [data-learning-tab][aria-pressed="true"] {
  outline: 2px solid var(--article-accent);
  outline-offset: 2px;
}

.learning-imported-article [data-learning-disclosure] {
  cursor: pointer;
}

.learning-imported-article [data-learning-disclosure]:focus-visible,
.learning-imported-article [data-learning-tab]:focus-visible {
  outline: 3px solid var(--article-accent);
  outline-offset: 3px;
}

.learning-live-tool :is(button, input, textarea, select):focus-visible {
  outline: 3px solid var(--article-accent);
  outline-offset: 3px;
}

.learning-live-tool [hidden] {
  display: none !important;
}

[data-seo-mode][aria-pressed="true"],
[data-eeat-mode][aria-pressed="true"],
[data-citation-example][aria-pressed="true"] {
  color: #fff;
  background: #0f172a;
}

.article-skin-line [data-line-theme="light"][aria-pressed="true"] {
  color: #fff;
  background: #749ab9;
  border-color: #749ab9;
}

.article-skin-line [data-line-theme="dark"][aria-pressed="true"] {
  color: #fff;
  background: #30343b;
  border-color: #30343b;
}

.line-sticker-word {
  margin-block-start: 4px;
  color: #111827;
  font-size: 12px;
  font-weight: 900;
}

.line-sticker-word--bordered,
.line-preview-sticker__word--bordered {
  paint-order: stroke fill;
  -webkit-text-stroke: 3px #fff;
}

#line-chat-window {
  background: #749ab9;
}

#line-chat-window[data-theme="dark"] {
  background: #30343b;
}

.line-message-row {
  display: flex;
  width: 100%;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 8px;
}

.line-message-time {
  padding-block-end: 8px;
  color: #e5e7eb;
  font-size: 10px;
}

.line-preview-sticker {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.line-preview-sticker__icon {
  font-size: 54px;
  font-weight: 900;
  line-height: 1;
}

.line-preview-sticker__word {
  color: #111827;
  font-size: 18px;
  font-weight: 900;
}

#fcm-banner.is-triggering {
  opacity: 0;
  translate: 0 -20px;
}

.article-skin-fcm .toc-link[aria-current="location"] {
  color: #fbbf24;
  border-color: #fbbf24;
  font-weight: 800;
}

#adsense-result h3 {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 800;
}

#adsense-result p {
  margin-block: 7px 0;
  color: #475569;
  font-size: 13px;
  line-height: 1.65;
}

#adsense-result[data-level="ready"] {
  color: #065f46;
  background: #ecfdf5;
  border-color: #a7f3d0;
}

#adsense-result[data-level="review"] {
  color: #92400e;
  background: #fffbeb;
  border-color: #fde68a;
}

#adsense-result[data-level="improve"] {
  color: #9f1239;
  background: #fff1f2;
  border-color: #fecdd3;
}

.pwa-question {
  margin: 0;
  padding: 16px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
}

.pwa-question legend {
  padding: 0;
  color: #0f172a;
  font-size: 14px;
  font-weight: 800;
}

.pwa-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-block-start: 10px;
}

.pwa-option {
  min-height: 46px;
  padding: 10px;
  color: #334155;
  background: #f1f5f9;
  border-radius: 9px;
  font-size: 12px;
  text-align: start;
}

.pwa-option[aria-pressed="true"][data-value="pwa"] {
  color: #fff;
  background: #7c3aed;
}

.pwa-option[aria-pressed="true"][data-value="native"] {
  color: #fff;
  background: #312e81;
}

.topic-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.topic-cluster-input {
  min-width: 0;
  flex: 1;
  padding: 8px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
}

.topic-remove {
  padding: 7px 9px;
  color: #64748b;
  border-radius: 7px;
  font-weight: 700;
}

.topic-remove:hover:not(:disabled) {
  color: #be123c;
  background: #fff1f2;
}

.topic-remove:disabled {
  cursor: not-allowed;
  opacity: .45;
}

.topic-map-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  color: #cbd5e1;
  background: #0f172a;
  border: 1px solid #1e293b;
  border-radius: 12px;
}

.topic-map-card small,
.topic-map-card span {
  color: #94a3b8;
  font-size: 10px;
}

.topic-map-card strong {
  overflow-wrap: anywhere;
  font-size: 12px;
}

.eeat-check-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  cursor: pointer;
}

.eeat-check-item:hover {
  border-color: #f59e0b;
}

.eeat-check-item input {
  width: 17px;
  height: 17px;
  margin-block-start: 2px;
  accent-color: #f59e0b;
}

.eeat-check-item strong,
.eeat-check-item small {
  display: block;
}

.eeat-check-item strong {
  color: #0f172a;
}

.eeat-check-item small {
  margin-block-start: 3px;
  color: #64748b;
}

.learning-article-end {
  color: var(--article-text);
  background: var(--article-bg);
  padding-block: clamp(44px, 7vw, 84px);
}

.learning-tool-cta,
.learning-references,
.learning-related {
  width: min(980px, calc(100% - 40px));
  margin-inline: auto;
}

.learning-tool-cta {
  margin-block-end: 64px;
  padding: clamp(26px, 5vw, 48px);
  color: var(--article-text);
  background: color-mix(in srgb, var(--article-accent) 8%, var(--article-surface));
  border: 1px solid color-mix(in srgb, var(--article-accent) 32%, var(--article-line));
  border-radius: 18px;
}

.learning-section-label {
  margin: 0;
  color: var(--article-accent);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.learning-tool-cta h2,
.learning-references h2,
.learning-related h2 {
  margin: 9px 0 14px;
  color: var(--article-text);
  font-family: "Noto Serif TC", "Songti TC", serif;
  font-size: clamp(25px, 4vw, 38px);
  line-height: 1.35;
}

.learning-tool-cta p:not(.learning-section-label),
.learning-references > p:not(.learning-section-label) {
  color: var(--article-muted);
  line-height: 1.85;
}

.learning-tool-cta > a {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  margin-block-start: 12px;
  padding-inline: 18px;
  border-radius: 9px;
  color: var(--article-accent-contrast);
  background: var(--article-accent);
  font-weight: 800;
  text-decoration: none;
}

.learning-references {
  padding-block: 38px;
  border-block: 1px solid var(--article-line);
}

.learning-references ul {
  margin-block-end: 0;
  padding-inline-start: 20px;
  line-height: 2;
}

.learning-references a {
  color: var(--article-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.learning-related {
  margin-block-start: 64px;
}

.learning-related > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.learning-related a {
  display: flex;
  min-height: 178px;
  flex-direction: column;
  padding: 20px;
  color: var(--article-text);
  background: var(--article-surface);
  border: 1px solid var(--article-line);
  border-radius: 14px;
  text-decoration: none;
}

.learning-related a:hover,
.learning-related a:focus-visible {
  border-color: var(--article-accent);
  translate: 0 -2px;
}

.learning-related small {
  color: var(--article-accent);
  font-weight: 800;
}

.learning-related strong {
  margin-block: 18px auto;
  font-family: "Noto Serif TC", "Songti TC", serif;
  font-size: 18px;
  line-height: 1.55;
}

.learning-related a > span {
  color: var(--article-muted);
  font-size: 12px;
}

.learning-site-footer {
  color: var(--article-text);
  background: var(--article-surface);
  border-block-start: 1px solid var(--article-line);
}

.learning-site-footer__inner {
  width: min(1180px, calc(100% - 40px));
  margin-inline: auto;
  padding-block: 42px 34px;
}

.learning-site-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
}

.learning-site-footer__brand span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 8px;
  color: var(--article-accent-contrast);
  background: var(--article-accent);
  font-family: "Noto Serif TC", "Songti TC", serif;
  font-weight: 800;
}

.learning-site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin-block: 28px 16px;
}

.learning-site-footer nav a {
  color: var(--article-text);
  font-size: 14px;
  text-decoration: none;
}

.learning-site-footer nav a:hover,
.learning-site-footer nav a:focus-visible {
  color: var(--article-accent);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.learning-site-footer p {
  margin: 0;
  color: var(--article-muted);
  font-size: 13px;
}

.learning-site-footer .learning-site-footer__copyright {
  margin-block-start: 24px;
  padding-block-start: 20px;
  border-block-start: 1px solid var(--article-line);
  font-size: 12px;
}

@media (max-width: 760px) {
  .learning-site-bar__inner {
    grid-template-columns: 1fr;
    width: min(100% - 28px, 1180px);
    padding-block: 14px 12px;
  }

  .learning-site-brand small {
    font-size: 10px;
  }

  .learning-site-nav {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .learning-site-nav::-webkit-scrollbar {
    display: none;
  }

  .learning-site-nav a {
    flex: 0 0 auto;
  }

  .learning-site-context {
    grid-column: auto;
  }

  .learning-tool-cta,
  .learning-references,
  .learning-related,
  .learning-site-footer__inner {
    width: min(100% - 28px, 980px);
  }

  .learning-related > div {
    grid-template-columns: 1fr;
  }

  .pwa-options {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .learning-related a {
    transition: border-color 160ms ease, translate 160ms ease;
  }
}