/* Physical product studies. Controls remain ordinary, accessible HTML. */
[data-scene] { --scene-ink: #273020; --scene-accent: #9e2348; position: relative; }
.scene-viewport { position: relative; width: 100%; min-width: 0; height: clamp(380px, 42vw, 660px); overflow: hidden; isolation: isolate; background: #d7ef55; }
[data-scene="bottle"] .scene-viewport { background: transparent; }
[data-scene="texture"] .scene-viewport { height: clamp(360px, 35vw, 560px); background: #e9dff1; }
[data-scene="ritual"] .scene-viewport { height: clamp(360px, 35vw, 560px); background: #f3e4d1; }
.scene-canvas, .scene-fallback { position: absolute; inset: 0; width: 100%; height: 100%; }
.scene-fallback { display: block; object-fit: cover; opacity: 1; transition: opacity .45s ease; }
.scene-canvas { z-index: 1; opacity: 0; transition: opacity .5s ease; }
.scene-canvas canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; }
[data-scene][data-scene-ready="true"] .scene-canvas { opacity: 1; }
[data-scene][data-scene-ready="true"] .scene-fallback { opacity: 0; pointer-events: none; }
[data-scene="bottle"] .scene-canvas canvas { cursor: grab; }
[data-scene="bottle"] .scene-canvas canvas:active { cursor: grabbing; }
.scene-controls { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; position: relative; z-index: 3; }
.scene-controls button, .scene-choice { min-height: 46px; padding: 10px 18px; border: 1px solid currentColor; border-radius: 0; color: var(--scene-ink); background: transparent; font: inherit; font-size: max(16px, 1rem); font-weight: 600; line-height: 1.3; cursor: pointer; transition: background .2s ease, color .2s ease, transform .2s ease; }
.scene-controls button:hover, .scene-choice:hover { transform: translateY(-2px); }
.scene-controls button[aria-pressed="true"], .scene-choice[aria-pressed="true"] { background: var(--scene-ink); color: #fff; border-color: var(--scene-ink); }
[data-bottle-open] { background: var(--scene-accent); color: #fff; border-color: var(--scene-accent); }
[data-scene] button:focus-visible, [data-scene] input:focus-visible { outline: 3px solid #9e2348; outline-offset: 5px; }
.scene-range { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; min-width: min(220px, 100%); font-size: max(16px, 1rem); }
[data-scene] input[type="range"] { accent-color: #9e2348; height: 34px; min-width: 0; max-width: 100%; cursor: pointer; }
[data-scene-status] { font-size: 13px; line-height: 1.5; letter-spacing: .01em; }
[data-scene][data-scene-ready="false"] [data-scene-status] { font-size: 14px; }
@media(max-width: 700px) {
  .scene-viewport { height: 440px; }
  [data-scene="texture"] .scene-viewport { height: 355px; }
  [data-scene="ritual"] .scene-viewport { height: 370px; }
  .scene-controls { gap: 9px; }
  .scene-controls button, .scene-choice { padding: 10px 13px; font-size: 16px; }
}
@media(prefers-reduced-motion: reduce) {
  .scene-canvas, .scene-fallback, .scene-controls button, .scene-choice { transition: none; }
  .scene-controls button:hover, .scene-choice:hover { transform: none; }
}