/* 1House preview overlay */
html.oh-open, html.oh-open body { overflow: hidden; }
.oh {
  position: fixed; inset: 0; z-index: 2147483500;
  display: flex; flex-direction: column;
  background: #0d0c0a; color: #f2ede2;
}
.oh[hidden] { display: none; }
.oh__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px 20px;
  flex-wrap: wrap; padding: 12px 16px;
  border-bottom: 2px solid #d4a94a; background: #0d0c0a;
}
.oh__head { min-width: 0; flex: 1 1 320px; }
.oh__title { margin: 0; font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.35rem; font-weight: 600; color: #d4a94a; line-height: 1.2; }
.oh__sub { margin: 2px 0 0; font-size: 0.875rem; color: #c9c1b1; line-height: 1.45; }
.oh__actions { display: flex; gap: 8px; flex: 0 0 auto; }
.oh__join, .oh__close {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 18px; border-radius: 2px;
  font: 600 0.95rem/1 Inter, system-ui, sans-serif; text-decoration: none; cursor: pointer;
}
.oh__join { background: #d4a94a; color: #0d0c0a; border: 1px solid #d4a94a; }
.oh__join:hover { background: #e6bd5c; border-color: #e6bd5c; }
.oh__close { background: transparent; color: #f2ede2; border: 1px solid #6b6558; }
.oh__close:hover { border-color: #f2ede2; }
.oh__join:focus-visible, .oh__close:focus-visible { outline: 2px solid #f2ede2; outline-offset: 2px; }
.oh__stage { position: relative; flex: 1 1 auto; min-height: 0; background: #000; }
.oh__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.oh__loading { position: absolute; inset: auto 16px 50% 16px; margin: 0; text-align: center; color: #a09786; font-size: 0.95rem; }
.oh__loading[hidden] { display: none; }
.oh__fine { margin: 0; padding: 8px 16px; font-size: 0.75rem; line-height: 1.45; color: #a09786; border-top: 1px solid #38332b; }

@media (max-width: 560px) {
  .oh__bar { padding: 10px 12px; }
  .oh__sub { font-size: 0.8rem; }
  .oh__actions { width: 100%; }
  .oh__join { flex: 1 1 auto; }
  .oh__fine { padding: 6px 12px; font-size: 0.7rem; }
}

/* Second button on tool banners */
.tool-banner__actions { display: flex; flex-wrap: wrap; gap: 8px; flex: 0 0 auto; }
.tool-banner__btn--ghost { background: transparent; color: var(--color-text); border: 1px solid var(--color-primary); }
.tool-banner__btn--ghost:hover { background: var(--color-primary-tint); transform: none; box-shadow: none; }
@media (max-width: 560px) {
  .tool-banner__actions { width: 100%; flex-direction: column; }
  .tool-banner__actions .tool-banner__btn { justify-content: center; width: 100%; min-height: 44px; }
}