/* Welcome screen only. Playback styling and timing are unchanged. */
.welcome {
  max-width: 850px;
  margin: clamp(28px, 8vh, 90px) auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid #c4ccd0;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 12px 32px #233c4a0a, 0 2px 5px #233c4a06;
}
.welcome-tabbar {
  display: flex;
  padding: 5px 6px 0;
  background: linear-gradient(#f7f9fa, #e9edef);
  border-bottom: 1px solid #cbd3d7;
}
.welcome-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: -1px;
  padding: 9px 22px 10px 13px;
  border: 1px solid #cbd3d7;
  border-bottom-color: #fff;
  border-radius: 5px 5px 0 0;
  box-shadow: inset 0 2px #79a76b;
  background: #fff;
  color: #35434c;
  font-size: 12px;
}
.welcome-tab img { width: 17px; height: 17px; }
.welcome-layout { display: grid; grid-template-columns: 185px minmax(0, 1fr); }
.welcome-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 46px 26px;
  border-right: 1px solid #e3eae2;
  background: linear-gradient(150deg, #f3f8ef, #f8faf7);
}
.welcome-logo { width: 48px; height: 48px; margin-bottom: 22px; }
.welcome-brand strong { color: #375044; font-size: 15px; font-weight: 600; }
.welcome-brand > span { margin-top: 9px; color: #7a897e; font-size: 11px; line-height: 1.8; }
.welcome-brand-lines { display: grid; gap: 7px; width: 100%; margin-top: auto; padding-top: 46px; }
.welcome-brand-lines i { display: block; height: 3px; width: 62%; background: #dce8d5; border-radius: 2px; }
.welcome-brand-lines i:nth-child(2) { width: 86%; background: #e7ede3; }
.welcome-brand-lines i:nth-child(3) { width: 42%; background: #e7ede3; }
.welcome-content { padding: 49px 46px 47px; }
.welcome .welcome-content h1 { margin: 0; color: #273a45; font-size: clamp(23px, 2.6vw, 30px); font-weight: 500; letter-spacing: -.8px; line-height: 1.65; }
.welcome-content h1 em { color: #387a48; font-style: normal; font-weight: 600; }
.welcome .welcome-content p { margin: 20px 0 28px; color: #75818a; font-size: 14px; line-height: 1.9; }
.welcome .welcome-open {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 12px 18px;
  border: 1px solid #397345;
  border-radius: 4px;
  background: linear-gradient(#538b54, #427b48);
  box-shadow: inset 0 1px #ffffff24, 0 2px 3px #254c2510;
  color: #fff;
  font-size: 13px;
}
.welcome .welcome-open:hover { background: #396e40; border-color: #2c6235; }
.welcome-open-arrow { margin-left: 14px; opacity: .8; }
@media (max-width: 620px) {
  .welcome { margin: 25px auto; }
  .welcome-layout { grid-template-columns: minmax(0, 1fr); }
  .welcome-brand { flex-direction: row; align-items: center; gap: 12px; padding: 18px 24px; border-right: 0; border-bottom: 1px solid #e3eae2; }
  .welcome-logo { width: 32px; height: 32px; margin: 0; }
  .welcome-brand > span, .welcome-brand-lines { display: none; }
  .welcome-content { padding: 30px 24px 36px; }
}

.titlebar #openAnother { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 5px 10px; font-size: 12px; border-radius: 3px; color: #205b30; background: linear-gradient(150deg, #eeebf7, #f8f7fc); box-shadow: none; }
.titlebar #openAnother:hover { background: linear-gradient(150deg, #eeebf7, #f8f7fc); }
.titlebar #openAnother svg { width: 14px; height: 14px; flex: none; }
.titlebar #openAnother .welcome-open-arrow { margin-left: 0; }