@font-face {
  font-family: "Timeless Serif";
  src: url("assets/fonts/TimelessSerif-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Timeless Sans";
  src: url("assets/fonts/TimelessSans-SansRegular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Timeless Sans";
  src: url("assets/fonts/TimelessSans-SansMedium.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
:root {
  color-scheme: light;
  font-family: "Timeless Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #202124;
  background: #fff;
  --ease: cubic-bezier(.32, .72, 0, 1);
  --move: 420ms;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --panel-width: clamp(340px, 31vw, 480px);
}
* { box-sizing: border-box; }
body { margin: 0; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; font: inherit; }
button, .visit { touch-action: manipulation; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
button:focus, a:focus { outline: none; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.collection { position: relative; width: 100%; min-height: 600px; height: 100svh; overflow: hidden; }
.stage { position: absolute; inset: 0; overflow: hidden; }
.app-icon {
  position: absolute; left: 0; top: 0; width: 256px; height: 256px;
  background: none; border: 0; padding: 0; border-radius: 60px;
  transform-origin: 50% 50%;
  transition: transform var(--move) var(--ease), opacity 240ms ease;
}
.artwork { display: block; width: 100%; height: 100%; transition: transform 160ms var(--ease-out); }
.artwork img { display: block; width: 100%; height: 100%; border-radius: 24%; user-select: none; }
.placeholder .artwork { background: #fff; border-radius: 24%; }
.placeholder svg { display: block; width: 100%; height: 100%; overflow: visible; }
.placeholder rect { fill: #fff; stroke: #d5d6da; stroke-width: calc(1.5px * var(--label-scale, 1)); stroke-dasharray: calc(.5px * var(--label-scale, 1)) calc(5px * var(--label-scale, 1)); stroke-linecap: round; }
.placeholder text { fill: #cccdd1; font-size: 64px; font-weight: 300; text-anchor: middle; dominant-baseline: middle; }
.tooltip {
  position: absolute; left: 50%; bottom: calc(100% + 28px);
  border: 1px solid #ececef; border-radius: 999px;
  padding: 8px 14px; background: #f7f7f8; font-size: 14px; white-space: nowrap;
  opacity: 0; transform: translate(-50%, 6px) scale(var(--label-scale, 1)); transform-origin: 50% 100%; pointer-events: none;
  transition: opacity 160ms ease, transform 160ms var(--ease);
}
.app-icon:focus-visible .tooltip { opacity: 1; transform: translate(-50%, 0) scale(var(--label-scale, 1)); }
.app-icon:active .artwork { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .app-icon:hover { z-index: 10 !important; }
  .app-icon:hover .artwork { transform: translateY(-5px) rotate(-1deg) scale(1.025); }
  .app-icon:hover .tooltip { opacity: 1; transform: translate(-50%, 0) scale(var(--label-scale, 1)); }
  .collection.is-open .app-icon.is-selected:hover .artwork { transform: scale(1.015); }
  .app-icon:hover:active .artwork, .collection.is-open .app-icon.is-selected:hover:active .artwork { transform: scale(.97); }
  .queue-nav button:hover { background: #eaeaec; }
  a:hover { color: #007aff; }
}
.details {
  position: absolute; z-index: 20; top: 12px; right: 12px; bottom: 12px;
  width: var(--panel-width); background: rgb(247 247 248 / .96); border: 1px solid #efeff1;
  border-radius: 20px; padding: clamp(32px, 4vw, 64px); overflow: auto;
  opacity: 0; transform: translateX(calc(100% + 16px)); pointer-events: none;
  transition: transform 240ms var(--ease), opacity 180ms ease;
  display: flex; flex-direction: column; justify-content: space-between;
}
.is-open .details { transform: translate(0, 0); opacity: 1; pointer-events: auto; transition-duration: 360ms, 240ms; }
.details-content { opacity: 0; transform: translateY(12px); transition: opacity 120ms ease, transform 160ms var(--ease-out); }
.is-open .details-content { opacity: 1; transform: translateY(0); transition-duration: 220ms, 280ms; transition-delay: 90ms; }
.is-open .details-content.is-changing { opacity: 0; transform: translateY(6px); transition-duration: 100ms; transition-delay: 0ms; }
.is-open .details-content.is-switching { transition-delay: 0ms; }
h2 { margin: 0; font-family: "Timeless Serif", Georgia, serif; font-size: clamp(36px, 4vw, 56px); font-weight: 400; line-height: 1.1; letter-spacing: -.015em; }
.description { margin: 26px 0 44px; color: #72747a; font-size: clamp(18px, 1.65vw, 24px); line-height: 1.5; letter-spacing: -.025em; }
dl { margin: 0 0 36px; font-size: 14px; }
dl div { display: flex; justify-content: space-between; gap: 16px; padding: 18px 0; border-bottom: 1px solid #e5e5e8; }
dt { color: #909298; }
dd { margin: 0; text-align: right; }
.visit { display: inline-flex; align-items: center; gap: 28px; background: #202124; color: #fff; padding: 14px 20px; border-radius: 999px; font-size: 15px; font-weight: 500; transition: transform 160ms var(--ease); }
.visit:active { transform: scale(.97); }
.visit:hover { color: #fff; background: #3b3c40; }
.back { position: absolute; z-index: 30; top: 24px; left: 24px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 99px; padding: 0; background: #f7f7f8; opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity 120ms ease, transform 160ms var(--ease-out); }
.is-open .back { opacity: 1; transform: translateY(0); pointer-events: auto; transition-delay: 80ms; }
.back:active { transform: scale(.97); transition-delay: 0ms; }
.back svg, .queue-nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.queue-nav { position: absolute; z-index: 25; left: calc((100% - var(--panel-width) - 24px) / 2); bottom: 28px; opacity: 0; transform: translate(-50%, 8px); pointer-events: none; transition: opacity 120ms ease, transform 160ms var(--ease-out); display: flex; align-items: center; background: #f6f6f7; border-radius: 99px; padding: 4px; }
.is-open .queue-nav { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; transition-delay: 100ms; }
.queue-nav button { width: 44px; height: 40px; background: none; border: 0; border-radius: 99px; display: grid; place-items: center; transition: transform 120ms var(--ease-out); }
.queue-nav button:active { transform: scale(.95); }
.signature { position: absolute; z-index: 10; bottom: 32px; left: 50%; text-align: center; transform: translateX(-50%); transition: opacity 200ms ease; }
.signature p { font-family: "Timeless Serif", Georgia, serif; font-size: 24px; font-weight: 400; letter-spacing: -.015em; margin: 0 0 9px; }
.is-open .signature { opacity: 0; pointer-events: none; }
.is-open .app-icon .tooltip { opacity: 0; }
.no-script { position: absolute; top: 18px; width: 100%; padding: 18px; text-align: center; background: #f7f7f8; font-size: 16px; }
.no-script a { text-decoration: underline; }
.collection.instant * { transition-duration: 0ms !important; transition-delay: 0ms !important; }
@media (max-width: 900px) {
  :root { --panel-width: 100%; }
  .collection { min-height: 640px; --canvas-height: clamp(260px, 38svh, 340px); }
  .details { top: var(--canvas-height); left: 12px; right: 12px; bottom: 12px; width: auto; padding: clamp(24px, 4vw, 36px); border-radius: 20px; transform: translateY(calc(100% + 16px)); }
  .description { margin: 16px 0 20px; font-size: 18px; }
  h2 { font-size: 36px; }
  dl { margin-bottom: 22px; }
  dl div { padding: 14px 0; font-size: 16px; }
  .signature { bottom: 28px; }
  .back { left: 16px; top: 16px; width: 48px; height: 48px; }
  .queue-nav { left: 50%; bottom: auto; top: calc(var(--canvas-height) - 64px); }
  .queue-nav button { width: 48px; height: 48px; }
  .visit { min-height: 48px; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, .is-open .details, .is-open .details-content { transition-duration: 0ms !important; transition-delay: 0ms !important; }
}