.feature-tour[hidden], .feature-tour [hidden] { display: none !important; }
.feature-tour {
  position: fixed;
  inset: 0;
  z-index: 10000;
  isolation: isolate;
  background: rgba(9, 22, 17, .5);
}
.feature-tour.has-target { background: transparent; }
.feature-tour-focus {
  position: fixed;
  border: 2px solid #e6c674;
  border-radius: 15px;
  box-shadow: 0 0 0 9999px rgba(9, 22, 17, .56);
  pointer-events: none;
}
.feature-tour-panel {
  position: fixed;
  box-sizing: border-box;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 26px;
  border: 1px solid #e6dfd0;
  border-radius: 23px;
  color: #152c23;
  background: #faf7ef;
  box-shadow: 0 20px 75px rgba(0, 0, 0, .24);
  font-family: Inter, Arial, sans-serif;
}
.feature-tour-panel:focus { outline: none; }
.feature-tour-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.feature-tour-label { color: #586a60; font-size: 11px; font-weight: 700; letter-spacing: .055em; text-transform: uppercase; }
.feature-tour-panel button { min-height: 44px; font-family: inherit; cursor: pointer; touch-action: manipulation; }
.feature-tour-close {
  display: grid;
  flex: 0 0 44px;
  place-items: center;
  width: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #485c51;
  background: #efece2;
  font-size: 28px;
  line-height: 1;
}
.feature-tour-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin: 12px 0;
  border: 1px solid #d7c698;
  border-radius: 50%;
  color: #715c26;
  font-size: 16px;
  font-weight: 600;
}
.feature-tour-panel h2 {
  margin: 0 0 14px;
  color: #152c23;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 29px;
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: 1.09;
  text-wrap: balance;
}
.feature-tour-panel p { margin: 0 0 14px; font-size: 15px; line-height: 1.5; }
.feature-tour-panel .feature-tour-note {
  margin-bottom: 20px;
  padding-left: 12px;
  border-left: 2px solid #cab574;
  color: #5d685f;
  font-size: 13px;
}
.feature-tour-progress { display: flex; gap: 6px; margin-bottom: 16px; }
.feature-tour-progress span { height: 4px; width: 20px; border-radius: 4px; background: #dedfd5; }
.feature-tour-progress .is-current { width: 34px; background: #96783b; }
.feature-tour-actions { display: flex; gap: 10px; }
.feature-tour-actions button { padding: 12px 16px; border: 1px solid transparent; border-radius: 12px; font-size: 14px; font-weight: 650; }
.feature-tour-back { color: #234537; background: #eeeee4; }
.feature-tour-next { flex: 1; color: #fff; background: #214b3b; }
.feature-tour-panel button:focus-visible { outline: 3px solid #aa8740; outline-offset: 3px; }
.feature-tour-panel .feature-tour-skip {
  display: block;
  width: 100%;
  margin: 8px 0 -10px;
  padding: 9px 4px;
  border: 0;
  color: #59695f;
  background: transparent;
  font-size: 13px;
}
@media (max-width: 600px) {
  .feature-tour-panel { padding: 20px; border-radius: 20px; }
  .feature-tour-panel h2 { font-size: 27px; }
  .feature-tour-panel p { font-size: 14px; }
  .feature-tour-mark { margin-top: 6px; }
}
@media (max-height: 520px) {
  .feature-tour-panel { padding: 14px 20px; }
  .feature-tour-mark { display: none; }
  .feature-tour-panel h2 { font-size: 23px; margin-bottom: 9px; }
  .feature-tour-panel p, .feature-tour-panel .feature-tour-note { margin-bottom: 10px; }
}
@media (max-width: 600px) and (max-height: 640px) {
  .feature-tour-panel { padding: 16px; }
  .feature-tour-mark { display: none; }
  .feature-tour-panel h2 { font-size: 24px; margin-bottom: 10px; }
  .feature-tour-panel p { font-size: 13px; margin-bottom: 10px; }
  .feature-tour-panel .feature-tour-note { margin-bottom: 12px; }
  .feature-tour-progress { margin-bottom: 12px; }
}