/* ========================================================================== 
   1. Начало блока экспериментального 3D-интерфейса Studio
   Только .km3d.km3d-studio. Рабочий UI и custom.css сайта не переопределяются.
   ========================================================================== */
.km3d.km3d-studio {
  --studio-scene: #11171e;
  --studio-panel: #181e26;
  --studio-text: #f0f2f5;
  --studio-muted: #a0a9b4;
  --studio-stroke: #ffffff1a;
  container-type: inline-size;
  /* Внешняя рамка и скругление берутся из классов Аспро bordered / rounded3. */
  line-height: 1.5;
}
/* Заголовок: семейство шрифта и фирменный акцент наследуются от темы. */
.km3d.km3d-studio .km3d-header { padding: 38px 40px 28px; }
.km3d.km3d-studio .km3d-eyebrow { font-size: 11px; letter-spacing: .23em; font-weight: 600; margin-bottom: 12px; color: var(--km3d-red); }
.km3d.km3d-studio .km3d-title { font-size: clamp(28px, 3.2cqw, 50px); font-weight: 750; line-height: 1.15; letter-spacing: -.045em; }
.km3d.km3d-studio .km3d-title span { color: var(--km3d-red); }
.km3d.km3d-studio .km3d-subtitle { font-size: clamp(14px, 1.3vw, 19px); color: #737e8b; line-height: 1.55; margin-top: 12px; }
/* Тёмная сцена отделена от светлой оболочки, освещение GLB остаётся мягким. */
.km3d.km3d-studio .km3d-stage {
  margin: 0 24px;
  border: 1px solid #ffffff0d;
  /* Скругление сцены задаёт тот же класс Аспро rounded3, что и у оболочки. */
  height: clamp(470px, 47cqw, 780px);
  background: radial-gradient(ellipse at 50% 45%, #222b36 0%, #171e27 48%, #0e141b 100%);
}
/* Слева место для меню, справа модель не обрезаем: описание поверх сцены. */
.km3d.km3d-studio .km3d-model-slot { inset: 0 0 0 3%; width: auto; }
/* Метки не тускнеют при повороте: красный диск остаётся в цвет выноски.
   Прозрачность светлой рамки и наружного ореола задана отдельно ниже. */
.km3d.km3d-studio model-viewer { --min-hotspot-opacity: 1; --max-hotspot-opacity: 1; }
/* Карточка детали поверх сцены: её открытие не сужает область модели. */
.km3d.km3d-studio .km3d-cover { color: var(--studio-text); background: var(--studio-scene); }
.km3d.km3d-studio .km3d-cover .darken { color: var(--studio-text); }
.km3d.km3d-studio .km3d-cover .muted777 { color: var(--studio-muted); }
.km3d.km3d-studio .km3d-progress { z-index: 5; }
/* Общие элементы управления Studio, без воздействия на нативные кнопки вне блока. */
.km3d.km3d-studio .km3d-btn {
  display: inline-flex; justify-content: center; align-items: center; gap: 10px;
  min-height: 44px; border: 1px solid transparent; border-radius: 10px;
  background: transparent; color: inherit; box-shadow: none; padding: 10px 14px;
  font: inherit; font-size: 15px; line-height: 1.35; font-weight: 600;
  text-transform: none; letter-spacing: 0; cursor: pointer;
  transition: background-color .16s, border-color .16s;
}
.km3d.km3d-studio .km3d-btn:hover { background: #15202e0b; }
.km3d.km3d-studio button:focus-visible { outline: 3px solid var(--km3d-red); outline-offset: 3px; }
.km3d.km3d-studio button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.km3d.km3d-studio .km3d-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.km3d.km3d-studio .km3d-expand { position: absolute; top: 22px; right: 22px; z-index: 4; width: 48px; height: 48px; padding: 12px; color: var(--studio-text); border-color: var(--studio-stroke); border-radius: 14px; background: #ffffff04; }
.km3d.km3d-studio .km3d-expand:hover { background: #ffffff12; }
.km3d.km3d-studio .km3d-cover .km3d-primary { color: #fff; background: var(--km3d-red); }
/* Вертикальная панель ракурсов. Выбор отмечен и цветом, и полосой слева. */
.km3d.km3d-studio .km3d-view-panel { position: absolute; z-index: 3; left: 22px; top: 22px; width: 214px; padding: 18px 12px 12px; border: 1px solid var(--studio-stroke); border-radius: 18px; background: #161c24e8; color: var(--studio-text); backdrop-filter: blur(16px); }
.km3d.km3d-studio .km3d-panel-eyebrow { margin: 0 12px 12px; color: var(--studio-muted); font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
.km3d.km3d-studio .km3d-views { display: grid; gap: 6px; margin: 0; }
.km3d.km3d-studio .km3d-views .km3d-btn { position: relative; justify-content: flex-start; width: 100%; min-height: 50px; padding: 12px 10px; color: var(--studio-text); font-size: 14px; border: 3px solid transparent; border-left-width: 2px; border-radius: 0 3px 3px 0; text-align: left; }
.km3d.km3d-studio .km3d-views .km3d-btn:hover { background: #ffffff0a; }
.km3d.km3d-studio .km3d-views .km3d-btn[aria-pressed="true"] { background: color-mix(in srgb, var(--km3d-red) 23%, transparent); }
/* Отдельный прямоугольник не образует диагональные стыки с прозрачными бордерами. */
.km3d.km3d-studio .km3d-views .km3d-btn[aria-pressed="true"]::before { content: ''; position: absolute; left: -2px; top: -3px; bottom: -3px; width: 2px; border-radius: 0; background: var(--km3d-red); pointer-events: none; }
.km3d.km3d-studio .km3d-view-index { font: 11px/1.4 'Consolas', monospace; font-weight: 400; color: var(--studio-muted); }
.km3d.km3d-studio [aria-pressed="true"] .km3d-view-index { color: #fff; }
/* Нижняя панель: одно управление вместо разрозненных рядов кнопок. */
.km3d.km3d-studio .km3d-controls { display: flex; justify-content: center; padding: 24px 24px 28px; }
.km3d.km3d-studio .km3d-dock { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 7px 12px; border: 1px solid #e1e4e8; border-radius: 48px; background: #f6f7f9; color: #19212c; }
.km3d.km3d-studio .km3d-zoom { position: static; display: flex; align-items: center; gap: 2px; padding: 0 10px; border-inline: 1px solid #dde1e6; }
.km3d.km3d-studio .km3d-zoom-value { min-width: 52px; text-align: center; font: 12px/1.5 'Consolas', monospace; color: #6d7886; }
.km3d.km3d-studio .km3d-zoom .km3d-btn { font-size: 23px; font-weight: 400; min-width: 36px; padding: 6px; }
.km3d.km3d-studio .km3d-rotate[aria-pressed="true"] { background: var(--km3d-red); color: #fff; }
.km3d.km3d-studio .km3d-rotate { min-width: 140px; }
.km3d.km3d-studio .km3d-label-toggle { padding-right: 8px; }
.km3d.km3d-studio .km3d-switch { display: inline-flex; align-items: center; width: 42px; height: 24px; padding: 3px; background: #c1c8d0; border-radius: 20px; }
.km3d.km3d-studio .km3d-switch::after { content: ''; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px #0002; transition: transform .16s; }
.km3d.km3d-studio [aria-pressed="true"] .km3d-switch { background: var(--km3d-red); }
.km3d.km3d-studio [aria-pressed="true"] .km3d-switch::after { transform: translateX(18px); }
/* Подписи закреплены за настоящими точками GLB, а не за фиксированными координатами картинки. */
.km3d.km3d-studio .km3d-hotspot { width: 34px; height: 34px; padding: 0; font-size: 13px; font-weight: 600; border: 2px solid #ffffffbf; box-shadow: 0 0 0 4px color-mix(in srgb, var(--km3d-red) 32%, transparent); }
.km3d.km3d-studio .km3d-hotspot-name { position: absolute; left: calc(100% + 7px); top: 50%; transform: translateY(-50%); white-space: nowrap; padding: 4px 10px; border-radius: 20px; background: #f7f8fbee; color: #19212c; font-size: 12px; line-height: 1.2; font-weight: 600; box-shadow: 0 2px 8px #0002; pointer-events: none; }
.km3d.km3d-studio .km3d-hotspot.is-selected { box-shadow: 0 0 0 6px color-mix(in srgb, var(--km3d-red) 40%, transparent); }
.km3d.km3d-studio .km3d-label-left .km3d-hotspot-name { left: auto; right: calc(100% + 7px); }
/* Карточка детали открывается по точке. Размеров из некалиброванного GLB здесь нет. */
.km3d.km3d-studio .km3d-detail { position: absolute; z-index: 3; right: 22px; bottom: 28px; width: 312px; margin: 0; padding: 18px; border: 1px solid var(--studio-stroke); border-radius: 18px; background: #1c242fed; color: var(--studio-text); backdrop-filter: blur(18px); }
.km3d.km3d-studio .km3d-detail-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.km3d.km3d-studio .km3d-detail-index { color: #fff; font: 11px/1.5 'Consolas', monospace; letter-spacing: .08em; }
.km3d.km3d-studio .km3d-detail strong { font-size: 24px; font-weight: 650; line-height: 1.2; color: var(--studio-text); }
.km3d.km3d-studio .km3d-detail p { font-size: 13px; line-height: 1.7; color: #bdc5d0; margin: 14px 0 20px; }
.km3d.km3d-studio .km3d-card-close, .km3d.km3d-studio .km3d-detail-action { color: var(--studio-text); background: #ffffff06; border: 1px solid var(--studio-stroke); border-radius: 10px; padding: 10px; cursor: pointer; font: inherit; display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 44px; }
.km3d.km3d-studio .km3d-card-close { width: 44px; min-height: 44px; padding: 10px; }
.km3d.km3d-studio .km3d-detail-action { width: 100%; font-size: 12px; }
.km3d.km3d-studio .km3d-detail-action:hover, .km3d.km3d-studio .km3d-card-close:hover { background: #ffffff16; }
/* Общая плашка профиля и крепления: фото 3:2, характеристики и описание с иконками. */
.km3d.km3d-studio .km3d-detail--profile { max-height: calc(100% - 90px); overflow-y: auto; }
.km3d.km3d-studio .km3d-detail--profile .km3d-detail-index { display: flex; align-items: center; gap: 8px; font-family: inherit; font-size: 9px; font-weight: 600; line-height: 1.4; letter-spacing: .07em; text-transform: uppercase; color: var(--studio-muted); }
.km3d.km3d-studio .km3d-detail-number { display: grid; place-items: center; flex: 0 0 26px; height: 26px; border-radius: 50%; background: var(--km3d-red); color: #fff; font-size: 14px; font-weight: 700; }
.km3d.km3d-studio .km3d-detail-photo { position: relative; display: grid; place-items: center; aspect-ratio: 3 / 2; margin-top: 18px; overflow: hidden; border: 1px solid var(--studio-stroke); border-radius: 12px; background: #ffffff06; color: var(--studio-muted); font-size: 11px; }
.km3d.km3d-studio .km3d-detail-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.km3d.km3d-studio .km3d-detail-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0 0; padding-bottom: 16px; border-bottom: 1px solid var(--studio-stroke); }
.km3d.km3d-studio .km3d-detail-specs > div { display: flex; flex-direction: column; gap: 6px; }
.km3d.km3d-studio .km3d-detail-specs > div + div { border-left: 1px solid var(--studio-stroke); padding-left: 12px; }
.km3d.km3d-studio .km3d-detail-specs dt { font-size: 11px; font-weight: 400; line-height: 1.4; color: var(--studio-muted); }
.km3d.km3d-studio .km3d-detail-specs dd { order: -1; margin: 0; font-size: 14px; line-height: 1.1; }
.km3d.km3d-studio .km3d-detail-specs b { font-size: 30px; font-weight: 700; }
.km3d.km3d-studio .km3d-detail-specs dd span { font-size: 12px; }
.km3d.km3d-studio .km3d-detail-finish { display: flex; align-items: center; gap: 7px; margin-top: 9px; color: var(--studio-muted); font-size: 11px; }
.km3d.km3d-studio .km3d-detail-finish > span { width: 10px; height: 10px; border-radius: 50%; background: #f0f2f5; flex-shrink: 0; }
.km3d.km3d-studio .km3d-detail-facts { display: grid; gap: 16px; margin: 18px 0 20px; }
.km3d.km3d-studio .km3d-detail-fact { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; }
.km3d.km3d-studio .km3d-detail-fact-icon { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--studio-stroke); border-radius: 9px; background: #ffffff06; color: var(--studio-muted); }
.km3d.km3d-studio .km3d-detail-facts svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.km3d.km3d-studio .km3d-detail-fact h3 { margin: 0 0 5px; font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--studio-text); }
.km3d.km3d-studio .km3d-detail-facts p { margin: 0; font-size: 12px; line-height: 1.55; color: #bdc5d0; }
.km3d.km3d-studio .km3d-detail-reminder { display: block; margin-top: 5px; color: var(--studio-text); }
.km3d.km3d-studio .km3d-detail-note { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; padding-top: 16px; border-top: 1px solid var(--studio-stroke); }
.km3d.km3d-studio .km3d-detail-note b { display: block; margin-bottom: 5px; font-size: 12px; font-weight: 600; line-height: 1.4; }
.km3d.km3d-studio .km3d-detail-guide { padding-top: 14px; border-top: 1px solid var(--studio-stroke); font-size: 12px; line-height: 1.55; }
.km3d.km3d-studio .km3d-detail-guide summary { cursor: pointer; font-weight: 600; }
.km3d.km3d-studio .km3d-detail-guide ol { padding-left: 18px; color: #bdc5d0; }
.km3d.km3d-studio .km3d-detail-guide li { margin-bottom: 9px; }
.km3d.km3d-studio .km3d-detail-guide summary:focus-visible { outline: 2px solid var(--km3d-red); outline-offset: 3px; }
.km3d.km3d-studio.km3d-compact .km3d-detail--profile { max-height: none; overflow: visible; }
.km3d.km3d-studio .km3d-connector { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; overflow: hidden; color: var(--km3d-red); }
.km3d.km3d-studio .km3d-connector path { stroke: currentColor; stroke-width: 1.25; }
.km3d.km3d-studio .km3d-connector circle { fill: currentColor; }
.km3d.km3d-studio .km3d-footer { border-top: 1px solid var(--km3d-line); margin: 0; padding: 18px 40px; font-size: 11px; color: #788390; line-height: 1.7; }
.km3d.km3d-studio .km3d-status { text-align: center; font-size: 12px; }
/* Адаптация по ширине самого блока, в том числе в узкой колонке карточки Аспро. */
.km3d.km3d-studio.km3d-compact .km3d-model-slot { inset: 0; }
.km3d.km3d-studio.km3d-compact .km3d-view-panel { position: static; width: auto; margin: 14px 24px 0; background: transparent; color: var(--km3d-ink); border: 0; padding: 0; backdrop-filter: none; }
.km3d.km3d-studio.km3d-compact .km3d-panel-eyebrow { display: none; }
.km3d.km3d-studio.km3d-compact .km3d-views { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.km3d.km3d-studio.km3d-compact .km3d-views .km3d-btn { color: var(--km3d-ink); background: #f4f5f7; font-size: 12px; padding: 10px; }
.km3d.km3d-studio.km3d-compact .km3d-views .km3d-btn[aria-pressed="true"] { background: color-mix(in srgb, var(--km3d-red) 7%, white); }
.km3d.km3d-studio.km3d-compact [aria-pressed="true"] .km3d-view-index { color: var(--km3d-red); }
.km3d.km3d-studio.km3d-compact .km3d-detail { position: static; width: auto; margin: 14px 24px 0; }
.km3d.km3d-studio.km3d-compact .km3d-connector { display: none; }
.km3d.km3d-studio.km3d-compact .km3d-dock { flex-wrap: wrap; gap: 6px; border-radius: 24px; }
/* Большой просмотр сохраняет весь viewport и доступную кнопку закрытия. */
dialog.km3d-dialog--studio { background: #fff; }
dialog.km3d-dialog--studio .km3d.km3d-studio .km3d-header { padding-block: 18px; }
dialog.km3d-dialog--studio .km3d.km3d-studio .km3d-title { font-size: clamp(24px, 2.4vw, 40px); }
dialog.km3d-dialog--studio .km3d.km3d-studio .km3d-stage { flex: 1 0 320px; min-height: 320px; height: auto; }
dialog.km3d-dialog--studio .km3d.km3d-studio .km3d-controls { padding-block: 14px; }
@media (max-width: 600px) {
  .km3d.km3d-studio .km3d-header { padding: 24px 18px 20px; }
  .km3d.km3d-studio .km3d-title { font-size: 29px; }
  .km3d.km3d-studio .km3d-title span { display: block; margin-top: 5px; }
  .km3d.km3d-studio .km3d-stage { margin: 0 10px; height: 370px; }
  .km3d.km3d-studio .km3d-expand { width: 44px; height: 44px; right: 12px; top: 12px; }
  .km3d.km3d-studio.km3d-compact .km3d-view-panel { margin-inline: 10px; }
  .km3d.km3d-studio.km3d-compact .km3d-views { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .km3d.km3d-studio .km3d-controls { padding: 16px 10px; }
  .km3d.km3d-studio .km3d-dock { display: grid; grid-template-columns: 1fr 1fr; width: 100%; padding: 8px; }
  .km3d.km3d-studio .km3d-rotate { min-width: 0; }
  .km3d.km3d-studio .km3d-zoom { padding: 0; border: 0; justify-content: center; gap: 0; }
  .km3d.km3d-studio .km3d-zoom-value { min-width: 46px; }
  .km3d.km3d-studio .km3d-zoom .km3d-btn { min-width: 34px; }
  .km3d.km3d-studio .km3d-btn { font-size: 12px; gap: 8px; padding: 8px; }
  .km3d.km3d-studio .km3d-hotspot-name { font-size: 10px; padding: 4px 6px; }
  .km3d.km3d-studio .km3d-hotspot { width: 30px; height: 30px; font-size: 12px; }
  .km3d.km3d-studio .km3d-footer { padding: 14px 18px; font-size: 10px; }
  .km3d.km3d-studio.km3d-compact .km3d-detail { margin-inline: 10px; }
  dialog.km3d-dialog--studio .km3d-stage { min-height: 320px; }
}
@media (prefers-reduced-motion: reduce) {
  .km3d.km3d-studio *, .km3d.km3d-studio *::after { transition: none !important; }
}
/* ========================================================================== 
   1. Конец блока экспериментального 3D-интерфейса Studio
   ========================================================================== */