/* The canvas is deliberately excluded from panel-only View Transition snapshots. */
:root { view-transition-name: none; }
#project-entry[hidden], .project-marker[hidden], .project-coordinates[hidden],
#project-detail[hidden], #project-performance[hidden], .project-detail-tags[hidden] { display: none; }

#project-entry, #project-detail, #project-performance {
  box-sizing: border-box; color: #243a43;
  font: 15px/1.5 "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}
#project-entry {
  anchor-name: --project-entry;
  position: fixed; z-index: 20; bottom: max(2rem, env(safe-area-inset-bottom)); left: 50%;
  transform: translateX(-50%); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  width: min(34rem, calc(100vw - 2rem)); padding: 1rem 1.25rem;
  border: 2px solid #405860; box-shadow: 4px 5px 0 #405860; background: #faf9f3;
  transition: opacity 180ms ease, translate 220ms cubic-bezier(.2,.7,.2,1), display 220ms allow-discrete;
}
#project-entry > div:first-child { min-width: 0; }
#project-entry p { margin: 0 0 .15rem; font-size: 11px; color: #536e70; }
#project-entry strong { font-size: 20px; letter-spacing: -.02em; }
.project-entry-actions { display: flex; align-items: center; gap: .65rem; flex-shrink: 0; }
#project-entry a, #project-entry button, #project-detail a, #project-detail button, #project-performance button {
  min-height: 44px; box-sizing: border-box; font: inherit; touch-action: manipulation; cursor: pointer;
}
#project-entry a, .project-detail-link {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .65rem 1rem; border: 2px solid #405860; background: #66bde6;
  color: #1c3541; text-decoration: none; font-weight: 650; white-space: nowrap;
  transition: background 120ms ease, translate 120ms ease;
}
#project-entry a:hover, .project-detail-link:hover { background: #91d4ec; }
.project-more { border: 0; padding: .65rem .4rem; background: transparent; color: #405860; white-space: nowrap; }
.project-more:hover, .project-more[aria-expanded="true"] { color: #182f39; text-decoration: underline; text-underline-offset: 5px; }
#project-entry a:active, #project-entry button:active, #project-detail button:active, .project-detail-link:active { translate: 0 2px; }
#project-entry :focus-visible, #project-detail :focus-visible, #project-performance :focus-visible { outline: 3px solid #b98016; outline-offset: 4px; }

#project-detail {
  position: fixed; z-index: 25; inset: auto; left: 50%; bottom: calc(max(2rem, env(safe-area-inset-bottom)) + 7rem);
  transform: translateX(-50%); margin: 0; padding: 1.65rem 1.75rem 1.5rem;
  width: min(26rem, calc(100vw - 2rem)); max-height: calc(100dvh - 11rem); overflow-y: auto;
  overscroll-behavior: contain; border: 2px solid #405860; background: #faf9f3; box-shadow: 6px 7px 0 #405860;
  opacity: 0; translate: 0 10px; pointer-events: none;
  transition: opacity 160ms ease, translate 220ms cubic-bezier(.2,.7,.2,1), display 220ms allow-discrete, overlay 220ms allow-discrete;
}
#project-detail:popover-open { opacity: 1; translate: 0 0; pointer-events: auto; }
#project-detail:not([popover]):not([hidden]) { opacity: 1; translate: 0 0; pointer-events: auto; }
#project-detail::backdrop { background: transparent; }
.project-detail-close {
  position: absolute; z-index: 1; right: .45rem; top: .45rem; width: 44px;
  padding: 0; border: 0; background: transparent; color: #536e70; font-size: 27px !important; line-height: 1 !important;
}
.project-detail-close:hover { color: #243a43; }
.project-detail-caption { margin: 0 2rem .5rem 0; font-size: 11px; letter-spacing: .06em; color: #536e70; }
#project-detail h2 { margin: 0 0 .85rem; font-size: 30px; line-height: 1.25; letter-spacing: -.035em; }
#project-detail-description { margin: 0; line-height: 1.85; overflow-wrap: anywhere; }
.project-detail-tags { display: flex; flex-wrap: wrap; gap: .4rem 1rem; list-style: none; margin: 1rem 0 0; padding: 0; font-size: 12px; color: #536e70; }
.project-detail-tags li::before { content: "# "; color: #6f8b8c; }
.project-detail-destination { margin: 1.4rem 0 .7rem; padding-top: 1rem; border-top: 1px solid #d8ded8; font-size: 12px; color: #536e70; overflow-wrap: anywhere; }
.project-detail-link { width: 100%; }
.project-detail-copy { view-transition-name: project-detail-copy; }
::view-transition-group(project-detail-copy) { animation-duration: 180ms; }
::view-transition-old(project-detail-copy), ::view-transition-new(project-detail-copy) { animation-duration: 140ms; }

@supports (bottom: anchor(top)) {
  @media (min-width: 601px) {
    #project-detail { position-anchor: --project-entry; bottom: calc(anchor(top) + 14px); left: anchor(left); transform: none; }
  }
}
@starting-style {
  #project-entry:not([hidden]) { opacity: 0; translate: 0 8px; }
  #project-detail:popover-open { opacity: 0; translate: 0 10px; }
  #project-detail:not([popover]):not([hidden]) { opacity: 0; translate: 0 10px; }
}
#project-entry[hidden] { opacity: 0; translate: 0 8px; }

.project-marker { position: fixed; z-index: 10; transform: translate(-50%, -100%); padding: .4rem .75rem; border: 2px solid #405860; background: #faf9f3; color: #243a43; box-shadow: 2px 3px 0 #405860; font: 13px system-ui, sans-serif; white-space: nowrap; pointer-events: none; }
.project-marker.active { background: #f0d653; }
.project-coordinates { position: fixed; z-index: 30; left: 1rem; top: 1rem; background: #fff; color: #243a43; padding: .5rem; font: 11px monospace; user-select: all; }
.project-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#project-performance { position: fixed; z-index: 35; top: 3.5rem; left: 1rem; max-width: calc(100vw - 2rem); padding: .6rem .75rem; border: 1px solid #405860; background: #faf9f3; font-size: 11px; }
#project-performance output { display: block; white-space: pre-line; font-variant-numeric: tabular-nums; }
#project-performance button { padding: .25rem .5rem; border: 0; background: transparent; color: #243a43; text-decoration: underline; }

@media (max-width: 600px) {
  #project-entry { bottom: max(1.25rem, env(safe-area-inset-bottom)); flex-direction: column; align-items: stretch; gap: .65rem; padding: .85rem 1rem; }
  #project-entry > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
  #project-entry p { margin: 0; }
  .project-entry-actions { justify-content: space-between; }
  #project-detail { bottom: calc(max(1.25rem, env(safe-area-inset-bottom)) + 9rem); padding: 1.4rem; max-height: calc(100dvh - 12rem); }
  #project-detail h2 { font-size: 27px; }
}
@media (max-height: 500px) and (min-width: 601px) {
  #project-detail { max-height: calc(100dvh - 9rem); padding: 1rem 1.4rem; }
  #project-detail h2 { font-size: 24px; margin-bottom: .5rem; }
  .project-detail-destination { margin-top: .75rem; padding-top: .6rem; }
}
@media (prefers-reduced-motion: reduce) {
  #project-entry, #project-detail, #project-entry a, #project-entry button, #project-detail button, .project-detail-link { transition: none; translate: none; }
  ::view-transition-group(project-detail-copy), ::view-transition-old(project-detail-copy), ::view-transition-new(project-detail-copy) { animation: none; }
}