:root { color-scheme: light; }
.dark { color-scheme: dark; }
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { animation-duration: .01ms !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}
html { scroll-padding-top: 5.5rem; }
.skip-link { position: fixed; left: 1rem; top: .75rem; z-index: 100; transform: translateY(-160%); border-radius: .5rem; background: #00a2c2; color: #fff; padding: .65rem .9rem; font-family: "JetBrains Mono", monospace; }
.skip-link:focus { transform: translateY(0); outline: 2px solid #fff; outline-offset: 3px; }
.nav-link, .mobile-nav-link { border-radius: .5rem; color: inherit; font-family: "JetBrains Mono", monospace; font-size: .92rem; padding: .55rem .75rem; }
.nav-link:hover, .mobile-nav-link:hover, .nav-link.active, .mobile-nav-link.active { color: #00a2c2; }
.mobile-nav-link { display: block; }
.icon-button { align-items: center; border: 1px solid rgb(212 212 216); border-radius: .75rem; display: inline-flex; height: 2.5rem; justify-content: center; width: 2.5rem; }
.dark .icon-button { border-color: rgb(63 63 70); }
.theme-icon-dark { display: none; }
.dark .theme-icon-light { display: none; }
.dark .theme-icon-dark { display: inline; }
.section { border-bottom: 1px solid rgba(113, 113, 122, .16); }
.section-title { color: rgb(24 24 27); font-family: "JetBrains Mono", monospace; font-size: 1.65rem; font-weight: 700; }
.dark .section-title { color: #fff; }
.section-heading { align-items: center; display: flex; gap: 1rem; justify-content: space-between; }
.card { border: 1px solid rgb(228 228 231); border-radius: .75rem; background: rgba(255,255,255,.76); padding: 1.25rem; box-shadow: 0 1px 2px rgba(0,0,0,.04); transition: border-color .2s ease, transform .2s ease; }
.card:hover { border-color: rgba(0,162,194,.55); }
.dark .card { background: rgba(39,39,42,.42); border-color: rgb(63 63 70); }
.btn-primary, .btn-secondary { align-items: center; border-radius: .75rem; display: inline-flex; font-family: "JetBrains Mono", monospace; font-weight: 600; justify-content: center; min-height: 2.75rem; padding: .7rem 1rem; }
.btn-primary { background: #00a2c2; color: #fff; }
.btn-primary:hover { background: #008cad; }
.btn-secondary { border: 1px solid rgb(161 161 170); color: inherit; }
.btn-secondary:hover { border-color: #00a2c2; color: #00a2c2; }
.text-link { color: #007f99; font-weight: 600; }
.text-link:hover { color: #00a2c2; }
.dark .text-link { color: #40c7df; }
.footer-link:hover { color: #00a2c2; }
.footer-social-link { align-items: center; border: 1px solid rgb(212 212 216); border-radius: .6rem; color: inherit; display: inline-flex; height: 2.35rem; justify-content: center; transition: border-color .2s ease, color .2s ease; width: 2.35rem; }
.footer-social-link:hover { border-color: #00a2c2; color: #00a2c2; }
.footer-social-link svg { height: 1.15rem; width: 1.15rem; }
.dark .footer-social-link { border-color: rgb(63 63 70); }
.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; }
.tag, .tag-selected { border: 1px solid rgb(212 212 216); border-radius: .5rem; color: rgb(82 82 91); display: inline-flex; font-family: "JetBrains Mono", monospace; font-size: .78rem; padding: .25rem .5rem; }
.tag-selected, .filter-button.active { border-color: #00a2c2; color: #00a2c2; }
.dark .tag, .dark .tag-selected { border-color: rgb(82 82 91); color: rgb(212 212 216); }
.input { border: 1px solid rgb(212 212 216); border-radius: .75rem; min-height: 2.75rem; padding: .65rem .9rem; width: 100%; }
.input:focus { border-color: #00a2c2; outline: 2px solid rgba(0,162,194,.18); }
.dark .input { background: rgb(39 39 42); border-color: rgb(82 82 91); }
.filter-button { border: 1px solid rgb(212 212 216); border-radius: .5rem; font-family: "JetBrains Mono", monospace; font-size: .82rem; padding: .45rem .7rem; }
.filter-button:hover { border-color: #00a2c2; color: #00a2c2; }
.dark .filter-button { border-color: rgb(82 82 91); }
.prose-karedit { color: rgb(63 63 70); line-height: 1.75; }
.dark .prose-karedit { color: rgb(212 212 216); }
.prose-karedit h1, .prose-karedit h2, .prose-karedit h3 { color: rgb(24 24 27); font-family: "JetBrains Mono", monospace; font-weight: 700; line-height: 1.25; scroll-margin-top: 6rem; }
.dark .prose-karedit h1, .dark .prose-karedit h2, .dark .prose-karedit h3 { color: #fff; }
.prose-karedit h1 { font-size: 2rem; margin-top: 2rem; }
.prose-karedit h2 { font-size: 1.6rem; margin-top: 2rem; }
.prose-karedit h3 { font-size: 1.25rem; margin-top: 1.5rem; }
.prose-karedit p, .prose-karedit ul, .prose-karedit ol, .prose-karedit blockquote, .prose-karedit table { margin-top: 1rem; }
.prose-karedit a { color: #007f99; font-weight: 600; }
.prose-karedit ul { list-style: disc; padding-left: 1.25rem; }
.prose-karedit ol { list-style: decimal; padding-left: 1.25rem; }
.prose-karedit blockquote { border-left: 3px solid #00a2c2; color: rgb(82 82 91); padding-left: 1rem; }
.prose-karedit table { display: block; overflow-x: auto; width: 100%; }
.prose-karedit th, .prose-karedit td { border: 1px solid rgb(212 212 216); padding: .55rem .7rem; }
.prose-karedit code { font-family: "JetBrains Mono", monospace; }
.prose-karedit :not(pre) > code { background: rgba(0,162,194,.1); border-radius: .35rem; padding: .1rem .3rem; }
.prose-karedit pre { border-radius: .75rem; margin-top: 1rem; overflow: auto; padding: 1rem; position: relative; }
.copy-code { position: absolute; right: .65rem; top: .65rem; border: 1px solid rgba(255,255,255,.35); border-radius: .45rem; color: #fff; font-family: "JetBrains Mono", monospace; font-size: .75rem; padding: .25rem .45rem; }
.prose-karedit img { border-radius: .75rem; cursor: zoom-in; margin-top: 1rem; max-width: 100%; }
.fade-in { animation: fade-in .28s ease both; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.blog-frame { background-image: linear-gradient(135deg, rgba(113,113,122,.08) 8.33%, transparent 8.33%, transparent 50%, rgba(113,113,122,.08) 50%, rgba(113,113,122,.08) 58.33%, transparent 58.33%, transparent 100%); background-size: 8px 8px; }
.blog-list { background: rgba(255,255,255,.94); border-left: 1px solid rgb(228 228 231); border-right: 1px solid rgb(228 228 231); border-top: 1px solid rgb(228 228 231); }
.dark .blog-list { background: rgba(47,47,53,.72); border-left-color: rgb(63 63 70); border-right-color: rgb(63 63 70); border-top-color: rgb(63 63 70); }
.blog-entry { border-bottom: 1px solid rgb(228 228 231); display: grid; gap: 1.5rem; min-height: 9.5rem; padding: 2rem 1rem; transition: background-color .2s ease; }
.blog-entry:hover { background: rgb(250 250 250); }
.dark .blog-entry { border-bottom-color: rgb(63 63 70); }
.dark .blog-entry:hover { background: rgba(63,63,70,.35); }
.blog-entry-date { color: rgb(82 82 91); font-family: "JetBrains Mono", monospace; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
.dark .blog-entry-date { color: rgb(161 161 170); }
.blog-entry-body { min-width: 0; }
.tag-subtle { background: transparent; color: rgb(113 113 122); }
.tag-subtle:hover { border-color: #00a2c2; color: #00a2c2; }
@media (min-width: 768px) {
  .blog-entry { grid-template-columns: minmax(14rem, 26%) minmax(0, 1fr); gap: 0; padding: 0; }
  .blog-entry-date { padding: 2rem 1.75rem; }
  .blog-entry-body { border-left: 1px solid rgb(228 228 231); padding: 2rem 2.25rem; }
  .dark .blog-entry-body { border-left-color: rgb(63 63 70); }
}
.project-list { border-top: 1px solid rgb(228 228 231); }
.dark .project-list { border-top-color: rgb(63 63 70); }
.project-entry { border-bottom: 1px solid rgb(228 228 231); display: grid; gap: 1.5rem; padding: 2rem 0; }
.dark .project-entry { border-bottom-color: rgb(63 63 70); }
.project-entry-year { color: #00a2c2; font-family: "JetBrains Mono", monospace; font-size: .9rem; font-weight: 700; letter-spacing: .08em; }
.project-entry-body { min-width: 0; }
.project-feature-card { border: 1px solid rgb(228 228 231); border-radius: 1rem; background: rgba(255,255,255,.78); overflow: hidden; padding: 2rem; transition: border-color .2s ease; }
.project-feature-card:hover { border-color: rgba(0,162,194,.55); }
.dark .project-feature-card { background: rgba(39,39,42,.42); border-color: rgb(63 63 70); }
.project-feature-icon { align-items: center; border: 1px solid rgb(228 228 231); border-radius: .75rem; color: rgb(47 47 53); display: flex; flex: 0 0 auto; height: 4.5rem; justify-content: center; width: 4.5rem; }
.dark .project-feature-icon { border-color: rgb(82 82 91); color: rgb(244 244 245); }
.project-feature-panel { background-image: radial-gradient(rgb(212 212 216) 1px, transparent 1px); background-size: 14px 14px; border: 1px solid rgb(228 228 231); border-radius: .75rem; margin-top: 2rem; min-height: 13rem; overflow: hidden; padding: 1.5rem; }
.dark .project-feature-panel { background-image: radial-gradient(rgb(82 82 91) 1px, transparent 1px); border-color: rgb(63 63 70); }
.project-feature-image { aspect-ratio: 12 / 7; border-radius: .65rem; display: block; height: auto; object-fit: cover; width: 100%; }
.project-feature-window { align-items: center; background: rgb(24 24 27); border-radius: .75rem .75rem 0 0; display: flex; gap: .45rem; height: 2rem; margin: 0 0 1.5rem; padding: 0 .75rem; }
.project-feature-window span { background: rgb(82 82 91); border-radius: 999px; display: block; height: .55rem; width: .55rem; }
.certification-list { border-top: 1px solid rgb(228 228 231); }
.dark .certification-list { border-top-color: rgb(63 63 70); }
.certification-row { align-items: center; border-bottom: 1px solid rgb(228 228 231); display: grid; gap: 1rem; margin: 0 -.75rem; padding: 1.25rem .75rem; transition: background-color .2s ease; }
.certification-row:hover { background: rgb(250 250 250); }
.dark .certification-row { border-bottom-color: rgb(63 63 70); }
.dark .certification-row:hover { background: rgba(63, 63, 70, .35); }
.certification-main { align-items: center; display: flex; gap: .9rem; min-width: 0; }
.certification-icon { align-items: center; background: rgb(161 161 170); border-radius: 999px; color: #fff; display: inline-flex; flex: 0 0 auto; font-family: "JetBrains Mono", monospace; font-size: .75rem; font-weight: 700; height: 1.6rem; justify-content: center; width: 1.6rem; }
.certification-logo { flex: 0 0 auto; height: 1.75rem; width: 1.75rem; }
.certification-logo-microsoft { display: grid; gap: .15rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.certification-logo-microsoft span:nth-child(1) { background: #f25022; }
.certification-logo-microsoft span:nth-child(2) { background: #7fba00; }
.certification-logo-microsoft span:nth-child(3) { background: #00a4ef; }
.certification-logo-microsoft span:nth-child(4) { background: #ffb900; }
.certification-logo-google { align-items: center; color: #4285f4; display: inline-flex; font-family: Arial, sans-serif; font-size: 1.45rem; font-weight: 700; justify-content: center; line-height: 1; }
.certification-logo-default { align-items: center; background: rgb(161 161 170); border-radius: 999px; color: #fff; display: inline-flex; font-family: "JetBrains Mono", monospace; font-size: .75rem; font-weight: 700; justify-content: center; }
.certification-badge { background: rgba(0,162,194,.12); border-radius: 999px; color: #00a2c2; display: inline-flex; font-family: "JetBrains Mono", monospace; font-size: .72rem; justify-self: start; padding: .2rem .65rem; }
.certification-meta { color: rgb(82 82 91); }
.dark .certification-meta { color: rgb(161 161 170); }
.certification-link, .certification-link-disabled { color: rgb(113 113 122); font-weight: 600; justify-self: start; white-space: nowrap; }
.certification-link:hover { color: #00a2c2; }
.certification-link-disabled { opacity: .45; }
@media (min-width: 768px) {
  .project-entry { grid-template-columns: 18rem minmax(0, 1fr); gap: 3rem; padding: 2.8rem 0; }
  .project-entry-body { border-left: 1px solid rgb(228 228 231); padding-left: 3rem; }
  .dark .project-entry-body { border-left-color: rgb(63 63 70); }
  .certification-row { grid-template-columns: minmax(0, 1.3fr) 8.5rem minmax(11rem, .8fr) 8rem; padding: 1.15rem .75rem; }
  .certification-badge { justify-self: start; }
  .certification-meta { justify-self: start; }
  .certification-link, .certification-link-disabled { justify-self: end; }
}