.studio-experience { background: #0d0e0c; overflow: hidden; }
.studio-experience .section-header { max-width: 760px; margin-bottom: 3rem; }
.studio-experience .section-title em { color: #cfb695; font-weight: 400; }
.studio-viewer { position: relative; overflow: hidden; isolation: isolate; background: radial-gradient(ellipse at 48% 45%, #e7e2d7, #c9c6bb); color: #393b34; border: 1px solid #aaa48f; border-radius: 3px; }
.studio-canvas-wrap { width: 100%; height: clamp(350px, 45vw, 590px); position: relative; }
.studio-canvas-wrap canvas { display: block; width: 100%; height: 100%; outline: none; pointer-events: none; }
.studio-viewer.is-interactive canvas { pointer-events: auto; cursor: grab; }
.studio-viewer.is-interactive canvas:active { cursor: grabbing; }
.studio-canvas-wrap canvas:focus-visible { outline: 2px solid #5f5140; outline-offset: -8px; }
.studio-fallback { position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: center 53%; filter: brightness(.8); }
.studio-viewer.is-ready .studio-fallback, .studio-viewer.is-ready .studio-load-message { display: none; }
.studio-load-message { position: absolute; z-index: 1; inset: auto 1.5rem 5rem; color: white; text-shadow: 0 1px 6px #000; font-size: .8rem; }
.studio-viewer-topline, .studio-viewer-bottomline { position: absolute; z-index: 2; left: 1.6rem; right: 1.6rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; pointer-events: none; }
.studio-viewer-topline { top: 1.45rem; font-size: .58rem; letter-spacing: .22em; font-weight: 600; }
.studio-viewer-bottomline { bottom: 1.2rem; }
.studio-view-name { font-family: var(--font-serif, Georgia, serif); font-size: 1.25rem; font-style: italic; }
.studio-interact { pointer-events: auto; display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 44px; padding: .6rem 1rem; color: #ede9e0; background: #353b33; border: 1px solid #353b33; border-radius: 2px; font-family: inherit; font-size: .7rem; cursor: pointer; }
.studio-interact:hover { background: #4c5548; }
.studio-interact[aria-pressed="true"] { background: #f3f0e7; color: #343c32; }
.studio-zoom-controls { position: absolute; z-index: 2; top: 4.7rem; right: 1.3rem; display: grid; gap: 5px; }
.studio-zoom-controls button { display: flex; justify-content: center; align-items: center; width: 44px; height: 44px; border: 1px solid #7e7d6e66; border-radius: 2px; background: #f2efe4d9; color: #3a4035; font: 1.5rem Georgia, serif; cursor: pointer; transition: background .2s; }
.studio-zoom-controls button:hover { background: #fffdf5; }
.studio-room-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 1rem; border-bottom: 1px solid #c5a88030; }
.studio-room-nav button { position: relative; display: flex; align-items: center; justify-content: center; gap: .85rem; min-height: 67px; padding: 1rem .55rem; border: 0; background: transparent; color: #aca99e; font: 400 .74rem var(--font-sans, sans-serif); cursor: pointer; transition: color .2s, background .2s; }
.studio-room-nav button span { font-size: .55rem; color: #c5a880aa; }
.studio-room-nav button::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: -1px; height: 2px; background: #cfb695; transform: scaleX(0); transition: transform .3s ease; }
.studio-room-nav button.is-active { color: #ebdcc6; background: #c5a88008; }
.studio-room-nav button.is-active::after { transform: scaleX(1); }
.studio-room-nav button:hover { color: #fff4e4; }
.studio-experience button:focus-visible { outline: 2px solid #c5a880; outline-offset: 4px; }
.studio-caption-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem; margin-top: 1.75rem; }
.studio-caption { max-width: 680px; }
.studio-caption > p:first-child { font-family: var(--font-serif, Georgia, serif); font-size: 1.2rem; line-height: 1.6; color: #cbc8be; }
.studio-model-note { font-size: .65rem; color: #8e8d83; margin-top: .6rem; line-height: 1.8; }
.studio-interaction-help { margin-top: .6rem; font-size: .66rem; color: #c5a880; line-height: 1.7; }
.studio-video-trigger { display: inline-flex; flex-shrink: 0; align-items: center; gap: .75rem; min-height: 44px; padding: .2rem 0; border: 0; background: none; color: #d4bf9e; font: .72rem var(--font-sans, sans-serif); cursor: pointer; border-bottom: 1px solid #c5a88055; }
.studio-video-trigger > span { font-size: 1.4rem; }
.studio-video-trigger:hover { color: #fff0d6; border-color: currentColor; }
.studio-video-dialog { position: fixed; inset: 0; margin: auto; width: min(500px, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); padding: 1rem; overflow: auto; background: #171914; color: #e7e1d7; border: 1px solid #c5a88060; border-radius: 3px; }
.studio-video-dialog::backdrop { background: #040705dc; backdrop-filter: blur(8px); }
.studio-video-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; }
.studio-video-header h3 { font-size: 1.6rem; }
.studio-video-header button { width: 44px; height: 44px; border: 1px solid #c5a88055; border-radius: 50%; background: transparent; color: #eadfcf; font-size: 1.5rem; cursor: pointer; }
.studio-video-dialog video { display: block; width: 100%; max-height: calc(100dvh - 180px); background: #000; }
.studio-video-dialog > p { font-size: .65rem; color: #a7a597; margin-top: .8rem; }
.studio-experience [hidden] { display: none !important; }
@media (max-width: 700px) {
  .studio-viewer-topline { left: 1rem; right: 1rem; font-size: .49rem; letter-spacing: .15em; }
  .studio-viewer-bottomline { left: 1rem; right: 1rem; gap: .5rem; }
  .studio-view-name { max-width: 42%; font-size: 1rem; line-height: 1.2; }
  .studio-interact { padding: .55rem .7rem; font-size: .62rem; }
  .studio-zoom-controls { right: .75rem; top: 3.4rem; }
  .studio-room-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .1rem .5rem; }
  .studio-room-nav button { min-height: 54px; justify-content: flex-start; font-size: .68rem; }
  .studio-room-nav button::after { left: 0; right: 0; }
  .studio-caption-row { flex-direction: column; gap: 1rem; }
  .studio-caption > p:first-child { font-size: 1.1rem; }
  .studio-video-trigger { align-self: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .studio-experience *, .studio-experience *::after { transition: none !important; }
}