:root {
--color-bg: #f9f9f8;
--color-text: #1a1a1a;
--color-accent: #2d6cdf;
--font-base: 'Inter', sans-serif;
--radius-xl: 16px;
--shadow-card: 0 12px 30px rgba(0,0,0,.06);
--page-bg: #f8fafc; --radius-card: 20px;
}
*, *::before, *::after {
box-sizing: border-box;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 600;
line-height: 1.2;
margin: 1.2em 0 0.6em;
}
p {
line-height: 1.6;
margin: 0.8em 0;
}
a {
color: var(--color-accent);
text-decoration: none;
transition: color 0.2s ease;
}
a:hover {
color: #1f4aa2;
}
body {
font-family: var(--font-base);
background: var(--color-bg);
color: var(--color-text);
margin: 0;
padding: 0;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transition: background 0.3s ease, color 0.3s ease;
} @media (prefers-color-scheme: dark) {
html:not([data-theme]) :root {
--color-bg: #111111;
--color-text: #f9f9f8;
--color-accent: #4a90e2;
--page-bg: #0f172a; --shadow-card: 0 12px 30px rgba(0,0,0,.40);
}
} html[data-theme="dark"] :root {
--color-bg: #111111;
--color-text: #f9f9f8;
--color-accent: #4a90e2;
--page-bg: #0f172a; --shadow-card: 0 12px 30px rgba(0,0,0,.40);
} html[data-theme="light"] :root {
--color-bg: #f9f9f8;
--color-text: #1a1a1a;
--color-accent: #2d6cdf;
--page-bg: #f8fafc; --shadow-card: 0 12px 30px rgba(0,0,0,.06);
} .container {
max-width: 64rem; margin: 0 auto;
padding: 0 1.5rem; }
@media (min-width: 1440px) {
.container { max-width: 72rem; } }
.section {
padding: 4rem 0;
}
.flex {
display: flex;
align-items: center;
}
.grid {
display: grid;
gap: 2rem;
}
.grid-2 {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
} input, textarea, select {
width: 100%;
padding: 0.75rem 1rem;
border: 1px solid #ccc;
border-radius: 6px;
font-family: var(--font-base);
font-size: 1rem;
margin-bottom: 1rem;
}
input:focus, textarea:focus, select:focus {
border-color: var(--color-accent);
outline: none;
box-shadow: 0 0 0 2px rgba(45, 108, 223, 0.2);
}
label {
font-weight: 500;
display: block;
margin-bottom: 0.5rem;
} .card {
background: #fff;
border-radius: var(--radius-card);
box-shadow: var(--shadow-card);
padding: 1.5rem;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}
.card img {
max-width: 100%;
border-radius: var(--radius-card);
margin-bottom: 1rem;
}
.card h3 {
margin-top: 0;
margin-bottom: 0.75rem;
font-size: 1.25rem;
}
.card p {
margin-bottom: 1rem;
color: #555;
}
@media (prefers-color-scheme: dark) {
html:not([data-theme]) .card {
background: #1a1a1a;
box-shadow: var(--shadow-card);
}
html:not([data-theme]) .card p {
color: #ccc;
}
html:not([data-theme]) .card h3 {
color: #fff;
}
}
html[data-theme="dark"] .card {
background: #1a1a1a;
box-shadow: var(--shadow-card);
}
html[data-theme="dark"] .card p {
color: #ccc;
}
html[data-theme="dark"] .card h3 {
color: #fff;
} .flip-card {
background: transparent;
width: 300px;
height: 200px;
perspective: 1000px;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front,
.flip-card-back {
position: absolute;
width: 100%;
height: 100%;
border-radius: var(--radius-card);
backface-visibility: hidden;
box-shadow: var(--shadow-card);
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
}
.flip-card-front {
background: #fff;
color: #000;
}
.flip-card-back {
background: var(--color-accent);
color: #fff;
transform: rotateY(180deg);
} .flip-card { position: relative; } @media (hover: hover) {
.flip-card:hover .flip-card-inner { transform: rotateY(180deg); }
} @media (hover: none) {
.flip-card:focus-within .flip-card-inner,
.flip-card.is-flipped .flip-card-inner {
transform: rotateY(180deg);
}
} .flip-card:focus { outline: none; }
.flip-card:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; } .flip-toggle {
position: absolute;
bottom: 0.5rem;
right: 0.5rem;
border: none;
border-radius: 999px;
width: 2.25rem;
height: 2.25rem;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(0,0,0,0.06);
color: #000;
cursor: pointer;
transition: transform 0.2s ease, background 0.2s ease;
}
.flip-toggle:hover { transform: scale(1.05); }
@media (prefers-color-scheme: dark) {
.flip-toggle { background: rgba(255,255,255,0.08); color: #fff; }
} @media (prefers-reduced-motion: reduce) {
.flip-card-inner { transition: none; }
.card, .button { transition: none; }
} .theme-toggle {
display: inline-flex !important;
align-items: center;
justify-content: center;
padding: 0.5rem;
border-radius: 0.5rem;
cursor: pointer;
transition: all 0.2s ease;
background: transparent;
border: none;
color: var(--color-text);
opacity: 0.8;
width: 2.5rem;
height: 2.5rem;
position: relative;
}
.theme-toggle:hover {
opacity: 1;
background-color: rgba(0, 0, 0, 0.05);
transform: scale(1.05);
}
html[data-theme="dark"] .theme-toggle:hover {
background-color: rgba(255, 255, 255, 0.1);
}
@media (prefers-color-scheme: dark) {
html:not([data-theme]) .theme-toggle:hover {
background-color: rgba(255, 255, 255, 0.1);
}
}
.theme-toggle-icon {
width: 1.25rem;
height: 1.25rem;
transition: opacity 0.2s ease, transform 0.2s ease;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.theme-toggle-icon.hidden {
display: none !important;
opacity: 0;
pointer-events: none;
} #theme-toggle-light-icon,
#theme-toggle-dark-icon {
display: block;
} html[data-theme="light"] #theme-toggle-light-icon,
html:not([data-theme]) #theme-toggle-light-icon {
display: none;
}
html[data-theme="light"] #theme-toggle-dark-icon,
html:not([data-theme]) #theme-toggle-dark-icon {
display: block;
} html[data-theme="dark"] #theme-toggle-light-icon {
display: block;
}
html[data-theme="dark"] #theme-toggle-dark-icon {
display: none;
} @media (prefers-color-scheme: dark) {
html:not([data-theme]) #theme-toggle-light-icon {
display: block;
}
html:not([data-theme]) #theme-toggle-dark-icon {
display: none;
}
}
@media (prefers-color-scheme: light) {
html:not([data-theme]) #theme-toggle-light-icon {
display: none;
}
html:not([data-theme]) #theme-toggle-dark-icon {
display: block;
}
} #main-nav { align-items: center; }
#main-nav ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
#main-nav li { margin: 0; }
#main-nav a {
display: block;
padding: 0.5rem 0;
text-decoration: none;
color: var(--color-text);
opacity: 0.9;
transition: color 0.2s ease, opacity 0.2s ease;
}
#main-nav a:hover,
#main-nav a:focus { opacity: 1; color: var(--color-accent); }
#main-nav .current-menu-item > a,
#main-nav .current_page_item > a { color: var(--color-accent); font-weight: 600; } @media (max-width: 767px) {
#main-nav {
position: absolute;
top: 64px;
right: 16px;
left: 16px;
background: #fff;
border-radius: 10px;
padding: 12px 16px;
box-shadow: 0 12px 30px rgba(0,0,0,0.08);
display: none; flex-direction: column;
z-index: 50;
}
#main-nav ul { flex-direction: column; gap: 0.75rem; }
#main-nav.is-open { display: flex; }
@media (prefers-color-scheme: dark) {
html:not([data-theme]) #main-nav { background: #1a1a1a; box-shadow: 0 12px 30px rgba(0,0,0,0.4); }
}
html[data-theme="dark"] #main-nav { background: #1a1a1a; box-shadow: 0 12px 30px rgba(0,0,0,0.4); }
} @media (min-width: 768px) {
#main-nav { display: flex !important; position: static; background: transparent; box-shadow: none; padding: 0; }
#main-nav ul { flex-direction: row; gap: 1.5rem; align-items: center; }
} .chips { gap: 8px; }
.chip { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.chip:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
@media (prefers-color-scheme: dark) {
.chip { background: rgba(74,144,226,0.14); }
} .button-arrow { display: inline-flex; align-items: center; gap: 8px; }
.button-arrow .arrow { display:inline-block; transition: transform 0.2s ease; }
.button-arrow:hover .arrow { transform: translateX(4px); } .button,
.button-outline {
border-radius: 999px; padding: 0.6rem 1rem; font-weight: 600; line-height: 1; display: inline-flex; align-items: center;
gap: 8px; } .button-outline {
border: 1.5px solid var(--color-accent);
color: var(--color-accent);
background: transparent;
box-shadow: 0 1px 0 rgba(0,0,0,0.03);
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.button-outline:hover {
background: var(--color-accent);
color: #fff;
transform: translateY(-1px);
}
.button-outline:active { transform: translateY(0); }
.button-outline:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(45,108,223,0.25); } .button-sm { padding: 0.45rem 0.85rem; font-size: 0.95rem; }
.button-lg { padding: 0.8rem 1.15rem; font-size: 1.05rem; } @media (prefers-color-scheme: dark) {
.button-outline:focus-visible { box-shadow: 0 0 0 3px rgba(74,144,226,0.28); }
} .button-primary{
border: 1.5px solid var(--color-accent);
background: var(--color-accent);
color:#fff;
box-shadow: 0 6px 18px rgba(45,108,223,.25);
transition: transform .15s ease, box-shadow .2s ease, background .2s ease, filter .2s ease;
}
.button-primary:hover{
transform: translateY(-1px);
box-shadow: 0 10px 24px rgba(45,108,223,.35);
filter: brightness(0.95);
color: #fff;
}
.button-primary:active{ transform: translateY(0); filter: none; }
@media (prefers-color-scheme: dark){
.button-primary{ box-shadow: 0 6px 18px rgba(74,144,226,.32); }
.button-primary:hover{ box-shadow: 0 10px 28px rgba(74,144,226,.44); }
} #reading-progress {
position: fixed;
top: 0;
left: 0;
width: 0%;
height: 4px;
background: var(--color-accent);
z-index: 1000;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
transition: width 0.15s ease;
}
@media (prefers-reduced-motion: reduce) {
#reading-progress { transition: none; }
} .prose { 
color: var(--color-text);
font-size: 1.05rem;
line-height: 1.8;
}
.prose p { margin: 1em 0; }
.prose h2 { font-size: 1.75rem; margin: 1.6em 0 0.6em; line-height: 1.25; }
.prose h3 { font-size: 1.35rem; margin: 1.4em 0 0.6em; line-height: 1.3; }
.prose a { color: var(--color-accent); text-decoration: none; border-bottom: 1px solid rgba(45,108,223,0.35); }
.prose a:hover { border-bottom-color: var(--color-accent); }
.prose img { display: block; max-width: 100%; height: auto; border-radius: 12px; margin: 1.25rem auto; }
.prose blockquote { 
margin: 1.25rem 0; 
padding: 0.9rem 1rem; 
border-left: 4px solid var(--color-accent); 
background: rgba(45,108,223,0.06);
border-radius: 8px;
}
.prose ul, .prose ol { margin: 1rem 0 1rem 1.25rem; }
.prose li { margin: 0.3rem 0; }
.prose hr { border: none; border-top: 1px solid rgba(0,0,0,0.08); margin: 2rem 0; }
.prose code { background: rgba(0,0,0,0.05); padding: 0.15rem 0.35rem; border-radius: 5px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.95em; }
.prose pre { background: #0f172a; color: #e5e7eb; padding: 1rem; border-radius: 10px; overflow: auto; font-size: 0.95rem; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.25rem 0; }
.prose th, .prose td { border: 1px solid rgba(0,0,0,0.08); padding: 0.6rem 0.75rem; text-align: left; }
.prose th { background: rgba(0,0,0,0.04); font-weight: 600; } @media (prefers-color-scheme: dark) {
.prose { color: #e6e6e6; }
.prose a { border-bottom-color: rgba(74,144,226,0.45); }
.prose blockquote { background: rgba(74,144,226,0.12); }
.prose hr { border-top-color: rgba(255,255,255,0.12); }
.prose th, .prose td { border-color: rgba(255,255,255,0.12); }
.prose th { background: rgba(255,255,255,0.06); }
.prose code { background: rgba(255,255,255,0.08); }
}
.mx-auto { margin-left: auto; margin-right: auto; }
.max-w-5xl { max-width: 64rem; } .max-w-6xl { max-width: 72rem; }  .flex-1 { flex: 1 1 0%; }
.shrink-0 { flex-shrink: 0; }
.text-right { text-align: right; }
.text-center { text-align: center; } .min-h-screen { min-height: 100vh; }
.p-6 { padding: 1.5rem; }
.p-8 { padding: 2rem; }
.p-10 { padding: 2.5rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; } @supports not (min-height: 100dvh) {
.min-h-screen { min-height: 100vh; }
} .page-bg { background: var(--page-bg); }
.section { margin-bottom: 4rem; } .card--flat { box-shadow: none !important; } .post-meta { font-size: 0.875rem; color: #6b7280; }
.post-meta a { color: inherit; text-decoration: none; border-bottom: 1px dotted currentColor; }
.post-meta a:hover { border-bottom-style: solid; } .post-share { display:flex; align-items:center; gap:.75rem; padding-top:1.5rem; margin-top:2.5rem; border-top:1px solid rgba(0,0,0,.08); }
.post-share__actions { display:flex; flex-wrap:wrap; gap:.5rem; } .post-nav { display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding-top:1.5rem; border-top:1px solid rgba(0,0,0,.08); } .hero { display:flex; flex-direction:column; gap:2.5rem; padding:2rem; border-radius: var(--radius-card); box-shadow: var(--shadow-card); background:#fff; }
@media (min-width:768px){ .hero { flex-direction:row; padding:4rem; } } @media (prefers-color-scheme: dark) {
.post-share, .post-nav { border-top-color: rgba(255,255,255,.12); }
.hero { background:#1a1a1a; }
} .post-actions { display:flex; align-items:center; gap:.75rem; padding-top:1.5rem; margin-top:2.5rem; border-top:1px solid rgba(0,0,0,.08); }
.post-actions__buttons { display:flex; flex-wrap:wrap; gap:.5rem; }
@media (prefers-color-scheme: dark) {
.post-actions { border-top-color: rgba(255,255,255,.12); }
} .card-static {
background: #fff;
border: none;
border-radius: var(--radius-card);
box-shadow: var(--shadow-card);
padding: 1.5rem;
}
.about-section h2 { margin: 0 0 12px; }
.about-section p { margin: 0 0 12px; }
@media (prefers-color-scheme: dark) {
.card-static { background: #1a1a1a; border: none; box-shadow: var(--shadow-card); }
}
.post-card__title { margin: 0 0 0.5rem; font-size: 1.25rem; line-height: 1.25; } .post-meta { margin-bottom: 0.5rem; } .chips, .tags { display:flex; flex-wrap:wrap; gap:8px; margin: 0.5rem 0 0.75rem; }
.chips { margin-bottom: 0.5rem; } .chip, .tag {
display: inline-block;
padding: 4px 10px;
border-radius: 999px;
font-size: 12px;
line-height: 1;
text-decoration: none;
transition: all .18s ease;
} .chip--cat { background: rgba(45,108,223,0.08); color: var(--color-accent); }
.chip--cat:hover { background: rgba(45,108,223,0.14); } .tag { border: 1px solid var(--color-accent); color: var(--color-accent); }
.tag:hover { background: rgba(45,108,223,0.06); } @media (prefers-color-scheme: dark){
.chip--cat { background: rgba(74,144,226,0.16); }
.chip--cat:hover { background: rgba(74,144,226,0.22); }
.tag:hover { background: rgba(74,144,226,0.12); }
}  .page-bg { min-height: 100dvh; display: flex; flex-direction: column; } .site-main { padding: 3rem 0; } .hero__col { width: 100%; }
@media (min-width: 768px){
.hero__col { width: 50%; }
}
.hero__col--text { text-align: center; }
@media (min-width: 768px){ .hero__col--text { text-align: left; } } .hero__title { 
margin: 0 0 1rem; 
font-weight: 800; 
line-height: 1.1; 
color: #0f172a; 
font-size: 2rem; }
@media (min-width: 768px){ .hero__title { font-size: 2.5rem; } } .hero__subtitle { 
margin: 0 0 1.25rem; 
font-size: 1.125rem; 
color: #475569; 
}
@media (prefers-color-scheme: dark){
.hero__title { color: #fff; }
.hero__subtitle { color: #cbd5e1; }
} .hero__img { 
display: block; 
width: 100%; 
max-width: 24rem; 
border-radius: var(--radius-card); 
box-shadow: var(--shadow-card); 
margin: 0 auto; 
} .section__title { 
margin: 0 0 1rem; 
font-size: 1.5rem; 
font-weight: 700; 
color: #0f172a; 
}
@media (prefers-color-scheme: dark){ .section__title { color: #fff; } }
.about__p { 
margin: 0 0 0.75rem; 
font-size: 1.125rem; 
line-height: 1.7; 
color: #334155; 
}
@media (prefers-color-scheme: dark){ .about__p { color: #d1d5db; } } .card ul {
list-style: none;
padding: 0;
margin: 1rem 0;
}
.card ul li {
margin: 0.75rem 0;
padding: 0;
color: var(--color-text);
line-height: 1.6;
}
.card ul li strong {
color: var(--color-text);
font-weight: 600;
}
.card ul li a {
color: var(--color-accent);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color 0.2s ease;
}
.card ul li a:hover {
border-bottom-color: var(--color-accent);
}
@media (prefers-color-scheme: dark) {
.card ul li {
color: #e6e6e6;
}
} .breadcrumbs {
font-size: 0.875rem;
color: #6b7280;
}
.breadcrumbs ol {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
list-style: none;
margin: 0;
padding: 0;
}
.breadcrumbs li {
display: inline-flex;
align-items: center;
}
.breadcrumbs a {
color: inherit;
text-decoration: none;
transition: color 0.2s ease;
}
.breadcrumbs a:hover {
color: var(--color-accent);
}
.breadcrumbs span {
color: #9ca3af;
}
@media (prefers-color-scheme: dark) {
.breadcrumbs {
color: #9ca3af;
}
.breadcrumbs a:hover {
color: #60a5fa;
}
}