:root {
  --ech-tour-ivory: #f3eee5;
  --ech-tour-green: #17362c;
  --ech-tour-bronze: #a37e43;
}

.ech-guide-surface {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(420px, 100vw);
  background: var(--ech-tour-ivory);
  border-left: 1px solid color-mix(in srgb, var(--ech-tour-bronze) 28%, transparent);
  color: var(--ech-tour-green);
  z-index: 1200;
  padding: 28px;
  overflow: auto;
  box-sizing: border-box;
  box-shadow: -18px 0 40px rgba(23, 54, 44, .16);
}

.ech-guide-trigger { float: right; margin: 12px; border: 0; background: transparent; color: var(--ech-tour-green); font: inherit; font-size: 12px; letter-spacing: .13em; text-transform: uppercase; cursor: pointer; }
.ech-guide-header { display: flex; justify-content: space-between; gap: 18px; border-bottom: 1px solid rgba(163,126,67,.28); padding-bottom: 18px; }
.ech-guide-header h2, .ech-tour-card h2, .ech-tour-intro h2 { margin: 4px 0 8px; font-family: Georgia, serif; font-weight: 500; }
.ech-guide-header p { margin: 0; line-height: 1.55; color: #5f5a50; }
.ech-guide-eyebrow, .ech-guide-area { margin: 0; color: #80602f; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.ech-guide-close, .ech-tour-close { border: 0; background: transparent; color: var(--ech-tour-green); font-size: 24px; cursor: pointer; }
.ech-guide-search { margin: 20px 0; }.ech-guide-search input { width: 100%; box-sizing: border-box; border: 1px solid rgba(163,126,67,.38); background: #fffaf1; border-radius: 10px; padding: 12px; color: var(--ech-tour-green); }
.ech-guide-tour-status { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: rgba(23,54,44,.07); border-left: 2px solid var(--ech-tour-bronze); padding: 12px; margin-bottom: 18px; }
.ech-guide-group { margin: 22px 0; }.ech-guide-group h3 { color: #80602f; font-size: 12px; letter-spacing: .13em; text-transform: uppercase; }
.ech-guide-activity { border-top: 1px solid rgba(163,126,67,.18); padding: 14px 0; }.ech-guide-activity-title { font-family: Georgia, serif; font-size: 18px; }.ech-guide-activity-copy { color: #5f5a50; font-size: 13px; line-height: 1.55; margin: 6px 0 10px; }
.ech-guide-action, .ech-guide-link, .ech-guide-back { border: 0; background: transparent; color: #80602f; cursor: pointer; font: inherit; padding: 0; text-decoration: underline; }.ech-guide-footer { border-top: 1px solid rgba(163,126,67,.18); margin-top: 22px; padding-top: 16px; }
.ech-tour-layer { position: fixed; inset: 0; z-index: 1300; pointer-events: none; }.ech-tour-scrim { position: absolute; inset: 0; background: rgba(23,54,44,.58); }.ech-tour-highlight { position: fixed; border: 2px solid var(--ech-tour-bronze); border-radius: 10px; box-shadow: 0 0 0 9999px rgba(23,54,44,.48); pointer-events: none; }
.ech-tour-card, .ech-tour-intro { position: fixed; right: 28px; bottom: 28px; width: min(380px, calc(100vw - 36px)); box-sizing: border-box; background: var(--ech-tour-ivory); color: var(--ech-tour-green); border: 1px solid rgba(163,126,67,.45); border-radius: 18px; padding: 24px; box-shadow: 0 20px 60px rgba(0,0,0,.28); pointer-events: auto; }.ech-tour-intro { right: 50%; bottom: 50%; transform: translate(50%, 50%); }
.ech-tour-card > p, .ech-tour-intro > p { color: #5f5a50; line-height: 1.55; }.ech-tour-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }.ech-tour-primary, .ech-tour-secondary { border-radius: 8px; padding: 10px 14px; cursor: pointer; font: inherit; }.ech-tour-primary { border: 1px solid var(--ech-tour-green); background: var(--ech-tour-green); color: var(--ech-tour-ivory); }.ech-tour-secondary { border: 1px solid rgba(23,54,44,.38); background: transparent; color: var(--ech-tour-green); }

@media (max-width: 720px) {
  .ech-guide-surface {
    inset: auto 0 0;
    width: 100%;
    min-height: min(68vh, 620px);
    border-left: 0;
    border-top: 1px solid color-mix(in srgb, var(--ech-tour-bronze) 28%, transparent);
    border-radius: 24px 24px 0 0;
  }
  .ech-tour-card { right: 18px; bottom: 18px; }.ech-tour-intro { right: 50%; bottom: 18px; transform: translateX(50%); }
}

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }