/* Author/creator: nattapat2871 (https://nattapat2871.me) */
/* Shared public shell: same bounded title bar and unobtrusive visit counter. */
@font-face {
  font-family: "NamLauncher Noto Sans Thai";
  src: url("/assets/fonts/NamLauncher-NotoSansThai.ttf?v=20260924") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 100 900;
}

html,
body {
  font-family: "NamLauncher Noto Sans Thai", "Noto Sans Thai", Inter, ui-sans-serif, system-ui, sans-serif;
}
body .site-header {
  top: 14px;
  inset-inline: 0;
  width: min(1320px, calc(100% - 36px));
  max-width: 1320px;
  min-height: 64px;
  margin-inline: auto;
  padding: 8px 10px 8px 14px;
  border-radius: 16px;
  transition: background-color 180ms ease;
}
body .site-header.is-hero { width: min(1320px, calc(100% - 36px)); }
body .site-header.is-hero .brand { max-width: 250px; gap: 9px; opacity: 1; pointer-events: auto; transform: none; }
body:not([data-page="home"]) .site-header .brand { gap: 9px; }
body:not([data-page="home"]) .site-header .brand img { width: 38px; height: 38px; border-radius: 11px; }
body:not([data-page="home"]) .site-nav { gap: 3px; }
body:not([data-page="home"]) .site-nav a { min-height: 38px; padding-inline: 10px; border-radius: 12px; }
.page-visit-counter {
  position: fixed;
  z-index: 30;
  left: max(14px, env(safe-area-inset-left));
  bottom: max(14px, env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface);
  color: var(--muted);
  font: inherit;
  font-size: .72rem;
  line-height: 1.5;
  cursor: default;
}
.page-visit-counter strong { color: var(--foreground); font-variant-numeric: tabular-nums; }
.page-visit-counter svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.page-visit-counter[data-state="error"] { cursor: pointer; }
.page-visit-counter:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.site-footer { padding-bottom: 72px; }
.gallery-page { width: min(1240px, calc(100% - 36px)); margin: 0 auto; padding: 148px 0 96px; }
.gallery-hero { max-width: 760px; margin: 0 auto 48px; }
.gallery-hero h1 { max-width: 12ch; }
.gallery-hero > p:not(.eyebrow) { max-width: 64ch; }
.gallery-section { padding-inline: 0; }
.gallery-grid { gap: clamp(16px, 2.2vw, 28px); }
.gallery-grid .gallery-link { min-width: 0; }
.gallery-grid .screenshot-window { aspect-ratio: 16 / 10; }
.gallery-grid .screenshot-capture { width: 100%; height: 100%; object-fit: cover; }
.gallery-caption { display: block; margin-top: 12px; color: var(--foreground); font-size: .88rem; font-weight: 700; }
.difference-heading { margin-top: clamp(76px, 9vw, 128px); }
.screenshot-carousel {
  position: relative;
  min-height: clamp(360px, 42vw, 590px);
  margin-inline: auto;
  padding-inline: clamp(34px, 7vw, 116px);
}
.screenshot-carousel-stage { position: relative; height: clamp(300px, 36vw, 500px); }
.screenshot-carousel-card {
  position: absolute;
  top: 0;
  left: 50%;
  width: min(760px, 78vw);
  margin: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) scale(.78);
  filter: saturate(.6) blur(1px);
  transition: opacity 420ms var(--nl-motion-ease), transform 560ms var(--nl-motion-ease), filter 420ms ease;
}
.screenshot-carousel-card.is-active { z-index: 3; opacity: 1; pointer-events: auto; transform: translateX(-50%) scale(1); filter: none; }
.screenshot-carousel-card.is-prev,
.screenshot-carousel-card.is-next { z-index: 2; opacity: .38; pointer-events: auto; filter: saturate(.65) blur(.4px); }
.screenshot-carousel-card.is-prev { transform: translateX(calc(-50% - min(36vw, 410px))) scale(.78); }
.screenshot-carousel-card.is-next { transform: translateX(calc(-50% + min(36vw, 410px))) scale(.78); }
.screenshot-carousel-card.is-prev:hover { transform: translateX(calc(-50% - min(36vw, 410px))) scale(.81); }
.screenshot-carousel-card.is-next:hover { transform: translateX(calc(-50% + min(36vw, 410px))) scale(.81); }
.screenshot-carousel-caption { display: grid; gap: 6px; padding: 16px 6px 0; }
.screenshot-carousel-caption strong { font-size: clamp(.94rem, .8vw + .62rem, 1.18rem); }
.screenshot-carousel-caption span { color: var(--muted); line-height: 1.65; }
.carousel-arrow {
  position: absolute;
  z-index: 5;
  top: 42%;
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: color-mix(in oklab, var(--surface) 90%, transparent);
  box-shadow: 0 12px 32px rgb(0 0 0 / .28);
  color: var(--foreground);
  cursor: pointer;
  transition: transform 180ms var(--nl-motion-ease), background-color 180ms ease, border-color 180ms ease;
}
.carousel-arrow:hover { border-color: var(--accent); background: var(--surface-tertiary); transform: scale(1.08); }
.carousel-arrow:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.carousel-arrow svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; }
.carousel-arrow--prev { left: 0; }
.carousel-arrow--next { right: 0; }
.carousel-dots { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }
.carousel-dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: var(--line-strong); cursor: pointer; transition: transform 180ms ease, background-color 180ms ease; }
.carousel-dot.is-active { width: 24px; border-radius: 999px; background: var(--accent); }
.carousel-dot:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
body[data-page="home"] .partner-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body[data-page="home"] .feature-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
body[data-page="home"] .partner-card { grid-template-columns: 52px minmax(0, 1fr); padding: 15px; gap: 10px; }
body[data-page="home"] .partner-logo-shell { width: 52px; height: 52px; border-radius: 13px; }
body[data-page="home"] .partner-address code { font-size: .63rem; }
body[data-page="home"] .gallery-archive-callout { margin: clamp(40px, 5vw, 72px) 0 0; }
.feature-card--wide { grid-column: span 2; }
.feature-card--loaders { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-content: start; gap: 18px; }
.feature-card--wide .feature-icon { margin-bottom: 0; }
.feature-card-copy { min-width: 0; }
.feature-loader-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.feature-loader-list span,
.feature-java-note { display: inline-flex; align-items: center; gap: 7px; border: 1px solid color-mix(in oklab, var(--accent) 36%, var(--border)); border-radius: 999px; padding: 6px 10px; color: var(--foreground); font-size: .76rem; font-weight: 750; }
.feature-loader-list img { width: 19px; height: 19px; object-fit: contain; }
.feature-java-note { margin-top: 14px; border-color: var(--line-strong); border-radius: 13px; padding: 9px 11px; color: var(--muted); font-weight: 600; line-height: 1.45; }
.feature-java-icon { display: grid; width: 25px; height: 25px; flex: 0 0 auto; place-items: center; }
.feature-java-icon img { width: 25px; height: 25px; object-fit: contain; }
.feature-java-ranges { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; margin-top: 12px; }
.feature-java-ranges span { display: grid; min-width: 0; gap: 3px; border: 1px solid var(--line); border-radius: 12px; padding: 8px; background: color-mix(in oklab, var(--surface-secondary) 86%, transparent); }
.feature-java-ranges strong { color: var(--accent); font-size: .72rem; }
.feature-java-ranges small { color: var(--muted); font-size: .65rem; line-height: 1.35; }
.partner-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.partner-tags span { border: 1px solid color-mix(in oklab, var(--accent) 34%, var(--border)); border-radius: 999px; padding: 3px 7px; color: var(--accent); font-size: .72rem; font-weight: 800; line-height: 1.1; }
@media (max-width: 760px) {
  .gallery-page { width: min(calc(100% - 24px), 620px); padding-top: 116px; }
  .gallery-hero { margin-bottom: 32px; }
  .gallery-grid { grid-template-columns: 1fr; }
  .screenshot-carousel { min-height: 350px; padding-inline: 0; }
  .screenshot-carousel-stage { height: 300px; }
  .screenshot-carousel-card { width: min(100%, calc(100vw - 48px)); }
  .screenshot-carousel-card.is-prev,
  .screenshot-carousel-card.is-next { opacity: 0; pointer-events: none; }
  .carousel-arrow { width: 38px; height: 38px; top: 36%; }
  .carousel-arrow--prev { left: 2px; }
  .carousel-arrow--next { right: 2px; }
  body[data-page="home"] .partner-grid { grid-template-columns: 1fr; }
  body[data-page="home"] .feature-grid { grid-template-columns: minmax(0, 1fr); }
  body[data-page="home"] .partner-card { grid-template-columns: 56px minmax(0, 1fr); padding: 18px; gap: 16px; }
  .feature-card--wide { grid-column: auto; }
  .feature-card--loaders { grid-row: auto; grid-template-columns: 44px minmax(0, 1fr); }
  .feature-java-ranges { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 761px) and (max-width: 1100px) {
  body[data-page="home"] .partner-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-page="home"] .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .screenshot-carousel-card { transition: none; }
  .carousel-arrow { transition: none; }
}
[data-theme] .button--primary.primary-action {
  background: #006fee;
  color: #ffffff;
  box-shadow: 0 4px 12px rgb(0 0 0 / .16);
}
[data-theme] .button--primary.primary-action:hover { background: #005bc4; color: #ffffff; }
/* Content is visible until the viewport observer takes ownership of a target. */
@media (max-width: 760px) {
  body .site-header, body .site-header.is-hero { top: 8px; width: calc(100% - 20px); min-height: 60px; padding: 8px 10px; gap: 8px; }
  .page-visit-counter { left: max(8px, env(safe-area-inset-left)); bottom: max(8px, env(safe-area-inset-bottom)); min-height: 32px; padding: 6px 9px; font-size: .66rem; }
  body:not([data-page="home"]) .site-header .brand img { width: 30px; height: 30px; }
  .site-header .brand .beta-pill { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}