@charset "UTF-8";
.model-renderer-container {
  position: relative;
  overflow: hidden;
  background-color: #0a0a0a;
}
.model-renderer-container .canvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: high-quality;
  image-rendering: -webkit-optimize-contrast;
  background-color: #0a0a0a;
}

.camera-mode-switch {
  position: absolute;
  bottom: 3rem;
  right: 2.25rem;
  z-index: 100;
}
.camera-mode-switch .mode-icon-btn {
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666666;
  background-color: rgba(248, 249, 250, 0.7);
  border: 1px solid rgba(51, 51, 51, 0.3);
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  font-size: 0.875rem;
}
.camera-mode-switch .mode-icon-btn:hover {
  background-color: rgba(255, 255, 255, 0.9);
  color: #333333;
}
.camera-mode-switch .mode-icon-btn:active {
  background-color: rgba(255, 255, 255, 0.9);
}

.quality-capsule-switch {
  position: absolute;
  bottom: .7rem;
  right: 3.05rem;
  z-index: 100;
  display: flex;
  height: 1.58rem;
  align-items: center;
  background-color: rgba(248, 249, 250, 0.7);
  border-radius: 0.5rem;
  padding: 0.1875rem;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(51, 51, 51, 0.3);
}
.quality-capsule-switch .capsule-option {
  padding: .2rem .42rem;
  font-size: .62rem;
  font-weight: 500;
  color: #999999;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
  line-height: 1;
}

.fullscreen-switch {
  position: absolute;
  right: .7rem;
  bottom: .7rem;
  z-index: 100;
}
.fullscreen-switch .fullscreen-btn {
  width: 1.58rem;
  height: 1.58rem;
  padding: 0;
  display: grid;
  place-items: center;
  color: #55515d;
  background: rgba(248, 249, 250, .78);
  border: 1px solid rgba(51, 51, 51, .24);
  border-radius: .38rem;
  box-shadow: 0 1px 3px rgba(10, 10, 10, .12);
  cursor: pointer;
  font-family: Arial, sans-serif;
  font-size: 1.15rem;
  line-height: 1;
}
.fullscreen-switch .fullscreen-btn:hover { background: rgba(255, 255, 255, .96); }
.quality-capsule-switch .capsule-option:hover:not(.active) {
  color: #666666;
}
.quality-capsule-switch .capsule-option.active {
  background-color: #ffffff;
  color: #333333;
  box-shadow: 0 1px 3px rgba(10, 10, 10, 0.1);
}

