@import url('https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600,700&display=swap');

:root, [data-theme=dark] {
  --bg: #0A0F1D;
  --bg-glow:
    radial-gradient(circle at 15% 10%, rgba(245, 158, 11, 0.22) 0%, transparent 42%),
    radial-gradient(circle at 78% 22%, rgba(251, 191, 36, 0.20) 0%, transparent 46%),
    radial-gradient(circle at 50% 62%, rgba(234, 88, 12, 0.12) 0%, transparent 52%),
    linear-gradient(180deg, #0B1120 0%, #0F172A 100%);
  --surface: #131C31;
  --soft: #1C2942;
  --ink: #F8FAFC;
  --muted: #CBD5E1;
  --line: rgba(251, 191, 36, 0.18);
  --accent: #F59E0B;
  --accent-warm: #FBBF24;
  --accent-glow: rgba(245, 158, 11, 0.30);
  --voice-bg: linear-gradient(135deg, #1E1B4B 0%, #31102F 52%, #451A03 100%);
  --voice-ink: #FFFBEB;
  --success: oklch(72% .15 150);
  --onaccent: #1C1008;
  --shadow: 0 16px 40px rgba(2, 6, 23, 0.45);
  --shadow-lg: 0 24px 58px rgba(2, 6, 23, 0.62);
  --font-body: 'General Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'General Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --text-xs: clamp(.78rem, .74rem + .15vw, .86rem);
  --text-sm: clamp(.9rem, .86rem + .2vw, .98rem);
  --text-base: clamp(1.02rem, .98rem + .18vw, 1.1rem);
  --text-lg: clamp(1.16rem, 1.05rem + .55vw, 1.44rem);
  --text-xl: clamp(1.6rem, 1.28rem + 1.2vw, 2.3rem);
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 3.75rem;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 22px;
}

[data-theme=lantern] {
  --bg: #FAF0DC;
  --bg-glow:
    radial-gradient(circle at 14% 12%, rgba(245, 158, 11, 0.28) 0%, transparent 44%),
    radial-gradient(circle at 46% 35%, rgba(234, 88, 12, 0.16) 0%, transparent 48%),
    radial-gradient(circle at 86% 18%, rgba(251, 191, 36, 0.22) 0%, transparent 50%),
    linear-gradient(180deg, #FDF7EC 0%, #F7E8CE 100%);
  --surface: #FFFDF8;
  --soft: #F3E2C3;
  --ink: #241409;
  --muted: #6C4B30;
  --line: rgba(133, 77, 14, 0.24);
  --accent: #B93815;
  --accent-warm: #D97706;
  --accent-glow: rgba(245, 158, 11, 0.34);
  --voice-bg: linear-gradient(135deg, #2D150A 0%, #4A2110 52%, #682E14 100%);
  --voice-ink: #FFFBEB;
  --success: oklch(48% .15 150);
  --onaccent: #FFFDF9;
  --shadow: 0 14px 36px rgba(92, 45, 16, 0.10);
  --shadow-lg: 0 22px 52px rgba(92, 45, 16, 0.17);
}

[data-theme=light] {
  --bg: oklch(97.2% .012 82);
  --bg-glow: radial-gradient(circle at 18% 12%, oklch(92% .06 78 / .55), transparent 45%),
             radial-gradient(circle at 85% 22%, oklch(91% .05 245 / .5), transparent 48%);
  --surface: oklch(100% 0 0);
  --soft: oklch(94.2% .018 245);
  --ink: oklch(21% .04 248);
  --muted: oklch(44% .028 250);
  --line: oklch(25% .04 248 / .14);
  --accent: oklch(42% .14 252);
  --accent-warm: oklch(64% .17 62);
  --accent-glow: oklch(68% .17 65 / .26);
  --voice-bg: linear-gradient(135deg, oklch(23% .05 252), oklch(29% .07 245));
  --voice-ink: oklch(98% .01 85);
  --success: oklch(48% .15 150);
  --onaccent: oklch(100% 0 0);
  --shadow: 0 14px 42px oklch(23% .04 248 / .08);
  --shadow-lg: 0 22px 54px oklch(20% .05 248 / .14);
}

html[data-textscale="large"] { font-size: 112.5%; }
html[data-textscale="xlarge"] { font-size: 124%; }

body {
  font-family: var(--font-body);
  font-size: clamp(1.06rem, 1.02rem + .22vw, 1.16rem);
  background-color: var(--bg);
  background-image: var(--bg-glow);
  background-attachment: fixed;
  color: var(--ink);
  line-height: 1.6;
}

.shell {
  width: 100%;
  max-width: 1540px;
  margin: 0 auto;
  padding-inline: clamp(1rem, 2.2vw, 2.25rem);
}

header {
  width: 100%;
  min-height: 82px;
  padding-block: var(--space-3);
  padding-inline: clamp(0.5rem, 1.4vw, 1.75rem);
  margin-bottom: var(--space-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  border-bottom: 1.5px solid var(--line);
}

.brand {
  border: 0;
  background: none;
  padding: var(--space-2) 0;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  color: var(--ink);
  font-size: clamp(1.5rem, 1.25rem + .9vw, 2.05rem);
  font-weight: 700;
}

.brand svg {
  width: 44px;
  height: 44px;
  color: var(--accent-warm);
  filter: drop-shadow(0 3px 10px var(--accent-glow));
}

.brand small {
  display: block;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--muted);
  text-align: left;
  margin-top: 2px;
}

.nav {
  display: flex;
  gap: var(--space-3);
  align-items: center;
}

.nav button, .quiet {
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 10px 18px;
  font-size: var(--text-base);
  font-weight: 600;
  border-radius: var(--r-sm);
}

.nav button:hover, .quiet:hover {
  color: var(--ink);
  background: var(--soft);
}

.nav .selected {
  color: var(--ink);
  font-weight: 700;
  background: var(--soft);
}

.text-scale-btn {
  border: 1.5px solid var(--line) !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  padding-inline: var(--space-4) !important;
}

.theme {
  font-size: var(--text-sm) !important;
  font-weight: 700 !important;
  border: 1.5px solid var(--accent-warm) !important;
  background: var(--accent-glow) !important;
  color: var(--ink) !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  white-space: nowrap;
}

/* Theme #1: Warm Lantern Lounge Elevated Surface & Card Accents */
[data-theme=lantern] header {
  background: linear-gradient(90deg, rgba(255, 251, 235, 0.72), rgba(254, 243, 199, 0.52), rgba(255, 251, 235, 0.72));
  border-bottom: 2px solid rgba(217, 119, 6, 0.32);
  border-radius: 0 0 18px 18px;
}

[data-theme=lantern] .hero-caricature-card {
  background: linear-gradient(180deg, #FFFDF9 0%, #FDF3DF 100%);
  border: 2px solid rgba(217, 119, 6, 0.42);
  box-shadow: 0 20px 48px rgba(146, 64, 14, 0.16), inset 0 1px 0 #FFFFFF;
}

[data-theme=lantern] .lesson-item {
  background: linear-gradient(180deg, #FFFEFA 0%, #FAF0DA 100%);
  border: 1.5px solid rgba(180, 83, 9, 0.25);
  box-shadow: 0 10px 26px rgba(120, 53, 15, 0.09), inset 0 1px 0 #FFFFFF;
}

[data-theme=lantern] .lesson-item.featured-lesson-card {
  background: linear-gradient(180deg, #FFFBEB 0%, #FDE68A 180%);
  border: 2px solid #D97706;
  box-shadow: 0 12px 30px rgba(217, 119, 6, 0.18);
}

[data-theme=lantern] .inputrow {
  background: #FFFDF9;
  border: 2px solid rgba(217, 119, 6, 0.45);
  box-shadow: 0 12px 30px rgba(180, 83, 9, 0.12);
}

[data-theme=lantern] .chip {
  background: linear-gradient(180deg, #FFFDF9 0%, #F9EBD0 100%);
  border-color: rgba(180, 83, 9, 0.28);
}

[data-theme=lantern] .btn.primary {
  background: linear-gradient(135deg, #C2410C 0%, #9A3412 100%);
  border-color: #F59E0B;
  color: #FFFBEB;
  box-shadow: 0 6px 18px rgba(180, 62, 20, 0.30), inset 0 1px 0 rgba(254, 240, 138, 0.38);
}

[data-theme=lantern] .spotlight-files-banner {
  border: 2px solid rgba(245, 158, 11, 0.55);
  box-shadow: 0 18px 42px rgba(69, 26, 3, 0.28);
}

[data-theme=lantern] .spotlight-files-banner .micro {
  color: #FDE68A;
}

.preview-bar {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-3);
  color: var(--muted);
  font-size: var(--text-xs);
  border-bottom: 1px solid var(--line);
}

.preview-bar span:first-child {
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent);
}

.main {
  padding-block: var(--space-2) var(--space-10);
  min-height: 640px;
}

.eyebrow {
  font-size: var(--text-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--accent-warm);
  margin-bottom: var(--space-2);
}

h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.55rem + 1.45vw, 2.72rem);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -.03em;
}

h2 {
  font-size: clamp(1.38rem, 1.18rem + .6vw, 1.78rem);
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -.02em;
}

h3 {
  font-size: clamp(1.22rem, 1.12rem + .32vw, 1.38rem);
  font-weight: 700;
}

.muted, .sub {
  color: var(--muted);
}

.sub {
  margin-top: var(--space-3);
  font-size: clamp(1.08rem, 1.02rem + .25vw, 1.22rem);
  line-height: 1.6;
  max-width: 58ch;
}

/* Spacious 3-Tier Lantern Layout */
.home-lantern-layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

.lantern-eyebrow-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--accent-glow);
  border: 1px solid rgba(251, 191, 36, 0.45);
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .08em;
  margin-bottom: var(--space-3);
}

.lantern-dot-glow,
.badge-lantern-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #FBBF24;
  box-shadow: 0 0 10px 3px rgba(251, 191, 36, 0.75);
  flex: none;
}

/* Dynamic Hero Layout (Left Focus + Right Sticky Lanny Stage) */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.62fr) minmax(350px, 0.72fr);
  gap: clamp(1.5rem, 2.5vw, 2.5rem);
  align-items: start;
  padding-block: 0;
}

.hero-left {
  min-width: 0;
}

.hero-right {
  position: sticky;
  top: 18px;
  align-self: start;
  z-index: 8;
}

.askform {
  margin-top: var(--space-4);
}

label {
  display: block;
  font-size: var(--text-base);
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.askform label {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 1.22rem + .9vw, 1.92rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.025em;
  color: var(--ink);
  margin-bottom: var(--space-3);
}

.inputrow {
  display: flex;
  gap: var(--space-3);
  padding: 8px;
  border: 2px solid rgba(251, 191, 36, 0.42);
  background: var(--surface);
  border-radius: 16px;
  box-shadow: 0 12px 34px rgba(245, 158, 11, 0.12), var(--shadow);
}

.inputrow:focus-within {
  border-color: var(--accent-warm);
  box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.22), var(--shadow);
}

input, textarea {
  min-width: 0;
  max-width: 100%;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 12px 16px;
  font-size: 1.08rem;
}

.inputrow input {
  border: 0;
  flex: 1;
  background: transparent;
}

.btn {
  padding: 12px 22px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  font-size: 1rem;
  font-weight: 700;
  transition: background .15s, transform .15s, box-shadow .15s, border-color .15s;
}

.btn:hover {
  background: var(--soft);
  border-color: var(--accent-warm);
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(1px);
}

