/* 3D view of the house: a stage with the canvas, a toolbar over its bottom edge and a hint that fades on first drag. */
.p3d-viewer { position: relative; }
.p3d-stage { position: relative; width: 100%; aspect-ratio: 16 / 10; min-height: 280px; overflow: hidden; border-radius: 12px; background: #dce7ee; touch-action: none; }
.p3d-stage canvas { display: block; width: 100% !important; height: 100% !important; outline: none; cursor: grab; }
.p3d-stage canvas:active { cursor: grabbing; }
.p3d-viewer:fullscreen .p3d-stage { aspect-ratio: auto; height: 100vh; border-radius: 0; }
.p3d-toolbar { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; pointer-events: none; }
.p3d-btn { pointer-events: auto; font: 500 13px/1 system-ui, -apple-system, "Segoe UI", sans-serif; padding: 8px 12px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .88); color: #1d2328; box-shadow: 0 1px 4px rgba(0, 0, 0, .15); cursor: pointer; backdrop-filter: blur(6px); }
.p3d-btn:hover { background: #fff; }
.p3d-btn:focus-visible { outline: 2px solid #1d2328; outline-offset: 2px; }
.p3d-btn.is-on { background: #1d2328; color: #fff; }
.p3d-hint { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); padding: 6px 12px; border-radius: 999px; background: rgba(29, 35, 40, .7); color: #fff; font: 13px/1.3 system-ui, sans-serif; white-space: nowrap; transition: opacity .4s; pointer-events: none; }
.p3d-hint.is-hidden { opacity: 0; }
.p3d-status { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px; color: #3c464e; font: 14px/1.4 system-ui, sans-serif; text-align: center; padding: 16px; }
.p3d-status::before { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: p3d-spin .8s linear infinite; }
.p3d-status.is-error::before, .p3d-status.is-idle::before { display: none; }
.p3d-error { margin: 0; padding: 24px; color: #7a2e22; font: 14px/1.4 system-ui, sans-serif; }
@keyframes p3d-spin { to { transform: rotate(360deg); } }
@media (max-width: 600px) {
  .p3d-stage { aspect-ratio: 4 / 5; }
  .p3d-btn { padding: 7px 10px; font-size: 12px; }
  .p3d-hint { white-space: normal; width: max-content; max-width: calc(100% - 24px); text-align: center; }
  .p3d-toolbar .p3d-full, .p3d-toolbar .p3d-view-back, .p3d-toolbar .p3d-view-left { display: none; }
}
@media (prefers-reduced-motion: reduce) { .p3d-status::before { animation: none; } }
/* Inside the builder's result, between the images and the specification: the same 18px gap as between the cards above it and above the specification. */
.p3d-card { margin: 18px 0 0; padding: 16px; }
.p3d-card .pab-plan-head { margin-bottom: 12px; }
.p3d-card .p3d-stage { max-height: min(640px, 75vh); }
.p3d-card .p3d-note { margin: 10px 2px 0; font-size: 13px; line-height: 1.45; opacity: .7; }
.p3d-card[hidden] { display: none !important; }