:root {


  --color-text: #243044;


  --color-text-sub: #667085;


  --color-muted: #8a94a6;


  --color-bg: #ffffff;


  --color-bg-soft: #f4f8fb;


  --color-panel: #ffffff;


  --color-border: #dfe7ee;


  --color-primary: #177e89;


  --color-primary-dark: #0f5f68;


  --color-primary-soft: #e4f6f8;


  --color-accent: #f5a524;


  --color-accent-soft: #fff5dc;


  --shadow: 0 14px 36px rgba(24, 48, 68, .08);


  --radius: 8px;


  --radius-lg: 12px;


  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Yu Gothic", sans-serif;


}


* { box-sizing: border-box; }


html { scroll-behavior: smooth; }


body { margin: 0; font-family: var(--font-family); color: var(--color-text); background: var(--color-bg); line-height: 1.8; }


a { color: inherit; text-decoration: none; }


img { max-width: 100%; height: auto; }


.l-container { width: min(1120px, calc(100% - 32px)); margin: 0 auto; }


.narrow { width: min(760px, calc(100% - 32px)); }


.site-header { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.94); border-bottom: 1px solid var(--color-border); backdrop-filter: blur(10px); }


.site-header__inner { min-height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }


.site-logo { display: inline-flex; align-items: center; gap: .6rem; font-weight: 800; }


.site-logo__mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: var(--color-primary); color: #fff; font-size: .8rem; letter-spacing: 0; }


.site-nav { display: flex; gap: 1rem; align-items: center; font-size: .92rem; color: var(--color-text-sub); }


.site-nav a:hover { color: var(--color-primary); }


.menu-toggle { display: none; width: 42px; height: 42px; border: 0; background: transparent; padding: 8px; }


.menu-toggle span { display: block; height: 2px; background: var(--color-text); margin: 6px 0; }


.hero { padding: 4.5rem 0; background: linear-gradient(135deg, #f7fbff 0%, #e4f6f8 72%, #fff5dc 100%); }


.hero__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); gap: 3rem; align-items: center; }


.hero__copy h1 { margin: .4rem 0 1rem; font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.18; letter-spacing: 0; }


.hero__lead { margin: 0; color: var(--color-text-sub); font-size: 1.08rem; max-width: 680px; }


.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }


.eyebrow, .section__label, .page-header__label, .article-label { display: inline-block; margin: 0; font-size: .78rem; font-weight: 800; color: var(--color-primary); letter-spacing: .08em; }


.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: .68rem 1rem; border-radius: 8px; border: 1px solid var(--color-border); font-weight: 700; transition: .18s ease; }


.btn--primary { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }


.btn--primary:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); }


.btn--outline { background: #fff; color: var(--color-primary); }


.btn--lg { min-height: 50px; padding-inline: 1.2rem; }


.hero-panel { display: grid; gap: .9rem; }


.hero-panel__item { background: rgba(255,255,255,.86); border: 1px solid var(--color-border); border-radius: 12px; padding: 1rem; box-shadow: var(--shadow); }


.hero-panel__item span { display: inline-flex; color: var(--color-primary); font-weight: 800; font-size: .8rem; }


.hero-panel__item strong { display: block; margin-top: .2rem; font-size: 1.08rem; }


.hero-panel__item p { margin: .2rem 0 0; color: var(--color-text-sub); }


.section { padding: 3.8rem 0; }


.section--soft { background: var(--color-bg-soft); }


.section__header { max-width: 760px; margin-bottom: 1.6rem; }


.section__header h2, .page-header h1 { margin: .25rem 0 .4rem; font-size: clamp(1.7rem, 3vw, 2.3rem); line-height: 1.25; }


.section__header p, .page-header p { margin: 0; color: var(--color-text-sub); }


.purpose-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; }


.purpose-card, .article-card, .related-card { background: var(--color-panel); border: 1px solid var(--color-border); border-radius: 8px; box-shadow: 0 8px 22px rgba(24,48,68,.05); }


.purpose-card { padding: 1.1rem; min-height: 190px; }


.purpose-card span { display: inline-flex; color: var(--color-primary); font-size: .78rem; font-weight: 800; }


.purpose-card strong { display: block; margin: .45rem 0; line-height: 1.45; }


.purpose-card p { margin: 0; color: var(--color-text-sub); font-size: .92rem; }


.article-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; }


.article-card { overflow: hidden; }


