:root{
  /* Use a wider visible max width for the topbar and layout */
  --topbar-width: 1920px; /* visible max width of the double-topbar (expanded to 1920) */
  --topbar-height: 36px; /* single bar height */
  --radius: 6px;
  --double-height: calc(var(--topbar-height) * 2); /* two stacked bars */
}

/* Page reset to center the demo */
html,body{
  height:100%;
  margin:0;
  /* Use normal document flow so content can expand naturally */
  display:block;
  overflow:auto; /* allow page scrolling */
  background: #ffffff; /* pure white background */
  font-family:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* Wrapper keeps the topbars sized exactly as requested and pinned to the top.
   Use a fluid width with a max so the bar matches the viewport on smaller screens. */
.topbar-wrap{
  width: 100%;
  max-width: var(--topbar-width);
  height:var(--double-height);
  padding:0;
  box-sizing:content-box;
  /* pin to top center of viewport */
  position:fixed;
  top:0;
  left:50%;
  transform: translateX(-50%) translateY(0);
  transform-origin: center top;
  transition: transform 220ms cubic-bezier(.2,.9,.2,1);
  will-change: transform;
  overflow:visible;
  z-index:1000; /* keep topbar above content (prevents separator overlap) */
}

/* hide the topbar when scrolling down by moving it up out of view */
.topbar-wrap.hidden{
  transform: translateX(-50%) translateY(-110%) scale(1);
}

/* Base topbar styles (each stacked bar uses this) */
.topbar{
  width:100%;
  height:var(--topbar-height);
  display:flex;
  align-items:center;
  gap:12px;
  padding:3px 12px;
  box-sizing:border-box;
  color:white;
  border-radius:0;
}

/* Brand bar (top) - darker, deeper red */
.topbar.brand{
  background: #BA1414;
  align-items:center;
}

/* Navigation bar (second, brighter) */
.topbar.navbar{
  margin-top:0;
  /* slightly darker red gradient */
  background: linear-gradient(to bottom, #ff5252 0%, #ff2b2b 100%);
  /* tiny white line on top and black outline under the bar */
  border-top: 0.6px solid rgba(255,255,255,0.6);
  border-bottom: 2px solid #000;
  box-shadow: none;
  align-items:center;
}

/* layout areas */
.left, .center, .right{
  display:flex;
  align-items:center;
  height:100%;
}
.left{ flex:0 0 auto; padding-left:16px; }
.center{ flex:1 1 auto; justify-content:center; color:rgba(255,255,255,0.98); font-weight:700; font-size:13px; gap:6px; }
.right{ flex:0 0 auto; }

/* logo sizing to fit the 36px height comfortably and sit at left of top bar */
.logo{
  width:120px;
  height:36px;
  display:block;
  object-fit:contain;
  user-select:none;
  -webkit-user-drag:none;
  transform: none;
}

/* navigation (now in the second, brighter bar) */
.nav{
  display:flex;
  align-items:center;
  gap:8px;
  margin-left:0;
}

/* Arial bold navigation buttons */
.nav-btn{
  font-family: Arial, Helvetica, sans-serif;
  font-weight:700;
  font-size:13px;
  color: #fff;
  background: transparent;
  border: 0;
  padding:6px 12px;
  border-radius:0;
  cursor:pointer;
  min-height:28px;
  line-height:1;
  -webkit-tap-highlight-color: transparent;
}
.nav-btn:active,
.nav-btn:focus{
  outline: none;
  background: rgba(255,255,255,0.09);
}

/* button styles (legacy) */
.icon-btn{
  height: calc(var(--topbar-height) - 8px);
  min-width:40px;
  padding:0 8px;
  border:0;
  border-radius:0;
  background: rgba(255,255,255,0.08);
  color:white;
  font-size:16px;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

/* Make the whole thing scale down on small viewports while keeping the requested pixel dimensions */
@media (max-width: 1200px){
  .topbar-wrap{
    transform: translateX(-50%) scale(calc( (100vw - 24px) / var(--topbar-width) ));
    transform-origin: center top;
  }
}

/* Content area below the fixed topbar: a centered white card showing the lljmk image */
/* Increase padding-top to account for two stacked bars */
.content{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding-top: calc(var(--double-height) + 20px); /* ensure content sits fully below the fixed double topbar */
  box-sizing:border-box;
  pointer-events:auto;
}



/* Card now sized to host a 16:9 player up to 1920x1080 but constrained to viewport for responsiveness */
.card{
  background:transparent;
  /* expand the card to match the wider topbar (up to 1920px) while keeping responsive behavior */
  width: min(98%, 1920px);
  max-width: 1920px;
  box-sizing:border-box;
  border-radius:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px;
  overflow:visible;
}

/* video-card enforces the 16:9 aspect ratio and max height (1080) while scaling to available width */
.video-card{
  width:100%;
  max-width: 1080px; /* allow larger players on wider layouts */
  display:flex;
  flex-direction:column; /* stack title above the player */
  align-items:center;
  justify-content:flex-start; /* keep title and player stacked from the top of this block */
  padding:0 12px;
  margin: 40px auto 0; /* increased top margin so the whole video block sits lower on the page */
  box-sizing:border-box;
  overflow:visible;
  gap: 12px; /* spacing between title and player */
}

/* responsive video container preserving 16:9 (1920x1080) */
.video-wrap{
  width:100%;
  max-width: 1920px;
  aspect-ratio: 16/9;
  /* constrain height so it never overflows viewport on short screens */
  max-height: calc(80vh);
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  position:relative; /* allow overlay positioning */
}

/* larger variant: keep the player centered and allow wider sizes (so the title sits above) */
.video-wrap.large{
  width: 100%;
  max-width: 1280px; /* allow a larger player while still constrained for readability */
  aspect-ratio: 16/9;
  height: auto;
  max-height: calc(80vh);
  position:relative; /* allow title overlay positioning */
  will-change: transform;
  margin-top: 20px; /* push the video down further from the title/intro */
  margin-left: auto;
  margin-right: auto;
}



/* centered gray separator between intro and latest video — match topbar visible width and center it */
.separator{
  /* span the same visible width as the topbar and center in viewport */
  width: 100%;
  max-width: var(--topbar-width);
  height:1px;
  background: #d0d0d0;
  margin: 30px auto 8px; /* gap so separator doesn't sit under the fixed topbar */
  border-radius:1px;
  opacity:0.95;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  box-sizing: border-box;
  z-index: 999; /* sit under topbar but above other content where appropriate */
}

/* Make the separator scale similarly on very narrow viewports (matching topbar centering behavior) */
@media (max-width: 1200px){
  .topbar-wrap{
    /* if viewport is narrower than the max width, the topbar-wrap will naturally be 100% and centered;
       keep the transform stable (no extra scaling transform required) */
    transform: translateX(-50%) translateY(0);
  }
  .separator{
    transform: translateX(-50%) scale(calc( (100vw - 24px) / var(--topbar-width) ));
    transform-origin: center top;
  }
}

/* Title above the video (kept for non-overlay scenarios) */
.video-title{
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 800;
  font-size: 48px;
  color: #1F1F1F;
  text-align: center;
  width: 100%;
  max-width: 100%;
  padding: 0 12px; /* prevent clipping at narrow edges */
  margin: 12px auto 12px; /* keep title closer below the separator */
  box-sizing: border-box;
  word-break: break-word;
  -webkit-user-select: none;
  user-select: none;
}

/* keep the video container positioned for potential decorations */
.video-wrap{ position:relative; }

/* slightly scale down overlay on very small screens */
@media (max-width:420px){
  .video-wrap .video-overlay{
    font-size:16px;
    padding:6px 10px;
    top:8px;
  }
}





/* iframe expands to fill the 16:9 container */
.video-embed{
  width:100%;
  height:100%;
  border:0;
  display:block;
}



.hero{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  display:block;
  user-select:none;
  -webkit-user-drag:none;
}

/* simple Welcome / page headings — use Arial and consistent sizing */
.welcome-top,
.welcome{
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 800;
  font-size: 48px;
  color: #1F1F1F;
  margin-top: 20px;
  text-align: center;
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  -webkit-user-select: none;
  user-select: none;
}

/* Intro block under Welcome: avatar on left, text on right; centered within the card */
.intro{
  width:100%;
  max-width:720px;
  display:flex;
  gap:12px;
  align-items:center;
  margin: 12px auto 0;
  box-sizing:border-box;
}
.intro-text{
  flex:1 1 60%;
}
.intro-title{
  font-family: Arial, Helvetica, sans-serif;
  font-weight:800;
  font-size:20px;
  margin:0 0 8px 0;
  color:#1F1F1F;
}
.intro-body{
  margin:0;
  color:#333;
  line-height:1.35;
  font-size:14px;
  font-family: Arial, Helvetica, sans-serif;
}
/* image container keeps avatar tidy and responsive */
.intro-img{
  flex: 0 0 120px;
  width:120px;
  height:120px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.intro-img .hero{
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:4px;
  background:transparent;
}

/* Slightly adjust layout for very small screens: stack vertically */
@media (max-width:420px){
  .intro{
    flex-direction:column-reverse;
    align-items:flex-start;
    gap:12px;
  }
  .intro-img{
    width:88px;
    height:88px;
  }
  .welcome-top{
    font-size:34px;
  }
}