.three-scene-root {
  position: fixed;
  inset: 74px 0 0 280px;
  z-index: 20;
  overflow: hidden;
  pointer-events: none;
}

.three-scene-root[data-active="true"] {
  pointer-events: auto;
}

.three-scene-root > canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.legacy-experiment[data-testid="speed-experiment"] .legacy-scene-viewport.speed-3d-active {
  position: relative;
  display: block;
  min-height: 390px;
  aspect-ratio: 800 / 460;
  overflow: hidden;
  background: #e5f1f8;
}
.speed-3d-active > .legacy-scene { display: none; }
.speed-3d-host { position: absolute; inset: 0; }
.speed-3d-host canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.speed-3d-host canvas:active { cursor: grabbing; }
.speed-3d-host canvas:focus-visible { outline: 3px solid #278f9c; outline-offset: -3px; }
.speed-3d-hud { position: absolute; top: 12px; right: 14px; display: flex; flex-direction: column; gap: 5px; pointer-events: none; color: #293f4b; background: rgb(247 250 248 / 92%); border: 1px solid #cbdcdf; border-radius: 8px; padding: 9px 12px; font-size: 13px; }
.speed-3d-hud span { font-size: 16px; font-weight: 600; line-height: 1.5; font-variant-numeric: tabular-nums; white-space: pre; color: #526c76; }
.speed-3d-hint { position: absolute; bottom: 8px; right: 12px; margin: 0; color: #536c77; font-size: 11px; pointer-events: none; }
.energy-kinetic .energy-scene-container.kinetic-3d-active { display: block; min-height: 370px; aspect-ratio: 2 / 1; background: #e5f1f8; }
.kinetic-3d-active > .energy-scene { display: none; }
.kinetic-3d-host { position: absolute; inset: 0; }
.kinetic-3d-host canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.kinetic-3d-host canvas:active { cursor: grabbing; }
.kinetic-3d-host canvas:focus-visible { outline: 3px solid #278f9c; outline-offset: -3px; }
.kinetic-3d-labels { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.kinetic-3d-label { position: absolute; transform: translate(-50%, -50%); padding: 2px 5px; border-radius: 3px; background: #f7faf8; color: #293f4b; font: 600 12px/1.3 system-ui, sans-serif; white-space: nowrap; }
.kinetic-3d-label[hidden] { display: none; }
.kinetic-3d-label-ruler { padding: 1px 4px; font-variant-numeric: tabular-nums; }
.kinetic-3d-label-wood { border: 1px solid #b68a55; background: #fff8ed; color: #68421d; font-size: 14px; font-weight: 700; }
.kinetic-3d-hud { z-index: 2; }
.kinetic-3d-hud { position: absolute; top: 12px; right: 14px; display: flex; flex-direction: column; gap: 5px; pointer-events: none; color: #293f4b; background: rgb(247 250 248 / 92%); border: 1px solid #cbdcdf; border-radius: 8px; padding: 9px 12px; font-size: 13px; }
.kinetic-3d-hud span { color: #526c76; font-variant-numeric: tabular-nums; }
.kinetic-3d-hint { position: absolute; bottom: 8px; right: 12px; margin: 0; color: #536c77; font-size: 11px; pointer-events: none; }
.legacy-finish-control { margin-top: 18px; }
.legacy-finish-help { margin: 8px 0 0; color: #637087; font-size: 12px; line-height: 1.5; }
@media (max-width: 640px) {
  .energy-kinetic .energy-scene-container.kinetic-3d-active { min-height: 280px; aspect-ratio: 4 / 3; }
  .kinetic-3d-hud { right: 8px; top: 8px; padding: 6px 8px; font-size: 11px; }
  .legacy-experiment[data-testid="speed-experiment"] .legacy-scene-viewport.speed-3d-active { min-height: 300px; aspect-ratio: 4 / 3; }
  .speed-3d-hud { right: 8px; top: 8px; padding: 6px 8px; font-size: 12px; }
  .speed-3d-hud span { font-size: 14px; }
}

.legacy-experiment[data-testid="motion-experiment"] .legacy-scene-viewport:not(.motion-3d-fallback) {
  position: relative;
  display: block;
  min-height: 380px;
  aspect-ratio: 800 / 430;
  overflow: hidden;
  background: #dceefa;
}

.legacy-experiment[data-testid="motion-experiment"] .legacy-scene-viewport:not(.motion-3d-fallback) > .legacy-scene { display: none; }
.legacy-experiment[data-testid="motion-experiment"]:not(:has(.motion-3d-fallback)) :is(.legacy-reference, .legacy-motion-readout, .legacy-thinking) { display: none; }
.legacy-experiment[data-testid="motion-experiment"]:not(:has(.motion-3d-fallback)) .legacy-footer > p:first-child { display: none; }
.motion-3d-host { position: absolute; inset: 0; }
.motion-3d-host canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.motion-selection-outlines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; }
.motion-selection-outlines path { fill: none; stroke-width: 3px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.motion-3d-host canvas:focus-visible { outline: 3px solid #3d8193; outline-offset: -3px; }
.motion-selection-guide { margin: 0 0 10px; padding: 10px 12px; border: 1px solid #c9dbdb; border-radius: 8px; background: #eef5f4; color: #315c63; font: 600 13px/1.5 system-ui, sans-serif; }
.motion-comparison { min-width: 0; margin: 0; border: 1px solid #dce5ec; border-radius: 14px; background: #fff; box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%); overflow: hidden; }
.motion-comparison-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 14px; border-bottom: 1px solid #e6edf2; }
.motion-comparison-head h2 { margin: 0; font-size: 17px; line-height: 1.4; }
.motion-comparison-head span { color: #617184; font: 600 13px/1.4 Cambria Math, Cambria, serif; white-space: nowrap; }
.motion-comparison-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.motion-comparison-grid > div { min-width: 0; padding: 8px 14px; }
.motion-comparison-grid > div:nth-child(odd) { border-right: 1px solid #edf1f4; }
.motion-comparison-grid > div:nth-child(-n + 2) { border-bottom: 1px solid #edf1f4; }
.motion-comparison-grid span { display: block; color: #607984; font-size: 12px; line-height: 1.4; }
.motion-comparison-grid strong { display: block; margin-top: 3px; color: #244f5c; font-size: 16px; line-height: 1.4; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.motion-comparison-grid > div:first-child strong { color: #a56834; }
.motion-comparison-grid > div:nth-child(2) strong { color: #3d8193; }
.legacy-experiment[data-testid="motion-experiment"]:not(:has(.motion-3d-fallback)) .legacy-caption { display: none; }

@media (max-width: 900px) {
  .three-scene-root {
    left: 0;
  }
}

@media (max-width: 640px) {
  .legacy-experiment[data-testid="motion-experiment"] .legacy-scene-viewport:not(.motion-3d-fallback) {
    min-height: 300px;
    aspect-ratio: 4 / 3;
  }
}
.buoyancy-experiment .forces-viewport.buoyancy-3d-active { position: relative; display: block; min-height: 400px; overflow: hidden; background: #e8f3fb; }
.buoyancy-3d-active > .buoyancy-scene { display: none; }
.buoyancy-3d-host { position: absolute; inset: 0; }
.buoyancy-3d-host canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.buoyancy-3d-host canvas:focus-visible { outline: 2px solid #94d9f5; outline-offset: -2px; }
.buoyancy-3d-views { position: absolute; top: 12px; left: 14px; display: flex; gap: 6px; }
.buoyancy-3d-views button { min-height: 34px; padding: 5px 11px; border: 1px solid #b5c7d1; border-radius: 5px; background: #fff; color: #334c5b; font: 600 13px/1.4 system-ui,sans-serif; cursor: pointer; }
.buoyancy-3d-views button[aria-pressed="true"] { background: #1976d2; border-color: #1976d2; color: #fff; }
.buoyancy-3d-views button:focus-visible { outline: 2px solid #1976d2; outline-offset: 2px; }
.buoyancy-3d-hint { position: absolute; bottom: 10px; left: 14px; color: #536b78; font: 11px/1.4 system-ui,sans-serif; pointer-events: none; }
@media(max-width:640px) { .buoyancy-experiment .forces-viewport.buoyancy-3d-active { min-height: 350px; } }
.friction-stage.friction-3d-active { background: #edf3f5; min-height: 420px; }
.friction-3d-active > .friction-scene { display: none; }
.friction-3d-host { position: absolute; inset: 0; overflow: hidden; }
.friction-3d-host canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.friction-3d-host canvas:active { cursor: grabbing; }
.friction-3d-host canvas:focus-visible { outline: 2px solid #1976d2; outline-offset: -2px; }
.friction-3d-label { position: absolute; transform: translate(-50%,-50%); padding: 2px 5px; background: rgb(250 252 253 / 94%); border-radius: 4px; font: 600 13px/1.4 "Microsoft YaHei",sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; }
@media(max-width:640px) { .friction-stage.friction-3d-active { min-height: 330px; } .friction-3d-label { font-size: 11px; padding: 1px 3px; } }