@keyframes hint-fade-in {
  from {
    opacity: 0;
    transform: translateY(0.625rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.loading-hint {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #666666;
  font-size: 0.875rem;
  pointer-events: none;
}

@media (max-width: 768px) {
  .camera-mode-switch {
    bottom: 2rem;
    right: 1.25rem;
  }
  .camera-mode-switch .mode-icon-btn {
    width: 2.25rem;
    height: 2.25rem;
    font-size: 1rem;
  }
  .quality-capsule-switch {
    bottom: 2rem;
    right: 4rem;
    height: 2.25rem;
  }
  .quality-capsule-switch .capsule-option {
    padding: 0.25rem 0.5rem;
    font-size: 0.625rem;
  }
  .fps-monitor {
    bottom: 2rem;
    right: 7.5rem;
    height: 2.25rem;
  }
  .fps-monitor .fps-value {
    font-size: 0.75rem;
  }
  .fps-monitor .fps-label {
    font-size: 0.5rem;
  }
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .model-renderer-container .canvas {
    image-rendering: crisp-edges;
  }
}
.button-controls {
  z-index: 99;
  position: absolute;
  bottom: 3rem;
  left: 2.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  user-select: none;
  /* 防止文本选中 */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
.button-controls .key-btn {
  width: 2.25rem;
  height: 2.25rem;
  font-size: 1.125rem;
  color: #666666;
  background-color: rgba(248, 249, 250, 0.5);
  border-radius: 4px;
  border: none;
  outline: none;
  cursor: pointer;
  transition: all 0.15s ease;
  touch-action: manipulation;
  /* 优化触摸响应 */
  -webkit-tap-highlight-color: transparent;
  /* 移除移动端点击高亮 */
}
.button-controls .key-btn:hover {
  background-color: rgba(248, 249, 250, 0.7);
}
.button-controls .key-btn:active,
.button-controls .key-btn.active {
  background-color: rgba(248, 249, 250, 0.7);
  transform: scale(0.95);
}
.button-controls .base-btn {
  display: flex;
  width: 12rem;
  gap: 1rem;
  flex-wrap: wrap;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .button-controls {
    bottom: 2rem;
    left: 1.25rem;
  }
  .button-controls .key-btn {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1rem;
  }
  .button-controls .base-btn {
    width: auto;
    gap: 0.625rem;
  }
}
.load {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #050506;
  z-index: 99;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  color: #ffffff;
}
.load .progressBox {
  position: relative;
  width: min(920px, 82%);
  height: min(310px, 72%);
  text-align: center;
}
.load .progressBox .textTip {
  position: absolute;
  top: calc(50% + min(88px, 26%));
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: 13px;
  margin: 0;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: Inter, "Noto Sans SC", "Microsoft YaHei", sans-serif;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.load .pc-loader-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.load .pc-loader-label {
  color: rgba(244, 239, 247, .68);
  font-size: clamp(12px, 1vw, 15px);
  letter-spacing: .16em;
  animation: pc-loader-label-breathe 2.9s ease-in-out infinite;
}

.load .pc-loader-divider {
  width: 1px;
  height: 14px;
  background: linear-gradient(to bottom, transparent, rgba(208, 174, 228, .42), transparent);
  animation: pc-loader-divider-breathe 2.9s ease-in-out .18s infinite;
}

.load .pc-loader-percent {
  min-width: 3.7ch;
  color: rgba(238, 220, 248, .94);
  font-family: Inter, "SFMono-Regular", Consolas, monospace;
  line-height: 1;
  text-align: left;
  animation: pc-loader-number-breathe 2.9s ease-in-out .34s infinite;
}

.load .pc-loader-percent-value {
  font-size: clamp(17px, 1.45vw, 21px);
  font-weight: 500;
  letter-spacing: -.04em;
}

.load .pc-loader-percent-mark {
  margin-left: 3px;
  color: rgba(215, 184, 234, .62);
  font-size: clamp(9px, .72vw, 11px);
  vertical-align: .14em;
}

@keyframes pc-loader-label-breathe {
  0%, 100% { opacity: .54; text-shadow: 0 0 0 rgba(205, 168, 226, 0); }
  50% { opacity: .92; text-shadow: 0 0 11px rgba(205, 168, 226, .16); }
}

@keyframes pc-loader-divider-breathe {
  0%, 100% { opacity: .28; }
  50% { opacity: .78; }
}

@keyframes pc-loader-number-breathe {
  0%, 100% { opacity: .68; text-shadow: 0 0 0 rgba(190, 128, 225, 0); }
  50% { opacity: 1; text-shadow: 0 0 13px rgba(190, 128, 225, .24); }
}

/* 响应式布局：手机端样式 */
@media (max-width: 768px) {
  .load .progressBox {
    width: 94%;
    height: min(180px, 72%);
  }
  .load .progressBox .textTip {
    top: calc(50% + min(58px, 27%));
  }
}

@media (prefers-reduced-motion: reduce) {
  .load .pc-loader-label,
  .load .pc-loader-divider,
  .load .pc-loader-percent {
    animation: none;
  }
}

/* Pricing embeds preload in place and use the light presentation. */
.roam-container--pricing-embed,
.roam-container--pricing-embed .model-renderer-container,
.roam-container--pricing-embed .model-renderer-container .canvas,
.roam-container--pricing-embed .load {
  background-color: #ffffff;
}

.roam-container--pricing-embed .load,
.roam-container--pricing-embed .loading-hint {
  color: #68636a;
}

.roam-container--pricing-embed .load .pc-loader-label {
  color: rgba(75, 66, 79, .72);
}

.roam-container--pricing-embed .load .pc-loader-divider {
  background: linear-gradient(to bottom, transparent, rgba(123, 75, 153, .38), transparent);
}

.roam-container--pricing-embed .load .pc-loader-percent {
  color: rgba(92, 49, 125, .92);
}

.roam-container--pricing-embed .load .pc-loader-percent-mark {
  color: rgba(112, 76, 137, .66);
}

.roam-container--pricing-embed .quality-capsule-switch {
  display: none !important;
}