#cilt-intro-overlay { color-scheme: dark; --purple: #361163; --gold: #C0A582; --region-font: clamp(18px, 6.5vw, 68px); --region-gap: clamp(22px, 3.5vw, 42px); --safe-top: 76px; --actions-top: calc(95svh - 122px); --safe-bottom: calc(var(--actions-top) - 28px); }
#cilt-intro-overlay * { box-sizing: border-box; }
#cilt-intro-overlay #cilt-intro-canvas { position: fixed; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
#cilt-intro-overlay.intro-running #cilt-intro-canvas { opacity: 1; }
#cilt-intro-overlay .intro-static { container-type: inline-size; position: absolute; margin: 0; width: min(88vw, 1050px, calc((var(--safe-bottom) - var(--safe-top) - var(--region-font) - var(--region-gap)) * 2.676)); left: 50%; top: calc((var(--safe-top) + var(--safe-bottom)) / 2); transform: translate(-50%, -50%); }
#cilt-intro-overlay .intro-static img { display: block; width: 100%; height: auto; filter: url(#intro-inverse-palette); }
#cilt-intro-overlay .intro-static figcaption { --caption-inset: 8.4cqw; width: calc(100% - 2 * var(--caption-inset)); margin-top: clamp(22px, 3.5vw, 42px); margin-left: var(--caption-inset); display: flex; justify-content: space-between; font-size: 6.5cqw; line-height: 1; font-weight: 600; }
#cilt-intro-overlay .intro-static figcaption > span:nth-child(-n+4) { color: #ffffff; }
#cilt-intro-overlay.intro-running .intro-static { visibility: hidden; }
#cilt-intro-overlay .intro-actions { position: fixed; z-index: 3; bottom: max(5vh, env(safe-area-inset-bottom, 0px)); left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0 20px; }
#cilt-intro-overlay .intro-enter {
  --cta-size: 68px;
  display: inline-flex; align-items: stretch;
  gap: 14px; width: min(100%, 550px); min-height: var(--cta-size);
  color: #ffffff; text-decoration: none; font: 700 18px/1.18 Arial, sans-serif;
  letter-spacing: .01em;
}
#cilt-intro-overlay .intro-enter__surface { position: relative; display: grid; place-items: center; height: var(--cta-size); border: 1px solid #C0A582; border-radius: 999px; background: #26103d; transition: background-color .25s ease; }
#cilt-intro-overlay .intro-enter__body { flex: 1 1 auto; min-width: 0; padding: 0 24px; }
#cilt-intro-overlay .intro-enter__orb { flex: 0 0 var(--cta-size); width: var(--cta-size); }
#cilt-intro-overlay .intro-enter__label { position: relative; transition: color .25s ease; }
#cilt-intro-overlay .intro-enter__mark { position: relative; width: 44px; height: 44px; overflow: visible; transform: perspective(260px) rotateX(var(--mark-rx, 0deg)) rotateY(var(--mark-ry, 0deg)); transition: transform .3s cubic-bezier(.22, 1, .36, 1); }
#cilt-intro-overlay .intro-mark__arrow { transition: transform .48s cubic-bezier(.22, 1, .36, 1); transition-delay: calc(var(--wi) * 20ms); }
#cilt-intro-overlay .intro-mark__axis, #cilt-intro-overlay .intro-mark__dot { fill: #C0A582; }
#cilt-intro-overlay .intro-mark__diag { fill: #ffffff; transition: fill .25s ease; }
#cilt-intro-overlay .intro-mark__dot { transform-box: fill-box; transform-origin: center; transition: transform .4s cubic-bezier(.22, 1, .36, 1); }
@media (hover: hover) and (pointer: fine) {
#cilt-intro-overlay .intro-enter:hover .intro-mark__arrow { transform: translate(calc(var(--dx) * 6px), calc(var(--dy) * 6px)); }
#cilt-intro-overlay .intro-enter:hover .intro-mark__dot { transform: scale(1.08); }
}
#cilt-intro-overlay .intro-enter:hover .intro-enter__surface, #cilt-intro-overlay .intro-enter:focus-visible .intro-enter__surface { background: #ffffff; }
#cilt-intro-overlay .intro-enter:hover .intro-enter__label, #cilt-intro-overlay .intro-enter:focus-visible .intro-enter__label { color: #361163; }
#cilt-intro-overlay .intro-enter:hover .intro-mark__diag, #cilt-intro-overlay .intro-enter:focus-visible .intro-mark__diag { fill: #361163; }
#cilt-intro-overlay .intro-enter:focus-visible .intro-mark__arrow { transform: translate(calc(var(--dx) * 6px), calc(var(--dy) * 6px)); }
#cilt-intro-overlay .intro-enter:focus-visible .intro-mark__dot { transform: scale(1.08); }
#cilt-intro-overlay .intro-enter:focus-visible { outline: none; }
#cilt-intro-overlay .intro-enter:focus-visible .intro-enter__surface { outline: 2px solid #ffffff; outline-offset: 3px; }
#cilt-intro-overlay .intro-enter:active .intro-enter__surface { background: #ebebeb; }
#cilt-intro-overlay :focus-visible { outline: 2px solid var(--gold); outline-offset: 5px; }
#cilt-intro-overlay [hidden] { display: none !important; }
#cilt-intro-overlay .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 600px) {
#cilt-intro-overlay { --actions-top: calc(96svh - 114px); }
#cilt-intro-overlay .intro-enter { --cta-size: 68px; font-size: 16px; gap: 10px; }
#cilt-intro-overlay .intro-enter__body { padding: 0 15px; }
#cilt-intro-overlay .intro-enter__mark { width: 40px; height: 40px; }
#cilt-intro-overlay .intro-actions { bottom: max(4vh, env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 360px) {
#cilt-intro-overlay .intro-enter { font-size: 15px; }
#cilt-intro-overlay .intro-actions { padding-inline: 16px; }
}
@media (max-height: 500px) {
#cilt-intro-overlay { --safe-top: 52px; --actions-top: calc(100svh - 60px); }
#cilt-intro-overlay .intro-actions { bottom: 8px; flex-direction: row; justify-content: center; }
#cilt-intro-overlay .intro-enter { --cta-size: 52px; }
}
@media (max-height: 500px) and (max-width: 600px) {
#cilt-intro-overlay .intro-actions { gap: 8px; }
#cilt-intro-overlay .intro-enter { --cta-size: 72px; flex: 1 1 auto; min-width: 0; }
}
@media (max-height: 500px) and (max-width: 360px) {
#cilt-intro-overlay .intro-actions { padding-inline: 12px; }
#cilt-intro-overlay .intro-enter { font-size: 14px; }
#cilt-intro-overlay .intro-enter__body { padding-inline: 10px; }
}
@media (prefers-reduced-motion: reduce) {
#cilt-intro-overlay *, #cilt-intro-overlay *::before, #cilt-intro-overlay *::after { transition: none !important; }
#cilt-intro-overlay .intro-enter, #cilt-intro-overlay .intro-enter__mark, #cilt-intro-overlay .intro-enter:hover .intro-mark__arrow, #cilt-intro-overlay .intro-enter:focus-visible .intro-mark__arrow, #cilt-intro-overlay .intro-enter:hover .intro-mark__dot, #cilt-intro-overlay .intro-enter:focus-visible .intro-mark__dot { transform: none !important; }
}

