:root {
--bg: #f0efed;
--surface: #fff;
--text: #262626;
--muted: #68635f;
--line: #d7d2ce;
--accent: #af604c;
--header: rgba(240, 239, 237, .78);
}
:root[data-theme="dark"] {
--bg: #262626;
--surface: #2e2e2e;
--text: #f2efec;
--muted: #b7afa9;
--line: #47413e;
--accent: #d07861;
--header: rgba(38, 38, 38, .8);
}
::selection {
color: #f2efec;
background-color: var(--accent);
}
* {
box-sizing: border-box
}
html {
scroll-behavior: smooth
}
body {
margin: 0;
background: var(--bg);
color: var(--text);
font-family: "IBM Plex Sans", Arial, sans-serif;
line-height: 1.55
}
html,
body {
overflow-x: clip;
}
a {
color: inherit;
text-decoration: none
}
img {
max-width: 100%;
height: auto;
display: block
}
.shell {
width: min(1180px, calc(100% - 40px));
margin: auto
}
.site-header {
position: sticky;
top: 0;
z-index: 50;
background: var(--header);
border-bottom: 1px solid var(--line)
}
.site-header::after {
content: '';
position: absolute;
inset: 0;
z-index: -1;
backdrop-filter: blur(18px);
pointer-events: none
}
.nav-wrap {
height: 78px;
display: flex;
align-items: center;
gap: 28px
}
.brand {
width: 104px;
display: block
}
.brand img {
width: 100%;
max-height: 54px;
object-fit: contain
}
.brand-light {
display: none
}
:root[data-theme="dark"] .brand-dark {
display: none
}
:root[data-theme="dark"] .brand-light {
display: block
}
@media(min-width:801px) {
.show-on-mobile {
display: none !important
}
}
.nav-wrap nav {
margin-left: auto
}
.menu {
display: flex;
gap: 22px;
list-style: none;
padding: 0;
margin: 0
}
.menu a {
font-size: 14px;
font-weight: 600
}
.theme-toggle {
border: 1px solid var(--line);
background: var(--surface);
color: var(--text);
border-radius: 999px;
width: 42px;
height: 42px;
cursor: pointer
}
.menu-toggle {
display: none;
background: none;
border: none;
cursor: pointer;
width: 42px;
height: 42px;
position: relative;
z-index: 100;
padding: 0;
flex-shrink: 0
}
.menu-toggle span {
display: block;
width: 20px;
height: 2px;
background: var(--text);
border-radius: 2px;
position: absolute;
left: 50%;
top: 50%;
transition: transform .35s cubic-bezier(.4, 0, .2, 1)
}
.menu-toggle span:nth-child(1) {
transform: translate(-50%, -50%)
}
.menu-toggle span:nth-child(2) {
transform: translate(-50%, -50%) rotate(90deg)
}
.menu-open .menu-toggle span:nth-child(1) {
transform: translate(-50%, -50%) rotate(45deg)
}
.menu-open .menu-toggle span:nth-child(2) {
transform: translate(-50%, -50%) rotate(135deg)
}
.page-head h1,
.article h1,
.error-page h1 {
font-size: clamp(56px, 9vw, 132px);
letter-spacing: -.065em;
line-height: .86;
margin: 12px 0 28px;
}
.lead {
font-size: clamp(20px, 2.2vw, 30px);
max-width: 720px;
color: var(--muted);
line-height: 1.35
}
.eyebrow {
font: 600 13px/1 "IBM Plex Mono", monospace;
letter-spacing: .12em;
color: var(--accent);
text-transform: uppercase
}
.button {
display: inline-block;
background: var(--text);
color: var(--bg);
padding: 14px 20px;
border-radius: 8px;
font-weight: 600
}
.text-link {
font-weight: 600;
border-bottom: 1px solid var(--accent)
}
.section {
padding-block: 90px
}
.cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px
}
.card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: 14px;
overflow: hidden;
}
.card:hover {
border-color: var(--muted);
}
.card img {
aspect-ratio: 16/10;
object-fit: cover;
width: 100%
}
.card-body {
padding: 20px
}
.card h4,
.card h2 {
font-size: 24px;
margin: 0 0 8px;
letter-spacing: -.025em
}
.card p {
color: var(--muted)
}
.card span {
font: 500 13px "IBM Plex Mono", monospace;
color: var(--accent)
}
.blog-card time {
font: 13px "IBM Plex Mono", monospace;
color: var(--muted)
}
.page-head {
padding: 100px 0 40px
}
.page-head p {
max-width: 650px;
color: var(--muted);
font-size: 20px
}
.blog-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 22px
}
.blog-card {
border-top: 1px solid var(--line);
padding-top: 18px
}
.blog-card img {
aspect-ratio: 16/9;
object-fit: cover;
border-radius: 12px;
margin-bottom: 20px
}
.blog-card h2 {
font-size: 34px;
line-height: 1.05;
letter-spacing: -.04em;
margin: 10px 0
}
.blog-card p {
color: var(--muted)
}
.article {
padding: 100px 0
}
.article header {
max-width: 900px
}
.article-cover {
margin: 60px 0
}
.article-cover img {
width: 100%;
max-height: 720px;
object-fit: cover;
border-radius: 18px
}
.article-meta {
display: flex;
gap: 8px;
margin-top: 24px;
font: 400 13px/1 "IBM Plex Mono", monospace;
color: var(--muted)
}
.article-meta span:not(:last-child)::after {
content: "·";
margin-left: 8px
}
.prose {
max-width: 780px;
margin: 60px auto;
font-size: 19px
}
.prose h2 {
font-size: 38px;
letter-spacing: -.04em;
margin-top: 2em
}
.prose h3 {
font-size: 28px
}
.prose a {
color: var(--accent);
text-decoration: underline
}
.prose code {
font-family: "IBM Plex Mono", monospace;
background: var(--surface);
padding: .15em .35em;
border-radius: 4px
}
.site-footer {
border-top: 1px solid var(--line);
padding: 50px 0 70px
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: 30px
}
.footer-grid p,
.muted {
color: var(--muted)
}
.footer-grid ul {
list-style: none;
margin: 0;
padding: 0
}
.footer-menu {
display: flex;
flex-direction: column;
gap: 10px
}
.error-page {
min-height: 70vh;
padding: 120px 0
}
.pagination {
margin-top: 50px
}
.nav-links {
display: flex;
gap: 8px
}
.page-numbers {
padding: 8px 12px;
border: 1px solid var(--line);
border-radius: 6px
} .toc-sidebar {
position: fixed;
left: max(calc((100vw - 1180px) / 2 - 260px), 16px);
top: 140px;
width: 220px;
max-height: calc(100vh - 180px);
overflow-y: auto;
z-index: 30;
font-size: 14px;
line-height: 1.45
}
.toc-sidebar ul {
list-style: none;
margin: 0;
padding: 0
}
.toc-sidebar ul ul {
padding-left: 16px
}
.toc-sidebar li {
margin: 6px 0
}
.toc-sidebar a {
display: block;
padding: 4px 0 4px 10px;
border-left: 2px solid transparent;
color: var(--muted);
transition: color .2s, border-color .2s
}
.toc-sidebar a:hover {
color: var(--text)
}
.toc-sidebar a.active {
color: var(--accent);
border-left-color: var(--accent)
} .toc-mobile {
display: none
}
@media(max-width:800px) {
html {
overflow-x: hidden
}
.show-on-desktop {
display: none !important
}
h1, h2 {
word-break: break-word;
}
.shell {
width: min(100% - 28px, 1180px)
}
.menu-toggle {
display: block
}
.nav-wrap nav {
position: fixed;
top: 78px;
left: 0;
width: 100%;
height: calc(100vh - 78px);
height: calc(100dvh - 78px);
background: var(--bg);
padding: 24px 24px 40px;
transform: translateX(100%);
transition: transform .35s cubic-bezier(.4, 0, .2, 1), visibility .35s;
overflow-y: auto;
z-index: 40;
visibility: hidden;
pointer-events: none
}
.menu-open .nav-wrap nav {
transform: translateX(0);
visibility: visible;
pointer-events: auto
}
body.menu-open {
position: fixed;
width: 100%;
overflow: hidden
}
.nav-wrap nav .menu {
flex-direction: column;
gap: 4px
}
.nav-wrap nav .menu a {
font-size: 22px;
display: block;
padding: 14px 0;
border-bottom: 1px solid var(--line)
}
.cards,
.blog-grid {
grid-template-columns: 1fr
}
.footer-grid {
grid-template-columns: 1fr
}
.section {
padding-block: 60px
}
}
@media(max-width:1650px) {
.toc-sidebar {
display: none
}
.toc-mobile {
display: block;
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 55;
font-size: 14px
}
.toc-mobile__toggle {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 14px 28px;
background: var(--surface);
border: none;
border-top: 1px solid var(--line);
color: var(--text);
font: 600 18px "IBM Plex Sans", Arial, sans-serif;
cursor: pointer
}
.toc-mobile__toggle img {
width: 24px;
height: 24px;
}
.toc-mobile__arrow {
margin-left: auto;
font-size: 18px;
transition: transform .3s
}
.toc-mobile--open .toc-mobile__arrow {
transform: rotate(180deg)
}
.toc-mobile__panel {
max-height: 0;
overflow: hidden;
background: var(--surface);
border-top: 1px solid var(--line);
transition: max-height .3s ease
}
.toc-mobile--open .toc-mobile__panel {
max-height: 50vh;
overflow-y: auto
}
.toc-mobile ul {
list-style: none;
margin: 0;
padding: 12px 28px 20px
}
.toc-mobile ul ul {
padding-left: 16px
}
.toc-mobile li {
margin: 4px 0
}
.toc-mobile a {
display: block;
padding: 6px 0;
color: var(--muted);
border: none
}
.toc-mobile a:active {
color: var(--accent)
}
}
@media(prefers-reduced-motion:reduce) {
* {
scroll-behavior: auto !important;
transition: none !important
}
}
body.menu-open {
overflow: hidden
} .cookie-notice {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 60;
background: var(--surface);
border-top: 1px solid var(--line);
padding: 20px 0;
}
.cookie-notice[hidden] {
display: none
}
.cookie-notice-inner {
display: flex;
align-items: center;
gap: 24px;
flex-wrap: wrap
}
.cookie-notice-inner p {
flex: 1;
margin: 0;
color: var(--muted);
font-size: 15px;
min-width: 240px
}
.cookie-notice-inner a {
color: var(--accent);
text-decoration: underline;
font-weight: 500
}
.cookie-notice-ok {
border: none;
cursor: pointer;
white-space: nowrap;
padding: 12px 32px;
border-radius: 8px;
font: 600 15px "IBM Plex Sans", Arial, sans-serif
}