/* Warm Golden Lantern Primary Button — Stands Out Clearly Against Dark & Light Surfaces */
.btn.primary {
  background: linear-gradient(135deg, #FBBF24 0%, #F59E0B 55%, #D97706 100%);
  color: #1C1008;
  border-color: #FDE68A;
  font-weight: 800;
  box-shadow: 0 8px 24px rgba(245, 158, 11, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.btn.primary:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(245, 158, 11, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.secondary-lantern-btn,
.secondary-card-btn,
.secondary-spotlight-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1.5px solid rgba(251, 191, 36, 0.32);
  color: var(--ink);
}

[data-theme=light] .secondary-lantern-btn,
[data-theme=light] .secondary-card-btn,
[data-theme=lantern] .secondary-lantern-btn,
[data-theme=lantern] .secondary-card-btn {
  background: var(--soft);
  border-color: rgba(180, 83, 9, 0.28);
}

.micro {
  font-size: 0.94rem;
  color: var(--muted);
  line-height: 1.55;
}

.askform .micro {
  margin-top: var(--space-2);
}

.quick-picks {
  margin-top: var(--space-5);
}

.quick-label {
  display: block;
  font-size: 0.96rem;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: var(--space-3);
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.chip {
  min-height: 44px;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font-size: 0.98rem;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  transition: border-color .15s, transform .15s, background .15s, box-shadow .15s;
}

.chip:hover {
  border-color: var(--accent-warm);
  background: var(--soft);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(245, 158, 11, 0.20);
}

.browse-all-chip {
  border-color: var(--accent-warm);
  background: var(--accent-glow);
  font-weight: 700;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

/* AAA Gamer-Caliber 3D Lanny Mascot Stage Card */
.hero-caricature-card {
  background:
    radial-gradient(circle at 50% 24%, rgba(251, 191, 36, 0.18) 0%, transparent 62%),
    linear-gradient(180deg, #070E1E 0%, #0A1120 100%);
  border: 2px solid rgba(251, 191, 36, 0.42);
  border-radius: 26px;
  padding: var(--space-4) var(--space-4);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.48), 0 0 44px rgba(245, 158, 11, 0.16);
  text-align: center;
  position: relative;
  overflow: hidden;
  color: #F8FAFC;
}

.hero-caricature-card .hero-caricature-copy {
  color: #E2E8F0;
}

.hero-mascot-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(251, 191, 36, 0.16);
  border: 1px solid rgba(251, 191, 36, 0.52);
  color: #FEF3C7;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: var(--space-2);
  position: relative;
  z-index: 4;
}

.hero-caricature-scene.lanny-3d-stage-wrap {
  position: relative;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border-radius: 20px;
  overflow: hidden;
  background: #070E1E;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.hero-caricature-scene.lanny-3d-stage-wrap:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 36px rgba(251, 191, 36, 0.22);
}

.lanny-enlighten-halo {
  position: absolute;
  width: 310px;
  height: 310px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(251, 191, 36, 0.28) 0%, rgba(234, 88, 12, 0.10) 50%, transparent 72%);
  pointer-events: none;
  z-index: 0;
  animation: stHaloBreath 3.4s infinite ease-in-out;
}

@keyframes stHaloBreath {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50% { transform: scale(1.1); opacity: 1; }
}

/* 2.5D Skeletal 3D Character Rig Container */
.lanny-3d-rig {
  position: relative;
  width: 100%;
  max-width: 310px;
  aspect-ratio: 896 / 1200;
  z-index: 2;
  animation: lanny3DFloat 3.6s infinite ease-in-out;
  -webkit-mask-image: radial-gradient(ellipse 92% 94% at 50% 48%, #000 76%, transparent 100%);
  mask-image: radial-gradient(ellipse 92% 94% at 50% 48%, #000 76%, transparent 100%);
}

@keyframes lanny3DFloat {
  0%, 100% { transform: translateY(0px) scale(1); }
  50% { transform: translateY(-8px) scale(1.012); }
}

.lanny-3d-layer,
.lanny-3d-vfx-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.lanny-3d-base {
  position: relative;
  z-index: 1;
  display: block;
}

/* Layer 2: Seamless 3D Screen Eye Blink (Every 4.4s) */
.lanny-3d-blink {
  z-index: 2;
  opacity: 0;
  animation: lanny3DBlink 4.4s infinite ease-in-out;
}

@keyframes lanny3DBlink {
  0%, 43%, 49%, 94%, 100% { opacity: 0; }
  45%, 47%, 96%, 98% { opacity: 1; }
}

/* Layer 3: Articulated 3D Waving Right Hand & Golden Gauntlet (Pivot: 210/896 = 23.44%, 336/1200 = 28.00%)
   Waves hello back-and-forth, and every few seconds does a warm 3D "Come on in!" beckoning motion */
.lanny-3d-wave {
  z-index: 3;
  transform-origin: 23.44% 28.00%;
  animation: lanny3DWaveArm 6.8s infinite ease-in-out;
  will-change: transform;
}

@keyframes lanny3DWaveArm {
  /* Friendly side-to-side hello waves */
  0%   { transform: perspective(520px) rotate(-8deg) scale(1); }
  12%  { transform: perspective(520px) rotate(13deg) scale(1); }
  24%  { transform: perspective(520px) rotate(-8deg) scale(1); }
  36%  { transform: perspective(520px) rotate(13deg) scale(1); }
  48%  { transform: perspective(520px) rotate(-6deg) scale(1); }
  /* "Come on in!" double welcoming beckon toward Lanny */
  58%  { transform: perspective(520px) rotate(22deg) rotateX(22deg) rotateY(-24deg) scale(1.09) translate(9px, -6px); }
  66%  { transform: perspective(520px) rotate(6deg) rotateX(6deg) rotateY(-6deg) scale(1.02) translate(2px, -1px); }
  75%  { transform: perspective(520px) rotate(24deg) rotateX(24deg) rotateY(-26deg) scale(1.11) translate(11px, -7px); }
  86%  { transform: perspective(520px) rotate(4deg) scale(1); }
  100% { transform: perspective(520px) rotate(-8deg) scale(1); }
}

.lanny-come-on-in-badge {
  position: absolute;
  top: 10%;
  left: 6%;
  max-width: 88%;
  z-index: 7;
  padding: 6px 13px;
  border-radius: 999px;
  background: linear-gradient(135deg, #FDE047 0%, #F59E0B 100%);
  color: #1C1008;
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 0.01em;
  box-shadow: 0 8px 20px rgba(245, 158, 11, 0.45);
  pointer-events: none;
  animation: comeOnInPulse 6.8s infinite ease-in-out;
}

.lanny-come-on-in-badge.lanny-see-below-badge {
  animation: seeBelowQuestionsPulse 6.8s infinite ease-in-out;
}

@keyframes comeOnInPulse {
  0%, 48%, 90%, 100% { opacity: 0; transform: translateY(6px) scale(0.88); }
  56%, 82% { opacity: 1; transform: translateY(0px) scale(1.04); }
}

@keyframes seeBelowQuestionsPulse {
  0%, 4%, 48%, 100% { opacity: 0; transform: translateY(6px) scale(0.88); }
  12%, 40% { opacity: 1; transform: translateY(0px) scale(1.02); }
}

/* Layer 0: Billowing 3D Superhero Cape Layer Behind Lanny (Pivot at Collar: 48% 33%) */
.lanny-3d-cape {
  z-index: 0;
  transform-origin: 48% 33%;
  animation: lannyCapeBillow 2.4s infinite ease-in-out;
  will-change: transform;
}

@keyframes lannyCapeBillow {
  0%, 100% {
    transform: perspective(560px) rotate(3.5deg) skewX(4deg) scaleX(0.97) scaleY(1.02);
  }
  42%, 58% {
    transform: perspective(560px) rotate(-6.5deg) skewX(-6.5deg) scaleX(1.07) scaleY(0.98) translate(-6px, -4px);
  }
}

/* Layer 4: Articulated 3D Outstretched Pointing Arm from Shoulder to Fingertip (Pivot at Shoulder: 576/896 = 64.28%, 342/1200 = 28.50%) */
.lanny-3d-point {
  z-index: 4;
  transform-origin: 64.28% 28.50%;
  animation: lanny3DPointArm 2.4s infinite ease-in-out;
  will-change: transform;
}

@keyframes lanny3DPointArm {
  0%, 100% { transform: rotate(4deg); }
  45% { transform: rotate(-8.5deg) scaleX(1.08); }
}

/* Layer 5: Real-Time Pixel-Locked Volumetric Shaders & Holographic VFX */
.lanny-3d-vfx-svg {
  z-index: 5;
  overflow: visible;
}

.vfx-core-pulse {
  transform-origin: 446px 381px;
  mix-blend-mode: screen;
  animation: vfxCoreBreath 2.2s infinite ease-in-out;
}

@keyframes vfxCoreBreath {
  0%, 100% { transform: scale(0.88); opacity: 0.55; }
  50% { transform: scale(1.18); opacity: 0.95; }
}

.vfx-core-rays {
  transform-origin: 446px 381px;
  animation: vfxRaysSpin 18s infinite linear;
}

@keyframes vfxRaysSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Synchronized Waving Energy Arcs (Same Pivot & Keyframes as Right Waving Arm) */
.vfx-wave-sync {
  transform-origin: 210px 336px;
  animation: lanny3DWaveArm 6.8s infinite ease-in-out;
}

.vfx-wave-arc {
  animation: vfxArcShimmer 1.05s infinite ease-in-out alternate;
}

.vfx-wave-arc-2 {
  animation-delay: 0.35s;
}

@keyframes vfxArcShimmer {
  0% { opacity: 0.25; }
  100% { opacity: 0.92; }
}

/* Synchronized Pointing Fingertip Sonar Ripples */
.vfx-point-sync {
  transform-origin: 588px 348px;
}

.vfx-tap-ripple {
  transform-origin: 786px 306px;
  animation: vfxTapSonar 2.4s infinite ease-out;
}

.vfx-tap-ripple.r-2 {
  animation-delay: 0.7s;
}

@keyframes vfxTapSonar {
  0%, 20% { transform: scale(0.75); opacity: 0.95; }
  85%, 100% { transform: scale(2.35); opacity: 0; }
}

.vfx-tap-core {
  transform-origin: 786px 306px;
  animation: vfxTapCoreFlash 1.2s infinite ease-in-out alternate;
}

@keyframes vfxTapCoreFlash {
  0% { transform: scale(0.75); opacity: 0.55; }
  100% { transform: scale(1.25); opacity: 1; }
}

/* Afterburner Boot Thruster Plumes */
.vfx-thruster-plume {
  transform-origin: 468px 985px;
  mix-blend-mode: screen;
  animation: vfxThrusterBurn 0.45s infinite ease-in-out alternate;
}

.vfx-thruster-2 {
  transform-origin: 480px 1060px;
  animation-delay: 0.22s;
}

@keyframes vfxThrusterBurn {
  0% { opacity: 0.45; transform: scaleY(0.88); }
  100% { opacity: 0.95; transform: scaleY(1.16); }
}

/* Floating Firefly Sparks */
.vfx-firefly {
  animation: vfxFireflyDrift 3.4s infinite ease-in-out;
}
.vfx-firefly.ff-2 { animation-delay: 0.7s; }
.vfx-firefly.ff-3 { animation-delay: 1.4s; }
.vfx-firefly.ff-4 { animation-delay: 2.1s; }
.vfx-firefly.ff-5 { animation-delay: 2.7s; }

@keyframes vfxFireflyDrift {
  0%, 100% { transform: translateY(0px) scale(0.8); opacity: 0.4; }
  50% { transform: translateY(-18px) scale(1.3); opacity: 1; }
}

/* Interactive Floating Glass HUD Prompt */
.lanny-3d-hud-pill {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(9, 13, 22, 0.84);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(251, 191, 36, 0.55);
  color: #FEF3C7;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55);
}

.hud-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #38BDF8;
  box-shadow: 0 0 10px 2px rgba(56, 189, 248, 0.85);
  animation: vfxTapCoreFlash 1s infinite alternate;
}

/* Fallback class support for Lesson Stage visor eyes */
.caricature-visor-eyes .c-eye {
  width: 15px;
  height: 13px;
  background: linear-gradient(180deg, #E0F2FE 0%, #FFFFFF 100%);
  border-radius: 5px 5px 10px 10px;
  border: 1.5px solid #38BDF8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.caricature-visor-eyes .c-pupil {
  width: 5.5px;
  height: 5.5px;
  background: #0F172A;
  border-radius: 50%;
}

.caricature-visor-eyes .c-mouth {
  width: 13px;
  height: 6px;
  border-bottom: 2.5px solid #FBBF24;
  border-radius: 0 0 12px 12px;
  margin-top: 5px;
}

.hero-caricature-copy {
  font-size: 1.02rem;
  margin-top: var(--space-2);
  line-height: 1.55;
  color: var(--ink);
}

.hero-caricature-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: var(--space-4);
}

.hero-caricature-actions .btn {
  padding: 13px 18px;
  font-size: 1.02rem;
}

/* Tier 2: Warm Lantern Spotlight Banner for #1 File Frustration */
.spotlight-files-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-6);
  padding: var(--space-6) var(--space-8);
  margin-bottom: 0;
  border-radius: 24px;
  background:
    radial-gradient(circle at 12% 50%, rgba(251, 191, 36, 0.22) 0%, transparent 50%),
    var(--voice-bg);
  border: 2px solid rgba(251, 191, 36, 0.45);
  color: var(--voice-ink);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35), 0 0 32px rgba(245, 158, 11, 0.12);
}

.spotlight-copy-col {
  max-width: 64ch;
}

.spotlight-eyebrow {
  color: #FDE047 !important;
  font-size: 0.85rem;
}

.spotlight-files-banner h2 {
  font-size: clamp(1.35rem, 1.15rem + .55vw, 1.72rem);
  color: #FFFFFF;
  margin-top: 4px;
}

.spotlight-desc {
  color: #FDE68A;
  max-width: 62ch;
  margin-top: 8px;
  font-size: 1.05rem;
  line-height: 1.55;
}

.spotlight-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.spotlight-actions .btn {
  padding: 13px 22px;
  font-size: 1.02rem;
}

.secondary-spotlight-btn {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #FFFBEB !important;
  border: 1.5px solid rgba(254, 240, 138, 0.55) !important;
}

.secondary-spotlight-btn:hover {
  background: rgba(255, 255, 255, 0.2) !important;
}

/* DOMINANT FULL RECORDED VOICE WALKTHROUGH CONSOLE */
.dominant-voice-console {
  background: var(--voice-bg);
  color: var(--voice-ink);
  border-radius: var(--r-lg);
  padding: var(--space-6) var(--space-8);
  margin-bottom: var(--space-6);
  box-shadow: var(--shadow-lg);
  border: 2px solid oklch(72% .15 68 / .45);
}

.dominant-voice-console.playing {
  border-color: oklch(78% .17 70);
  box-shadow: 0 0 0 4px oklch(75% .16 70 / .22), var(--shadow-lg);
}

.voice-console-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.voice-live-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  padding: 4px 10px;
  border-radius: 999px;
  background: oklch(75% .16 68);
  color: oklch(18% .03 250);
  margin-bottom: 6px;
}

.voice-console-title h1 {
  color: #fff;
  font-size: var(--text-xl);
}

.voice-sub {
  color: oklch(88% .04 75);
  font-size: var(--text-sm);
  font-weight: 600;
  margin-top: 4px;
}

.voice-console-right {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.lesson-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.lesson-top-bar .breadcrumb {
  margin-bottom: 0;
}

.worked-home-btn {
  background: oklch(52% .16 150) !important;
  color: #fff !important;
  border: 2px solid oklch(68% .17 150) !important;
  font-weight: 700 !important;
  font-size: var(--text-sm) !important;
  padding: 10px 18px !important;
  border-radius: 999px !important;
  box-shadow: 0 6px 20px oklch(52% .16 150 / .35);
}

.worked-home-btn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.home-celebrate-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  padding: 12px 18px;
  margin-bottom: var(--space-4);
  border-radius: var(--r-md);
  background: oklch(52% .16 150 / .16);
  border: 2px solid oklch(52% .16 150);
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: 700;
}

.voice-waveform {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 42px;
  padding: 6px 12px;
  border-radius: 12px;
  background: oklch(15% .03 250 / .55);
}

.eq-bar {
  width: 4px;
  height: 10px;
  border-radius: 99px;
  background: oklch(78% .16 70);
  transition: height .2s;
}

.dominant-voice-console.playing .eq-bar {
  animation: eqDance .75s infinite ease-in-out alternate;
}

@keyframes eqDance {
  0% { height: 7px; opacity: .6; }
  100% { height: 30px; opacity: 1; }
}

.voice-console-controls {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  align-items: center;
  margin-top: var(--space-5);
}

.voice-hero-play-btn {
  background: oklch(76% .16 68) !important;
  color: oklch(16% .03 250) !important;
  border-color: oklch(82% .16 70) !important;
  font-size: var(--text-base) !important;
  font-weight: 700 !important;
  padding: 14px 22px !important;
  border-radius: var(--r-md) !important;
  box-shadow: 0 8px 24px oklch(75% .16 68 / .35);
}

.voice-console-controls audio {
  width: 100%;
  height: 44px;
  margin: 0;
  border-radius: 10px;
}

.voice-step-scrubber {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
  margin-top: var(--space-5);
}

.voice-step-chip {
  background: oklch(18% .03 250 / .6);
  color: oklch(88% .02 250);
  border: 1px solid oklch(90% .02 250 / .18);
  border-radius: var(--r-sm);
  padding: 8px 12px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.voice-step-chip.active {
  background: oklch(76% .16 68 / .22);
  border-color: oklch(78% .16 68);
  color: #fff;
}

.voice-step-chip .v-num {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: oklch(80% .15 70);
}

.voice-step-chip .v-name {
  font-size: var(--text-xs);
  font-weight: 600;
}

/* Tier 3: Spacious, Large-Print, Category-Coded Guide Library */
.library-section {
  padding-top: var(--space-4);
  border-top: 1.5px solid var(--line);
}

.library-inline-left {
  margin-top: var(--space-5);
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding-bottom: var(--space-4);
}

.library-sub {
  color: var(--muted);
  font-size: 1.04rem;
  margin-top: 6px;
}

.section-head.topic-contents-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 22px;
  margin-bottom: var(--space-5);
  border-radius: 20px;
  background:
    radial-gradient(circle at 12% 0%, rgba(251, 191, 36, 0.16) 0%, transparent 62%),
    linear-gradient(180deg, rgba(30, 41, 59, 0.96) 0%, rgba(15, 23, 42, 0.96) 100%);
  border: 2px solid rgba(251, 191, 36, 0.65);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

[data-theme=light] .section-head.topic-contents-box,
[data-theme=lantern] .section-head.topic-contents-box {
  background: linear-gradient(180deg, #FFFBEB 0%, #FEF3C7 100%);
  border-color: #D97706;
  box-shadow: 0 10px 26px rgba(180, 83, 9, 0.14);
}

.section-head.topic-contents-box h2 {
  margin: 0;
  font-size: 1.38rem;
  font-weight: 900;
  color: #FEF08A;
  letter-spacing: -0.01em;
}

[data-theme=light] .section-head.topic-contents-box h2,
[data-theme=lantern] .section-head.topic-contents-box h2 {
  color: #78350F;
}

.cat-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
}

.cat-tab {
  min-height: 46px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 2px solid rgba(56, 189, 248, 0.52);
  background: rgba(30, 41, 59, 0.95);
  color: #FFFFFF;
  font-size: 1rem;
  font-weight: 800;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  transition: transform .15s, background .15s, border-color .15s, box-shadow .15s;
}

[data-theme=light] .cat-tab,
[data-theme=lantern] .cat-tab {
  background: #FFFFFF;
  color: #0F172A;
  border-color: #D97706;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.08);
}

.cat-tab.active, .cat-tab:hover {
  background: linear-gradient(135deg, #FDE047 0%, #F59E0B 100%);
  color: #1C1008;
  border-color: #FEF9C3;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(245, 158, 11, 0.38);
}

.lesson-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}

.lesson-item {
  padding: 26px 28px;
  border: 1.5px solid var(--line);
  border-top: 4px solid var(--accent-warm);
  background: var(--surface);
  text-align: left;
  border-radius: 20px;
  color: var(--ink);
  box-shadow: var(--shadow);
  transition: transform .18s, border-color .18s, box-shadow .18s;
}

/* Distinct Category Accent Colors so Cards Don't All Look the Same */
.lesson-item.cat-files {
  border-top-color: #F59E0B;
}

.lesson-item.cat-comfort {
  border-top-color: #38BDF8;
}

.lesson-item.cat-photos {
  border-top-color: #34D399;
}

.lesson-item.cat-calls {
  border-top-color: #FB7185;
}

.lesson-item.cat-passwords {
  border-top-color: #A78BFA;
}

.lesson-item.cat-wifi {
  border-top-color: #06B6D4;
}

.lesson-item.cat-sound {
  border-top-color: #F97316;
}

.lesson-item.cat-battery {
  border-top-color: #22C55E;
}

.lesson-item.featured-lesson-card {
  border: 2px solid rgba(251, 191, 36, 0.55);
  border-top: 5px solid #FBBF24;
  background:
    radial-gradient(circle at 92% 12%, rgba(251, 191, 36, 0.14) 0%, transparent 55%),
    var(--surface);
}

.lesson-item:hover {
  border-color: var(--accent-warm);
  transform: translateY(-3px);
  box-shadow: 0 18px 42px rgba(245, 158, 11, 0.16), var(--shadow-lg);
}

.card-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.cat-pill {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  padding: 4px 12px;
  border-radius: 999px;
}

.cat-pill-files {
  background: rgba(245, 158, 11, 0.18);
  color: #FBBF24;
  border: 1px solid rgba(245, 158, 11, 0.38);
}

.cat-pill-comfort {
  background: rgba(56, 189, 248, 0.18);
  color: #38BDF8;
  border: 1px solid rgba(56, 189, 248, 0.38);
}

.cat-pill-photos {
  background: rgba(52, 211, 153, 0.18);
  color: #34D399;
  border: 1px solid rgba(52, 211, 153, 0.38);
}

.cat-pill-calls {
  background: rgba(251, 113, 133, 0.18);
  color: #FB7185;
  border: 1px solid rgba(251, 113, 133, 0.38);
}

.cat-pill-passwords {
  background: rgba(167, 139, 250, 0.18);
  color: #C4B5FD;
  border: 1px solid rgba(167, 139, 250, 0.38);
}

.cat-pill-wifi {
  background: rgba(6, 182, 212, 0.18);
  color: #22D3EE;
  border: 1px solid rgba(6, 182, 212, 0.38);
}

.cat-pill-sound {
  background: rgba(249, 115, 22, 0.18);
  color: #FB923C;
  border: 1px solid rgba(249, 115, 22, 0.38);
}

.cat-pill-battery {
  background: rgba(34, 197, 94, 0.18);
  color: #4ADE80;
  border: 1px solid rgba(34, 197, 94, 0.38);
}

[data-theme=light] .cat-pill-files,
[data-theme=lantern] .cat-pill-files { color: #B45309; }
[data-theme=light] .cat-pill-comfort,
[data-theme=lantern] .cat-pill-comfort { color: #0369A1; }
[data-theme=light] .cat-pill-photos,
[data-theme=lantern] .cat-pill-photos { color: #047857; }
[data-theme=light] .cat-pill-calls,
[data-theme=lantern] .cat-pill-calls { color: #BE123C; }
[data-theme=light] .cat-pill-passwords,
[data-theme=lantern] .cat-pill-passwords { color: #6D28D9; }
[data-theme=light] .cat-pill-wifi,
[data-theme=lantern] .cat-pill-wifi { color: #0E7490; }
[data-theme=light] .cat-pill-sound,
[data-theme=lantern] .cat-pill-sound { color: #C2410C; }
[data-theme=light] .cat-pill-battery,
[data-theme=lantern] .cat-pill-battery { color: #15803D; }

/* "+ More Questions" Expandable Drawers (Hero & Library) */
.hero-more-questions-drawer {
  margin-top: 14px;
  padding: 16px 18px;
  border-radius: 18px;
  background: var(--surface);
  border: 2px solid rgba(251, 191, 36, 0.45);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.35);
  animation: appear 0.2s ease-out;
}

.drawer-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.drawer-title {
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--accent-warm);
}

.drawer-close-btn {
  min-height: 32px;
  padding: 4px 10px;
  font-size: 0.85rem;
}

.extra-chip-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.more-library-drawer-wrap {
  margin-top: var(--space-8);
}

.more-questions-banner-btn {
  width: 100%;
  min-height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 24px 28px;
  border-radius: 20px;
  border: 2px solid rgba(251, 191, 36, 0.55);
  background:
    radial-gradient(circle at 20% 50%, rgba(251, 191, 36, 0.20) 0%, transparent 55%),
    var(--surface);
  color: var(--ink);
  text-align: center;
  box-shadow: var(--shadow-lg);
  transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
}

.more-questions-banner-btn:hover {
  transform: translateY(-2px);
  border-color: #FBBF24;
  box-shadow: 0 18px 44px rgba(245, 158, 11, 0.22), var(--shadow-lg);
}

.more-q-badge {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, #FBBF24 0%, #D97706 100%);
  color: #1C1008;
  font-size: 1.4rem;
  font-weight: 900;
  display: grid;
  place-items: center;
  flex: none;
  box-shadow: 0 6px 16px rgba(245, 158, 11, 0.35);
}

.more-q-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.more-q-text strong {
  font-size: clamp(1.3rem, 1.16rem + 0.45vw, 1.54rem);
  font-weight: 800;
  line-height: 1.25;
  color: var(--ink);
}

.more-library-expanded-zone {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1.5px dashed rgba(251, 191, 36, 0.38);
  animation: appear 0.22s ease-out;
}

.more-drawer-header {
  margin-bottom: var(--space-5);
}

/* 100% Anonymous Feedback & Question Queue Styles (v3.4) */
.feedback-nav-btn {
  border: 1px solid rgba(251, 191, 36, 0.45) !important;
  background: rgba(245, 158, 11, 0.12) !important;
  color: var(--accent-warm) !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  padding: 6px 14px !important;
}

.anonymous-feedback-callout {
  margin-top: var(--space-8);
  padding: 24px 28px;
  border-radius: 22px;
  border: 2px solid rgba(52, 211, 153, 0.45);
  background:
    radial-gradient(circle at 12% 50%, rgba(16, 185, 129, 0.16) 0%, transparent 55%),
    var(--surface);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  box-shadow: var(--shadow);
}

.anonymous-feedback-callout h3 {
  margin-top: 8px;
  margin-bottom: 6px;
  font-size: clamp(1.22rem, 1.1rem + 0.35vw, 1.42rem);
}

.anonymous-feedback-callout p {
  max-width: 60ch;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.55;
}

.anon-trust-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.20);
  color: #34D399;
  border: 1px solid rgba(52, 211, 153, 0.45);
}

[data-theme=light] .anon-trust-pill,
[data-theme=lantern] .anon-trust-pill {
  color: #047857;
}

.anon-modal-banner {
  padding: 12px 16px;
  border-radius: 14px;
  background: rgba(16, 185, 129, 0.14);
  border: 1.5px solid rgba(52, 211, 153, 0.45);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.anon-modal-banner strong {
  color: #34D399;
  font-size: 0.98rem;
}

[data-theme=light] .anon-modal-banner strong,
[data-theme=lantern] .anon-modal-banner strong {
  color: #047857;
}

.anon-modal-banner span {
  font-size: 0.88rem;
  color: var(--muted);
}

.fb-mood-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.fb-mood-btn {
  flex: 1;
  min-width: 155px;
  padding: 10px 14px;
  font-size: 0.9rem;
  font-weight: 700;
  border: 1.5px solid var(--line);
  background: var(--soft);
  color: var(--ink);
  border-radius: 12px;
}

.fb-mood-btn.active {
  background: linear-gradient(135deg, #FBBF24 0%, #D97706 100%);
  color: #1C1008;
  border-color: #FDE68A;
  box-shadow: 0 6px 16px rgba(245, 158, 11, 0.28);
}

.lesson-top-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.share-guide-btn {
  border-color: rgba(56, 189, 248, 0.5) !important;
  background: rgba(56, 189, 248, 0.14) !important;
  color: #38BDF8 !important;
  font-weight: 700 !important;
}

[data-theme=light] .share-guide-btn,
[data-theme=lantern] .share-guide-btn {
  color: #0369A1 !important;
}

.feedback-inbox-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 360px;
  overflow-y: auto;
  padding-right: 4px;
}

.feedback-inbox-item {
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--soft);
  border: 1px solid var(--line);
}

.fb-item-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  font-size: 0.82rem;
  color: var(--muted);
  margin-bottom: 6px;
}

.fb-mood-pill {
  font-size: 0.78rem;
  font-weight: 800;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(251, 191, 36, 0.22);
  color: var(--accent-warm);
}

.fb-item-text {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}

.feedback-empty-box {
  padding: 18px;
  border-radius: 14px;
  background: var(--soft);
  border: 1px dashed var(--line);
  color: var(--muted);
  font-size: 0.95rem;
}

.featured-pill {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  color: #1C1008;
  background: linear-gradient(135deg, #FDE68A, #F59E0B);
  padding: 4px 12px;
  border-radius: 999px;
}

.lesson-item h3 {
  margin-bottom: 8px;
  font-size: clamp(1.22rem, 1.12rem + .35vw, 1.4rem);
  line-height: 1.3;
}

.card-desc {
  font-size: clamp(1rem, .96rem + .18vw, 1.08rem);
  line-height: 1.55;
  color: var(--muted);
}

.card-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.card-action-row .btn {
  padding: 11px 18px;
  font-size: 0.96rem;
}

.notice {
  padding: var(--space-4);
  background: var(--soft);
  border-left: 4px solid var(--accent);
  border-radius: var(--r-sm);
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  line-height: 1.6;
}

.breadcrumb {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  font-size: var(--text-sm);
  color: var(--muted);
  margin-bottom: var(--space-3);
}

.breadcrumb button {
  padding: 4px 8px;
  background: none;
  border: 0;
  color: var(--muted);
  font-weight: 600;
}

/* Full-Width Lesson Stage & Horizontal 4-Step Progress Bar */
.lesson-stage-full {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.stepnav-horizontal {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
}

.stepnav-horizontal button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  color: var(--muted);
  padding: 12px 16px;
  text-align: left;
  font-size: 0.96rem;
  transition: all 0.15s ease;
}

.stepnav-horizontal button:hover {
  border-color: var(--accent-warm);
  color: var(--ink);
}

.stepnav-horizontal button.active {
  background: var(--accent-glow);
  border: 2px solid var(--accent-warm);
  color: var(--ink);
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(245, 158, 11, 0.18);
}

.stepnav-horizontal button.completed-step {
  border-color: rgba(52, 211, 153, 0.45);
}

.stepnav-horizontal button.completed-step .step-number {
  color: #10B981;
}

.step-number {
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  letter-spacing: 0.08em;
  font-weight: 800;
  color: var(--accent-warm);
}

.step-name-label {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--ink);
}

.stage {
  border: 2px solid rgba(251, 191, 36, 0.35);
  background: var(--surface);
  border-radius: 24px;
  overflow: visible;
  box-shadow: var(--shadow-lg);
}

.stage-meta {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--line);
  font-size: 0.84rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--accent-warm);
}

.stage-split {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--space-6);
  padding: var(--space-6);
  align-items: center;
}

.step-pill-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--space-3);
}

