body{margin:0;background:#F7F4EF}
a{color:#0F5F5B;text-underline-offset:3px}a:hover{color:#0A4441}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid #0F5F5B;outline-offset:3px;border-radius:4px}
.dark a:focus-visible{outline-color:#D9FF3F}
@keyframes px{from{translate:0 0}to{translate:0 var(--d,60px)}}
@media (prefers-reduced-motion: no-preference){
a,button{transition:background-color .15s,color .15s,border-color .15s,translate .15s}
@supports (animation-timeline: scroll()){
.px-hero{animation:px linear both;animation-timeline:scroll(root);animation-range:0 900px}
.px-view{animation:px linear both;animation-timeline:view();animation-range:cover}
}
}
@container (max-width: 760px){.deco-wide{display:none}}

[x-cloak] { display: none !important; }
html { scroll-padding-top: 24px; }
button { font: inherit; cursor: pointer; }
.skip-link { position: absolute; left: 16px; top: -100px; z-index: 10; padding: 10px 18px; background: #fffdf8; }
.skip-link:focus { top: 12px; }
.screenshot-link { display: block; position: relative; border-radius: 10px; }
.project-screenshot { display: block; width: 100%; height: auto; border-radius: 10px; border: 1px solid #ddd6ca; box-sizing: border-box; }
.image-hint { display: block; padding-top: 8px; font-size: 13px; }
.image-dialog { width: min(1500px, 94vw); max-width: 94vw; max-height: 92dvh; padding: 12px; border: 1px solid #ddd6ca; border-radius: 12px; background: #f7f4ef; box-sizing: border-box; }
.image-dialog::backdrop { background: rgba(21, 20, 18, .8); }
.image-dialog img { display: block; width: 100%; height: auto; border-radius: 6px; }
.dialog-close { display: block; margin: 0 0 12px auto; min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: #151412; color: #f7f4ef; }
.overview-copy { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.overview-copy code { flex: 1 1 260px; min-width: 0; box-sizing: border-box; padding: 12px 14px; background: #151412; border-radius: 8px; font: 13px/1.6 'IBM Plex Mono', monospace; color: #d9ff3f; overflow-wrap: anywhere; }
.overview-copy button { min-height: 44px; min-width: 100px; padding: 0 16px; border: 1.5px solid #1d1c1a; border-radius: 999px; background: #fffdf8; color: #1d1c1a; font-size: 14px; font-weight: 600; }
.overview-copy button:disabled { cursor: wait; opacity: .6; }
.copy-status { flex-basis: 100%; margin: 0; font-size: 13px; color: #5f5a52; }
.copy-status:empty { display: none; }
@media (max-width: 480px) {
  #contact { padding: 28px 20px !important; }
  #contact span { overflow-wrap: anywhere; }
}