.cozy-3d { --cozy-accent: #165f50; width: 100%; min-width: 0; margin: 24px 0; color: #202c29; }
.cozy-3d *, .cozy-3d *::before, .cozy-3d *::after { box-sizing: border-box; }
.cozy-3d h3 { margin: 0 0 16px; font-size: clamp(20px, 3vw, 28px); line-height: 1.3; }
.cozy-3d__states { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.cozy-3d button { min-height: 44px; padding: 10px 16px; border: 1px solid #a4b6b0; border-radius: 6px; background: #fff; color: #233a32; font: inherit; line-height: 1.4; cursor: pointer; }
.cozy-3d button[aria-pressed="true"] { background: var(--cozy-accent); color: #fff; border-color: var(--cozy-accent); }
.cozy-3d button:focus-visible { outline: 3px solid #307eff; outline-offset: 3px; }
.cozy-3d__stage { position: relative; width: 100%; height: 480px; height: clamp(320px, 48vw, 520px); overflow: hidden; border: 1px solid #dce5e0; border-radius: 10px; background: #f4f7f5; }
.cozy-3d__poster, .cozy-3d__mount { position: absolute; inset: 0; width: 100%; height: 100%; }
.cozy-3d__poster { object-fit: contain; padding: 16px; }
.cozy-3d__mount model-viewer { display: block; width: 100%; height: 100%; background: transparent; --progress-bar-color: var(--cozy-accent); }
.cozy-3d__mount { visibility: hidden; }
.cozy-3d.is-ready .cozy-3d__mount { visibility: visible; }
.cozy-3d.is-ready .cozy-3d__poster { visibility: hidden; }
.cozy-3d__feedback { min-height: 40px; padding-top: 10px; }
.cozy-3d .cozy-3d__status, .cozy-3d .cozy-3d__help { margin: 0 0 8px; font-size: 14px; line-height: 1.5; }
.cozy-3d .cozy-3d__help { color: #54665e; }
.cozy-3d.is-error .cozy-3d__status { color: #9b2929; }
.cozy-3d [hidden] { display: none !important; }
@media (max-width: 600px) { .cozy-3d__stage { height: 340px; } .cozy-3d button { font-size: 15px; } }