.step-badge-num {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--accent-glow);
  border: 1px solid rgba(251, 191, 36, 0.45);
  color: var(--accent-warm);
  font-size: 0.86rem;
  font-weight: 800;
}

.small-voice-btn {
  padding: 7px 14px !important;
  font-size: 0.88rem !important;
  min-height: 38px !important;
}

.stage-body h2 {
  font-size: clamp(1.42rem, 1.2rem + 0.6vw, 1.82rem);
  margin-bottom: var(--space-3);
}

.stage-copy {
  max-width: 58ch;
  font-size: clamp(1.05rem, 1rem + 0.2vw, 1.16rem);
  line-height: 1.65;
}

.lookfor-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-block: var(--space-4);
  padding: var(--space-4);
  background: var(--soft);
  border: 1.5px solid rgba(251, 191, 36, 0.35);
  border-radius: 16px;
}

.lookfor-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
  color: #92400E;
  display: grid;
  place-items: center;
  flex: none;
  box-shadow: 0 6px 16px rgba(245, 158, 11, 0.22);
}

.lookfor-icon svg {
  width: 28px;
  height: 28px;
}

.lookfor-label {
  display: block;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .07em;
  color: var(--accent-warm);
}

.lookfor-card strong {
  display: block;
  font-size: 1.08rem;
  margin-top: 2px;
}

.lookfor-cue {
  display: block;
  font-size: 0.92rem;
  color: var(--muted);
  margin-top: 2px;
}

.practice {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-4);
  border-radius: 14px;
  border: 2px dashed var(--accent-warm);
  background: var(--accent-glow);
  color: var(--ink);
  font-size: 0.98rem;
}

.practice strong {
  white-space: nowrap;
}

.step-note-inline {
  margin-top: var(--space-3);
  font-size: 0.92rem;
  color: var(--muted);
  line-height: 1.55;
}

/* 3D SUPERHERO LANNY CO-PILOT + REALISTIC IOS 18 IPHONE STAGE */
.stage-phone-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  background:
    radial-gradient(circle at 26% 52%, rgba(251, 191, 36, 0.18) 0%, transparent 55%),
    linear-gradient(180deg, #070E1E 0%, #0B1326 100%);
  padding: var(--space-5);
  border-radius: 22px;
  border: 2px solid rgba(251, 191, 36, 0.38);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 18px 44px rgba(0, 0, 0, 0.35);
  color: #F8FAFC;
}

.caricature-top-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-bottom: 12px;
}

.caricature-bubble.lanny-3d-speech-bubble {
  background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%);
  border: 2px solid #FBBF24;
  border-radius: 18px;
  padding: 10px 18px;
  font-size: 1rem;
  font-weight: 700;
  color: #FFFFFF;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4), 0 0 20px rgba(251, 191, 36, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  position: relative;
  text-align: center;
  width: 100%;
}