#cilt-intro-overlay { position:fixed; inset:0; z-index:99999; overflow:hidden; background:#1e0938; color:#C0A582; font-family:Arial,sans-serif; text-align:left; transition:opacity .6s ease; --safe-top:24px; --actions-top:calc(95svh - 68px); }
#cilt-intro-overlay[hidden] { display:none !important; }
#cilt-intro-overlay.intro-hidden { opacity:0; pointer-events:none; }
html.cilt-intro-open, html.cilt-intro-open body { overflow:hidden; }
#cilt-intro-overlay .intro-enter { border:0; padding:0; background:transparent; cursor:pointer; text-align:left; text-transform:none; }
#cilt-intro-overlay .intro-static { width:min(88vw,1050px,calc((var(--safe-bottom) - var(--safe-top) - var(--region-gap)) / .43865)); }
@media(max-width:767px) { #cilt-intro-overlay .intro-static { width:min(96vw,calc((var(--safe-bottom) - var(--safe-top) - var(--region-gap)) / .43865)); } }
@media(max-width:600px) { #cilt-intro-overlay { --actions-top:calc(96svh - 68px); } }
@media(max-height:500px) { #cilt-intro-overlay { --safe-top:16px; --actions-top:calc(100svh - 60px); } }
@media(max-height:500px) and (max-width:600px) { #cilt-intro-overlay { --actions-top:calc(100svh - 80px); } }
@media(prefers-reduced-motion:reduce) { #cilt-intro-overlay { transition:none; } }
