.tt-page {
  --tt-surface: #1a1a1a;
  --tt-surface-2: #2a2825;
  --tt-border: #47423a;
  --tt-text: #e8e5df;
  --tt-dim: #aaa49a;
  --tt-accent: #d4b573;
  --tt-deepseek: #8bc0f6;
  --tt-ernie: #d8c66e;
  --tt-chatgpt: #9ed0a2;
  --tt-kimi: #e8a982;
  --tt-lefos: #bbb;
  --tt-mistral: #c8a96e;
  --tt-glm: #7ec8a3;
  --tt-gemini: #c07ed4;
  --tt-qwen: #e87e8e;
  --tt-falcon: #8ea0d4;
}
html[data-theme="light"] .tt-page {
  --tt-surface: #b9b5ad;
  --tt-surface-2: #c4c0b7;
  --tt-border: #8b8377;
  --tt-text: #29261f;
  --tt-dim: #575147;
  --tt-accent: #725520;
}
.tt-page .pb-card { padding: clamp(1.25rem, 2.5vw, 2.5rem); }
.tt-header { padding-left: clamp(4.6rem, 8vw, 6.5rem); margin-bottom: var(--space-5); }
.tt-header h1 { margin-bottom: var(--space-1); }
.tt-layout { display: grid; grid-template-columns: minmax(0, 740px) minmax(220px, 270px); justify-content: center; gap: clamp(2rem, 3.5vw, 3rem); }
.tt-body { min-width: 0; color: var(--tt-text); font-family: var(--font-body); line-height: 1.68; }
.tt-body a { color: var(--tt-accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.tt-preface { margin: 0 0 var(--section-gap); padding: var(--space-4); border-left: 3px solid var(--tt-accent); border-radius: var(--radius-sm); background: var(--tt-surface-2); }
.tt-preface h2, .tt-section-head h2 { color: var(--tt-accent); font-family: var(--font-display); font-weight: 400; }
.tt-preface h2 { margin-bottom: var(--space-2); font-size: var(--text-h3); }
.tt-preface p { margin-bottom: var(--space-2); }
.tt-sign { margin: var(--space-3) 0 0; color: var(--tt-accent); font-family: var(--font-display); font-size: var(--text-lede); }
.tt-section { margin-block: var(--section-gap); }
.tt-section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-3); border-bottom: 1px solid var(--tt-border); }
.tt-section-head h2 { flex: 1 1 280px; margin: 0; padding-bottom: var(--space-2); font-size: var(--text-h3); }
.tt-toggle-bar { display: flex; flex-wrap: wrap; gap: var(--space-2); padding-bottom: var(--space-2); }
.tt-toggle-btn { min-height: 44px; padding: 0.55rem 0.8rem; border: 1px solid var(--tt-border); border-radius: var(--radius-sm); background: transparent; color: var(--tt-text); font-size: var(--text-sm); cursor: pointer; }
.tt-toggle-btn:hover { border-color: var(--tt-accent); color: var(--tt-accent); }
details.tt-details { margin-bottom: var(--space-2); border-bottom: 1px solid var(--tt-border); }
details.tt-details[open] { border-color: var(--tt-accent); }
details.tt-details summary { min-height: 48px; display: flex; align-items: center; gap: var(--space-2); padding: 0.6rem 0.25rem; color: var(--tt-text); font-weight: 700; cursor: pointer; list-style: none; }
details.tt-details summary::-webkit-details-marker { display: none; }
details.tt-details summary::before { content: "›"; color: var(--tt-accent); font-size: 1.4em; line-height: 1; }
details.tt-details[open] summary::before { transform: rotate(90deg); }
.tt-detail-body { padding: 0.15rem 0.25rem var(--space-3) 1.5rem; color: var(--tt-text); }
.tt-detail-body p, .tt-static-block p { margin: 0.55rem 0; }
.tt-static-block { margin-bottom: var(--space-3); padding: var(--space-3) 0; }
.tt-static-title { margin: 0 0 var(--space-1); color: var(--tt-accent); font-family: var(--font-body); font-size: var(--text-body); font-weight: 700; }
.tt-credit, .tt-source, .tt-badge, .tt-announcement-label, .tt-divider-label, .tt-rail-kicker { font-family: var(--font-mono); }
.tt-credit, .tt-source { color: var(--tt-dim); font-size: var(--text-xs); }
.tt-badge { display: inline-block; padding: 0.1rem 0.35rem; border: 1px solid #777; border-radius: var(--radius-sm); color: #ccc; font-size: 0.7em; white-space: nowrap; }
.tt-badge.tt-deepseek { border-color: var(--tt-deepseek); color: var(--tt-deepseek); }
.tt-badge.tt-ernie { border-color: var(--tt-ernie); color: var(--tt-ernie); }
.tt-badge.tt-chatgpt { border-color: var(--tt-chatgpt); color: var(--tt-chatgpt); }
.tt-badge.tt-kimi { border-color: var(--tt-kimi); color: var(--tt-kimi); }
.tt-badge.tt-lefos { border-color: var(--tt-lefos); color: var(--tt-lefos); }
.tt-table-wrap { max-width: 100%; overflow-x: auto; }
.tt-table { width: 100%; border-collapse: collapse; margin-block: var(--space-2); font-size: var(--text-sm); }
.tt-table th, .tt-table td { padding: 0.55rem 0.65rem; border-bottom: 1px solid var(--tt-border); text-align: left; }
.tt-table th { color: var(--tt-accent); font-weight: 700; }
.tt-announcement { margin: var(--section-gap) 0 var(--space-4); padding: var(--space-4); border: 1px dashed var(--tt-accent); border-radius: var(--radius-md); text-align: center; }
.tt-announcement-label, .tt-divider-label, .tt-rail-kicker { color: var(--tt-dim); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; }
.tt-announcement p { margin: 0.3rem 0 0; color: var(--tt-accent); font-size: var(--text-lede); }
.tt-hr { border: 0; border-top: 1px solid var(--tt-border); }
.tt-divider-label { text-align: center; }
.tt-rail { min-width: 0; align-self: start; padding: var(--space-4); border: 1px dashed var(--tt-border); border-radius: var(--radius-md); background: color-mix(in srgb, var(--tt-surface) 82%, transparent); }
.tt-rail h2 { margin: 0.3rem 0 var(--space-2); color: var(--pb-heading); font-size: var(--text-h3); }
.tt-rail p { margin-bottom: var(--space-3); color: var(--tt-dim); font-size: var(--text-sm); }
.tt-rail nav { margin-bottom: var(--space-4); }
.tt-rail a { min-height: 44px; display: flex; align-items: center; color: var(--pb-heading); text-underline-offset: 4px; }
.tt-rail .pb-social { display: grid; gap: 0; }

/* Speaker groups remain easy to scan while preserving the full field guide. */
.tt-body > section:not(.tt-preface, .tt-section) { margin-block: var(--section-gap); }
.tt-body > section:not(.tt-preface, .tt-section) > h2 {
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--tt-border);
  color: var(--tt-accent);
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 400;
}
.tt-body .legacy-details, .tt-body section.tt-details {
  margin-bottom: var(--space-3);
  border: 1px solid var(--tt-border);
  border-radius: var(--radius-sm);
  background: var(--tt-surface);
}
.tt-body .detail-summary {
  margin: 0;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--tt-border);
  color: var(--tt-text);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 700;
}
details.tt-speaker-group > summary.detail-summary {
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.8rem 1rem;
  border-bottom-color: transparent;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
details.tt-speaker-group > summary.detail-summary::-webkit-details-marker { display: none; }
details.tt-speaker-group > summary.detail-summary::before {
  content: "▸";
  min-width: 1em;
  color: var(--tt-accent);
  font-size: 1.05em;
  line-height: 1;
}
details.tt-speaker-group[open] > summary.detail-summary { border-bottom-color: var(--tt-border); }
details.tt-speaker-group[open] > summary.detail-summary::before { content: "⌄"; transform: none; }
.tt-body .legacy-details > .detail-body { padding: var(--space-3); }
.tt-body .preface {
  margin-block: var(--section-gap);
  padding: var(--space-4);
  border: 1px solid var(--tt-border);
  border-left: 4px solid var(--tt-accent);
  border-radius: var(--radius-md);
  background: var(--tt-surface-2);
}
.tt-body .preface h2 { margin-bottom: var(--space-2); color: var(--tt-accent); font-family: var(--font-display); }
.tt-body .preface p { margin-bottom: var(--space-2); }
.tt-body .preface .sign { color: var(--tt-accent); font-style: italic; }
.tt-body .highlight { margin: var(--space-3) 0; padding: var(--space-3); border-left: 4px solid var(--tt-accent); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--tt-accent) 9%, var(--tt-surface)); }
.tt-body .highlight strong { color: var(--tt-accent); }
.tt-body .entry { margin-bottom: var(--space-2); padding: var(--space-3); border: 1px solid var(--tt-border); border-radius: var(--radius-sm); background: var(--tt-surface-2); font-size: var(--text-sm); }
.tt-body .entry-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin-bottom: 0.4rem; }
.tt-body .topic { color: var(--tt-dim); font-size: var(--text-xs); font-style: italic; }
.tt-body .badge { display: inline-block; padding: 0.1rem 0.35rem; border: 1px solid #777; border-radius: var(--radius-sm); color: var(--tt-text); font-family: var(--font-mono); font-size: 0.7em; white-space: nowrap; }
.tt-body .badge.mistral { border-color: var(--tt-mistral); color: var(--tt-mistral); }
.tt-body .badge.deepseek { border-color: var(--tt-deepseek); color: var(--tt-deepseek); }
.tt-body .badge.glm { border-color: var(--tt-glm); color: var(--tt-glm); }
.tt-body .badge.kimi { border-color: var(--tt-kimi); color: var(--tt-kimi); }
.tt-body .badge.gemini { border-color: var(--tt-gemini); color: var(--tt-gemini); }
.tt-body .badge.qwen { border-color: var(--tt-qwen); color: var(--tt-qwen); }
.tt-body .badge.falcon { border-color: var(--tt-falcon); color: var(--tt-falcon); }
.tt-body .badge.ernie { border-color: var(--tt-ernie); color: var(--tt-ernie); }
.tt-body .badge.lefos { border-color: var(--tt-lefos); color: var(--tt-lefos); }
.tt-body .badge.chatgpt { border-color: var(--tt-chatgpt); color: var(--tt-chatgpt); }
.tt-body table { width: 100%; margin-block: var(--space-3); border-collapse: collapse; font-size: var(--text-sm); }
.tt-body th, .tt-body td { padding: 0.55rem 0.65rem; border-bottom: 1px solid var(--tt-border); text-align: left; vertical-align: top; }
.tt-body th { color: var(--tt-accent); }
.tt-body ul, .tt-body ol { margin-bottom: var(--space-2); padding-left: 1.4rem; }
.tt-body blockquote { margin: var(--space-3) 0; padding: 0.5rem 1rem; border-left: 3px solid var(--tt-border); color: var(--tt-dim); font-style: italic; }
.tt-body code { padding: 0.1rem 0.3rem; border: 1px solid var(--tt-border); border-radius: 3px; background: var(--tt-surface-2); }
.tt-body pre { max-width: 100%; margin: var(--space-3) 0; padding: var(--space-3); overflow-x: auto; border: 1px solid var(--tt-border); border-radius: var(--radius-sm); background: var(--tt-surface); color: var(--tt-text); white-space: pre-wrap; overflow-wrap: anywhere; }
.tt-body .next-prompt { margin-top: var(--section-gap); padding: var(--space-4); border: 1px solid var(--tt-deepseek); border-radius: var(--radius-md); background: color-mix(in srgb, var(--tt-deepseek) 7%, var(--tt-surface)); }
.tt-body .model-key { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; padding: var(--space-3); border: 1px solid var(--tt-border); border-radius: var(--radius-sm); background: var(--tt-surface); font-size: var(--text-sm); }
.tt-article-closing-image { display: block; width: min(95vw, 1600px); max-width: 1672px; height: auto; position: relative; left: 50%; transform: translateX(-50%); margin: var(--section-gap) 0 0; }
@media (min-width: 1000px) {
  .tt-article-closing-image { left: calc(50% + (270px + clamp(2rem, 3.5vw, 3rem)) / 2); }
}
@media (max-width: 640px) {
  .tt-article-closing-image { width: 100%; left: auto; transform: none; margin-inline: auto; }
}
.tt-body > footer { margin-top: var(--section-gap); padding: var(--space-3); border-top: 1px solid var(--tt-border); color: var(--tt-dim); text-align: center; }
@media (min-width: 1000px) and (min-height: 760px) { .tt-rail { position: sticky; top: 1.5rem; } }
/* Keeps extreme zoom-out useful without widening article lines. At a 1920px
   display this threshold is reached around 50% browser zoom, not at 100%. */
@media (min-width: 3000px) {
  .tt-page .pb-wrap--wide { width: min(1800px, calc(100% - 8rem)); }
  .tt-layout { grid-template-columns: minmax(0, 900px) minmax(300px, 360px); gap: 4rem; }
  .tt-body, .tt-rail { font-size: 1.25rem; }
}
@media (max-width: 999px) { .tt-layout { grid-template-columns: minmax(0, var(--frame-reading)); } .tt-rail { order: -1; } .tt-rail nav { columns: 2; } }
@media (max-width: 640px) {
  .tt-page .pb-card { max-width: 100%; padding: 4rem 1rem 1.2rem; }
  .tt-header { max-width: 100%; padding-left: 0; margin-bottom: var(--space-4); text-align: center; }
  .tt-header h1 { max-width: 100%; font-size: clamp(2.15rem, 12vw, 3.2rem); overflow-wrap: anywhere; }
  .tt-layout, .tt-body { display: block; width: 100%; max-width: 100%; min-width: 0; }
  .tt-body { overflow-wrap: anywhere; }
  .tt-rail { max-width: 100%; margin-bottom: var(--space-4); padding: var(--space-3); }
  .tt-rail nav { columns: 1; }
  .tt-preface { padding: var(--space-3); }
  .tt-detail-body { padding-left: 1rem; }
  .tt-body table, .tt-table { display: block; width: 100%; max-width: 100%; min-width: 0; overflow-x: auto; white-space: nowrap; }
}