.td-hub {
--td-ivory: #f7f5f0;
--td-sand: #f0ece4;
--td-white: #ffffff;
--td-ink: #121c28;
--td-navy: #0f1f3a;
--td-blue: #003780;
--td-blue-mid: #0f4da8;
--td-steel: #35608f;
--td-cyan: #6aa9ec;
--td-secondary: #3f4a59;
--td-muted: #3d4654;
--td-hairline: #e7e2d8;
--td-hairline-strong: #dcd6c9;
--td-font: 'Inter', system-ui, sans-serif;
--td-mono: ui-monospace, 'Cascadia Code', 'Segoe UI Mono', monospace;
--td-max: 1200px;
--td-gutter: 24px;
--td-radius: 4px;
--td-ease: cubic-bezier(0.45, 0, 0.55, 1);
min-height: 100vh;
background: var(--td-ivory);
padding: clamp(48px, 8vw, 88px) var(--td-gutter) clamp(72px, 10vw, 120px);
font-family: var(--td-font);
font-size: 16px;
line-height: 1.7;
color: var(--td-ink);
-webkit-font-smoothing: antialiased;
}
.td-hub *,
.td-hub *::before,
.td-hub *::after {
box-sizing: border-box;
}
.td-hub h1,
.td-hub h2,
.td-hub p,
.td-hub main,
.td-hub aside,
.td-hub nav,
.td-hub header,
.td-hub article,
.td-hub hr {
margin: 0;
padding: 0;
border: 0;
font-family: var(--td-font);
font-weight: inherit;
line-height: inherit;
letter-spacing: normal;
text-transform: none;
color: inherit;
}
.td-hub button {
margin: 0;
padding: 0;
border: 0;
background: none;
font: inherit;
color: inherit;
letter-spacing: normal;
text-transform: none;
line-height: inherit;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
}
.td-hub a {
color: inherit;
text-decoration: none;
}
.td-wrap {
max-width: var(--td-max);
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 40px;
}
@media (min-width: 900px) {
.td-wrap {
flex-direction: row;
align-items: flex-start;
gap: 56px;
}
} .td-aside {
width: 100%;
flex-shrink: 0;
min-height: 200px;
}
@media (min-width: 900px) {
.td-aside {
width: 256px;
}
}
.td-aside-inner {
position: sticky;
top: 120px;
display: flex;
flex-direction: column;
gap: 24px;
}
.td-aside-label {
display: block;
font-size: 0.6875rem !important;
font-weight: 600 !important;
letter-spacing: 0.2em !important;
text-transform: uppercase !important;
color: var(--td-muted) !important;
margin-bottom: 14px !important;
line-height: 1.4 !important;
}
.td-aside-nav {
display: flex;
flex-direction: column;
gap: 12px;
align-items: flex-start;
}
.td-aside-link {
display: inline-block;
font-size: 0.875rem !important;
font-weight: 500 !important;
letter-spacing: normal !important;
text-transform: none !important;
color: var(--td-secondary) !important;
border-bottom: 2px solid transparent;
padding: 0 0 2px;
transition: color 0.3s var(--td-ease), border-color 0.3s var(--td-ease);
}
.td-aside-link:hover {
color: var(--td-blue-mid) !important;
}
.td-aside-link.is-active {
color: var(--td-blue) !important;
border-bottom-color: var(--td-blue);
}
.td-aside-divider {
height: 1px;
width: 100%;
background: var(--td-hairline);
} .td-main {
flex: 1;
min-width: 0;
}
.td-main-header {
display: flex;
flex-direction: column;
gap: 24px;
padding-bottom: 32px;
border-bottom: 1px solid var(--td-hairline);
}
@media (min-width: 768px) {
.td-main-header {
flex-direction: row;
justify-content: space-between;
align-items: flex-end;
gap: 32px;
}
}
.td-eyebrow {
display: block;
font-size: 0.6875rem !important;
font-weight: 600 !important;
letter-spacing: 0.2em !important;
text-transform: uppercase !important;
color: var(--td-steel) !important;
margin-bottom: 10px !important;
line-height: 1.4 !important;
}
.td-title {
font-size: clamp(1.625rem, 3.5vw, 2.25rem) !important;
font-weight: 500 !important;
line-height: 1.15 !important;
letter-spacing: -0.03em !important;
color: var(--td-navy) !important;
margin-bottom: 12px !important;
}
.td-lede {
font-size: 0.9375rem !important;
line-height: 1.7 !important;
color: var(--td-secondary) !important;
max-width: 540px;
}
.td-search-wrap {
width: 100%;
max-width: 288px;
flex-shrink: 0;
}
.td-search {
width: 100%;
font-family: var(--td-font);
font-size: 0.875rem;
color: var(--td-ink);
background: var(--td-white);
border: 1px solid var(--td-hairline-strong);
border-radius: var(--td-radius);
padding: 12px 14px 12px 40px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2335608f' stroke-width='1.75'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: 12px center;
transition: border-color 0.25s var(--td-ease), box-shadow 0.25s var(--td-ease);
}
.td-search:focus {
outline: none;
border-color: var(--td-blue);
box-shadow: 0 0 0 3px rgba(0, 55, 128, 0.12);
}
.td-search::placeholder {
color: var(--td-muted);
}
.td-hub .sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
} .td-list {
margin-top: 32px;
min-height: 200px;
}
.td-list-head,
.td-doc-row {
display: grid;
grid-template-columns: minmax(0, 1fr) 64px 120px 148px;
align-items: center;
column-gap: 16px;
padding-left: 16px;
padding-right: 16px;
}
.td-list-head {
display: none;
padding-top: 10px;
padding-bottom: 10px;
min-height: 40px;
background: var(--td-sand);
border-bottom: 1px solid var(--td-hairline-strong);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--td-muted);
}
@media (min-width: 768px) {
.td-list-head {
display: grid;
}
}
.td-list-head-lang,
.td-list-head-meta,
.td-list-head-actions,
.td-doc-lang,
.td-doc-meta,
.td-doc-actions {
text-align: right;
}
.td-list-body {
display: flex;
flex-direction: column;
}
.td-doc-row {
padding-top: 20px;
padding-bottom: 20px;
min-height: 84px;
border-bottom: 1px solid var(--td-hairline);
cursor: pointer;
transition: background 0.3s var(--td-ease);
}
.td-doc-row:hover {
background: var(--td-white);
}
.td-doc-row.is-hidden {
display: none;
}
.td-doc-name {
display: flex;
align-items: center;
gap: 14px;
min-width: 0;
}
.td-doc-icon {
width: 20px;
height: 20px;
flex-shrink: 0;
color: var(--td-steel);
}
.td-doc-icon svg {
width: 100%;
height: 100%;
display: block;
}
.td-doc-title {
font-size: 0.9375rem;
font-weight: 500;
color: var(--td-ink);
line-height: 1.45;
overflow: hidden;
text-overflow: ellipsis;
}
.td-doc-lang {
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--td-steel);
}
.td-doc-meta {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 2px;
min-width: 72px;
font-family: var(--td-mono);
font-size: 0.75rem;
color: var(--td-muted);
white-space: nowrap;
}
.td-doc-meta span:last-child {
color: var(--td-muted);
}
.td-doc-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 12px;
}
.td-action,
.td-action:link,
.td-action:visited {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 44px;
padding: 8px 4px;
font-size: 0.8125rem;
font-weight: 500;
color: var(--td-steel) !important;
transition: color 0.25s var(--td-ease);
text-decoration: none;
}
.td-action:hover,
.td-action:focus,
.td-action:active {
color: var(--td-blue) !important;
text-decoration: none;
}
.td-action svg {
width: 18px;
height: 18px;
flex-shrink: 0;
}
.td-action--download {
padding: 6px;
margin: -6px;
border-radius: var(--td-radius);
}
.td-action--download:hover {
background: rgba(0, 55, 128, 0.06);
}
.td-action:focus-visible {
outline: 2px solid var(--td-cyan);
outline-offset: 2px;
}
.td-empty {
padding: 48px 16px;
text-align: center;
font-size: 0.95rem;
color: var(--td-muted);
display: none;
}
.td-empty.is-visible {
display: block;
} @media (max-width: 767px) {
.td-list-head,
.td-doc-row {
grid-template-columns: 1fr;
row-gap: 10px;
}
.td-doc-lang,
.td-doc-meta,
.td-doc-actions,
.td-list-head-lang,
.td-list-head-meta,
.td-list-head-actions {
text-align: left;
}
.td-doc-meta {
flex-direction: row;
align-items: center;
gap: 12px;
}
.td-doc-actions {
justify-content: flex-start;
padding-top: 4px;
}
} .td-hub .td-section-title {
margin: 0 0 14px;
font-family: var(--td-font);
font-size: clamp(1.15rem, 1.8vw, 1.4rem);
font-weight: 550;
letter-spacing: -0.015em;
line-height: 1.3;
color: var(--td-ink);
}
.td-hub .td-note {
margin: 40px 0 8px;
padding: 24px 26px;
border: 1px solid var(--td-hairline);
border-radius: var(--td-radius);
background: var(--td-white);
}
.td-hub .td-note .td-section-title {
margin-bottom: 10px;
}
.td-hub .td-note-text {
margin: 0;
font-family: var(--td-font);
font-size: 0.98rem;
line-height: 1.7;
color: var(--td-muted);
}
@media (max-width: 640px) {
.td-hub .td-note {
padding: 20px;
}
}