.studio3d { min-height: 100%; background: #ece9d8; color: #161616; font-family: var(--tahoma); font-size: 12px; container-type: inline-size; }
.studio3d *, .studio3d *::before, .studio3d *::after { box-sizing: border-box; outline: none; }
.s3d-toolbar { display: flex; align-items: center; gap: 12px; padding: 7px 9px; background: #ece9d8; }
.studio3d .xp-btn { min-width: 0; min-height: 25px; border: 1px solid #003c74; border-radius: 3px; padding: 3px 11px; font-family: var(--tahoma); font-size: 12px; background: linear-gradient(#fff, #f1efe6 52%, #e2dfd2 53%, #f5f3e9); color: #111; white-space: nowrap; }
.studio3d .xp-btn:hover, .studio3d .xp-btn:focus-visible { background: linear-gradient(#fffdf4, #f5e9bf); border-color: #c7811a; color: #111; }
.studio3d .xp-btn:active { background: #dfdaca; border-color: #46607b; color: #111; }
.studio3d .xp-btn:disabled { background: #eeecdf; border-color: #aaa99c; color: #68685f; cursor: default; }
.studio3d .xp-btn.primary { font-weight: bold; border-color: #bb8016; }
.s3d-rotate { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; color: #161616; }
.s3d-rotate input { margin: 0; width: 13px; height: 13px; accent-color: #235dc1; }
.s3d-rotate input:focus-visible { background: #f5e9bf; }
.s3d-model-label { margin-left: auto; color: #55594e; white-space: nowrap; font-size: 11px; }
.s3d-workspace { display: grid; grid-template-columns: minmax(0, 1fr) 222px; gap: 12px; padding: 12px; align-items: start; }
.s3d-preview { min-width: 0; }
.s3d-surface { position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; border: 1px solid #7f9db9; background-position: center; background-size: cover; background-repeat: no-repeat; }
.s3d-canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
.s3d-canvas:focus-visible { border: 1px solid #bd811b; }
.s3d-fallback { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; text-align: center; }
.s3d-fallback[hidden], .s3d-caption[hidden], .s3d-retry[hidden] { display: none; }
.s3d-fallback img { max-height: 54%; max-width: 55%; object-fit: contain; }
.s3d-fallback p { margin: 0; padding: 7px 9px; background: #ffffef; color: #293020; line-height: 1.4; }
.s3d-caption { position: absolute; left: 50%; bottom: 4%; transform: translateX(-50%); max-width: 88%; width: max-content; padding: 2%; color: #172119; background: rgba(255,253,240,.94); font-family: var(--tahoma); font-size: 20px; font-weight: bold; line-height: 1.2; text-align: center; overflow-wrap: anywhere; white-space: pre-line; pointer-events: none; }
.s3d-caption[data-position="top"] { top: 4%; bottom: auto; }
.s3d-help { margin: 7px 1px 0; color: #53574b; font-size: 11px; line-height: 1.45; }
.s3d-properties { display: flex; flex-direction: column; gap: 11px; min-width: 0; }
.s3d-properties fieldset { min-width: 0; margin: 0; padding: 4px 0 10px; border: 0; }
.s3d-properties legend { color: #17478f; padding: 0; margin-bottom: 6px; }
.s3d-properties label { display: flex; flex-direction: column; align-items: stretch; gap: 5px; color: #20251b; }
.s3d-properties label + label { margin-top: 10px; }
.s3d-properties select, .s3d-properties textarea { display: block; width: 100%; min-width: 0; border: 1px solid #7f9db9; border-radius: 0; padding: 4px 5px; background: #fff; color: #161616; font-family: var(--tahoma); font-size: 12px; }
.s3d-properties select { height: 26px; white-space: nowrap; }
.s3d-properties textarea { line-height: 1.45; resize: vertical; min-height: 68px; max-height: 180px; }
.s3d-properties select:focus-visible, .s3d-properties textarea:focus-visible { border-color: #285fb2; background: #fffde8; color: #161616; }
.s3d-save-row { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 10px; }
.s3d-save-note { margin: 9px 0 0; color: #545749; font-size: 11px; line-height: 1.45; }
.s3d-status { padding: 5px 9px; min-height: 27px; background: #e8e5d7; color: #41473a; font-size: 11px; line-height: 1.4; }
.s3d-retry { align-self: flex-start; }
@container (max-width: 650px) {
  .s3d-workspace { grid-template-columns: minmax(0, 1fr); padding: 8px; gap: 10px; }
  .s3d-toolbar { padding: 7px 8px; gap: 8px; }
  .s3d-model-label { display: none; }
  .s3d-properties { gap: 10px; }
  .s3d-properties fieldset { padding: 4px 0 10px; }
}