/* tablet-hint.v2.css -- with tablet-hint.v2.js: the "Try switching views."
 * note above the tablet's top right, its arrow curving down to the view
 * selector in the picture. The landing's italic serif (the hero's "Buy it
 * first."), the page's ink, a drawn-in arrow that bobs once a while.
 * v2: the note sits lower and further left, and the arrow is 100px tall so its
 * tip meets the Grid button (x 0.89 of the picture, 58px under the bar).
 * Served max-age=604800: never edit in place, ship a new name. */
#interface .ss-hint {
  position: absolute; right: 9.9%; top: -40px; z-index: 5;
  display: flex; align-items: flex-start; gap: 4px;
  pointer-events: none; color: hsl(var(--fg));
  opacity: 0; transform: translateY(8px);
  transition: opacity .5s ease, transform .5s ease;
}
#interface .ss-hint.is-on { opacity: 1; transform: none; }
#interface .ss-hint.is-off { opacity: 0; transform: translateY(-4px); transition: opacity .35s ease, transform .35s ease; }
#interface .ss-hint-t {
  /* !important with the id: type-geist.css puts Geist on "#root *" with !important */
  font-family: var(--serif-cursive, "Instrument Serif", Georgia, "Times New Roman", serif) !important;
  font-style: italic !important; font-weight: 400; font-size: 23px; line-height: 1;
  letter-spacing: -.01em; white-space: nowrap; margin-top: 2px;
}
#interface .ss-hint-a { width: 60px; height: 100px; flex: none; margin-top: 4px; overflow: visible; }
#interface .ss-hint-p { stroke-dasharray: 260; stroke-dashoffset: 260; }
#interface .ss-hint-h { opacity: 0; }
#interface .ss-hint.is-on .ss-hint-p { animation: ss-hint-draw .7s ease-out .15s forwards; }
#interface .ss-hint.is-on .ss-hint-h { animation: ss-hint-head .25s ease-out .8s forwards; }
#interface .ss-hint.is-on .ss-hint-a { animation: ss-hint-bob 2.4s ease-in-out 1.2s infinite; }
@keyframes ss-hint-draw { to { stroke-dashoffset: 0; } }
@keyframes ss-hint-head { to { opacity: 1; } }
@keyframes ss-hint-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) {
  #interface .ss-hint { transition: none; }
  #interface .ss-hint-p { stroke-dashoffset: 0; animation: none !important; }
  #interface .ss-hint-h { opacity: 1; animation: none !important; }
  #interface .ss-hint.is-on .ss-hint-a { animation: none; }
}
@media (max-width: 768px) { #interface .ss-hint { display: none; } }