/* Viewport dimensions are owned by the page layout. */
[data-jewel-scene] .jewel-viewport{position:relative;isolation:isolate;overflow:hidden;min-width:0}
.jewel-canvas,.jewel-fallback{position:absolute;inset:0;width:100%;height:100%}
.jewel-fallback{object-fit:contain;transition:opacity .3s ease}
.jewel-canvas{z-index:1;opacity:0;transition:opacity .3s ease}
.jewel-canvas canvas{width:100%;height:100%;display:block;touch-action:pan-y}
[data-jewel-scene][data-scene-ready="true"] .jewel-canvas{opacity:1}
[data-jewel-scene][data-scene-ready="true"] .jewel-fallback{opacity:0;pointer-events:none}
[data-jewel-scene] :is([data-ring-metal],[data-gem-cut],[data-chain-length],[data-ring-reset]){min-height:44px;font-size:16px;cursor:pointer}
[data-jewel-scene] :is([data-ring-metal],[data-gem-cut],[data-chain-length])[aria-pressed="true"]{border-color:currentColor;box-shadow:inset 0 -2px 0 currentColor}
[data-jewel-scene] input[type="range"]{min-width:0;min-height:28px;width:100%;accent-color:#75172e;cursor:pointer}
[data-jewel-scene="gem"] input[type="range"]{accent-color:#ecd3a3}
[data-jewel-scene] :is(button,input):focus-visible{outline:3px solid #75172e;outline-offset:4px}
[data-jewel-scene="gem"] :is(button,input):focus-visible{outline-color:#ecd3a3}
[data-jewel-scene] [data-scene-status]{font-size:13px;line-height:1.5}
@media(max-width:767px){[data-jewel-scene] :is([data-ring-metal],[data-gem-cut],[data-chain-length],[data-ring-reset]){font-size:15px}}
@media(prefers-reduced-motion:reduce){.jewel-canvas,.jewel-fallback{transition:none}}