.bubble-lantern-badge {
  background: linear-gradient(135deg, #FDE68A, #F59E0B);
  color: #1C1008;
  font-size: 0.82rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.bubble-main-text {
  color: #FEF3C7;
  font-size: 1.02rem;
}

/* Stage Anchor: Tall, Lean Realistic iPhone with High-Mobility 3D Lanny Flying Around It */
.lanny-phone-theater {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  position: relative;
  padding: 16px 0 46px;
  overflow: visible;
}

.iphone-stage-anchor {
  position: relative;
  display: inline-flex;
  justify-content: center;
  transition: margin 0.72s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Reserve clear side space on whichever side Lanny is hovering so he never clips or covers the phone screen */
.iphone-stage-anchor.side-left {
  margin-left: 148px;
  margin-right: 14px;
}

.iphone-stage-anchor.side-right {
  margin-left: 14px;
  margin-right: 148px;
}

/* Full Attached 3D Superhero Lanny Actor (248x332 High-Res 896x1200 PBR Rig):
   - Positioned further outside the phone (-194px and +208px) so Lanny's body NEVER overlaps the phone screen while his outstretched pointing arm reaches the target! */
.lanny-copilot-actor {
  position: absolute;
  width: 248px;
  height: 332px;
  z-index: 25;
  pointer-events: none;
  will-change: top, left, transform;
  transition:
    top 0.72s cubic-bezier(0.22, 1, 0.36, 1),
    left 0.72s cubic-bezier(0.22, 1, 0.36, 1);
}

.lanny-copilot-actor.side-left {
  left: -194px;
  right: auto;
}

.lanny-copilot-actor.side-right {
  left: 208px;
  right: auto;
}

/* Vertical Target Alignment (Outstretched fingertip is ~82px from top of 248x332 .lanny-copilot-actor) */
.lanny-copilot-actor.level-top    { top: -18px; } /* Fingertip at y = 64px  (Top Nav Bar / Top Safari Bar) */
.lanny-copilot-actor.level-upper  { top: 54px;  } /* Fingertip at y = 136px (Upper Row / App Tile / Info Button) */
.lanny-copilot-actor.level-mid    { top: 130px; } /* Fingertip at y = 212px (Middle Row / Photo / Save Circle / Checkmark Circle) */
.lanny-copilot-actor.level-lower  { top: 222px; } /* Fingertip at y = 304px (Lower Row / Share Sheet / Photos Grid / QR Pill) */
.lanny-copilot-actor.level-bottom { top: 354px; } /* Fingertip at y = 436px (Bottom Toolbar / Compose / Slider / Shutter / Trash) */

.copilot-flip-wrap {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.68s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 3D Perspective Turn When Lanny Flies to the Right Side of the Phone So He Banks & Rotates in 3D Space */
.lanny-copilot-actor.side-left .copilot-flip-wrap {
  transform: perspective(850px) scaleX(1) rotateY(6deg);
}

.lanny-copilot-actor.side-right .copilot-flip-wrap {
  transform: perspective(850px) scaleX(-1) rotateY(6deg);
}

/* Synchronized 2.4s Natural 3D Flight Banking, Cape Wave & Outstretched Arm Reach:
   Lanny changes his 3D flying orientation and extends his right arm outward from the shoulder while keeping his body clear of the phone screen! */
.copilot-rig.lanny-3d-rig {
  width: 248px;
  height: 332px;
  max-width: 248px;
  -webkit-mask-image: none;
  mask-image: none;
  transform-style: preserve-3d;
  filter: drop-shadow(0 16px 26px rgba(0, 0, 0, 0.62));
  animation: lannyReachAndTouch 2.4s infinite cubic-bezier(0.22, 1, 0.36, 1);
}

.copilot-rig .lanny-3d-point,
.copilot-rig .vfx-point-sync {
  animation: lannyTouchArm 2.4s infinite cubic-bezier(0.22, 1, 0.36, 1);
}

.copilot-rig .lanny-3d-wave {
  animation: lannyFlightBalanceArm 2.4s infinite ease-in-out;
}

@keyframes lannyReachAndTouch {
  0%, 16%, 100% {
    transform: perspective(820px) translate3d(-8px, 6px, -10px) rotateZ(-5deg) rotateY(-12deg) rotateX(4deg) scale(0.98);
  }
  34%, 60% {
    transform: perspective(820px) translate3d(16px, -7px, 22px) rotateZ(6.5deg) rotateY(14deg) rotateX(-4deg) scale(1.04);
    filter: drop-shadow(0 22px 32px rgba(251, 191, 36, 0.46));
  }
}

/* Gesture-Specific Synchronized 3D Lanny Choreography (100% Locked to Every Step Description) */
.lanny-copilot-actor.gesture-swipe-down-center .copilot-rig,
.lanny-copilot-actor.gesture-swipe-down-corner .copilot-rig {
  animation: lannyGestureSwipeDown 2.4s infinite cubic-bezier(0.22, 1, 0.36, 1);
}

.lanny-copilot-actor.gesture-swipe-up-tap .copilot-rig {
  animation: lannyGestureSwipeUpTap 2.4s infinite cubic-bezier(0.22, 1, 0.36, 1);
}

.lanny-copilot-actor.gesture-swipe-up-bottom .copilot-rig {
  animation: lannyGestureSwipeUpBottom 2.4s infinite cubic-bezier(0.22, 1, 0.36, 1);
}

.lanny-copilot-actor.gesture-slide-right .copilot-rig {
  animation: lannyGestureSlideRight 2.4s infinite cubic-bezier(0.22, 1, 0.36, 1);
}

.lanny-copilot-actor.gesture-swipe-left .copilot-rig {
  animation: lannyGestureSwipeLeft 2.4s infinite cubic-bezier(0.22, 1, 0.36, 1);
}

.lanny-copilot-actor.gesture-push-toggle .copilot-rig {
  animation: lannyGesturePushToggle 2.4s infinite cubic-bezier(0.22, 1, 0.36, 1);
}

.lanny-copilot-actor.gesture-press-hold .copilot-rig {
  animation: lannyGesturePressHold 2.4s infinite cubic-bezier(0.22, 1, 0.36, 1);
}

.lanny-copilot-actor.gesture-double-tap .copilot-rig {
  animation: lannyGestureDoubleTap 2.4s infinite cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes lannyGestureSwipeDown {
  0%, 14%, 100% {
    transform: perspective(820px) translate3d(-6px, -18px, -8px) rotateZ(-6deg) rotateY(-10deg) scale(0.98);
  }
  28% {
    transform: perspective(820px) translate3d(15px, -22px, 18px) rotateZ(2deg) rotateY(12deg) scale(1.03);
  }
  58%, 68% {
    transform: perspective(820px) translate3d(18px, 32px, 22px) rotateZ(12deg) rotateY(15deg) rotateX(-8deg) scale(1.04);
    filter: drop-shadow(0 22px 32px rgba(251, 191, 36, 0.48));
  }
}

@keyframes lannyGestureSwipeUpTap {
  0%, 14%, 100% {
    transform: perspective(820px) translate3d(-6px, 18px, -8px) rotateZ(-4deg) rotateY(-10deg) scale(0.98);
  }
  24% {
    transform: perspective(820px) translate3d(12px, 22px, 14px) rotateZ(8deg) rotateY(10deg) scale(1.02);
  }
  44% {
    transform: perspective(820px) translate3d(14px, -20px, 18px) rotateZ(-5deg) rotateY(12deg) scale(1.03);
  }
  56%, 68% {
    transform: perspective(820px) translate3d(19px, -6px, 24px) rotateZ(6deg) rotateY(15deg) scale(1.05);
    filter: drop-shadow(0 22px 32px rgba(251, 191, 36, 0.48));
  }
}

@keyframes lannyGestureSwipeUpBottom {
  0%, 16%, 100% {
    transform: perspective(820px) translate3d(-6px, 14px, -8px) rotateZ(-4deg) rotateY(-10deg) scale(0.98);
  }
  28% {
    transform: perspective(820px) translate3d(15px, 18px, 16px) rotateZ(9deg) rotateY(12deg) scale(1.03);
  }
  58%, 68% {
    transform: perspective(820px) translate3d(18px, -36px, 22px) rotateZ(-9deg) rotateY(15deg) rotateX(8deg) scale(1.04);
    filter: drop-shadow(0 22px 32px rgba(251, 191, 36, 0.48));
  }
}

@keyframes lannyGestureSlideRight {
  0%, 16%, 100% {
    transform: perspective(820px) translate3d(-10px, 4px, -8px) rotateZ(-5deg) rotateY(-12deg) scale(0.98);
  }
  28% {
    transform: perspective(820px) translate3d(6px, -2px, 14px) rotateZ(2deg) rotateY(8deg) scale(1.02);
  }
  58%, 68% {
    transform: perspective(820px) translate3d(34px, -6px, 24px) rotateZ(9deg) rotateY(18deg) scale(1.05);
    filter: drop-shadow(0 22px 32px rgba(251, 191, 36, 0.5));
  }
}

@keyframes lannyGestureSwipeLeft {
  0%, 16%, 100% {
    transform: perspective(820px) translate3d(-8px, 4px, -8px) rotateZ(-5deg) rotateY(-12deg) scale(0.98);
  }
  28% {
    transform: perspective(820px) translate3d(8px, -2px, 14px) rotateZ(3deg) rotateY(8deg) scale(1.02);
  }
  58%, 68% {
    transform: perspective(820px) translate3d(30px, -4px, 24px) rotateZ(8deg) rotateY(16deg) scale(1.04);
    filter: drop-shadow(0 22px 32px rgba(251, 191, 36, 0.48));
  }
}

@keyframes lannyGesturePushToggle {
  0%, 18%, 100% {
    transform: perspective(820px) translate3d(-8px, 5px, -8px) rotateZ(-5deg) rotateY(-10deg) scale(0.98);
  }
  30% {
    transform: perspective(820px) translate3d(10px, -3px, 14px) rotateZ(3deg) rotateY(10deg) scale(1.02);
  }
  52%, 66% {
    transform: perspective(820px) translate3d(24px, -5px, 22px) rotateZ(8deg) rotateY(16deg) scale(1.04);
    filter: drop-shadow(0 22px 32px rgba(52, 199, 89, 0.45));
  }
}

@keyframes lannyGesturePressHold {
  0%, 16%, 100% {
    transform: perspective(820px) translate3d(-8px, 5px, -8px) rotateZ(-5deg) rotateY(-10deg) scale(0.98);
  }
  28%, 72% {
    transform: perspective(820px) translate3d(18px, -6px, 24px) rotateZ(6deg) rotateY(15deg) scale(1.05);
    filter: drop-shadow(0 0 28px rgba(253, 224, 71, 0.65));
  }
}

@keyframes lannyGestureDoubleTap {
  0%, 16%, 100% {
    transform: perspective(820px) translate3d(-8px, 5px, -8px) rotateZ(-5deg) rotateY(-10deg) scale(0.98);
  }
  32% {
    transform: perspective(820px) translate3d(18px, -6px, 22px) rotateZ(6.5deg) rotateY(14deg) scale(1.04);
  }
  44% {
    transform: perspective(820px) translate3d(4px, 0px, 8px) rotateZ(1deg) rotateY(4deg) scale(1.0);
  }
  56%, 64% {
    transform: perspective(820px) translate3d(20px, -7px, 24px) rotateZ(7deg) rotateY(16deg) scale(1.05);
    filter: drop-shadow(0 22px 32px rgba(251, 191, 36, 0.5));
  }
}

@keyframes lannyTouchArm {
  0%, 16%, 100% {
    transform: translate3d(-2px, 3px, 0) rotate(6deg) scaleX(0.98);
  }
  34%, 60% {
    transform: translate3d(18px, -4px, 0) rotate(-9.5deg) scaleX(1.13) scaleY(1.03);
  }
}

@keyframes lannyFlightBalanceArm {
  0%, 16%, 100% {
    transform: rotate(-10deg) translateY(2px);
  }
  34%, 60% {
    transform: rotate(15deg) translateY(-4px) scale(1.04);
  }
}

/* Dynamic 3D Mid-Air Swoop, Multi-Axis Banking & 3D Rotation Physics When Lanny Flies Between Steps */
.lanny-copilot-actor.is-flying.fly-dir-right .copilot-rig {
  animation: lannyFlightSwoopRight 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.lanny-copilot-actor.is-flying.fly-dir-left .copilot-rig {
  animation: lannyFlightSwoopLeft 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.lanny-copilot-actor.is-flying.fly-dir-vertical .copilot-rig {
  animation: lannyFlightSwoopVert 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.lanny-copilot-actor.is-flying.fly-dir-loop .copilot-rig {
  animation: lannyFlightLoop 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes lannyFlightSwoopRight {
  0%   { transform: perspective(850px) translate3d(0, 0, 0) rotateY(-38deg) rotateZ(-14deg) scale(0.94); }
  45%  { transform: perspective(850px) translate3d(0, -38px, 48px) rotateY(28deg) rotateZ(16deg) rotateX(10deg) scale(1.14); filter: drop-shadow(0 28px 38px rgba(251, 191, 36, 0.55)); }
  100% { transform: perspective(850px) translate3d(0, 0, 0) rotateY(0deg) rotateZ(0deg) scale(1); }
}

@keyframes lannyFlightSwoopLeft {
  0%   { transform: perspective(850px) translate3d(0, 0, 0) rotateY(38deg) rotateZ(14deg) scale(0.94); }
  45%  { transform: perspective(850px) translate3d(0, -38px, 48px) rotateY(-28deg) rotateZ(-16deg) rotateX(10deg) scale(1.14); filter: drop-shadow(0 28px 38px rgba(251, 191, 36, 0.55)); }
  100% { transform: perspective(850px) translate3d(0, 0, 0) rotateY(0deg) rotateZ(0deg) scale(1); }
}

@keyframes lannyFlightSwoopVert {
  0%   { transform: perspective(850px) translate3d(0, 0, 0) rotateY(-18deg) rotateX(-12deg) scale(0.96); }
  45%  { transform: perspective(850px) translate3d(12px, -26px, 38px) rotateY(22deg) rotateZ(10deg) rotateX(8deg) scale(1.11); filter: drop-shadow(0 24px 34px rgba(251, 191, 36, 0.5)); }
  100% { transform: perspective(850px) translate3d(0, 0, 0) rotateY(0deg) rotateX(0deg) scale(1); }
}

@keyframes lannyFlightLoop {
  0%   { transform: perspective(850px) translate3d(0, 0, 0) rotateY(0deg) rotateZ(0deg) scale(1); }
  38%  { transform: perspective(850px) translate3d(-44px, -42px, 46px) rotateY(-32deg) rotateZ(-16deg) rotateX(10deg) scale(1.14); filter: drop-shadow(0 28px 38px rgba(251, 191, 36, 0.58)); }
  72%  { transform: perspective(850px) translate3d(18px, -10px, 22px) rotateY(18deg) rotateZ(8deg) scale(1.06); }
  100% { transform: perspective(850px) translate3d(0, 0, 0) rotateY(0deg) rotateZ(0deg) scale(1); }
}

/* Boost Boot Afterburner Plumes & Billowing Cape During Active Flight */
.lanny-copilot-actor.is-flying .vfx-thruster-plume {
  transform: scaleY(1.65) scaleX(1.25) !important;
  opacity: 1 !important;
}

.lanny-copilot-actor.is-flying .lanny-3d-cape {
  transform: perspective(560px) rotate(-12deg) skewX(-10deg) scaleX(1.15) !important;
}

/* Glowing Golden Touch-Guide Beam Extending from Lanny's Outstretched Fingertip (212px, 82px) onto the Target */
.lanny-attached-beam {
  position: absolute;
  left: 210px;
  top: 77px;
  width: 58px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, #FDE047 0%, rgba(245, 158, 11, 0.88) 65%, rgba(245, 158, 11, 0) 100%);
  box-shadow: 0 0 14px 3px rgba(251, 191, 36, 0.82);
  pointer-events: none;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  animation: beamReachTouch 2.4s infinite cubic-bezier(0.22, 1, 0.36, 1);
}

.beam-arrow-tip {
  color: #FEF08A;
  font-size: 12px;
  line-height: 1;
  margin-right: -3px;
  text-shadow: 0 0 10px #F59E0B;
}

@keyframes beamReachTouch {
  0%, 16%, 100% { opacity: 0.48; transform: translateX(0px) scaleX(0.82); transform-origin: left center; }
  34%, 60%      { opacity: 1; transform: translateX(22px) scaleX(1.18); transform-origin: left center; }
}

/* Gesture-Synchronized Golden Pointer Beam Motions */
.lanny-copilot-actor.gesture-swipe-down-center .lanny-attached-beam,
.lanny-copilot-actor.gesture-swipe-down-corner .lanny-attached-beam {
  animation: beamSwipeDown 2.4s infinite cubic-bezier(0.22, 1, 0.36, 1);
}

.lanny-copilot-actor.gesture-swipe-up-tap .lanny-attached-beam,
.lanny-copilot-actor.gesture-swipe-up-bottom .lanny-attached-beam {
  animation: beamSwipeUp 2.4s infinite cubic-bezier(0.22, 1, 0.36, 1);
}

.lanny-copilot-actor.gesture-slide-right .lanny-attached-beam,
.lanny-copilot-actor.gesture-swipe-left .lanny-attached-beam,
.lanny-copilot-actor.gesture-push-toggle .lanny-attached-beam {
  animation: beamSlideAcross 2.4s infinite cubic-bezier(0.22, 1, 0.36, 1);
}

.lanny-copilot-actor.gesture-press-hold .lanny-attached-beam {
  animation: beamPressHold 2.4s infinite cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes beamSwipeDown {
  0%, 14%, 100% { opacity: 0.4; transform: translate3d(0px, -16px, 0) rotate(-14deg) scaleX(0.8); transform-origin: left center; }
  28%           { opacity: 0.95; transform: translate3d(16px, -18px, 0) rotate(-8deg) scaleX(1.1); transform-origin: left center; }
  58%, 68%      { opacity: 1; transform: translate3d(20px, 28px, 0) rotate(18deg) scaleX(1.22); transform-origin: left center; }
}

@keyframes beamSwipeUp {
  0%, 14%, 100% { opacity: 0.4; transform: translate3d(0px, 14px, 0) rotate(12deg) scaleX(0.8); transform-origin: left center; }
  26%           { opacity: 0.95; transform: translate3d(16px, 16px, 0) rotate(10deg) scaleX(1.1); transform-origin: left center; }
  56%, 68%      { opacity: 1; transform: translate3d(20px, -22px, 0) rotate(-14deg) scaleX(1.22); transform-origin: left center; }
}

@keyframes beamSlideAcross {
  0%, 16%, 100% { opacity: 0.42; transform: translateX(-4px) scaleX(0.75); transform-origin: left center; }
  28%           { opacity: 0.95; transform: translateX(8px) scaleX(0.95); transform-origin: left center; }
  58%, 68%      { opacity: 1; transform: translateX(34px) scaleX(1.38); transform-origin: left center; }
}

@keyframes beamPressHold {
  0%, 16%, 100% { opacity: 0.45; transform: translateX(0px) scaleX(0.82); transform-origin: left center; }
  28%, 72%      { opacity: 1; transform: translateX(22px) scaleX(1.24); box-shadow: 0 0 22px 6px rgba(253, 224, 71, 0.95); transform-origin: left center; }
}

/* ============================================================================
   REAL-TIME SYNCHRONIZED IPHONE SCREEN GESTURE REACTIONS (2.4s MASTER CLOCK)
   ============================================================================ */

/* 1. Center Swipe-Down Search Bar Pull-Down Indicator (home-search-files, search-passwords-app, search-magnifier-app) */
.sim-center-swipe-pull {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  margin-bottom: 10px;
  pointer-events: none;
  animation: simCenterSwipePullDown 2.4s infinite cubic-bezier(0.22, 1, 0.36, 1);
}

.swipe-pull-pill {
  background: rgba(255, 255, 255, 0.94);
  color: #0F172A;
  font-size: 11px;
  font-weight: 800;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1.5px solid #38BDF8;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
  white-space: nowrap;
}

.swipe-pull-arrow {
  color: #FDE047;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.75);
}

@keyframes simCenterSwipePullDown {
  0%, 18%, 84%, 100% {
    opacity: 0.32;
    transform: translateY(-16px) scale(0.92);
  }
  30% {
    opacity: 0.95;
    transform: translateY(-10px) scale(0.98);
  }
  56%, 68% {
    opacity: 1;
    transform: translateY(8px) scale(1.05);
  }
}

/* 2. 1-Second Press-and-Hold Golden Progress Ring (lockscreen-flashlight-btn) */
.sim-hold-ring {
  position: absolute;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  border: 3.5px solid #FDE047;
  box-shadow: 0 0 22px rgba(253, 224, 71, 0.85), inset 0 0 14px rgba(253, 224, 71, 0.45);
  opacity: 0;
  pointer-events: none;
  animation: simHoldRingFill 2.4s infinite cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes simHoldRingFill {
  0%, 20%, 82%, 100% {
    opacity: 0;
    transform: scale(0.78) rotate(0deg);
  }
  30% {
    opacity: 0.85;
    transform: scale(0.96) rotate(45deg);
  }
  58%, 72% {
    opacity: 1;
    transform: scale(1.12) rotate(180deg);
  }
}

/* 3. Synchronized Slider Drag Right + Live Text Enlargement (text-size-slider & magnifier-zoom-slider) */
.gesture-slide-right .sim-slider-knob {
  animation: simSliderKnobDrag 2.4s infinite cubic-bezier(0.22, 1, 0.36, 1);
}

.gesture-slide-right .sim-slider-fill {
  animation: simSliderFillDrag 2.4s infinite cubic-bezier(0.22, 1, 0.36, 1);
}

.gesture-slide-right .sim-preview-text-card strong,
.gesture-slide-right .sim-scan-viewfinder strong {
  display: inline-block;
  transform-origin: center center;
  animation: simSliderLiveTextGrow 2.4s infinite cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes simSliderKnobDrag {
  0%, 22%, 86%, 100% { left: 30%; }
  56%, 72%           { left: 78%; }
}

@keyframes simSliderFillDrag {
  0%, 22%, 86%, 100% { width: 34%; }
  56%, 72%           { width: 82%; }
}

@keyframes simSliderLiveTextGrow {
  0%, 22%, 86%, 100% { transform: scale(0.92); }
  56%, 72%           { transform: scale(1.16); }
}

/* 4. Synchronized Left-Swipe Row Reveal (messages-swipe-left-bell) */
.gesture-swipe-left .sim-swipe-left-row {
  animation: simRowSlideLeft 2.4s infinite cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes simRowSlideLeft {
  0%, 20%, 86%, 100% { transform: translateX(8px); }
  54%, 72%           { transform: translateX(-10px); }
}

/* 5. Synchronized Toggle Switch Push from Gray Off -> Green On (silence-toggle-on) */
.gesture-push-toggle .sim-toggle.on {
  animation: simToggleTrackFlip 2.4s infinite cubic-bezier(0.22, 1, 0.36, 1);
}

.gesture-push-toggle .sim-toggle.on::after {
  animation: simToggleKnobPush 2.4s infinite cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes simToggleTrackFlip {
  0%, 26%, 88%, 100% { background: #CBD5E1; }
  48%, 76%           { background: #34C759; }
}

@keyframes simToggleKnobPush {
  0%, 26%, 88%, 100% { transform: translateX(-16px); }
  48%, 76%           { transform: translateX(0px); }
}

/* 6. Synchronized Upward Scroll Before Tap (gesture-swipe-up-tap) */
.gesture-swipe-up-tap .sim-sheet,
.gesture-swipe-up-tap .sim-list-group {
  animation: simListScrollUp 2.4s infinite cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes simListScrollUp {
  0%, 18%, 88%, 100% { transform: translateY(10px); }
  42%, 74%           { transform: translateY(0px); }
}

/* 7. Synchronized Password Dots Reveal on Tap (passwords-reveal-row) */
.sim-pw-reveal-wrap {
  position: relative;
  display: inline-grid;
  align-items: center;
  justify-items: end;
  font-weight: 800;
}

.sim-pw-dots,
.sim-pw-text {
  grid-area: 1 / 1;
}

.sim-pw-dots {
  letter-spacing: 2px;
  animation: simPwDotsHide 2.4s infinite cubic-bezier(0.22, 1, 0.36, 1);
}

.sim-pw-text {
  color: #007AFF;
  font-size: 12.5px;
  letter-spacing: 0.01em;
  animation: simPwTextShow 2.4s infinite cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes simPwDotsHide {
  0%, 28%, 84%, 100% { opacity: 1; }
  40%, 72%           { opacity: 0; }
}

@keyframes simPwTextShow {
  0%, 28%, 84%, 100% { opacity: 0; transform: scale(0.92); }
  40%, 72%           { opacity: 1; transform: scale(1.04); }
}

.layout-toggle {
  font-size: 0.88rem;
  color: #E2E8F0;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.layout-toggle button {
  min-height: 32px;
  padding: 4px 12px;
  font-size: 0.85rem;
  font-weight: 700;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(15, 23, 42, 0.8);
  color: #F8FAFC;
}

.layout-toggle button.active {
  background: linear-gradient(135deg, #FBBF24, #D97706);
  color: #1C1008;
  border-color: #FDE68A;
}

/* TALL, LEAN, TRUE-PROPORTION IPHONE 16 PRO CHASSIS & SCREEN (262px x 528px, ~9:18.5 Aspect Ratio) */
.iphone-frame.realistic-ios-phone {
  width: 262px;
  max-width: 262px;
  min-height: 528px;
  border: 8px solid #334155;
  outline: 2px solid #94A3B8;
  border-radius: 44px;
  background: #F2F2F7;
  box-shadow:
    0 24px 55px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(255, 255, 255, 0.15),
    inset 0 0 0 2px #0F172A;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: visible;
  position: relative;
  z-index: 4;
  color: #0F172A;
}

/* Physical Hardware Buttons on Left & Right Titanium Edges */
.hw-btn {
  position: absolute;
  background: linear-gradient(180deg, #94A3B8, #475569);
  border-radius: 3px;
  pointer-events: none;
}

.hw-action { left: -11px; top: 76px; width: 3.5px; height: 18px; }
.hw-vol-up { left: -11px; top: 106px; width: 3.5px; height: 34px; }
.hw-vol-down { left: -11px; top: 148px; width: 3.5px; height: 34px; }
.hw-power { right: -11px; top: 120px; width: 3.5px; height: 50px; }

.highlight-hw-buttons .hw-vol-up,
.highlight-hw-buttons .hw-power {
  background: #FBBF24;
  width: 6px;
  box-shadow: 0 0 14px 4px rgba(251, 191, 36, 0.95);
  animation: hwPulse 1s infinite alternate;
}

@keyframes hwPulse {
  0% { transform: scaleX(1); }
  100% { transform: scaleX(1.45); }
}

.iphone-statusbar.realistic-statusbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 18px 8px;
  font-size: 12px;
  font-weight: 800;
  background: #FFFFFF;
  color: #0F172A;
  border-radius: 34px 34px 0 0;
  border-bottom: 1px solid #E2E8F0;
}

.ios-time {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.iphone-dynamic-island {
  width: 76px;
  height: 20px;
  background: #020617;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 7px;
}

.island-lens {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle, #38BDF8 0%, #1E3A8A 70%);
}

.ios-status-icons {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #0F172A;
}

.caricature-screen-stage.realistic-screen-stage {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: visible;
}

.iphone-homebar-wrap {
  background: #F2F2F7;
  padding: 6px 0 9px;
  border-radius: 0 0 34px 34px;
}

.iphone-homebar {
  width: 108px;
  height: 4.5px;
  background: #0F172A;
  opacity: 0.75;
  border-radius: 99px;
  margin: 0 auto;
}

/* Realistic iOS 18 Daylight Screen Palette (High Contrast & Familiar to All iPhone Users) */
.sim-screen-inner {
  flex: 1;
  padding: 11px 11px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  background: #F2F2F7;
  color: #0F172A;
}

.sim-screen-inner.sim-homescreen {
  background: linear-gradient(160deg, #1E3A8A 0%, #0F172A 55%, #1E293B 100%);
  color: #FFFFFF;
}

.sim-screen-inner.sim-camera-dark {
  background: #090D16;
  color: #FFFFFF;
}

.sim-screen-inner.sim-dimmed-bg {
  background: #CBD5E1;
}

/* STEP 1 ISOLATED, HIGH-CONTRAST STARTING ICON STAGE (Zero Clutter Around the Starting Icon!) */
.sim-screen-inner.sim-isolated-start-screen {
  background:
    radial-gradient(circle at 50% 50%, rgba(56, 189, 248, 0.24) 0%, rgba(30, 58, 138, 0.34) 42%, #0B1528 74%, #050B14 100%);
  color: #FFFFFF;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 18px 14px;
}

.sim-screen-inner.sim-isolated-start-screen.pos-top {
  justify-content: flex-start;
  padding-top: 22px;
}

.sim-screen-inner.sim-isolated-start-screen.pos-bottom {
  justify-content: flex-end;
  padding-bottom: 22px;
}

.sim-hotspot.ios-isolated-start-btn {
  width: auto;
  min-width: 112px;
  min-height: 116px;
  padding: 10px 14px;
  border-radius: 26px;
  background: transparent;
  border: none;
  box-shadow: none;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  animation-name: iosIsolatedStartBalloon;
}

.sim-hotspot.ios-isolated-start-btn.ios-isolated-wide-btn {
  width: 94%;
  min-height: 92px;
}

@keyframes iosIsolatedStartBalloon {
  0%, 22%, 82%, 100% {
    transform: perspective(650px) translateZ(0px) translateY(0px) scale(1);
    filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.52));
  }
  34%, 60% {
    transform: perspective(650px) translateZ(42px) translateY(-4px) scale(1.42);
    filter: drop-shadow(0 24px 38px rgba(0, 0, 0, 0.72)) drop-shadow(0 0 18px rgba(56, 189, 248, 0.48));
  }
}

/* 100% Authentic iOS Squircle App Icons (88px x 88px) */
.ios-authentic-squircle {
  width: 88px;
  height: 88px;
  border-radius: 21px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.45),
    inset 0 1.5px 1px rgba(255, 255, 255, 0.55),
    0 0 0 1.5px rgba(255, 255, 255, 0.22);
}

.sim-hotspot .ios-authentic-squircle svg {
  width: 76px !important;
  height: 76px !important;
  color: inherit;
}

/* Photorealistic Brushed Metallic Gray iOS Settings Squircle */
.ios-sq-settings {
  background: linear-gradient(180deg, #CED4DC 0%, #9BA2AE 48%, #6E7582 100%);
}

/* Vibrant Apple Green iOS Messages Squircle */
.ios-sq-messages {
  background: linear-gradient(180deg, #5BF977 0%, #2BD44A 52%, #13B331 100%);
}

/* Crisp White iOS Files Squircle */
.ios-sq-files {
  background: linear-gradient(180deg, #FFFFFF 0%, #F1F5F9 100%);
}

/* Crisp White & Yellow iOS Notes Squircle */
.ios-sq-notes {
  background: #FFFFFF;
}

.sim-hotspot .ios-sq-notes svg {
  width: 88px !important;
  height: 88px !important;
}

/* Brushed Silver-Gray iOS Camera Squircle */
.ios-sq-camera {
  background: linear-gradient(180deg, #D8DCE3 0%, #A3AAB5 52%, #767D88 100%);
}

/* Sky-to-Royal Blue iOS Mail Squircle */
.ios-sq-mail {
  background: linear-gradient(180deg, #1D7BF6 0%, #34BDF8 100%);
}

/* Crisp White iOS Passwords Squircle */
.ios-sq-passwords {
  background: linear-gradient(180deg, #FFFFFF 0%, #F1F5F9 100%);
}

/* Dark Slate iOS Magnifier Squircle */
.ios-sq-magnifier {
  background: linear-gradient(180deg, #334155 0%, #0F172A 100%);
}

/* Crisp White Card for Safari Share & Photos Trash Icons */
.ios-sq-white-card {
  background: #FFFFFF;
}

.sim-hotspot .ios-sq-white-card svg {
  width: 50px !important;
  height: 50px !important;
  color: #007AFF;
}

/* 100% Authentic iOS Circular Controls (88px x 88px) */
.ios-authentic-circle {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.45),
    inset 0 1.5px 1px rgba(255, 255, 255, 0.55);
}

.sim-hotspot .ios-authentic-circle svg {
  width: 48px !important;
  height: 48px !important;
}

.ios-circle-plus {
  background: linear-gradient(180deg, #F8FAFC 0%, #DCE3EC 100%);
  border: 2px solid #FFFFFF;
}

.ios-circle-flashlight {
  background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.34), rgba(30, 41, 59, 0.88));
  border: 2px solid rgba(255, 255, 255, 0.55);
}

.ios-circle-speaker {
  background: #FFFFFF;
  border: 2px solid #E2E8F0;
}

.ios-isolated-icon-label {
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.85);
}

/* Authentic Isolated Pill Cards for Contact Number, AutoFill Code & Screenshot Buttons */
.ios-isolated-pill-card {
  width: 100%;
  background: #FFFFFF;
  color: #0F172A;
  border-radius: 20px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.45);
  border: 1.5px solid #E2E8F0;
}

.ios-contact-avatar-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #94A3B8;
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

.ios-contact-pill-num {
  font-size: 14.5px;
  font-weight: 800;
  color: #0F172A;
}

.ios-autofill-top-label {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: #475569 !important;
}

.ios-autofill-code-digits {
  font-size: 19px;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: #007AFF;
}

.ios-hw-pair-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
}

.ios-hw-side-tag {
  background: #0F172A;
  color: #FDE047;
  font-size: 11px;
  font-weight: 800;
  padding: 5px 8px;
  border-radius: 8px;
}

.ios-hw-plus {
  font-weight: 900;
  color: #0F172A;
}

.ios-hw-sub {
  font-size: 12px;
  font-weight: 800;
  color: #007AFF;
}

.ios-blue-text {
  color: #007AFF !important;
  font-weight: 700;
}

.ios-amber-text {
  color: #D97706 !important;
  font-weight: 700;
}

.ios-chevron {
  color: #94A3B8;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}

/* Authentic iPhone Control Target (Zero Fake Yellow Paint — Looks 100% Like Your Real iPhone & Balloons Forward When Lanny Touches It!) */
.sim-hotspot {
  position: relative;
  width: 100%;
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid #CBD5E1;
  border-radius: 12px;
  background: #FFFFFF;
  color: #0F172A;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
  transform-origin: center center;
  animation: iosRowBalloon 2.4s infinite cubic-bezier(0.22, 1, 0.36, 1);
  overflow: visible;
  z-index: 12;
  cursor: pointer;
}

.sim-hotspot.tapped {
  border-color: #10B981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.32), 0 8px 18px rgba(15, 23, 42, 0.16);
  animation: none;
}

.sim-hotspot svg {
  width: 20px;
  height: 20px;
  flex: none;
  color: #007AFF;
}

.sim-hotspot small {
  display: block;
  font-size: 11px;
  color: #64748B;
  font-weight: 500;
  margin-top: 1px;
}

/* Subtle Translucent Finger-Contact Ripple When Lanny Touches the Icon */
.sim-touch-ripple {
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 2.5px solid rgba(0, 122, 255, 0.65);
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.45);
  opacity: 0;
  pointer-events: none;
  animation: simTouchRippleBloom 2.4s infinite cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes simTouchRippleBloom {
  0%, 26%, 76%, 100% {
    opacity: 0;
    transform: scale(0.94);
  }
  36%, 58% {
    opacity: 1;
    transform: scale(1.04);
  }
}

/* Synchronized 3D Balloon Expansion for Full-Width iOS Rows (Pops Forward When Lanny Touches at 34%–62%, Zero Distortion) */
@keyframes iosRowBalloon {
  0%, 22%, 82%, 100% {
    transform: perspective(650px) translateZ(0px) translateY(0px) scale(1);
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
  }
  34%, 60% {
    transform: perspective(650px) translateZ(26px) translateY(-2px) scale(1.13);
    box-shadow:
      0 18px 34px rgba(15, 23, 42, 0.34),
      0 0 0 2px rgba(0, 122, 255, 0.42);
  }
}

/* Synchronized 3D Balloon Expansion for Authentic iOS Buttons & Icons (Enlarges 1.54x Forward When Lanny Touches!) */
@keyframes iosIconBalloon {
  0%, 22%, 82%, 100% {
    transform: perspective(650px) translateZ(0px) translateY(0px) scale(1);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.14);
  }
  34%, 60% {
    transform: perspective(650px) translateZ(38px) translateY(-3px) scale(1.56);
    box-shadow:
      0 20px 38px rgba(15, 23, 42, 0.44),
      0 0 0 2.5px rgba(0, 122, 255, 0.52);
  }
}

/* Authentic Compact iOS Buttons & Icons That Balloon 1.56x When Lanny Touches Them */
.sim-hotspot.ios-save-circle-btn,
.sim-hotspot.ios-saved-check-circle,
.sim-hotspot.ios-plus-circle,
.sim-hotspot.ios-send-circle,
.sim-hotspot.ios-share-btn,
.sim-hotspot.ios-nav-btn,
.sim-hotspot.ios-icon-btn,
.sim-hotspot.ios-pill-btn,
.sim-hotspot.ios-shutter-btn,
.sim-hotspot.ios-round-glass-btn,
.sim-hotspot.ios-round-action-btn,
.sim-hotspot.ios-purple-hide-btn,
.sim-hotspot.ios-call-circle-btn,
.sim-hotspot.ios-tab-btn,
.sim-hotspot.ios-status-pill,
.sim-hotspot.ios-corner-thumb,
.sim-hotspot.ios-callout-bubble {
  animation-name: iosIconBalloon;
}

/* 1. Authentic Round Save Arrow Button Beside Texted Photo (Messages) */
.sim-hotspot.ios-save-circle-btn,
.ios-save-circle-static {
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  padding: 0;
  border-radius: 50%;
  background: #E2E8F0;
  border: 1.5px solid #CBD5E1;
  color: #007AFF;
  display: grid;
  place-items: center;
  flex: none;
}

/* 2. Authentic Round Checkmark (✓) Beside Texted Photo (Messages — Step 3 of Keep a Photo!) */
.sim-hotspot.ios-saved-check-circle {
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  padding: 0;
  border-radius: 50%;
  background: #007AFF;
  border: 2px solid #FFFFFF;
  color: #FFFFFF;
  display: grid;
  place-items: center;
  flex: none;
}

.sim-hotspot.ios-saved-check-circle svg {
  color: #FFFFFF;
  width: 22px;
  height: 22px;
}

/* 3. Authentic Mock Photo Inside Messages Thread & Photos Grid */
.sim-hotspot.ios-photo-message-card {
  padding: 0;
  border-radius: 16px;
  overflow: visible;
  border: 1.5px solid #CBD5E1;
  background: transparent;
  flex: 1;
}

.mock-iphone-photo-scene {
  width: 100%;
  min-height: 92px;
  border-radius: 15px;
  background: linear-gradient(180deg, #38BDF8 0%, #BAE6FD 52%, #86EFAC 53%, #16A34A 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px;
  position: relative;
  color: #0F172A;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.6);
}

.mock-iphone-photo-scene.static-photo-box {
  flex: 1;
  border: 1.5px solid #CBD5E1;
}

.mock-iphone-photo-scene.mini-grid-scene {
  min-height: 68px;
  border-radius: 10px;
  padding: 6px;
}

.mock-photo-sun {
  font-size: 20px;
  line-height: 1;
}

.mock-photo-mountains {
  font-size: 20px;
  line-height: 1.1;
  margin-top: 2px;
}

.mock-photo-caption {
  margin-top: 4px;
  background: rgba(255, 255, 255, 0.88);
  color: #0F172A;
  font-size: 10.5px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
}

/* 4. Authentic Photos Grid Square Thumbnail */
.sim-hotspot.ios-photo-thumb {
  padding: 0;
  border-radius: 12px;
  min-height: 70px;
  justify-content: center;
  border: 1.5px solid #94A3B8;
  animation-name: iosIconBalloon;
}

.ios-thumb-check-badge {
  position: absolute;
  bottom: 5px;
  right: 5px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #007AFF;
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 900;
  display: grid;
  place-items: center;
  border: 1.5px solid #FFFFFF;
}

/* 5. Authentic Round (+) & Blue Send (↑) Buttons in Messages / Mail */
.sim-hotspot.ios-plus-circle {
  width: 38px;
  height: 38px;
  min-width: 38px;
  min-height: 38px;
  padding: 0;
  border-radius: 50%;
  background: #E2E8F0;
  border: 1px solid #CBD5E1;
  color: #475569;
  font-size: 20px;
  font-weight: 700;
  display: grid;
  place-items: center;
  flex: none;
}

.sim-hotspot.ios-send-circle {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  padding: 0;
  border-radius: 50%;
  background: #007AFF;
  border: 1.5px solid #FFFFFF;
  color: #FFFFFF;
  font-size: 18px;
  font-weight: 900;
  display: grid;
  place-items: center;
  flex: none;
}

/* 6. Authentic Top Navigation Bar Buttons (Save, Done, Print, Share, ‹ Back) */
.sim-hotspot.ios-nav-btn {
  width: auto;
  min-height: 32px;
  padding: 4px 10px;
  border-radius: 8px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  justify-content: center;
}

.sim-hotspot.ios-icon-btn {
  width: 38px;
  height: 38px;
  min-width: 38px;
  min-height: 38px;
  padding: 0;
  border-radius: 10px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  display: grid;
  place-items: center;
  flex: none;
}

.sim-hotspot.ios-pill-btn {
  width: auto;
  min-height: 34px;
  padding: 5px 14px;
  border-radius: 999px;
  background: #FFFFFF;
  color: #0F172A;
  font-weight: 800;
  justify-content: center;
}

/* 7. Authentic Round White Camera Shutter / Freeze Button */
.sim-hotspot.ios-shutter-btn {
  width: 54px;
  height: 54px;
  min-width: 54px;
  min-height: 54px;
  padding: 4px;
  border-radius: 50%;
  background: transparent;
  border: 3px solid #FFFFFF;
  display: grid;
  place-items: center;
  flex: none;
}

.ios-shutter-inner {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #FFFFFF;
  display: block;
}

/* 8. Authentic Lock Screen / Magnifier Round Glass Button */
.sim-hotspot.ios-round-glass-btn,
.ios-round-static-dark {
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  padding: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #FFFFFF;
  display: grid;
  place-items: center;
  flex: none;
}

/* 9. Authentic Home Screen App Icon Tile */
.sim-hotspot.ios-app-tile {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px 8px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #FFFFFF;
  gap: 5px;
}

/* 10. Authentic Screenshot Bottom-Left Corner Thumbnail */
.sim-hotspot.ios-corner-thumb {
  width: 68px;
  height: 88px;
  min-width: 68px;
  padding: 4px;
  border-radius: 10px;
  background: #FFFFFF;
  border: 2.5px solid #FFFFFF;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.28);
  justify-content: center;
}

.corner-mini-page {
  width: 100%;
  height: 100%;
  background: #F8FAFC;
  border: 1px solid #CBD5E1;
  border-radius: 6px;
  padding: 5px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.corner-mini-band {
  height: 10px;
  background: #1E293B;
  border-radius: 3px;
}

.corner-mini-line {
  height: 4px;
  background: #94A3B8;
  border-radius: 2px;
}

.corner-mini-line.short {
  width: 65%;
}

/* 11. Authentic QR Brackets, Yellow QR Link Pill, Purple Hide Bell, Call Circle & Callout Bubble */
.sim-hotspot.ios-qr-frame-target {
  width: 132px;
  height: 112px;
  justify-content: center;
  background: rgba(15, 23, 42, 0.65);
  border: 3px dashed #FACC15;
  border-radius: 18px;
  animation-name: iosIconBalloon;
}

.qr-glyph {
  font-size: 42px;
  line-height: 1;
}

.sim-hotspot.ios-qr-yellow-pill {
  width: auto;
  min-height: 36px;
  padding: 6px 14px;
  border-radius: 999px;
  background: #FEF08A;
  border: 1.5px solid #F59E0B;
  color: #0F172A;
  font-size: 12px;
  font-weight: 800;
  justify-content: center;
}

.sim-hotspot.ios-status-pill {
  width: auto;
  min-height: 30px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #F1F5F9;
  border: 1px solid #CBD5E1;
  font-size: 12px;
}

.sim-hotspot.ios-round-action-btn,
.ios-contact-action-static {
  width: 58px;
  min-height: 50px;
  padding: 6px 4px;
  border-radius: 12px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 11px;
  color: #64748B;
}

.sim-hotspot.ios-purple-hide-btn {
  width: 64px;
  min-height: 54px;
  padding: 6px 8px;
  border-radius: 12px;
  background: #7C3AED;
  border: 1.5px solid #6D28D9;
  color: #FFFFFF;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2px;
  flex: none;
}

.sim-hotspot.ios-call-circle-btn,
.ios-call-static-circle {
  width: 62px;
  height: 62px;
  min-width: 62px;
  min-height: 62px;
  padding: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #FFFFFF;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  font-size: 10px;
  flex: none;
}

.sim-hotspot.ios-call-circle-btn {
  background: #FFFFFF;
  color: #0F172A;
  font-weight: 800;
}

.sim-hotspot.ios-call-circle-btn small {
  color: #0F172A;
  font-size: 9.5px;
}

.sim-hotspot.ios-tab-btn {
  width: auto;
  min-height: 38px;
  padding: 4px 8px;
  border-radius: 10px;
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1px;
}

.sim-hotspot.ios-callout-bubble {
  width: auto;
  min-height: 34px;
  padding: 6px 14px;
  border-radius: 9px;
  background: #0F172A;
  border: 1px solid #334155;
  color: #FFFFFF;
  font-size: 12px;
  justify-content: center;
  gap: 8px;
}

.ios-check-circle-blue {
  margin-top: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #007AFF;
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 900;
  display: grid;
  place-items: center;
}

/* Authentic iOS Safari Bar, PDF Page, Share Sheet & Settings Rows */
.sim-safari-bar {
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  border-radius: 14px;
  padding: 7px 9px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

.sim-url-pill {
  background: #E2E8F0;
  color: #0F172A;
  border-radius: 10px;
  padding: 5px 8px;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  margin-bottom: 7px;
}

.ios-aa {
  font-weight: 800;
  font-size: 11px;
  color: #475569;
}

.ios-reload {
  font-weight: 800;
  color: #475569;
}

.sim-toolbar-icons {
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 16px;
  color: #007AFF;
}

.ios-nav-glyph {
  font-size: 18px;
  font-weight: 700;
  color: #007AFF;
}

.sim-toolbar-icons .sim-hotspot.ios-share-btn {
  width: 40px;
  height: 38px;
  min-width: 40px;
  min-height: 38px;
  padding: 0;
  border-radius: 10px;
  background: #F8FAFC;
  border: 1px solid #CBD5E1;
  display: grid;
  place-items: center;
}

.sim-pdf-page {
  flex: 1;
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  border-radius: 12px;
  padding: 11px;
  color: #0F172A;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
}

.sim-pdf-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  background: #E2E8F0;
  color: #334155;
  padding: 2px 7px;
  border-radius: 6px;
  margin-bottom: 6px;
}

.pdf-header-band {
  background: #1E293B;
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 800;
  padding: 6px 8px;
  border-radius: 6px;
  margin-bottom: 8px;
}

.sim-pdf-doc strong {
  font-size: 12px;
  color: #0F172A;
  display: block;
  margin-bottom: 5px;
}

.sim-line {
  height: 6px;
  background: #E2E8F0;
  border-radius: 4px;
  margin-bottom: 5px;
}

.sim-line.w80 { width: 80%; }
.sim-line.w90 { width: 90%; }
.sim-line.w60 { width: 60%; }
.sim-line.w85 { width: 85%; }
.sim-line.w70 { width: 70%; }

.sim-pdf-box {
  background: #F8FAFC;
  border: 1px solid #CBD5E1;
  color: #1E293B;
  border-radius: 8px;
  padding: 8px 9px;
  font-size: 11px;
  font-weight: 600;
  margin-block: 6px;
}

.sim-sheet {
  margin-top: auto;
  background: #F2F2F7;
  border: 1px solid #CBD5E1;
  border-radius: 18px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.15);
}

.sim-sheet-handle {
  width: 36px;
  height: 4.5px;
  background: #94A3B8;
  border-radius: 99px;
  margin: 0 auto;
}

.sim-sheet-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  background: #FFFFFF;
  padding: 8px 10px;
  border-radius: 12px;
}

.sim-sheet-head small {
  display: block;
  color: #64748B;
}

.sim-doc-mini, .sim-pdf-badge {
  background: #DC2626;
  color: #FFFFFF;
  font-size: 10.5px;
  font-weight: 800;
  padding: 5px 7px;
  border-radius: 7px;
  flex: none;
}

.sim-app-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.sim-app-pill {
  font-size: 10px;
  font-weight: 700;
  color: #1E293B;
  background: #FFFFFF;
  padding: 6px 4px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.ios-app-bubble {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-size: 15px;
  background: #F1F5F9;
}

.sim-action-list, .sim-list-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sim-action-row, .sim-folder-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: #FFFFFF;
  color: #0F172A;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
}

.sim-folder-row small {
  display: block;
  font-size: 11px;
  color: #64748B;
  font-weight: 500;
}

.ios-folder-svg {
  font-size: 20px;
  line-height: 1;
}

/* Authentic iOS Settings Rounded-Square Colored Icons */
.ios-settings-icon {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 800;
  color: #FFFFFF;
  flex: none;
}
.ios-settings-icon.bg-blue { background: #007AFF; }
.ios-settings-icon.bg-sky { background: #0284C7; }
.ios-settings-icon.bg-red { background: #FF3B30; }
.ios-settings-icon.bg-green { background: #34C759; }
.ios-settings-icon.bg-amber { background: #F59E0B; }
.ios-settings-icon.bg-slate { background: #64748B; }
.ios-settings-icon.bg-rainbow { background: linear-gradient(135deg, #EC4899, #F59E0B, #10B981, #3B82F6); }

.sim-nav-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 7px;
  border-bottom: 1px solid #CBD5E1;
  font-size: 13px;
  color: #0F172A;
}

.sim-sub-caption {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #64748B;
}

.sim-rename-card {
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  border-radius: 14px;
  padding: 12px;
  margin-top: 6px;
}

.rename-label {
  font-size: 10px;
  font-weight: 800;
  color: #64748B;
}

.sim-filename-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: #F1F5F9;
  border: 1.5px solid #007AFF;
  color: #0F172A;
  padding: 9px 10px;
  border-radius: 10px;
  margin-top: 6px;
  font-size: 13px;
}

.sim-spotlight-bar, .sim-search-pill {
  background: #E2E8F0;
  color: #0F172A;
  border: 1px solid #CBD5E1;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}

.sim-app-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  gap: 10px;
  align-items: center;
}

.sim-files-app-icon {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: #FFFFFF;
  color: #007AFF;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.sim-home-app {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  color: #FFFFFF;
}

.sim-dummy-icon {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: #FFFFFF;
  display: grid;
  place-items: center;
  font-size: 20px;
}
.sim-dummy-icon.green-app { background: #34C759; }
.sim-dummy-icon.blue-app { background: #007AFF; }

.sim-bottom-tabs, .sim-bottom-bar-right {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 8px;
  border-top: 1px solid #CBD5E1;
  font-size: 11.5px;
  color: #475569;
}

.sim-bottom-tabs > div {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sim-bottom-tabs .active-tab {
  color: #007AFF;
  font-weight: 800;
}

.sim-toggle {
  width: 40px;
  height: 24px;
  border-radius: 99px;
  background: #34C759;
  position: relative;
  display: inline-block;
  flex: none;
}

.sim-toggle::after {
  content: "";
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  position: absolute;
  top: 2px;
  right: 2px;
}

.sim-preview-text-card {
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  border-radius: 12px;
  padding: 12px;
  font-size: 13px;
}

.sim-slider-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.sim-slider-track {
  flex: 1;
  height: 6px;
  background: #CBD5E1;
  border-radius: 99px;
  position: relative;
}

.sim-slider-fill {
  width: 72%;
  height: 100%;
  background: #007AFF;
  border-radius: 99px;
}

.sim-slider-knob {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 2px solid #007AFF;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  position: absolute;
  top: -8px;
  left: 66%;
}

.sim-zoom-compare {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}

.sim-zoom-card {
  flex: 1;
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  border-radius: 12px;
  padding: 12px;
  text-align: center;
}

.sim-mini-bubble {
  background: #007AFF;
  color: #FFFFFF;
  padding: 6px 10px;
  border-radius: 12px;
  margin-top: 6px;
  font-size: 12px;
}

.sim-mini-bubble.big {
  font-size: 16px;
  font-weight: 800;
}

.sim-chat-area {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.sim-chat-bubble {
  background: #E2E8F0;
  color: #0F172A;
  padding: 8px 12px;
  border-radius: 16px 16px 16px 4px;
  font-size: 12.5px;
  font-weight: 500;
  max-width: 88%;
}

.sim-photo-card {
  background: linear-gradient(180deg, #BAE6FD 0%, #DCFCE7 100%);
  border: 1.5px solid #93C5FD;
  color: #0F172A;
  border-radius: 14px;
  padding: 14px 12px;
  text-align: center;
  font-weight: 700;
  width: 100%;
}

.sim-photo-with-save {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sim-photo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 6px;
}

.sim-grid-thumb {
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  border-radius: 12px;
  min-height: 70px;
  display: grid;
  place-items: center;
  font-size: 26px;
}

.sim-compose-bar {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sim-msg-input {
  flex: 1;
  border: 1px solid #CBD5E1;
  background: #FFFFFF;
  border-radius: 99px;
  padding: 8px 14px;
  font-size: 13px;
  color: #64748B;
}

.sim-scan-viewfinder {
  background: #1E293B;
  border: 2.5px solid #FACC15;
  border-radius: 14px;
  padding: 18px 14px;
  text-align: center;
  margin-top: 8px;
}

.sim-yellow-scan-box strong {
  display: block;
  font-size: 13px;
  color: #FDE047;
}

.sim-hardware-diagram {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-block: 4px;
}

.sim-hw-callout {
  background: #FFFFFF;
  border: 2px solid #F59E0B;
  color: #0F172A;
  border-radius: 12px;
  padding: 8px 12px;
  font-size: 12.5px;
}

.sim-hw-callout small {
  display: block;
  color: #475569;
}

/* ============================================================================
   REALISTIC IOS 18 LESSON SCREEN VISUALS (v5.7 — All 20 Lessons / 80 Steps)
   ============================================================================ */

/* 1. Authentic iOS 18 Home Screen Wallpaper, Ambient Grid & Frosted Glass Dock */
.sim-screen-inner.sim-ios18-homescreen {
  background:
    radial-gradient(circle at 30% 25%, rgba(56, 189, 248, 0.38) 0%, transparent 52%),
    radial-gradient(circle at 75% 70%, rgba(99, 102, 241, 0.34) 0%, transparent 55%),
    linear-gradient(165deg, #1E3A8A 0%, #0F172A 54%, #1E1B4B 100%);
  color: #FFFFFF;
  justify-content: space-between;
  padding: 10px 10px 8px;
}

.ios-hs-ambient-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  opacity: 0.56;
  pointer-events: none;
}

.ios-hs-GhostApp {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.ios-hs-GhostApp small {
  font-size: 9px;
  color: #E2E8F0;
  font-weight: 600;
}

.ghost-sq {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  font-size: 16px;
  font-weight: 800;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.28);
}

.ghost-weather { background: linear-gradient(180deg, #38BDF8, #0284C7); color: #FFF; }
.ghost-cal     { background: #FFFFFF; color: #DC2626; font-size: 15px; }
.ghost-photos  { background: #FFFFFF; }
.ghost-clock   { background: #0F172A; color: #FFF; border: 1px solid rgba(255, 255, 255, 0.25); }

.ios-hs-focal-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-block: auto;
}

.ios-hs-next-pill {
  background: rgba(15, 23, 42, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.26);
  color: #FDE68A;
  font-size: 10.5px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 999px;
}

.ios-hs-page-dots {
  display: flex;
  justify-content: center;
  gap: 5px;
}

.ios-hs-page-dots span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
}

.ios-hs-page-dots span.active {
  background: #FFFFFF;
}

.ios-hs-dock {
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 18px;
  padding: 6px 10px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.dock-sq {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  font-size: 16px;
}

.dock-phone    { background: #22C55E; color: #FFF; }
.dock-safari   { background: #FFFFFF; color: #0284C7; }
.dock-messages { background: #22C55E; color: #FFF; }
.dock-mail     { background: #0284C7; color: #FFF; }

/* 2. Authentic iOS 18 Spotlight Search + Top Hit Card + Compact Keyboard */
.sim-spotlight-mode {
  gap: 5px;
}

.ios-spotlight-search-box {
  background: rgba(255, 255, 255, 0.94);
  border: 1.5px solid #38BDF8;
  border-radius: 11px;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
}

.ios-spotlight-tophit-card {
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 14px;
  padding: 6px 10px;
}

.ios-tophit-label {
  display: block;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #E2E8F0;
  margin-bottom: 2px;
}

.sim-hotspot.ios-spotlight-hit-btn {
  min-height: 98px;
  padding: 4px 10px;
}

.ios-cursor-bar {
  color: #007AFF;
  font-weight: 900;
  animation: iosCursorBlink 1s infinite steps(2, start);
}

@keyframes iosCursorBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* 3. Authentic Compact iOS 18 QWERTY On-Screen Keyboard */
.ios-sim-keyboard {
  margin-top: auto;
  background: #D1D5DB;
  border-top: 1px solid #9CA3AF;
  border-radius: 10px;
  padding: 5px 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: #0F172A;
}

.ios-kb-row {
  display: flex;
  justify-content: center;
  gap: 3px;
}

.ios-kb-row span {
  flex: 1;
  min-width: 16px;
  height: 20px;
  background: #FFFFFF;
  border-radius: 4px;
  box-shadow: 0 1px 0 #6B7280;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 700;
  color: #0F172A;
}

.ios-kb-row.ios-kb-row-mid {
  padding-inline: 8px;
}

.ios-kb-row .ios-kb-mod {
  background: #9CA3AF;
  color: #0F172A;
  font-size: 9px;
  flex: 1.35;
}

.ios-kb-row .ios-kb-space {
  flex: 4.2;
  font-size: 9.5px;
  font-weight: 600;
}

.ios-kb-row .ios-kb-return {
  background: #007AFF;
  color: #FFFFFF;
  flex: 1.65;
}

.sim-hotspot.ios-kb-attach-bar,
.sim-hotspot.ios-kb-autofill-pill {
  min-height: 36px;
  padding: 5px 10px;
  margin-bottom: 3px;
  border-radius: 9px;
  background: #F8FAFC;
  border: 1.5px solid #007AFF;
  justify-content: space-around;
}

.sim-hotspot.ios-kb-autofill-pill {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1px;
}

/* 4. Share Sheet Close Button, Appearance Cards, Discrete Slider & Photos Filter Pill */
.ios-sheet-close-x {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #E2E8F0;
  color: #475569;
  font-size: 11px;
  font-weight: 800;
  display: grid;
  place-items: center;
}

.ios-appearance-pair {
  display: flex;
  justify-content: space-around;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 6px;
}

.ios-app-mode-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 10px;
  font-weight: 700;
}

.mode-mini {
  width: 38px;
  height: 26px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 800;
  border: 1px solid #CBD5E1;
}

.mode-mini.light { background: #F8FAFC; color: #0F172A; }
.mode-mini.dark  { background: #0F172A; color: #FFFFFF; }

.ios-ticked-slider {
  background-image: repeating-linear-gradient(90deg, transparent, transparent 15%, #94A3B8 15%, #94A3B8 16.5%);
}

.ios-mini-avatar {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #E2E8F0;
  font-size: 12px;
  margin-inline: auto;
}

.ios-static-plus {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #E2E8F0;
  color: #475569;
  display: grid;
  place-items: center;
  font-weight: 800;
}

.ios-photos-pill-bar {
  margin-top: auto;
  background: #E2E8F0;
  border-radius: 999px;
  padding: 4px;
  display: flex;
  justify-content: space-around;
  font-size: 10.5px;
  font-weight: 700;
  color: #475569;
}

.ios-photos-pill-bar .active {
  background: #FFFFFF;
  color: #0F172A;
  padding: 2px 10px;
  border-radius: 999px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

/* 5. Messages (+) Menu, Staged Photo Compose, Notes Toolbar & Scanner Paper */
.ios-imessage-plus-menu {
  background: rgba(255, 255, 255, 0.96);
  border-radius: 16px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: auto;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.18);
}

.ios-plus-menu-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px;
  font-size: 13px;
}

.ios-plus-menu-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 14px;
}

.ios-imessage-staged-box {
  background: #FFFFFF;
  border: 1.5px solid #CBD5E1;
  border-radius: 18px;
  padding: 8px;
}

.ios-notes-bottom-toolbar {
  margin-top: auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding-top: 8px;
  border-top: 1px solid #CBD5E1;
  font-size: 16px;
}

.notes-cam-active {
  background: #FEF3C7;
  border: 1.5px solid #F59E0B;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
}

.ios-paper-sheet-preview {
  background: #FFFFFF;
  border-radius: 8px;
  padding: 10px;
  text-align: left;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

.ios-screenshot-crop-frame {
  background: #FFFFFF;
  color: #0F172A;
  border: 3px solid #FFFFFF;
  outline: 2px dashed #38BDF8;
  border-radius: 8px;
  padding: 10px;
  margin-top: 8px;
  flex: 1;
}

/* 6. Camera QR Brackets, Lock Screen Clock, Control Center Modules & Call 6-Grid */
.ios-qr-bracket-box {
  padding: 8px;
  border: 3px solid #FACC15;
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.72);
  display: inline-grid;
  place-items: center;
}

.ios-camera-bottom-chrome {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.ios-camera-shutter-dim {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.25);
}

.ios-lockscreen-clock {
  text-align: center;
  margin-top: 12px;
}

.ios-lockscreen-clock small {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #E2E8F0;
}

.ios-lockscreen-clock strong {
  font-size: 42px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: #FFFFFF;
}

.ios-lockscreen-bottom-row {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 6px;
}

.ios-cc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 6px;
}

.ios-cc-module {
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 14px;
  padding: 8px;
  text-align: center;
  font-size: 13px;
  line-height: 1.4;
}

.sim-hotspot.ios-top-contact-header {
  width: auto;
  min-height: 36px;
  padding: 4px 10px;
  border-radius: 12px;
  gap: 6px;
  animation-name: iosIconBalloon;
}

.ios-passwords-tile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 4px;
}

.sim-hotspot.ios-pw-grid-tile,
.ios-pw-static-tile {
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  border-radius: 12px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.ios-red-trash-static {
  width: 52px;
  border-radius: 12px;
  background: #EF4444;
  color: #FFFFFF;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
}

.ios-red-trash-static small {
  font-size: 9.5px;
}

.ios-print-preview-card {
  margin-top: auto;
  background: #E2E8F0;
  border-radius: 12px;
  padding: 8px;
  text-align: center;
}

.ios-mail-field-row {
  border-bottom: 1px solid #E2E8F0;
  padding: 4px 2px;
  font-size: 11.5px;
  color: #64748B;
}

.ios-mail-field-row b {
  color: #0F172A;
}

.ios-send-static-gray {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #CBD5E1;
  color: #FFFFFF;
  display: grid;
  place-items: center;
  font-weight: 900;
}

.sim-hotspot.ios-mail-body-box {
  flex: 1;
  align-items: flex-start;
  margin-top: 4px;
}

.ios-call-6grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  justify-items: center;
  margin-block: auto;
}

.ios-call-end-red {
  background: #EF4444 !important;
  border-color: #F87171 !important;
}

.ios-active-call-pill {
  background: #16A34A;
  color: #FFFFFF;
  border-radius: 999px;
  padding: 5px 12px;
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
}

.ios-code-boxes-card {
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  border-radius: 12px;
  padding: 8px;
  text-align: center;
}

.ios-6digit-boxes {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  margin-top: 6px;
}

.ios-6digit-boxes span {
  height: 28px;
  border: 1.5px solid #CBD5E1;
  border-radius: 6px;
  background: #F8FAFC;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 13px;
}

.ios-6digit-boxes span.active {
  border-color: #007AFF;
  color: #007AFF;
}

.ios-selected-text-box {
  background: rgba(0, 122, 255, 0.18);
  border-inline: 2.5px solid #007AFF;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 13px;
}

.sim-hint {
  font-size: 0.92rem;
  color: #FEF3C7;
  margin-top: var(--space-3);
  text-align: center;
}

.sim-feedback {
  margin-top: var(--space-3);
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(16, 185, 129, 0.22);
  border: 1.5px solid #34D399;
  color: #ECFDF5;
  font-size: 0.94rem;
  font-weight: 700;
  text-align: center;
}

.stage-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  border-top: 1px solid var(--line);
}

.progress {
  height: 5px;
  background: var(--line);
}

.progress span {
  display: block;
  height: 100%;
  background: var(--accent-warm);
  transition: width .2s;
}

.below-stage-compact {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: var(--text-xs);
  color: var(--muted);
}

.source {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--accent);
  min-height: 36px;
}

.centered {
  max-width: 750px;
  margin: var(--space-8) auto;
}

.completion {
  padding: var(--space-10);
  border: 1.5px solid var(--line);
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}

.completion-mascot {
  font-size: 36px;
  margin-bottom: var(--space-3);
}

.completion h1 {
  margin-bottom: var(--space-4);
}

.completion .actions {
  margin-top: var(--space-8);
}

.nextlesson {
  margin-top: var(--space-8);
  padding: var(--space-6);
  border-radius: var(--r-md);
  background: var(--soft);
  border: 1px solid var(--line);
}

.nextlesson p {
  margin-top: var(--space-2);
}

.sponsor {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-8);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  font-size: var(--text-xs);
  color: var(--muted);
}

.sponsor strong {
  font-weight: 500;
  letter-spacing: .05em;
}

.modalback {
  position: fixed;
  inset: 0;
  background: oklch(15% .02 250 / .52);
  display: grid;
  place-items: center;
  z-index: 30;
  padding: var(--space-4);
}

.modal {
  max-width: 640px;
  width: 100%;
  max-height: 90dvh;
  overflow: auto;
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: var(--space-8);
  box-shadow: var(--shadow-lg);
}

.modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.modal h2 {
  margin: 0;
}

.modal .choice {
  display: block;
  width: 100%;
  text-align: left;
  margin-top: var(--space-3);
}

.modal p {
  font-size: var(--text-sm);
}

.modal ol {
  padding-left: var(--space-6);
  font-size: var(--text-sm);
  line-height: 1.8;
}

.modal input, .modal textarea {
  width: 100%;
  margin-block: var(--space-3);
  font-size: var(--text-sm);
}

.modal textarea {
  min-height: 140px;
}

.owner-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  margin-top: var(--space-8);
}

.panel {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--space-6);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.panel h2 {
  margin-bottom: var(--space-4);
}

.panel p, .panel li {
  font-size: var(--text-sm);
  line-height: 1.65;
}

.panel ul, .panel ol {
  padding-left: var(--space-5);
}

.signal {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--line);
  font-size: var(--text-sm);
}

.signal b {
  font-variant-numeric: tabular-nums;
}

.eventlist {
  font-size: var(--text-xs);
  color: var(--muted);
  max-height: 220px;
  overflow: auto;
}

.eventrow {
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--line);
}

footer {
  display: flex;
  justify-content: space-between;
  gap: var(--space-6);
  padding-block: var(--space-6);
  border-top: 1px solid var(--line);
  font-size: var(--text-xs);
  color: var(--muted);
}

footer a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

footer p {
  max-width: 70ch;
  font-size: var(--text-xs);
}

.footerlinks {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.screen-enter {
  animation: appear .18s ease-out;
}

@keyframes appear {
  from { opacity: .3; }
  to { opacity: 1; }
}

@media (max-width: 1180px) {
  .home-master-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .home-master-grid::after {
    display: none;
  }
  .lesson-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 960px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
  }
  .hero-right {
    position: static;
    order: -1;
  }
  .stage-split, .voice-console-controls {
    grid-template-columns: 1fr;
  }
  .voice-step-scrubber, .stepnav-horizontal {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .iphone-stage-anchor {
    transform: scale(0.84);
    transform-origin: center center;
  }
}

@media (max-width: 800px) {
  .shell {
    padding-inline: var(--space-5);
  }
  header {
    min-height: 84px;
  }
  .hero {
    gap: var(--space-8);
    grid-template-columns: minmax(0, 1fr);
    padding-top: var(--space-4);
  }
  .lesson-grid, .owner-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .lesson-grid > *, .owner-layout > * {
    min-width: 0;
  }
  .stepnav {
    flex-direction: row;
    overflow: auto;
    padding-bottom: var(--space-2);
  }
  .stepnav button {
    white-space: nowrap;
  }
  .side-note {
    display: none;
  }
  .main {
    padding-top: var(--space-4);
  }
  .nav {
    gap: 2px;
  }
  .nav button {
    padding: var(--space-2);
  }
  .preview-bar span:last-child {
    display: none;
  }
}

@media (max-width: 480px) {
  .brand {
    font-size: var(--text-base);
  }
  .brand small {
    font-size: var(--text-xs);
  }
  .brand svg {
    width: 26px;
  }
  .nav .lessons-nav {
    display: none;
  }
  .hero {
    padding-bottom: var(--space-6);
  }
  .lesson-list, .voice-step-scrubber {
    grid-template-columns: 1fr;
  }
  .inputrow {
    flex-wrap: wrap;
  }
  .inputrow .primary {
    width: 100%;
  }
  .inputrow input {
    width: 100%;
    min-height: 44px;
  }
  .dominant-voice-console {
    padding: var(--space-5);
  }
  .stage-split {
    padding: var(--space-4);
  }
  .stage-meta, .stage-controls {
    padding: var(--space-4);
  }
  .stage-controls {
    flex-wrap: wrap;
  }
  .stage-controls .quiet {
    order: 3;
    width: 100%;
  }
  .practice {
    display: block;
  }
  .practice strong {
    display: block;
    margin-bottom: var(--space-2);
  }
  .completion {
    padding: var(--space-6);
  }
  .completion .actions {
    flex-direction: column;
  }
  .completion .actions button {
    width: 100%;
  }
  .modal {
    padding: var(--space-5);
  }
  footer {
    display: block;
  }
  .section-head {
    align-items: flex-start;
  }
  .stage-meta span:last-child {
    display: none;
  }
  .main {
    min-height: 500px;
  }
}


/* ============================================================================
   v4.1 EVOLUTION: FOCUSED 3D FLIGHT STAGE & ORGANIZED QUESTION HUB
   ============================================================================ */

/* 1. Simplify Surrounding Chrome During Focus Lesson Mode */
body.focus-lesson-mode header {
  padding-block: 8px;
  border-bottom: 1px solid rgba(251, 191, 36, 0.2);
}

body.focus-lesson-mode header .nav button:not(.text-scale-btn):not(.theme):not([data-action="home"]) {
  display: none;
}

/* 2. Unified Focus Stage Top Bar (Replaces Stacked Header + Giant Voice Box) */
.focus-stage-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  padding: 14px 20px;
  margin-bottom: 14px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.96) 0%, rgba(30, 27, 75, 0.92) 100%);
  border: 2px solid rgba(251, 191, 36, 0.45);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.32);
  color: #F8FAFC;
}

.focus-stage-topbar.playing {
  border-color: #34D399;
  box-shadow: 0 14px 36px rgba(16, 185, 129, 0.22);
}

.focus-topbar-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1 1 280px;
}

.focus-back-home-btn {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #FEF3C7 !important;
  border: 1.5px solid rgba(251, 191, 36, 0.55) !important;
  font-weight: 800 !important;
  padding: 9px 16px !important;
  border-radius: 999px !important;
  white-space: nowrap;
}

.focus-back-home-btn:hover {
  background: rgba(251, 191, 36, 0.22) !important;
}

.focus-task-eyebrow {
  display: block;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #FBBF24;
}

.focus-task-title-wrap h1 {
  font-size: clamp(1.18rem, 1.05rem + 0.5vw, 1.48rem);
  margin: 2px 0 0;
  color: #FFFFFF;
  line-height: 1.22;
}

.focus-topbar-center {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.focus-voice-btn {
  padding: 10px 18px !important;
  font-size: 0.95rem !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #FBBF24 0%, #D97706 100%) !important;
  color: #1C1008 !important;
  font-weight: 800 !important;
  border: 2px solid #FEF08A !important;
}

.focus-topbar-center audio {
  height: 36px;
  max-width: 220px;
  border-radius: 999px;
}

.focus-topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 3. Single Unified 4-Step Flight Path Ribbon */
.flight-step-ribbon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 14px;
  overflow-x: auto;
  padding: 4px 2px;
}

.flight-step-pill {
  flex: 1 1 0;
  min-width: 145px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 16px;
  background: var(--surface);
  border: 2px solid var(--line);
  color: var(--muted);
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
}

.flight-step-pill:hover {
  border-color: var(--accent-warm);
  color: var(--ink);
  transform: translateY(-1px);
}

.flight-step-pill.active {
  background: var(--accent-glow);
  border: 2.5px solid var(--accent-warm);
  color: var(--ink);
  box-shadow: 0 8px 24px rgba(245, 158, 11, 0.22);
}

.flight-step-pill.completed-step {
  border-color: rgba(16, 185, 129, 0.55);
  background: rgba(16, 185, 129, 0.08);
}

.f-step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(245, 158, 11, 0.18);
  color: var(--accent-warm);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.flight-step-pill.active .f-step-badge {
  background: linear-gradient(135deg, #FDE047, #F59E0B);
  color: #1C1008;
}

.flight-step-pill.completed-step .f-step-badge {
  background: #10B981;
  color: #052E16;
}

.f-step-name {
  font-size: 0.96rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.25;
}

.flight-step-connector {
  font-size: 1rem;
  opacity: 0.65;
  flex: none;
  user-select: none;
}

/* 4. Expanded 3D Flight Arena & Sweeping Golden Flight Trail Arc */
.focus-stage-split {
  grid-template-columns: 1.22fr 0.95fr;
  gap: 24px;
  padding: 22px;
}

.focus-flight-arena {
  position: relative;
  min-height: 620px;
  justify-content: space-between;
  background:
    radial-gradient(circle at 50% 48%, rgba(251, 191, 36, 0.20) 0%, rgba(56, 189, 248, 0.08) 42%, transparent 68%),
    linear-gradient(180deg, #050B16 0%, #0A1328 100%);
  border: 2.5px solid rgba(251, 191, 36, 0.48);
}

.lanny-refly-pill {
  background: rgba(251, 191, 36, 0.18);
  border: 1.5px solid #FBBF24;
  color: #FEF08A;
  font-size: 0.82rem;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.18s ease;
}

.lanny-refly-pill:hover {
  background: #FBBF24;
  color: #1C1008;
  transform: scale(1.04);
}

.lanny-flight-trail-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  overflow: visible;
}

.lanny-flight-trail-path {
  opacity: 0;
  stroke-dashoffset: 320;
}

.lanny-flight-trail-path.trail-active {
  animation: flightArcDraw 1.05s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.lanny-flight-trail-dot {
  opacity: 0;
  filter: drop-shadow(0 0 12px #FBBF24);
}

.lanny-flight-trail-dot.trail-active {
  animation: flightDotFlash 1.05s ease-out forwards;
}

@keyframes flightArcDraw {
  0%   { opacity: 0.95; stroke-dashoffset: 240; }
  55%  { opacity: 1; stroke-dashoffset: 0; }
  100% { opacity: 0; stroke-dashoffset: -80; }
}

@keyframes flightDotFlash {
  0%, 25% { opacity: 0; transform: scale(0.5); }
  55%     { opacity: 1; transform: scale(1.4); }
  100%    { opacity: 0; transform: scale(0.2); }
}

.ios-saved-badge-static {
  display: inline-flex;
  align-items: center;
  padding: 6px 11px;
  border-radius: 999px;
  background: #DCFCE7;
  color: #047857;
  font-size: 12px;
  font-weight: 800;
  border: 1.5px solid #34D399;
}

/* 5. Calm, Uncluttered Right-Side Step Instruction Card */
.focus-step-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--soft);
  border: 1.5px solid var(--line);
  border-radius: 22px;
  padding: 24px;
}

.focus-card-controls {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.focus-primary-nav-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.focus-next-btn,
.focus-finish-btn {
  flex: 1 1 220px;
  min-height: 52px !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  justify-content: center;
}

.focus-secondary-nav-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.9rem;
}

/* 6. Organized Home Options: 4-Featured Launch Grid & Topic-Grouped Question Hub */
.featured-launch-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 10px;
}

.featured-launch-tile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--surface);
  border: 2px solid rgba(251, 191, 36, 0.38);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: all 0.18s ease;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
}

.featured-launch-tile:hover {
  border-color: var(--accent-warm);
  background: var(--accent-glow);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(245, 158, 11, 0.22);
}

.f-tile-icon {
  font-size: 1.75rem;
  line-height: 1;
  flex: none;
}

.f-tile-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.f-tile-body strong {
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.25;
}

.f-tile-body small {
  font-size: 0.84rem;
  color: var(--muted);
  font-weight: 600;
}

.f-tile-go {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(245, 158, 11, 0.18);
  color: var(--accent-warm);
  display: grid;
  place-items: center;
  font-size: 0.82rem;
  font-weight: 900;
  flex: none;
}

.card-topic-icon {
  font-size: 1.45rem;
  line-height: 1;
}

.flight-step-count-pill {
  font-size: 0.78rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(245, 158, 11, 0.14);
  color: var(--accent-warm);
  border: 1px solid rgba(245, 158, 11, 0.32);
}

.organized-topic-groups {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.topic-group-block {
  padding: 22px;
  border-radius: 22px;
  background: var(--soft);
  border: 1.5px solid var(--line);
}

.topic-group-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.topic-group-icon {
  font-size: 2rem;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: var(--surface);
  border: 1.5px solid rgba(251, 191, 36, 0.4);
  display: grid;
  place-items: center;
  flex: none;
}

.topic-group-header h3 {
  font-size: 1.32rem;
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.topic-group-header p {
  margin: 0;
  color: var(--muted);
  font-size: 0.96rem;
}

.topic-count-badge {
  font-size: 0.8rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--accent-glow);
  color: var(--accent-warm);
  border: 1px solid rgba(251, 191, 36, 0.4);
}

@media (max-width: 900px) {
  .focus-stage-split {
    grid-template-columns: 1fr;
  }
  .featured-launch-grid {
    grid-template-columns: 1fr;
  }
  .flight-step-connector {
    display: none;
  }
}

/* ============================================================================
   v5.8 UNSKIPPED LIVE SCROLL-AND-TAP & TWO-STAGE SEQUENTIAL DEMONSTRATIONS
   ============================================================================ */

/* 1. Live Scroll-and-Tap Demonstration Viewport */
.sim-scroll-demo-screen {
  padding: 9px 10px;
  gap: 6px;
}

.sim-scroll-full-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-height: 0;
}

.sim-scroll-cue-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
  color: #78350F;
  border: 1.5px solid #F59E0B;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  box-shadow: 0 3px 8px rgba(245, 158, 11, 0.22);
}

.scroll-finger-glyph {
  font-size: 12px;
  line-height: 1;
  flex: none;
}

.sim-scroll-viewport {
  position: relative;
  flex: 1;
  min-height: 168px;
  max-height: 228px;
  overflow: hidden;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid #CBD5E1;
  padding: 6px 11px 6px 6px;
}

.sim-scroll-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
  will-change: transform;
  animation: simLiveListScrollUp 3.8s infinite cubic-bezier(0.22, 1, 0.36, 1);
}

.sim-scroll-top-group,
.sim-scroll-target-group,
.sim-scroll-bottom-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* Target row inside scroll viewport: waits until list scrolls up, then balloons forward on tap! */
.sim-hotspot.sim-scroll-target-btn {
  animation: simScrollTargetBalloon 3.8s infinite cubic-bezier(0.22, 1, 0.36, 1);
}

.sim-hotspot.sim-scroll-target-btn .sim-touch-ripple {
  animation: simScrollTargetRipple 3.8s infinite cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes simLiveListScrollUp {
  0%, 18% {
    transform: translateY(18px);
  }
  48%, 84% {
    transform: translateY(-48px);
  }
  95%, 100% {
    transform: translateY(18px);
  }
}

@keyframes simScrollTargetBalloon {
  0%, 48%, 88%, 100% {
    transform: perspective(650px) translateZ(0px) scale(1);
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
  }
  58%, 80% {
    transform: perspective(650px) translateZ(26px) scale(1.09);
    border-color: #007AFF;
    box-shadow:
      0 14px 28px rgba(15, 23, 42, 0.28),
      0 0 0 2.5px rgba(0, 122, 255, 0.52);
  }
}

@keyframes simScrollTargetRipple {
  0%, 50%, 86%, 100% {
    opacity: 0;
    transform: scale(0.95);
  }
  58%, 78% {
    opacity: 1;
    transform: scale(1.03);
  }
}

/* Authentic Right-Edge iOS Scrollbar Track & Thumb (Moves Down as Finger Slides Content Up) */
.sim-ios-scrollbar-track {
  position: absolute;
  top: 8px;
  bottom: 8px;
  right: 3px;
  width: 3.5px;
  border-radius: 99px;
  background: rgba(100, 116, 139, 0.16);
  pointer-events: none;
}

.sim-ios-scrollbar-thumb {
  position: absolute;
  left: 0;
  width: 100%;
  height: 36px;
  border-radius: 99px;
  background: rgba(71, 85, 105, 0.65);
  animation: simIosScrollbarThumbDown 3.8s infinite cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes simIosScrollbarThumbDown {
  0%, 18%   { top: 4%; }
  48%, 84%  { top: 58%; }
  95%, 100% { top: 4%; }
}

/* Animated Finger Touching Lower Screen and Sliding UPWARD to Scroll Down */
.sim-finger-scroll-overlay {
  position: absolute;
  right: 14px;
  bottom: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  pointer-events: none;
  z-index: 18;
  animation: simFingerSlideUpOverlay 3.8s infinite cubic-bezier(0.22, 1, 0.36, 1);
}

.sim-finger-trail-arrow {
  font-size: 14px;
  font-weight: 900;
  color: #0284C7;
  line-height: 1;
  text-shadow: 0 1px 4px rgba(255, 255, 255, 0.95);
}

.sim-finger-dot {
  font-size: 19px;
  line-height: 1;
  filter: drop-shadow(0 4px 8px rgba(15, 23, 42, 0.35));
}

@keyframes simFingerSlideUpOverlay {
  0%, 12% {
    opacity: 0;
    transform: translateY(16px) scale(0.9);
  }
  20% {
    opacity: 1;
    transform: translateY(14px) scale(1.05);
  }
  46% {
    opacity: 1;
    transform: translateY(-64px) scale(1);
  }
  54%, 100% {
    opacity: 0;
    transform: translateY(-74px) scale(0.88);
  }
}

/* 2. Two-Stage Sequential Demonstration Wrapper (Stage 1 ① -> Stage 2 ②) */
.sim-two-stage-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #0F172A;
  min-height: 0;
  position: relative;
}

.sim-two-stage-pills {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 5px 6px;
  background: #0F172A;
  border-bottom: 1px solid rgba(251, 191, 36, 0.35);
  z-index: 20;
}

.stage-pill {
  font-size: 9.5px;
  font-weight: 800;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #CBD5E1;
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.stage-pill-sep {
  color: #FBBF24;
  font-size: 10px;
  font-weight: 900;
}

.stage-pill-a {
  animation: simStagePillA 4.2s infinite ease-in-out;
}

.stage-pill-b {
  animation: simStagePillB 4.2s infinite ease-in-out;
}

@keyframes simStagePillA {
  0%, 43% {
    background: #FDE047;
    color: #1C1008;
    box-shadow: 0 0 10px rgba(253, 224, 71, 0.65);
  }
  47%, 94% {
    background: rgba(255, 255, 255, 0.12);
    color: #94A3B8;
    box-shadow: none;
  }
  98%, 100% {
    background: #FDE047;
    color: #1C1008;
  }
}

@keyframes simStagePillB {
  0%, 43%, 98%, 100% {
    background: rgba(255, 255, 255, 0.12);
    color: #94A3B8;
    box-shadow: none;
  }
  47%, 94% {
    background: #38BDF8;
    color: #082F49;
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.65);
  }
}

.sim-two-stage-body {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  position: relative;
  min-height: 0;
}

.sim-stage-panel {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: 100%;
  height: 100%;
}

.sim-stage-a {
  animation: simStagePanelA 4.2s infinite cubic-bezier(0.22, 1, 0.36, 1);
}

.sim-stage-b {
  animation: simStagePanelB 4.2s infinite cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes simStagePanelA {
  0%, 42% {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
    z-index: 2;
  }
  47%, 93% {
    opacity: 0;
    transform: scale(0.96);
    pointer-events: none;
    z-index: 1;
  }
  98%, 100% {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
    z-index: 2;
  }
}

@keyframes simStagePanelB {
  0%, 42%, 98%, 100% {
    opacity: 0;
    transform: translateY(8px) scale(0.97);
    pointer-events: none;
    z-index: 1;
  }
  47%, 93% {
    opacity: 1;
    transform: translateY(0px) scale(1);
    pointer-events: auto;
    z-index: 2;
  }
}

/* When Stage B contains a scroll-and-tap list, synchronize its scroll + tap to the second half (47%–93%) of the 4.2s cycle! */
.sim-stage-b .sim-scroll-content {
  animation: simStageBScrollUp 4.2s infinite cubic-bezier(0.22, 1, 0.36, 1);
}

.sim-stage-b .sim-ios-scrollbar-thumb {
  animation: simStageBScrollbarDown 4.2s infinite cubic-bezier(0.22, 1, 0.36, 1);
}

.sim-stage-b .sim-finger-scroll-overlay {
  animation: simStageBFingerUp 4.2s infinite cubic-bezier(0.22, 1, 0.36, 1);
}

.sim-stage-b .sim-hotspot.sim-scroll-target-btn {
  animation: simStageBTargetBalloon 4.2s infinite cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes simStageBScrollUp {
  0%, 54%   { transform: translateY(16px); }
  72%, 92%  { transform: translateY(-46px); }
  98%, 100% { transform: translateY(16px); }
}

@keyframes simStageBScrollbarDown {
  0%, 54%   { top: 4%; }
  72%, 92%  { top: 58%; }
  98%, 100% { top: 4%; }
}

@keyframes simStageBFingerUp {
  0%, 50%  { opacity: 0; transform: translateY(14px); }
  55%      { opacity: 1; transform: translateY(12px); }
  70%      { opacity: 1; transform: translateY(-60px); }
  76%, 100%{ opacity: 0; transform: translateY(-68px); }
}

@keyframes simStageBTargetBalloon {
  0%, 72%, 94%, 100% {
    transform: perspective(650px) translateZ(0px) scale(1);
  }
  78%, 90% {
    transform: perspective(650px) translateZ(26px) scale(1.09);
    border-color: #007AFF;
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.28), 0 0 0 2.5px rgba(0, 122, 255, 0.52);
  }
}

/* 3. Synchronized Lanny 3D Choreography for Scroll-Up-Tap & Chained Multi-Action Steps */
.lanny-copilot-actor.gesture-scroll-up-tap .copilot-rig {
  animation: lannyGestureScrollUpTap 3.8s infinite cubic-bezier(0.22, 1, 0.36, 1);
}

.lanny-copilot-actor.gesture-scroll-up-tap .lanny-attached-beam {
  animation: beamScrollUpTap 3.8s infinite cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes lannyGestureScrollUpTap {
  0%, 12%, 100% {
    transform: perspective(820px) translate3d(-6px, 28px, -8px) rotateZ(-4deg) rotateY(-10deg) scale(0.98);
  }
  20% {
    /* Touch lower on the screen */
    transform: perspective(820px) translate3d(16px, 34px, 18px) rotateZ(9deg) rotateY(14deg) scale(1.03);
  }
  46% {
    /* Slide finger and body UPWARD to scroll the list up */
    transform: perspective(820px) translate3d(16px, -28px, 20px) rotateZ(-6deg) rotateY(14deg) scale(1.04);
  }
  54% {
    /* Brief hover before tapping target row */
    transform: perspective(820px) translate3d(4px, -6px, 10px) rotateZ(1deg) rotateY(6deg) scale(1.01);
  }
  62%, 80% {
    /* Tap the newly scrolled target row! */
    transform: perspective(820px) translate3d(20px, -6px, 26px) rotateZ(7deg) rotateY(16deg) scale(1.06);
    filter: drop-shadow(0 22px 32px rgba(251, 191, 36, 0.52));
  }
}

@keyframes beamScrollUpTap {
  0%, 12%, 100% { opacity: 0.4; transform: translate3d(0px, 22px, 0) rotate(12deg) scaleX(0.8); transform-origin: left center; }
  20%           { opacity: 0.95; transform: translate3d(18px, 26px, 0) rotate(14deg) scaleX(1.15); transform-origin: left center; }
  46%           { opacity: 0.95; transform: translate3d(18px, -24px, 0) rotate(-12deg) scaleX(1.15); transform-origin: left center; }
  62%, 80%      { opacity: 1; transform: translate3d(22px, -4px, 0) rotate(0deg) scaleX(1.24); transform-origin: left center; }
}

/* Open App (Stage 1) -> Touch Lower, Slide UP & Tap Row (Stage 2) */
.lanny-copilot-actor.gesture-open-scroll-tap .copilot-rig {
  animation: lannyGestureOpenScrollTap 4.2s infinite cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes lannyGestureOpenScrollTap {
  0%, 10%, 100% {
    transform: perspective(820px) translate3d(-8px, 4px, -8px) rotateZ(-5deg) rotateY(-10deg) scale(0.98);
  }
  18%, 36% {
    /* Stage 1: Tap the starting app icon */
    transform: perspective(820px) translate3d(18px, -4px, 22px) rotateZ(6deg) rotateY(14deg) scale(1.04);
  }
  52% {
    /* Stage 2 starts: Move down to touch lower on the list */
    transform: perspective(820px) translate3d(15px, 42px, 18px) rotateZ(9deg) rotateY(12deg) scale(1.03);
  }
  70% {
    /* Slide UPWARD to scroll the list up */
    transform: perspective(820px) translate3d(16px, -24px, 20px) rotateZ(-6deg) rotateY(14deg) scale(1.04);
  }
  78%, 90% {
    /* Tap the scrolled target row */
    transform: perspective(820px) translate3d(20px, 6px, 26px) rotateZ(7deg) rotateY(16deg) scale(1.06);
    filter: drop-shadow(0 22px 32px rgba(251, 191, 36, 0.52));
  }
}

/* Center Swipe Down (Stage 1) -> Type & Tap App in Search (Stage 2) */
.lanny-copilot-actor.gesture-center-swipe-type-tap .copilot-rig {
  animation: lannyGestureCenterSwipeTypeTap 4.2s infinite cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes lannyGestureCenterSwipeTypeTap {
  0%, 10%, 100% {
    transform: perspective(820px) translate3d(-6px, -16px, -8px) rotateZ(-5deg) rotateY(-10deg) scale(0.98);
  }
  18% {
    /* Stage 1: Touch center of Home Screen */
    transform: perspective(820px) translate3d(16px, -14px, 18px) rotateZ(3deg) rotateY(12deg) scale(1.03);
  }
  38% {
    /* Pull straight DOWN from center */
    transform: perspective(820px) translate3d(18px, 38px, 22px) rotateZ(12deg) rotateY(15deg) scale(1.04);
  }
  52% {
    /* Hover as Search opens & types */
    transform: perspective(820px) translate3d(-4px, -6px, 4px) rotateZ(-2deg) rotateY(4deg) scale(1);
  }
  64%, 88% {
    /* Stage 2: Tap Top Hit app icon */
    transform: perspective(820px) translate3d(20px, -8px, 26px) rotateZ(7deg) rotateY(16deg) scale(1.06);
    filter: drop-shadow(0 22px 32px rgba(251, 191, 36, 0.52));
  }
}

/* Chained Two-Position Gestures (Stage 1 -> Stage 2) */
.lanny-copilot-actor.gesture-chain-mid-to-top .copilot-rig {
  animation: lannyGestureChainMidToTop 4.2s infinite cubic-bezier(0.22, 1, 0.36, 1);
}

.lanny-copilot-actor.gesture-chain-bottom-to-upper .copilot-rig {
  animation: lannyGestureChainBottomToUpper 4.2s infinite cubic-bezier(0.22, 1, 0.36, 1);
}

.lanny-copilot-actor.gesture-chain-mid-to-bottom .copilot-rig {
  animation: lannyGestureChainMidToBottom 4.2s infinite cubic-bezier(0.22, 1, 0.36, 1);
}

.lanny-copilot-actor.gesture-chain-top-to-bottom .copilot-rig {
  animation: lannyGestureChainTopToBottom 4.2s infinite cubic-bezier(0.22, 1, 0.36, 1);
}

.lanny-copilot-actor.gesture-chain-open-tap-mid .copilot-rig {
  animation: lannyGestureChainOpenTapMid 4.2s infinite cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes lannyGestureChainMidToTop {
  0%, 10%, 100% { transform: perspective(820px) translate3d(-6px, 95px, -8px) rotateZ(-4deg) scale(0.98); }
  18%, 38%      { transform: perspective(820px) translate3d(18px, 92px, 22px) rotateZ(7deg) rotateY(14deg) scale(1.04); }
  50%           { transform: perspective(820px) translate3d(-4px, 12px, 8px) rotateZ(-4deg) scale(1.01); }
  62%, 88%      { transform: perspective(820px) translate3d(20px, -6px, 26px) rotateZ(7deg) rotateY(16deg) scale(1.06); filter: drop-shadow(0 22px 32px rgba(251, 191, 36, 0.52)); }
}

@keyframes lannyGestureChainBottomToUpper {
  0%, 10%, 100% { transform: perspective(820px) translate3d(-6px, 165px, -8px) rotateZ(-4deg) scale(0.98); }
  18%, 38%      { transform: perspective(820px) translate3d(18px, 168px, 22px) rotateZ(8deg) rotateY(14deg) scale(1.04); }
  50%           { transform: perspective(820px) translate3d(-4px, 18px, 8px) rotateZ(-4deg) scale(1.01); }
  62%, 88%      { transform: perspective(820px) translate3d(20px, -4px, 26px) rotateZ(7deg) rotateY(16deg) scale(1.06); filter: drop-shadow(0 22px 32px rgba(251, 191, 36, 0.52)); }
}

@keyframes lannyGestureChainMidToBottom {
  0%, 10%, 100% { transform: perspective(820px) translate3d(-6px, -115px, -8px) rotateZ(-4deg) scale(0.98); }
  18%, 38%      { transform: perspective(820px) translate3d(18px, -112px, 22px) rotateZ(6deg) rotateY(14deg) scale(1.04); }
  50%           { transform: perspective(820px) translate3d(-4px, -18px, 8px) rotateZ(3deg) scale(1.01); }
  62%, 88%      { transform: perspective(820px) translate3d(20px, -4px, 26px) rotateZ(7deg) rotateY(16deg) scale(1.06); filter: drop-shadow(0 22px 32px rgba(251, 191, 36, 0.52)); }
}

@keyframes lannyGestureChainTopToBottom {
  0%, 10%, 100% { transform: perspective(820px) translate3d(-6px, -135px, -8px) rotateZ(-4deg) scale(0.98); }
  18%, 38%      { transform: perspective(820px) translate3d(18px, -132px, 22px) rotateZ(6deg) rotateY(14deg) scale(1.04); }
  50%           { transform: perspective(820px) translate3d(-4px, -20px, 8px) rotateZ(3deg) scale(1.01); }
  62%, 88%      { transform: perspective(820px) translate3d(20px, -4px, 26px) rotateZ(7deg) rotateY(16deg) scale(1.06); filter: drop-shadow(0 22px 32px rgba(251, 191, 36, 0.52)); }
}

@keyframes lannyGestureChainOpenTapMid {
  0%, 10%, 100% { transform: perspective(820px) translate3d(-8px, 4px, -8px) rotateZ(-5deg) rotateY(-10deg) scale(0.98); }
  18%, 38%      { transform: perspective(820px) translate3d(18px, -4px, 22px) rotateZ(6.5deg) rotateY(14deg) scale(1.04); }
  48%, 56%      { transform: perspective(820px) translate3d(-6px, 6px, 0px) rotateZ(-3deg) rotateY(-4deg) scale(0.99); }
  64%, 88%      { transform: perspective(820px) translate3d(20px, -6px, 26px) rotateZ(7deg) rotateY(16deg) scale(1.06); filter: drop-shadow(0 22px 32px rgba(251, 191, 36, 0.52)); }
}

/* ============================================================================
   v5.9 60FPS PRECISION LANNY CHOREOGRAPHY, FULL-BODY LOCKSTEP & LIVE BANNER
   ============================================================================ */

/* 1. Disable Competing CSS Timers When 60fps JS Choreography Engine Is Active */
.iphone-stage-anchor.js-choreo-active .lanny-copilot-actor {
  left: 0 !important;
  top: 0 !important;
  right: auto !important;
  transition: none !important;
  will-change: transform;
}

.iphone-stage-anchor.js-choreo-active .lanny-copilot-actor .copilot-rig {
  animation: none !important;
  will-change: transform;
}

.iphone-stage-anchor.js-choreo-active .lanny-copilot-actor .lanny-attached-beam {
  animation: none !important;
  left: 214px;
  top: 81px;
  width: 28px;
  height: 6px;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.iphone-stage-anchor.js-choreo-active .sim-scroll-content,
.iphone-stage-anchor.js-choreo-active .sim-ios-scrollbar-thumb,
.iphone-stage-anchor.js-choreo-active .sim-finger-scroll-overlay,
.iphone-stage-anchor.js-choreo-active .sim-stage-a,
.iphone-stage-anchor.js-choreo-active .sim-stage-b,
.iphone-stage-anchor.js-choreo-active .stage-pill-a,
.iphone-stage-anchor.js-choreo-active .stage-pill-b,
.iphone-stage-anchor.js-choreo-active .sim-slider-knob,
.iphone-stage-anchor.js-choreo-active .sim-slider-fill,
.iphone-stage-anchor.js-choreo-active .sim-swipe-left-row {
  animation: none !important;
}

.iphone-stage-anchor.js-choreo-active .sim-stage-a,
.iphone-stage-anchor.js-choreo-active .sim-stage-b {
  transition: opacity 0.26s ease, transform 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}

.stage-pill.choreo-pill-active-a {
  background: #FDE047 !important;
  color: #1C1008 !important;
  box-shadow: 0 0 12px rgba(253, 224, 71, 0.72) !important;
}

.stage-pill.choreo-pill-active-b {
  background: #38BDF8 !important;
  color: #082F49 !important;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.72) !important;
}

/* 2. Target Button 3D Ballooning Synchronized 100% with Lanny's Actual Fingertip Touch */
.iphone-stage-anchor.js-choreo-active .sim-hotspot {
  animation: none !important;
  transition:
    transform 0.24s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.24s ease,
    border-color 0.24s ease;
}

.iphone-stage-anchor.js-choreo-active .sim-hotspot .sim-touch-ripple {
  animation: none !important;
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 0.2s ease, transform 0.24s ease;
}

.iphone-stage-anchor.js-choreo-active .sim-hotspot.lanny-touching-now {
  transform: perspective(650px) translateZ(28px) translateY(-2px) scale(1.12) !important;
  border-color: #007AFF !important;
  box-shadow:
    0 18px 34px rgba(15, 23, 42, 0.36),
    0 0 0 3px rgba(251, 191, 36, 0.85),
    0 0 22px rgba(56, 189, 248, 0.55) !important;
  z-index: 22 !important;
}

.iphone-stage-anchor.js-choreo-active .sim-hotspot.ios-isolated-start-btn.lanny-touching-now {
  transform: perspective(650px) translateZ(42px) translateY(-4px) scale(1.36) !important;
  filter: drop-shadow(0 24px 36px rgba(0, 0, 0, 0.72)) drop-shadow(0 0 20px rgba(251, 191, 36, 0.68));
}

.iphone-stage-anchor.js-choreo-active .sim-hotspot.ios-save-circle-btn.lanny-touching-now,
.iphone-stage-anchor.js-choreo-active .sim-hotspot.ios-saved-check-circle.lanny-touching-now,
.iphone-stage-anchor.js-choreo-active .sim-hotspot.ios-plus-circle.lanny-touching-now,
.iphone-stage-anchor.js-choreo-active .sim-hotspot.ios-send-circle.lanny-touching-now,
.iphone-stage-anchor.js-choreo-active .sim-hotspot.ios-share-btn.lanny-touching-now,
.iphone-stage-anchor.js-choreo-active .sim-hotspot.ios-nav-btn.lanny-touching-now,
.iphone-stage-anchor.js-choreo-active .sim-hotspot.ios-icon-btn.lanny-touching-now,
.iphone-stage-anchor.js-choreo-active .sim-hotspot.ios-pill-btn.lanny-touching-now,
.iphone-stage-anchor.js-choreo-active .sim-hotspot.ios-shutter-btn.lanny-touching-now,
.iphone-stage-anchor.js-choreo-active .sim-hotspot.ios-round-glass-btn.lanny-touching-now,
.iphone-stage-anchor.js-choreo-active .sim-hotspot.ios-round-action-btn.lanny-touching-now,
.iphone-stage-anchor.js-choreo-active .sim-hotspot.ios-purple-hide-btn.lanny-touching-now,
.iphone-stage-anchor.js-choreo-active .sim-hotspot.ios-call-circle-btn.lanny-touching-now,
.iphone-stage-anchor.js-choreo-active .sim-hotspot.ios-tab-btn.lanny-touching-now,
.iphone-stage-anchor.js-choreo-active .sim-hotspot.ios-status-pill.lanny-touching-now,
.iphone-stage-anchor.js-choreo-active .sim-hotspot.ios-corner-thumb.lanny-touching-now,
.iphone-stage-anchor.js-choreo-active .sim-hotspot.ios-callout-bubble.lanny-touching-now {
  transform: perspective(650px) translateZ(36px) translateY(-3px) scale(1.46) !important;
}

.iphone-stage-anchor.js-choreo-active .sim-hotspot.lanny-touching-now .sim-touch-ripple {
  opacity: 1;
  transform: scale(1.05);
}

/* 3. Luminous Screen Contact Ring & Action Tag Directly Under Lanny's Fingertip */
.lanny-screen-contact-ring {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 30;
  opacity: 0;
  transition: opacity 0.16s ease;
  will-change: transform, opacity;
}

.lanny-screen-contact-ring.active {
  opacity: 1;
}

.contact-ring-dot {
  position: absolute;
  left: -13px;
  top: -13px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(254, 240, 138, 0.96) 0%, rgba(251, 191, 36, 0.72) 55%, rgba(56, 189, 248, 0) 100%);
  border: 2.5px solid #FFFFFF;
  box-shadow: 0 0 18px 4px rgba(251, 191, 36, 0.92), 0 0 28px rgba(56, 189, 248, 0.65);
}

.contact-ring-pulse {
  position: absolute;
  left: -24px;
  top: -24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2.5px solid #FDE047;
  box-shadow: 0 0 16px rgba(253, 224, 71, 0.75);
  animation: contactRingExpand 1.1s infinite ease-out;
}

@keyframes contactRingExpand {
  0%   { transform: scale(0.62); opacity: 0.95; }
  100% { transform: scale(1.38); opacity: 0; }
}

.contact-ring-tag {
  position: absolute;
  left: 18px;
  top: -14px;
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
  color: #FEF08A;
  border: 2px solid #FBBF24;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 900;
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.58), 0 0 14px rgba(251, 191, 36, 0.45);
  letter-spacing: 0.01em;
}

.lanny-screen-contact-ring.ring-on-right .contact-ring-tag {
  left: auto;
  right: 18px;
}

/* 4. Live Synchronized Action Banner Above Phone & Right-Card Sync Highlight */
.lanny-live-action-banner {
  width: 100%;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.96) 0%, rgba(30, 41, 59, 0.94) 100%);
  border: 2px solid rgba(56, 189, 248, 0.55);
  border-radius: 16px;
  padding: 10px 14px;
  margin-bottom: 10px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.live-banner-top-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.lanny-live-phase-pill {
  background: rgba(56, 189, 248, 0.2);
  color: #7DD3FC;
  border: 1.5px solid #38BDF8;
  font-size: 0.76rem;
  font-weight: 900;
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.lanny-live-phase-pill.touching-phase {
  background: linear-gradient(135deg, #FDE047 0%, #F59E0B 100%);
  color: #1C1008;
  border-color: #FEF08A;
  box-shadow: 0 0 14px rgba(251, 191, 36, 0.65);
}

.lanny-live-phase-text {
  color: #FFFFFF;
  font-size: 0.98rem;
  font-weight: 800;
  line-height: 1.3;
  flex: 1 1 200px;
}

.live-banner-progress-track {
  width: 100%;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.live-banner-progress-fill {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #38BDF8 0%, #FDE047 60%, #F59E0B 100%);
}

.lookfor-card {
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.lookfor-card.lanny-sync-active {
  border-color: #FBBF24 !important;
  box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.45), 0 10px 24px rgba(0, 0, 0, 0.22);
  transform: translateY(-1px);
}

/* ============================================================================
   v6.2 STANDOUT "REPLAY" BUTTON & LANNY REPLAY CALLOUT
   ============================================================================ */
.lanny-replay-callout {
  margin-top: var(--space-3);
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(56, 189, 248, 0.14);
  border: 1.5px solid rgba(56, 189, 248, 0.55);
  color: var(--ink);
  font-size: 0.96rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.lanny-replay-callout strong {
  color: #38BDF8;
}

[data-theme=light] .lanny-replay-callout strong,
[data-theme=lantern] .lanny-replay-callout strong {
  color: #0284C7;
}

.lanny-replay-callout.is-pulsing {
  border-color: #38BDF8;
  background: rgba(56, 189, 248, 0.22);
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.35);
}

.focus-replay-btn {
  background: linear-gradient(135deg, #38BDF8 0%, #0284C7 100%) !important;
  color: #FFFFFF !important;
  border: 2px solid #BAE6FD !important;
  font-weight: 900 !important;
  font-size: 1.02rem !important;
  padding: 12px 22px !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 22px rgba(2, 132, 199, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
  letter-spacing: 0.01em;
  transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease !important;
}

.focus-replay-btn:hover {
  transform: translateY(-2px) scale(1.03);
  filter: brightness(1.08);
  box-shadow: 0 12px 28px rgba(56, 189, 248, 0.58) !important;
}

.focus-replay-btn.replay-standout-pulse {
  animation: replayBtnStandoutPulse 1.3s infinite ease-in-out alternate;
}

@keyframes replayBtnStandoutPulse {
  0% {
    transform: scale(1);
    box-shadow: 0 8px 22px rgba(2, 132, 199, 0.42), 0 0 0 0 rgba(56, 189, 248, 0.7);
  }
  100% {
    transform: scale(1.06);
    box-shadow: 0 12px 30px rgba(56, 189, 248, 0.75), 0 0 0 6px rgba(56, 189, 248, 0.25);
  }
}

.flight-step-pill.step1-replay-beacon {
  border-color: #34D399 !important;
  box-shadow: 0 0 18px rgba(52, 211, 153, 0.65) !important;
}