.smlo-offer { position: relative; isolation: isolate; margin-top: 32px; padding: 30px 34px 26px; border: 1px solid #333147; border-radius: 24px; color: #333147; background: #dad4f9; }
.smlo-offer::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: url('assets/smlo/faded-dot-pattern.png') center bottom / cover no-repeat; mix-blend-mode: multiply; opacity: .14; pointer-events: none; animation: smlo-pattern-breathe 6s ease-in-out infinite !important; }
@keyframes smlo-pattern-breathe { 0%,100% { opacity: .14; } 50% { opacity: .26; } }
.smlo-offer-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.smlo-offer-heading .p2-label { margin: 0 0 10px; color: #5367a1; }
.smlo-offer-meta { display: flex; flex: 0 0 auto; flex-direction: column; align-items: flex-end; gap: 8px; }
.smlo-offer-meta .p2-open { position: static; color: var(--ink); }
.smlo-offer h3 { margin: 0; font-size: clamp(32px,4vw,52px); line-height: 1.05; letter-spacing: -.045em; }
.smlo-pack-tag { flex-shrink: 0; font: 11px 'DM Mono',monospace; border: 1px solid #33314760; border-radius: 99px; padding: 9px 12px; }
.smlo-box-trigger { display: grid; place-items: center; width: 100%; position: relative; padding: 0; border: 0; background: none; color: inherit; pointer-events: none; margin: 8px 0 20px; isolation: isolate; }
.smlo-box-hit-area { position: absolute; z-index: 3; top: 0; left: 50%; transform: translateX(-50%); width: min(100%,650px); aspect-ratio: 1000 / 662; max-height: 350px; pointer-events: none; }
.smlo-box-hit-area path { pointer-events: fill; cursor: pointer; }
.smlo-silhouette-defs { position: absolute; pointer-events: none; }
.smlo-mystery { position: absolute; top: 46%; width: 23%; max-width: 215px; aspect-ratio: .74; display: grid; place-items: center; pointer-events: none; transform: translateY(-50%) rotate(var(--mystery-tilt)); animation: smlo-mystery-float 5.8s ease-in-out infinite !important; }
.smlo-mystery-left { left: 6.5%; --mystery-tilt: -13deg; }
.smlo-mystery-right { right: 5%; --mystery-tilt: 7deg; animation-delay: -2.7s !important; animation-duration: 6.4s !important; }
.smlo-mystery img { display: block; width: 100%; height: 100%; object-fit: contain; filter: url(#smlo-mystery-fill) drop-shadow(0 0 1px #fff) drop-shadow(0 0 4px #fffffff0) drop-shadow(0 0 10px #ffffffa0); }
.smlo-mystery b { position: absolute; left: 50%; top: 53%; transform: translate(-50%,-50%); color: #fff; font: 900 clamp(24px,5vw,64px)/1 Arial,sans-serif; text-shadow: 0 2px 4px #0005; }
@keyframes smlo-mystery-float { 0%,100% { transform: translateY(-50%) rotate(var(--mystery-tilt)); } 50% { transform: translateY(calc(-50% - 16px)) rotate(calc(var(--mystery-tilt) + 2deg)); } }
.smlo-box-trigger > img { display: block; width: min(100%,650px); height: auto; max-height: 350px; object-fit: contain; filter: drop-shadow(0 0 2px #a391ff00) drop-shadow(0 0 8px #7663ef00) drop-shadow(0 0 16px #5367d500); transition: transform .45s ease, filter .45s ease !important; }
.smlo-box-invite { display: inline-flex; gap: 20px; align-items: center; font-size: 12px; padding: 8px 0; border-bottom: 1px solid #33314780; pointer-events: auto; cursor: pointer; }
.smlo-box-bubble { position: absolute; z-index: 4; left: 50%; top: 22%; width: max-content; padding: 10px 17px; border: 2px solid #17151f; border-radius: 16px; background: #fff; color: #17151f; box-shadow: 3px 3px 0 #17151f; font: 700 17px/1.25 "Segoe UI",Arial,sans-serif; pointer-events: none; opacity: 0; transform: translate(-50%,8px) scale(.65); transform-origin: 30% bottom; }
.smlo-box-bubble::after { content: ''; position: absolute; left: 24px; bottom: -8px; width: 12px; height: 12px; background: #fff; border-right: 2px solid #17151f; border-bottom: 2px solid #17151f; transform: rotate(45deg); }
.smlo-box-bubble.is-hinting { animation: smlo-bubble-rise 3.2s ease-out both !important; }
@keyframes smlo-bubble-rise {
  0% { opacity: 0; transform: translate(-50%,8px) scale(.65); }
  10% { opacity: 1; transform: translate(-50%,-3px) scale(1.08); }
  17% { opacity: 1; transform: translate(-50%,-6px) scale(1); }
  65% { opacity: 1; transform: translate(-50%,-25px) scale(1); }
  100% { opacity: 0; transform: translate(-50%,-48px) scale(.97); }
}
.smlo-box-trigger.is-box-hovered > img, .smlo-box-trigger:focus-visible > img { transform: translateY(-8px) scale(1.035); filter: drop-shadow(0 0 2px #a391ffdf) drop-shadow(0 0 8px #7663ef99) drop-shadow(0 0 16px #5367d566); animation: smlo-box-float 3s .45s ease-in-out infinite !important; }
@keyframes smlo-box-float { 0%,100% { translate: 0 0; } 50% { translate: 0 -7px; } }
.smlo-offer-footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; border-top: 1px solid #33314730; padding-top: 20px; }
.smlo-offer-footer strong { font-size: 32px; letter-spacing: -.04em; white-space: nowrap; }
.smlo-offer-footer small { font: 11px 'DM Mono',monospace; }
.smlo-offer-footer p { margin: 0; font-size: 13px; line-height: 1.6; }
.smlo-dialog { color: #333147; background: transparent; width: min(1160px,calc(100% - 40px)); max-width: none; height: min(840px,calc(100dvh - 40px)); max-height: calc(100dvh - 40px); margin: auto; padding: 0; border: 0; border-radius: 24px; overflow: hidden; box-shadow: none; overscroll-behavior: contain; }
.smlo-dialog[data-phase="details"] { box-shadow: 0 24px 80px #0003; }
.smlo-dialog[data-phase="revealing"] { isolation: isolate; }
.smlo-dialog[data-phase="revealing"] .smlo-opening-scene { pointer-events: none; z-index: -1; }
.smlo-dialog::backdrop { background: #1918277a; }
.smlo-dialog[open] { animation: smlo-fade-in .28s both !important; }
.smlo-dialog[open]::backdrop { animation: smlo-fade-in .28s both !important; }
.smlo-dialog[open].smlo-closing, .smlo-dialog[open].smlo-closing::backdrop { animation: smlo-fade-out .24s both !important; }
@keyframes smlo-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes smlo-fade-out { from { opacity: 1; } to { opacity: 0; } }
.smlo-close { position: absolute; z-index: 20; top: 12px; right: 12px; width: 44px; height: 44px; padding: 0; border: 1px solid #333147; border-radius: 50%; background: #fff8e7; color: #333147; font: 30px/1 sans-serif; cursor: pointer; box-shadow: 2px 3px 0 #333147; }
.smlo-dialog [hidden] { display: none !important; }
.smlo-opening-scene { height: 100%; min-height: min(540px,calc(100dvh - 90px)); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 50px 24px 24px; text-align: center; color: #fff8e7; }
.smlo-eyebrow { font: 500 10px/1.6 'DM Mono',monospace; text-transform: uppercase; letter-spacing: .07em; margin: 0 0 16px; }
.smlo-opening-stage { width: min(100%,760px); min-height: 0; flex-shrink: 1; }
.smlo-opening-stage img { display: block; width: 100%; height: auto; max-height: 55dvh; object-fit: contain; }
.smlo-opening-status { font-size: 14px; margin: 12px 0; }
.smlo-skip { font: inherit; font-size: 12px; padding: 10px; border: 0; text-decoration: underline; text-underline-offset: 4px; background: transparent; color: #fff8e7; cursor: pointer; }
.smlo-layout { position: relative; height: 100%; display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); padding: 24px; gap: 24px; align-items: center; background: #eeecff; border: 1px solid #333147; border-radius: 24px; }
.smlo-gallery { color: #fff8e7; background: #5e6e99; border: 1px solid #33314730; border-radius: 22px; padding: 30px 20px 24px; min-width: 0; }
.smlo-gallery > .smlo-eyebrow { text-align: center; margin-bottom: 8px; }
.smlo-gallery-intro { margin: 0; text-align: center; font-size: 12px; line-height: 1.6; }
.smlo-roster { position: relative; height: clamp(240px,29vw,350px); margin: 24px 0 12px; isolation: isolate; touch-action: pan-y; }
.smlo-roster::before { content: ''; position: absolute; inset: 8% 0 5%; background: #a3a8e3; border-radius: 45% 48% 42% 46%; z-index: -1; }
.smlo-figure { position: absolute; bottom: 12%; left: calc(var(--slot) * 18% - 1%); width: 29%; height: 72%; z-index: calc(var(--slot) + 1); display: grid; align-items: end; border: 0; padding: 0; background: none; color: inherit; cursor: pointer; transform: scale(.9); transform-origin: center bottom; transition: transform .42s ease !important; }
.smlo-figure img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; filter: brightness(.24) saturate(.5); transition: filter .42s ease !important; pointer-events: none; }
.smlo-figure.is-selected { z-index: 10; transform: translateY(-8px) scale(1.2); }
.smlo-figure.is-selected img { filter: brightness(1) saturate(1); animation: smlo-character-float 3s .42s ease-in-out infinite !important; }
@keyframes smlo-character-float { 0%,100% { translate: 0 0; } 50% { translate: 0 -8px; } }
.smlo-figure:focus-visible { outline: 2px solid #fff8e7; outline-offset: 4px; border-radius: 12px; }
.smlo-sample-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.smlo-sample-controls, .smlo-sample-controls * { -webkit-user-select: none; user-select: none; }
.smlo-sample-controls button { width: 44px; height: 44px; flex-shrink: 0; border: 1px solid #333147; border-radius: 50%; background: #eeecff; color: #333147; font-size: 23px; cursor: pointer; }
.smlo-sample-controls button:hover { background: #fff8e7; }
.smlo-sample-controls p { margin: 0; text-align: center; }
.smlo-sample-controls strong { display: block; font-size: 18px; }
.smlo-sample-controls span { display: block; font: 10px/1.6 'DM Mono',monospace; margin-top: 4px; }
.smlo-gallery-note { margin: 18px 0 0; font-size: 11px; text-align: center; line-height: 1.6; }
.smlo-info { height: 100%; align-self: stretch; overflow-y: auto; overscroll-behavior: contain; padding: 28px 16px 24px 0; scrollbar-width: thin; }
.smlo-info > .smlo-eyebrow { padding-right: 30px; color: #5367a1; }
.smlo-info h2 { font-size: clamp(36px,4vw,52px); line-height: 1; letter-spacing: -.045em; }
.smlo-box-trigger:focus-visible, .smlo-dialog a:focus-visible, .smlo-dialog button:focus-visible { outline: 3px solid #5367d5; outline-offset: 4px; }
@media (max-width: 1000px), (max-height: 620px) {
  .smlo-dialog { width: min(760px,calc(100% - 24px)); height: auto; max-height: calc(100dvh - 24px); overflow-y: auto; }
  .smlo-close { position: sticky; top: 10px; float: right; margin: 10px 10px -54px 0; right: auto; }
  .smlo-layout { height: auto; grid-template-columns: 1fr; padding: 18px; gap: 12px; }
  .smlo-gallery { width: 100%; max-width: 650px; justify-self: center; }
  .smlo-roster { height: clamp(220px,48vw,350px); }
  .smlo-info { height: auto; overflow: visible; padding: 22px 4px; }
  .smlo-info h2 { font-size: 42px; }
}
@media (max-width: 600px) {
  .smlo-offer { padding: 24px 20px; }
  .smlo-offer-heading { display: grid; grid-template-columns: minmax(0,1fr); gap: 14px; }
  .smlo-offer-heading > div { min-width: 0; }
  .smlo-offer-meta { width: 100%; flex-direction: row; align-items: center; justify-content: flex-end; gap: 10px; }
  .smlo-offer-meta > span { flex: 0 0 auto; white-space: nowrap; }
  .smlo-offer-footer { align-items: flex-start; flex-direction: column; gap: 12px; }
  .smlo-box-trigger > img { max-height: 270px; }
  .smlo-box-hit-area { max-height: 270px; }
  .smlo-mystery { top: 30%; width: 26%; }
  .smlo-mystery-left { left: 3%; }
  .smlo-mystery-right { right: 2%; }
  .smlo-gallery { padding: 28px 12px 20px; }
  .smlo-layout { padding: 14px; }
  .smlo-roster { margin-top: 16px; height: clamp(190px,57vw,290px); }
  .smlo-figure.is-selected { transform: translateY(-6px) scale(1.16); }
  .smlo-sample-controls span { font-size: 9px; }
}