/* A small original arcade cabinet invites new players into the guided walkthrough. */
.tutorial-callout {
  --tutorial-lime: #d4fb52;
  position: absolute;
  z-index: 2;
  right: var(--gutter);
  bottom: 48px;
  width: clamp(310px, 24vw, 370px);
  min-height: 142px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 17px 18px 8px;
  border: 1px solid #e0ff87;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(135deg, #202c20f5, #0d120ff5 70%);
  box-shadow: 0 12px 45px #0008, 0 0 13px #d4fb5266, 0 0 36px #c6ff382e, inset 0 0 19px #d4fb5214;
  text-decoration: none;
  isolation: isolate;
}
.tutorial-callout::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(ellipse at 13% 55%, #d4fb521c, transparent 58%);
  pointer-events: none;
}
.tutorial-callout::after {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: -1;
  border: 1px solid #e8ffb0;
  border-radius: inherit;
  box-shadow: 0 0 4px #f1ffd1, 0 0 17px #d4fb526b, 0 0 43px #baff322b, inset 0 0 8px #d4fb5233;
  pointer-events: none;
}
/* A traveling electric streak crosses the cabinet, lettering and arrow together. */
.tutorial-callout__surge {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}
.tutorial-callout__surge::before,
.tutorial-callout__surge::after {
  content: '';
  position: absolute;
  top: -35%;
  bottom: -35%;
  left: 0;
  width: 46%;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-150%) skewX(-17deg);
}
.tutorial-callout__surge::before {
  background: linear-gradient(90deg, transparent 0%, #caff3210 25%, #dfff7866 43%, #f8ffe9dc 50%, #dfff7859 57%, #caff3210 76%, transparent 100%);
  filter: blur(.5px);
  mix-blend-mode: screen;
}
.tutorial-callout__surge::after {
  background: repeating-linear-gradient(0deg, transparent 0 8px, #edffae9c 8px 9px, transparent 9px 15px, #e5ff8833 15px 18px);
  mask-image: linear-gradient(90deg, transparent 15%, #000 48%, transparent 82%);
  mix-blend-mode: screen;
}
.tutorial-callout__art { display: block; flex: 0 0 84px; margin-top: -16px; margin-bottom: -8px; }
.tutorial-cabinet { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 0 4px #d4fb5266) drop-shadow(0 0 12px #baff3238); }
.tutorial-callout__copy { display: grid; gap: 7px; min-width: 0; }
.tutorial-callout__eyebrow { color: #e0ff98; text-shadow: 0 0 9px #d4fb526b; font-size: 10px; font-weight: 750; letter-spacing: .17em; line-height: 1.5; }
.tutorial-callout__copy strong { color: #f8ffe9; text-shadow: 0 0 3px #eeffc477, 0 0 15px #d4fb5259; font-family: var(--display-font); font-size: clamp(31px, 2.7vw, 46px); font-weight: 800; line-height: .98; letter-spacing: -.025em; white-space: nowrap; }
.tutorial-callout__dot { color: var(--tutorial-lime); text-shadow: 0 0 7px #d4fb52, 0 0 18px #baff3280; }
.tutorial-callout__caption { display: flex; align-items: center; gap: 7px; color: #e0e7d9; font-size: 12px; line-height: 1.5; }
.tutorial-callout__caption svg { flex: 0 0 16px; color: var(--tutorial-lime); }
.tutorial-callout__arrow { display: grid; place-items: center; margin-left: auto; color: var(--tutorial-lime); filter: drop-shadow(0 0 5px #d4fb5270); }
.tutorial-callout:focus-visible { outline: 3px solid var(--tutorial-lime); outline-offset: 5px; }
.tutorial-cabinet__joystick { transform-box: fill-box; transform-origin: 50% 100%; }
.tutorial-cabinet__button { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  /* A short surge followed by a quiet interval, without flashing the whole card. */
  .tutorial-callout__surge::before { animation: tutorial-electric-surge 6s 600ms linear infinite; }
  .tutorial-callout__surge::after { animation: tutorial-electric-surge 6s 760ms linear infinite; }
  /* One gentle electric flutter, then the neon stays steadily illuminated. */
  .tutorial-callout::after { animation: tutorial-neon-power-on 1.8s 300ms ease-out both; transition: opacity 220ms ease; }
  .tutorial-cabinet { animation: tutorial-cabinet-arrive 800ms 300ms cubic-bezier(.16,1,.3,1) both; }
  .tutorial-cabinet__joystick { animation: tutorial-joystick 1.1s 1.2s 2; }
  .tutorial-cabinet__button { animation: tutorial-button 700ms 1.5s 3; }
  .tutorial-cabinet__scan { animation: tutorial-screen-scan 1.4s 700ms 2; }
  .tutorial-callout__arrow .icon { transition: transform 220ms ease; }
}
@media (hover: hover) {
  .tutorial-callout:hover { color: #fff; border-color: #efffca; background: linear-gradient(135deg, #293a23fa, #0d120ffa 70%); box-shadow: 0 12px 45px #0008, 0 0 17px #d4fb5280, 0 0 42px #c6ff323b, inset 0 0 22px #d4fb521c; }
  .tutorial-callout:hover .tutorial-callout__arrow .icon { transform: translateX(3px); }
}
@keyframes tutorial-cabinet-arrive { from { transform: translateY(9px) rotate(-5deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes tutorial-joystick { 0%, 100% { transform: rotate(0); } 28% { transform: rotate(-14deg); } 66% { transform: rotate(11deg); } }
@keyframes tutorial-button { 0%, 65%, 100% { transform: scale(1); fill: #182217; } 30% { transform: scale(.82); fill: #f4ffd8; } }
@keyframes tutorial-screen-scan { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: .6; } 70% { opacity: .2; } 100% { transform: translateY(18px); opacity: 0; } }
@keyframes tutorial-neon-power-on {
  0%, 18% { opacity: .78; transform: none; }
  34% { opacity: 1; transform: none; }
  48% { opacity: .82; transform: translateX(1px); }
  64%, 100% { opacity: 1; transform: none; }
}
@keyframes tutorial-electric-surge {
  0% { transform: translateX(-150%) skewX(-17deg); opacity: 0; }
  3% { opacity: .85; }
  10% { transform: translateX(60%) skewX(-17deg); opacity: .95; }
  12% { transform: translateX(78%) skewX(-14deg); opacity: .7; }
  15% { transform: translateX(132%) skewX(-17deg); opacity: .95; }
  23% { transform: translateX(270%) skewX(-17deg); opacity: .85; }
  26%, 100% { transform: translateX(285%) skewX(-17deg); opacity: 0; }
}
@media (max-width: 1180px) {
  .market-hero--tutorial { display: block; }
  .market-hero--tutorial .hero-copy { padding-bottom: 24px; }
  .tutorial-callout { position: relative; right: auto; bottom: auto; width: min(350px, calc(100% - var(--gutter) * 2)); margin: 0 var(--gutter) 36px; min-height: 112px; padding-block: 13px; }
  .tutorial-callout__art { flex-basis: 69px; }
  .tutorial-callout__copy strong { font-size: 36px; }
}
@media (max-width: 760px) {
  /* Bring both hero actions into the first phone screen without shrinking the headline. */
  .market-hero--tutorial .hero-copy { padding-top: 18px; padding-bottom: 22px; }
  .market-hero--tutorial .hero-copy p { margin-block: 16px; }
  .tutorial-callout { gap: 12px; min-height: 104px; padding-block: 12px; margin-bottom: 20px; border-radius: 12px; }
  .tutorial-callout__art { flex-basis: 62px; }
  .tutorial-callout__copy { gap: 5px; }
  .tutorial-callout__copy strong { font-size: 35px; }
  .tutorial-callout__eyebrow { font-size: 10px; }
  .tutorial-callout__caption { font-size: 12px; }
}
@media (max-width: 760px) and (max-height: 720px) {
  /* Safari's visible area can be short while its address and bottom toolbars are open. */
  .market-hero--tutorial .hero-copy { padding-top: 12px; padding-bottom: 20px; }
  .market-hero--tutorial .hero-copy p { margin-block: 12px; }
  .tutorial-callout { min-height: 100px; padding-block: 10px; }
}
@media (max-width: 374px) {
  .tutorial-callout { gap: 8px; padding-right: 12px; }
  .tutorial-callout__art { flex-basis: 55px; }
  .tutorial-callout__copy strong { font-size: 31px; }
  .tutorial-callout__caption { font-size: 11px; gap: 5px; }
  .tutorial-callout__arrow .icon { width: 18px; height: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .tutorial-callout, .tutorial-callout *, .tutorial-callout::before, .tutorial-callout::after { animation: none !important; transition: none !important; }
  .tutorial-callout:hover .tutorial-callout__arrow .icon { transform: none; }
  .tutorial-callout__surge { display: none; }
}