.hh-marks-welcome {
  --mark-light: .14;
  --mark-arch: .25;
  --mark-motes: .08;
  box-sizing: border-box;
  width: min(970px, calc(100% - 28px));
  max-width: 970px;
  max-height: calc(100dvh - 28px);
  margin: auto;
  padding: 0;
  overflow: auto;
  border: 1px solid rgba(211, 236, 200, .34);
  border-radius: 22px;
  background: #0b1a16;
  color: #eff5e9;
  box-shadow: 0 36px 110px rgba(0, 7, 5, .68), inset 0 1px rgba(241, 255, 229, .08);
  font-family: Inter, Arial, sans-serif;
  overscroll-behavior: contain;
  isolation: isolate;
}
.hh-marks-welcome[data-impact="sprout"] { --mark-light: .32; --mark-arch: .4; --mark-motes: .27; }
.hh-marks-welcome[data-impact="grove"] { --mark-light: .54; --mark-arch: .57; --mark-motes: .5; }
.hh-marks-welcome[data-impact="canopy"] { --mark-light: .86; --mark-arch: .78; --mark-motes: .85; border-color: rgba(242, 224, 170, .56); box-shadow: 0 36px 115px rgba(0, 7, 5, .7), 0 0 50px rgba(168, 218, 142, .12); }
.hh-marks-welcome::backdrop { background: rgba(1, 12, 9, .8); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.hh-marks-welcome *, .hh-marks-welcome *::before, .hh-marks-welcome *::after { box-sizing: border-box; }
.hh-marks-welcome button { font: inherit; cursor: pointer; touch-action: manipulation; }
.hh-marks-welcome button:focus-visible { outline: 2px solid #d6f5b7; outline-offset: 3px; }
.hh-marks-welcome__layout { display: grid; grid-template-columns: minmax(0, .93fr) minmax(0, 1.07fr); min-height: 570px; }
.hh-marks-welcome__scene { position: relative; min-height: 570px; overflow: hidden; background-color: #071311; background-image: linear-gradient(180deg, rgba(1, 11, 8, .12), rgba(1, 11, 8, .38)), url('/assets/marks-welcome-portal.webp'); background-size: 100% 100%, 100% auto; background-position: center, 0% 17%; background-repeat: no-repeat; }
.hh-marks-welcome__scene::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(1, 10, 8, .18), transparent 26%, transparent 74%, rgba(1, 10, 8, .2)), linear-gradient(180deg, rgba(1, 10, 8, .13), transparent 38%, rgba(1, 10, 8, .28)); }
.hh-marks-welcome__scene::after { content: ''; position: absolute; inset: 12% 4% 12%; z-index: 1; pointer-events: none; opacity: var(--mark-light); background: radial-gradient(ellipse 40% 40% at 50% 49%, rgba(174, 255, 175, .76), transparent 85%), radial-gradient(ellipse 65% 52% at 50% 48%, rgba(241, 227, 155, .36), transparent 91%); mix-blend-mode: screen; }
.hh-marks-welcome__beam { position: absolute; z-index: 2; left: 50%; top: 16%; width: 2px; height: 69%; background: linear-gradient(transparent, rgba(202, 255, 193, .12) 15%, #d2ffd0 70%, transparent); box-shadow: 0 0 19px 5px rgba(146, 242, 164, .42); opacity: var(--mark-light); transform-origin: center bottom; }
.hh-marks-welcome__arch { position: absolute; z-index: 2; left: 15%; top: 12%; width: 70%; height: 68%; border: 1px solid rgba(202, 247, 184, var(--mark-arch)); border-bottom: 0; border-radius: 49% 49% 0 0 / 33% 33% 0 0; box-shadow: inset 0 0 22px rgba(148, 245, 160, var(--mark-arch)), 0 0 20px rgba(148, 245, 160, var(--mark-arch)); }
.hh-marks-welcome__motes { position: absolute; z-index: 3; inset: 0; opacity: var(--mark-motes); pointer-events: none; background: radial-gradient(circle at 21% 27%, #f1daa1 0 1px, transparent 2px), radial-gradient(circle at 75% 22%, #fff0ba 0 2px, transparent 3px), radial-gradient(circle at 19% 59%, #d9edab 0 1px, transparent 2px), radial-gradient(circle at 83% 63%, #eed998 0 2px, transparent 3px), radial-gradient(circle at 52% 68%, #f9e0a1 0 1px, transparent 2px), radial-gradient(circle at 64% 35%, #e3edaa 0 1px, transparent 2px); }
.hh-marks-welcome__motes::before, .hh-marks-welcome__motes::after { content: ''; position: absolute; width: 9px; height: 15px; border-radius: 0 90% 0 90%; background: linear-gradient(140deg, #e3f1a4, #679c67); box-shadow: 0 1px 10px rgba(164, 229, 127, .4); }
.hh-marks-welcome__motes::before { left: 20%; top: 30%; transform: rotate(-35deg); }
.hh-marks-welcome__motes::after { right: 18%; top: 58%; transform: rotate(135deg); }
.hh-marks-welcome__medals { position: absolute; z-index: 4; left: 11%; right: 11%; top: 22%; bottom: 25%; }
.hh-marks-welcome__medal { position: absolute; left: 50%; top: 50%; width: 83px; aspect-ratio: 1; transform: translate(-50%, -50%); filter: drop-shadow(0 9px 15px rgba(0, 0, 0, .7)) drop-shadow(0 0 18px rgba(168, 230, 140, .28)); }
.hh-marks-welcome__medal img { display: block; width: 100%; height: 100%; object-fit: contain; }
.hh-marks-welcome[data-count="1"] .hh-marks-welcome__medal { width: 124px; }
.hh-marks-welcome[data-count="2"] .hh-marks-welcome__medal:nth-child(1) { left: 28%; }
.hh-marks-welcome[data-count="2"] .hh-marks-welcome__medal:nth-child(2) { left: 72%; }
.hh-marks-welcome[data-count="3"] .hh-marks-welcome__medal:nth-child(1) { top: 17%; }
.hh-marks-welcome[data-count="3"] .hh-marks-welcome__medal:nth-child(2) { left: 25%; top: 73%; }
.hh-marks-welcome[data-count="3"] .hh-marks-welcome__medal:nth-child(3) { left: 75%; top: 73%; }
.hh-marks-welcome[data-count="4"] .hh-marks-welcome__medal:nth-child(odd) { left: 27%; }
.hh-marks-welcome[data-count="4"] .hh-marks-welcome__medal:nth-child(even) { left: 73%; }
.hh-marks-welcome[data-count="4"] .hh-marks-welcome__medal:nth-child(-n+2) { top: 22%; }
.hh-marks-welcome[data-count="4"] .hh-marks-welcome__medal:nth-child(n+3) { top: 77%; }
.hh-marks-welcome[data-count="5"] .hh-marks-welcome__medal:nth-child(1), .hh-marks-welcome[data-count="5"] .hh-marks-welcome__medal:nth-child(4) { left: 25%; }
.hh-marks-welcome[data-count="5"] .hh-marks-welcome__medal:nth-child(2), .hh-marks-welcome[data-count="5"] .hh-marks-welcome__medal:nth-child(5) { left: 75%; }
.hh-marks-welcome[data-count="5"] .hh-marks-welcome__medal:nth-child(-n+2) { top: 16%; }
.hh-marks-welcome[data-count="5"] .hh-marks-welcome__medal:nth-child(3) { top: 49%; }
.hh-marks-welcome[data-count="5"] .hh-marks-welcome__medal:nth-child(n+4) { top: 82%; }
.hh-marks-welcome[data-count="6"] .hh-marks-welcome__medal { width: 69px; }
.hh-marks-welcome[data-count="6"] .hh-marks-welcome__medal:nth-child(1) { top: 6%; }
.hh-marks-welcome[data-count="6"] .hh-marks-welcome__medal:nth-child(2) { left: 23%; top: 32%; }
.hh-marks-welcome[data-count="6"] .hh-marks-welcome__medal:nth-child(3) { left: 77%; top: 32%; }
.hh-marks-welcome[data-count="6"] .hh-marks-welcome__medal:nth-child(4) { left: 23%; top: 70%; }
.hh-marks-welcome[data-count="6"] .hh-marks-welcome__medal:nth-child(5) { left: 77%; top: 70%; }
.hh-marks-welcome[data-count="6"] .hh-marks-welcome__medal:nth-child(6) { top: 96%; }
.hh-marks-welcome__scene-label { position: absolute; z-index: 5; left: 0; right: 0; top: 28px; color: #e9dfb5; font: 700 10px/1.3 Inter, Arial, sans-serif; letter-spacing: .3em; text-align: center; text-shadow: 0 2px 8px #07120f; }
.hh-marks-welcome__content { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 47px 48px; background: radial-gradient(ellipse 65% 40% at 100% 0%, rgba(90, 129, 85, .14), transparent 90%), linear-gradient(145deg, #10231d, #081713 80%); position: relative; }
.hh-marks-welcome__close { position: absolute; top: 15px; right: 17px; display: grid; place-items: center; width: 35px; height: 35px; padding: 0; border: 1px solid rgba(201, 229, 190, .24); border-radius: 50%; background: rgba(5, 24, 17, .72); color: #dde9d7; font-size: 25px !important; line-height: 1; }
.hh-marks-welcome__close:hover { background: rgba(57, 99, 64, .55); }
.hh-marks-welcome__eyebrow { margin: 0 0 18px; color: #bdd8a8; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .23em; }
.hh-marks-welcome h2 { margin: 0; max-width: 440px; color: #f5f6e9; font: 500 clamp(38px, 4vw, 58px)/1.02 var(--font-display, 'Cal Sans'), Inter, sans-serif; letter-spacing: -.05em; overflow-wrap: anywhere; }
.hh-marks-welcome h2:focus { outline: none; }
.hh-marks-welcome h2 em { color: #c7e8ad; font-family: Georgia, serif; font-weight: 400; }
.hh-marks-welcome__description { max-width: 400px; margin: 21px 0 26px; color: #b7c9b6; font-size: 14px; line-height: 1.65; }
.hh-marks-welcome__collection-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 18px; border-top: 1px solid rgba(208, 232, 193, .22); color: #e8ede0; font-size: 12px; font-weight: 700; }
.hh-marks-welcome__collection-heading strong { color: #d9c48e; letter-spacing: .12em; white-space: nowrap; }
.hh-marks-welcome__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; list-style: none; margin: 13px 0 4px; padding: 0; }
.hh-marks-welcome__list li { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 7px; border: 1px solid rgba(203, 226, 194, .14); border-radius: 10px; background: rgba(202, 230, 190, .055); font-size: 11px; font-weight: 700; line-height: 1.3; }
.hh-marks-welcome__list img { flex: 0 0 36px; width: 36px; height: 36px; object-fit: contain; }
.hh-marks-welcome__list span { min-width: 0; overflow-wrap: anywhere; }
.hh-marks-welcome__list small { display: block; margin-top: 3px; color: #aebba7; font-size: 11px; font-weight: 500; }
.hh-marks-welcome__empty { margin: 15px 0 0; color: #a9bda9; font-size: 12px; }
.hh-marks-welcome__rule { margin: 17px 0 0; color: #8fa391; font-size: 11px; line-height: 1.5; }
.hh-marks-welcome__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 13px; margin-top: 28px; }
.hh-marks-welcome__enter { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 18px; border: 1px solid #d9efbd; border-radius: 10px; background: linear-gradient(115deg, #d8efbd, #a6d294); color: #10281a; font-size: 12px !important; font-weight: 800 !important; box-shadow: inset 0 1px rgba(255, 255, 255, .46), 0 8px 22px rgba(129, 198, 114, .16); }
.hh-marks-welcome__enter:hover { background: linear-gradient(115deg, #e6f8ce, #b8dfa4); }
.hh-marks-welcome__skip { min-height: 43px; padding: 0 10px; border: 0; background: transparent; color: #b6c7b5; font-size: 11px !important; }
.hh-marks-welcome__skip:hover { color: #e5f1da; }
.hh-marks-pending { position: fixed; z-index: 9999; left: max(15px, env(safe-area-inset-left)); bottom: max(16px, env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 12px; max-width: min(440px, calc(100vw - 30px)); padding: 12px 14px; border: 1px solid rgba(153, 190, 142, .4); border-radius: 12px; background: #10261e; color: #e6eee3; box-shadow: 0 12px 36px rgba(0, 12, 8, .3); font: 11px/1.45 Inter, Arial, sans-serif; }
.hh-marks-pending button { flex: none; border: 0; background: transparent; color: #c8e8ae; font: 700 11px/1.2 Inter, Arial, sans-serif; cursor: pointer; }
.hh-marks-pending button:last-child { font-size: 19px; font-weight: 400; line-height: 1; }
/* --- Ceremony sequence: settle the room, raise the light, deliver the medals, then speak. --- */
@keyframes hh-marks-rise { from { opacity: 0; transform: translateY(20px) scale(.955); } 70% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes hh-marks-leave { to { opacity: 0; transform: translateY(10px) scale(.975); } }
@keyframes hh-marks-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes hh-marks-backdrop-out { to { opacity: 0; } }
@keyframes hh-marks-light { from { opacity: 0; } to { opacity: var(--mark-light); } }
@keyframes hh-marks-breathe { from { opacity: var(--mark-light); } to { opacity: calc(var(--mark-light) * .68); } }
@keyframes hh-marks-beam { from { opacity: 0; transform: scaleY(.06); } 65% { opacity: var(--mark-light); } to { opacity: var(--mark-light); transform: scaleY(1); } }
@keyframes hh-marks-beam-flicker { from { opacity: var(--mark-light); } to { opacity: calc(var(--mark-light) * .74); } }
@keyframes hh-marks-arch-in { from { opacity: 0; transform: scale(.965); } to { opacity: 1; transform: none; } }
@keyframes hh-marks-motes-drift { from { transform: translateY(4px); } to { transform: translateY(-7px); } }
@keyframes hh-marks-leaf-sway { from { rotate: -6deg; } to { rotate: 7deg; } }
@keyframes hh-marks-arrive {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 30px)) scale(.55); }
  58% { opacity: 1; transform: translate(-50%, calc(-50% - 4px)) scale(1.08); }
  80% { transform: translate(-50%, calc(-50% + 1px)) scale(.985); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes hh-marks-halo { from { opacity: 0; transform: scale(.25); } 35% { opacity: .9; } to { opacity: 0; transform: scale(1.5); } }
@keyframes hh-marks-float { from { transform: translateY(0); } to { transform: translateY(-4px); } }
@keyframes hh-marks-copy { from { opacity: 0; transform: translateY(13px); } to { opacity: 1; transform: none; } }
@keyframes hh-marks-label-in { from { opacity: 0; letter-spacing: .52em; } to { opacity: 1; letter-spacing: .3em; } }
.hh-marks-welcome[open] { animation: hh-marks-rise .58s cubic-bezier(.17, .84, .26, 1) both; }
.hh-marks-welcome[open]::backdrop { animation: hh-marks-backdrop-in .45s ease-out both; }
.hh-marks-welcome.is-closing { animation: hh-marks-leave .22s ease-in both; }
.hh-marks-welcome.is-closing::backdrop { animation: hh-marks-backdrop-out .22s ease-in both; }
.hh-marks-welcome.is-playing .hh-marks-welcome__scene::after { animation: hh-marks-light 1.6s ease-out both, hh-marks-breathe 6.5s ease-in-out 2.4s infinite alternate; }
.hh-marks-welcome.is-playing .hh-marks-welcome__beam { animation: hh-marks-beam 1.3s cubic-bezier(.12, .8, .2, 1) both, hh-marks-beam-flicker 4.8s ease-in-out 1.9s infinite alternate; }
.hh-marks-welcome.is-playing .hh-marks-welcome__arch { animation: hh-marks-arch-in 1.25s cubic-bezier(.2, .7, .2, 1) .12s both; }
.hh-marks-welcome.is-playing .hh-marks-welcome__motes { animation: hh-marks-motes-drift 5.6s ease-in-out .8s infinite alternate; }
.hh-marks-welcome.is-playing .hh-marks-welcome__motes::before { animation: hh-marks-leaf-sway 4.6s ease-in-out infinite alternate; }
.hh-marks-welcome.is-playing .hh-marks-welcome__motes::after { animation: hh-marks-leaf-sway 5.4s ease-in-out 1.1s infinite alternate-reverse; }
.hh-marks-welcome.is-playing .hh-marks-welcome__medal { animation: hh-marks-arrive .92s cubic-bezier(.18, .84, .24, 1) both; animation-delay: calc(.42s + var(--arrival) * .16s); }
.hh-marks-welcome__medal::before { content: ''; position: absolute; inset: -42%; border-radius: 50%; background: radial-gradient(circle, rgba(186, 245, 170, .55), rgba(226, 219, 144, .22) 45%, transparent 70%); opacity: 0; pointer-events: none; }
.hh-marks-welcome.is-playing .hh-marks-welcome__medal::before { animation: hh-marks-halo 1.15s ease-out both; animation-delay: calc(.52s + var(--arrival) * .16s); }
.hh-marks-welcome.is-playing .hh-marks-welcome__medal img { animation: hh-marks-float 4.6s ease-in-out infinite alternate; animation-delay: calc(1.5s + var(--arrival) * .42s); }
.hh-marks-welcome.is-playing .hh-marks-welcome__scene-label { animation: hh-marks-label-in 1.3s cubic-bezier(.2, .7, .2, 1) 1.15s both; }
.hh-marks-welcome.is-playing :is(.hh-marks-welcome__eyebrow, .hh-marks-welcome h2, .hh-marks-welcome__description, .hh-marks-welcome__collection-heading, .hh-marks-welcome__empty, .hh-marks-welcome__rule, .hh-marks-welcome__actions, .hh-marks-welcome__list li) { animation: hh-marks-copy .68s cubic-bezier(.17, .84, .26, 1) both; }
.hh-marks-welcome.is-playing .hh-marks-welcome__eyebrow { animation-delay: .5s; }
.hh-marks-welcome.is-playing h2 { animation-delay: .6s; }
.hh-marks-welcome.is-playing .hh-marks-welcome__description { animation-delay: .74s; }
.hh-marks-welcome.is-playing .hh-marks-welcome__collection-heading { animation-delay: .88s; }
.hh-marks-welcome.is-playing :is(.hh-marks-welcome__list li, .hh-marks-welcome__empty) { animation-delay: calc(.98s + var(--arrival, 0) * .07s); }
.hh-marks-welcome.is-playing .hh-marks-welcome__rule { animation-delay: 1.28s; }
.hh-marks-welcome.is-playing .hh-marks-welcome__actions { animation-delay: 1.38s; }
.hh-marks-welcome__medal { will-change: transform, opacity; }
.hh-marks-welcome__enter { transition: transform .18s cubic-bezier(.2, .7, .2, 1), box-shadow .18s ease, background .18s ease; }
.hh-marks-welcome__enter:hover { transform: translateY(-1px); box-shadow: inset 0 1px rgba(255, 255, 255, .46), 0 10px 28px rgba(129, 198, 114, .3); }
.hh-marks-welcome__skip { transition: color .15s ease; }
@media (max-width: 700px) {
  .hh-marks-welcome { width: min(440px, calc(100% - 16px)); max-height: calc(100dvh - 16px); border-radius: 18px; }
  .hh-marks-welcome__layout { display: block; min-height: 0; }
  .hh-marks-welcome__scene { min-height: 0; height: clamp(220px, 38dvh, 315px); background-position: center, 0% 16%; }
  .hh-marks-welcome__scene-label { top: 15px; font-size: 8px; }
  .hh-marks-welcome__beam { top: 10%; height: 80%; }
  .hh-marks-welcome__arch { top: 9%; height: 77%; }
  .hh-marks-welcome__medals { top: 23%; bottom: 18%; }
  .hh-marks-welcome__medal { width: 53px; }
  .hh-marks-welcome[data-count="1"] .hh-marks-welcome__medal { width: 84px; }
  .hh-marks-welcome[data-count="6"] .hh-marks-welcome__medal { width: 43px; }
  .hh-marks-welcome__content { padding: 25px 25px 28px; }
  .hh-marks-welcome__eyebrow { margin-bottom: 10px; font-size: 9px; }
  .hh-marks-welcome h2 { font-size: clamp(30px, 8vw, 39px); }
  .hh-marks-welcome__description { margin: 12px 0 17px; font-size: 12px; }
  .hh-marks-welcome__actions { margin-top: 18px; }
  .hh-marks-welcome__close { top: 12px; right: 12px; }
}
@media (max-width: 360px) {
  .hh-marks-welcome__scene { height: 190px; }
  .hh-marks-welcome__content { padding: 18px 16px; }
  .hh-marks-welcome__medal { width: 47px; }
  .hh-marks-welcome[data-count="6"] .hh-marks-welcome__medal { width: 38px; }
  .hh-marks-welcome__list { gap: 5px; }
  .hh-marks-welcome__list li { gap: 4px; padding: 4px; font-size: 11px; }
  .hh-marks-welcome__list img { flex-basis: 28px; width: 28px; height: 28px; }
  .hh-marks-welcome__list small { font-size: 11px; }
  .hh-marks-welcome__description { margin: 8px 0 12px; }
  .hh-marks-welcome__rule { margin-top: 10px; }
  .hh-marks-welcome__actions { margin-top: 12px; }
  .hh-marks-pending { gap: 7px; padding: 10px; }
}
@media (max-height: 620px) and (max-width: 700px) { .hh-marks-welcome__scene { height: 190px; } }
@media (prefers-reduced-motion: reduce) {
  .hh-marks-welcome, .hh-marks-welcome::backdrop,
  .hh-marks-welcome *, .hh-marks-welcome *::before, .hh-marks-welcome *::after { animation: none !important; }
  .hh-marks-welcome__enter { transition: none; }
  .hh-marks-welcome__enter:hover { transform: none; }
}
html.low-effects .hh-marks-welcome, html.low-effects .hh-marks-welcome::backdrop,
html.low-effects .hh-marks-welcome *, html.low-effects .hh-marks-welcome *::before, html.low-effects .hh-marks-welcome *::after { animation: none !important; }
@media (prefers-reduced-transparency: reduce) { .hh-marks-welcome::backdrop { backdrop-filter: none; -webkit-backdrop-filter: none; } }
@media (forced-colors: active) { .hh-marks-welcome, .hh-marks-welcome__enter, .hh-marks-welcome__list li, .hh-marks-pending { border: 1px solid CanvasText; } }