:root {
      --tf-ink: #2f2f2f;
      --tf-muted: #625d68;
      --tf-indigo: #1c2444;
      --tf-indigo-soft: #eef0f8;
      --tf-gold: #b8873b;
      --tf-gold-soft: #f7f0e4;
      --tf-rose: #8f4f60;
      --tf-border: #e5e1e6;
      --tf-paper: #ffffff;
      --tf-page: #f8f7f5;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--tf-ink);
      background: var(--tf-page);
      font-family: Montserrat, Arial, Helvetica, sans-serif;
      font-size: 18px;
      font-weight: 400;
      line-height: 27px;
      -webkit-font-smoothing: antialiased;
    }
    img { max-width: 100%; height: auto; }
    a { color: #55418c; text-decoration-thickness: 1px; text-underline-offset: 3px; }
    a:hover { color: var(--tf-rose); }
    a:focus-visible { outline: 3px solid #e0bb67; outline-offset: 3px; }

    .tf-shell {
      width: min(100%, 1180px);
      margin: 0 auto;
      background: var(--tf-paper);
      box-shadow: 0 12px 40px rgba(28, 36, 68, .06);
    }
    .tf-hero { position: relative; background: var(--tf-indigo); color: #fff; }
    .tf-hero img {
      display: block;
      width: 100%;
      aspect-ratio: 3 / 2;
      object-fit: cover;
    }
    .tf-hero-copy {
      width: min(100%, 880px);
      margin: 0 auto;
      padding: 44px 28px 48px;
    }
    .tf-eyebrow {
      margin: 0 0 10px;
      color: #e8c982;
      font-family: Montserrat, Arial, Helvetica, sans-serif !important;
      font-size: 15px;
      font-weight: 400;
      line-height: 22.5px;
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    .tf-hero .tf-title {
      margin: 0 0 16px;
      color: #fff;
      font-family: Montserrat, Arial, Helvetica, sans-serif !important;
      font-size: 30px;
      font-weight: 600;
      letter-spacing: normal;
      line-height: 36px;
    }
    .tf-dek {
      max-width: 760px;
      margin: 0;
      color: #ebeaf2;
      font-family: Montserrat, Arial, Helvetica, sans-serif !important;
      font-size: 18px;
      font-weight: 500;
      line-height: 27px;
    }
    .tf-layout {
      width: min(100%, 1040px);
      margin: 0 auto;
      padding: 52px 40px 72px;
    }
    .tf-article {
      min-width: 0;
      color: #2f2f2f;
      font-family: Montserrat, Arial, Helvetica, sans-serif !important;
      font-size: 18px;
      font-weight: 400;
      line-height: 27px;
      overflow-wrap: break-word;
      word-break: normal;
    }
    .tf-article p {
      margin: 0 0 18px;
      font-family: inherit !important;
      font-size: 18px;
      font-weight: 400;
      line-height: 27px;
    }
    .tf-article h2,
    .tf-article h3,
    .tf-article h4 {
      clear: both;
      color: #211d2c;
      font-family: Montserrat, Arial, Helvetica, sans-serif !important;
    }
    .tf-article h2 {
      margin: 44px 0 17px;
      padding: 0 0 10px;
      border-bottom: 1px solid #ddd8ec;
      font-size: 30px;
      font-weight: 600;
      line-height: 36px;
      letter-spacing: normal;
    }
    .tf-article h3 {
      margin: 30px 0 12px;
      font-size: 20px;
      font-weight: 600;
      line-height: 24px;
    }
    .tf-article h4 {
      margin: 24px 0 10px;
      font-size: 18px;
      font-weight: 600;
      line-height: 27px;
    }
    .tf-article ul, .tf-article ol { margin: 0 0 20px; padding-left: 30px; }
    .tf-article li {
      margin: 0 0 9px;
      padding-left: 0;
      color: #2f2f2f;
      font-family: Montserrat, Arial, Helvetica, sans-serif !important;
      font-size: 18px;
      font-weight: 400;
      line-height: 27px;
    }
    .tf-article li::marker { color: var(--tf-gold); font-weight: 600; }
    .tf-article a {
      color: #59449a;
      font-family: Montserrat, Arial, Helvetica, sans-serif !important;
      text-decoration: underline;
      text-decoration-thickness: 1px;
      text-underline-offset: 3px;
    }
    .tf-article a:hover { color: #352667; }
    .tf-quick-answer {
      margin: 0 0 28px;
      padding: 22px 24px;
      border: 1px solid #dfd7c8;
      border-left: 5px solid var(--tf-gold);
      border-radius: 8px;
      background: var(--tf-gold-soft);
      color: #383344;
      font-size: 18px;
      font-weight: 500;
      line-height: 27px;
    }
    .tf-quick-answer strong { color: #383344; font-weight: 600; }
    .tf-note {
      margin: 28px 0;
      padding: 18px 22px;
      border-radius: 8px;
      background: var(--tf-indigo-soft);
      color: #2f2f2f;
      font-size: 18px;
      font-weight: 400;
      line-height: 27px;
    }
    .tf-table-wrap { overflow-x: auto; margin: 24px 0 34px; border: 1px solid var(--tf-border); border-radius: 10px; }
    .tf-table { width: 100%; min-width: 590px; border-collapse: collapse; background: #fff; }
    .tf-table th, .tf-table td {
      padding: 13px 16px;
      border-bottom: 1px solid var(--tf-border);
      color: #2f2f2f;
      font-family: Montserrat, Arial, Helvetica, sans-serif !important;
      font-size: 15px;
      line-height: 23px;
      text-align: left;
      vertical-align: top;
    }
    .tf-table th { width: 35%; background: #f5f4f7; color: var(--tf-indigo); font-weight: 600; }
    .tf-table tr:last-child th, .tf-table tr:last-child td { border-bottom: 0; }
    .tf-figure { margin: 36px 0 42px; }
    .tf-figure img { display: block; width: 100%; border-radius: 10px; box-shadow: 0 12px 34px rgba(28, 36, 68, .12); }
    .tf-figure figcaption { margin-top: 10px; color: #2f2f2f; font-size: 16px; line-height: 24px; text-align: center; }
    .tf-pairings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 24px 0 32px; }
    .tf-pairing { padding: 18px; border: 1px solid var(--tf-border); border-radius: 9px; background: #fff; }
    .tf-pairing h3 { margin: 0 0 12px; color: #211d2c; font-size: 20px; font-weight: 600; line-height: 24px; }
    .tf-pairing p { margin: 0; color: #2f2f2f; font-size: 18px; font-weight: 400; line-height: 27px; }
    .tf-faq { margin-top: 26px; border-top: 1px solid var(--tf-border); }
    .tf-faq-item { padding: 22px 0; border-bottom: 1px solid var(--tf-border); }
    .tf-faq-item h3 { margin: 0 0 12px; color: #211d2c; font-size: 20px; font-weight: 600; line-height: 24px; }
    .tf-faq-item p { margin: 0; }
    .tf-catalogue {
      margin: 30px 0 40px;
      border: 1px solid var(--tf-border);
      border-radius: 10px;
      background: #fff;
      box-shadow: 0 8px 24px rgba(28, 36, 68, .06);
      overflow: hidden;
    }
    .tf-catalogue summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      padding: 17px 20px;
      color: #211d2c;
      background: #f7f6f8;
      cursor: pointer;
      font-size: 18px;
      font-weight: 600;
      line-height: 27px;
      list-style: none;
      user-select: none;
    }
    .tf-catalogue summary::-webkit-details-marker { display: none; }
    .tf-catalogue summary::before {
      content: "＋";
      flex: 0 0 auto;
      color: var(--tf-gold);
      font-size: 22px;
      line-height: 1;
    }
    .tf-catalogue[open] summary::before { content: "−"; }
    .tf-catalogue-state {
      margin-left: auto;
      color: var(--tf-muted);
      font-size: 16px;
      font-weight: 400;
      line-height: 24px;
    }
    .tf-catalogue-state::after { content: "显示"; }
    .tf-catalogue[open] .tf-catalogue-state::after { content: "隐藏"; }
    .tf-catalogue ul {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0 28px;
      margin: 0;
      padding: 14px 20px 20px 48px;
    }
    .tf-catalogue li { margin: 0; padding: 0; border-bottom: 1px solid #efedf0; }
    .tf-catalogue a {
      display: block;
      padding: 9px 0;
      color: #59449a;
      font-size: 16px;
      line-height: 24px;
      text-decoration: underline;
      text-decoration-thickness: 1px;
      text-underline-offset: 3px;
    }
    .tf-catalogue a:hover { color: var(--tf-rose); }
    .tf-ending {
      margin-top: 42px;
      padding: 28px;
      border-radius: 10px;
      background: var(--tf-indigo);
      color: #f4f2f6;
    }
    .tf-ending h2 { margin-top: 0; color: #fff; border-bottom-color: rgba(255,255,255,.25); }
    .tf-ending h3 { margin: 26px 0 12px; color: #fff; font-size: 20px; font-weight: 600; line-height: 24px; }
    .tf-ending p:last-child { margin-bottom: 0; }
    .tf-related {
      margin-top: 26px;
      padding: 22px 24px;
      border: 1px solid var(--tf-border);
      border-radius: 10px;
      background: #fbfaf8;
    }
    .tf-related h2 { margin: 0 0 17px; padding: 0 0 10px; font-size: 30px; font-weight: 600; line-height: 36px; }
    .tf-related p { margin: 0; font-size: 18px; font-weight: 400; line-height: 27px; }
    .tf-related ul { margin: 14px 0 0; padding-left: 30px; }
    .tf-related li { margin: 0 0 9px; font-size: 18px; font-weight: 400; line-height: 27px; }
    .tf-related li::marker { color: var(--tf-gold); font-weight: 600; }
    .tf-related a { font-weight: 600; }
    @media (max-width: 980px) {
      .tf-layout { width: 100%; padding-right: 28px; padding-left: 28px; }
    }
    @media (max-width: 640px) {
      body { font-size: 18px; line-height: 27px; }
      .tf-hero-copy { padding: 30px 20px 34px; }
      .tf-dek { font-size: 18px; line-height: 27px; }
      .tf-layout { padding: 34px 20px 52px; }
      .tf-article h2 { margin-top: 38px; font-size: 30px; line-height: 36px; }
      .tf-article h3 { margin-top: 26px; font-size: 20px; line-height: 24px; }
      .tf-article h4 { margin-top: 22px; font-size: 18px; line-height: 27px; }
      .tf-pairings { grid-template-columns: 1fr; }
      .tf-quick-answer { padding: 18px; }
      .tf-catalogue ul { grid-template-columns: 1fr; padding-left: 42px; }
    }
    @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }