/* tech.divebanda.ru/rebrizery/rebel/ — узлы Rebel по отдельности. Шапка, подвал, шрифты и цвета — ../assets/site.css;
   здесь только сам просмотрщик, в том же виде, что атлас (../atlas/style.css). */
.rd { --rd-scene: #071d3f; --rd-panel: #0c294d; --rd-line: #315781; --rd-muted: #bdd8ef; --rd-accent: #8ccbff;
  border: 1px solid #315e8d; border-radius: 12px; overflow: hidden; background: var(--rd-scene); color: #f2f8ff; }
.rd button { font: inherit; color: #f2f8ff; background: #123763; border: 1px solid #527eac; border-radius: 7px; padding: 10px 14px; min-height: 44px; line-height: 1.3; cursor: pointer; }
.rd button:hover { background: #1d4e81; }
.rd button[aria-pressed=true] { background: #1a5588; border-color: var(--rd-accent); }

/* Выбор узла — как переключатель аппаратов в атласе */
.rd-parts { display: flex; flex-wrap: wrap; gap: 4px; padding: 14px 16px; background: #0a2850; border-bottom: 1px solid var(--rd-line); }
.rd-parts button { font-size: 16px; border-color: transparent; background: transparent; }
.rd-parts button:hover { background: #123763; }
.rd-parts button[aria-pressed=true] { background: var(--rd-accent); border-color: var(--rd-accent); color: var(--rd-scene); font-weight: 600; }

.rd-work { display: grid; grid-template-columns: minmax(0, 1fr) 360px; }
.rd-model { min-width: 0; }
.rd-stage { position: relative; height: 560px; background: radial-gradient(ellipse at 52% 42%, #1d4a7d 0%, #0b2a52 48%, var(--rd-scene) 88%); touch-action: pan-y; }
.rd-stage canvas { display: block; width: 100%; height: 100%; touch-action: pan-y !important; }
.rd-stage.rotating, .rd-stage.rotating canvas { touch-action: none !important; }
#loading, #fallback { position: absolute; inset: 44% 24px auto; text-align: center; color: var(--rd-muted); font-size: 17px; pointer-events: none; }
.rd-hint { position: absolute; left: 20px; bottom: 14px; font-size: 14px; color: var(--rd-muted); pointer-events: none; }
.rd-pair { position: absolute; top: 14px; right: 14px; display: flex; gap: 4px; padding: 4px; background: #061a37cc; border: 1px solid #37658e; border-radius: 8px; }
.rd .rd-pair button { min-height: 38px; padding: 6px 14px; font-size: 15px; border-color: transparent; background: transparent; }
.rd .rd-pair button[aria-pressed=true] { background: var(--rd-accent); color: var(--rd-scene); font-weight: 600; }
#mobile-rotate { display: none; position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); font-size: 14px; white-space: nowrap; background: #174775; }

.rd-toolbar { display: flex; justify-content: space-between; gap: 10px; padding: 14px 16px; background: #0a2448; border-top: 1px solid var(--rd-line); }
.rd-views { display: flex; flex-wrap: wrap; gap: 6px; }
.rd-toolbar button { font-size: 15px; padding: 8px 12px; }
.rd-handle { padding: 14px 18px 18px; background: #0a2448; border-top: 1px solid var(--rd-line); }
.rd-handle label { display: flex; justify-content: space-between; gap: 16px; font-size: 16px; }
.rd-handle output { color: var(--rd-muted); }
.rd-handle input { width: 100%; height: 32px; margin-top: 6px; accent-color: var(--red); cursor: pointer; }
.rd-handle-ends { display: flex; justify-content: space-between; color: var(--rd-muted); font-size: 14px; }

.rd-info { padding: 26px 24px; background: var(--rd-panel); border-left: 1px solid var(--rd-line); }
.rd-kind { font: 600 15px/1.3 var(--body); color: var(--rd-accent); margin-bottom: 8px; }
.rd-info h2 { font: 700 23px/1.25 var(--head); color: #fff; margin-bottom: 14px; }
#part-text p { font-size: 17px; line-height: 1.6; color: rgba(255, 255, 255, .88); }
#part-text p + p { margin-top: 12px; }
.rd-atlas-link { display: inline-block; margin-top: 20px; font-size: 16px; font-weight: 600; }

@media (min-width: 1500px) { .rd-stage { height: 620px; } }
@media (max-width: 1100px) {
  .rd-work { grid-template-columns: 1fr; }
  .rd-info { border-left: 0; border-top: 1px solid var(--rd-line); }
}
@media (max-width: 900px) {
  .rd-parts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 10px; }
  .rd-parts button { font-size: 15px; padding: 9px 8px; }
  .rd-stage { height: 420px; }
  .rd-hint { display: none; }
  #mobile-rotate { display: block; }
  .rd-toolbar { flex-direction: column; padding: 10px; }
  .rd-toolbar button { font-size: 14px; padding: 8px 10px; }
  #auto-rotate { align-self: flex-start; }
  .rd-info { padding: 22px 18px; }
  .rd-info h2 { font-size: 20px; }
  #part-text p { font-size: 16px; }
}
@media (max-width: 420px) { .rd-stage { height: 360px; } }
@media (prefers-reduced-motion: reduce) { .rd * { transition: none !important; } }