/* Flakk Guest first-time intro (03.11.2026): the tour layer over the orb app (intro.js). The app's own look: navy and amber,
   Fraunces for what is said, Geist for controls. No text under 16 px. Light and dark follow the phone like the app. */
body.fi-on #oHint, body.fi-on #oSay, body.fi-on #oYou { display: none !important; }
body.fi-on #oVis .o-x, body.fi-on #oVis .v3pick { visibility: hidden; }
body.fi-on .o-app.has-vis .o-vis { padding-top: calc(env(safe-area-inset-top) + 62px); }
body.fi-on .o-in input { pointer-events: none; }

.fi-root { position: fixed; inset: 0; z-index: 2000; pointer-events: none; font-family: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif; -webkit-user-select: none; user-select: none; }
.fi-block { position: absolute; inset: 0; pointer-events: auto; }

/* top: progress (one segment per step) and Skip */
.fi-top { position: absolute; left: 0; right: 0; top: 0; z-index: 5; display: flex; align-items: center; gap: 12px; padding: calc(env(safe-area-inset-top) + 10px) 12px 0 16px; }
.fi-prog { flex: 1; display: flex; gap: 5px; min-width: 0; }
.fi-seg { flex: 1; height: 5px; border-radius: 3px; background: rgba(243,237,226,.24); overflow: hidden; }
.fi-seg i { display: block; height: 100%; width: 0; border-radius: inherit; background: #F2A741; box-shadow: 0 0 10px rgba(242,167,65,.6); }
.fi-skip { pointer-events: auto; flex: none; min-height: 44px; min-width: 64px; padding: 0 18px; border-radius: 999px; border: 1.5px solid rgba(243,237,226,.42); background: rgba(10,29,51,.62); color: #F3EDE2; font: 600 16px/1 'Geist', system-ui, sans-serif; letter-spacing: .01em; cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.fi-skip:hover { border-color: #F2A741; }
.fi-skip:focus-visible, .fi-go:focus-visible, .fi-lang:focus-visible { outline: 3px solid #FFD48A; outline-offset: 3px; }

/* the highlight around the real element being explained */
.fi-ring { position: fixed; z-index: 2; border: 3px solid #F2A741; border-radius: 22px; pointer-events: none; opacity: 0; left: 50%; top: 50%; width: 0; height: 0;
  transition: left .4s cubic-bezier(.3,1,.4,1), top .4s cubic-bezier(.3,1,.4,1), width .4s cubic-bezier(.3,1,.4,1), height .4s cubic-bezier(.3,1,.4,1), opacity .3s ease;
  animation: fi-ring 1.6s ease-in-out infinite; }
.fi-ring.on { opacity: 1; }
@keyframes fi-ring { 0%, 100% { box-shadow: 0 0 0 3px rgba(242,167,65,.18), 0 0 24px 3px rgba(242,167,65,.32); } 50% { box-shadow: 0 0 0 9px rgba(242,167,65,.08), 0 0 44px 9px rgba(242,167,65,.5); } }

/* the caption: what the orb says, in the app's own subtitle place and style, larger */
.fi-cap { margin: 22px 0 0; max-width: 440px; min-height: 2.5em; color: #F2A741; font-family: 'Fraunces', Georgia, serif; font-variation-settings: 'opsz' 144; font-size: clamp(21px, 5.8vw, 26px); font-weight: 450; letter-spacing: -.02em; line-height: 1.22; text-align: center; text-wrap: balance; }
.o-app.has-vis .fi-cap { margin-top: 8px; font-size: clamp(19px, 5.3vw, 22px); min-height: 2.5em; }
.fi-cap.in { animation: fi-in .45s cubic-bezier(.3,1,.4,1); }
@keyframes fi-in { from { opacity: 0; transform: translateY(8px); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }

/* the orb speaks: its light and size follow the voice */
.orb.fi-talk .orb-core { animation: none; transform: scale(calc(1 + var(--lvl) * .16)); filter: brightness(calc(1 + var(--lvl) * .32)); transition: transform .07s linear, filter .07s linear; }
.orb.fi-talk .orb-glow { animation: none; opacity: calc(.5 + var(--lvl) * .5); transform: scale(calc(1 + var(--lvl) * .26)); transition: opacity .07s linear, transform .07s linear; }
.orb.fi-talk .orb-ring, .orb.fi-listen .orb-ring { animation: orb-ring 1.3s ease-out infinite; }
.orb.fi-talk .orb-ring.r2, .orb.fi-listen .orb-ring.r2 { animation-delay: .65s; }

/* the start card: one tap unlocks the sound */
.fi-card { position: absolute; inset: 0; z-index: 4; pointer-events: auto; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: calc(env(safe-area-inset-top) + 70px) 26px calc(env(safe-area-inset-bottom) + 34px); text-align: center; color: #F3EDE2;
  background: radial-gradient(120% 80% at 50% 36%, rgba(22,58,97,.96) 0%, rgba(15,42,71,.97) 55%, rgba(10,29,51,.98) 100%); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: fi-fade .4s ease; }
@media (prefers-color-scheme: dark) { .fi-card { background: radial-gradient(120% 80% at 50% 36%, rgba(17,44,75,.97) 0%, rgba(10,29,51,.98) 55%, rgba(5,14,26,.99) 100%); } }
.fi-wel { margin: 0; font-family: 'Fraunces', Georgia, serif; font-variation-settings: 'opsz' 144; font-size: clamp(32px, 9.5vw, 44px); font-weight: 450; letter-spacing: -.028em; line-height: 1.04; text-wrap: balance; }
.fi-hotel { margin: 0; font-size: 18px; line-height: 1.3; color: rgba(243,237,226,.78); }
.fi-card .orb { --sz: min(40vw, 150px, 22vh); margin: 22px 0 20px; cursor: pointer; }
.fi-card .orb-ring { animation: orb-ring 2.4s ease-out infinite; }
.fi-card .orb-ring.r2 { animation-delay: 1.2s; }
.fi-go { min-height: 60px; padding: 0 36px; border: 0; border-radius: 999px; background: #F2A741; color: #0A1D33; font-family: 'Fraunces', Georgia, serif; font-size: 23px; font-weight: 500; letter-spacing: -.012em; cursor: pointer; box-shadow: 0 16px 36px -14px rgba(242,167,65,.75); animation: fi-nudge 2.6s ease-in-out infinite; }
.fi-sub { margin: 2px 0 0; font-size: 17px; line-height: 1.35; color: rgba(243,237,226,.74); }
.fi-lang { margin-top: 8px; min-height: 48px; max-width: 100%; display: inline-flex; align-items: center; gap: 10px; padding: 0 18px 0 22px; border-radius: 999px; border: 1.5px solid rgba(243,237,226,.42); background: rgba(10,29,51,.35); color: #F3EDE2; font: 500 18px/1.1 'Geist', system-ui, sans-serif; cursor: pointer; }
.fi-lang .fi-globe { width: 19px; height: 19px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; opacity: .9; } /* from the main chat's 13:47 picker */
.fi-lang .fi-chev { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }

/* 04.11.2026 the language picker: full screen, scrollable, own names first (no flags: a language is not a country) */
.fi-pick { position: absolute; inset: 0; z-index: 8; pointer-events: auto; display: flex; flex-direction: column; color: #F3EDE2; background: linear-gradient(180deg, #0F2A47 0%, #0A1D33 100%); padding: calc(env(safe-area-inset-top) + 14px) 0 0; animation: fi-fade .22s ease; -webkit-user-select: none; user-select: none; }
@media (prefers-color-scheme: dark) { .fi-pick { background: linear-gradient(180deg, #0A1D33 0%, #050E1A 100%); } }
.fi-pick.out { animation: fi-out .22s ease forwards; pointer-events: none; }
.fi-pk-h { display: flex; align-items: center; gap: 12px; padding: 0 12px 0 20px; }
.fi-pk-h h2 { flex: 1; min-width: 0; margin: 0; font-family: 'Fraunces', Georgia, serif; font-variation-settings: 'opsz' 144; font-size: clamp(24px, 7vw, 30px); font-weight: 450; letter-spacing: -.02em; line-height: 1.15; }
.fi-pk-x { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(243,237,226,.12); color: #F3EDE2; display: grid; place-items: center; cursor: pointer; padding: 0; }
.fi-pk-x .ic { width: 22px; height: 22px; display: block; }
.fi-pk-s { margin: 14px 16px 6px; display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 16px; border-radius: 14px; background: rgba(255,255,255,.09); border: 1.5px solid rgba(243,237,226,.2); }
.fi-pk-s:focus-within { border-color: #F2A741; }
.fi-pk-s svg { width: 20px; height: 20px; flex: none; fill: none; stroke: rgba(243,237,226,.7); stroke-width: 2; stroke-linecap: round; }
.fi-pk-s input { flex: 1; min-width: 0; height: 46px; border: 0; outline: 0; background: transparent; color: #F3EDE2; font: 400 17px/1.2 'Geist', system-ui, sans-serif; -webkit-user-select: text; user-select: text; }
.fi-pk-s input::placeholder { color: rgba(243,237,226,.55); }
.fi-pk-s input::-webkit-search-cancel-button { filter: invert(1); }
.fi-pk-l { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 4px 10px calc(env(safe-area-inset-bottom) + 20px); }
.fi-pk-o { position: relative; display: grid; grid-template-columns: 1fr auto; grid-template-areas: 'n c' 'e c' 'd c'; align-items: center; column-gap: 12px; width: 100%; min-height: 60px; margin: 2px 0; padding: 9px 14px; border: 0; border-radius: 14px; background: transparent; color: inherit; text-align: start; cursor: pointer; font-family: 'Geist', system-ui, sans-serif; }
.fi-pk-o[hidden] { display: none; }
.fi-pk-o:hover, .fi-pk-o:focus-visible { background: rgba(243,237,226,.08); outline: none; }
.fi-pk-o:focus-visible { box-shadow: inset 0 0 0 2px #FFD48A; }
.fi-pk-o.on { background: rgba(242,167,65,.16); }
.fi-pk-n { grid-area: n; font-size: 20px; font-weight: 500; line-height: 1.25; overflow-wrap: anywhere; }
.fi-pk-e { grid-area: e; font-size: 16px; line-height: 1.3; color: rgba(243,237,226,.62); }
.fi-pk-d { grid-area: d; margin-top: 3px; justify-self: start; font-size: 16px; line-height: 1.3; color: #FFD48A; }
.fi-pk-c { grid-area: c; width: 24px; text-align: center; font-size: 20px; color: #F2A741; }
.fi-pk-none { margin: 24px 20px; font-size: 17px; color: rgba(243,237,226,.7); text-align: center; }
.fi-pk-n, .fi-pk-e, .fi-pk-d { text-align: left; }
[dir=rtl] .fi-pk-n, [dir=rtl] .fi-pk-e, [dir=rtl] .fi-pk-d { text-align: right; justify-self: stretch; }
/* a line in another script than the page (English under Arabic, Arabic under English) takes its own direction */
.fi-cap { unicode-bidi: plaintext; }

/* 04.11.2026 scripts that join or have no letter case: no letter-spacing (it breaks Arabic joining and spaces CJK/Thai/Devanagari oddly) */
:lang(ar), :lang(he), :lang(th), :lang(hi), :lang(ja), :lang(ko), :lang(zh) { letter-spacing: normal !important; }
:lang(th), :lang(hi), :lang(ar) { line-height: 1.45; }
.fi-card.out { animation: fi-out .36s ease forwards; pointer-events: none; }
@keyframes fi-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fi-out { to { opacity: 0; transform: scale(1.03); } }
@keyframes fi-nudge { 0%, 100% { transform: none; } 50% { transform: scale(1.04); } }

/* "Hello" in many languages around the orb */
.fi-word { position: fixed; z-index: 1; pointer-events: none; white-space: nowrap; font-family: 'Fraunces', Georgia, serif; font-style: italic; font-size: 20px; font-weight: 450; color: #FFD48A; text-shadow: 0 2px 12px rgba(10,29,51,.8); opacity: 0; animation: fi-word 1.6s ease-out forwards; }
@keyframes fi-word { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.8); } 22% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.06); } }

/* a button being "pressed" in the demo */
.fi-press { animation: fi-press .6s ease; }
@keyframes fi-press { 35% { transform: scale(.93); filter: brightness(1.12); } 100% { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .fi-ring, .fi-go, .fi-cap.in, .fi-card, .fi-card .orb-ring, .fi-press { animation: none !important; }
  .fi-word { display: none; }
  .orb.fi-talk .orb-ring, .orb.fi-listen .orb-ring { animation: none; }
}
:lang(ja) .fi-cap, :lang(ja) .fi-sub, :lang(ja) .fi-wel { word-break: auto-phrase; } /* Japanese captions break between phrases, not inside a word (Chrome 119+; others ignore it) */