:root {
  color-scheme: dark;
  --foreground: #fff;
  --muted: hsl(0 0% 75%);
  --surface: #111;
  --line: hsl(0 0% 45%);
  --content-width: 1000px;
  --page-gutter: 48px;
  --section-spacing: 2rem;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: #000; }
body {
  min-height: 100vh;
  margin: 0;
  color: var(--foreground);
  background: linear-gradient(to bottom right, #000, hsl(200 100% 25%)) fixed;
  font-family: Arial, "Helvetica Neue", sans-serif;
}
a { color: inherit; text-decoration: none; }
.container { width: min(calc(100% - var(--page-gutter)), var(--content-width)); margin-inline: auto; }
.site-header { display: flex; min-height: 7rem; align-items: center; justify-content: center; border-bottom: 1px solid var(--line); }
.logo { font-size: 2.5rem; font-weight: 700; letter-spacing: .12em; }
.site-footer { display: flex; align-items: center; justify-content: space-between; padding: 40px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: .75rem; }
.site-footer p { margin: 0; }
.site-footer nav { display: flex; gap: 18px; }
.site-footer a { display: grid; place-items: center; color: var(--muted); }
.site-footer a:hover, .site-footer a:focus-visible { color: hsl(195 100% 65%); }
.site-footer svg { width: 22px; height: 22px; fill: currentColor; }
.site-footer .stroke-icon { fill: none; stroke: currentColor; stroke-width: 1.8; }
.site-footer .stroke-icon .fill { fill: currentColor; stroke: none; }
.section-title { margin: 0 0 2rem; font-size: 2rem; letter-spacing: .08em; }

.home-section, .detail-section { padding: var(--section-spacing) 0; border-bottom: 1px solid var(--line); }
.project-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.project-card { display: grid; aspect-ratio: 3 / 4; place-items: center; border: 1px solid var(--line); background: var(--surface); }
a.project-card:hover, a.project-card:focus-visible { border-color: var(--foreground); background: #191919; }
.project-card span { color: var(--muted); font-size: .85rem; letter-spacing: .12em; }
.pagination { display: flex; justify-content: center; margin-top: 28px; }
.pagination span { width: 28px; height: 10px; border-radius: 999px; background: var(--foreground); }

.detail-main { padding: 2rem 0; }
.project-title { margin: 0 0 2rem; font-size: clamp(2rem, 5vw, 4rem); overflow-wrap: anywhere; }
.project-subtitle { display: block; margin-top: .5rem; font-size: .5em; font-weight: 400; line-height: 1.4; color: var(--muted); }
[hidden] { display: none !important; }
.gallery-stage { position: relative; }
.main-image { display: flex; width: 100%; aspect-ratio: 3 / 2; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; border: 1px solid var(--line); background: #000; }
.main-image::-webkit-scrollbar { display: none; }
.gallery-frame { position: relative; flex: 0 0 100%; min-width: 0; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; }
.slide { position: absolute; inset: 0; display: grid; width: 100%; height: 100%; place-items: center; color: var(--muted); font-size: .75rem; object-fit: contain; background: #000; }
.gallery-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background: #000b; color: white; font-size: 2rem; cursor: pointer; }
.gallery-prev { left: 12px; }
.gallery-next { right: 12px; }
.gallery-status { text-align: center; color: var(--muted); font-size: .8rem; }
.gallery button:focus-visible, .main-image:focus-visible { outline: 2px solid white; outline-offset: -3px; }
.thumbnail[aria-pressed="true"] { border-color: var(--foreground); box-shadow: inset 0 0 0 1px var(--foreground); }
@media (max-width: 768px) and (pointer: coarse) { .gallery-arrow { display: none; } }
.thumbnails { display: grid; width: 100%; grid-auto-columns: calc(25% - 9px); grid-auto-flow: column; gap: 12px; margin-top: 12px; padding-bottom: 12px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: inline mandatory; scrollbar-color: var(--foreground) var(--surface); scrollbar-width: auto; }
.thumbnails::-webkit-scrollbar { height: 10px; }
.thumbnails::-webkit-scrollbar-track { background: var(--surface); }
.thumbnails::-webkit-scrollbar-thumb { border-radius: 999px; background: var(--foreground); }
.thumbnail { position: relative; padding: 0; font: inherit; display: grid; aspect-ratio: 3 / 2; place-items: center; overflow: hidden; border: 1px solid var(--line); background: #1c1c1c; color: var(--muted); cursor: pointer; scroll-snap-align: start; }
.thumbnail img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
.thumbnail span { font-size: .7rem; }
.thumbnail:hover { border-color: var(--foreground); }
.detail-section > p { max-width: 720px; margin: 0; font-size: 1.1rem; line-height: 1.8; }
.downloads { display: flex; flex-wrap: wrap; gap: 12px; }
.downloads span, .downloads a { padding: 1rem 1.5rem; border: 1px solid var(--line); background: var(--surface); color: var(--muted); }
.updates { margin: 0; padding: 0; list-style: none; }
.updates li { display: grid; grid-template-columns: 180px 1fr; gap: 2rem; padding: 1.5rem 0; border-top: 1px solid var(--line); }
.updates li div { display: flex; flex-direction: column; gap: .5rem; }
.updates time, .updates p { color: var(--muted); }
.updates p { margin: 0; }

@media (max-width: 768px) {
  :root { --page-gutter: 28px; --section-spacing: 2.5rem; }
  .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .desktop-only { display: none; }
  .site-footer { align-items: flex-start; flex-direction: column; gap: 24px; }
  .detail-main { padding: 2.5rem 0; }
  .updates li { grid-template-columns: 1fr; gap: 1rem; }
}

.project-card { overflow: hidden; }
.project-card > img { width: 100%; height: 100%; object-fit: cover; }
.detail-section > p + p { margin-top: 1rem; }
.detail-section > p, .updates p { white-space: pre-line; }
.downloads a:hover, .downloads a:focus-visible { border-color: var(--foreground); color: var(--foreground); }

.markdown-body { line-height: 1.8; overflow-wrap: anywhere; }
.markdown-body > :first-child { margin-top: 0; }
.markdown-body > :last-child { margin-bottom: 0; }
.markdown-body > p { white-space: normal; }
.markdown-body img { max-width: 100%; height: auto; }
.markdown-body a { text-decoration: underline; text-underline-offset: .2em; }
.markdown-body pre { overflow-x: auto; padding: 1rem; background: var(--surface); }
.markdown-body blockquote { margin-left: 0; padding-left: 1rem; border-left: 3px solid var(--line); color: var(--muted); }
.markdown-body table { display: block; overflow-x: auto; border-collapse: collapse; }
.markdown-body th, .markdown-body td { border: 1px solid var(--line); padding: .5rem 1rem; }

body.modal-open { position: fixed; width: 100%; overflow: hidden; }
.game-dialog { width: min(1100px, calc(100% - 48px)); max-width: none; max-height: calc(100dvh - 48px); padding: 0 32px 32px; border: 1px solid #333; border-radius: 16px; background: #151515; color: var(--foreground); box-shadow: 0 24px 100px #0009; overscroll-behavior: contain; }
.game-dialog::backdrop { background: #000b; }
.dialog-toolbar { position: sticky; top: 0; z-index: 2; display: flex; justify-content: flex-end; padding: 12px 0; background: #151515; }
.dialog-close { width: 44px; height: 44px; border: 1px solid #555; border-radius: 50%; background: #222; color: white; font-size: 1.8rem; cursor: pointer; }
.dialog-close:hover { background: #383838; }
.dialog-close:focus-visible { outline: 2px solid white; outline-offset: 3px; }
.game-dialog .detail-main { width: 100%; padding: 0; }
@media (max-width: 768px) {
  .game-dialog { width: calc(100% - 20px); max-height: calc(100dvh - 20px); padding: 0 16px 24px; border-radius: 12px; }
}