.sk-related {
margin: 40px 0 0;
padding-top: 24px;
border-top: 2px solid var(--sk-line, #e2dfd6);
}
.sk-related__label {
font-size: 12px;
font-weight: 700;
color: var(--sk-mute, #7a7f94);
letter-spacing: 0.1em;
text-transform: uppercase;
margin-bottom: 12px;
}
.sk-related__track {
display: flex;
gap: 12px;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
padding-bottom: 8px;
scrollbar-width: none;
}
.sk-related__track::-webkit-scrollbar { display: none; }
.sk-related__item {
flex-shrink: 0;
width: 160px;
scroll-snap-align: start;
text-decoration: none !important;
display: flex;
flex-direction: column;
border-radius: 10px;
overflow: hidden;
background: #fff;
border: 1px solid var(--sk-line, #e2dfd6);
transition: transform 200ms ease, box-shadow 200ms ease;
}
.sk-related__item:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(27,35,64,0.12);
}
.sk-related__thumb {
width: 100%;
height: 100px;
object-fit: cover;
display: block;
}
.sk-related__title {
font-size: 12px;
font-weight: 600;
color: var(--sk-ink, #1b2340);
padding: 8px 8px 10px;
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
} .sk-related__arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--sk-navy, #1b2340);
color: #fff;
border: none;
cursor: pointer;
font-size: 22px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
box-shadow: 0 2px 8px rgba(0,0,0,0.18);
transition: opacity 160ms ease;
padding: 0;
}
.sk-related__arrow--prev { left: -12px; }
.sk-related__arrow--next { right: -12px; }
.sk-related__arrow:hover { opacity: 0.8; } @media (max-width: 600px) {
.sk-related__arrow { display: none !important; }
} html[data-theme="dark"] {
--sk-ink:    #e8e4f0;
--sk-mute:   #9a9db5;
--sk-line:   #343860;
--sk-cream:  #1e2240;
--sk-cream-2:#252a4a;
--sk-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
html[data-theme="dark"] body {
background-color: #1a1d2e !important;
background-attachment: scroll !important;
}
html[data-theme="dark"] #wrapper,
html[data-theme="dark"] #container,
html[data-theme="dark"] #content,
html[data-theme="dark"] #content-in,
html[data-theme="dark"] #main,
html[data-theme="dark"] #sidebar,
html[data-theme="dark"] .sidebar-scroll {
background: transparent !important;
} html[data-theme="dark"] #main *,
html[data-theme="dark"] #sidebar * {
color: #e8e4f0 !important;
border-color: #343860 !important;
} html[data-theme="dark"] #main *,
html[data-theme="dark"] #sidebar * {
background-color: transparent;
} html[data-theme="dark"] article.entry-card,
html[data-theme="dark"] article.e-card,
html[data-theme="dark"] .entry-card-wrap,
html[data-theme="dark"] .e-card-wrap {
background-color: #242840 !important;
} html[data-theme="dark"] .information-box,
html[data-theme="dark"] .warning-box,
html[data-theme="dark"] .check-box,
html[data-theme="dark"] .ng-box,
html[data-theme="dark"] .memo-box,
html[data-theme="dark"] .profile-box,
html[data-theme="dark"] [class*="-box"] {
background-color: #242840 !important;
border-color: #343860 !important;
} html[data-theme="dark"] .toc,
html[data-theme="dark"] #toc_container,
html[data-theme="dark"] .ez-table-of-contents {
background-color: #242840 !important;
} html[data-theme="dark"] .page-numbers,
html[data-theme="dark"] .pager-links a {
background-color: #242840 !important;
}
html[data-theme="dark"] .page-numbers.current {
background-color: var(--sk-coral) !important;
color: #fff !important;
}  html[data-theme="dark"] .cat-label,
html[data-theme="dark"] .category-label,
html[data-theme="dark"] [class*="cat-label"] {
color: #fff !important;
} html[data-theme="dark"] .sk-cta,
html[data-theme="dark"] .sk-cta * { color: #fff !important; }
html[data-theme="dark"] .sk-step__num { color: #fff !important; }
html[data-theme="dark"] .sk-mobile-nav,
html[data-theme="dark"] .sk-mobile-nav * { border-color: transparent !important; } html[data-theme="dark"] .sk-related__item {
background-color: #242840 !important;
}  #related-entries,
.related-entries,
.related-entry-heading {
display: none !important;
} .sk-dark-toggle {
position: fixed;
bottom: 80px;
right: 16px;
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--sk-navy, #1b2340);
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
box-shadow: 0 2px 12px rgba(0,0,0,0.25);
z-index: 9998;
transition: transform 200ms ease;
line-height: 1;
}
.sk-dark-toggle:hover { transform: scale(1.1); }
@media (min-width: 769px) {
.sk-dark-toggle { bottom: 24px; }
}