/* v436 sit/sit-after.css: sit/library-v263.css + assets/css/kindness-tip.css + assets/css/shop-soon.css + assets/css/i18n.css + sit/a2hs.css */
/* v263 Meditation library: magical gold on black. Length pills first, five
   moment tags with gold line icons, cards with a faint gold edge glow and a
   slow shimmer on hover or tap. A quiet fade between lengths. Motion is
   subtle, off under prefers-reduced-motion, and nothing here animates during
   a sit (the library is hidden while a sit plays). */
.lib-len-row { grid-template-columns: repeat(5, 1fr); gap: 0.4rem; }
.lib-len-btn {
  position: relative;
  overflow: hidden;
  min-height: 52px;
  padding: 0.35rem 0.2rem;
  border: 1px solid rgba(232, 200, 120, 0.55);
  border-radius: 999px;
  background: radial-gradient(120% 140% at 50% 0%, rgba(232, 200, 120, 0.14), rgba(0, 0, 0, 0) 70%), #000;
  color: #f4ecd8;
  font-family: var(--display);
  font-size: 1.15rem;
  line-height: 1.05;
  box-shadow: 0 0 10px rgba(232, 200, 120, 0.16), inset 0 0 8px rgba(232, 200, 120, 0.08);
  transition: box-shadow 0.4s ease, border-color 0.4s ease;
}
.lib-len-btn small { font-family: inherit; font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(232, 200, 120, 0.75); }
.lib-len-btn:hover { border-color: #e8c878; box-shadow: 0 0 14px rgba(232, 200, 120, 0.3), inset 0 0 8px rgba(232, 200, 120, 0.12); }
.lib-len-btn[aria-pressed="true"] {
  background: linear-gradient(180deg, #f3dc9a, #e8c878 55%, #c9a24e);
  border-color: #f3dc9a;
  color: #120d02;
  box-shadow: 0 0 18px rgba(232, 200, 120, 0.45);
}
.lib-len-btn[aria-pressed="true"] small { color: rgba(18, 13, 2, 0.7); }
.lib-len-btn[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 250, 230, 0.55) 50%, transparent 70%);
  transform: translateX(-120%);
  animation: lib-shimmer 4.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes lib-shimmer { 0%, 55% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }

.lib-chip { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; min-width: 44px; padding: 0.45rem 0.95rem 0.45rem 0.75rem; }
.lib-doors {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.65rem;
  margin: 0 0 1.15rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.lib-doors::-webkit-scrollbar { display: none; }
.lib-door {
  flex: 1 0 auto;
  min-height: 56px;
  min-width: max(44px, 9.5rem);
  padding: 0.8rem 0.7rem;
  border: 1px solid #f3dc9a;
  border-radius: 16px;
  background: #000;
  color: #f8e7a8;
  font-family: var(--display, Georgia, serif);
  font-size: 1.28rem;
  line-height: 1.15;
  cursor: pointer;
}
.lib-door[aria-pressed="true"] {
  background: linear-gradient(180deg, #f8e7a8, #e8c878 55%, #c9a24e);
  border-color: #f8e7a8;
  color: #120d02;
}
.lib-len[data-door="life"] .lib-chip[data-lib-shelf="work"] { display: none; }
.lib-len[data-door="work"] .lib-chip[data-lib-shelf="life"] { display: none; }
.lib-chip[data-lib-overflow] { display: none; }
.lib-chip-row { display: flex; align-items: center; gap: 0.7rem; }
.lib-chip-row .lib-chips { flex: 1 1 auto; min-width: 0; gap: 0.35rem; }
.lib-more { flex: 0 0 auto; min-width: 44px; min-height: 44px; }
/* Visual pill is ~35px. The extra padding is an invisible 44px hit area. */
.lib-chip {
  position: relative;
  z-index: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  box-sizing: border-box;
  height: 44px;
  min-height: 44px;
  min-width: 44px;
  padding: 4px 0.85rem;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #f8e7a8;
  font-size: 0.9rem;
  line-height: 1;
}
.lib-chip::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  top: 50%;
  height: 35px;
  transform: translateY(-50%);
  border: 1px solid #f3dc9a;
  border-radius: 999px;
  background: #000;
  box-shadow: none;
  pointer-events: none;
}
.lib-chip[aria-pressed="true"] { color: #120d02; background: transparent; border-color: transparent; }
.lib-chip[aria-pressed="true"]::before {
  border-color: #f8e7a8;
  background: linear-gradient(180deg, #f8e7a8, #e8c878 55%, #c9a24e);
}
.lib-chip-icon { width: 14px; height: 14px; flex: 0 0 auto; fill: none; stroke: #e8c878; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
.lib-chip[aria-pressed="true"] .lib-chip-icon { stroke: #120d02; }

.lib-list { transition: opacity 0.18s ease; }
.lib-list.lib-fading { opacity: 0; }
.lib-card {
  position: relative;
  overflow: hidden;
  border-color: rgba(232, 200, 120, 0.34);
  background: radial-gradient(140% 120% at 0% 0%, rgba(232, 200, 120, 0.07), rgba(0, 0, 0, 0) 60%), #050505;
  box-shadow: 0 0 12px rgba(232, 200, 120, 0.1), inset 0 0 0 1px rgba(232, 200, 120, 0.05);
  transition: box-shadow 0.5s ease, border-color 0.5s ease;
}
.lib-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 35%, rgba(243, 220, 154, 0.12) 50%, transparent 65%);
  transform: translateX(-130%);
  pointer-events: none;
}
.lib-card:hover,
.lib-card:active,
.lib-card:focus-within { border-color: rgba(232, 200, 120, 0.7); box-shadow: 0 0 18px rgba(232, 200, 120, 0.22); }
.lib-card:hover::after,
.lib-card:active::after { transform: translateX(130%); transition: transform 1.8s ease; }
.lib-hour { margin-top: 1.1rem; padding: 0.9rem 0.9rem 0.6rem; border: 1px solid rgba(232, 200, 120, 0.4); border-radius: 14px; background: radial-gradient(120% 100% at 50% 0%, rgba(232, 200, 120, 0.1), rgba(0, 0, 0, 0) 70%), #030303; box-shadow: 0 0 14px rgba(232, 200, 120, 0.12); }
.lib-hour[hidden] { display: none; }
.lib-hour-title { margin: 0; color: #e8c878; font-family: var(--display); font-size: 1.15rem; }
.lib-hour-line, .lib-hour-soon { margin: 0.2rem 0 0.5rem; color: rgba(244, 236, 216, 0.7); font-size: 0.85rem; }
.lib-hour-soon { font-style: italic; color: rgba(232, 200, 120, 0.8); }

@media (prefers-reduced-motion: reduce) {
  .lib-len-btn[aria-pressed="true"]::after { animation: none; display: none; }
  .lib-card::after { display: none; }
  .lib-len-btn, .lib-card, .lib-list, .lib-door, .lib-chip { transition: none; }
  .lib-group-title::before, .lib-group-line::after, .row-scroll-orb { animation: none; }
  .lib-group-title::before { display: none; }
  .lib-group-line { background: rgba(243, 220, 154, 0.8); }
  .row-scroll-track { scroll-behavior: auto; }
  .row-scroll-orb { opacity: 1; filter: none; }
  .lib-more-panel { transition: none; }
}
/* While a sit plays, nothing in the library moves. */
html:has(.is-playing) .lib-len-btn::after,
html:has(.is-playing) .lib-card::after,
html:has(.sit-now.is-live) .lib-len-btn::after,
html:has(.sit-now.is-live) .lib-card::after,
html:has(.is-playing) .lib-group-title::before,
html:has(.is-playing) .lib-group-line::after,
html:has(.sit-now.is-live) .lib-group-title::before,
html:has(.sit-now.is-live) .lib-group-line::after { animation: none; display: none; }
html:has(.is-playing) .lib-card,
html:has(.is-playing) .lib-list,
html:has(.sit-now.is-live) .lib-card,
html:has(.sit-now.is-live) .lib-list { transition: none; }

/* v263 also carries the v259 L2 lotus cards (from draft #201). */
/* v259 — two tall lotus cards (L2 Open bloom). Thin gold lines, flat. */
body.page-sit .sit-quiet-row > .sit-quiet-links.mc-cards,
.sit-quiet-links.mc-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 18px auto 8px;
  max-width: 28rem;
  width: 100%;
  text-align: left;
}
.mc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  text-align: left;
  min-height: 284px;
  min-width: 44px;
  width: 100%;
  margin: 0;
  padding: 18px 14px 14px;
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 16px;
  color: #f3ead2;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  background: radial-gradient(120% 80% at 50% 20%, #241b0d 0%, #110d07 55%, #060504 100%);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.mc-card:hover { border-color: rgba(212, 175, 55, 0.7); }
.mc-card:focus-visible {
  outline: 2px solid #d4af37;
  outline-offset: 3px;
}
.mc-card[aria-expanded="true"] { border-color: #d4af37; }
.mc-art {
  position: absolute;
  left: 50%;
  top: -6px;
  transform: translateX(-50%);
  width: 176px;
  height: 176px;
  max-width: none;
  opacity: 0.62;
  pointer-events: none;
}
.mc-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, transparent 42%, rgba(6, 5, 4, 0.88) 64%, #060504 100%);
}
.mc-card > span { position: relative; z-index: 2; }
.mc-card .mc-icon {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 62px;
  transform: translateX(-50%);
  width: 42px;
  height: 42px;
  fill: none;
  stroke: #f0d27a;
  stroke-width: 1.1;
  background: radial-gradient(circle, #0e0b06 55%, transparent 72%);
  border-radius: 50%;
  padding: 4px;
}
.mc-eyebrow { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(212, 175, 55, 0.8); }
.mc-title { font-family: "Cormorant Garamond", Georgia, serif; font-size: 23px; line-height: 1.08; color: #f6edd3; margin: 4px 0 6px; font-weight: 500; }
.mc-line { font-family: Georgia, serif; font-style: italic; font-size: 13px; color: #d4af37; margin: 0 0 12px; line-height: 1.3; }
.mc-card > .mc-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  border-top: 1px solid rgba(212, 175, 55, 0.18);
  padding-top: 10px;
}
.mc-meta { font-size: 11px; color: rgba(243, 234, 210, 0.65); letter-spacing: 0.02em; line-height: 1.3; }
.mc-arrow {
  flex: none;
  width: 30px;
  height: 30px;
  border: 1px solid #d4af37;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #d4af37;
  font-size: 15px;
  transition: transform 0.2s ease;
}
.mc-card:hover .mc-arrow,
.mc-card:focus-visible .mc-arrow { transform: translateX(2px); }

@media (prefers-reduced-motion: reduce) {
  .mc-card,
  .mc-arrow { transition: none; }
  .mc-card:hover .mc-arrow,
  .mc-card:focus-visible .mc-arrow { transform: none; }
}

/* v264: two bubbles side by side, always visible. "A quiet hello" keeps its
   filled look; "How it works" is the outline sibling with a hollow ring. */
.sit-intro { flex-wrap: wrap; gap: 0.5rem; }
.sit-intro[hidden] { display: flex !important; }
.sit-howto-bubble {
  background: transparent;
  background-image: none;
  border-color: rgba(236, 184, 62, 0.42);
  color: rgba(236, 184, 62, 0.9);
}
.sit-howto-bubble::before {
  background: transparent;
  border: 1px solid rgb(236, 184, 62);
  width: 0.42rem;
  height: 0.42rem;
  box-sizing: border-box;
}
.sit-intro-bubble[aria-expanded="true"] { border-color: rgba(246, 231, 184, 0.85); color: #f6e7b8; }
.sit-intro-card { flex-basis: 100%; }

/* v280: breathing room in the length view. About 24px between the intro
   line, HOW LONG DO YOU HAVE? and the length pills, so nothing touches at 390px. */
#all-sits > .sit-invite { margin-bottom: 24px; }
#all-sits .lib-len { margin-top: 0; }
#all-sits .lib-len-title { margin: 0 0 24px; }

/* v289: category groups in each length view. Small gold caps with the tag
   icon, no boxes or dividers. Each card edge carries a faint category tint,
   still mainly gold. */
.lib-group-head { list-style: none; margin: 2.05rem 0 0.55rem; padding: 0; width: 100%; }
.lib-group-head:first-child { margin-top: 0.35rem; }
.lib-group-title {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  margin: 0;
  color: #f8e7a8;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.lib-group-title::before {
  content: "";
  position: absolute;
  inset: -0.2rem 0;
  background: linear-gradient(100deg, transparent 0%, transparent 36%, rgba(255, 244, 214, 0.72) 50%, transparent 64%, transparent 100%);
  background-size: 220% 100%;
  background-position: 120% 0;
  mix-blend-mode: screen;
  pointer-events: none;
  animation: lib-head-sweep 4.8s ease-in-out infinite;
  animation-delay: var(--lib-sweep, 0s);
}
.lib-group-label { position: relative; }
.lib-group-line {
  position: relative;
  flex: 1 1 auto;
  height: 1px;
  margin-left: 0.35rem;
  overflow: hidden;
  background: rgba(232, 200, 120, 0.55);
}
.lib-group-line::after {
  content: "";
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 34%;
  left: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 246, 214, 0.95), transparent);
  transform: translateX(-130%);
  animation: lib-line-sweep 4.8s ease-in-out infinite;
  animation-delay: var(--lib-sweep, 0s);
}
@keyframes lib-head-sweep {
  0%, 8% { background-position: 130% 0; opacity: 0; }
  38% { opacity: 1; }
  52% { background-position: 40% 0; opacity: 1; }
  78%, 100% { background-position: -40% 0; opacity: 0; }
}
@keyframes lib-line-sweep {
  0%, 8% { transform: translateX(-140%); opacity: 0; }
  40% { opacity: 1; }
  70% { transform: translateX(280%); opacity: 0.35; }
  100% { transform: translateX(280%); opacity: 0; }
}
.lib-group-icon { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* v443: the next chip peeks, cut off at the track edge. The arrow is a light
   hint in the gap just past that edge, on doors and on chips. The 44px hit
   target is clipped to the hint so it never covers chip text. */
.row-scroll { position: relative; min-width: 0; }
.lib-chip-row > .row-scroll { flex: 1 1 auto; min-width: 0; }
.row-scroll-track { scroll-behavior: smooth; }
.row-scroll.is-more-right .row-scroll-track { margin-inline-end: 0; }
.row-scroll.is-more-left .row-scroll-track { margin-inline-start: 0; }
.row-scroll-cue {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(243, 220, 154, 0.72);
  cursor: pointer;
}
.row-scroll-cue-right { right: -11px; transform: translateY(-50%); clip-path: inset(0 0 0 33px); }
.row-scroll-cue-left { left: -11px; transform: translateY(-50%); clip-path: inset(0 33px 0 0); }
.row-scroll-cue-right .row-scroll-orb { left: auto; right: 0; width: 11px; height: 11px; transform: translateY(-50%); }
.row-scroll-cue-left .row-scroll-orb { left: 0; right: auto; width: 11px; height: 11px; transform: translateY(-50%); }
.row-scroll-cue[hidden] { display: none; }
.row-scroll-cue:focus-visible {
  outline: 2px solid #f3dc9a;
  outline-offset: 2px;
}
.row-scroll-orb {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid rgba(243, 220, 154, 0.45);
  box-shadow: none;
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: row-chevron-shimmer 3.4s ease-in-out infinite;
}
.row-scroll-orb svg { width: 9px; height: 9px; }
.row-scroll-cue-left .row-scroll-orb svg { transform: scaleX(-1); }
.row-scroll-fade {
  position: absolute;
  top: 50%;
  width: 44px;
  height: 48px;
  transform: translateY(-50%);
  pointer-events: none;
}
.row-scroll-cue-right .row-scroll-fade {
  left: auto;
  right: 0;
  width: 16px;
  background: linear-gradient(to left, rgba(0, 0, 0, 0.2), transparent);
}
.row-scroll-cue-left .row-scroll-fade {
  right: auto;
  left: 0;
  width: 16px;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.2), transparent);
}
/* More opens every category for this door, in wrapping pills under the row. */
.lib-more-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.42s ease;
}
.lib-more-panel.is-open { grid-template-rows: 1fr; }
.lib-more-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 0.45rem 0.5rem;
  min-height: 0;
  overflow: hidden;
  padding: 0.15rem 0 0;
}
.lib-more-panel.is-open .lib-more-pills { padding-top: 0.85rem; padding-bottom: 0.15rem; }
.lib-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 0;
  padding: 4px 0.1rem;
  border: 0;
  background: transparent;
  color: #f8e7a8;
  font: inherit;
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
}
.lib-pill-face {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  height: 35px;
  min-height: 35px;
  padding: 0 0.68rem;
  border: 1px solid #f3dc9a;
  border-radius: 999px;
  background: #000;
  box-shadow: none;
}
.lib-pill .lib-chip-icon { width: 13px; height: 13px; }
.lib-pill[aria-pressed="true"] { color: #120d02; }
.lib-pill[aria-pressed="true"] .lib-pill-face {
  border-color: #f8e7a8;
  background: linear-gradient(180deg, #f8e7a8, #e8c878 55%, #c9a24e);
}
.lib-pill[aria-pressed="true"] .lib-chip-icon { stroke: #120d02; }
.lib-pill:focus-visible { outline: 2px solid #f3dc9a; outline-offset: 2px; }
@keyframes row-chevron-shimmer {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 0.9; }
}
.lib-card[data-lib-tint="everyday"] { box-shadow: 0 0 12px rgba(240, 190, 105, 0.13), inset 0 0 0 1px rgba(232, 200, 120, 0.05); }
.lib-card[data-lib-tint="kindness"] { box-shadow: 0 0 12px rgba(224, 168, 150, 0.12), inset 0 0 0 1px rgba(232, 200, 120, 0.05); }
.lib-card[data-lib-tint="quiet"] { box-shadow: 0 0 12px rgba(178, 196, 214, 0.11), inset 0 0 0 1px rgba(232, 200, 120, 0.05); }
.lib-card[data-lib-tint="work"] { box-shadow: 0 0 12px rgba(196, 146, 92, 0.13), inset 0 0 0 1px rgba(232, 200, 120, 0.05); }
.lib-card[data-lib-tint="builders"] { box-shadow: 0 0 12px rgba(178, 204, 150, 0.11), inset 0 0 0 1px rgba(232, 200, 120, 0.05); }
/* v292: Traders, soft amber, still mostly gold. */
.lib-card[data-lib-tint="traders"] { box-shadow: 0 0 12px rgba(226, 170, 84, 0.13), inset 0 0 0 1px rgba(232, 200, 120, 0.05); }
.lib-card[data-lib-tint="gamers"] { box-shadow: 0 0 12px rgba(190, 168, 216, 0.11), inset 0 0 0 1px rgba(232, 200, 120, 0.05); }

/* v295: "Any length" is a small centered gold text link under the circles.
   Range headings in the Any length view are light and quiet. */
.lib-any-line { margin: 0.7rem 0 0; text-align: center; }
.lib-any {
  min-height: 44px;
  padding: 0 0.9rem;
  border: 0;
  background: none;
  color: #e8c878;
  font: inherit;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  text-decoration: underline;
  text-decoration-color: rgba(232, 200, 120, 0.45);
  text-underline-offset: 4px;
  cursor: pointer;
}
.lib-any[aria-pressed="true"] { text-decoration-color: #e8c878; font-weight: 600; }
.lib-range-head { margin-top: 1.4rem; }
.lib-range-title { margin: 0; color: rgba(232, 200, 120, 0.72); font-family: inherit; font-size: 0.72rem; font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; }
.lib-range-unit { font-size: 0.62rem; }
/* v295: "Under 3" stays on one line with a smaller MIN below, in every language. */
.lib-len-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.lib-len-num { display: block; white-space: nowrap; }
.lib-len-btn small { display: block; }
.lib-len-btn[data-lib-len="under-3"] .lib-len-num { font-size: 0.74rem; letter-spacing: 0; }

/* v302 home cards (mockup home-cards-v1): Start here wears the dawn lotus
   mandala; Meditation library the night mandala (moons, stars, temple) on
   indigo-black. The mandalas carry their own centre icon and sit quietly
   behind the text under a dark fade, so the words stay readable. Nothing moves. */
.mc-card.mc-start,
.mc-card.mc-lib { min-height: 300px; }
.mc-card.mc-start {
  border-color: rgba(232, 170, 110, 0.45);
  background: radial-gradient(ellipse 120% 45% at 50% 0%, rgba(214, 120, 80, 0.28), rgba(120, 60, 30, 0.1) 55%, transparent 80%), linear-gradient(#150c08, #0b0806 60%, #080605);
}
.mc-card.mc-lib {
  border-color: rgba(201, 162, 74, 0.45);
  background: radial-gradient(ellipse 110% 50% at 50% 25%, rgba(40, 36, 100, 0.35), transparent 75%), linear-gradient(#0a0918, #07060f 60%, #060509);
}
.mc-start .mc-art,
.mc-lib .mc-art {
  top: 0;
  left: 0;
  transform: none;
  width: 100%;
  height: auto;
  aspect-ratio: 450 / 430;
  opacity: 0.55;
}
.mc-start .mc-icon,
.mc-lib .mc-icon { display: none; }
.mc-card.mc-start::after { background: linear-gradient(180deg, transparent 0%, transparent 30%, rgba(11, 8, 6, 0.9) 52%, #0b0806 100%); }
.mc-card.mc-lib::after { background: linear-gradient(180deg, transparent 0%, transparent 30%, rgba(7, 6, 15, 0.9) 52%, #07060f 100%); }
/* The one bright label: a thin gold pill with sparkles and a soft glow. */
.mc-start .mc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 6px;
  border: 1px solid rgba(255, 216, 107, 0.55);
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 216, 107, 0.06), rgba(255, 216, 107, 0.16), rgba(255, 216, 107, 0.06));
  box-shadow: 0 0 10px rgba(255, 200, 90, 0.25);
  color: #ffd86b;
  font-weight: 700;
  font-size: 8.5px;
  letter-spacing: 0.04em;
  text-shadow: 0 0 8px rgba(255, 210, 100, 0.7);
  max-width: 100%;
  line-height: 1.25;
}
.mc-start .mc-eyebrow::before,
.mc-start .mc-eyebrow::after { content: "\2726"; font-size: 7px; color: #fff1c2; }
.mc-lib .mc-eyebrow { color: #b8994e; letter-spacing: 0.16em; }
.mc-start .mc-title,
.mc-lib .mc-title { color: #f6ecd6; }
.mc-start .mc-line,
.mc-lib .mc-line { color: #ddb350; }
.mc-start .mc-meta,
.mc-lib .mc-meta { color: #cfc5b2; }
.mc-start .mc-arrow,
.mc-lib .mc-arrow { border-color: #d6ab4e; color: #e6bd5c; }

/* v316: brighter home mandalas on every width. The art is fully lit with a
   soft gold glow and more contrast; the dark fade starts lower so more of it
   shows, and the library's indigo is a cleaner, richer violet with warm gold
   light at the centre. Text sits on the same dark base, so it stays legible. */
.mc-start .mc-art,
.mc-lib .mc-art {
  opacity: 0.95;
  filter: brightness(1.35) contrast(1.25) saturate(1.15) drop-shadow(0 0 6px rgba(255, 200, 90, 0.45));
}
.mc-card.mc-start {
  background: radial-gradient(ellipse 85% 45% at 50% 28%, rgba(255, 196, 100, 0.2), transparent 70%), radial-gradient(ellipse 120% 45% at 50% 0%, rgba(224, 128, 80, 0.34), rgba(120, 60, 30, 0.1) 55%, transparent 80%), linear-gradient(#170d08, #0b0806 60%, #080605);
}
.mc-card.mc-lib {
  background: radial-gradient(ellipse 80% 42% at 50% 28%, rgba(255, 200, 110, 0.14), transparent 70%), radial-gradient(ellipse 115% 55% at 50% 22%, rgba(92, 64, 190, 0.42), rgba(40, 26, 96, 0.18) 55%, transparent 80%), linear-gradient(#100b26, #08061a 60%, #060509);
}
.mc-card.mc-start::after { background: linear-gradient(180deg, transparent 0%, transparent 38%, rgba(11, 8, 6, 0.88) 58%, #0b0806 100%); }
.mc-card.mc-lib::after { background: linear-gradient(180deg, transparent 0%, transparent 38%, rgba(8, 6, 26, 0.88) 58%, #08061a 100%); }

/* v316: the path pill already says "Your DogeDharma path"; the heading under it
   stays for screen readers (it names the section) but is no longer shown. */
.journey > .journey-title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Kindness tip jar. Black and gold. Shared by /sit and /kindness. */
.kind-tip {
  margin: 0.85rem 0 0.35rem;
  padding: 0.85rem 0.8rem 0.75rem;
  border: 1px solid rgba(212, 175, 55, 0.35);
  background: #000;
  color: #f4efe6;
  scroll-margin-top: 5rem;
}

.kind-tip .eyebrow {
  margin: 0 0 0.2rem;
  color: #d4af37;
  font-family: Outfit, system-ui, sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.kind-tip-title {
  margin: 0 0 0.35rem;
  color: #f4efe6;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.7rem;
  font-weight: 500;
  line-height: 1.15;
}

.kind-tip-lead,
.kind-tip-note,
.kind-tip-thanks {
  margin: 0.35rem 0;
  color: rgba(244, 239, 230, 0.78);
  font-family: Outfit, system-ui, sans-serif;
  font-size: 0.95rem;
  line-height: 1.45;
}

.kind-tip-amounts {
  display: flex;
  gap: 0.45rem;
  margin: 0.75rem 0 0.45rem;
}

.kind-tip-amounts .btn,
.kind-tip-open,
.kind-tip-sheet .btn,
.kind-tip-uri {
  min-height: 48px;
  min-width: 48px;
}

.kind-tip-amounts .btn {
  flex: 1;
}

.kind-tip-amounts .btn.is-selected {
  border-color: #d4af37;
  color: #140e04;
  background: linear-gradient(180deg, #f0d78c 0%, #d4af37 55%, #a7842f 100%);
}

.kind-tip-custom {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin: 0.35rem 0 0.5rem;
  color: rgba(244, 239, 230, 0.78);
  font-family: Outfit, system-ui, sans-serif;
  font-size: 0.85rem;
}

.kind-tip-custom input {
  min-height: 48px;
  padding: 0.4rem 0.7rem;
  border: 1px solid rgba(212, 175, 55, 0.45);
  background: #000;
  color: #f4efe6;
  font-family: Outfit, system-ui, sans-serif;
  font-size: 1rem;
}

.kind-tip-cad {
  min-height: 1.2rem;
  margin: 0.15rem 0 0.55rem;
  color: #d4af37;
  font-family: Outfit, system-ui, sans-serif;
  font-size: 0.92rem;
}

.kind-tip-open {
  width: 100%;
}

.kind-tip .signature {
  display: block;
  width: 100%;
  margin: 0.75rem 0 0;
  color: #d4af37;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 1.15rem;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  white-space: normal;
  opacity: 1;
  justify-content: flex-start;
}

.kind-tip-keepsake {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.8rem;
}

.kind-tip-keepsake[hidden] {
  display: none !important;
}

.kind-tip-seal {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: grid;
  place-items: center;
  border: 1px solid #d4af37;
  border-radius: 50%;
  color: #140e04;
  background: linear-gradient(180deg, #f0d78c 0%, #d4af37 55%, #a7842f 100%);
  font-family: Outfit, system-ui, sans-serif;
  font-size: 1.15rem;
  line-height: 1;
}

.kind-tip-kicker {
  margin: 0;
  color: #d4af37;
  font-family: Outfit, system-ui, sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.kind-tip-sheet[hidden] {
  display: none !important;
}

.kind-tip-sheet {
  position: fixed;
  z-index: 80;
  inset: 0;
  display: grid;
  align-items: end;
  justify-items: center;
  padding: 0.75rem;
  background: rgba(0, 0, 0, 0.72);
}

.kind-tip-sheet-card {
  width: min(100%, 28rem);
  max-height: calc(100% - 0.5rem);
  overflow: auto;
  padding: 1rem 0.9rem 0.9rem;
  border: 1px solid #d4af37;
  background: #000;
  color: #f4efe6;
}

.kind-tip-sheet-amount {
  margin: 0.2rem 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 2.4rem;
  line-height: 1;
}

.kind-tip-qr {
  display: grid;
  place-items: center;
  margin: 0.6rem 0;
  background: #fff;
}

.kind-tip-qr svg {
  display: block;
  width: 11rem;
  height: 11rem;
}

.kind-tip-address {
  display: block;
  width: 100%;
  margin: 0.35rem 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(244, 239, 230, 0.86);
  font-family: Outfit, system-ui, sans-serif;
  font-size: 0.82rem;
  line-height: 1.35;
  text-align: left;
  word-break: break-all;
  cursor: pointer;
}

button.kind-tip-address[hidden] {
  display: none !important;
}

.kind-tip-uri {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0.45rem 0;
  color: #d4af37;
  font-family: Outfit, system-ui, sans-serif;
  font-size: 0.85rem;
  text-decoration: none;
}

.kind-tip-sheet-actions {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-top: 0.55rem;
}

.kind-tip-sheet-actions .btn {
  width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .kind-tip-sheet,
  .kind-tip-seal,
  .kind-tip .btn {
    animation: none !important;
    transition: none !important;
  }
}

/* v309: one-tap tip states. Quiet, gold on black; 44px tap targets. */
.kind-tip-status {
  margin: 0.6rem 0 0;
  min-height: 1.4em;
  color: var(--gold-soft, #e8c878);
  font-size: 0.95rem;
}
.kind-tip-status[data-state="rejected"],
.kind-tip-status[data-state="timeout"],
.kind-tip-status[data-state="error"] {
  color: var(--ink-soft, #cfc6b2);
}
.kind-tip-tx,
.kind-tip-reveal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0 0.75rem;
  color: var(--gold, #d4af37);
  background: none;
  border: 0;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.kind-tip-tx[hidden],
.kind-tip-reveal[hidden],
.kind-tip-status[hidden] {
  display: none;
}

/* Shop "Coming soon": Kobe at the house doors. Toggled by /assets/js/shop-state.js.
   With no .shop-open on <html>, live shop parts hide and the Coming soon panel shows. */
html:not(.shop-open) [data-shop-live] { display: none !important; }
html.shop-open [data-shop-soon] { display: none !important; }

.shop-soon {
  box-sizing: border-box;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  text-align: center;
  color: #f4efe6;
}

.shop-soon-art {
  position: relative;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid rgba(232, 200, 120, 0.42);
  border-radius: 2px;
  background: #000;
  aspect-ratio: 1280 / 616;
}

.shop-soon-art picture,
.shop-soon-art img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  object-fit: cover;
  object-position: 50% 60%;
}

.shop-soon-copy {
  padding: 1.6rem 1rem 0.4rem;
}

.shop-soon-kicker {
  margin: 0 0 0.55rem;
  font-family: "Outfit", system-ui, sans-serif;
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #E8C878;
}

.shop-soon-title {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(2.2rem, 6vw, 3.1rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0.01em;
  color: #E8C878;
  text-shadow: none;
}

.shop-soon-rule {
  display: block;
  width: 3.25rem;
  height: 1px;
  margin: 1rem auto;
  background: rgba(232, 200, 120, 0.6);
}

.shop-soon-line {
  max-width: 24rem;
  margin: 0 auto;
  font-family: "Outfit", system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(244, 239, 230, 0.86);
}

.shop-soon-sign {
  margin: 0.9rem 0 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.05rem;
  font-style: italic;
  font-weight: 400;
  color: rgba(232, 200, 120, 0.9);
}

/* /shop: the panel stands in for the hero. */
.shop-soon--page {
  padding: 2rem clamp(1.15rem, 4vw, 2rem) 4.5rem;
}

/* Homepage chapter and /sit tab sit inside narrower columns. */
.shop-soon--inline {
  margin-top: 1rem;
}

.shop-soon--inline .shop-soon-title {
  font-size: 2.2rem;
}

@media (max-width: 720px) {
  .shop-soon-art { aspect-ratio: 680 / 616; }
  .shop-soon--page { padding: 1rem 1.15rem 3.5rem; }
}

/* Language picker and i18n helpers. Black and gold, quiet. */
.i18n-picker { position: relative; display: inline-flex; align-items: center; margin-inline-start: auto; margin-inline-end: 0.35rem; z-index: 60; }
.i18n-globe {
  display: inline-flex; align-items: center; gap: 0.3rem; min-height: 34px; padding: 0.2rem 0.6rem;
  background: transparent; color: #d4af37; border: 1px solid rgba(212,175,55,0.45); border-radius: 999px;
  font: 400 0.72rem/1 Outfit, system-ui, sans-serif; letter-spacing: 0.06em; cursor: pointer;
}
.i18n-globe:hover, .i18n-globe:focus-visible { border-color: #d4af37; box-shadow: 0 0 10px rgba(212,175,55,0.25); outline: none; }
.i18n-menu {
  position: absolute; inset-block-start: calc(100% + 6px); inset-inline-end: 0; margin: 0; padding: 0.35rem 0;
  list-style: none; min-width: 10.5rem; background: #050505; border: 1px solid rgba(212,175,55,0.5);
  border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.6);
}
.i18n-menu li {
  display: flex; align-items: center; min-height: 44px; padding: 0 0.9rem;
  color: #f2e6c4; font-size: 0.95rem; cursor: pointer; text-align: start;
  white-space: nowrap;
}
.i18n-menu li:hover, .i18n-menu li:focus-visible { background: rgba(212,175,55,0.12); outline: none; }
.i18n-menu li[aria-selected="true"] { color: #d4af37; }
.i18n-menu li[aria-selected="true"]::after { content: " ✓"; }
/* v376: English gloss is smaller and a warm gray. #b5a88e on #050505 is about 8.7:1. */
.i18n-native { flex: none; }
.i18n-dot { flex: none; margin-inline: 0.4rem; color: #b5a88e; font-weight: 300; line-height: 1; }
.i18n-en { flex: none; color: #b5a88e; font-size: 0.8em; font-weight: 400; letter-spacing: 0.01em; }
/* v382: All languages stays last in the open list and links to the hub. */
.i18n-menu li.i18n-hub { display: flex; padding: 0; margin-top: 0.15rem; border-top: 1px solid rgba(212, 175, 55, 0.35); }
.i18n-menu a.i18n-all {
  display: flex; align-items: center; flex: 1 1 auto; box-sizing: border-box;
  min-height: 44px; min-width: 44px; width: 100%; padding: 0 0.9rem;
  color: #d4af37; text-decoration: none;
}
.i18n-menu a.i18n-all:hover, .i18n-menu a.i18n-all:focus-visible { background: rgba(212, 175, 55, 0.12); outline: none; }
@media (prefers-reduced-motion: reduce) { .i18n-menu a.i18n-all { transition: none; animation: none; } }
/* The open list is wider than the Language row. Grow the menu to the left so the longest gloss stays on one line inside the phone. */
.sit-menu:has(.i18n-menu:not([hidden])) { width: max-content; max-width: calc(100vw - 1.2rem); }
.sit-menu:has(.i18n-menu:not([hidden])) .sit-menu-lang,
.sit-menu:has(.i18n-menu:not([hidden])) .i18n-picker { width: auto; max-width: none; }
.sit-menu:has(.i18n-menu:not([hidden])) .i18n-menu { width: max-content; min-width: 100%; max-width: none; }
.i18n-motto-sub { display: block; margin-block-start: 0.25em; font-size: 0.62em; font-style: normal; letter-spacing: 0.02em; color: rgba(242,230,196,0.72); text-transform: none; }
.i18n-audio-note {
  display: inline-block; margin: 0.5rem 0 0; padding: 0.15rem 0.6rem; font-size: 0.72rem; color: rgba(212,175,55,0.9);
  border: 1px solid rgba(212,175,55,0.3); border-radius: 999px;
}
.i18n-audio-note[hidden] { display: none; }

/* Script fallbacks: Latin display fonts first, then a font that has the script. */
html[lang="hi"] body, html[lang="hi"] button, html[lang="hi"] input, html[lang="hi"] textarea { font-family: Outfit, "Noto Sans Devanagari", "Nirmala UI", "Mangal", sans-serif; }
html[lang="pa"] body, html[lang="pa"] button, html[lang="pa"] input, html[lang="pa"] textarea { font-family: Outfit, "Noto Sans Gurmukhi", "Raavi", "Nirmala UI", sans-serif; }
html[lang="zh-Hans"] body, html[lang="zh-Hans"] button, html[lang="zh-Hans"] input, html[lang="zh-Hans"] textarea { font-family: Outfit, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", "Source Han Sans SC", "WenQuanYi Micro Hei", sans-serif; }
html[lang="ja"] body, html[lang="ja"] button, html[lang="ja"] input, html[lang="ja"] textarea { font-family: Outfit, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "Meiryo", "Noto Sans CJK JP", "Noto Sans JP", "Source Han Sans JP", sans-serif; }
html[lang="hi"] h1, html[lang="hi"] h2, html[lang="hi"] h3 { font-family: "Cormorant Garamond", "Noto Sans Devanagari", serif; }
html[lang="pa"] h1, html[lang="pa"] h2, html[lang="pa"] h3 { font-family: "Cormorant Garamond", "Noto Sans Gurmukhi", serif; }
html[lang="zh-Hans"] h1, html[lang="zh-Hans"] h2, html[lang="zh-Hans"] h3 { font-family: "Cormorant Garamond", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", "Source Han Sans SC", serif; }
html[lang="ja"] h1, html[lang="ja"] h2, html[lang="ja"] h3 { font-family: "Cormorant Garamond", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "Meiryo", "Noto Sans CJK JP", "Noto Sans JP", serif; }
/* Scripts without case or tracking conventions: drop uppercase and wide letter-spacing. */
html:is([lang="hi"],[lang="pa"]) body { line-height: 1.65; }


/* v466: Best with headphones is a note, not a control. The words are a little
   larger, the icon is big enough to notice, and a slow glow rests on the icon.
   No outline, fill, or pointer, so it does not read as a button. */
.sit-headphones {
  flex: 0 0 auto;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  box-sizing: border-box;
  width: max-content;
  max-width: 100%;
  margin: 0.7rem auto 0.2rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: #f6e3a8;
  font-family: var(--body);
  font-size: 1.02rem;
  font-weight: 300;
  letter-spacing: 0.015em;
  line-height: 1.2;
  cursor: default;
}
.sit-now .actions > .sit-howto-line { flex: 1 0 100%; }
.sit-headphones-icon {
  flex: none;
  width: 28px;
  height: 28px;
  fill: none;
  stroke: #d4af37;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: none;
}
@media (prefers-reduced-motion: no-preference) {
  .sit-headphones-icon { animation: sit-headphones-glow 3.8s ease-in-out infinite; }
}
@keyframes sit-headphones-glow {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(232, 200, 120, 0)); }
  50% { filter: drop-shadow(0 0 5px rgba(246, 220, 150, 0.95)); }
}
@media (prefers-reduced-motion: reduce) {
  .sit-headphones-icon { animation: none; filter: none; }
}

/* v383: header language pill. Slim dark gold capsule, left of Connect wallet.
   html[data-lang-in-header] is set by LANG_IN_HEADER in i18n.js. Removing that
   attribute (or flipping the constant) restores the in-menu globe. */
html[data-lang-in-header] .sit-menu-lang { display: none !important; }
html[data-lang-in-header] .i18n-header-host { margin: 0; flex: 0 0 auto; min-width: 44px; z-index: 70; }
html[data-lang-in-header] .sit-header > .i18n-header-host { margin-left: auto; margin-right: 0.35rem; }
html[data-lang-in-header] .sit-header .wallet-chip { margin-left: 0; }
html[data-lang-in-header] .sit-header .sit-menu-toggle { margin-left: 0.35rem; }
html[data-lang-in-header] .header-actions .i18n-header-host { margin: 0; }
/* The site header's Connect wallet moves into the bar so the pill can sit on its left.
   It stays a compact 44px control, not the full-width phone-menu row. */
html[data-lang-in-header] .header-actions > [data-dogeos-connect] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  flex: 0 0 auto;
  width: auto;
  height: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0 0.75rem;
  border: 1px solid rgba(228, 190, 92, 0.9);
  border-radius: 999px;
  background: transparent;
  color: #f3e6c4;
  font-family: Outfit, system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1;
  text-transform: none;
  text-align: center;
  white-space: nowrap;
}
html[data-lang-in-header] .header-actions > [data-dogeos-connect]:hover,
html[data-lang-in-header] .header-actions > [data-dogeos-connect]:focus-visible {
  border-color: #e8c878;
  color: #f3e6c4;
}
@media (max-width: 980px) {
  html[data-lang-in-header] .nav .dd-share { width: 100%; justify-content: center; }
}
@media (max-width: 720px) {
  html[data-lang-in-header] .header-actions > [data-dogeos-connect] {
    padding: 0 0.55rem;
    font-size: 0.72rem;
    letter-spacing: 0;
  }
}
/* v421: a little lighter beside the wallet chip. The button stays 44px tall
   (the tap target). The painted capsule is 32px, the same painted height as
   the wallet chip, with slightly less padding and a slightly smaller face.
   Weight stays 400 so the name stays easy to read. */
html[data-lang-in-header] .i18n-header-pill {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.32rem;
  width: auto;
  max-width: none;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0 0.65rem 0 0.42rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #f3e6c4;
  font-family: Outfit, "Noto Sans Gurmukhi", "Noto Sans KR", "Nanum Gothic", "Noto Sans SC", "Noto Sans Devanagari", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "Meiryo", "Noto Sans", system-ui, sans-serif;
  font-size: 0.86rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1;
  text-transform: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  box-shadow: none;
}
html[data-lang-in-header] .i18n-header-pill::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  top: calc(50% - 16px);
  height: 32px;
  box-sizing: border-box;
  border: 1px solid rgba(212, 175, 55, 0.78);
  border-radius: 999px;
  background: #0c0b09;
  box-shadow: inset 0 1px 0 rgba(243, 226, 168, 0.08);
  pointer-events: none;
}
html[data-lang-in-header] .i18n-header-pill:hover::before,
html[data-lang-in-header] .i18n-header-pill:focus-visible::before {
  border-color: #e8c878;
  box-shadow: inset 0 1px 0 rgba(243, 226, 168, 0.12), 0 0 14px rgba(212, 175, 55, 0.16);
}
html[data-lang-in-header] .i18n-header-pill:focus-visible {
  outline: none;
}
html[data-lang-in-header] .i18n-header-pill:focus-visible::before {
  outline: 2px solid rgba(243, 226, 168, 0.95);
  outline-offset: 2px;
}
html[data-lang-in-header] .i18n-header-pill .i18n-fine-globe {
  position: relative;
  z-index: 1;
  display: block;
  flex: none;
  width: 16px;
  height: 16px;
  color: #e8c878;
  transform-box: fill-box;
  transform-origin: center;
  filter: drop-shadow(0 0 3px rgba(232, 200, 120, 0.62));
}
html[data-lang-in-header] .i18n-header-pill .i18n-code { display: none; }
html[data-lang-in-header] .i18n-name-slot {
  position: relative;
  z-index: 1;
  display: inline-grid;
  align-items: center;
}
html[data-lang-in-header] .i18n-name,
html[data-lang-in-header] .i18n-name-sizer {
  grid-area: 1 / 1;
  white-space: nowrap;
}
html[data-lang-in-header] .i18n-name-sizer { visibility: hidden; }
html[data-lang-in-header] .i18n-name { transition: opacity 0.9s ease; }
html[data-lang-in-header] .i18n-header-pill::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  top: calc(50% - 16px);
  height: 32px;
  border-radius: 999px;
  background: linear-gradient(105deg, transparent 36%, rgba(243, 226, 168, 0.2) 50%, transparent 64%);
  background-size: 220% 100%;
  background-repeat: no-repeat;
  background-position: 130% 0;
  pointer-events: none;
}
html[data-lang-in-header] .i18n-header-host .i18n-menu {
  z-index: 80;
  box-sizing: border-box;
  width: max-content;
  max-width: calc(100vw - 16px);
}
/* v442: the open list stays inside the screen. It is still aligned to the
   pill, and i18n.js shifts it so both edges keep an 8px gutter. Rows wrap
   only when a name is wider than that gutter. */
html[data-lang-in-header] .i18n-header-host .i18n-menu li {
  white-space: normal;
  max-width: 100%;
}
html[data-lang-in-header] .i18n-header-host .i18n-menu .i18n-native,
html[data-lang-in-header] .i18n-header-host .i18n-menu .i18n-en {
  flex: 0 1 auto;
  min-width: 0;
}
html[data-lang-in-header] .i18n-header-pill.is-globe-only {
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  justify-content: center;
  gap: 0;
}
html[data-lang-in-header] .i18n-header-pill.is-globe-only::before,
html[data-lang-in-header] .i18n-header-pill.is-globe-only::after {
  left: calc(50% - 16px);
  right: auto;
  width: 32px;
}
html[data-lang-in-header] .i18n-header-pill.is-globe-only .i18n-name-slot { display: none; }
@media (max-width: 720px) {
  /* v394: Connect wallet no longer shares this bar, so the language pill
     keeps a quiet gap in the seat that button used, just left of the menu. */
  html[data-lang-in-header] .header-actions { gap: 0.75rem; }
  html[data-lang-in-header] .site-header { gap: 0.45rem; }
  html[data-lang-in-header] .i18n-header-pill {
    gap: 0.28rem;
    padding: 0 0.5rem 0 0.36rem;
    font-size: 0.84rem;
  }
  html[data-lang-in-header] .sit-header .i18n-header-pill {
    gap: 0.22rem;
    padding: 0 0.4rem 0 0.3rem;
    font-size: 0.76rem;
  }
  html[data-lang-in-header] .i18n-header-pill .i18n-fine-globe { width: 15px; height: 15px; }
}
@media (prefers-reduced-motion: no-preference) {
  html[data-lang-in-header] .i18n-header-pill .i18n-fine-globe {
    animation: i18n-globe-quarter 2.6s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }
  html[data-lang-in-header] .i18n-header-pill:hover::after,
  html[data-lang-in-header] .i18n-header-pill:focus-visible::after {
    animation: i18n-pill-shimmer 1.25s ease;
  }
}
@media (prefers-reduced-motion: reduce) {
  html[data-lang-in-header] .i18n-name { transition: none; }
  html[data-lang-in-header] .i18n-header-pill .i18n-fine-globe { animation: none; }
  html[data-lang-in-header] .i18n-header-pill::after { content: none; animation: none; }
}
@keyframes i18n-globe-quarter { from { transform: rotate(0deg); } to { transform: rotate(90deg); } }
@keyframes i18n-pill-shimmer { from { background-position: 130% 0; } to { background-position: -30% 0; } }

/* v321: Add to Home Screen. Black and gold, a thin gold outline, 44px. */
.a2hs-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 1.1rem;
  border: 1px solid rgba(212, 175, 55, 0.7);
  border-radius: 999px;
  background: transparent;
  color: #e6c46a;
  font: inherit;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.a2hs-pill:hover, .a2hs-pill:focus-visible { border-color: #f3d27a; color: #f3d27a; }
.a2hs-pill:focus-visible, .a2hs-later:focus-visible, .a2hs-close:focus-visible { outline: 2px solid #f3d27a; outline-offset: 2px; }
.a2hs-pill[hidden], .a2hs-after[hidden], .a2hs-sheet[hidden] { display: none !important; }
.a2hs-after { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.4rem; margin-top: 1.2rem; }
.a2hs-later { min-height: 44px; padding: 0 0.8rem; border: 0; background: transparent; color: #a8987a; font: inherit; font-size: 0.72rem; cursor: pointer; }
.a2hs-sheet { position: fixed; inset: 0; z-index: 200; display: flex; align-items: flex-end; justify-content: center; padding: 1rem; background: rgba(0, 0, 0, 0.6); }
.a2hs-card { position: relative; width: 100%; max-width: 22rem; padding: 1.4rem 1.2rem 1.1rem; border: 1px solid rgba(212, 175, 55, 0.5); border-radius: 18px; background: #050403; color: #f1e6cc; text-align: center; animation: a2hs-rise 0.25s ease-out; }
.a2hs-sheet .a2hs-card .a2hs-title { margin: 0.4rem 2.4rem 0.9rem; line-height: 1.25; white-space: normal; text-wrap: balance; font-family: var(--display, serif); font-weight: 400; font-size: 1.15rem; color: #f6ecd6; }
.a2hs-title:focus { outline: none; }
.a2hs-steps { margin: 0 0 1rem; padding: 0; list-style: none; text-align: left; }
.a2hs-steps li { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0; font-size: 0.86rem; }
.a2hs-ico { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid rgba(212, 175, 55, 0.45); border-radius: 10px; }
.a2hs-ico svg, .a2hs-close svg { fill: none; stroke: #e6c46a; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.a2hs-close { position: absolute; top: 0.35rem; right: 0.35rem; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; }
.a2hs-done { width: 100%; }
.sit-menu .a2hs-pill { font-size: 0.66rem; }
@keyframes a2hs-rise { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .a2hs-card { animation: none; }
  .a2hs-pill { transition: none; }
}

/* v474: library cards on phones. Tag, title, length and the description span the whole card;
   Together, Play and the paw sit on their own row underneath, so titles never break mid-word. */
.lib-list .lib-card,
.lib-list .lib-card:has(.fav-paw),
html.together-on .lib-list .lib-card {
  grid-template-columns: minmax(0, 1fr);
  gap: 0.55rem;
}
.lib-list .lib-card > div:not(.sit-actions) { grid-column: 1 / -1; min-width: 0; width: auto; }
.lib-list .lib-card > .sit-actions,
.lib-list .lib-card > .lib-play,
.lib-list .lib-card > .fav-paw { grid-column: 1 / -1; justify-self: end; }