/* Self-contained homepage viewer; dark drawing surface, warm house materials. */
.op-home-visual { margin: 0; min-width: 0; width: 100%; overflow: hidden; color: #fff; background: #343338; border: 1px solid #46444a; border-top: 3px solid var(--orange); border-radius: .85rem; box-shadow: 0 24px 50px rgba(52,51,56,.15); }
.home-visual-top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: 1rem 1.2rem .5rem; }
.home-visual-brand { font-family: Georgia, "Times New Roman", serif; font-size: 1.45rem; letter-spacing: -.05em; white-space: nowrap; }
.home-visual-brand span { color: #ffab62; }
.home-visual-top h2 { margin: 0; max-width: 10rem; color: #ede8e3; font-size: .73rem; line-height: 1.4; font-weight: 400; text-align: right; }
.home-viewport { position: relative; width: 100%; height: clamp(290px,25vw,365px); cursor: grab; touch-action: pan-y; background: radial-gradient(ellipse at 50% 60%,#4d4944 0%,#343338 70%); }
.home-viewport:active { cursor: grabbing; }
.home-viewport canvas, .home-poster { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.home-poster { object-fit: contain; }
.op-home-visual[data-state="ready"] .home-poster { display: none; }
.op-home-visual [hidden] { display: none !important; }
.home-view-tools { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .2rem 1.2rem .65rem; font-size: .7rem; color: #dedbd5; }
.op-home-visual button { font: inherit; cursor: pointer; }
.home-view-tools button, .home-build-heading button { border: 0; padding: .35rem 0 .35rem .5rem; background: none; color: #ffab62; min-height: 36px; white-space: nowrap; }
.op-home-visual button:hover { color: #fff; }
.op-home-visual button:disabled { color: #a9a4a0; cursor: default; }
.home-viewport:focus-visible, .op-home-visual button:focus-visible, .op-home-visual input:focus-visible { outline: 2px solid #ffab62; outline-offset: -2px; }
.home-build-controls { padding: .55rem 1.2rem .3rem; background: #2b2a2f; border-top: 1px solid #575159; }
.home-build-heading { display: flex; align-items: center; justify-content: space-between; gap: .75rem; font-size: .75rem; }
.home-build-heading [data-home-status] { color: #f6f0e8; }
#home-progress { display: block; width: 100%; margin: .45rem 0 .25rem; height: 24px; accent-color: #f58220; cursor: pointer; }
#home-progress:disabled { cursor: default; }
.home-stages { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .5rem; }
.home-stages button { display: flex; align-items: center; gap: .35rem; padding: .35rem 0; min-height: 36px; line-height: 1.2; text-align: left; font-size: .75rem; color: #dedbd5; background: none; border: 0; border-bottom: 2px solid transparent; }
.home-stages button span { display: inline; margin: 0; color: #a9a4a0; font-size: .6rem; }
.home-stages button[aria-pressed="true"] { border-bottom-color: #f58220; color: #ffab62; font-weight: 700; }
@media (max-width: 991.98px) { .op-home-visual { max-width: 560px; margin-inline: auto; } .home-viewport { height: clamp(280px,65vw,365px); } }
@media (max-width: 479.98px) { .home-visual-top { padding-inline: 1rem; } .home-visual-brand { font-size: 1.3rem; } .home-visual-top h2 { max-width: 7rem; font-size: .68rem; } .home-view-tools, .home-build-controls { padding-inline: 1rem; } }