.article-card__thumb { display: block; aspect-ratio: 16 / 9; background: var(--color-primary-soft); overflow: hidden; }
.article-card__thumb img { width: 100%; height: 100%; object-fit: cover; }


.article-card__body { padding: 1rem; }


.article-card__meta { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: .6rem; font-size: .76rem; color: var(--color-muted); }


.article-card h3 { margin: 0; font-size: 1.08rem; line-height: 1.5; }


.article-card p { color: var(--color-text-sub); font-size: .92rem; margin: .55rem 0 .75rem; }


.text-link { color: var(--color-primary); font-weight: 700; }


.page-header { padding: 3.2rem 0; background: var(--color-bg-soft); border-bottom: 1px solid var(--color-border); }


.article-page { background: var(--color-bg-soft); padding: 2rem 0 4rem; }


.article { background: #fff; border: 1px solid var(--color-border); border-radius: 12px; padding: min(5vw, 3rem); }


.breadcrumb { display: flex; gap: .5rem; align-items: center; color: var(--color-muted); font-size: .88rem; margin-bottom: 1.4rem; }


.article-header h1 { font-size: clamp(1.8rem, 3.5vw, 2.7rem); line-height: 1.25; margin: .4rem 0 .8rem; }


.article-description { color: var(--color-text-sub); font-size: 1.05rem; }


.status-pill { display: inline-flex; margin-top: .8rem; padding: .35rem .65rem; border-radius: 999px; background: var(--color-accent-soft); color: #8a5a00; font-weight: 700; font-size: .84rem; }


.note-box { margin: 2rem 0; padding: 1.2rem; border-radius: 8px; background: var(--color-primary-soft); border: 1px solid #cbe9ed; }


.note-box h2 { margin-top: 0; }


.checklist { padding-left: 1.2rem; }


.checklist li { margin: .35rem 0; }


.related-section { margin-top: 2rem; }


.related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }


.related-card { padding: 1rem; }


.related-card span { color: var(--color-primary); font-size: .78rem; font-weight: 800; }


.related-card strong { display: block; margin-top: .35rem; line-height: 1.5; }


.site-footer { background: #1f2937; color: #fff; padding: 2.4rem 0 1rem; }


.site-footer__grid { display: flex; justify-content: space-between; gap: 2rem; }


.site-footer__brand { margin: 0; font-weight: 800; }


.site-footer__desc { color: #cbd5e1; max-width: 520px; }


.site-footer__links { display: grid; gap: .4rem; color: #e5e7eb; }


.site-footer__copy { text-align: center; color: #94a3b8; font-size: .85rem; margin: 2rem 0 0; }


.center-page { min-height: 58vh; display: grid; align-items: center; text-align: center; padding: 4rem 0; }


@media (max-width: 900px) {


  .hero__grid { grid-template-columns: 1fr; }


  .purpose-grid, .article-grid, .related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }


}


@media (max-width: 720px) {


  .site-nav { display: none; position: absolute; top: 66px; left: 0; right: 0; padding: 1rem; background: #fff; border-bottom: 1px solid var(--color-border); }


  .site-nav.is-open { display: grid; }


  .menu-toggle { display: block; }


  .purpose-grid, .article-grid, .related-grid { grid-template-columns: 1fr; }


  .site-footer__grid { display: grid; }


}



/* Prompt copy UI */

.prompt-box {

  margin: 1.4rem 0;

  border: 1px solid var(--color-border);

  border-radius: 8px;

  overflow: hidden;

  background: #fff;

  box-shadow: 0 8px 22px rgba(24,48,68,.05);

}

.prompt-box__header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 1rem;

  padding: .85rem 1rem;

  border-bottom: 1px solid var(--color-border);

  background: var(--color-bg-soft);

}

.prompt-box__title {

  margin: 0;

  font-size: .95rem;

  font-weight: 800;

}

.copy-button {

  min-height: 36px;

  padding: .35rem .75rem;

  border: 1px solid var(--color-primary);

  border-radius: 8px;

  background: #fff;

  color: var(--color-primary);

  font-weight: 800;

  cursor: pointer;

}

.copy-button:hover {

  background: var(--color-primary-soft);

}

.prompt-box pre {

  margin: 0;

  padding: 1rem;

  overflow-x: auto;

  white-space: pre-wrap;

  word-break: break-word;

  background: #101828;

  color: #f8fafc;

  line-height: 1.7;

  font-size: .92rem;

}

.ai-example-box {

  margin: 1.4rem 0;

  padding: 1rem;

  border: 1px solid #cbe9ed;

  border-radius: 8px;

  background: var(--color-primary-soft);

}

.desktop-table {

  width: 100%;

  border-collapse: collapse;

  margin: 1.2rem 0;

  font-size: .94rem;

}

.desktop-table th,

.desktop-table td {

  border: 1px solid var(--color-border);

  padding: .75rem;

  vertical-align: top;

}

.desktop-table th {

  background: var(--color-bg-soft);

  text-align: left;

}

.mobile-table-cards {
  display: none;
}
.mobile-table-card {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 1rem;
  background: #fff;
}
.mobile-table-card + .mobile-table-card {
  margin-top: .8rem;
}
.mobile-table-card p {
  margin: .55rem 0;
  color: var(--color-text-sub);
}
.mobile-table-card p:first-child {
  margin-top: 0;
}
.mobile-table-card p:last-child {
  margin-bottom: 0;
}
.mobile-table-card strong {
  display: block;
  color: var(--color-text);
  font-size: .78rem;
  margin-bottom: .15rem;
}
.mobile-info-card {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 1rem;

  background: #fff;

}

.mobile-info-card + .mobile-info-card {

  margin-top: .8rem;

}

.mobile-info-card h3 {

  margin: 0 0 .5rem;

}

.mobile-info-card dl {

  margin: 0;

}

.mobile-info-card dt {

  font-weight: 800;

  margin-top: .6rem;

}

.mobile-info-card dd {

  margin: .15rem 0 0;

  color: var(--color-text-sub);

}

.faq-section {

  margin-top: 2rem;

}

.faq-item {

  border-top: 1px solid var(--color-border);

  padding: 1rem 0;

}

.faq-q {

  margin: 0 0 .35rem;

  font-weight: 800;

}

.faq-a {

  margin: 0;

  color: var(--color-text-sub);

}

@media (max-width: 720px) {

  .desktop-table {

    display: none;

  }

  .mobile-table-cards {

    display: block;

  }

  .prompt-box__header {

    align-items: flex-start;

    flex-direction: column;

  }

}



/* Article extras */
.article-meta {
  margin-top: .8rem;
  color: var(--color-muted);
  font-size: .9rem;
}
.toc-box {
  margin: 1.8rem 0 2rem;
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg-soft);
}
.toc-box__title {
  margin: 0 0 .5rem;
  font-weight: 800;
}
.toc-box ol {
  margin: 0;
  padding-left: 1.4rem;
}
.toc-box li {
  margin: .25rem 0;
}
.toc-box a {
  color: var(--color-primary);
  font-weight: 700;
}
.article section {
  margin-top: 2.2rem;
}
.article section h2 {
  font-size: 1.55rem;
  line-height: 1.35;
  margin: 0 0 .8rem;
}
.article section h3 {
  font-size: 1.14rem;
  line-height: 1.45;
  margin: 1.4rem 0 .55rem;
}
.article code {
  padding: .1rem .3rem;
  border-radius: 4px;
  background: var(--color-bg-soft);
}


.article-disclosure {
  margin: 1rem 0 0;
  padding: .85rem 1rem;
  border: 1px solid #f2d08a;
  border-radius: 8px;
  background: var(--color-accent-soft);
  color: #71520b;
  font-size: .92rem;
  line-height: 1.7;
}

.info-panel {
  margin: 0 0 1.6rem;
  padding: 1.2rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg-soft);
}

.info-panel h2 { margin-top: 0; }

.info-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.8rem;
  background: #fff;
  border: 1px solid var(--color-border);
}

.info-table th,
.info-table td {
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
  text-align: left;
}

.info-table th {
  width: 28%;
  background: var(--color-bg-soft);
  color: var(--color-text);
}


.affiliate-cta {
  margin: 1.4rem 0;
  padding: 1rem;
  border: 1px solid #cbe9ed;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff 0%, var(--color-primary-soft) 100%);
}

.affiliate-cta__label {
  margin: 0 0 .35rem;
  color: var(--color-primary);
  font-size: .86rem;
  font-weight: 800;
}

.affiliate-cta p {
  margin: 0 0 .8rem;
  color: var(--color-text-sub);
}

.affiliate-cta__link a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: .72rem 1rem;
  border-radius: 8px;
  background: var(--color-primary);
  color: #fff;
  font-weight: 800;
  line-height: 1.5;
}

.affiliate-cta__link a:hover {
  background: var(--color-primary-dark);
}